Concepts
Commandes
4 min
lors de l'édition de contenu richtext, vos utilisateurs feront des choses comme insérer du texte, supprimer du texte, diviser des paragraphes, ajouter des formats, etc en coulisses, ces modifications sont exprimées à l'aide de transformations et d'opérations mais à un niveau élevé, nous en parlons comme de "commandes" les commandes sont les actions de haut niveau qui représentent une intention spécifique de l'utilisateur elles sont représentées comme des fonctions d'aide sur l' éditeur interface une poignée d'aides sont incluses dans le cœur pour des comportements richtext courants, mais vous êtes encouragé à écrire les vôtres qui modélisent votre domaine spécifique par exemple, voici quelques unes des commandes intégrées editor inserttext(editor, 'a new string of text to be inserted ') editor deletebackward(editor, { unit 'word' }) editor insertbreak(editor) mais vous pouvez (et allez !) également définir vos propres commandes personnalisées qui modélisent votre domaine par exemple, vous pourriez vouloir définir une formatquote commande, ou une insertimage commande, ou une togglebold commande selon les types de contenu que vous autorisez les commandes décrivent toujours une action à entreprendre comme si l' utilisateur effectuait l'action pour cette raison, elles n'ont jamais besoin de définir un emplacement pour exécuter la commande, car elles agissent toujours sur la sélection actuelle de l'utilisateur 🤖 le concept de commandes est vaguement basé sur les execcommand https //developer mozilla org/en us/docs/web/api/document/execcommand des api intégrées du dom cependant, slate définit sa propre version plus simple (et extensible !) de l'api, car la version du dom est trop opinionnée et incohérente en coulisses, slate s'occupe de convertir chaque commande en un ensemble de "opérations" de bas niveau qui sont appliquées pour produire une nouvelle valeur c'est ce qui rend possibles les implémentations d'édition collaborative mais vous n'avez pas à vous en soucier, car cela se produit automatiquement commandes personnalisées lors de la définition de commandes personnalisées, vous pouvez créer votre propre espace de noms const myeditor = { editor, insertparagraph(editor) { // }, } lorsque vous écrivez vos propres commandes, vous utiliserez souvent les transformations helpers qui sont fournis avec slate transformations les transformations sont un ensemble spécifique d'aides qui vous permettent d'effectuer une grande variété de changements spécifiques au document, par exemple // set a "bold" format on all of the text nodes in a range transforms setnodes( editor, { bold true }, { at range, match node => text istext(node), split true, } ) // wrap the lowest block at a point in the document in a quote block transforms wrapnodes( editor, { type 'quote', children \[] }, { at point, match node => editor isblock(editor, node), mode 'lowest', } ) // insert new text to replace the text in a node at a specific path transforms inserttext(editor, 'a new string of text ', { at path }) // there are many more transforms! les aides de transformation sont conçues pour être composées ensemble vous pourriez donc en utiliser quelques unes pour chaque commande
