Show HN: Edtr.io – Intuitive web editor, open source and fully adaptable | Hacker News Reader

Show HN: Edtr.io – Intuitive web editor, open source and fully adaptable

edtr.io

234 pointsSplishCrew56 comments

This is really nice. One note: the landing page doesn’t mention the MIT license or commercial use. I had to go to the repo to figure it out.

Would love to look into integrating this editor in our email client. Is there an easy way for us to chat?

Yes, landing page only mentions Open Source, maybe we should clarify that.

You can reach us at edtr-io@splish.dev

Are you on discord or matrix by any chance?

Nope, sorry. If you send us an email, we can work something out :)

~~Why does one have to send an email just to ask about license?~~

Edit: As people had pointed out, that they were asking for chat to integrate it into the email client. Sorry for the confusion.

As specified in their comment and in our GitHub repository, the code is licensed under MIT.

They were sharing their email address because upstream commenter asks "is there a way we can chat?"

If you're going to use it commercially, don't miss https://grapesjs.com/ It has a much more stable API, UIs and it has an MJML preset. Under a permissive BSD-3 license.

Thanks, I’ll have a look!

Some bugs I spotted relating to the gear settings interface: Some bits of the interface seem to be in German. E.g. click on a paragraph of text and hover over or click the gear icon. The modal from clicking the gear also has two separate close buttons. Changing the icons of the Experience points doesn't seem to work, and nor does duplicate/remove.

The "add element" "+" button only sometimes seems to work, and when trying to add a paragraph of text, anything I type is immediately removed.

This looks really cool but I think maybe an image on the landing page might help

I thought that until I realized that image that's there IS the actual editor

The entire page is editable and a live demo. It could probably be higher up, but it is mentioned on the page.

Wow. Ok Thank you. This morning looking at it I was blind to those widgets.

> Try for yourself: You may not have noticed, but you are already in edit mode! Just click anywhere in the text to edit

On my screen (1080p) I have to scroll to see this and it's in plain small body text, doesn't stand out at all.

Additionally to the sibling comments: you can also check out the demo at demo.edtr.io that contains way more plugins. It’s pretty much what we use on Serlo.org.

Criticism: Cmd+left/right/up/down doesn't work - instant dealbreaker.

What you’d prefer they do? Moving rows around?

Probably nothing: they already exist in Chrome as, respectively, next/previous / top/bottom of the page. Edtr.io appears to hijack them for no reason.

I see, thanks for the feedback. Going to check that out.

Much other keyboard accessibility is also painfully broken. It’s basically only usable by mouse. Up/Down do the wrong thing almost every time (though within a multi-line paragraph, sometimes they do the right thing, but it’s not consistent).

Getting keyboard navigation reasonably right everywhere will be very difficult. Ironing out the remaining platform differences may be even more difficult.

I also broke it (a nondescript TypeError once, “invariant broken” another time) fairly quickly, by tabbing to the cog thing, Space, tab to the Duplicate button, Space—where clicking didn’t achieve that.

So this is built on Slate—what does it bring to the table that you can’t do with Slate out of the box?

Core contributor of Edtr.io here:

Slate works well for editing text. Anything with a more complicated layout / UX gets really messy though, since with Slate, you always have to deal with the DOM / Slate's wrapper around contenteditable. And at least before Slate 0.50+, we (& the developers of Schul-Cloud independently of us) ran always in bugs, etc. This is why Edtr.io (similarly to ReactPages, fka ORY Editor) builds it own state management & layouting outside of Slate. And let Slate do what they do best, editing rich-text.

Here's the problem relying on slate (I've used it and all the others [quill, ckeditor, etc etc]) -- you are also relying on Ian Storm Taylor and he's known for going on a streak and re-writing things in a breaking manner. IMO you should just build the entire thing yourself.

That’s one of the reasons we only rely on Slate for our text plugin. So we could swap Slate for some different rich-text editor in the future if we need to. Though I have to say, we are very happy with Slate.

Nice. I honestly have been looking for something like this for awhile. All the examples I found with slate were either insufficient or outdated (i.e. canner editor) -- and in a focus on speed (being a solo founder), I couldn't compromise. I'm going to try to implement this for my editor on my site. Would be cool to be able to publish content with custom components (closest I could find for CKEditor [which I'm using] is: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/...) -- but the implementation for that is rather clunky (more so on the render side -- e.g. how do I save the data in my database such that I know which components to call? CSS classes? data attributes?) So the underlying structure of having JSON for the data structure with Slate (and now this) gives me more confidence as a dev.

Would love to hear from you on how it goes :)

Try ProseMirror. There’s a high learning curve at the beginning, but it’s pretty simple to make custom nodes and plugins once you understand the framework and APIs.

> "... and re-writing things in a breaking manner. IMO you should just build the entire thing yourself."

Well that could be said for literally any 3rd party library. New updates may break things, that's why you need to pin the exact version you use to prevent things breaking.

I would rather use a library which has been tested and used by many people, than reinvent the wheel on a bunch of things...

Looks good and am glad that editing text works on mobile (so many of these struggle with predictive text, even Google CoLabs's text boxes gets stuck on that)

However when you go to add a hyperlink on mobile, it's not adding it where the cursor is, instead adding it at the start of the current line.

Am seeing this on latest Chrome on Android 10.

https://vimeo.com/121721311

So can I put this on my site to kind of make a cms for my site to add pages or blogs/blog posts etc?

Kinda. You can integrate it into your existing CMS to make the editing (for your end users) easier, especially for “enriched” content (think interactive content, complex layout)

Not sure how it’s pronounced, `ed-trio`?

What is a “web editor”? Is that establish as terminology for this type of wyswiyg editor?

Does it or doesn’t it support mobile? It mostly doesn’t work but with some fiddly stubbornness I was able to get a few of the controls to do something.

It’s pronounced Editor IO.

Web editor in the sense that the editor runs as a web app, and the default rendering output is React (although other output formats are possible).

Mobile kinda works (minimum goal is to let users do simple edits from mobile), but we mostly focused on the desktop so far.

I was thinking of building something similar. Any other alternatives to similar solutions?

Prosemirror seems to be one of the most pluggable block editors out there. For the vue.js community, tiptap is built on prosemirror. Slate (which this is built on) is good too.

Slate is in beta and isn’t stable yet last time I heard.

IMHO still the best there is, at least in the React space. But yeah, stuck in beta for what feels like forever.

Gutenberg, it can be decoupled from Wordpress. But you can start searching for tinymce alternatives and you will found hundreds

There are LOTS of competitors, but of course, not all are apples to apples.

Here is a partial list of some of the more active wysiwyg editors:

   Quill: https://quilljs.com
   Slate: https://www.slatejs.org  
   Trumbowyg: https://alex-d.github.io/Trumbowyg
   ContentTools: http://getcontenttools.com
   SummerNote: https://summernote.org
   Squire: https://github.com/neilj/Squire
   Editor.js: https://codex.so/editor
   ProseMirror: https://prosemirror.net/

I have personally been happy with Quill (the have their own system for storing text which is interesting.

Many of these have active branches, especially in Vue or React etc.

Best I could find would be: https://github.com/chanzuckerberg/czi-prosemirror but they kinda stopped working on it.

An example of a library using React and ProseMirror is from Outline, which is switching from Slatejs: https://github.com/outline/rich-markdown-editor/pull/150.

more of a complete CMS but has wysiwyg editing and UI blocks - https://webiny.com

Sven, the founder of Webiny here. At the moment we have a drag&drop editor, but we will soon launch a headless offering as well.

Also to add, we are the only self hosted serverless on the market. So if you want to benefit from the scalability and lower price that aws lambda provides, compared to a traditional VMs, Webiny is the way to go.

Gutenberg https://wordpress.org/gutenberg/

Odoo has a full CMS with advanced page builder: https://www.odoo.com/page/website-builder

Layouts seem broken. Dialogs that are mostly empty space and icons that overlap borders.

This was all I noticed... not a great look. Hope they fix it because it could be cool.

Is it possible to embed the editor on a web page?

Yes, it’s Backend-agnostic and designed to be embeddable into any web app. It’s basically an editor framework to define your own editor and you write the glue code to your web app.

TBH my suggestion is to work on making this more clear of who it's for. Maybe add a comparison to other current solutions out there, since at first I was a bit confused what it's trying to do. Maybe use like intro.js or something for it.

Yeah, but it only makes sense to do so on a page that already is using react. If you are using some other JS framework it will add 140kb dep on react+react-dom - which might be a problem (or not depending on your use case).

Definitely a good point. Just wanted to note that you could write a renderer in some server language that outputs static HTML. And only use the editor to make that static content editable (loaded asynchronously or on a different route). The serialized state is easy to parse by design.

That is an excellent idea!

Reply on news.ycombinator.com