Slate JS – A customizable framework for building rich text editors | Hacker News Reader

Slate JS – A customizable framework for building rich text editors

docs.slatejs.org

420 pointsmigueloller113 comments

I've used Slate in a production application for about 2 years now, as part of a CMS for medical professionals to write rich content for other medical professionals and patients.

They tend to write the initial content in MS Word which they are comfortable with and then paste into the editor, then the editor has to reconcile this according to the site's structural elements. Then for editing, this works fantastically well, and allows more complex widgets and unusual design elements to be embedded and edited in the WYSIWYG context in the editor.

When the system was first being built we trialed 10-20 or so other solutions in this space, many with the same design concepts as Slate, but something about this stuck. Just brilliant.

How do you handle paste from word? Could you share some code? :)

Curious also about any gotchas, etc.

Here is "DOM canibalizer" module from my HTML-NOTEPAD ( https://html-notepad.com ) :

https://github.com/c-smile/sciter-sdk/blob/master/notepad/re...

While it looks pretty simple it cleans MS Word and browser artifacts in pasted markup pretty well.

But I shall admit that such simplicity is possible only with sciter (that html-notepad is based on). E.g. that canonicalizeDOM gets called before the content appears in target document. So all this does not affect undo/redo stack, etc.

Also very interested in this, we've had issues with dealing with reconciling external copy and pasting.

It seems to somewhat work in the Paste HTML example [0], for which the source is available [1]. I just did a cursory test with some simple formatting, so YMMV, but it may be a good starting point.

[0] https://www.slatejs.org/#/paste-html [1] https://github.com/ianstormtaylor/slate/tree/master/examples...

My issue is mainly that Word doesn't really maintain the same structured hierarchy in the XML that HTML would – it's more like a sequential format. The users wanted a way to indicate certain types of content or annotations and they do so via coloring text in certain ways – but I found in practice this is very hard to reconcile since there is a lot of invisible formatting in word, the element may terminate and start again, with a new invisible element in between. Invisible to the user - but very visible to the parser.

Essentially it's a balance of attempting to remove all the spurious elements (`<o:p>`, or invisible empty formatting, etc.) and then reason about what remains. Much of that involves a lot of walking the tree to inspect neighbouring nodes because them being co-located can indicate something.

Look you may be recoiling in horror by now – it sounds horrific. Actually what we have is a remarkably stable system all things considered but it was built up over time. I think the only approach you can take is write a large amount of unit tests for the schema normaliser, with real MS-word samples and expected outputs, and then really put the system through its paces. Every time you find an example that breaks your model, add a unit test for that snippet, and evolve.

God forbid a Word update ever introduces a new format.

(CKEditor team member speaking) Proper handling pasting from Word really takes a lot of time and it's hardly possible to provide a high quality solution alone. We will deliver some basic (in our understanding) support for pasting from office in our most recent editor (https://ckeditor.com/ckeditor-5/) in 2-3 weeks and it already took long weeks of development (see https://github.com/ckeditor/ckeditor5-paste-from-office/issu...), even with our years of experience in rich text editing and with this particular feature.

If pasting from Word is absolutely critical feature for you you may want to check older editors on the market, like CKEditor 4 or even... TinyMCE, one of our competitors. These editors are on the market for 6+ years and had enough time and people to deal with the crap that MS Word produces - correctly preserving as much formatting as possible, without wasting a lot of your end users time on recreating the same content again in an online rich text editor.

Off topic, but I'm curious, can you tell me more about the CMS application?

It was an attempt to provide a resource for comprehensive, in-depth, accessible information for maxillofacial / heck & neck patients and practitioners. Part of the movement of empowering patients by giving them the information traditionally held by clinicians, but also helping clinicians to be aware of scientific research from adjacent disciplines that might be useful.

The CMS design comes into it because when you have a larger collection of non-technical authors you need an accessible way to manage the content. This was how it was initially conceived anyway - in practice more development time had to go towards handling the users' existing workflow (MS Word) rather than migrating them into the CMS directly. A real eye-opener for me about user-centred design..

https://maxfacts.uk

Very cool project - thanks for giving me the background. Just clicked around and enjoyed checking it out. Sounds like you learned a lot and built a valuable tool, well done!

I have been dealing with paste-from-word issues as well. The biggest issue is ordered lists. Word is very smart about keeping the ol going even if there are extra linebreaks in between list items. Most rich text editors mess up this enumeration when pasted from Word. One thing I noticed about slate.js is that it simply converts the ol into text, which keeps the correct numbering. This is a successful solution.

And my question to HN is: why do our web app users keep typing in Word first? I save drafts in local storage, but they still use Word first. Is it the formatting familiarity? Is it a Start Menu shortcut? What is it? What can we do to address users not using our web apps first?

I think they are comfortable with it from using it for a long time.

In fact I find people do everything in MS Office products, generally in ways you wouldn't necessarily expect the software to be used. E.g. PowerPoint is the de facto tool for designing conference posters. To create 'versions' of documents, people will copy and paste the file and add a number at the end.

I think we often get so myopic about our perspective on technology that we forget that non-technologists have a vastly different relationship with it.

We're using Slate to for a mid-sized react application where content editing is the core. I don't want to link/plug a product video showing you how it works but imagine dropbox paper, medium editor, CKeditor 5, ...

The implementation includes mentions, pretty complex gallery/inline image functionality, galleries with size/output controls, embeds (iframely) and other inline elements.

First we had TinyMCE, Redactor, DraftJS and then switched to Slate.

I would not say it's smooth sailing from here, we're mostly struggling with pasting from word, tables, mobile support and overall performance with the number of plugins, but working on it.

What was the main reason for switching from draftjs to slate? Just curious since we’ve been working on various tools in the space (not directly related to either). Was it an api design issue or more a plugin/ecosystem issue?

We just had too many problems to modify it + it seemed facebook had completely abandoned the project.

Can't speak for OP, but draftjs didn't work well on mobile at all for a major project I tried to use it in. Had to migrate off of it.

Moving from updating state via state diffs (Draft) to discrete operations (Slate) is a huge architectural advantage, among other things.

Pasting from word and mobile support are two things I struggled with on draft. How much easier or difficult it is with slate in your experience?

I wish you would post a product link. For me personally, I really enjoy when some library or what have you front pages, and people post a mix of comments and products showing off its usage or an alternative to it.

Based on their comment history, it's Prezly: https://www.prezly.com/

Here are 2 wistia video's on images in slate specifically. The one on the bottom includes images + galleries

https://www.prezly.com/news/the-different-ways-to-use-images...

interesting, I am using TinyMCE and paying them for the PowerPaste plugin, figure a team that manages pastes from Word will do a better job than I could, and $1850/year.. I couldn't easily make that feature and maintain it for that money.

I am surprised there is no open source tool for cleaning up pastes from word and giving you HTML.

Similar story here - started with DraftJS but it was kind of cumbersome. Slate in comparison is much more flexible and we've been using it in production for almost a year now. In fact we just launched a sticky notes project management tool which features a smooth rich text editing based on slate https://whimsical.co/sticky-notes/

So, I have to ask why whimsical.co's navigation is so counter-intuitive? Why do arrow keys move the screen the opposite direction, and why is there no drag and drop? I am not trying to be aggressive, I just want to understand the design decision?

Note that though this lists ProseMirror as one of the evaluated editors, followed by a bullet list of issues, only one of those issues can reasonably be considered to apply to ProseMirror—and that's "Re-inventing the view layer", i.e. "doesn't use React", which can arguably be an advantage.

Absolutely brilliant editor! I use it for my projects - https://writingstreak.io and https://nulis.io.

I've also recommended http://letterpad.app/ to use it and they've switched to it now.

I'm a huge fan, it's insanely powerful and customizable, you can build anything you want with it.

The only problem is lack of documentation and tutorials, it's really hard to figure out how to use it beyond the very basics (for me at least). They do have a great community in the slack channel, they've helped me a lot, but better docs would make a huge difference.

[OT] Writingstreak is very interesting, and the gamification looks promising. I'm not sure I have the time to write on a daily basis, but be asured I'll think about it and eventually register.

Thanks for sharing.

[OT too] Second that. I just wish there was more info on where the data is stored, etc. Looks a bit immature right now.

nulis.io is freaking cool! Do you ever think of having vim-like navigation mode for it?

We just migrated from Draft to Slate for Riot.im: https://github.com/matrix-org/matrix-react-sdk/pull/1890

In general it’s been a massive improvement, with the nasty catch that IME input doesn’t work reliably, impacting CJK languages and similar: https://github.com/vector-im/riot-web/issues/7665.

hey - we are considering moving to riot/modular as well from Hipchat. We love that you guys use Matrix.org underneath and that its opensource.

There were a couple of irritating UI bugs around the editor that we were waiting for. this is good to hear and thanks for your work!

P.S. also the android app .... kind of needs a lot of work, but im hopeful

we're making good progress in a ground-up rewrite of the android app in kotlin with realm and Rx (https://github.com/vector-im/riot-android-redesign-PoC/tree/...), which is an unrecognisable improvement.

meanwhile on riot-web we're doing our best to track down the remaining Slate-related composer glitches!

Good to know. I may have added a comment to one myself - especially around copy pasting code in the editor.

Also, just so you know... there's a lot of confusion around riot with your multiple names:

vector.im - name of the company. No social media presence.

riot.im - name of the webapp. This is your twitter handle.

modular.im - name of your hosted product where you are actually making money. For a mission critical product, you dont even have a contact-us email. You also dont have a list of features - you are assuming people who come here are super aware of Matrix features. Even this is so much better - https://docs.google.com/spreadsheets/d/1-UlA4-tslROBDS9IqHal...

matrix.org - half the UI source code is here (other the API reference implementation which is the only thing that a standards organization should have). So where do we file bugs ? on vector-im/riot-web (!!) or matrix.org .

As of Aug 2018, the only skin that exists is vector-im/riot-web; it and matrix-org/matrix-react-sdk should effectively be considered as a single project (for instance, matrix-react-sdk bugs are currently filed against vector-im/riot-web rather than this project).

Its super weird and confusing. Riot is a cool name (and my personal favorite)... but use anything you want. Just have one name - Gitlab does this so very well (with both its open source product and hosted product)

FYI, kept hitting this stacktrace in the demo:

    in a
    in a
    in a
    in div
    in Styled(div)
    in div
    in a
    in a
    in a

PR to fix it here: https://github.com/ianstormtaylor/slate/pull/2412

I feel like some of the biggest difficulties Rich text editors in browsers face nowadays are supporting social media type inputs like mentions, hashtags, emojis, etc. while still maintaining the classic rich text selections. DraftJs is the only one that achieved that for me, I had to do some serious elbow grease to get functioning hashtags in Redactor (another rich text editor). SlateJS user mentions are far away from what users expect a mentions plugin to work like.

In which context, outside a social media website, are "mentions" a common part of text editing on the web?

Jira has mentions and it’s not social media. Basically anything with users who need to communicate(?)

Dropbox paper has mentions and I wouldn't consider it social media. Same for trello.

Tons. I think it’s a modern UX issue, and the fact that social platforms popularized an @, #, shortcut platform means even my mom (somehow) knows how to use it. It’s a stretch saying, but i feel there’s a loss for a developer/product to not take advantage of the momentum around popularized social-style tagging patterns for unrelated use cases.

Many apps that have collaboration features support some type of mentions and labels to tag users.

What exactly is lacking from the Mentions example for you?

The mention plugins is easily fixable and simple functionality. We have that fixed for a long time now.

It should not be a reason not to consider slate

What issues are you seeing with slate? I was able to integrate pretty easily several advanced mention style patterns (similar to how slack integrations work) using draftjs. Assuming how slate has addressed other draftjs design issues, I can’t imagine the api would be far off. I’m curoious since we are working in this space currently.

What's wrong with the current mentions plugin and what's preventing you from writing a new one or improving the existing one with a PR?

Take a look at quill-mention (https://github.com/afconsult/quill-mention)

Disclaimer: I made it.

I haven't found an editor that can act anything like word in relation to object placement. I should be able to drag images around and have it automatically format with my document. I should be able to resize just by dragging on the edges. Same goes for embeds, graphs, etc.

I believe wordpress has had some commercial plugins that could do this well, but I have not found an open source editor that redefines rich text editing at all.

The confluence's editor somewhat meet your needs.

Good call, though it's commercial as usual.

This is something I may switch to, if it proves to have any significant advantages over Quill (https://quilljs.com/) which we currently use.

Currently it seems to not support customising and/or creating your own blots (like here — http://quilljs.com/guides/how-to-customize-quill/#customizin...)

Also, while we're at it, syncing operations (and example of which is shown here — https://www.slatejs.org/#/syncing-operations) was a hard concept to wrap my head around until I found this — https://operational-transformation.github.io/visualization.h...

We're on quill as well - any reason you'd want to switch?

We haven't encountered any issues aside from having to write our own parsers (Delta to react native components)

Absolutely no reason to switch, from reading up on Slate in the past few hours.

I will be probably switching from quill to prosemirror because quill ignores numerous requests for shadow dom compat. It also annoyed me that its hard to get rendered delta results from it - we had some workarounds for it, maybe they provide an API for that nowdays.

I found that last link very nice!

I made a rich text editor in 2004 and last year I made another one, and nothing has changed. The most annoying thing is that contentEditable works different in different Browsers. Some browsers for example use <div> instead of <p>. And browsers will add extra HTML elements! If you for example pass in <table> the contentEditable will add a <thead> element, so you constantly have to check what the contentEditable is up to. It would probably be easier to use HTML Canvas and implement everything from scratch.

Isn't this why a bunch of wysiwg editors eschew contenteditable in the first place?

You might be interested in the video linked below on how DraftJS (which was the forerunner of SlateJS) uses the virtual DOM created by React along with contentEditable to make the same tooling work across browsers.

https://www.youtube.com/watch?v=feUYwoLhE_4

Gitbook (powering the documentation in this link) is also using Slate but they Forked it.

Here is why https://github.com/GitbookIO/slate/blob/master/Readme.md

All slate repos @ https://github.com/GitbookIO?utf8=&q=slate&type=&language=

> We are not in any case criticizing Slate's community or the work Ian has done. GitBook simply must focus on improving the experience of its users, which requires fixing core issues in our editor (mainly performances) that are impacting our business.

> Our goal is not to replace Slate with our fork within the community. We do not expect people to use our fork. If you do, you should know that we will not accept contributions that are not fully aligned with our goals.

This is how the Lucid Emacs situation should have been handled!

The examples all break if you click off the editor, then click back in on the editor.

Same here, under firefox 63.0, ubuntu 16.04

Discovered Slate last night while evaluating Draft.js for building the rich text editing experience of our WYSIWYG editor.

After running into some issues with Draft.js’ [1] Flow types, and going deep into the GitHub repo looking for solutions, I concluded that the project wasn’t receiving enough support from Facebook to invest in it. [2][3]

After discovering Slate from one of the issues, I was extremely impressed with its documentation and well designed API. The plugin system is so good it even gives me some ideas on how to design our WYSIWYG’s API.

And for people that don’t use React, while there aren’t any official plugins for other libraries yet, the source [4] is so readable that making one wouldn’t be hard at all. I’m sure contributions would be accepted for a Vue plugin, Angular plugin, or even a vanilla plugin. In the React plugin there’s a DOM plugin used already! [5]

Ian did an amazing job! Thought it was worth sharing.

[1] https://draftjs.org

[2] https://github.com/facebook/draft-js/issues/1193

[3] https://github.com/facebook/draft-js/tree/master/meta/meetin...

[4] https://github.com/ianstormtaylor/slate/tree/master/packages...

[5] https://github.com/ianstormtaylor/slate/blob/master/packages...

Looks promising. After working with and evaluating many rich text editors I usually consider building one myself as a nightmare, due to the interaction complexity and browser differences.

One thing that strikes me with this editor, similar to many others that are innovative and promising, is how Edge and mobile are not first class citizens.

That will severly limit the use case for the editor to niche products or embedded in apps build in Electron or similar.

Do they have any docs covering what's supported on mobile?

Edit: reading through their issue tracker, looks like they're going to make a good go at it, but it is hard: https://github.com/ianstormtaylor/slate/issues/2062#issuecom...

CKEditor team member here :)

If you are looking for a modern, modular editor, with a custom data model and collaboration check CKEditor 5 (https://ckeditor.com/docs/ckeditor5/latest/features/index.ht... and https://ckeditor.com/ckeditor-5/). It comes with decent mobile and Edge support already (Electron is supported too). Paste from Word will be delivered within 2-3 weeks. For collaboration we already offer a complete and stable solution out of the box where you don't have to code anything. If you are curious check https://ckeditor.com/blog/Lessons-learned-from-creating-a-ri...

I am using Slate Js and it's fantastic, though there are some caveats. Mobile support is limited, slate is still not in a stable release so there may be breaking changes, and for now you're limited to using react. But when it works, it's amazing! I really like the freedom it gives you in defining and changing your own document schema and how everything is rendered.

I think the biggest fault is a lack of virtual rendering. Slate renders the entire document so if you're doc is too big, slate starts to break fast. Virtual rendering (like in the Ace Editor) solves the problem.

The markdown shortcuts example, is an absolute joy to use https://www.slatejs.org/#/markdown-shortcuts You type in markdown and you see formatted text

I would love to see this in use for comments on HN, Reddit, Github and everywhere else.

Rich text editors' complexity is far beyond ordinary programmer's imagination, especially when complex script (like Arabic) is in it.

It is really good to see they have RTL support.

-- However they messed up when using composing IMEs :(

"Built on top of react", sorry at least for now it is too big of a dependency for most projects that are not react based. IMO that disqualifies it from being "framework for building rich text editors".

Which framework (or non) are you using, if not react? Just curious, or what would be a better (web related) base?

"Better" is a subjective thing. Currently I use lit-element base class for web components, but I plan to try stencil and vue to see how it feels like. At work we also use react for some projects.

I agree, thanks for sharing notes.

Oh, thanks for pointing that out, I totally missed it. I use VueJS, so this would be a pass from me.

I think prosemirror is a good option here, it is framework agnostic solution from codemirror author (I did not use it personally yet).

The core actually doesn’t rely on React at all, allowing interop with any front-end framework, or even vanilla JS. The current plugins provided officially are React plugins, but other plugins can be built for Vue, Angular, etc.

I opened package.json I can see:

    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-emotion": "^9.2.4",
    "react-hot-loader": "^3.1.3",
    "react-portal": "^4.1.5",
    "react-router-dom": "^4.3.1",
    "react-values": "^0.3.0",

Looks like it requires react+vdom to me to be functional, Core has a peer dependency on react too.

It does at the moment based on the manifest, but after exploring the source, it's clear that this can easily be changed.

If you are looking for a completely framework-agnostic rich text editor, then check CKEditor 5 (https://ckeditor.com/ckeditor-5/). It comes with it's own UI library which you can swap freely with any other UI thanks a to highly decoupled architecture.

Really cool to see this. I built temi.com on this. You can check out a demo here: https://www.temi.com/good-audio-quality

Very nice tool to correct the auto-generated transcript, bookmarked

Does this work on Android Mobile? We just implemented a feature before realising Draft.js doesnt' work on Android Mobile - Our fault admittedly, but annoying none the less.

It's an ongoing issue, I believe due to the way Android Chrome implemented keyboard events. Editors that specifically avoid the HTML endstate of contenteditable in favour of constructing a parallel state using keyboard events are all trying to deal with the same issue

https://github.com/ianstormtaylor/slate/issues/2062

I do not know Slate JS (yet), but I think it is worth mentioning react-draft-wysiwyg[1], a rich text editor made on top of React and Draft. I used it in one of my projects and it was really cool.

[1]: https://github.com/jpuri/react-draft-wysiwyg

Are the examples deployed somewhere? Its a lot more convenient if I can check them out without cloning the whole repo

edit: Good morning everybody, the link is right above the list https://www.slatejs.org/#/rich-text

I used slate in one of my projects but replaced it eventually with draft.js. The biggest pain points were:

Not stable yet. A lot of breaking changes between releases, so you have to update your code frequently. Breaking changes often introduced new bugs. Big in size (even bigger than draft.js).

I did a full heads down comparison of a bunch of text editors for Polar (https://getpolarized.io/) and their practical features and I ended up going with Summernote:

https://summernote.org/

it's definitely not perfect and seems to not be developed as much as the others but it handles copy and paste VERY well. I can literally copy test from my editor (intellij) and it keeps the formatting perfectly.

With Polar users need a way to reliably annotate their books and having a quality text editing component is important.

I think I'm going to look at Slate too but also look at CKEditor5... both seem like really decent options.

Love Slate. Amazing plugin system -- I've started integrating a backing CRDT with Slate, enabling realtime collab. Would recommend. Coming from Draft, it's a order of magnitude more maintainable and much better developer experience.

I used SlateJS a year ago and couldn’t be more impressed. It struck a great balance with minimalist architecture while also providing the React building blocks I’d rather use than create myself.

This looks cool - is there anything about accessibility testing - how well it works with screen readers for example? I couldn't see anything in the docs.

I spent a lot of time looking for Draft like editors that would be simple, small yet have the potential for power. This project nails it! Well done.

Happy to see this topic re: rich text editors back on track. It's one of those things that never seemed to evolve since the early '90 days. Google docs set the bar really high.

I have been struggling to find a good editor for my form builder site [0] and settled with quill but I like slate's approach better

[0] https://www.inputu.com

Would this be overkill to use just for a textbox with realtime code highlight (for SQL)? That's the only feature I'm interested in.

Yes, you probably want something like CodeMirror https://codemirror.net/

I'd second CodeMirror - I've been tinkering with it (v2 - https://codemirror.net/2/) for a couple of weeks and it's pretty nice to use. I'm using a bit of simple syntax highlighting.

There's also a react wrapper (for versions 1 and 2).

Check out Ace Editor too: https://ace.c9.io/

I love how customizable this is. Text selection on iOS doesn’t seem to work across styled text unfortunately. It would be great for RTF editing on mobile sites if it had better mobile support.

Amazing that few of these editors works on mobile..

(https://prosemirror.net does)

Does this have a plugin for collaborative support? I couldn't find one on the plugins page.

Has anyone tried using this for building code editors, or is it strictly for wysiwyg content?

Does it work with mathematical formulas (LaTex)?

Slate is not an editor so much as a framework for building editors. Which is to say yes, it would be a good basis for an editor for mathematical formulas, but you would have to create the schema yourself (MathML seems like a good starting point). Defining transformations so you could use the LaTeX syntax as short-cuts seems like it would not be too arduous – although obviously a complete implementation would be a vast undertaking.

Obligatory post of rich text editors/frameworks: https://gist.github.com/manigandham/65543a0bc2bf7006a487

Lots of progress in this space but they all seem to be coalescing into the same basic style. For standard apps that just need rich/html input, I highly recommend Froala.

Does it support katex?

What format is content stored in? Is it all RTF under the hood or something else more custom? Curious to know.

Also what's the difference between using SlateJS vs. say Monaco editor which powers VSCode?

monaco is not a rich text editor

Stored as a series of operational transformations, I think.

This site helps understand it — https://operational-transformation.github.io/

You define an internal schema, which is essentially just a tree structure according to your own use-case. In this way it lets you do editing of more complicated page elements than a typical WYSWYG editor.

You can provide (or use others') serialisers and deserialisers to convert between that representation and something else, e.g. RTF, HTML.

The whole point of slate is an immutable representation of a document. Without getting too much in the weeds, a document is an immutable object. Edits to the document are transforms. The obvious benefit is undo/redo is pretty simple. The more subtle benefit is that really complicated document rules become tractable. I built temi.com using this (https://www.temi.com/good-audio-quality). One feature that Slate enables pretty easily is incremental saves. Since the object is immutable, you can pass changes to the server instead of the entire document by just checking element ids. You can get multi-person edits relatively easily as well.

Doesn't seem work in Firefox 63 - seem to get errors when clicking around:

An error was thrown by one of the example's React components!

    in a
    in a
    in a
    in div
    in Styled(div)
    in div
    in a
    in a
    in a
    in a

    in a
    in a
    in a
    in div
    in Styled(div)
    in div
    in a
    in a
    in a
    in a

Reply on news.ycombinator.com