Editor

import { Editor } from 'slate'

The top-level controller that holds a Value over time, and contains all of the plugins that determine the editor's behavior.

🤖 In slate-react, the <Editor> component creates an instance of the Editor controller which manages its value under the covers.

Properties

new Editor({
  onChange: Function,
  plugins: Array,
  readOnly: Boolean,
  value: Value,
})

onChange

Function onChange(change: Change)

A change handler that will be called asynchronously with the change that applied the change. When the onChange handler is called, the editor.value will already reflect the new state.

operations

List<Operation>

An immutable list of Operation models that have already been applied to the editor in the current change. As soon as the first operation is added, the onChange is queued to run on the next tick.

plugins

Array

An array of Plugins that define the editor's behavior. These plugins are only definable when an instance of Editor is constructed, and are constant throught the editor's lifecycle.

🤖 In slate-react, when the plugins prop to the <Editor> component changes, an entirely new Editor controller is created under the covers. This is why plugins should not be defined inline in the render function.

readOnly

Boolean

Whether the editor is in "read-only" mode, where the user is prevented from editing the editor's content.

value

Value

A Value object representing the current value of the editor.

Methods

command

command(type: String, ...args) => Editor command(fn: Function, ...args) => Editor

editor.command('insertText', 'word')
editor.command((editor, text) => { ... }, 'word')

Invoke a command by type on the editor with args.

Alternatively, the type argument can be a function, which will be invoked with (editor, ...args). This is helpful in situations where you want write one-off commands with customized logic.

flush

flush() => Editor

editor.flush()

Synchronously flush the current changes to editor, calling onChange.

🤖 In normal operation you never need to use this method! However, it can be helpful for writing tests to be able to keep the entire test synchronous.

hasCommand

hasCommand(type: String) => Boolean

editor.hasCommand('insertLink')

Checks if a command by type has been registered.

hasQuery

hasQuery(type: String) => Boolean

editor.hasQuery('isLinkActive')

Checks if a query by type has been registered.

query

query(type: String, ...args) => Any query(fn: Function, ...args) => Editor

editor.query('isLinkActive')
editor.query(editor => { ... })

Invoke a query by type on the editor with args, returning its result.

Alternatively, the type argument can be a function, which will be invoked with (editor, ...args). This is helpful in situations where you want write one-off queries with customized logic.

registerCommand

registerCommand(type: String) => Void

editor.registerCommand('insertLink')

Add a new command by type with the editor. This will make the command available as a top-level method on the editor.

🤖 Note that this method only registers the command with the editor, creating the top-level command method. It does not define the queries behaviors, which are defined with the onCommand middleware.

registerQuery

registerQuery(type: String) => Void

editor.registerQuery('isLinkActive')

Add a new query by type with the editor. This will make the query available as a top-level method on the editor.

🤖 Note that this method only registers the query with the editor, creating the top-level query method. It does not define the queries behaviors, which are defined with the onQuery middleware.

run

run(key, ...args) => Any

editor.run('onKeyDown', { key: 'Tab', ... })

Run the middleware stack by key with args, returning its result.

🤖 In normal operation you never need to use this method! However, it's useful for writing tests to be able to simulate plugin behaviors.

setReadOnly

setReadOnly(readOnly: Boolean) => Editor

editor.setReadOnly(true)

Set the editor's readOnly state.

setValue

setValue(value: Value, options: Object) => Editor

editor.setValue(value)

Set the editor's value state.

You can optionally provide a normalize option to either for the editor to completely re-normalize the new value based on its schema or not. By default, the editor will re-normalize only if the value is not equal to its previously seen value (which it knows was normalized).