Rendu

l’un des meilleurs aspects de slate est qu’il est construit avec react, ce qui lui permet de s’intégrer directement dans votre application existante il ne réinvente pas sa propre couche de vue que vous devriez apprendre il essaie de garder tout aussi proche de react que possible à cet effet, slate vous donne le contrôle sur le comportement d’affichage de vos nœuds et propriétés personnalisés dans votre domaine richtext vous pouvez définir ces comportements en passant des « render props » au composant de niveau supérieur \<modifiable> par exemple, si vous vouliez afficher des composants d’éléments personnalisés, vous passeriez la prop renderelement 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’intégrer props attributes et d’afficher props children dans vos composants personnalisés ! les attributes doivent être ajoutés à l’élément dom de niveau supérieur à l’intérieur du composant, car ils sont nécessaires pour que les fonctions utilitaires dom de slate fonctionnent et les children sont le contenu textuel réel de votre document, que slate gère automatiquement pour vous vous n’avez pas à utiliser de simples éléments html, 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 affiché, les caractères sont regroupés en « feuilles » de texte contenant chacune le même formatage qui leur est appliqué pour personnaliser l’affichage de chaque feuille, vous utilisez une prop renderleaf 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 comme le formatage du texte a tendance à être assez simple, nous avons choisi d’abandonner l’instruction interrupteur et d’activer/désactiver seulement 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é soit « contigu », c’est‑à‑dire qu’il reste une seule feuille cette limitation concernant les feuilles est similaire au dom, où ceci 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 à la place, vous écririez le html ci dessus comme suit \<em>t\</em>\<strong>\<em>e\</em>x\</strong>t si vous ajoutiez par hasard une autre section superposée de \<strike> à ce texte, vous pourriez devoir réarranger encore une fois les balises de fermeture l’affichage 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 sa superposition avec d’autres formatages bien sûr, tout cela concernant les feuilles semble assez complexe cependant, 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 destinées au formatage de caractères non contigu , au niveau des caractères les propriétés d’élément sont destinées aux éléments contigus , 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 à un plage du document au lieu d’être associée à un nœud de texte donné cependant, les décorations sont calculées au temps de rendu en fonction du contenu lui‑même ceci est utile pour le formatage dynamique comme la coloration syntaxique ou les mots‑clés de recherche, où les modifications du contenu (ou de données externes) peuvent potentiellement modifier le formatage les décorations sont différentes des marks dans le sens où elles ne sont pas stockées dans l’état de l’éditeur barres d’outils, menus, overlays, et plus encore ! en plus de contrôler l’affichage des nœuds à l’intérieur de slate, vous pouvez également récupérer le contexte actuel de l’éditeur depuis d’autres composants en utilisant le hook useslate de cette façon, d’autres composants peuvent exécuter des commandes, interroger l’état de l’éditeur, ou toute autre action un cas d’usage courant consiste à afficher une barre d’outils avec des boutons de formatage qui sont mis en évidence 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 sera rendu de nouveau chaque fois que l’éditeur change, afin que l’état actif des boutons reste synchronisé