Markus Over

Developing the Rich Text Editor for DeepL.com

Why did DeepL build its own rich text editor? The answer reveals the hidden complexities of `contentEditable`, from cursor management to messy clipboard data.

Developing the Rich Text Editor for DeepL.com
#1about 3 minutes

Why DeepL needed a custom rich text editor

Standard HTML textareas are insufficient for advanced features like word suggestions, rich text formatting, and visual diffs for the writing assistant.

#2about 4 minutes

The decision to build the DTextArea component

DeepL chose to build its own component to meet specific requirements like full customizability, a separate visual layer, and synchronized text areas.

#3about 1 minute

Using a virtual DOM for text representation

The editor uses a custom, minimal tree structure inspired by the DOM to represent text content and a separate visual layer for highlights.

#4about 6 minutes

The surprising complexity of handling line breaks

Line breaks are often implied by the HTML structure rather than explicit, requiring the editor to perfectly mimic inconsistent browser behavior.

#5about 6 minutes

Managing cursor position in a volatile DOM

To prevent the cursor from jumping during DOM cleanup, its position is converted from a node-offset pair to a stable character offset and back.

#6about 2 minutes

Supporting the Input Method Editor for non-latin languages

The Input Method Editor (IME) for languages like Japanese can break if the DOM is modified, requiring the editor to pause manipulations during composition.

#7about 4 minutes

Navigating browser bugs and external content issues

Challenges include browsers generating invalid HTML, inconsistent event orders, interference from browser plugins, and sanitizing complex clipboard content from apps like Microsoft Word.

#8about 2 minutes

Key learnings from building a rich text editor

The project revealed the deceptive nature of the 80/20 rule, as the final 20% of features required 80% of the effort.

#9about 2 minutes

Q&A on testing strategies and alternative editors

The team uses a full testing stack including unit, end-to-end, and property-based tests to find edge cases in the editor's behavior.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Why rich text editors and collaboration are essential
02:14 MIN

Why rich text editors and collaboration are essential

The Collaborative Edge for AI Assistants in Content Creation Workflows

Using LiaScript to create interactive educational content
02:43 MIN

Using LiaScript to create interactive educational content

Transforming Education: A Journey from interactive Markdown to Remote-Labs

The ongoing debate for JavaScript-free web solutions
06:10 MIN

The ongoing debate for JavaScript-free web solutions

WeAreDevelopers LIVE – Keeping Up with Styles, Data & More

The founding story and early days of DeepL
01:59 MIN

The founding story and early days of DeepL

Fireside Chat: Deep Learning, Deep Impact: Harnessing AI for Language Innovation

Live coding an editable list with web components
16:38 MIN

Live coding an editable list with web components

Frameworkless: How to use Web-Components in production?

Engineering culture and product development at DeepL
06:46 MIN

Engineering culture and product development at DeepL

Fireside Chat: Deep Learning, Deep Impact: Harnessing AI for Language Innovation

Understanding the challenges and limitations of Marko
04:08 MIN

Understanding the challenges and limitations of Marko

Marko.js: Unsung Hero of Scalable Web Frameworks

Rethinking web development by embracing the DOM
02:16 MIN

Rethinking web development by embracing the DOM

Rethinking web application design for fastest possible time to interactive

Featured Partners

Related Videos

See all videos
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis1:03:08

WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More1:06:44

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Chris Heilmann, Daniel Cranney & Theodore Lefevre

The Collaborative Edge for AI Assistants in Content Creation Workflows19:59

The Collaborative Edge for AI Assistants in Content Creation Workflows

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

TDD for Vue.js Developers58:26

TDD for Vue.js Developers

Markus Oberlehner

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Transforming Education: A Journey from interactive Markdown to Remote-Labs30:03

Transforming Education: A Journey from interactive Markdown to Remote-Labs

André Dietrich

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 205: AI vs. OSS, Hidden ChatGPT Features, Linux in a PDF
Inside last week’s Dev Digest 205 . 😔 The end of the curl bug bounty 📝 Agent Skills vs. Rules vs. Commands 💬 The best hidden ChatGPT features 📅 Weaponising calendar invites 🟪 CSS in 2026 🐍 Python numbers you should know 👨‍💻 The Github Copilot SDK 💻 ...
Dev Digest 205: AI vs. OSS, Hidden ChatGPT Features, Linux in a PDF
DC
Daniel Cranney
Dev Digest 153: All about DeepSeek, Date in JS solved, AI makes us dumb
Inside last week’s Dev Digest 153 . 🤷‍♂️ Is AI creating a generation of illiterate programmers? 🐳 All you ever wanted to know about DeepSeek AI 🤑 Calculate how much that meeting you just had costs your company 👋 How to move on from React 💰 Google’s...
Dev Digest 153: All about DeepSeek, Date in JS solved, AI makes us dumb

From learning to earning

Jobs that call for the skills explored in this talk.