Concepts
Emplacements
10 min
les emplacements sont la façon dont vous faites référence à des endroits spécifiques dans le document lors de l'insertion, de la suppression ou de toute autre action avec un éditeur slate il existe plusieurs types d'interfaces d'emplacement, chacune pour des cas d'utilisation différents chemin les chemins sont la manière la plus basique de faire référence à un emplacement chaque chemin est un simple tableau de nombres qui fait référence à un nœud dans l'arbre du document par ses index dans chacun de ses nœuds ancêtres descendant dans l'arbre type path = number\[] par exemple, dans ce document const editor = { children \[ { type 'paragraph', children \[ { text 'a line of text!', }, ], }, ], } le nœud de texte feuille aurait un chemin de \[0, 0] point les points sont légèrement plus spécifiques que les chemins et contiennent un décalage dans un nœud de texte spécifique leur interface est interface point { path path offset number } par exemple, avec ce même document, si vous vouliez faire référence au tout premier endroit où vous pourriez placer votre curseur, ce serait const start = { path \[0, 0], offset 0, } ou, si vous vouliez faire référence à la fin de la phrase const end = { path \[0, 0], offset 15, } il peut être utile de penser aux points comme étant des "curseurs" (ou "caret") d'une sélection 🤖 points toujours font référence à des nœuds de texte ! puisqu'ils sont les seuls avec des chaînes qui peuvent avoir des curseurs plage les plages sont un moyen de se référer non seulement à un seul point dans le document, mais à une étendue plus large de contenu entre deux points (un exemple de plage est lorsque vous faites une sélection ) leur interface est interface range { anchor point focus point } 🤖 les termes "ancre" et "focus" sont empruntés au dom, voir https //developer mozilla org/en us/docs/web/api/selection/anchornode et https //developer mozilla org/en us/docs/web/api/selection/focusnode un point d'ancrage et un point de focus sont établis par une interaction utilisateur le point d'ancrage n'est pas toujours avant le point de focus dans le document tout comme dans le dom, l'ordre d'un point d'ancrage et d'un point de sélection dépend de si la plage est en arrière ou en avant voici comment le mozilla developer network l'explique un utilisateur peut faire une sélection de gauche à droite (dans l'ordre du document) ou de droite à gauche (inverse de l'ordre du document) l'ancre est l'endroit où l'utilisateur a commencé la sélection et le focus est l'endroit où l'utilisateur termine la sélection si vous faites une sélection avec une souris de bureau, l'ancre est placée là où vous avez appuyé sur le bouton de la souris et le focus est placé là où vous avez relâché le bouton de la souris l'ancre et le focus ne doivent pas être confondus avec les positions de début et de fin d'une sélection, car l'ancre peut être placée avant le focus ou vice versa, selon la direction dans laquelle vous avez fait votre sélection — sélection, mdn https //developer mozilla org/en us/docs/web/api/selection une distinction importante est que les points d'ancrage et de focus des plages référencent toujours les nœuds de texte de niveau feuille dans un document et ne référencent jamais des éléments ce comportement est différent de celui du dom, mais il simplifie le travail avec les plages car il y a moins de cas particuliers à gérer 🤖 pour plus d'infos, consultez le docid\ jfftg wx8ntti qmcvn6 sélection les plages sont utilisées à de nombreux endroits dans l'api de slate lorsque vous devez faire référence à une étendue de contenu entre deux points l'une des plus courantes est la "sélection" actuelle de l'utilisateur la sélection est une plage spéciale qui est une propriété du éditeur par exemple, disons que quelqu'un a actuellement sélectionnée toute la phrase const editor = { selection { anchor { path \[0, 0], offset 0 }, focus { path \[0, 0], offset 15 }, }, children \[ { type 'paragraph', children \[ { text 'a line of text!', }, ], }, ], } 🤖 le concept de sélection est également emprunté au dom, voir sélection, mdn https //developer mozilla org/en us/docs/web/api/selection , bien que sous une forme grandement simplifiée car slate ne permet pas plusieurs plages à l'intérieur d'une seule sélection, ce qui rend les choses beaucoup plus faciles à manipuler il n'y a pas d'interface spéciale de sélection c'est juste un objet qui respecte l'interface de plage plus générale à la place
