Track New Content with a Custom Mark in KendoReact Editor

Updated on Mar 31, 2026

Environment

Product Version	14.2.1
Product	Progress® KendoReact Editor

Description

I want to track and visually highlight new content that users type in the KendoReact Editor. For example, when tracking is enabled, all newly entered text should appear in a different color so that it is easy to distinguish from the original content.

Solution

To track new content in the KendoReact Editor, use a custom ProseMirror mark and plugin:

1. Define a custom trackedText mark in the schema via the onMount event. This mark wraps new content in a <span> with a distinct style (for example, blue text).

2. Create a ProseMirror plugin that intercepts handleTextInput, handlePaste, and handleKeyDown. When tracking is enabled, the plugin applies the trackedText mark to all newly inserted content and preserves the tracking format when pressing Enter to create new lines.

3. Add a toolbar button that toggles the tracking mode on and off.

Change Theme

Theme

Loading ...

See Also

• KendoReact Editor
• API Reference of the Editor