Personalización extrema de Strapi 5: Integración de Quill y arquitectura multiinquilino

En septiembre de 2025, el lanzamiento de "Strapi 5" trajo importantes actualizaciones para los desarrolladores. Con una ruptura clara con las estructuras de datos de Strapi 4, introdujo cambios drásticos, renovó las API multilingües y mejoró el rendimiento. Si bien se convirtió en una herramienta más simple y potente, algunas configuraciones predeterminadas dejaban margen de mejora.

Específicamente, el editor "Blocks" predeterminado (basado en Lexical) es moderno pero carece de las herramientas avanzadas de edición de tablas y decoración de texto que a menudo se necesitan para un diseño de diseño enriquecido. No podía ni siquiera construir una tabla simple de forma predeterminada. Si bien los bordes de tabla pueden ser menos comunes en los diseños occidentales, son esenciales en Japón para crear páginas estructuradas y fáciles de leer.

Además, Strapi 5 carece de multiinquilino (multi-tenancy) nativo. Puede ejecutar contenedores separados para cada organización, pero ejecutar una base de datos PostgreSQL dedicada para cada inquilino es costoso. Para lograr un multiinquilino rentable, personalicé el backend. Así es como modifiqué el entorno de Strapi 5 para el blog "kuro.boo" para lograr una excelente experiencia de edición y una alta eficiencia de gestión.

1. Resolución de las peculiaridades de entrada del idioma japonés (IME)

Strapi está construido sobre React, lo que aporta ciertos comportamientos de la interfaz de usuario. El editor principal de Strapi 5 tenía problemas menores al manejar eventos IME en japonés, lo que provocaba saltos del cursor al escribir. Probé tres IME diferentes en macOS (el predeterminado de Apple, Google Japanese Input y Kawasemi), pero los problemas del cursor persistieron porque el editor capturaba eventos de teclado innecesarios. Al principio, tuve que escribir los artículos en editores externos como Zed y luego copiarlos y pegarlos. Esto era demasiado tedioso.

2. Manejo de múltiples imágenes

Los artículos necesitan más que solo texto e imágenes de portada. Primero probé el siguiente complemento:

TipTap

TipTap es popular y admite múltiples imágenes, pero su implementación requería agregar bloques de entrada separados para cada imagen y párrafo de texto individual. Esto se sentía obsoleto y lejos de una verdadera experiencia WYSIWYG, lo que me hacía extrañar las herramientas de diseño fluido de Dropbox Paper (que utilizo con frecuencia).

3. Transición a Quill

Dado que Lexical y TipTap no se adaptaban a mis necesidades, investigué Quill. Con su lanzamiento v2, Quill ofrece una excelente flexibilidad. Sus características WYSIWYG parecían prometedoras, pero aún carecía de soporte nativo para tablas avanzadas. Para solucionar esto, integré "quill-better-table" (después de un día de depuración). Este complemento permite agregar/eliminar filas y columnas mediante clic derecho, fusionar celdas y personalizar el estilo de las celdas directamente dentro del panel de administración de Strapi. Crucialmente, estas tablas se guardan como HTML estándar, lo que facilita su renderizado en el frontend de Astro.

Esto resolvió tanto la edición de tablas como los problemas de entrada de IME, brindándonos un panel de edición WYSIWYG altamente funcional dentro de Strapi:

4. Adición de carga de imágenes mediante arrastrar y soltar

Para facilitar la escritura, agregué una función de arrastrar y soltar: arrastrar una imagen o pegarla desde el portapapeles activa automáticamente la API de carga de Strapi, registrándola en la biblioteca de medios e insertándola en el editor. (Nota: Dado que arrastrar y soltar no muestra mensajes de error detallados para archivos demasiado grandes, aún debemos vigilar los límites de tamaño de archivo).

5. Multiinquilino basado en esquemas

Para administrar múltiples sitios en una sola instancia de Strapi sin iniciar contenedores de bases de datos separados, implementé el cambio de esquemas de bases de datos (DATABASE_SCHEMA) dentro de la misma instancia de base de datos. Esto mantiene bajos los costos de la base de datos al tiempo que mantiene entornos de base de datos separados y seguros para cada inquilino.

6. Flujo de trabajo de generación de sitios estáticos (SSG) local primero

Si bien ejecutar un servidor CMS las 24 horas del día, los 7 días de la semana es ideal para equipos colaborativos, agrega costos innecesarios y riesgos de seguridad para blogs personales o sitios con pocas actualizaciones. Por lo tanto, cambié la arquitectura de implementación:

1. Inicie la instancia local de Strapi solo al escribir o editar.
2. Ejecute una compilación de desarrollo que compile el contenido de Strapi en páginas estáticas de Astro, copiando imágenes a la carpeta de compilación y actualizando los enlaces de las imágenes.
3. Detenga la instancia local de Strapi y despliegue el sitio completamente estático en Cloudflare Pages.

Esta configuración significa que nuestro sitio público está alojado completamente en la red perimetral de Cloudflare. Se carga extremadamente rápido, no cuesta nada hospedar y elimina los riesgos de seguridad de las bases de datos de acceso público. En kuro.boo, mantengo la instancia local de Strapi ejecutándose en mi máquina local por conveniencia, ya que no incurre en tarifas de alojamiento.

Comparación de configuraciones predeterminadas frente a personalizadas:

Conclusión

También resolví un error menor donde cualquier edición pequeña actualizaba la fecha de publicación del artículo, empujando las publicaciones más antiguas a la parte superior del feed. Agregué un campo dedicado `publishedAt` y ordené por él. Si bien modificar el código fuente de Strapi 5 directamente puede dificultar las futuras actualizaciones, este nivel de personalización es lo que hace que las plataformas CMS headless sean tan potentes. Me permitió construir un entorno de edición adaptado exactamente a mis necesidades.

Fuentes:

・Documentación de Strapi 5

・Quill - Editor de texto enriquecido

・quill-table-better (GitHub)