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 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 · World Congress 2023

4:37 min

Integrating local build testing and markdown text editors

Chris Heilmann Chris Heilmann +2 · LIVE

3:02 min

Developer questions on offline editors and application scaling

Eli Holderness · World Congress 2022

2:57 min

Customizing code editor themes and visual focus environments

Chris Heilmann Chris Heilmann +2 · LIVE

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 • 8 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
about 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.