Concepts
Éditeur
6 min
tous les comportements, le contenu et l'état d'un éditeur slate sont regroupés dans un seul objet de niveau supérieur, éditeur il a une interface de 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 } c'est légèrement plus complexe que les autres, car il contient toutes les fonctions de niveau supérieur qui définissent vos comportements personnalisés et spécifiques au domaine la children propriété contient l'arbre de document des nœuds qui composent le contenu de l'éditeur la selection propriété contient la sélection actuelle de l'utilisateur, le cas échéant la operations propriété contient toutes les opérations qui ont été appliquées depuis le dernier "changement" qui a été effectué (puisque slate regroupe les opérations en ticks de la boucle d'événements ) le marques stocke des formats à appliquer lorsque l'éditeur insère du texte si marques est nul , le format sera pris à partir de la sélection actuelle comportements de substitution dans les guides précédents, nous avons déjà fait allusion à cela, mais vous pouvez remplacer n'importe quel comportement d'un éditeur en remplaçant ses propriétés de fonction par exemple, si vous souhaitez définir des éléments de lien qui sont des nœuds en ligne const { isinline } = editor editor isinline = element => { return element type === 'link' ? true isinline(element) } ou peut être que vous souhaitez remplacer le inserttext comportement pour "lienifier" les url const { inserttext } = editor editor inserttext = text => { if (isurl(text)) { // return } inserttext(text) } ou vous pouvez même définir des "normalisations" personnalisées qui ont lieu pour s'assurer que les liens respectent certaines contraintes const { normalizenode } = editor editor normalizenode = entry => { const \[node, path] = entry if (element iselement(node) && node type === 'link') { // return } normalizenode(entry) } chaque fois que vous remplacez des comportements, assurez vous d'appeler les fonctions existantes comme mécanisme de secours pour le comportement par défaut à moins que vous ne souhaitiez vraiment supprimer complètement les comportements par défaut (ce qui est rarement une bonne idée) 🤖 pour plus d'infos, consultez le docid\ fhesrowobbj3fiacjt7uk fonctions d'aide le éditeur interface, comme toutes les interfaces slate, expose des fonctions d'aide qui sont utiles lors de l'implémentation de certains comportements il existe de nombreux, nombreux helpers liés à l'éditeur par exemple // 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) il existe également de nombreux helpers basés sur des itérateurs, par exemple // 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)) { // } 🤖 pour plus d'infos, consultez le docid\ fhesrowobbj3fiacjt7uk
