# vue-mark-text

Highlight/mark text based on character indices.

Supply text along with marks, an iterable of objects with begChar, endChar, text, and cssClass, where begChar/endChar are character indices in the text. The component will split the text into batches of spans with the cssClass applied and automatically handle 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.

CSS can be scoped, as in vue-loader docs. Make sure to apply deep selectors as necessary, e.g. #mt >>> .place.

MarkedText is used like:

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