vue-mark-text

Highlight/mark text based on character indices.

Supply text along with marks, an iterable of objects with begChar, endChar, text, and (optional) subject, where begChar/endChar are character indices in the text. The component will split the text into batches of spans. The subject string along with customizable colorOptions and subjectStyleType parameters is used to control the style of the text. This automatically handles overlap by merging classes (see subpackage etali for batch and merging implementations).

A controller may also be supplied to catch the events from clicking on the text spans and trigger callback. Three controllers are provided in the library. By default, NullController has no callback. TextSelectionController consumes clicks and drags, annotating by dragging over text as one would expect and also automatically expanding to an entire mark if it is clicked on without dragging. WordSelectionController behaves similarly, with the added functionality that it expands selection to the nearest word boundaries on raw text clicks and drags.

vue-mark-text natively handles selection using spans to interfere as little as possible with the rest of the application. The selection may be controlled directly in MarkedText using the methods get/set/reset``Selection, or through a controller like WordSelectionController. The native selection specifically deals with text char indices and not the DOM.

MarkedText is used like:

<MarkedText id="mt" :sourceText="sourceText" :marks="marks" :controller="controller"/>