HTML - Rich Text Editor (Edition)

A rich text editor is a component that permits to edit text to make it rich. ie it allows the text to be styled via editing button.

textToConsole = (event) => {
  event.preventDefault();
  console.log(event.target.article.value);
};
editAction = (event, cmd, element) => {
        event.preventDefault(); // Avoids loosing focus from the editable area
        document.execCommand(cmd, false, element); // Send the command to the browser
};  

<button onMouseDown="editAction(event,'italic');">Italic</button>
  <button onMouseDown="editAction(event,'bold');">Bold</button>
  <button onMouseDown="editAction(event,'formatBlock','h1');">H1</button>
  <button onMouseDown="editAction(event,'formatBlock','p');">P</button>
<form onSubmit="textToConsole(event);">
 <fieldset>
  <legend>New article</legend>
  <textarea id=textarea name=article></textarea>
  <div id=div style="white-space: pre-wrap;outline-width: 0px;" hidden><p>Update Me, Select a Text and use the Edit Button to style the text and Send to the console to see the result</p></div>
  <script>
   let textarea = document.getElementById("textarea");
   let div = document.getElementById("div");
   textarea.hidden = true;
   div.hidden = false;
   div.contentEditable = "true";
   textarea.value = div.innerHTML;
   div.oninput = (e) => {
     textarea.value = div.innerHTML;
   };
  </script>
 </fieldset>
 <p><button>Send to Console</button>
</form>

Ref: Example adapted from the Editing section of the spec

The most simple implementation are made via Javascript that manipulates directly the syntax tree of the HTML document called the DOM.

It means that this is HTML that is edited.

The content is made editable with the contentEditable attribute and the styling buttons are implemented with:

• the execCommand This function will be replaced by Content Editable and Input Events but they are still not fully implemented
• or the selection API

The basic example is using the execCommand.

If you want to create a editor for another language, there is two possible architectures that increase in complexity:

• an unidirectional editor, the easiest, where you translate your language to HTML
• or a bidirectional editor, the hardest, where you need also to translate the HTML back to your language.

To translate you language to HTML, you can do it:

• with a function directly (one pass)
• or via a parser that builds a syntax tree

Example of parser:

• chevrotain
• Unified

The HTML dom may be and is generally virtual. Editor may use:

• virtual dom
• or the React DOM

Some implements also their own such as:

• parchement for Quill
• model for Prosemirror

The advantage of a virtual DOM is that the page does not need to be entirely refreshed. The virtual dom is making the diff and its update transparent.

To smoothing the experience and to not render on every stroke, you should apply a debounce (overview, lodash, react hook). It reduces overhead by not rendering for every keystroke. The rendering is triggered via a keystroke or a timer.

To avoid Xss attack, your input should be sanitized to delete every scriptable/callable text also on the server please as the client code is never reliable.

This sections regroups:

• the rich text editor
• but also the code editor because if you are creating a markup language, you may also just want to go this route.

react-contenteditable - Example with:

• two directions update between HTML Text to React HTML Dom
• with a edit button powered by execCommand to modify the HTML

Draft.js - Framework for building rich text editors in React such as:

• react-draft-wysiwyg/
• react-rte

https://quilljs.com/

• Uses its own DOM called parchement
• and returns Delta (limited then in expressiveness no table for instance)
• Medium clone tuto is really good

(Used by purpose)

https://prosemirror.net/

• used its own DOM
• example: Switch between Markdown and HTML (Used by Doku)

https://github.com/neilj/Squire - Largely used. The HTML remains the source-of-truth (the DOM)

• unifiedJs Tuto (Code) that transform their syntax tree to virtual dom in the tuto

Medium Editor - Simple project, buggy in the extension that shows a medium like editor

https://github.com/jaredreich/pell

If you are creating a markup language, you may also just want to implement the modification in a code editor such as

• Monac (VsCode Editor)
• or https://codemirror.net/

• Language Server Protocol - Interface protocol used between an editor or IDE and a language server that provides language features like auto complete, go to definition, find all references etc.

• Editor replacement code of ckgedit
• A reflection on why a text editor is not good