Interfaces

slate fonctionne avec des objets json purs tout ce qu’il exige est que ces objets json respectent certaines interfaces par exemple, un nœud de texte dans slate doit respecter l’interface texte interface text { text string } ce qui signifie qu’il doit posséder une propriété texte contenant une chaîne de contenu mais toutes les autres propriétés personnalisées sont également autorisées et entièrement à votre discrétion cela vous permet d’adapter vos données à votre domaine spécifique et à votre cas d’usage, en ajoutant toute logique de formatage que vous souhaitez, sans que slate ne s’en mêle cette approche basée sur les interfaces distingue slate de la plupart des autres éditeurs de texte enrichi qui vous obligent à utiliser leurs classes « modèle » faites maison et la rend beaucoup plus simple à appréhender cela signifie également qu’il évite les pénalités de temps de démarrage liées à « l’initialisation » du modèle de données propriétés personnalisées pour prendre un autre exemple, l’interface de nœud élément dans slate est interface element { children node\[] } c’est une interface très permissive tout ce qu’elle exige est que la propriété enfants soit définie et contienne les nœuds enfants de l’élément mais vous pouvez étendre les éléments (ou n’importe quelle autre interface) avec vos propriétés personnalisées spécifiques à votre domaine par exemple, vous pourriez avoir des éléments « paragraph » et « link » const paragraph = { type 'paragraph', children \[ ], } const link = { type 'link', url 'https //example com', children \[ ] } les propriétés type et url sont votre api personnalisée slate constate leur existence, mais ne les utilise pas cependant, lorsque slate affiche un élément link, vous recevrez un objet comportant les propriétés personnalisées afin que vous puissiez l’afficher comme \<a href={element url}>{element children}\</a> lorsque vous commencez avec slate, il est important de comprendre l’ensemble des interfaces qu’il définit il existe un certain nombre d’interfaces traitées dans chacun des guides fonctions utilitaires en plus des informations de typage, chaque interface dans slate expose également une série de fonctions utilitaires qui facilitent leur utilisation par exemple, lorsque vous travaillez avec des nœuds import { node } from 'slate' // get the string content of an element node const string = node string(element) // get the node at a specific path inside a root node const descendant = node get(value, path) ou, lorsque vous travaillez avec des plages import { range } from 'slate' // get the start and end points of a range in order const \[start, end] = range edges(range) // check if a range is collapsed to a single point if (range iscollapsed(range)) { // } de nombreuses fonctions utilitaires sont disponibles pour tous les cas d’usage courants lorsque vous travaillez avec différentes interfaces lorsque vous débutez, il est utile de les parcourir afin de pouvoir souvent simplifier une logique complexe en seulement quelques lignes de code helpers personnalisés en plus des fonctions utilitaires intégrées, vous pourriez vouloir définir vos fonctions utilitaires personnalisées et les exposer dans vos espaces de noms personnalisés par exemple, si votre éditeur prend en charge les images, vous pourriez vouloir un helper qui détermine si un élément est un élément image const isimageelement = element => { return element type === 'image' && typeof element url === 'string' } vous pouvez définir facilement ces fonctions ponctuelles mais vous pouvez également les regrouper dans des espaces de noms, comme le font les interfaces principales, et les utiliser à la place par exemple import { element } from 'slate' // you can use `myelement` everywhere to have access to your extensions export const myelement = { element, isimageelement, isparagraphelement, isquoteelement, } cela facilite la réutilisation de la logique spécifique à votre domaine aux côtés des helpers slate intégrés