Transformations

la structure de données de slate est immuable, vous ne pouvez donc pas modifier ou supprimer directement des nodes à la place, slate est fourni avec une collection de fonctions de "transform" qui vous permettent de modifier la valeur de votre éditeur les fonctions de transform de slate sont conçues pour être très flexibles, afin de rendre possible la représentation de toutes sortes de modifications que vous pourriez avoir besoin d’apporter à votre éditeur cependant, cette flexibilité peut être difficile à comprendre au début en général, vous appliquerez une seule opération à zéro ou plusieurs nodes par exemple, voici comment aplatir l’arbre syntaxique, en appliquant unwrapnodes à chaque parent d’elements de type block transforms unwrapnodes(editor, { at \[], // path of editor match node => !editor iseditor(node) && node children? every(child => editor isblock(editor, child)), mode 'all', // also the editor's children }) des opérations non standard (ou le debugging/tracing pour déterminer quels nodes seront affectés par un ensemble de nodeoptions) peuvent nécessiter l’utilisation de editor nodes pour créer un javascript iterator de nodeentries et une boucle for of pour agir par exemple, pour remplacer tous les éléments image par leur texte alternatif const imageelmnts = editor nodes(editor, { at \[], // path of editor match (node, path) => 'image' === node type, // mode defaults to "all", so this also searches the editor's children }) for (const nodeentry of imageelmnts) { const alttext = nodeentry\[0] alt || nodeentry\[0] title || /\\/(\[^/]+)$/ exec(nodeentry\[0] url)? \[1] || '☹︎' transforms select(editor, nodeentry\[1]) editor insertfragment(editor, \[{ text alttext }]) } 🤖 consultez la référence transformations docid\ n1djuyjsvzlrs5eeg5z1v pour obtenir la liste complète des transforms de slate transforms de sélection les transforms liées à la sélection sont parmi les plus simples par exemple, voici comment définir la sélection sur une nouvelle plage transforms select(editor, { anchor { path \[0, 0], offset 0 }, focus { path \[1, 0], offset 2 }, }) mais elles peuvent également être plus complexes par exemple, il est courant d’avoir besoin de déplacer le curseur vers l’avant ou vers l’arrière à des distances variables—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’informations, consultez la référence de l’api des transforms de sélection docid\ n1djuyjsvzlrs5eeg5z1v transforms de texte les transforms de texte agissent sur le contenu textuel de l’éditeur par exemple, voici comment insérer 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 d’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’informations, consultez la référence de l’api des transforms de texte docid\ n1djuyjsvzlrs5eeg5z1v transforms de node les transforms de node agissent sur les nodes d’élément et de texte individuels qui composent la valeur de l’éditeur par exemple, vous pourriez insérer un nouveau node de texte à un chemin spécifique transforms insertnodes( editor, { text 'a new string of text ', }, { at \[0, 1], } ) ou vous pourriez déplacer des nodes d’un chemin à un autre transforms movenodes(editor, { at \[0, 0], to \[0, 1], }) 🤖 pour plus d’informations, consultez la référence de l’api des transforms de node docid\ n1djuyjsvzlrs5eeg5z1v l’option à de nombreuses transforms agissent sur un emplacement spécifique dans le document par défaut, elles utilisent la sélection actuelle de l’utilisateur mais cela peut être remplacé avec l’option à par exemple, lors de l’insertion de texte, cela insérerait la chaîne au curseur actuel de l’utilisateur transforms inserttext(editor, 'some words') alors que ceci l’insérerait à un point spécifique transforms inserttext(editor, 'some words', { at { path \[0, 0], offset 3 }, }) l’option à est très polyvalente et peut être utilisée pour implémenter des transformations plus complexes très facilement comme il s’agit d’une emplacement elle peut toujours être soit un chemin , point , ou une portée 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 emplacement de type portée , la plage sera d’abord supprimée, se réduisant à un seul point où votre texte sera ensuite inséré ainsi, 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 emplacement de type chemin , il s’étendra en une plage couvrant l’intégralité du nœud à ce chemin ensuite, en utilisant le comportement basé sur les plages, il supprimera tout le contenu du nœud et le remplacera par votre texte ainsi, 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 l’emplacement fonctionnent pour toutes les transformations qui acceptent une option à cela peut être difficile à appréhender au début, mais cela rend l’api très puissante et capable d’exprimer de nombreuses transformations subtilement différentes l’option match option beaucoup des transformations basées sur les nœuds acceptent une fonction match qui restreint la transformation pour ne s’appliquer qu’aux nœuds pour lesquels la fonction renvoie vrai combiné avec à , match peut également être très puissant par exemple, considérez une transformation basique qui déplace un nœud d’un chemin vers un autre transforms movenodes(editor, { at \[2], to \[5], }) bien qu’il semble simplement prendre un chemin et le déplacer ailleurs, deux choses se produisent en coulisse… premièrement, l’option à est étendue pour devenir une plage représentant tout le contenu du nœud à \[2] ce qui pourrait ressembler à at { anchor { path \[2, 0], offset 0 }, focus { path \[2, 2], offset 19 } } deuxièmement, l’option match est définie par défaut sur 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 réussissent la fonction de correspondance vers la nouvelle position dans ce cas, puisque match est défini par défaut pour ne correspondre qu’au chemin exact \[2] , ce nœud est déplacé mais que faire si vous vouliez déplacer les enfants du nœud à \[2] plutôt ? 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 lorsque 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 à et match pour faire 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 ne correspondre qu’à ce chemin par défaut, nous fournissons notre propre fonction match qui ne correspond qu’aux enfants du nœud utiliser match peut rendre la représentation d’une logique complexe beaucoup plus simple par exemple, imaginez vouloir ajouter une marque de 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 transforms, si vous parcourez des nodes et les transformez un par un, envisagez de vérifier si match peut résoudre votre cas d’utilisation, et déléguer ainsi à slate la complexité de la gestion des boucles la fonction match peut examiner les children d’un node, dans node children , ou utiliser node parent pour examiner son parent transforms et normalisation des séquences de transforms peuvent avoir besoin d’être encapsulées dans éditeur sans normalisation docid\ emmtio53 dod5rqvthcix si le node tree ne doit pas être normalisé entre les transforms voir normalisation implications pour les autres codes docid km0kskcah3d8vjg9uzu8 ;