Introducción a Slate!

http //slatejs org es un completamente marco personalizable para construir editores de texto enriquecido probando de nuevo slate te permite construir editores ricos e intuitivos como los de https //medium com/ , https //www dropbox com/paper o https //www google com/docs/about/ —que se están convirtiendo en requisitos básicos para aplicaciones en la web—sin que tu base de código se vea atrapada en la complejidad puede hacer esto porque toda su lógica está implementada con una serie de complementos, por lo que nunca estás limitado por lo que es o no es en "núcleo" puedes pensar en ello como una implementación enchufable de contenteditable construida sobre https //facebook github io/react/ se inspiró en bibliotecas como https //facebook github io/draft js/ , http //prosemirror net/ y http //quilljs com/ 🤖 slate está actualmente en beta su api central es utilizable ahora, pero es posible que necesites enviar solicitudes de extracción para correcciones en casos de uso avanzados algunas de sus api no están "finalizadas" y cambiarán (rompiendo) con el tiempo a medida que encontremos mejores soluciones ¿por qué? ¿por qué crear slate? bueno (cuidado esta sección tiene algunas de https //github com/ianstormtaylor opiniones!) antes de crear slate, probé muchas de las otras bibliotecas de texto enriquecido que existen— https //facebook github io/draft js/ , http //prosemirror net/ , http //quilljs com/ , etc lo que encontré fue que, aunque conseguir que ejemplos simples funcionaran era lo suficientemente fácil, una vez que comenzabas a intentar construir algo como https //medium com/ , https //www dropbox com/paper o https //www google com/docs/about/ , te encontrabas con problemas más profundos el "esquema" del editor estaba codificado y era difícil de personalizar cosas como negrita y cursiva estaban soportadas de forma predeterminada, pero ¿qué pasa con los comentarios, o las incrustaciones, o incluso necesidades más específicas del dominio? transformar los documentos programáticamente era muy complicado escribir como un usuario puede haber funcionado, pero hacer cambios programáticos, que son críticos para construir comportamientos avanzados, era innecesariamente complejo serializar a html, markdown, etc parecía una reflexión tardía cosas simples como transformar un documento a html o markdown implicaban escribir mucho código repetitivo, para lo que parecía ser casos de uso muy comunes reinventar la capa de vista parecía ineficiente y limitante la mayoría de los editores crearon sus propias vistas, en lugar de usar tecnologías existentes como react, por lo que tenías que aprender un sistema completamente nuevo con nuevos "problemas" la edición colaborativa no fue diseñada de antemano a menudo, la representación interna de datos del editor hacía imposible usarla para un caso de uso de edición colaborativa en tiempo real sin básicamente reescribir el editor los repositorios eran monolíticos, no pequeños y reutilizables las bases de código de muchos de los editores a menudo no exponían las herramientas internas que podrían haber sido reutilizadas por los desarrolladores, lo que llevó a tener que reinventar la rueda construir documentos complejos y anidados era imposible muchos editores fueron diseñados en torno a documentos "planos" simplistas, lo que hacía que cosas como tablas, incrustaciones y leyendas fueran difíciles de razonar y a veces imposibles por supuesto, no todos los editores exhiben todos estos problemas, pero si has intentado usar otro editor, es posible que te hayas encontrado con problemas similares para sortear las limitaciones de sus apis y lograr la experiencia de usuario que buscas, tienes que recurrir a cosas muy improvisadas y algunas experiencias son simplemente imposibles de lograr si eso te suena familiar, te podría gustar slate lo que me lleva a cómo slate resuelve todo eso principios slate intenta resolver la pregunta de " docid 3o6s7blnpmmfyk1skzjoa " con algunos principios plugins de primera clase la parte más importante de slate es que los plugins son entidades de primera clase eso significa que puedes completamente personalizar la experiencia de edición, para construir editores complejos como los de medium o dropbox, sin tener que luchar contra las suposiciones de la biblioteca núcleo sin esquema la lógica central de slate asume muy poco sobre el esquema de los datos que estarás editando, lo que significa que no hay suposiciones integradas en la biblioteca que te hagan tropezar cuando necesites ir más allá de los casos de uso más básicos modelo de documento anidado el modelo de documento utilizado para slate es un árbol anidado y recursivo, al igual que el dom mismo esto significa que crear componentes complejos como tablas o citas en bloque anidadas es posible para casos de uso avanzados pero también es fácil mantenerlo simple utilizando solo un nivel de jerarquía paralelo al dom el modelo de datos de slate se basa en el dom el documento es un árbol anidado, utiliza selecciones y rangos, y expone todos los controladores de eventos estándar esto significa que comportamientos avanzados como tablas o citas en bloque anidadas son posibles prácticamente cualquier cosa que puedas hacer en el dom, puedes hacerla en slate comandos intuitivos los documentos de slate se editan utilizando "comandos", que están diseñados para ser de alto nivel y extremadamente intuitivos de escribir y leer, para que la funcionalidad personalizada sea lo más expresiva posible esto aumenta enormemente tu capacidad para razonar sobre tu código modelo de datos listo para la colaboración el modelo de datos que utiliza slate—específicamente cómo se aplican las operaciones al documento—ha sido diseñado para permitir que la edición colaborativa se superponga, por lo que no necesitarás repensar todo si decides hacer que tu editor sea colaborativo límites "núcleo" claros con una arquitectura centrada en plugins y un núcleo sin esquema, se vuelve mucho más claro dónde está el límite entre "núcleo" y "personalizado", lo que significa que la experiencia central no se ve obstaculizada por casos extremos demostración ¡mira la http //slatejs org de todos los ejemplos! ejemplos para tener una idea de cómo podrías usar slate, mira algunos de los ejemplos https //www slatejs org/examples/plaintext — mostrando el caso más básico un glorificado \<textarea> https //www slatejs org/examples/richtext — mostrando las características que esperarías de un editor básico https //www slatejs org/examples/markdown preview — mostrando cómo agregar controladores de teclas para atajos similares a markdown https //www slatejs org/examples/links — mostrando cómo envolver texto en nodos en línea con datos asociados https //www slatejs org/examples/images — mostrando cómo usar nodos vacíos (sin texto) para agregar imágenes https //www slatejs org/examples/hovering toolbar — mostrando cómo se puede implementar un menú contextual flotante https //www slatejs org/examples/tables — mostrando cómo anidar bloques para renderizar componentes más avanzados https //www slatejs org/examples/paste html — mostrando cómo usar un serializador html para manejar html pegado https //www slatejs org/examples/mentions — mostrando cómo usar nodos vacíos en línea para menciones simples con @ cada ejemplo incluye un ver código enlace al código que lo implementa y tenemos https //github com/ianstormtaylor/slate/tree/master/site/examples también si tienes una idea para un ejemplo que muestre un caso de uso común, ¡haz un pull request! documentación si estás usando slate por primera vez, consulta los http //docs slatejs org/walkthroughs/01 installing slate tutoriales y los http //docs slatejs org/concepts para familiarizarte con la arquitectura y los modelos mentales de slate http //docs slatejs org/walkthroughs http //docs slatejs org/concepts http //docs slatejs org/general/faq http //docs slatejs org/general/resources si eso no es suficiente, siempre puedes https //github com/ianstormtaylor/slate/tree/master/packages , que está muy comentado también hay traducciones de la documentación a otros idiomas https //doodlewind github io/slate doc cn/ si estás manteniendo una traducción, ¡no dudes en hacer un pull request aquí! ¡contribuyendo! ¡todas las contribuciones son muy bienvenidas! consulta las docid\ profzmkt0wjbiqc8vkqdu para más información! slate es https //github com/ianstormtaylor/slate/tree/f6bfe034d707693488c38da77537fd36cb8856cf/license md