NoRedInk / noredink-ui / Nri.Ui.Mark.V6

Changes from V5

-  Add `skipTagAnimation` for skipping balloon animations

Patch changes

- Factor `overlappingStyles` out of `viewWithOverlaps` to allow consumers finer grained control of rendering mark elements.


type alias Mark =
{ name : Maybe String
, startStyles : List Css.Style
, styles : List Css.Style
, endStyles : List Css.Style 
}

view : (content -> List Css.Style -> Html.Styled.Html msg) -> List ( content, Maybe Mark ) -> List (Html.Styled.Html msg)

When elements are marked, wrap them in a single mark html node.

viewWithInlineTags : (content -> List Css.Style -> Html.Styled.Html msg) -> List ( content, Maybe Mark ) -> List (Html.Styled.Html msg)

When elements are marked, wrap them in a single mark html node.

Show the label for the mark, if present, in-line with the emphasized content.

viewWithBalloonTags : { renderSegment : c -> List Css.Style -> Html.Styled.Html msg, backgroundColor : Css.Color, maybeMarker : Maybe Mark, labelPosition : Maybe LabelPosition, labelCss : List Css.Style, labelId : Maybe String, labelContentId : Maybe String, skipTagAnimation : Basics.Bool } -> List c -> List (Html.Styled.Html msg)

When elements are marked, wrap them in a single mark html node.

Show the label for the mark, if present, in a balloon centered above the emphasized content.

viewWithOverlaps : (content -> List Css.Style -> Html.Styled.Html msg) -> List ( content, List Mark ) -> List (Html.Styled.Html msg)

When elements are marked, add ::before and ::after elements indicating the start and end of the highlight.

(We can't use a mark HTML element here because of the tree structure of HTML)

overlappingStyles : List ( content, List Mark ) -> List ( content, Maybe (Html.Styled.Html msg), List Css.Style )

Compute the styles required to mark the segments.

You can use this if you require more control over the structure of how marked elements are laid out than viewWithOverlaps provides.

The Maybe (Html msg) result is a label element that should be rendered before the current segment.