mweiss / elm-rte-toolkit / RichText.Config.Decorations

Decorations are functions which add a list of Html.Attribute to rendered elements and marks. They're useful for adding things like event listeners and conditional styles/attributes outside of those defined in the spec.

Decorations


type Decorations msg

Decorations is a collection of mark and element decorators used in th editor view.

decorations =
    emptyDecorations
        |> addElementDecoration image (selectableDecoration InternalMsg)

--> a collection of decorations that contains a single element decoration for image


type alias ElementDecoration msg =
RichText.Model.Node.Path -> RichText.Model.Element.Element -> RichText.Model.Node.Path -> List (Html.Attribute msg)

ElementDecoration is a type alias for an element decoration function. The arguments are as follows:

-- A decoration which adds an onclick listener to a checkbox in a custom checkbox item element
toggleCheckboxDecoration : Path -> Element -> Path -> List (Html.Attribute Msg)
toggleCheckboxDecoration editorNodePath element relativeHtmlNodePath =
    let
        checked =
            Maybe.withDefault False (findBoolAttribute "checked" (Element.attributes element))
    in
    if relativeHtmlNodePath == [ 0, 0 ] then
        [ Html.Events.onClick (ToggleCheckedTodoItem editorNodePath (not checked)) ]

    else
        []


type alias MarkDecoration msg =
RichText.Model.Node.Path -> RichText.Model.Mark.Mark -> RichText.Model.Node.Path -> List (Html.Attribute msg)

MarkDecoration is a type alias for an mark decoration function. The arguments are as follows:

-- A decoration that adds a highlight class attribute to rendered link marks
highlight : Path -> Mark -> Path -> List (Html.Attribute Msg)
highlight _ _ _ =
    [ Html.Attributes.class "highlight" ]

emptyDecorations : Decorations msg

Empty decorations

elementDecorations : Decorations msg -> Dict String (List (ElementDecoration msg))

A dictionary of element names to a list of mark decorations.

markDecorations : Decorations msg -> Dict String (List (MarkDecoration msg))

A dictionary of mark name to a list of mark decorations.

topLevelAttributes : Decorations msg -> List (Html.Attribute msg)

The extra attributes added to the node with contenteditable="true" set.

withMarkDecorations : Dict String (List (MarkDecoration msg)) -> Decorations msg -> Decorations msg

Creates a decorations object with the given mark decorations set

withElementDecorations : Dict String (List (ElementDecoration msg)) -> Decorations msg -> Decorations msg

Creates a decorations object with the given element decorations set

withTopLevelAttributes : List (Html.Attribute msg) -> Decorations msg -> Decorations msg

Creates a decorations object with the given top level attributes, e.g. extra attributes that are added to the editor node with contenteditable="true" set.

Helpers

addElementDecoration : RichText.Config.ElementDefinition.ElementDefinition -> ElementDecoration msg -> Decorations msg -> Decorations msg

Adds an element decoration for a defined node.

decorations =
    emptyDecorations
        |> addElementDecoration image (selectableDecoration InternalMsg)

--> a collection of decorations that contains a single element decoration for image

addMarkDecoration : RichText.Config.MarkDefinition.MarkDefinition -> MarkDecoration msg -> Decorations msg -> Decorations msg

Adds a mark decoration for a defined mark.

decorations =
    emptyDecorations
        |> addMarkDecoration link highlight

--> a collection of decorations that contains a single mark decoration for a link

selectableDecoration : RichText.Internal.Editor.Tagger msg -> RichText.Model.Node.Path -> RichText.Model.Element.Element -> RichText.Model.Node.Path -> List (Html.Attribute msg)

Useful decoration for selectable elements. Adds an onclick listener that will select the element, as well as adds an rte-selected class if this item is selected.