NoRedInk/noredink-ui/23.1.0

NOTE: the latest version is 35.9.3

Nri.Ui.Highlighter.V3

Patch changes:

  • fixed :bug: where clicking on a static space would cause the space to be marked

Changes from V2:

  • support overlapping highlights (by way of removing the underlying mark element)
  • move asFragmentTuples, usedMarkers, and text to the Highlightable module

Highlighter provides a view/model/update to display a view to highlight text and show marks.

Types

type alias Model marker =
{ id : String
, highlightables : List (Highlightable marker)
, marker : Tool marker
, joinAdjacentInteractiveHighlights : Bool
, mouseDownIndex : Maybe Int
, mouseOverIndex : Maybe Int
, isInitialized : Initialized
, hasChanged : HasChanged
, selectionStartIndex : Maybe Int
, selectionEndIndex : Maybe Int
, focusIndex : Maybe Int
}

Model of a highlighter

type Msg marker
= Pointer PointerMsg
| Keyboard KeyboardMsg
| Focused (Result Error ())
= Down Int
| Out Int
| Over Int
| Move (Maybe String) Int
| Up (Maybe String)
| Ignored

Messages used by highlighter when interacting with a mouse or finger.

Init/View/Update

{ id : String
, highlightables : List (Highlightable marker)
, marker : Tool marker
, joinAdjacentInteractiveHighlights : Bool
}
-> Model marker

Setup initial model

joinAdjacentInteractiveHighlights - When true, and static highlightables are sandwiched by highlighted interactive highlightables of the same type, apply the highlight to the static highlightable as well.

Msg marker
-> Model marker
-> ( Model marker, Cmd (Msg marker), Intent )

Update for highlighter returning additional info about whether there was a change

{ config
| id : String
, highlightables : List (Highlightable marker)
, focusIndex : Maybe Int
, marker : Tool marker
}
-> Html (Msg marker)
{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg
{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg
{ config
| id : String
, highlightables : List (Highlightable marker)
, focusIndex : Maybe Int
, marker : Tool marker
}
-> Html (Msg marker)

Same as view, but will render strings like "blah" inside of emphasis tags.

WARNING: the version of markdown used here is extremely limited, as the highlighter content needs to be entirely in-line content. Lists & other block-level elements will not render as they usually would!

WARNING: markdown is rendered highlightable by highlightable, so be sure to provide highlightables like ["New York Times"]["New York Times"], NOT like ["New ", "York ", "Times"]["New ", "York ", "Times"]

{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg

Same as static, but will render strings like "blah" inside of emphasis tags.

WARNING: the version of markdown used here is extremely limited, as the highlighter content needs to be entirely in-line content. Lists & other block-level elements will not render as they usually would!

WARNING: markdown is rendered highlightable by highlightable, so be sure to provide highlightables like ["New York Times"]["New York Times"], NOT like ["New ", "York ", "Times"]["New ", "York ", "Times"]

{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg

Same as staticWithTags, but will render strings like "blah" inside of emphasis tags.

WARNING: the version of markdown used here is extremely limited, as the highlighter content needs to be entirely in-line content. Lists & other block-level elements will not render as they usually would!

WARNING: markdown is rendered highlightable by highlightable, so be sure to provide highlightables like ["New York Times"]["New York Times"], NOT like ["New ", "York ", "Times"]["New ", "York ", "Times"]

{ config
| id : String
, highlightables : List (Highlightable marker)
, focusIndex : Maybe Int
, marker : Tool marker
}
-> Html (Msg marker)
{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg

Intents

type Intent
= Intent
{ listenTo : ListenTo
, changed : HasChanged
}

Possible intents or "external effects" that the Highlighter can request (see perform).

Check if the highlighter has changed.

= Changed
| NotChanged

Setters

removeHighlights : Model marker -> Model marker

Getters

clickedHighlightable : Model marker -> Maybe (Highlightable marker)

You are not likely to need this helper unless you're working with inline commenting.

hoveredHighlightable : Model marker -> Maybe (Highlightable marker)

You are not likely to need this helper unless you're working with inline commenting.

Modules