Skip to content
Anjunar/ DOCS

Input and toolbar

The browser reports what the user wants; bindings decide which command that becomes. The toolbar dispatches the same commands.

Bindings

Order is a decision

Input and keyboard bindings resolve on the first match. An intent nobody binds runs natively, so an editor without lists does not break on insertUnorderedList.

scala
val bindings = HistoryBindings.input ++ ListBindings.input ++ RichTextBindings.input val keys = EditorBindings.everythingKeyboard BrowserInputController.attachTo(session, view, port, bindings, keys)
Tab never traps

Leaving the editor is Tab's default. Indenting on Tab is opt-in: bind EditorBindings.tabIndentation and set TabPolicy.IndentsUntilEscape, which is the way out. Ctrl+] and Ctrl+[ indent without Tab.

Toolbar

Typed commands with state

ToolbarAction.command binds a command and its payload to a state query. The bar has one tab stop, moves with the arrow keys, and marks pressed buttons as true, false or mixed.

scala
val bold = ToolbarAction.command( "bold", "Bold", session, RichText.ToggleMark, StandardMarks.Strong, () => ToolbarState.mark(session.state, StandardMarks.Strong, editable()) ) val toolbar = new EditorToolbar(session, selectionPort, Vector(bold)) Runtime.mount(toolbar, DomCursor.root(toolbarContainer))

The editors on these pages use grouped actions with Material Icons: history, marks, headings, quotes, lists, code blocks and tables.

Composition

Input methods stay unharmed

While an input method composes text, the view does not write to the region it owns. A composition is one undo step through HistoryBindings.groupCompositions.

scala
compositions.bind(input) val grouping = HistoryBindings.groupCompositions(input, history)