Transformations

la structure de données de slate est immuable, donc vous ne pouvez pas modifier ou supprimer des nœuds directement au lieu de cela, slate est livré avec une collection de fonctions "transform" qui vous permettent de changer la valeur de votre éditeur les fonctions de transformation de slate sont conçues pour être très flexibles, afin de rendre possible la représentation de tous les types de changements que vous pourriez avoir besoin d'apporter à votre éditeur cependant, cette flexibilité peut être difficile à comprendre au début 🤖 consultez la docid\ vxywkux6nipsrst6owcej pour une liste complète des transformations de slate transformations de sélection les transformations liées à la sélection sont parmi les plus simples par exemple, voici comment vous définissez la sélection à une nouvelle plage transforms select(editor, { anchor { path \[0, 0], offset 0 }, focus { path \[1, 0], offset 2 }, }) mais elles peuvent aussi être plus complexes par exemple, il est courant de devoir déplacer un curseur en avant ou en arrière sur des distances variées—par caractère, par mot, par ligne voici comment vous déplaceriez le curseur en arrière de trois mots transforms move(editor, { distance 3, unit 'word', reverse true, }) 🤖 pour plus d'infos, consultez le docid\ vxywkux6nipsrst6owcej transformations de texte les transformations de texte agissent sur le contenu textuel de l'éditeur par exemple, voici comment vous inséreriez une chaîne de texte à un point spécifique transforms inserttext(editor, 'some words', { at { path \[0, 0], offset 3 }, }) ou vous pourriez supprimer tout le contenu dans une plage entière de l'éditeur transforms delete(editor, { at { anchor { path \[0, 0], offset 0 }, focus { path \[1, 0], offset 2 }, }, }) 🤖 pour plus d'infos, consultez le docid\ vxywkux6nipsrst6owcej transformations de nœuds les transformations de nœuds agissent sur les éléments individuels et les nœuds de texte qui composent la valeur de l'éditeur par exemple, vous pourriez insérer un nouveau nœud de texte à un chemin spécifique transforms insertnodes( editor, { text 'a new string of text ', }, { at \[0, 1], } ) ou vous pourriez déplacer des nœuds d'un chemin à un autre transforms movenodes(editor, { at \[0, 0], to \[0, 1], }) 🤖 pour plus d'infos, consultez le docid\ vxywkux6nipsrst6owcej le à option de nombreuses transformations agissent sur un emplacement spécifique dans le document par défaut, elles utiliseront la sélection actuelle de l'utilisateur mais cela peut être remplacé par l' à option par exemple, lors de l'insertion de texte, cela insérerait la chaîne à l'emplacement actuel du curseur de l'utilisateur transforms inserttext(editor, 'some words') tandis que cela l'insérerait à un point spécifique transforms inserttext(editor, 'some words', { at { path \[0, 0], offset 3 }, }) le à option est très polyvalente et peut être utilisée pour mettre en œuvre des transformations plus complexes très facilement puisqu'il s'agit d'un emplacement il peut toujours être soit un chemin , point , ou plage et chacun de ces types d'emplacements entraînera des transformations légèrement différentes par exemple, dans le cas de l'insertion de texte, si vous spécifiez un plage emplacement, la plage sera d'abord supprimée, se réduisant à un seul point où votre texte sera ensuite inséré donc, pour remplacer une plage de texte par une nouvelle chaîne, vous pouvez faire transforms inserttext(editor, 'some words', { at { anchor { path \[0, 0], offset 0 }, focus { path \[0, 0], offset 3 }, }, }) ou, si vous spécifiez un chemin emplacement, il s'étendra à une plage qui couvre tout le nœud à ce chemin ensuite, en utilisant le comportement basé sur la plage, il supprimera tout le contenu du nœud et le remplacera par votre texte donc, pour remplacer le texte d'un nœud entier par une nouvelle chaîne, vous pouvez faire transforms inserttext(editor, 'some words', { at \[0, 0], }) ces comportements basés sur la localisation fonctionnent pour toutes les transformations qui prennent un à option cela peut être difficile à comprendre au début, mais cela rend l'api très puissante et capable d'exprimer de nombreuses transformations subtilement différentes le match option beaucoup des transformations basées sur les nœuds prennent une match option de fonction, qui restreint la transformation à s'appliquer uniquement aux nœuds pour lesquels la fonction retourne vrai lorsqu'elle est combinée avec à , match peut également être très puissant par exemple, considérons une transformation de base qui déplace un nœud d'un chemin à un autre transforms movenodes(editor, { at \[2], to \[5], }) bien qu'il semble simplement prendre un chemin et le déplacer à un autre endroit en coulisses, deux choses se passent… tout d'abord, l' à option est étendue pour représenter une plage représentant tout le contenu à l'intérieur du nœud à \[2] ce qui pourrait ressembler à quelque chose comme at { anchor { path \[2, 0], offset 0 }, focus { path \[2, 2], offset 19 } } deuxièmement, l' option de correspondance est par défaut une fonction qui ne correspond qu'au chemin spécifique, dans ce cas \[2] match (node, path) => path equals(path, \[2]) ensuite, slate itère sur la plage et déplace tous les nœuds qui passent la fonction de correspondance vers le nouvel emplacement dans ce cas, puisque la correspondance est par défaut pour ne correspondre qu'au \[2] chemin exact, ce nœud est déplacé mais que se passerait il si vous vouliez déplacer les enfants du nœud à \[2] à la place ? vous pourriez envisager de parcourir les enfants du nœud et de les déplacer un par un, mais cela devient très complexe à gérer car au fur et à mesure que vous déplacez les nœuds, les chemins auxquels vous faites référence deviennent obsolètes au lieu de cela, vous pouvez tirer parti des options at et match pour correspondre à tous les enfants transforms movenodes(editor, { // this will again be expanded to a range of the entire node at `\[2]` at \[2], // matches nodes with a longer path, which are the children match (node, path) => path length === 2, to \[5], }) ici, nous utilisons le même à chemin (qui est étendu à une plage), mais au lieu de le laisser correspondre uniquement à ce chemin par défaut, nous fournissons notre propre correspondance fonction qui correspond uniquement aux enfants du nœud utiliser correspondance peut rendre la représentation de la logique complexe beaucoup plus simple par exemple, envisagez de vouloir ajouter un marqueur gras à tous les nœuds de texte qui ne sont pas déjà en italique transform setnodes( editor, { bold true }, { // this path references the editor, and is expanded to a range that // will encompass all the content of the editor at \[], // this only matches text nodes that are not already italic match (node, path) => text istext(node) && node italic !== true, } ) lors de l'exécution de transformations, si vous parcourez des nœuds et les transformez un par un, envisagez de voir si correspondance peut résoudre votre cas d'utilisation, et décharger la complexité de la gestion des boucles à slate à la place