Instalando Slate desde Archbee

slate es un monorepo dividido en múltiples paquetes npm, así que para instalarlo haces yarn add slate slate react también necesitarás asegurarte de instalar las dependencias de pares de slate yarn add react react dom nota, si prefieres usar una versión preempaquetada de slate, puedes y recuperar el archivo empaquetado! consulta la docid\ dodccuwboey9ztb qbnms guía para más información una vez que hayas instalado slate, necesitarás importarlo // 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' antes de usar esas importaciones, comencemos con un vacío \<app> componente // define our app const app = () => { return null } el siguiente paso es crear un nuevo editor objeto queremos que el editor sea estable a través de las renderizaciones, así que usamos el usememo hook const app = () => { // create a slate editor object that won't change across renders const editor = usememo(() => withreact(createeditor()), \[]) return null } por supuesto, no hemos renderizado nada, así que no verás ningún cambio si estás usando typescript, también necesitarás extender el editor con reacteditor según la documentación sobre docid\ adcmwwzuhp3ekirixjth1 el ejemplo a continuación también incluye los tipos personalizados requeridos para el resto de este ejemplo // 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 } } a continuación, queremos crear un estado para value const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // keep track of state for the value of the editor const \[value, setvalue] = usestate(\[]) return null } a continuación, se debe renderizar un \<slate> proveedor de contexto el componente proveedor mantiene un seguimiento de tu editor slate, sus complementos, su valor, su selección y cualquier cambio que ocurra debe ser renderizado por encima de cualquier \<editable> componentes pero también puede proporcionar el estado del editor a otros componentes como barras de herramientas, menús, etc utilizando el 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)} /> ) } puedes pensar en el \<slate> componente como que proporciona un contexto "controlado" a cada componente debajo de él este es un modelo mental ligeramente diferente al de cosas como \<input> o \<textarea> , porque los documentos de texto enriquecido son más complejos a menudo querrás incluir barras de herramientas, o vistas previas en vivo, o otros componentes complejos junto a tu contenido editable al tener un contexto compartido, esos otros componentes pueden ejecutar comandos, consultar el estado del editor, etc bien, así que el siguiente paso es renderizar el \<editable> componente en sí 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> ) } el \<editable> el componente actúa como contenteditable donde sea que lo renderices, se mostrará un documento de texto enriquecido editable para el contexto del editor más cercano solo hay un último paso hasta ahora hemos estado usando un \[] vacío como el valor inicial del editor, por lo que no tiene contenido vamos a solucionar eso definiendo un valor inicial el valor es solo json simple aquí hay uno que contiene un bloque de párrafo con algo de texto en él 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> ) } ¡ahí lo tienes! ese es el ejemplo más básico de slate si lo renderizas en la página, deberías ver un párrafo con el texto una línea de texto en un párrafo y cuando escribas, ¡deberías ver el texto cambiar!