Resulta que también tenía que programar KuroEditor (Llantos) Vol. 1

¡¿Cómo?! ¡¿Que no hay ningún editor?!

Hacia la mitad del desarrollo de KuroCMS, Kuroto recordó de repente el inmenso esfuerzo y tiempo invertidos en configurar un editor decente en Strapi, y se quedó helado. Si se me hubiera puesto el pelo blanco, me habría convertido en un conejo panda.

Aunque esos editores no funcionaron para Strapi, empecé a investigar con la esperanza de encontrar uno que cumpliera con mis requisitos en otro lugar... pero no pude encontrar ninguno. ¡No puede ser, dime que no es verdad, Chappy! (ChatGPT)

Búsqueda exclusiva bajo la licencia MIT

Dado que planeaba empaquetarlo y distribuirlo con KuroCMS, tener un editor con licencia MIT era obviamente la opción más conveniente.

Al investigar, parece que la tendencia actual para los editores web está completamente dominada por las opciones headless, donde solo tomas la lógica y construyes la interfaz de usuario tú mismo. Al igual que los CMS headless.

Los 5 editores mejor valorados del mundo

【TipTap】

1. Según se informa, el número uno indiscutible. Extremadamente flexible, compatible con React/Vue y genera HTML/JSON.
2. Un editor headless. Puedes adaptar completamente el diseño de los botones y la distribución de la barra de herramientas a la interfaz de usuario de tu aplicación. Está construido sobre el potente motor ProseMirror.
3. Base de usuarios: Más de 37k estrellas en GitHub y más de 8 millones de descargas semanales. Prácticamente el estándar global.
4. Cómo integrar: Instalar a través de `npm install @tiptap/react` y controlarlo usando el gancho `useEditor`.

【Editor.js】

1. Base de fans entusiasta, supuestamente intuitivo y con una sensación similar a Notion, basado en plugins, genera JSON (datos estructurados).
2. Características: Trata todo como un bloque (párrafos, imágenes, encabezados). Sensación de funcionamiento similar a Notion.
3. Genera un JSON limpio en lugar de HTML, lo que lo hace ideal para mostrar los mismos datos en la web, aplicaciones móviles, relojes inteligentes, etc.
4. Cómo integrar: Carga el paquete principal y las herramientas individuales (Imagen, Encabezado, etc.) por separado, luego inicializa con `new EditorJS()`.

【Lexical】

1. De rápido crecimiento, rápido, ligero, robusto, creado por Meta, centrado en el diseño, genera HTML/JSON.
2. Se especializa en rendimiento y accesibilidad. Extremadamente ligero, lo que mantiene rápidas incluso las aplicaciones a gran escala.
3. Base de usuarios: En rápido aumento. Funciona bien con contenido generado por IA y se adopta con frecuencia para editores de IA.
4. Características: Ofrece gestión de estado avanzada y un modelo de datos basado en árboles. Totalmente compatible con WCAG (normas de accesibilidad).
5. Cómo integrar: Integrar como un plugin de React. Define "nodos" con nombre para construir el editor.

【Slate】 (El framework más potente exclusivo para React)

1. Diseñado para desarrolladores, personalización definitiva, solo para React, genera JSON (cualquiera).
2. Características: Más que un editor, es una biblioteca para construir editores. Puedes definir completamente tu propio modelo de documento.
3. Base de usuarios: Fuerte apoyo dentro de la comunidad de React (más de 31k estrellas en GitHub).
4. Características: Excelente en el manejo de documentos con estructuras complejas anidadas (por ejemplo, listas dentro de tablas, imágenes dentro de listas).
5. Cómo integrar: Construir utilizando un enfoque orientado a componentes. Escribe funciones personalizadas como `renderElement` para controlar el renderizado.

【Milkdown】 (WYSIWYG especializado en Markdown)

1. Fuerte en casos de uso específicos | Combina Markdown con operación visual | Dificultad baja a media | Genera Markdown/HTML
2. Características: Proporciona una experiencia similar a Typora donde el Markdown se formatea en tiempo real mientras escribes.
3. Base de usuarios: Especializado para desarrolladores y documentación técnica.
4. Características: Potentes extensiones de Markdown a través de plugins. Admite símbolos matemáticos (LaTeX) y diagramas (Mermaid).
5. Cómo integrar: Construido con TypeScript; se inicializa pasando los plugins requeridos en una matriz.

Y bien, ¿qué pasa con estos cinco?

Intenté usar TipTap y Lexical como editores para Strapi, pero no funcionaron en absoluto... Lexical no manejaba bien las imágenes y TipTap también tenía problemas. Ninguno se acercaba al WYSIWYG (que significa que puedes editar en el editor exactamente como aparecerá en el resultado final) que Kuroto quería. Editor.js era básicamente lo mismo; un editor solo de JSON no puede ofrecer un verdadero WYSIWYG. Podrían estar bien si solo estás escribiendo texto y código de forma continua. En cuanto a Milkdown, ni siquiera menciona las imágenes; para eso, mejor usar LaTeX. Y honestamente, a Kuroto realmente no le gusta React. Mis disculpas a Meta (sudor). Como mucho, usaría Vue si fuera necesario un framework, ¡pero a mí lo que me gusta es Astro! Ahora que lo pienso, antes había un manga llamado Astro Kyudan.

Al final, recordé que Quill + better-table, que usaba en Strapi, era la mejor opción. Sin embargo, no podía aceptar la implementación de las tablas, jajaja. Fue entonces cuando el pequeño demonio en mi mente dijo: "¡Si tanto te vas a quejar, prográmalo tú mismo!". Tienes toda la razón. Mis disculpas.

Y así comenzó el desarrollo de KuroEditor

No necesitaba un editor de alto rendimiento. ¡Solo quería WYSIWYG y una herramienta de tablas que pudiera usarse sin estrés, similar a Dropbox Paper! Impulsado por este grito interno, decidí construirlo yo mismo. Compartiré los detalles del editor que hizo Kuroto en el próximo artículo. Está casi terminado y, una vez que finalice las pruebas mientras escribo estos artículos y organice el repositorio para GitHub, lo publicará.