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

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

• the first argument is the path to this node from the editor root
• the second argument is the element to decorate
• The third argument is the relative path of the rendered html node. This is useful if you want to apply attributes to only a subset of the rendered html nodes of an element.

-- 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
        []

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

• the first argument is the path to this node from the editor root
• the second argument is the mark to decorate
• the third argument is the relative path of the rendered html node. This is useful if you want to apply attributes to only a subset of the rendered html nodes of an element.

-- 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" ]

Empty decorations

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

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

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

Creates a decorations object with the given mark decorations set

Creates a decorations object with the given element decorations set

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.

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

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

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.