Nri.Ui.Highlightable.V3

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.

Patch

add new syntax for highlight on markdown parse, which supports custom colors
add new initializer for markdown that receives the parsed markdown inlines instead of just the string

Changes from V2

move the uIState out of the Highlightable
make the attribute modeling more flexible
replace init with initStatic and initInteractive, and remove attributes from the UI since they're seldom used
remove UIState: it only makes sense in the context of an interactive highlighter
joinAdjacentInteractiveHighlights now takes a sorter
initFragments no longer takes a list of markers

Types

type alias Highlightable marker =

{ text : String

, customAttributes : List (Attribute Never)

, marked : List (MarkerModel marker)

, index : Int

, type_ : Type

}

A Highlightable comes in two flavors:

Highlightable | Interactive piece of text.
Static | Non-interactive piece of text.
Data for a Highlightable:
text: String to display.
customAttributes: User-supplied, non-interactive HTML attributes.
marked: Current highlights, if any.
index: Unique highlightable index.

type Type

= Interactive

| Static

Initializers

initStatic : List (MarkerModel marker) -> Int -> String -> Highlightable marker

initInteractive : List (MarkerModel marker) -> Int -> String -> Highlightable marker

initFragments : String -> List (Highlightable marker)

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.

fromMarkdown : String -> List (Highlightable ())

Initialize highlightables from a markdown string. This will get all nri-highlight tags into markded elements, you can add a specific color using the color attribute. The default color is yellow.

fromMarkdown "for example, <nri-highlight>this phrase</nri-highlight> will show as highlighted"

will result in a list of highlightables where "this phrase" is marked with the default marker.

fromMarkdown "for example, <nri-highlight color=" cyan ">this phrase</nri-highlight> will show as highlighted"

will result in a list of highlightables where "this phrase" is marked with the cyan marker.

The available highlight colors are listed in the Nri.Colors docs, which are the following:

magenta -> Colors.highlightMagenta
brown -> Colors.highlightBrown
purple -> Colors.highlightPurple
blue -> Colors.highlightBlue
yellow -> Colors.highlightYellow
green -> Colors.highlightGreen
cyan -> Colors.highlightCyan

There is also the empty url syntax, which is currently being deprecated:

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.

fromMarkdownInlines : List (Inline i) -> List (Highlightable ())

Same as fromMarkdown, but receives a list of inlines parsed markdown instead of a string.

You might want to use this if you are parsing highlightables out of lists or in other block contexts that fromMarkdown does not support.

UIState and marker

set :

Maybe (MarkerModel marker)

-> Highlightable marker

joinAdjacentInteractiveHighlights : Sorter m -> List (Highlightable m) -> List (Highlightable m)

Getters

asFragmentTuples : List (Highlightable marker) -> List ( List marker, String )

Get a list of fragment texts and whether or not they are marked. Useful for encoding answers.

usedMarkers : Sorter marker -> List (Highlightable marker) -> Set marker

Get unique markers that have been used. Note: ignores marks on whitespace.

text : List (Highlightable marker) -> String

Fetch the text from a series of highlightables.

byId : Int -> List (Highlightable kind) -> Maybe (Highlightable kind)

Get the highlightable matching the passed-in ID, if any.

NoRedInk/noredink-ui/34.0.0