billstclair / elm-custom-element / 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 : Basics.Int
, selectionEnd : Basics.Int
, caretCoordinates : CaretCoordinates 
}

The value for the onCoordinates event.


type alias CaretCoordinates =
{ top : Basics.Int
, left : Basics.Int
, lineheight : Maybe Basics.Int 
}

The caretCoordinates property of a Coordinates type.


type alias Selection =
{ id : String
, selectionStart : Basics.Int
, selectionEnd : Basics.Int 
}

The value for the onSelection event.

Html Elements

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

Create a code editor Html element.

Attributes

textAreaId : String -> Html.Attribute msg

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

setSelection : Basics.Int -> Basics.Int -> Basics.Int -> Html.Attribute msg

This is how you set the selection range.

One of the values must change to cause the selection to be effected. Hence the count parameter. Code will usually increment a model variable each time the selection needs to be changed.

setSelection start end count

If start == end, the input position will move with no selection.

triggerCoordinates : Basics.Int -> Html.Attribute msg

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

triggerSelection : Basics.Int -> Html.Attribute msg

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

Events

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

This is how you receive the caret selection and coordinates.

onSelection : (Selection -> msg) -> Html.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 : Json.Decode.Decoder Coordinates

Decoder for the Coordinates type.

caretCoordinatesDecoder : Json.Decode.Decoder CaretCoordinates

Decoder for the CaretCoordinates type.

selectionDecoder : Json.Decode.Decoder Selection

Decoder for the Selection type.