Use this module to embed a text editor in an Elm app.
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
)
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
)
Embed the editor in an app like this:
type alias Model =
{ editor : Editor
, ...
}
{ 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
}
Update.Msg
Example:
type Msg
= EditorMsg EditorMsg
| LogErr String
...
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
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
placeInClipboard : String -> Editor -> Editor
Place string in the editor's clipboard
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