Installer Slate à partir d'Archbee

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 dépendances de pair de slate yarn add react react dom notez que si vous préférez utiliser une version pré emballée de slate, vous pouvez et récupérer le fichier emballé ! consultez le docid\ yyamrwyxtuehfsjlwcvib guide pour plus d'informations une fois que vous avez installé slate, vous devrez l'importer // import react dependencies import react, { useeffect, usememo, 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 par un vide \<app> composant // define our app const app = () => { return null } l'étape suivante consiste à créer un nouvel éditeur objet nous voulons que l'éditeur soit stable à travers les rendus, donc nous utilisons le usememo hook const app = () => { // create a slate editor object that won't change across renders const editor = usememo(() => 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 l' éditeur avec reacteditor selon la documentation sur docid\ ko3qkeqwsuc4ol1s5ddxy l'exemple ci dessous inclut également les types personnalisés requis pour le reste de cet exemple // typescript users only add this code import { baseeditor } 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, nous voulons créer un état pour valeur const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // keep track of state for the value of the editor const \[value, setvalue] = usestate(\[]) return null } la prochaine étape est de rendre un \<slate> fournisseur de contexte le composant fournisseur garde une trace de votre éditeur slate, de ses plugins, de sa valeur, de sa sélection et de tout changement qui se produit il doit être rendu au dessus de tout \<editable> composants mais il peut également fournir l'état de l'éditeur à d'autres composants comme des barres d'outils, des menus, etc en utilisant le useslate hook const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[]) // render the slate context return ( \<slate editor={editor} value={value} onchange={newvalue => setvalue(newvalue)} /> ) } vous pouvez considérer le \<slate> composant comme fournissant un contexte "contrôlé" à chaque composant en dessous de lui 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, ou des aperçus en direct, ou d'autres composants complexes à côté de votre contenu éditable en ayant un contexte partagé, ces autres composants peuvent exécuter des commandes, interroger l'état de l'éditeur, etc d'accord, donc la prochaine étape est de rendre le \<editable> composant lui même const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[]) return ( // add the editable component inside the context \<slate editor={editor} value={value} onchange={newvalue => setvalue(newvalue)} \> \<editable /> \</slate> ) } le \<editable> composant agit comme un 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 avons utilisé un tableau vide \[] comme valeur initiale de l'éditeur, donc il n'a pas de contenu corrigeons cela en définissant une valeur initiale la valeur est juste du json simple voici un exemple contenant un seul bloc de paragraphe avec un peu de texte dedans const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // add the initial value when setting up our state const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={newvalue => setvalue(newvalue)} \> \<editable /> \</slate> ) } voilà ! c'est l'exemple le plus basique de slate si vous le rendez sur la page, vous devriez voir un paragraphe avec le texte une ligne de texte dans un paragraphe et quand vous tapez, vous devriez voir le texte changer !