Portrait photo of Ella van Durpe

Ella van Durpe

Designing a Rich Text Editor for a Third of the Internet

How WordPress built its own controlled “RichText” component, used as a building block to create its brand new visual editor experience. We use a custom internal data structure separating text and formatting rather than the DOM as state, in order to make the data easy to search and manipulate. We take advantage of React to make the DOM updates. Features such as formatting, inserting objects, search/replace, input rules, custom spell checking, autocomplete, footnotes, etc. become very easy to implement thanks to this structure and its API, which is battle tested with millions of users and WordPress’ ecosystem of plugins.