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