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.
{ id : String
, selectionStart : Basics.Int
, selectionEnd : Basics.Int
, caretCoordinates : CaretCoordinates
}
The value for the onCoordinates
event.
{ top : Basics.Int
, left : Basics.Int
, lineheight : Maybe Basics.Int
}
The caretCoordinates
property of a Coordinates
type.
{ id : String
, selectionStart : Basics.Int
, selectionEnd : Basics.Int
}
The value for the onSelection
event.
textAreaTracker : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Create a code editor Html element.
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.
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.
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.