NoRedInk/noredink-ui/27.9.0

NOTE: the latest version is 35.9.3

Nri.Ui.Highlighter.V5

Changes from V4:

  • adds isHovering to track whether the user is already hovering over a group, so that we don't reapply hover styles when the user toggles a highlight.
  • renames Blur to MouseOut to be more consistent with MouseOver and because it's not really a blur event.

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
, sorter : Sorter marker
, hintingIndices : Maybe ( Int, Int )
, mouseDownIndex : Maybe Int
, mouseOverIndex : Maybe Int
, isInitialized : Initialized
, hasChanged : HasChanged
, selectionStartIndex : Maybe Int
, selectionEndIndex : Maybe Int
, focusIndex : Maybe Int
, isHovering : Bool
}

Model of a highlighter

type Msg marker
= Pointer PointerMsg
| Keyboard KeyboardMsg
| Focused (Result Error ())
= Down Int
| Out
| 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
, sorter : Sorter marker
}
-> 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

view : Model marker -> Html (Msg marker)
{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg
{ config
| id : String
, highlightables : List (Highlightable marker)
}
-> Html msg
viewMarkdown : Model 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"]

viewWithOverlappingHighlights : Model marker -> Html (Msg marker)

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.

( { model
| highlightables : List (Highlightable marker)
, sorter : Sorter marker
}
-> Maybe (Highlightable marker)
)
-> { model
| highlightables : List (Highlightable marker)
, sorter : Sorter marker
}
-> Maybe marker

Highlights can overlap. Sometimes, we want to apply a certain behavior (e.g., hover color change) on just the shortest highlight. Use this function to find out which marker applies to the least amount of text.

Note that this is shortest by text length, not shortest by number of highlightables.

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

Modules