CustomElement.TextAreaTracker

The Elm interface to the text-area-tracker custom element.

This code won't do anything unless site/js/text-area-tracker.js is loaded.

Types

type alias Coordinates =

{ id : String

, selectionStart : Int

, selectionEnd : Int

, caretCoordinates : CaretCoordinates

}

The value for the onCoordinates event.

type alias CaretCoordinates =

{ top : Int

, left : Int

, lineheight : Maybe Int

}

The caretCoordinates property of a Coordinates type.

type alias Selection =

{ id : String

, selectionStart : Int

, selectionEnd : Int

}

The value for the onSelection event.

Html Elements

textAreaTracker : List (Attribute msg) -> List (Html msg) -> Html msg

Create a code editor Html element.

Attributes

textAreaId : String -> Attribute msg

This is how you set the id of the tracked text-area element.

triggerCoordinates : Int -> Attribute msg

This is how you trigger the event for the caret coordinates.

triggerSelection : Int -> Attribute msg

This is how you trigger the event for the caret coordinates.

Events

onCoordinates : (Coordinates -> msg) -> Attribute msg

This is how you receive the caret selection and coordinates.

onSelection : (Selection -> msg) -> Attribute msg

This is how you receive the selection start and end.

This sends a subset of the onCaretCoordinates information. If you want only the selection, and not the screen coordinates, it is faster to compute.

Decoders

coordinatesDecoder : Decoder Coordinates

Decoder for the Coordinates type.

caretCoordinatesDecoder : Decoder CaretCoordinates

Decoder for the CaretCoordinates type.

selectionDecoder : Decoder Selection

Decoder for the Selection type.

billstclair/elm-custom-element/1.3.0