Grandes actualizaciones: TinyMCE 8 y Placeholder 2.0 para GrapesJS

Editor de texto en línea TinyMCE 8 — un nuevo capítulo

El plugin ahora funciona en TinyMCE 8 — la última versión de uno de los editores WYSIWYG más capaces que existen. Mantuvimos el nombre del paquete igual, pero en el fondo este es un plugin fundamentalmente diferente.

Qué hay de nuevo

Dos modos de edición sacados de la caja. Los elementos de bloque (<p>, <div>, <li>, etc.) tienen toda la barra de herramientas — formato, indentación, alineación, listas, enlaces. Los elementos en línea (, , , –) obtienen un compacto inline_toolbar, y — lo crucial — al pulsar Enter dentro de un elemento en línea ahora se <br> inserta en lugar de romper el elemento.<h5><h1><button><a><span>

Soporte de primera clase para GrapesJS Studio. La nueva parentToolbar: true opción muestra la barra de herramientas en el documento padre, lo que elimina los conflictos de z-índice con la superposición de selección de Studio y las insignias de componentes. La barra de herramientas también permanece visible cuando el enfoque se mueve entre los desplegables iframe y TinyMCE — ya no hay parpadeos.

Una revisión técnica seria. El código fuente es ahora una reescritura completa de TypeScript con definiciones de tipo agrupadas .d.ts . Solucionamos fugas de memoria y una vulnerabilidad XSS que vivía en la 0.1.x sucursal. Hay un nuevo método público destroy() para el desmontaje explícito: todos los oyentes de eventos, MutationObserver y nodos DOM de la barra de herramientas se liberan limpiamente.

Configuración flexible. Funciona tanto con Tiny Cloud CDN como con un TinyMCE autoalojado. La nueva tinymce opción es un paso para cualquier parámetro nativo tinymce.init() — license_key, content_style, font_family_formats, toolbar_mode, lo que necesites. La barra de herramientas acepta una sola cadena ('bold italic | link') o un array de cadenas para disposiciones de varias filas.

Compatibilidad

• GrapesJS: ≥ 0.21, < 1.0
• TinyMCE: 8.x
• Conjuntos: ESM + UMD + declaraciones TypeScript
• Funciona tanto con GrapesJS de código abierto como con GrapesJS Studio SDK

→ Página de plugins en GJS. Mercado

Placeholder 2.0 — Experiencia Drag Premium

El rectángulo gris predeterminado que GrapesJS muestra al arrastrar no es precisamente una experiencia premium. El marcador de posición 2.0 lo sustituye por una vista previa en vivo a tamaño real del bloque — con todos sus estilos aplicados — además de animaciones fluidas y resaltados en zonas de caída. Los usuarios ven exactamente qué están colocando y exactamente dónde caerá.

¿Qué hay en la v1.5.0

Esto no es un parche: es una reconstrucción desde cero. El mismo comportamiento que te encantaba, con una cadena de herramientas moderna debajo.

• TypeScript-first — reescritura completa del código fuente con declaraciones agrupadas .d.ts para autocompletar instantáneo.
• GrapesJS 0.21 y 0.22 funcionan desde el principio.
• ~8 KB con zip — Versión impulsada por Vite, aproximadamente la mitad del tamaño del antiguo paquete Webpack.
• 10 presets de animación integrados + soporte para tu propio @keyframesarchivo .
• Modo personalizado de marcador de posición — si una vista previa en directo no es adecuada para tu experiencia de usuario, cámbiala por tu propio HTML/CSS (por ejemplo, un indicador de caída fina).
• Color de zona de caída configurable a dropZoneColor través de — que coincida con tu marca.
• Tiempos ajustados expuestos — flipDurationMs, flipThresholdPx, y escapeDispatchDelayMs ahora son opciones públicas.
• Desmontaje limpio — idempotente destroy(), sin filtraciones de oyentes en editor.destroy().
• Validación de opciones — los valores inválidos vuelven a los valores por defecto con un clear console.warn en lugar de romperse silenciosamente.
• 76 unidades + pruebas de integración en Vitest, además de una suite Playwright E2E.
• Correcciones de Firefox — el comportamiento de arrastrar fuera del lienzo es ahora fiable en todos los navegadores principales.
• Compatibilidad con el SDK de GrapesJS Studio — funciona dentro del editor Studio.

10 animaciones para cada vibración

Desde un suave Slidein (escala + fundido + altura máxima) y Zoom-in soft con un sobrepaso cúbico-bezier, hasta un dramático Flip-in (flip 3D en el eje X) y un Elastic drop con un aterrizaje rebotador. Y si ninguno de los presets encaja, conecta el tuyo — pasa customAnimation con @keyframes una .animation clase, y el plugin lo recoge.

Donde brilla

• Los creadores de páginas SaaS — ofrecen a los usuarios una sensación de arrastrar y soltar de verdad premium.
• Editores CMS — los bloques de contenido se sienten tangibles.
• Creadores de correos electrónicos — la colocación de bloques es visible antes de la entrega.
• Herramientas para páginas de aterrizaje y proyectos de GrapesJS Studio.

¿Por qué actualizar desde el original

Si sigues usando el plugin original de Placeholder: se construyó sobre Webpack 3 + Babel 6 y ya no funciona bien con cadenas de herramientas modernas. Sin TypeScript, sin tipos, sin soporte para Studio SDK, colores y tiempos codificados, no destroy() — y los oyentes se filtraron entre instancias del editor. La versión 1.5.0 soluciona todo sin cambiar la API pública, así que la migración no requiere reescribir tu integración.

→ Página de plugins en GJS. Mercado

¿Qué sigue ahora?

Ambos plugins ahora se basan en la misma base moderna: TypeScript, desmontaje limpio, validación de configuración, soporte para Studio SDK. Esa es la base sobre la que construiremos la próxima ronda de reportajes: estad atentos.

Si ya posees estos plugins, las actualizaciones están incluidas en tu licencia — descarga las nuevas versiones desde tu GJS. Cuenta de mercado. Si no lo haces, ambos están actualmente con descuento.

Preguntas, informes de errores, ideas — envíanoslas. Leímos todo.

— El equipo Devfuture