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.
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.)Initialize highlightables from a string.
Note that we're transforming all whitespace to spaces, so newlines are not preserved as me move to and from fragments. Spaces will be treated as static elements. Words will be interactive.
How do we know which elements should be marked, if all we have is a markdown string?
We do some funky parsing to interpret empty anchor tags and tagged spans as highlighted!
fromMarkdown "for example, [this phrase]() will show as highlighted"will result in a list of highlightables where "this phrase" is marked with the default marker.
A Sorter for Attributes
Get a list of fragment texts and whether or not they are marked. Useful for encoding answers.
Get unique markers that have been used. Note: ignores marks on whitespace.
Fetch the text from a series of highlightables.
Get the highlightable matching the passed-in ID, if any.
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 attributes that do not change once a Highlightable is initialized.
marked: Current highlights, if any.
index: Index that identifies the fragment this Highlightable belongs to. Must be unique in the list of highlightables.