# Editor ```javascript import { Editor } from 'slate' ``` The top-level controller that holds a [`Value`](https://docs.slatejs.org/v0.47/slate-core/value) over time, and contains all of the plugins that determine the editor's behavior. > 🤖 In `slate-react`, the [``](https://docs.slatejs.org/v0.47/slate-react/editor) component creates an instance of the `Editor` controller which manages its value under the covers. ## Properties ```javascript 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` An immutable list of [`Operation`](https://docs.slatejs.org/v0.47/slate-core/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`](https://docs.slatejs.org/v0.47/slate-core/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 [``](https://docs.slatejs.org/v0.47/slate-react/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`](https://docs.slatejs.org/v0.47/slate-core/value) object representing the current value of the editor. ## Methods ### `command` `command(type: String, ...args) => Editor` `command(fn: Function, ...args) => Editor` ```javascript 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` ```javascript 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` ```javascript editor.hasCommand('insertLink') ``` Checks if a command by `type` has been registered. ### `hasQuery` `hasQuery(type: String) => Boolean` ```javascript editor.hasQuery('isLinkActive') ``` Checks if a query by `type` has been registered. ### `query` `query(type: String, ...args) => Any` `query(fn: Function, ...args) => Editor` ```javascript 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` ```javascript 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` ```javascript 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` ```javascript 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` ```javascript editor.setReadOnly(true) ``` Set the editor's `readOnly` state. ### `setValue` `setValue(value: Value, options: Object) => Editor` ```javascript 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). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.slatejs.org/v0.47/slate-core/editor.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.