Interfaces

slate trabaja con objetos json puros todo lo que requiere es que esos objetos json se ajusten a ciertas interfaces por ejemplo, un nodo de texto en slate debe obedecer la text interfaz interface text { text string } lo que significa que debe tener una text propiedad con una cadena de contenido pero cualquier otra propiedad personalizada también está permitida, y es completamente tu decisión esto te permite adaptar tus datos a tu dominio y caso de uso específicos, añadiendo cualquier lógica de formato que desees, sin que slate se interponga este enfoque basado en interfaces separa a slate de la mayoría de los otros editores de texto enriquecido que requieren que trabajes con sus clases "modelo" hechas a mano, y hace que sea mucho más fácil de razonar también significa que evita penalizaciones de tiempo de inicio relacionadas con "inicializar" el modelo de datos propiedades personalizadas para tomar otro ejemplo, la element interfaz de nodo en slate es interface element { children node\[] } esta es una interfaz muy permisiva todo lo que requiere es que la children propiedad esté definida conteniendo los nodos hijos del elemento pero puedes extender elementos (o cualquier otra interfaz) con tus propias propiedades personalizadas que son específicas de tu dominio por ejemplo, podrías tener elementos de "párrafo" y "enlace" const paragraph = { type 'paragraph', children \[ ], } const link = { type 'link', url 'https //example com', children \[ ] } el type y url propiedades allí son tu propia api personalizada slate ve que existen, pero nunca las usa para nada sin embargo, cuando se va a renderizar un elemento de enlace, recibirás un objeto con las propiedades personalizadas adjuntas, para que puedas renderizarlo como \<a href={element url}>{element children}\</a> al comenzar con slate, es importante entender todas las interfaces que define hay un puñado de ellas que se discuten en cada una de las guías funciones auxiliares además de la información de tipo, cada interfaz en slate también expone una serie de funciones auxiliares que facilitan su uso por ejemplo, al trabajar con nodos import { node } from 'slate' // get the string content of an element node const string = node string(element) // get the node at a specific path inside a root node const descendant = node get(value, path) o, al trabajar con rangos import { range } from 'slate' // get the start and end points of a range in order const \[start, end] = range edges(range) // check if a range is collapsed to a single point if (range iscollapsed(range)) { // } hay muchas funciones auxiliares disponibles para todos los casos de uso comunes al trabajar con las diferentes interfaces al comenzar, vale la pena leerlas todas, porque a menudo puedes simplificar la lógica compleja en solo unas pocas líneas de código con ellas ayudantes personalizados además de las funciones auxiliares integradas, es posible que desees definir tus propias funciones auxiliares personalizadas y exponerlas en tus propios espacios de nombres personalizados por ejemplo, si tu editor admite imágenes, es posible que desees un ayudante que determine si un elemento es un elemento de imagen const isimageelement = element => { return element type === 'image' && typeof element url === 'string' } puedes definir estos como funciones únicas fácilmente pero también puedes agruparlas en espacios de nombres, al igual que lo hacen las interfaces principales, y usarlas en su lugar por ejemplo import { element } from 'slate' // you can use `myelement` everywhere to have access to your extensions export const myelement = { element, isimageelement, isparagraphelement, isquoteelement, } esto facilita la reutilización de la lógica específica del dominio junto con los ayudantes integrados de slate