A Highlightable represents a span of text, typically a word, and its state.
Highlightable is the unit by which text-wrapping happens. Depending on how the Highlighter is initialized, it's very possible for a Highlightable to consist of just a single whitespace.
A consecutive array of Highlightables sharing the same groupIndex form a fragment, which gets highlighted together as a group in response to user action such as clicking and dragging. Fragment as a concept only exists in how functions and variables are named, and is not expressed as a concrete type. We probably should refactor to make it an actual type.
UIState connects user-behavior to the highlightable.
State transitions:
Custom attributes that do not change after initialization.
Class: add a class to the highlightData: add a data-X to the highlight (you don't need to prepend
data- to this name.)Split a multi-word string into multiple single-word highlights. This is to deal with the highlighter not doing line breaks within a highlight group, which can look funny if a highlight contains longer text.
Similar to initFragment but each word is treated as a fragment, instead of treating the whole string as a fragment.
Note that we're transforming all whitespace to spaces, so newlines are not preserved as me move to and from fragments
Split a highlightable into one highlightable per word.
Create list of words intersperse with spaces.
A Sorter for Attributes
A Highlightable comes in two flavors:
Highlightable | Interactive piece of text.
Static | Non-interactive piece of text. Gets highlighted grudgingly if the UI is going to get unintuitive otherwise. i.e. does not get highlighted when hovered etc.
Data for a Highlightable:
text: String to display.
uiState: How the user is currently interacting with the Highlightable.
customAttributes: User-supplied CSS attributes that do not change once a Highlightable is initialized.
marked: Current highlight.
groupIndex: Index that identifies the fragment this Highlightable belongs to.