Building a text editor

When I started The Co-Writers, I already had experience building text editors. They look simple, but they are in fact incredibly hard to get right. A few items to keep in mind if you'd like to build your own text editor:

  1. Text representation: avoid storing HTML in your database, and prefer instead editor state objects. I tried many plugins, but none beat DraftJS so far. The learning curve is high, but the level of customization is outstanding. A text editor built using DraftJS uses a JSON object to manage its state, which can later easily be converted into other text formats. Storing state objects is more secure because it makes it harder to inject code. It's also the only way to display content consistently across different web browsers, and to simply add advanced features such as real-time collaboration or complex custom text entities (mentions, hashtags, etc.).
  2. Autosave: it's 2020, you don't expect your users to manually save their content every ten seconds. You have to regularly store the state of the text editor to avoid data loss. An autosave call has to be debounced to reduce the load on the server. You also have to take into account network errors: an autosave feature should be implemented with offline in mind, using web APIs such as Background Sync and Web Storage.
  3. User Interface: Medium is probably the standard in terms of editorial experience. It's clean, minimal, and easy to use. Add inline Markdown support (typing Markdown automatically transforms it into its WYSIWYG equivalent), and you obtain a state-of-the-art text editor.
  4. External tools: Rich text editor plugins based on an internal state representation rarely work with external tools modifying the DOM, such as Grammarly. Integrating natural language processing tools within your tech stack is often the best option. Spell checker instead of Grammarly, for example.

Building your own text editor is a lot of work, so do not take it lightly.