NoRedInk/noredink-ui/25.0.0

NOTE: the latest version is 35.9.3

Nri.Ui.HighlighterToolbar.V3

Bar with markers for choosing how text will be highlighted in a highlighter.

{ onSelect : Maybe tag -> msg
, getNameAndColor :
tag
-> { extras
| name : String
, colorSolid : Color
, colorLight : Color
}
, highlighterId : String
}
-> { model | currentTool : Maybe tag, tags : List tag }
-> Html msg

View renders each marker and an eraser. This is exclusively used with an interactive Highlighter, whose id you should pass in when initializing the HighlighterToolbar.

Changes from V2:

  • Use radio inputs under the hood
  • don't arbitrarily complicate API -- match the usecases on the monolith side

Patch changes:

  • Ensure selected tool is clear in high contrast mode
  • Remove focus rings from the tools on click
  • Use safeId to generate valid HTML ids

Changes from V1:

  • replaces onChangeTag and onSetEraser with onSelect.
  • adds highlighterId to config
  • adds keyboard navigation

Modules