Rendu

une des meilleures parties de slate est qu'il est construit avec react, donc il s'intègre parfaitement dans votre application existante il ne réinvente pas sa propre couche de vue que vous devez apprendre il essaie de garder tout aussi react y que possible dans ce but, slate vous donne le contrôle sur le comportement de rendu de vos nœuds et propriétés personnalisés dans votre domaine de texte enrichi vous pouvez définir ces comportements en passant des "render props" au niveau supérieur \<editable> composant par exemple, si vous souhaitez rendre des composants d'éléments personnalisés, vous passeriez la renderelement prop import { createeditor } from 'slate' import { slate, editable, withreact } from 'slate react' const myeditor = () => { const editor = usememo(() => withreact(createeditor()), \[]) const renderelement = usecallback(({ attributes, children, element }) => { switch (element type) { case 'quote' return \<blockquote { attributes}>{children}\</blockquote> case 'link' return ( \<a { attributes} href={element url}> {children} \</a> ) default return \<p { attributes}>{children}\</p> } }, \[]) return ( \<slate editor={editor}> \<editable renderelement={renderelement} /> \</slate> ) } 🤖 assurez vous d'inclure props attributes et de rendre props children dans vos composants personnalisés ! les attributs doivent être ajoutés à l'élément dom de niveau supérieur à l'intérieur du composant, car ils sont nécessaires au bon fonctionnement des fonctions d'aide dom de slate et les enfants sont le contenu textuel réel de votre document que slate gère automatiquement pour vous vous n'êtes pas obligé d'utiliser des éléments html simples, vous pouvez également utiliser vos propres composants react personnalisés const renderelement = usecallback(props => { switch (props element type) { case 'quote' return \<quoteelement { props} /> case 'link' return \<linkelement { props} /> default return \<defaultelement { props} /> } }, \[]) feuilles lorsque le formatage au niveau du texte est rendu, les caractères sont regroupés en "feuilles" de texte qui contiennent chacune le même formatage appliqué pour personnaliser le rendu de chaque feuille, vous utilisez une renderleaf prop const renderleaf = usecallback(({ attributes, children, leaf }) => { return ( \<span { attributes} style={{ fontweight leaf bold ? 'bold' 'normal', fontstyle leaf italic ? 'italic' 'normal', }} \> {children} \</span> ) }, \[]) remarquez cependant comment nous l'avons traité légèrement différemment de renderelement étant donné que le formatage du texte a tendance à être assez simple, nous avons choisi de nous passer de la switch déclaration et de simplement activer/désactiver quelques styles à la place (mais rien ne vous empêche d'utiliser des composants personnalisés si vous le souhaitez !) un inconvénient du formatage au niveau du texte est que vous ne pouvez pas garantir qu'un format donné est "contigu"—ce qui signifie qu'il reste comme une seule feuille cette limitation par rapport aux feuilles est similaire au dom, où cela est invalide \<em>t\<strong>e\</em>x\</strong>t parce que les éléments dans l'exemple ci dessus ne se ferment pas correctement, ils sont invalides au lieu de cela, vous écririez le html ci dessus comme suit \<em>t\</em>\<strong>\<em>e\</em>x\</strong>t si vous avez ajouté une autre section qui se chevauche à \<strike> à ce texte, vous devrez peut être réorganiser les balises de fermeture encore une fois le rendu des feuilles dans slate est similaire vous ne pouvez pas garantir que même si un mot a un type de formatage appliqué, cette feuille sera contiguë, car cela dépend de la façon dont elle se chevauche avec d'autres formatages bien sûr, ces histoires de feuilles semblent assez complexes mais, vous n'avez pas à y penser beaucoup, tant que vous utilisez le formatage au niveau du texte et le formatage au niveau des éléments pour leurs usages prévus les propriétés de texte sont pour non contigu , formatage au niveau des caractères les propriétés des éléments sont pour contigu , éléments sémantiques dans le document décorations les décorations sont un autre type de formatage au niveau du texte elles sont similaires aux anciennes propriétés personnalisées, sauf que chacune s'applique à une plage du document au lieu d'être associée à un nœud de texte donné cependant, les décorations sont calculées au moment du rendu en temps de rendu en fonction du contenu lui même cela est utile pour le formatage dynamique comme la mise en surbrillance de syntaxe ou les mots clés de recherche, où les changements dans le contenu (ou certaines données externes) ont le potentiel de changer le formatage les décorations sont différentes des marques en ce sens qu'elles ne sont pas stockées dans l'état de l'éditeur barres d'outils, menus, superpositions, et plus encore ! en plus de contrôler le rendu des nœuds à l'intérieur de slate, vous pouvez également récupérer le contexte actuel de l'éditeur à partir d'autres composants en utilisant le useslate hook de cette façon, d'autres composants peuvent exécuter des commandes, interroger l'état de l'éditeur, ou toute autre chose un cas d'utilisation courant pour cela est de rendre une barre d'outils avec des boutons de formatage qui sont mis en surbrillance en fonction de la sélection actuelle const myeditor = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor}> \<toolbar /> \<editable /> \</slate> ) } const toolbar = () => { const editor = useslate() return ( \<div> \<button active={isboldactive(editor)}>b\</button> \<button active={isitalicactive(editor)}>i\</button> \</div> ) } parce que le \<toolbar> utilise le useslate hook pour récupérer le contexte, il se re rendra chaque fois que l'éditeur change, de sorte que l'état actif des boutons reste synchronisé