Draft.js, Editor.js, Slate.js: Eligiendo el mejor editor de texto para tu proyecto React

Hola, bienvenidos a mi masterclass sobre DraftJS, EditJS y SlideJS. Elegir el mejor editor de texto para tu proyecto React.

Solo un rápido resumen, esta es una charla relámpago, así que voy a presentarles tres discusiones, discutir sus fortalezas y echaremos un vistazo a su modelo de datos.

Entonces, como probablemente adivinaste desde la introducción, los editores son DraftJS, EditJS y SlideJS. Elegimos estos tres porque están principalmente bien adaptados al modelo de componentes y propiedades de React, en contraposición a los editores WYSIWYG tradicionales como CKEditor y TinyMCE, que están más enfocados en dar tu HTML como tu salida.

Los criterios que vamos a evaluar en estos editores es su sostenibilidad. Así que quién los financia, quién los apoya. Madurez. La licencia. Las características del editor. El ciclo de lanzamiento. Su estructura de data, es decir, cómo se ve la data cuando sale. El ecosistema, si hay plugins, si hay otras cosas que puedes hacer para extender la funcionalidad. Soporte de navegador. Quién lo usa o cuántos paquetes lo están usando, y el número de estrellas en GitHub.

Así que las características del editor que vamos a ver son si puedes hacer estilos de bloque, como H1, H2, cita en bloque. Estilos en línea como negrita y cursiva. Soporte para deshacer y rehacer. Soporte para pegar. Si admite listas. Bloques anidados. Medios, como imágenes, YouTube, etc. Tablas. Enlaces. Así que necesitas tener tanto el texto del enlace como el URI.

Así que el primero que vamos a ver es Draft.js. Este es utilizado por Facebook Messenger. Se utiliza en sus comentarios, funcionalidad, publicaciones de estado y la aplicación de notas de Facebook. Así que se está utilizando en producción a una escala bastante grande. Tiene muchas características pero eso requerirá código personalizado. Esto no es CK editor, tienes que hacer todo esto tú mismo. Pero obtienes las cosas que quieres y no las que no quieres. Así que mirando esos criterios. Está financiado y respaldado por Facebook. Es un 0.11.7, que es extraño, pensarías que sería un 1.0, dado que se está utilizando en producción.

La licencia es MIT. Es un metal desnudo, en términos de características. Por lo tanto, la mayoría de la funcionalidad tendrás que construirla tú mismo, pero hay buenos ejemplos.

El ciclo de lanzamiento es la versión semántica. La estructura de data es JSON y te mostraremos cómo se ve en un minuto. En términos del ecosistema, hay un editor completo disponible si instalas algunos proyectos de extensión. Soporte del navegador, no soporta IE 11 y hay algunos problemas con los navegadores móviles como iOS, Safari y Chrome Android. Es utilizado por 83,000 paquetes y tiene 20,000 estrellas.

Mirando el modelo de data, está compuesto por una serie de bloques y así podemos ver estos bloques cada uno tiene una clave y cada uno de esos tiene algún texto que va en él y un tipo. Y luego dentro de estos bloques puede haber una serie de entidades. Así que esto es para cosas como imágenes o menciones o enlaces. Cada uno de estos tiene un tipo, tienen inmutabilidad que está fuera del alcance de esta masterclass y pueden tener data para tus props. En términos de características del editor soporta estilos de bloque, estilos en línea, deshacer, rehacer y pegar. Soporta listas, soporta solo listas anidadas por lo que ningún otro bloque puede ser anidado, solo listas y eso solo hasta una profundidad de cinco. Soporta medios, no soporta tablas y soporta enlaces.

El siguiente editor es Editor.js. Editor.js es utilizado por algunas organizaciones, principalmente en Europa del Este. Está escrito en JavaScript puro pero hay puentes para React. La empresa que lo respalda es Codex, parece ser una agencia propia. Tiene una versión 2.19. La licencia es Apache 2.0. Es un editor basado en bloques en términos de características, por lo que todo se considera un bloque. El ciclo de lanzamiento es semver. La estructura de Data, de nuevo, es JSON. Hay muchos plugins para esto, a diferencia de Draft.js donde tienes que escribir mucho tú mismo. Principalmente consiste en agregar plugins extra aquí. Tiene 1.5, 1,500 paquetes que lo utilizan y 15,000 estrellas. Así que la estructura de data aquí, como dije, todo es un bloque. Así que un bloque tiene un tipo y luego tiene data que son como los prompts dentro de eso. Esto podría ser, por ejemplo, en términos de un elemento de lista. Esto te mostraría los elementos que estaban dentro de esa lista. Así que en términos de características del editor de contenido, obtienes estilos de bloque, estilos en línea, deshacer, rehacer, pegar, listas, bloques anidados, medios. Las tablas están disponibles pero es a través de un plugin beta y enlaces. Así que antes de establecerlo, solo tienes que averiguar si estás contento con la beta. El siguiente editor es Slate.js. Este fue construido específicamente para abordar algunos de los puntos problemáticos en la estructura de data de otros editores y se menciona a Draft.js. Soporta anidación y la colaboración es un ciudadano de primera clase, por lo que puedes usar esto si tienes un plan para construir algo como Google Docs donde tienes edición colaborativa. No es específicamente React, pero las bibliotecas de primera clase de React están disponibles para él y la mayoría de los docs lo utilizan. Está escrito por Ian Storm-Taylor, un usuario de GitHub. Está respaldado por un individuo en lugar de una organización, pero como verás, es bastante utilizado. La versión es nuevamente un 0, no un 1.0, la licencia es MIT. Al igual que con Draft.js, es bastante básico en términos de características, por lo que tienes que poner muchas de ellas juntas con code personalizado, pero hay muchos ejemplos que te muestran cómo hacer eso. El ciclo de lanzamiento es semver, la estructura de data de nuevo es JSON. No hay una amplia biblioteca de plugins para esto, pero hay mucho code de ejemplo que puedes usar para construir prácticamente todo lo que necesitas. Está siendo utilizado por 55,000 paquetes y tiene 20,000 estrellas. Así que la estructura de data aquí, soporta anidación como vimos. Así que estos están compuestos de nodos y cada nodo básicamente tiene un tipo y luego tiene hijos y el nodo de nivel más bajo es un nodo de texto que solo tiene texto en él. Así que en la parte inferior de cada árbol tiene que haber al menos un nodo de texto, pero por encima de eso las props son bastante arbitrarias basadas en el tipo. En términos de características del editor con Slate.js puedes hacer estilos de bloque, puedes hacer estilos en línea, puedes hacer deshacer, rehacer, pegar, listas, bloques anidados, medios, tablas y enlaces, pero como Draft.js, la mayoría de estos requieren que sigas los ejemplos y escribas code tú mismo. Así que en resumen, ¿qué editor deberías usar? Si quieres la estabilidad de una gran organización detrás de tu proyecto y una adopción bastante amplia ve con Draft.js de Facebook, pero no esperes cosas como anidación y cosas como la edición colaborativa van a ser difíciles. Si quieres empezar rápido y quieres un conjunto realmente rico de características de serie usa editor.js, pero si quieres el control definitivo y quieres soporte anidado y quieres dejar la puerta abierta para la colaboración, usa slate.js, pero solo espera que necesites hacer un poco más de trabajo para empezar. Gracias por venir a mi masterclass y espero las preguntas en el Q&A.