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.
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.
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.
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.
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.
> "... 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...
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.
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.
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.
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)
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.
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.
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.
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.
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.
Would love to look into integrating this editor in our email client. Is there an easy way for us to chat?