Commandes
4 min
lors de l’édition de contenu richtext, vos utilisateurs effectueront des actions comme insérer du texte, supprimer du texte, scinder des paragraphes, ajouter du formatage, etc en arrière plan, ces modifications sont exprimées à l’aide de transformations et d’opérations mais à un niveau plus é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 sous forme de fonctions utilitaires sur l’interface éditeur un petit nombre d’utilitaires sont inclus dans le core pour les comportements richtext courants, mais vous êtes encouragé à écrire les vôtres afin de modéliser 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 vous le ferez !) également définir vos propres commandes personnalisées qui modélisent votre domaine par exemple, vous pourriez vouloir définir une commande formatquote , ou une commande insérer une image , ou une commande basculergras selon les types de contenu que vous autorisez les commandes décrivent toujours une action à effectuer comme si l’ utilisateur effectuait l’action pour cette raison, elles n’ont jamais besoin de définir un emplacement où 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 apis intégrées du dom execcommand https //developer mozilla org/en us/docs/web/api/document/execcommand cependant, slate définit sa propre version plus simple (et extensible !) de l’api, car la version du dom est trop rigide et incohérente en arrière plan, slate s’occupe de convertir chaque commande en un ensemble d’« 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 nommage const myeditor = { editor, insertparagraph(editor) { // }, } lorsque vous écrivez vos propres commandes, vous utiliserez souvent les utilitaires transformations fournis avec slate transforms les transformations sont un ensemble spécifique d’utilitaires qui vous permettent d’effectuer une grande variété de modifications spécifiques sur le 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 utilitaires de transformation sont conçus pour être composés ensemble ainsi, vous pourriez en utiliser plusieurs pour chaque commande