<template><h1 id="vue-mark-text"><a class="header-anchor" href="#vue-mark-text">#</a> vue-mark-text</h1>
<p>Highlight/mark text based on character indices.</p>
<p>Supply text along with <code>marks</code>,
an iterable of objects with <code>begChar</code>, <code>endChar</code>, <code>text</code>, and (optional) <code>subject</code>,
where <code>begChar</code>/<code>endChar</code> are character indices in the text.
The component will split the text into batches of spans.
The <code>subject</code> string along with customizable <code>colorOptions</code> and <code>subjectStyleType</code>
parameters is used to control the style of the text.
This automatically handles overlap by
merging classes (see subpackage <code>etali</code> for batch and merging
implementations).</p>
<p>A <code>controller</code> 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, <code>NullController</code> has no callback.
<code>TextSelectionController</code> 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.
<code>WordSelectionController</code> behaves similarly, with the added functionality
that it expands selection to the nearest word boundaries on raw text
clicks and drags.</p>
<p><code>vue-mark-text</code> 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
<code>get</code>/<code>set</code>/<code>reset``Selection</code>, or through a controller like WordSelectionController.
The native selection specifically deals with text char indices and not the DOM.</p>
<p>MarkedText is used like:</p>
<div class="language-markup ext-html line-numbers-mode"><pre v-pre class="language-markup"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MarkedText</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mt<span class="token punctuation">"</span></span> <span class="token attr-name">:sourceText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sourceText<span class="token punctuation">"</span></span> <span class="token attr-name">:marks</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marks<span class="token punctuation">"</span></span> <span class="token attr-name">:controller</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>controller<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div></template>