Understanding Native and Modern Rich Text Editors and the Hugo.js Shadow‑Input Solution

Browsers provide two native features for building editors: contenteditable , which turns an element into an editable region, and document.execCommand() , an API that applies formatting commands to selected content.

Using these, a very simple rich‑text editor can be created, but practical editors face two major problems: cross‑browser compatibility differences and a limited set of supported commands.

Traditional editors such as CKEditor, TinyMCE, UEditor, KindEditor, and KissyEditor were built to hide browser quirks and extend the limited command set, yet they suffer from high maintenance costs, lack of extensibility, and no generic API for custom formats.

Modern editors (CKEditor 5, Slate.js, Quill.js, Draft.js, ProseMirror, etc.) abandon execCommand , implement their own data models (e.g., Delta, React state, MVC), and expose extensible interfaces, solving the extensibility issue. However, they still rely on contenteditable and encounter “uncontrolled input” problems, especially with non‑standard input methods (IME) that produce characters or actions the editor cannot recognize.

When an unrecognizable input (e.g., a backspace from a custom IME) modifies the DOM without updating the internal model, the editor’s model‑driven rendering diverges from the displayed content, leading to inconsistent states.

Google Docs tackled this by discarding contenteditable entirely and building a fully controlled editor, but the approach is complex and not open‑source.

Hugo.js, developed by UC International R&D, adopts a similar philosophy and introduces a “shadow‑input” architecture composed of three stacked layers:

overlay‑layer : simulates the cursor and selection UI.

render‑layer : renders text, images, and other content.

shadow‑layer : captures raw user input, including IME output, in an invisible buffer.

Input is first collected in the shadow buffer, analyzed to determine the intended action (e.g., backspace, enter), and then the appropriate model API is invoked to update the data model and trigger a render, keeping the DOM and model synchronized.

This design resolves the uncontrolled‑input issue, provides strong extensibility, and has been validated in UC News’s Wemedia platform for international and mobile users, offering a stable and highly customizable editing experience.

Developers targeting global audiences and mobile devices are encouraged to consider Hugo.js as a robust, open‑source alternative for building rich‑text editors.