4 ms·

If you’re interested in customizing a web-based (rich) text-editor, I can’t recommend enough the underlying library, SlateJS (http://slatejs.org http://slatejs.

by niark 8y ago

If you’re interested in customizing a web-based (rich) text-editor, I can’t recommend enough the underlying library, SlateJS (http://slatejs.org http://slatejs.org). I’ve been relying extensively on it for a quite big project, it’s been a pleasure to use. Especially if you need to change the editor’s content programmatically.

simplify 8y ago
How does SlateJS compare with ProseMirror from a dev's point of view?
humblebee 8y ago
SlateJS is a really neat way to handle rich text editing. I worked shortly on a project to build a rich email client with SlateJS being the underlying library to power the editor. This introduced some interesting issues though around finding the correct way to serialize and deserialize the html due the way that slates core plugins normalize the slate state when working with the different node types (block, inline, mark, text). The main issue is how to properly associated each html element to a node type, and fit within the core plugin normalization. This is difficult for having to deal with arbitrary html coming from all the different kinds of email client that choose to represent the html structure in their own unique way. However, this is also where SlateJS shines I believe, as you can just normalize all the different html formats into a single representation. strong, b, font[style="font-weight:*"], etc => Mark Bold The library has probably changed quite a bit (last I used it was v0.21), so I don't know if my issues are even there anymore, or have changed in some way since. Overall though, SlateJS is a really neat project, and really fairly simple, and allows for some awesome things to happen in text editors that previous I would believe to be fairly complicated. This is all thanks to the fact that nodes in the slate state can be rendered as rich ReactJS components. A simple example of this for our use cases was around using template variables in an html email template. I never got around to actually doing this bit, but a variable could be it's own unique node type in the slate state, and allow us to inject a special react component that would make working with the variables much nicer for our users. In the production editor at the time, these variables were just handle bars `{{ first_name }}`, which a lot of customers accidentally would mess up as they had to write out the syntax. With SlateJS the vision was to simply render a Variable component that would serialize back down into handle bars, or later down the road take the json serialization of the slate state and render that into our own html for sending out. I really like the patterns SlateJS uses, and I'm excited for any future projects that will allow me to work with it again.

by niark 8y ago

simplify 8y ago

How does SlateJS compare with ProseMirror from a dev's point of view?

humblebee 8y ago

SlateJS is a really neat way to handle rich text editing. I worked shortly on a project to build a rich email client with SlateJS being the underlying library to power the editor. This introduced some interesting issues though around finding the correct way to serialize and deserialize the html due the way that slates core plugins normalize the slate state when working with the different node types (block, inline, mark, text). The main issue is how to properly associated each html element to a node type, and fit within the core plugin normalization. This is difficult for having to deal with arbitrary html coming from all the different kinds of email client that choose to represent the html structure in their own unique way. However, this is also where SlateJS shines I believe, as you can just normalize all the different html formats into a single representation. strong, b, font[style="font-weight:*"], etc => Mark Bold The library has probably changed quite a bit (last I used it was v0.21), so I don't know if my issues are even there anymore, or have changed in some way since. Overall though, SlateJS is a really neat project, and really fairly simple, and allows for some awesome things to happen in text editors that previous I would believe to be fairly complicated. This is all thanks to the fact that nodes in the slate state can be rendered as rich ReactJS components. A simple example of this for our use cases was around using template variables in an html email template. I never got around to actually doing this bit, but a variable could be it's own unique node type in the slate state, and allow us to inject a special react component that would make working with the variables much nicer for our users. In the production editor at the time, these variables were just handle bars `{{ first_name }}`, which a lot of customers accidentally would mess up as they had to write out the syntax. With SlateJS the vision was to simply render a Variable component that would serialize back down into handle bars, or later down the road take the json serialization of the slate state and render that into our own html for sending out. I really like the patterns SlateJS uses, and I'm excited for any future projects that will allow me to work with it again.