Installer Slate

slate est un monorepo divisé en plusieurs packages npm, donc pour l’installer vous faites yarn add slate slate react vous devrez également vous assurer d’installer les peer dependencies de slate yarn add react react dom notez que si vous préférez utiliser une version pré packagée de slate, vous pouvez yarn add slate et récupérer le fichier pré packagé dist/slate js ! consultez le utilisation de la source pré packagée docid\ gihwdikgwhgjwuwilx8ng pour plus d’informations une fois que vous avez installé slate, vous devrez l’importer // import react dependencies import react, { usestate } from 'react' // import the slate editor factory import { createeditor } from 'slate' // import the slate components and react plugin import { slate, editable, withreact } from 'slate react' avant d’utiliser ces imports, commençons avec un composant \<app> vide // define our app const app = () => { return null } l’étape suivante consiste à créer un nouvel objet éditeur nous voulons que l’éditeur reste stable entre les rendus, donc nous utilisons le hook usestate sans setter https //github com/ianstormtaylor/slate/pull/3925#issuecomment 781179930 const app = () => { // create a slate editor object that won't change across renders const \[editor] = usestate(() => withreact(createeditor())) return null } bien sûr, nous n’avons rien rendu, donc vous ne verrez aucun changement si vous utilisez typescript, vous devrez également étendre éditeur avec reacteditor et ajouter des annotations conformément à la documentation sur typescript docid anlzf2mzqu3turl19jke l’exemple ci dessous inclut également les types personnalisés nécessaires pour le reste de cet exemple // typescript users only add this code import { baseeditor, descendant } from 'slate' import { reacteditor } from 'slate react' type customelement = { type 'paragraph'; children customtext\[] } type customtext = { text string } declare module 'slate' { interface customtypes { editor baseeditor & reacteditor element customelement text customtext } } ensuite, il faut rendre un provider de contexte \<slate> le composant provider garde la trace de votre éditeur slate, de ses plugins, de sa valeur, de sa sélection et de tous les changements qui se produisent il doit être rendu au dessus de tout composant \<modifiable> mais il peut aussi fournir l’état de l’éditeur à d’autres composants comme des barres d’outils, des menus, etc via le hook useslate const initialvalue = \[] const app = () => { const \[editor] = usestate(() => withreact(createeditor())) // render the slate context return \<slate editor={editor} value={initialvalue} /> } vous pouvez considérer le composant \<slate> comme fournissant un contexte à chaque composant en dessous de lui la prop "value" du slate provider est uniquement utilisée comme état initial pour editor children si votre code repose sur le remplacement de editor children, vous devriez le faire directement plutôt que de compter sur la prop "value" pour le faire à votre place voir slate pr 4540 https //github com/ianstormtaylor/slate/pull/4540 pour une discussion plus approfondie c’est un modèle mental légèrement différent de choses comme \<input> ou \<textarea> , car les documents richtext sont plus complexes vous voudrez souvent inclure des barres d’outils, des aperçus en direct ou d’autres composants complexes à côté de votre contenu éditable avec un contexte partagé, ces autres composants peuvent exécuter des commandes, interroger l’état de l’éditeur, etc très bien, l’étape suivante consiste à rendre le composant \<modifiable> lui‑même const initialvalue = \[] const app = () => { const \[editor] = usestate(() => withreact(createeditor())) return ( // add the editable component inside the context \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } le composant \<modifiable> fonctionne comme contenteditable partout où vous le rendez, il affichera un document richtext éditable pour le contexte de l’éditeur le plus proche il ne reste qu’une dernière étape jusqu’à présent, nous utilisions un tableau \[] vide comme valeur initiale de l’éditeur, donc il n’a aucun contenu corrigeons cela en définissant une valeur initiale la valeur est simplement du json brut voici un exemple contenant un seul bloc de paragraphe avec du texte // add the initial value const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const \[editor] = usestate(() => withreact(createeditor()) return ( \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } et voilà ! c’est l’exemple le plus basique de slate si vous l’affichez sur la page, vous devriez voir un paragraphe avec le texte une ligne de texte dans un paragraphe et lorsque vous saisissez du texte, vous devriez voir celui ci changer !