Hi,
I have tried to build a rich text editor in a React web app, and the common libraries used like slate.js or draft.js make it seem like it's actually very tricky to build or even use a rich text editor that ticks all the boxes.
Yet code editors like vscode and atom give users amazing text editing possibilities such as multi-cursors and other countless refinements, and they are built on top of web technologies.
Can anyone explain how that can be? I'm probably missing a few steps in my understanding.
Thanks!
Top comments (8)
Because Code-Editors are fundamentally not rich-text-editors.
Can you unpack that? It's obviously trivial for an editor like vscode to display bold or italic or listed items.
Lots of the complexity in a WYSIWYG-Editor comes from the user being able to select stuff and change appearance of the content in the selection, while the text itself doesn't change for the user. Also there's adding tables, inline-images, links etc.
In a code-editor, you don't set certain texts to bold or red. If it appears like that it's because of syntax-highlighting and/or markdown. The editor just needs to parse the entered text.
Imagine Sublime-Text vs. MS-Word.
What are "all the boxes" ? What's missing that you need?
Regarding why WYSIWYG editors are so complicated, I think Trix's README has some hints:
BTW last year VS Code rewrote their central component (the text buffer) from scratch, the post could be of interest to you to understand the why a WYSIWYG editor is fundamentally different from a code editor: Text Buffer Reimplementation.
Found the Monaco Editor at the heart of vscode is open source, built in typescript, running on node. microsoft.github.io/monaco-editor/
Hey this is totally random, but I came across your post after searching for something to do with "why the Monaco editor is so incredible yet most text editors suck".
For the web app I'm building, it requires a really high-performant text processor but amazingly no open-source version of something like Google Docs exists (at least not in React/TypeScript/JS). I've built a React wrapper around yabwe's medium-editor, but otherwise, development has been painfully slow.
Would you wanna try and collaborate on something?
The answer is simple: because Monaco team spent way more time than the average rich text editor developer did. You'll probably notice a large difference in size and complexity of the code bases.
destroyallsoftware.com/screencasts...