> Markdown version of [/videos/1172-developing-the-rich-text-editor-for-deepl-com](https://www.wearedevelopers.com/videos/1172-developing-the-rich-text-editor-for-deepl-com). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Developing the Rich Text Editor for DeepL.com

Why did DeepL spend three years engineering a custom rich text editor? Marcus reveals the brutal realities of wrestling contenteditable APIs, handling chaotic clipboards, and resolving browser inconsistencies.

- **Speakers:** [Markus Over](https://www.wearedevelopers.com/@markus-over)
- **Event:** 
- **Published:** August 22, 2024
- **Duration:** 31:15
- **URL:** https://www.wearedevelopers.com/videos/1172-developing-the-rich-text-editor-for-deepl-com

## Summary

Marcus, a developer at DeepL, explains the three-year journey of engineering a custom rich text editor to replace standard HTML textareas. DeepL required advanced capabilities like inline translation suggestions, formatting preservation, and visual diff highlights for DeepL Write. To achieve this, the team built a web component wrapper around the browser's contenteditable API, maintaining a custom virtual DOM-like tree structure to cleanly separate visual highlights from the underlying text and undo stack. Building on top of contenteditable introduced significant complexities, particularly around syncing standard plain text with implicit DOM structures. Accurately parsing line breaks proved difficult because browsers inconsistently interpret break tags and block-level spacing. Cursor management required converting browser-native node-offset pairs into structure-independent character offsets during DOM updates to prevent the cursor from jumping unexpectedly. Additionally, resolving issues with Input Method Editors (IME) meant halting tree mutations during active composition to avoid breaking inputs for languages like Japanese. The deep-seated inconsistencies across browser event orders, disruptive browser extensions, and malformed clipboard contents heavily complicate rich text rendering. Copying lists from Microsoft Word, for instance, introduces convoluted HTML and conditional logic that must be explicitly sanitized. Reflecting on the downside of the 80/20 rule, Marcus notes that while initial prototypes form quickly, reaching production stability demands massive investment. Ultimately, the lack of uniform web standards requires extensive workarounds, though applying property-based testing utilizing random inputs to validate immutable properties is vital for exposing edge cases in chaotic content environments.

**Keywords:** contenteditable api, rich text web editing, custom virtual dom structure, html dom tree syncing, implicit line break formatting, browser cursor offset mapping, input method editor synchronization, ime composition mode exceptions, browser extension dom disruption, clipboard html sanitization, microsoft word html parsing, property-based javascript testing, undo stack state management, rich text component architecture

## Chapters

1. **Limitations of standard HTML text areas for contextual translations** (00:18) — Why simple text elements fail to support responsive dropdowns mapped directly to specific words.
1. **Managing rich text and complex formatting in editing tools** (01:34) — How rendering live assistant differences and nested styles necessitates advanced custom rendering pipelines.
1. **Designing a custom web component natively extending content editing** (02:52) — Creating an backward-compatible replacement that wraps the browser API while enabling custom text attachments.
1. **Deciding against open source off-the-shelf rich text editor libraries** (04:47) — Why strict architectural requirements for separating pure content from visual metadata prevented utilizing existing dependencies.
1. **Building a custom virtual tree representation for text editing** (07:07) — Utilizing a lightweight hierarchical data model to isolate functional structures from volatile visual states.
1. **Reconciling plain text line breaks with complex HTML structures** (08:21) — Synchronizing algorithmic representations with undocumented parsing behaviors for paragraph closures and isolated break tags.
1. **Preserving accurate cursor coordinates across volatile DOM tree updates** (14:16) — Translating target element positions into stable absolute indexes to prevent selection losses during background cleanups.
1. **Fixing input method editor conflicts during character composition modes** (20:21) — Freezing programmatic updates to ensure native operating system tools successfully process multi-keystroke language inputs.
1. **Mitigating diverse browser quirks and unsupported clipboard metadata formats** (22:34) — Handling unpredictable sequencing, rogue styling extensions, and bloated syntax payloads generated by external word processors.
1. **Evaluating estimations and the limits of the Pareto principle** (26:32) — Analyzing how optimizing for simple edge cases deceptively obscures the complexity of complete feature parity.
1. **Implementing property-based testing strategies for unpredictable rich text inputs** (28:52) — Leveraging automated randomized payload combinations to confidently discover breaking scenarios within unstable component states.

## Related Moments

- [Leveraging web-based architecture for custom text editor features](https://www.wearedevelopers.com/videos/1902-behind-the-scenes-of-building-vs-code-harald-kirschner) (from "Behind the Scenes of Building VS Code - Harald Kirschner")
- [Defining rich text editors and their value proposition](https://www.wearedevelopers.com/videos/1183-the-collaborative-edge-for-ai-assistants-in-content-creation-workflows) (from "The Collaborative Edge for AI Assistants in Content Creation Workflows")
- [History and evolution of a rich text editor](https://www.wearedevelopers.com/videos/755-from-dungeons-dragons-to-fortune-500-running-a-large-commercial-open-source-project) (from "From Dungeons & Dragons to Fortune 500 – Running a Large Commercial Open-Source project")
- [Integrating local build testing and markdown text editors](https://www.wearedevelopers.com/videos/1822-wearedevelopers-live-11ty-and-a11y) (from "WeAreDevelopers LIVE - 11ty and a11y")
- [Developer questions on offline editors and application scaling](https://www.wearedevelopers.com/videos/417-full-stack-web-apps-with-nothing-but-python) (from "Full Stack Web Apps With Nothing But Python")
- [Customizing code editor themes and visual focus environments](https://www.wearedevelopers.com/videos/1365-wearedevelopers-live-the-weekly-developer-show-with-chris-heilmann-and-daniel-cranney) (from " WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney")

## Related Articles

- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [The Web We Broke (And Why AI Agents Are Paying the Price) - AgentCon Berlin](https://www.wearedevelopers.com/magazine/735-the-web-we-broke-and-why-ai-agents-are-paying-the-price-agentcon-berlin)
- [Dev Digest 118 - not a total recall](https://www.wearedevelopers.com/magazine/452-dev-digest-118-not-a-total-recall)
- [Dev Digest 129 - Now that's what I call private data!](https://www.wearedevelopers.com/magazine/468-dev-digest-129-now-that-s-what-i-call-private-data)

## Related Jobs

- [AI Software Engineer (Germany)](https://www.wearedevelopers.com/jobs/48317-ai-software-engineer-germany) at **Sunhat**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**