WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
Aug 22, 2024

Developing the Rich Text Editor for DeepL.com

Markus Over

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.

Pause
Mute Enter Fullscreen
#1 about 2 min

Limitations of standard HTML text areas for contextual translations

Why simple text elements fail to support responsive dropdowns mapped directly to specific words.

#2 about 2 min

Managing rich text and complex formatting in editing tools

How rendering live assistant differences and nested styles necessitates advanced custom rendering pipelines.

#3 about 2 min

Designing a custom web component natively extending content editing

Creating an backward-compatible replacement that wraps the browser API while enabling custom text attachments.

#4 about 3 min

Deciding against open source off-the-shelf rich text editor libraries

Why strict architectural requirements for separating pure content from visual metadata prevented utilizing existing dependencies.

#5 about 2 min

Building a custom virtual tree representation for text editing

Utilizing a lightweight hierarchical data model to isolate functional structures from volatile visual states.

#6 about 6 min

Reconciling plain text line breaks with complex HTML structures

Synchronizing algorithmic representations with undocumented parsing behaviors for paragraph closures and isolated break tags.

#7 about 7 min

Preserving accurate cursor coordinates across volatile DOM tree updates

Translating target element positions into stable absolute indexes to prevent selection losses during background cleanups.

#8 about 3 min

Fixing input method editor conflicts during character composition modes

Freezing programmatic updates to ensure native operating system tools successfully process multi-keystroke language inputs.

#9 about 4 min

Mitigating diverse browser quirks and unsupported clipboard metadata formats

Handling unpredictable sequencing, rogue styling extensions, and bloated syntax payloads generated by external word processors.

#10 about 3 min

Evaluating estimations and the limits of the Pareto principle

Analyzing how optimizing for simple edge cases deceptively obscures the complexity of complete feature parity.

#11 about 3 min

Implementing property-based testing strategies for unpredictable rich text inputs

Leveraging automated randomized payload combinations to confidently discover breaking scenarios within unstable component states.

Matching moments

2:42 min

Leveraging web-based architecture for custom text editor features

Harald Kirschner · Coffee With Developers

2:11 min

Defining rich text editors and their value proposition

2:28 min

History and evolution of a rich text editor

Elise Bentley · WWC 2023

4:37 min

Integrating local build testing and markdown text editors

Chris Heilmann +2 · LIVE

3:02 min

Developer questions on offline editors and application scaling

Eli Holderness · WWC 2022

2:57 min

Customizing code editor themes and visual focus environments

Chris Heilmann +2 · LIVE

Upcoming sessions on this topic

Open session

World Congress 2026 North America

DeepAgents: Build Multi-Agent AI Systems That Actually Work

Anagha Rumade, Apoorva Jaiswal, Anjana Umapathy

Anagha Rumade
Apoorva Jaiswal
Anjana Umapathy
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Headroom: A Context Optimization Layer for LLM Applications

Tejas Chopra

Senior Software Engineer at Netflix

Tejas Chopra
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

Related videos

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more thumbnail
1:04:50
LIVE • over 1 year ago

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more

Chris Heilmann, Daniel Cranney, Christian Schaefer

Using all the HTML, Running State of the Browser and "Modern" is Rubbish thumbnail
1:15:44
LIVE • over 1 year ago

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann, Daniel Cranney, David Letorey

WeAreDevelopers LIVE – Keeping Up with Styles, Data & More thumbnail
1:16:52
LIVE • 6 months ago

WeAreDevelopers LIVE – Keeping Up with Styles, Data & More

Chris Heilmann, Daniel Cranney, Peter Kröner

The Collaborative Edge for AI Assistants in Content Creation Workflows thumbnail
19:59
almost 2 years ago

The Collaborative Edge for AI Assistants in Content Creation Workflows

WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more thumbnail
1:06:13
LIVE • over 1 year ago

WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more

Chris Heilmann, Daniel Cranney, Dirk Ginader

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw thumbnail
1:13:35
LIVE • over 1 year ago

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney, Rowdy Rabouw

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.