Nœuds

les types les plus importants sont les node objets un éditeur de niveau racine qui contient le contenu entier du document conteneur élément qui ont une signification sémantique dans votre domaine et de niveau feuille texte qui contiennent le texte du document ces trois interfaces sont combinées pour former un arbre—tout comme le dom par exemple, voici une simple valeur en texte brut const editor = { children \[ { type 'paragraph', children \[ { text 'a line of text!', }, ], }, ], // the editor has other properties too } miroiter le dom autant que possible est l'un des principes de slate les gens utilisent le dom pour représenter des documents avec des structures semblables à du texte enrichi tout le temps miroiter le dom aide à rendre la bibliothèque familière pour les nouveaux utilisateurs, et cela nous permet de réutiliser des modèles éprouvés sans avoir à les réinventer nous mêmes 🤖 le contenu suivant sur le réseau des développeurs de mozilla peut vous aider à en apprendre davantage sur les concepts dom correspondants https //developer mozilla org/en us/docs/web/api/document https //developer mozilla org/en us/docs/web/html/block level elements https //developer mozilla org/en us/docs/web/html/inline elements https //developer mozilla org/en us/docs/web/api/text un document slate est une structure imbriquée et récursive dans un document, les éléments peuvent avoir des nœuds enfants—chacun d'eux pouvant avoir des nœuds enfants sans limite la structure imbriquée et récursive vous permet de modéliser des comportements simples tels que les mentions d'utilisateur et les hashtags ou des comportements complexes tels que les tableaux et les figures avec des légendes éditeur le nœud de niveau supérieur dans un document slate est l' éditeur lui même il encapsule tout le "contenu" enrichi du document son interface est interface editor { children node\[] } nous aborderons sa fonctionnalité plus tard, mais la partie importante en ce qui concerne les nœuds est sa children propriété qui contient un arbre de node objets élément les éléments constituent les couches intermédiaires d'un document richtext ce sont les nœuds qui sont propres à votre propre domaine leur interface est interface element { children node\[] } vous pouvez définir des éléments personnalisés pour tout type de contenu que vous souhaitez par exemple, vous pourriez avoir des paragraphes et des citations dans votre modèle de données qui sont différenciés par une type propriété const paragraph = { type 'paragraph', children \[ ], } const quote = { type 'quote', children \[ ], } il est important de noter que vous pouvez utiliser toutes les propriétés personnalisées que vous souhaitez la type propriété dans cet exemple n'est pas quelque chose que slate connaît ou qui l'intéresse si vous définissiez vos propres nœuds "lien", vous pourriez avoir une url propriété const link = { type 'link', url 'https //example com', children \[ ], } ou peut être voulez vous donner à tous vos nœuds une propriété id const paragraph = { id 1, type 'paragraph', children \[ ], } tout ce qui compte, c'est que les éléments aient toujours une children propriété blocs vs inlines selon votre cas d'utilisation, vous pourriez vouloir définir un autre comportement pour les element nœuds qui détermine leur "flux" d'édition tous les éléments sont par défaut des éléments "block" ils apparaissent chacun séparés par un espace vertical, et ils ne se chevauchent jamais mais dans certains cas, comme pour les liens, vous pourriez vouloir les rendre des éléments "inline" de cette façon, ils vivent au même niveau que les nœuds de texte et s'écoulent 🤖 c'est un concept emprunté au comportement du dom, voir https //developer mozilla org/en us/docs/web/html/block level elements et https //developer mozilla org/en us/docs/web/html/inline elements vous pouvez définir quels nœuds sont traités comme des nœuds en ligne en remplaçant la editor isinline fonction (par défaut, elle renvoie toujours false ) notez que les nœuds en ligne ne peuvent pas être le premier ou le dernier enfant d'un bloc parent, ni être à côté d'un autre nœud en ligne dans le tableau des enfants slate espacera automatiquement ceux ci avec { text '' } enfants par défaut avec normalisation docid\ izjicpkmwkxreo3uomwrq les éléments peuvent contenir soit des éléments de bloc, soit des éléments en ligne mêlés à des nœuds de texte comme enfants mais les éléments ne peuvent pas contenir certains enfants qui sont des blocs et d'autres qui sont des en ligne vides tout comme les blocs et les éléments en ligne, il existe un autre comportement spécifique aux éléments que vous pouvez définir en fonction de votre cas d'utilisation leur "absence de contenu" les éléments sont par défaut non vides, ce qui signifie que leurs enfants sont entièrement modifiables en tant que texte mais dans certains cas, comme pour les images, vous souhaitez vous assurer que slate ne traite pas leur contenu comme du texte modifiable, mais plutôt comme une boîte noire 🤖 c'est un concept emprunté à la spécification html, voir https //www w3 org/tr/2011/wd html markup 20110405/syntax html#void element vous pouvez définir quels éléments sont traités comme vides en remplaçant la editor isvoid fonction (par défaut, elle renvoie toujours faux ) texte les nœuds de texte sont les nœuds de plus bas niveau dans l'arbre, contenant le contenu textuel du document, ainsi que tout formatage leur interface est interface text { text string } par exemple, une chaîne de texte en gras const text = { text 'a string of bold text', bold true, } les nœuds de texte peuvent également contenir toutes les propriétés personnalisées que vous souhaitez, et c'est ainsi que vous implémentez un formatage personnalisé comme gras , italique , code , etc