11 ms·

Slate JS – A customizable framework for building rich text editors

420 points by migueloller 8y ago

Neablis 8y ago
The examples all break if you click off the editor, then click back in on the editor.
- melicerte 8y ago
  Same here, under firefox 63.0, ubuntu 16.04
thecatspaw 8y ago
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 https://www.slatejs.org/#/rich-text
far34 8y ago
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?
- molikto 8y ago
  monaco is not a rich text editor
- arsalanb 8y ago
  Stored as a series of operational transformations, I think. This site helps understand it — https://operational-transformation.github.io/ https://operational-transformation.github.io/
- paperpunk 8y ago
  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.
- dumbfoundded 8y ago
  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 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.
paperpunk 8y ago
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.
- markogresak 8y ago
  How do you handle paste from word? Could you share some code? :)
  - sbr464 8y ago
    Curious also about any gotchas, etc.
    - c-smile 8y ago
      Here is "DOM canibalizer" module from my HTML-NOTEPAD ( https://html-notepad.com https://html-notepad.com ) : https://github.com/c-smile/sciter-sdk/blob/master/notepad/res/htmlview/canonicalize-dom.tis 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.
  - tomspeak 8y ago
    Also very interested in this, we've had issues with dealing with reconciling external copy and pasting.
  - 8y ago
dumbfoundded 8y ago
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 https://www.temi.com/good-audio-quality
- jazzyjackson 8y ago
  Very nice tool to correct the auto-generated transcript, bookmarked
be5invis 8y ago
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 :(
davidspiess 8y ago
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).
arsalanb 8y ago
This is something I may switch to, if it proves to have any significant advantages over Quill (https://quilljs.com/ 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/#customizing-blots 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 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.html https://operational-transformation.github.io/visualization.h...
- slow_donkey 8y ago
  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)
  - arsalanb 8y ago
    Absolutely no reason to switch, from reading up on Slate in the past few hours.
  - ergo14 8y ago
    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.
- amelius 8y ago
  I found that last link very nice!
devwastaken 8y ago
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.
- wangyjx 8y ago
  The confluence's editor somewhat meet your needs.
  - devwastaken 8y ago
    Good call, though it's commercial as usual.
ericmcer 8y ago
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.
- coldtea 8y ago
  In which context, outside a social media website, are "mentions" a common part of text editing on the web?
  - mgiannopoulos 8y ago
    Jira has mentions and it’s not social media. Basically anything with users who need to communicate(?)
  - sealjam 8y ago
    Dropbox paper has mentions and I wouldn't consider it social media. Same for trello.
  - sbr464 8y ago
    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.
  - manigandham 8y ago
    Many apps that have collaboration features support some type of mentions and labels to tag users.
- fastball 8y ago
  What exactly is lacking from the Mentions example for you?
robinwassen 8y ago
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.
- DougBTX 8y ago
  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#issuecomment-425788946 https://github.com/ianstormtaylor/slate/issues/2062#issuecom...
- wiktor_walc 8y ago
  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.html https://ckeditor.com/docs/ckeditor5/latest/features/index.ht... and https://ckeditor.com/ckeditor-5/ 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-rich-text-editor-with-real-time-collaboration/ https://ckeditor.com/blog/Lessons-learned-from-creating-a-ri...
rayalez 8y ago
Absolutely brilliant editor! I use it for my projects - https://writingstreak.io https://writingstreak.io and https://nulis.io https://nulis.io. I've also recommended http://letterpad.app/ 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.
- melicerte 8y ago
  [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.
  - kieckerjan 8y ago
    [OT too] Second that. I just wish there was more info on where the data is stored, etc. Looks a bit immature right now.
- raihansaputra 8y ago
  nulis.io is freaking cool! Do you ever think of having vim-like navigation mode for it?
Arathorn 8y ago
We just migrated from Draft to Slate for Riot.im: https://github.com/matrix-org/matrix-react-sdk/pull/1890 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 https://github.com/vector-im/riot-web/issues/7665.
- sandGorgon 8y ago
  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
  - Arathorn 8y ago
    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/develop 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!
    - sandGorgon 8y ago
      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-tslROBDS9IqHalWVztqZo7uxlCeKPQ-8uoFOU/edit#gid=0 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)
Accacin 8y ago
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.
- ENGNR 8y ago
  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 https://github.com/ianstormtaylor/slate/issues/2062
marijn 8y ago
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.
maged 8y ago
FYI, kept hitting this stacktrace in the demo: TypeError: Cannot read property 'key' of undefined at a.n.renderBlockButton (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:22776 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2277...) at a.value (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:25055 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2505...) at Mi (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:62668 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6266...) at Ti (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:67552 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6755...) at mo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77129 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7712...) at fo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77436 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7743...) at Zo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80984 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8098...) at Vo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80496 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8049...) at Wo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80322 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8032...) at Io (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:79695 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7969...) in a in a in a in div in Styled(div) in div in a in a in a
- DougBTX 8y ago
  PR to fix it here: https://github.com/ianstormtaylor/slate/pull/2412 https://github.com/ianstormtaylor/slate/pull/2412
joelanman 8y ago
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.
Kiro 8y ago
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.
- playworker 8y ago
  Yes, you probably want something like CodeMirror https://codemirror.net/ https://codemirror.net/
  - joshmarlow 8y ago
    I'd second CodeMirror - I've been tinkering with it (v2 - https://codemirror.net/2/ 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).
- jim_bailie 8y ago
  Check out Ace Editor too: https://ace.c9.io/ https://ace.c9.io/
jopsen 8y ago
Amazing that few of these editors works on mobile..
- marijn 8y ago
  (https://prosemirror.net https://prosemirror.net does)
grizzles 8y ago
Does it support katex?
Findeton 8y ago
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.
- dumbfoundded 8y ago
  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.
xrisk 8y ago
Does this have a plugin for collaborative support? I couldn't find one on the plugins page.
digitalbase 8y ago
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.
- hailk 8y ago
  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?
- sbr464 8y ago
  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?
  - digitalbase 8y ago
    We just had too many problems to modify it + it seemed facebook had completely abandoned the project.
  - iand675 8y ago
    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.
  - thehazard 8y ago
    Moving from updating state via state diffs (Draft) to discrete operations (Slate) is a huge architectural advantage, among other things.
- 8y ago
ergo14 8y ago
"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".
- sbr464 8y ago
  Which framework (or non) are you using, if not react? Just curious, or what would be a better (web related) base?
  - ergo14 8y ago
    "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.
    - sbr464 8y ago
      I agree, thanks for sharing notes.
- neya 8y ago
  Oh, thanks for pointing that out, I totally missed it. I use VueJS, so this would be a pass from me.
  - ergo14 8y ago
    I think prosemirror is a good option here, it is framework agnostic solution from codemirror author (I did not use it personally yet).
- migueloller 8y ago
  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.
digitalbase 8y ago
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 https://github.com/GitbookIO/slate/blob/master/Readme.md All slate repos @ https://github.com/GitbookIO?utf8=&q=slate&type=&language= https://github.com/GitbookIO?utf8=&q=slate&type=&language=
- thanatropism 8y ago
  > 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!
z3t4 8y ago
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.
- nkozyra 8y ago
  Isn't this why a bunch of wysiwg editors eschew contenteditable in the first place?
- evangow 8y ago
  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 https://www.youtube.com/watch?v=feUYwoLhE_4
thomasfl 8y ago
The markdown shortcuts example, is an absolute joy to use https://www.slatejs.org/#/markdown-shortcuts 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.
vikaskbh 8y ago
TypeError: Cannot read property 'key' of undefined at a.n.renderBlockButton (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:22776 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2277...) at a.value (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:25055 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2505...) at Mi (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:62668 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6266...) at Ti (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:67552 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6755...) at mo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77129 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7712...) at fo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77436 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7743...) at Zo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80984 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8098...) at Vo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80496 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8049...) at Wo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80322 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8032...) at Io (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:79695 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7969...) in a in a in a in div in Styled(div) in div in a in a in a in a
manigandham 8y ago
Obligatory post of rich text editors/frameworks: https://gist.github.com/manigandham/65543a0bc2bf7006a487 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.
mguijarr 8y ago
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 https://github.com/jpuri/react-draft-wysiwyg
mattlondon 8y ago
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! a/n.renderBlockButton@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:22760 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2276... value@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:25050 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2505... Mi@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:62666 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6266... Ti@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:67552 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6755... mo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77129 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7712... fo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77436 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7743... Zo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80984 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8098... Vo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80496 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8049... Wo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80322 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8032... Io@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:79695 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7969... yo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:78927 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7892... enqueueSetState@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:54463 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:5446... b.prototype.setState@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:14:1264 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:14:1264 a/n.onChange@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:23717 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2371... onChange@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:185776 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:18577... value@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:114892 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:11489... value/<@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:114685 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:11468... o@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:161684 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:1616... C/<@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:161806 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:1618... u@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:164856 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:1648... in a in a in a in div in Styled(div) in div in a in a in a in a
nabla9 8y ago
Does it work with mathematical formulas (LaTex)?
- paperpunk 8y ago
  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.
djklanac 8y ago
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.
migueloller 8y ago
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 https://draftjs.org [2] https://github.com/facebook/draft-js/issues/1193 https://github.com/facebook/draft-js/issues/1193 [3] https://github.com/facebook/draft-js/tree/master/meta/meeting-notes https://github.com/facebook/draft-js/tree/master/meta/meetin... [4] https://github.com/ianstormtaylor/slate/tree/master/packages/slate/src https://github.com/ianstormtaylor/slate/tree/master/packages... [5] https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/plugins/dom.js https://github.com/ianstormtaylor/slate/blob/master/packages...
harel 8y ago
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.
deleted 8y ago
[deleted]
jlturner 8y ago
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.
burtonator 8y ago
I did a full heads down comparison of a bunch of text editors for Polar (https://getpolarized.io/ https://getpolarized.io/) and their practical features and I ended up going with Summernote: https://summernote.org/ 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.
wowowl 8y ago
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 https://www.inputu.com
thehazard 8y ago
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.
bkyan 8y ago
Has anyone tried using this for building code editors, or is it strictly for wysiwyg content?

420 points by migueloller 8y ago

Neablis 8y ago

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

melicerte 8y ago
Same here, under firefox 63.0, ubuntu 16.04

thecatspaw 8y ago

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 https://www.slatejs.org/#/rich-text

far34 8y ago

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?

molikto 8y ago
monaco is not a rich text editor
arsalanb 8y ago
Stored as a series of operational transformations, I think. This site helps understand it — https://operational-transformation.github.io/ https://operational-transformation.github.io/
paperpunk 8y ago
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.
dumbfoundded 8y ago
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 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.

paperpunk 8y ago

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.

markogresak 8y ago
How do you handle paste from word? Could you share some code? :)
- sbr464 8y ago
  Curious also about any gotchas, etc.
  - c-smile 8y ago
    Here is "DOM canibalizer" module from my HTML-NOTEPAD ( https://html-notepad.com https://html-notepad.com ) : https://github.com/c-smile/sciter-sdk/blob/master/notepad/res/htmlview/canonicalize-dom.tis 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.
- tomspeak 8y ago
  Also very interested in this, we've had issues with dealing with reconciling external copy and pasting.
- 8y ago

dumbfoundded 8y ago

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 https://www.temi.com/good-audio-quality

jazzyjackson 8y ago
Very nice tool to correct the auto-generated transcript, bookmarked

be5invis 8y ago

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 :(

davidspiess 8y ago

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).

arsalanb 8y ago

This is something I may switch to, if it proves to have any significant advantages over Quill (https://quilljs.com/ 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/#customizing-blots 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 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.html https://operational-transformation.github.io/visualization.h...

slow_donkey 8y ago
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)
- arsalanb 8y ago
  Absolutely no reason to switch, from reading up on Slate in the past few hours.
- ergo14 8y ago
  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.
amelius 8y ago
I found that last link very nice!

devwastaken 8y ago

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.

wangyjx 8y ago
The confluence's editor somewhat meet your needs.
- devwastaken 8y ago
  Good call, though it's commercial as usual.

ericmcer 8y ago

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.

coldtea 8y ago
In which context, outside a social media website, are "mentions" a common part of text editing on the web?
- mgiannopoulos 8y ago
  Jira has mentions and it’s not social media. Basically anything with users who need to communicate(?)
- sealjam 8y ago
  Dropbox paper has mentions and I wouldn't consider it social media. Same for trello.
- sbr464 8y ago
  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.
- manigandham 8y ago
  Many apps that have collaboration features support some type of mentions and labels to tag users.
fastball 8y ago
What exactly is lacking from the Mentions example for you?

robinwassen 8y ago

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.

DougBTX 8y ago
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#issuecomment-425788946 https://github.com/ianstormtaylor/slate/issues/2062#issuecom...
wiktor_walc 8y ago
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.html https://ckeditor.com/docs/ckeditor5/latest/features/index.ht... and https://ckeditor.com/ckeditor-5/ 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-rich-text-editor-with-real-time-collaboration/ https://ckeditor.com/blog/Lessons-learned-from-creating-a-ri...

rayalez 8y ago

Absolutely brilliant editor! I use it for my projects - https://writingstreak.io https://writingstreak.io and https://nulis.io https://nulis.io. I've also recommended http://letterpad.app/ 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.

melicerte 8y ago
[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.
- kieckerjan 8y ago
  [OT too] Second that. I just wish there was more info on where the data is stored, etc. Looks a bit immature right now.
raihansaputra 8y ago
nulis.io is freaking cool! Do you ever think of having vim-like navigation mode for it?

Arathorn 8y ago

We just migrated from Draft to Slate for Riot.im: https://github.com/matrix-org/matrix-react-sdk/pull/1890 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 https://github.com/vector-im/riot-web/issues/7665.

sandGorgon 8y ago
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
- Arathorn 8y ago
  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/develop 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!
  - sandGorgon 8y ago
    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-tslROBDS9IqHalWVztqZo7uxlCeKPQ-8uoFOU/edit#gid=0 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)

Accacin 8y ago

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.

ENGNR 8y ago
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 https://github.com/ianstormtaylor/slate/issues/2062

marijn 8y ago

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.

maged 8y ago

FYI, kept hitting this stacktrace in the demo: TypeError: Cannot read property 'key' of undefined at a.n.renderBlockButton (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:22776 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2277...) at a.value (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:25055 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2505...) at Mi (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:62668 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6266...) at Ti (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:67552 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6755...) at mo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77129 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7712...) at fo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77436 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7743...) at Zo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80984 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8098...) at Vo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80496 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8049...) at Wo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80322 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8032...) at Io (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:79695 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7969...) in a in a in a in div in Styled(div) in div in a in a in a

DougBTX 8y ago
PR to fix it here: https://github.com/ianstormtaylor/slate/pull/2412 https://github.com/ianstormtaylor/slate/pull/2412

joelanman 8y ago

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.

Kiro 8y ago

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.

playworker 8y ago
Yes, you probably want something like CodeMirror https://codemirror.net/ https://codemirror.net/
- joshmarlow 8y ago
  I'd second CodeMirror - I've been tinkering with it (v2 - https://codemirror.net/2/ 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).
jim_bailie 8y ago
Check out Ace Editor too: https://ace.c9.io/ https://ace.c9.io/

jopsen 8y ago

Amazing that few of these editors works on mobile..

marijn 8y ago
(https://prosemirror.net https://prosemirror.net does)

grizzles 8y ago

Does it support katex?

Findeton 8y ago

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.

dumbfoundded 8y ago
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.

xrisk 8y ago

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

digitalbase 8y ago

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.

hailk 8y ago
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?
sbr464 8y ago
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?
- digitalbase 8y ago
  We just had too many problems to modify it + it seemed facebook had completely abandoned the project.
- iand675 8y ago
  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.
- thehazard 8y ago
  Moving from updating state via state diffs (Draft) to discrete operations (Slate) is a huge architectural advantage, among other things.
8y ago

ergo14 8y ago

"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".

sbr464 8y ago
Which framework (or non) are you using, if not react? Just curious, or what would be a better (web related) base?
- ergo14 8y ago
  "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.
  - sbr464 8y ago
    I agree, thanks for sharing notes.
neya 8y ago
Oh, thanks for pointing that out, I totally missed it. I use VueJS, so this would be a pass from me.
- ergo14 8y ago
  I think prosemirror is a good option here, it is framework agnostic solution from codemirror author (I did not use it personally yet).
migueloller 8y ago
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.

digitalbase 8y ago

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 https://github.com/GitbookIO/slate/blob/master/Readme.md All slate repos @ https://github.com/GitbookIO?utf8=&q=slate&type=&language= https://github.com/GitbookIO?utf8=&q=slate&type=&language=

thanatropism 8y ago
> 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!

z3t4 8y ago

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.

nkozyra 8y ago
Isn't this why a bunch of wysiwg editors eschew contenteditable in the first place?
evangow 8y ago
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 https://www.youtube.com/watch?v=feUYwoLhE_4

thomasfl 8y ago

The markdown shortcuts example, is an absolute joy to use https://www.slatejs.org/#/markdown-shortcuts 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.

vikaskbh 8y ago

TypeError: Cannot read property 'key' of undefined at a.n.renderBlockButton (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:22776 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2277...) at a.value (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:25055 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2505...) at Mi (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:62668 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6266...) at Ti (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:67552 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6755...) at mo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77129 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7712...) at fo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77436 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7743...) at Zo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80984 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8098...) at Vo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80496 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8049...) at Wo (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80322 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8032...) at Io (https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:79695 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7969...) in a in a in a in div in Styled(div) in div in a in a in a in a

manigandham 8y ago

Obligatory post of rich text editors/frameworks: https://gist.github.com/manigandham/65543a0bc2bf7006a487 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.

mguijarr 8y ago

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 https://github.com/jpuri/react-draft-wysiwyg

mattlondon 8y ago

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! a/n.renderBlockButton@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:22760 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2276... value@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:25050 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2505... Mi@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:62666 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6266... Ti@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:67552 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:6755... mo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77129 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7712... fo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:77436 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7743... Zo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80984 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8098... Vo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80496 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8049... Wo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:80322 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:8032... Io@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:79695 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7969... yo@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:78927 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:7892... enqueueSetState@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:54463 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:5446... b.prototype.setState@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:14:1264 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:14:1264 a/n.onChange@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:23717 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:42:2371... onChange@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:185776 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:18577... value@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:114892 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:11489... value/<@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:114685 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:1:11468... o@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:161684 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:1616... C/<@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:161806 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:1618... u@https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:164856 https://www.slatejs.org/main-1783ad63c9cf9b77dd4d.js:22:1648... in a in a in a in div in Styled(div) in div in a in a in a in a

nabla9 8y ago

Does it work with mathematical formulas (LaTex)?

paperpunk 8y ago
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.

djklanac 8y ago

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.

migueloller 8y ago

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 https://draftjs.org [2] https://github.com/facebook/draft-js/issues/1193 https://github.com/facebook/draft-js/issues/1193 [3] https://github.com/facebook/draft-js/tree/master/meta/meeting-notes https://github.com/facebook/draft-js/tree/master/meta/meetin... [4] https://github.com/ianstormtaylor/slate/tree/master/packages/slate/src https://github.com/ianstormtaylor/slate/tree/master/packages... [5] https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/plugins/dom.js https://github.com/ianstormtaylor/slate/blob/master/packages...

harel 8y ago

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.

deleted 8y ago

[deleted]

jlturner 8y ago

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.

burtonator 8y ago

I did a full heads down comparison of a bunch of text editors for Polar (https://getpolarized.io/ https://getpolarized.io/) and their practical features and I ended up going with Summernote: https://summernote.org/ 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.

wowowl 8y ago

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 https://www.inputu.com

thehazard 8y ago

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.

bkyan 8y ago

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