vue-mark-text Example Controller Subject Misc

# # 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"/>

1