Track New Content with a Custom Mark in Kendo UI for Vue Editor

Updated on Apr 3, 2026

Environment

Product	Kendo UI for Vue Editor
Version	8.0.2

Description

I want to track and visually highlight new content that users type in the Kendo UI for Vue 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 Kendo UI for Vue Editor, use a custom ProseMirror mark and plugin:

1. Define a custom trackedText mark in the schema via the extendView 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 ...

Notes

• The trackedText mark is defined with inclusive: true so that new text typed at the boundary of a tracked span continues to receive the mark.
• The handlePaste handler recursively marks all pasted content fragments, preserving the document structure.
• The handleKeyDown handler ensures that pressing Enter while tracking is enabled applies setStoredMarks so the new line continues in tracked mode.

See Also

• Kendo UI for Vue Editor Overview
• API Reference of the Editor
• Customizing the Editor Schema