mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-02-24 17:23:07 +01:00
404 lines
12 KiB
Markdown
404 lines
12 KiB
Markdown
# Editor
|
|
|
|
The `Editor` object stores all the state of a slate editor. It can be extended by plugins to add helpers and implement new behaviors.
|
|
|
|
```typescript
|
|
interface Editor {
|
|
children: Node[]
|
|
selection: Range | null
|
|
operations: Operation[]
|
|
marks: Record<string, any> | null
|
|
[key: string]: unknown
|
|
|
|
// Schema-specific node behaviors.
|
|
isInline: (element: Element) => boolean
|
|
isVoid: (element: Element) => boolean
|
|
normalizeNode: (entry: NodeEntry) => void
|
|
onChange: () => void
|
|
|
|
// Overrideable core actions.
|
|
addMark: (key: string, value: any) => void
|
|
apply: (operation: Operation) => void
|
|
deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void
|
|
deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void
|
|
deleteFragment: () => void
|
|
insertBreak: () => void
|
|
insertFragment: (fragment: Node[]) => void
|
|
insertNode: (node: Node) => void
|
|
insertText: (text: string) => void
|
|
removeMark: (key: string) => void
|
|
}
|
|
```
|
|
|
|
Jump to:
|
|
|
|
- [Instantiation methods](#instantiation-methods)
|
|
- [Static methods](#static-methods)
|
|
- [Instance methods](#instance-methods)
|
|
|
|
## Instantiation methods
|
|
|
|
###### `createEditor(): Editor`
|
|
|
|
Note: This method is imported directly from Slate and is not part of the Editor object.
|
|
|
|
Creates a new, empty `Editor` object.
|
|
|
|
## Static methods
|
|
|
|
###### `Editor.above<T extends Ancestor>(editor: Editor, options?): NodeEntry | undefined`
|
|
|
|
Get the ancestor above a location in the document.
|
|
|
|
Options: `{at?: Location, match?: NodeMatch, mode?: 'highest' | 'lowest', voids?: boolean}`
|
|
|
|
###### `Editor.addMark(editor: Editor, key: string, value: any): void`
|
|
|
|
Add a custom property to the leaf text nodes in the current selection.
|
|
|
|
If the selection is currently collapsed, the marks will be added to the
|
|
`editor.marks` property instead, and applied when text is inserted next.
|
|
|
|
###### `Editor.after(editor: Editor, at: Location, options?): Point | undefined`
|
|
|
|
Get the point after a location.
|
|
|
|
Options: `{distance?: number, unit?: 'offset' | 'character' | 'word' | 'line' | 'block', voids?: boolean}`
|
|
|
|
###### `Editor.before(editor: Editor, at: Location, options?): Point | undefined`
|
|
|
|
Get the point before a location.
|
|
|
|
Options: `{distance?: number, unit?: 'offset' | 'character' | 'word' | 'line' | 'block', voids?: boolean}`
|
|
|
|
###### `Editor.deleteBackward(editor: Editor, options?): void`
|
|
|
|
Delete content in the editor backward from the current selection.
|
|
|
|
Options: `{unit?: 'character' | 'word' | 'line' | 'block'}`
|
|
|
|
###### `Editor.deleteForward(editor: Editor, options?): void`
|
|
|
|
Delete content in the editor forward from the current selection.
|
|
|
|
Options: `{unit?: 'character' | 'word' | 'line' | 'block'}`
|
|
|
|
###### `Editor.deleteFragment(editor: Editor): void`
|
|
|
|
Delete the content in the current selection.
|
|
|
|
###### `Editor.edges(editor: Editor, at: Location): [Point, Point]`
|
|
|
|
Get the start and end points of a location.
|
|
|
|
###### `Editor.end(editor: Editor, at: Location): Point`
|
|
|
|
Get the end point of a location.
|
|
|
|
###### `Editor.first(editor: Editor, at: Location): NodeEntry`
|
|
|
|
Get the first node at a location.
|
|
|
|
###### `Editor.fragment(editor: Editor, at: Location): Descendant[]`
|
|
|
|
Get the fragment at a location.
|
|
|
|
###### `Editor.hasBlocks(editor: Editor, element: Element): boolean`
|
|
|
|
Check if a node has block children.
|
|
|
|
###### `Editor.hasInlines(editor: Editor, element: Element): boolean`
|
|
|
|
Check if a node has inline and text children.
|
|
|
|
###### `Editor.hasTexts(editor: Editor, element: Element): boolean`
|
|
|
|
Check if a node has text children.
|
|
|
|
###### `Editor.insertBreak(editor: Editor): void`
|
|
|
|
Insert a block break at the current selection.
|
|
|
|
###### `Editor.insertFragment(editor: Editor, fragment: Node[]): void`
|
|
|
|
Insert a fragment at the current selection.
|
|
|
|
If the selection is currently expanded, it will be deleted first.
|
|
|
|
###### `Editor.insertNode(editor: Editor, node: Node): void`
|
|
|
|
Insert a node at the current selection.
|
|
|
|
If the selection is currently expanded, it will be deleted first.
|
|
|
|
###### `Editor.insertText(editor: Editor, text: string): void`
|
|
|
|
Insert text at the current selection.
|
|
|
|
If the selection is currently expanded, it will be deleted first.
|
|
|
|
###### `Editor.isBlock(editor: Editor, value: any): value is Element`
|
|
|
|
Check if a value is a block `Element` object.
|
|
|
|
###### `Editor.isEditor(value: any): value is Editor`
|
|
|
|
Check if a value is an `Editor` object.
|
|
|
|
###### `Editor.isEnd(editor: Editor, point: Point, at: Location): boolean`
|
|
|
|
Check if a point is the end point of a location.
|
|
|
|
###### `Editor.isEdge(editor: Editor, point: Point, at: Location): boolean`
|
|
|
|
Check if a point is an edge of a location.
|
|
|
|
###### `Editor.isEmpty(editor: Editor, element: Element): boolean`
|
|
|
|
Check if an element is empty, accounting for void nodes.
|
|
|
|
###### `Editor.isInline(editor: Editor, value: any): value is Element`
|
|
|
|
Check if a value is an inline `Element` object.
|
|
|
|
###### `Editor.isNormalizing(editor: Editor): boolean`
|
|
|
|
Check if the editor is currently normalizing after each operation.
|
|
|
|
###### `Editor.isStart(editor: Editor, point: Point, at: Location): boolean`
|
|
|
|
Check if a point is the start point of a location.
|
|
|
|
###### `Editor.isVoid(editor: Editor, value: any): value is Element`
|
|
|
|
Check if a value is a void `Element` object.
|
|
|
|
###### `Editor.last(editor: Editor, at: Location): NodeEntry`
|
|
|
|
Get the last node at a location.
|
|
|
|
###### `Editor.leaf(editor: Editor, at: Location, options?): NodeEntry`
|
|
|
|
Get the leaf text node at a location.
|
|
|
|
Options: `{depth?: number, edge?: 'start' | 'end'}`
|
|
|
|
###### `Editor.levels<T extends Node>(editor: Editor, options?): Generator<NodeEntry, void, undefined>`
|
|
|
|
Iterate through all of the levels at a location.
|
|
|
|
Options: `{at?: Location, match?: NodeMatch, reverse?: boolean, voids?: boolean}`
|
|
|
|
###### `Editor.next<T extends Descendant>(editor: Editor, options?): NodeEntry<T> | undefined`
|
|
|
|
Get the matching node in the branch of the document after a location.
|
|
|
|
Options: `{at?: Location, match?: NodeMatch, mode?: 'all' | 'highest' | 'lowest', voids?: boolean}`
|
|
|
|
###### `Editor.node(editor: Editor, at: Location, options?): NodeEntry`
|
|
|
|
Get the node at a location.
|
|
|
|
Options: `depth?: number, edge?: 'start' | 'end'`
|
|
|
|
###### `Editor.nodes(editor: Editor, options?): Generator<NodeEntry<T>, void, undefined>`
|
|
|
|
Iterate through all of the nodes in the Editor.
|
|
|
|
Options: `{at?: Location | Span, match?: NodeMatch, mode?: 'all' | 'highest' | 'lowest', universal?: boolean, reverse?: boolean, voids?: boolean}`
|
|
|
|
###### `Editor.normalize(editor: Editor, options?): void`
|
|
|
|
Normalize any dirty objects in the editor.
|
|
|
|
Options: `{force?: boolean}`
|
|
|
|
###### `Editor.parent(editor: Editor, at: Location, options?): NodeEntry<Ancestor>`
|
|
|
|
Get the parent node of a location.
|
|
|
|
Options: `{depth?: number, edge?: 'start' | 'end'}`
|
|
|
|
###### `Editor.path(editor: Editor, at: Location, options?): Path`
|
|
|
|
Get the path of a location.
|
|
|
|
Options: `{depth?: number, edge?: 'start' | 'end'}`
|
|
|
|
###### `Editor.pathRef(editor: Editor, path: Path, options?): PathRef`
|
|
|
|
Create a mutable ref for a `Path` object, which will stay in sync as new
|
|
operations are applied to the editor.
|
|
|
|
Options: `{affinity?: 'backward' | 'forward' | null}`
|
|
|
|
###### `Editor.pathRefs(editor: Editor): Set<PathRef>`
|
|
|
|
Get the set of currently tracked path refs of the editor.
|
|
|
|
###### `Editor.point(editor: Editor, at: Location, options?): Point`
|
|
|
|
Get the start or end point of a location.
|
|
|
|
Options: `{edge?: 'start' | 'end'}`
|
|
|
|
###### `Editor.pointRef(editor: Editor, point: Point, options?): PointRef`
|
|
|
|
Create a mutable ref for a `Point` object, which will stay in sync as new
|
|
operations are applied to the editor.
|
|
|
|
Options: `{affinity?: 'backward' | 'forward' | null}`
|
|
|
|
###### `Editor.pointRefs(editor: Editor): Set<PointRef>`
|
|
|
|
Get the set of currently tracked point refs of the editor.
|
|
|
|
###### `Editor.positions(editor: Editor, options?): Generator<Point, void, undefined>`
|
|
|
|
Iterate through all of the positions in the document where a `Point` can be
|
|
placed.
|
|
|
|
By default it will move forward by individual offsets at a time, but you
|
|
can pass the `unit: 'character'` option to moved forward one character, word,
|
|
or line at at time.
|
|
|
|
Note: By default void nodes are treated as a single point and iteration
|
|
will not happen inside their content unless you pass in true for the
|
|
voids option, then iteration will occur.
|
|
|
|
Options: `{at?: Location, unit?: 'offset' | 'character' | 'word' | 'line' | 'block', reverse?: boolean, voids?: boolean}`
|
|
|
|
###### `Editor.previous(editor: Editor, options?): NodeEntry<T> | undefined`
|
|
|
|
Get the matching node in the branch of the document before a location.
|
|
|
|
Options: `{at?: Location, match?: NodeMatch, mode?: 'all' | 'highest' | 'lowest', voids?: boolean}`
|
|
|
|
###### `Editor.range(editor: Editor, at: Location, to?: Location): Range`
|
|
|
|
Get a range of a location.
|
|
|
|
###### `Editor.rangeRef(editor: Editor, range: Range, options?): RangeRef`
|
|
|
|
Create a mutable ref for a `Range` object, which will stay in sync as new
|
|
operations are applied to the editor.
|
|
|
|
Options: `{affinity?: 'backward' | 'forward' | 'outward' | 'inward' | null}`
|
|
|
|
###### `Editor.rangeRefs(editor: Editor): Set<RangeRef>`
|
|
|
|
Get the set of currently tracked range refs of the editor.
|
|
|
|
###### `Editor.removeMark(editor: Editor, key: string): void`
|
|
|
|
Remove a custom property from all of the leaf text nodes in the current
|
|
selection.
|
|
|
|
If the selection is currently collapsed, the removal will be stored on
|
|
`editor.marks` and applied to the text inserted next.
|
|
|
|
###### `Editor.start(editor: Editor, at: Location): Point`
|
|
|
|
Get the start point of a location.
|
|
|
|
###### `Editor.string(editor: Editor, at: Location, options?): string`
|
|
|
|
Get the text string content of a location.
|
|
|
|
Note: by default the text of void nodes is considered to be an empty
|
|
string, regardless of content, unless you pass in true for the voids option
|
|
|
|
Options: : `{voids?: boolean}`
|
|
|
|
###### `Editor.unhangRange(editor: Editor, range: Range, options?): Range`
|
|
|
|
Convert a range into a non-hanging one.
|
|
|
|
Options: `{voids?: boolean}`
|
|
|
|
###### `Editor.void(editor: Editor, options?): NodeEntry<Element> | undefined`
|
|
|
|
Match a void node in the current branch of the editor.
|
|
|
|
Options: `{at?: Location, mode?: 'highest' | 'lowest', voids?: boolean}`
|
|
|
|
###### `Editor.withoutNormalizing(editor: Editor, fn: () => void): void`
|
|
|
|
Call a function, deferring normalization until after it completes.
|
|
|
|
## Instance methods
|
|
|
|
### Schema-specific methods to override
|
|
|
|
Replace these methods to modify the original behavior of the editor when building [Plugins](/concepts/07-plugins). When modifying behavior, call the original method when appropriate. For example, a plugin that marks image nodes as "void":
|
|
|
|
```js
|
|
const withImages = editor => {
|
|
const { isVoid } = editor
|
|
|
|
editor.isVoid = element => {
|
|
return element.type === 'image' ? true : isVoid(element)
|
|
}
|
|
|
|
return editor
|
|
}
|
|
```
|
|
|
|
###### `isInline(element: Element)`
|
|
|
|
Check if a value is an inline `Element` object.
|
|
|
|
###### `isVoid(element: Element)`
|
|
|
|
Check if a value is a void `Element` object.
|
|
|
|
###### `normalizeNode(entry: NodeEntry)`
|
|
|
|
Normalize a Node according to the schema.
|
|
|
|
###### `onChange()`
|
|
|
|
Called when there is a change in the editor.
|
|
|
|
### Core actions
|
|
|
|
###### `addMark(key: string, value: any)`
|
|
|
|
Add a custom property to the leaf text nodes in the current selection. If the selection is currently collapsed, the marks will be added to the `editor.marks` property instead, and applied when text is inserted next.
|
|
|
|
###### `removeMark(key: string)`
|
|
|
|
Remove a custom property from the leaf text nodes in the current selection.
|
|
|
|
###### `deleteBackward(options?: {unit?: 'character' | 'word' | 'line' | 'block'})`
|
|
|
|
Delete content in the editor backward from the current selection.
|
|
|
|
###### `deleteForward(options?: {unit?: 'character' | 'word' | 'line' | 'block'})`
|
|
|
|
Delete content in the editor forward from the current selection.
|
|
|
|
###### `insertFragment(fragment: Node[])`
|
|
|
|
Insert a fragment at the current selection. If the selection is currently expanded, delete it first.
|
|
|
|
###### `deleteFragment()`
|
|
|
|
Delete the content of the current selection.
|
|
|
|
###### `insertBreak()`
|
|
|
|
Insert a block break at the current selection. If the selection is currently expanded, delete it first.
|
|
|
|
###### `insertNode(node: Node)`
|
|
|
|
Insert a node at the current selection. If the selection is currently expanded, delete it first.
|
|
|
|
###### `insertText(text: string)`
|
|
|
|
Insert text at the current selection. If the selection is currently expanded, delete it first.
|
|
|
|
###### `apply(operation: Operation)`
|
|
|
|
Apply an operation in the editor.
|