Nodos

los tipos más importantes son los nodo objetos un nivel raíz editor nodo que contiene todo el contenido del documento contenedor elemento nodos que tienen un significado semántico en su dominio y nivel hoja texto nodos que contienen el texto del documento estas tres interfaces se combinan para formar un árbol, al igual que el dom por ejemplo, aquí hay un valor de texto plano simple const editor = { children \[ { type 'paragraph', children \[ { text 'a line of text!', }, ], }, ], // the editor has other properties too } reflejar el dom tanto como sea posible es uno de los principios de slate la gente usa el dom para representar documentos con estructuras similares a richtext todo el tiempo reflejar el dom ayuda a que la biblioteca sea familiar para los nuevos usuarios, y nos permite reutilizar patrones probados en batalla sin tener que reinventarlos nosotros mismos 🤖 el siguiente contenido en la red de desarrolladores de mozilla puede ayudarte a aprender más sobre los conceptos correspondientes del dom https //developer mozilla org/en us/docs/web/api/document https //developer mozilla org/en us/docs/web/html/block level elements https //developer mozilla org/en us/docs/web/html/inline elements https //developer mozilla org/en us/docs/web/api/text un documento de slate es una estructura anidada y recursiva en un documento, los elementos pueden tener nodos hijos, todos los cuales pueden tener nodos hijos sin límite la estructura anidada y recursiva te permite modelar comportamientos simples como menciones de usuarios y hashtags o comportamientos complejos como tablas y figuras con subtítulos editor el nodo de nivel superior en un documento de slate es el editor en sí encapsula todo el "contenido" richtext del documento su interfaz es interface editor { children node\[] } cubriré su funcionalidad más adelante, pero la parte importante en lo que respecta a los nodos es su children propiedad que contiene un árbol de node objetos elemento los elementos constituyen las capas intermedias de un documento de richtext son los nodos que son personalizados para tu propio dominio su interfaz es interface element { children node\[] } puedes definir elementos personalizados para cualquier tipo de contenido que desees por ejemplo, podrías tener párrafos y citas en tu modelo de datos que se diferencian por una type propiedad const paragraph = { type 'paragraph', children \[ ], } const quote = { type 'quote', children \[ ], } es importante notar que puedes usar cualquier propiedades personalizadas que desees la type propiedad en ese ejemplo no es algo que slate conozca o le importe si estuvieras definiendo tus propios nodos "link", podrías tener una url propiedad const link = { type 'link', url 'https //example com', children \[ ], } o tal vez quieras dar a todos tus nodos una propiedad id const paragraph = { id 1, type 'paragraph', children \[ ], } lo que importa es que los elementos siempre tengan una children propiedad bloques vs en línea dependiendo de tu caso de uso, es posible que desees definir otro comportamiento para los element nodos que determina su "flujo" de edición todos los elementos por defecto son elementos "bloque" cada uno aparece separado por espacio vertical, y nunca se superponen pero en ciertos casos, como para enlaces, es posible que desees hacerlos elementos "en línea" en su lugar de esa manera, viven al mismo nivel que los nodos de texto y fluyen 🤖 este es un concepto tomado del comportamiento del dom, ver https //developer mozilla org/en us/docs/web/html/block level elements y https //developer mozilla org/en us/docs/web/html/inline elements puedes definir qué nodos se tratan como nodos en línea sobrescribiendo la editor isinline función (por defecto siempre devuelve false ) ten en cuenta que los nodos en línea no pueden ser el primer o último hijo de un bloque padre, ni pueden estar junto a otro nodo en línea en el array de hijos slate automáticamente los separará con { text '' } hijos por defecto con normalizando docid\ vdl26j4szpz5iaksmkofn los elementos pueden contener elementos de bloque o elementos en línea mezclados con nodos de texto como hijos pero los elementos no pueden contener algunos hijos que son bloques y otros que son en línea vacíos similar a los bloques y en línea, hay otro comportamiento específico de los elementos que puedes definir dependiendo de tu caso de uso su "vacío" los elementos por defecto son no vacíos, lo que significa que sus hijos son completamente editables como texto pero en algunos casos, como para imágenes, quieres asegurarte de que slate no trate su contenido como texto editable, sino como una caja negra 🤖 este es un concepto tomado de la especificación html, ver https //www w3 org/tr/2011/wd html markup 20110405/syntax html#void element puedes definir qué elementos se tratan como vacíos sobrescribiendo el editor isvoid función (por defecto siempre devuelve falso ) texto los nodos de texto son los nodos de nivel más bajo en el árbol, que contienen el contenido de texto del documento, junto con cualquier formato su interfaz es interface text { text string } por ejemplo, una cadena de texto en negrita const text = { text 'a string of bold text', bold true, } los nodos de texto también pueden contener cualquier propiedad personalizada que desees, y así es como implementas un formato personalizado como negrita , cursiva , código , etc