Why is it so hard to build or use a rich text editor yet amazing editors like vscode or atom are built with web technologies?

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!

Comments

[Lawrence Mila]

Found the Monaco Editor at the heart of vscode is open source, built in typescript, running on node. microsoft.github.io/monaco-editor/

[Jordy Lee]

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?

[Antonio Radovcic]

Because Code-Editors are fundamentally not rich-text-editors.

[Lawrence Mila]

Can you unpack that? It's obviously trivial for an editor like vscode to display bold or italic or listed items.

[Antonio Radovcic]

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.

[Juan Manuel Ramallo]

destroyallsoftware.com/screencasts...

[rhymes]

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.

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:

Most WYSIWYG editors are wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers.

Because these APIs were never fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.

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.

[Joe Pea]

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.