jxxcarlson / elm-text-editor / Editor

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

Contents

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

XXX: Changed

Initialize the embedded editor:

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

Using the editor

load : Config.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, Platform.Cmd.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 : Config.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
, width : Basics.Float
, height : Basics.Float
, lineHeight : Basics.Float
, showInfoPanel : Basics.Bool
, wrapParams : { maximumWidth : Basics.Int
, optimalWidth : Basics.Int
, stringWidth : String -> Basics.Int }
, wrapOption : Config.WrapOption
, fontProportion : Basics.Float
, lineHeightFactor : Basics.Float 
}

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 =
Update.Msg

Example:

type Msg
    = EditorMsg EditorMsg
    | LogErr String
    ...

Getters

getBuffer : Editor -> Buffer

Get the buffer (mostly for tests)

getState : Editor -> Model.InternalState

Get the state (mostly for tests)

getSource : Editor -> String

Return the current source text

getCursor : Editor -> Position

Get the cursor position. See the example for insert.

getWrapOption : Editor -> Config.WrapOption

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

getSelectedText : Editor -> Maybe String

getFontSize : Editor -> Basics.Float

getWidth : Editor -> Basics.Float

Get width in pixels of editor

transformConfig : EditorConfig a -> Config

XXX: Changed

lineAt : Position -> Editor -> Maybe String

Return the the line at the given position

lineAtCursor : Editor -> String

Return the the line at the given position

Setters

setSelectedText : String -> Editor -> Editor

setHeight : Basics.Float -> Editor -> Editor

Set height of editor in pixels

setWidth : Basics.Float -> Editor -> Editor

Set width of editor in pixels

Clipboard

placeInClipboard : String -> Editor -> Editor

Place string in the editor's clipboard

Scroll

scrollToLine : Basics.Int -> Editor -> Editor

Scroll the editor to a given line

scrollToString : String -> Editor -> Editor

Scroll the editor to the first occurrence of a given string