Use this module to embed a text editor in an Elm app.
Initialize the embedded editor:
init : () -> ( Model, Cmd Msg )
init () =
( { editor = Editor.init config AppText.jabberwocky
, ...
}
, Cmd.none
)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 )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 )
...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
)Embed the editor in an app like this:
type alias Model =
{ editor : Editor
, ...
}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
}Example:
type Msg
= EditorMsg EditorMsg
| SliderMsg Slider.Msg
| LogErr String
...Get the options for wrapping text. See the example for insert.
Place string in the editor's clipboard
Scroll the editor to a given line
Scroll the editor to the first occurrence of a given string
Subscribe to the slider:
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Sub.map SliderMsg <|
Slider.subscriptions (Editor.slider model.editor)
, ...
]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 )
Embed the editor in the host app: