vue-mark-text
Highlight/mark text based on character indices.
Supply text along with marks
,
an iterable of objects with begChar
, endChar
, text
, and cls
,
where begChar
/endChar
are character indices in the text.
The component will split the text into span batches of spans
with the cls
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"/>
Example →