DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Lawrence Mila
Lawrence Mila

Posted on

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?

Rich Text Editor

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)

Collapse
 
niorad profile image
Antonio Radovcic

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

Collapse
 
lawrence profile image
Lawrence Mila

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

Collapse
 
niorad profile image
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.

Collapse
 
rhymes profile image
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.

Collapse
 
lawrence profile image
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/

Collapse
 
jkhaui profile image
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?

Collapse
 
trusktr profile image
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.

Collapse
 
juanmanuelramallo profile image
Juan Manuel Ramallo

Let's Get Wacky


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category

β†’ Join the Hackathon <-