jxxcarlson/elm-text-editor/1.1.0

NOTE: the latest version is 7.0.8

Editor

Use this module to embed this text editor in an Elm app.

Embedding the Editor

embedded : EditorConfig a -> Editor -> Html a

Embed the editor in the host app:

view : Model -> Html Msg
view model =
    div [ HA.style "margin" "60px" ]
        [ ...
        , Editor.embedded config model.editor
        , ...
        ]
init : EditorConfig a -> String -> Editor

Initialize the embedded editor:

init : () -> ( Model, Cmd Msg )
init () =
    ( { editor = Editor.init config AppText.jabberwocky
      , ...
      }
    , Cmd.none
    )

Using the editor

load : WrapOption -> String -> Editor -> Editor

Load text into the embedded editor.

load : WrapOption -> String -> Model -> ( Model, Cmd Msg )
load wrapOption text model =
    let
        newEditor =
            Editor.load wrapOption text model.editor
    in
    ( { model | editor = newEditor }, Cmd.none )
update : EditorMsg -> Editor -> ( Editor, Cmd EditorMsg )

Respond to updates in the editor:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        EditorMsg editorMsg ->
            let
                ( editor, cmd ) =
                    Editor.update editorMsg model.editor
            in
            ( { model | editor = editor }, Cmd.map EditorMsg cmd )


        ...
insert : WrapOption -> Position -> String -> Editor -> Editor

Use to insert text into the editor at a given position, e.g.,

pasteToClipboard : Model -> String -> ( Model, Cmd msg )
pasteToClipboard model editor =
    ( { model
        | editor =
            Editor.insert
                (Editor.getWrapOption model.editor)
                (Editor.getCursor model.editor)
                editor
                model.editor
      }
    , Cmd.none
    )

Types

type Editor

Embed the editor in an app like this:

type alias Model =
    { editor : Editor
    , ...
    }
type alias EditorConfig a =
{ editorMsg : EditorMsg -> a
, sliderMsg : Msg -> a
, editorStyle : List (Attribute a)
, width : Int
, lines : Int
, lineHeight : Float
, showInfoPanel : Bool
, wrapParams :
{ maximumWidth : Int
, optimalWidth : Int
, stringWidth : String -> Int
}
, wrapOption : WrapOption
}

A typical configuration:

config : EditorConfig Msg
config =
    { editorMsg = EditorMsg
    , sliderMsg = SliderMsg
    , editorStyle = editorStyle
    , width = 500
    , lines = 30
    , lineHeight = 16.0
    , showInfoPanel = True
    , wrapParams = { maximumWidth = 55, optimalWidth = 50, stringWidth = String.length }
    , wrapOption = DontWrap
    }
type alias EditorMsg =

Example:

type Msg
    = EditorMsg EditorMsg
    | SliderMsg Slider.Msg
    | LogErr String
    ...

Getters

getCursor : Editor -> Position

Get the cursor position. See the example for insert.

Get the options for wrapping text. See the example for insert.

Clipboard

Place string in the editor's clipboard

Scroll

Scroll the editor to a given line

Scroll the editor to the first occurrence of a given string

Slider

slider : Editor -> Model

Subscribe to the slider:

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ Sub.map SliderMsg <|
            Slider.subscriptions (Editor.slider model.editor)
          , ...
        ]
sliderUpdate : Msg -> Editor -> ( Editor, Cmd Msg )

Update the slider frm the hosting app:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ...


        SliderMsg sliderMsg ->
            let
                ( newEditor, cmd ) =
                    Editor.sliderUpdate
                       sliderMsg
                       model.editor
            in
            ( { model | editor = newEditor }
            , cmd |> Cmd.map SliderMsg )