Concepts

Editor

6min
all of the behaviors, content and state of a slate editor is rolled up into a single, top level editor object it has an interface of interface editor { children node\[] selection range | null operations operation\[] marks record\<string, any> | null // 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 } it is slightly more complex than the others, because it contains all of the top level functions that define your custom, domain specific behaviors the children property contains the document tree of nodes that make up the editor's content the selection property contains the user's current selection, if any the operations property contains all of the operations that have been applied since the last "change" was flushed (since slate batches operations up into ticks of the event loop ) the marks property stores formatting to be applied when the editor inserts text if marks is null , the formatting will be taken from the current selection overriding behaviors in previous guides we've already hinted at this, but you can override any of the behaviors of an editor by overriding its function properties for example, if you want to define link elements that are inline nodes const { isinline } = editor editor isinline = element => { return element type === 'link' ? true isinline(element) } or maybe you want to override the inserttext behavior to "linkify" urls const { inserttext } = editor editor inserttext = text => { if (isurl(text)) { // return } inserttext(text) } or you can even define custom "normalizations" that take place to ensure that links obey certain constraints const { normalizenode } = editor editor normalizenode = entry => { const \[node, path] = entry if (element iselement(node) && node type === 'link') { // return } normalizenode(entry) } whenever you override behaviors, be sure to call the existing functions as a fallback mechanism for the default behavior unless you really do want to completely remove the default behaviors (which is rarely a good idea) 🤖 for more info, check out the editor docid\ ww8vm2pch cv szwtnx2f helper functions the editor interface, like all slate interfaces, exposes helper functions that are useful when implementing certain behaviors there are many, many editor related helpers for example // get the start point of a specific node at path const point = editor start(editor, \[0, 0]) // get the fragment (a slice of the document) at a range const fragment = editor fragment(editor, range) there are also many iterator based helpers, for example // iterate over every node in a range for (const \[node, path] of editor nodes(editor, { at range })) { // } // iterate over every point in every text node in the current selection for (const point of editor positions(editor)) { // } 🤖 for more info, check out the editor docid\ ww8vm2pch cv szwtnx2f
🤔
Have a question?
Our super-smart AI,knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.