Placeholder 2.0 - Premium Drag Experience

Deja de luchar contra el arrastrar y soltar por defecto de GrapesJS. Placeholder 2.0 sustituye el rectángulo gris estándar por una vista previa en vivo a tamaño real del bloque que se arrastra — con animaciones suaves, resaltado en zonas de caída y control total sobre la sensación visual.

Tus usuarios ven exactamente lo que están colocando, exactamente dónde cae. No más conjeturas.

Novedades en la v1.5.0

Una reconstrucción completa desde cero — el mismo comportamiento que te encantaba, una cadena de herramientas moderna debajo:

• TypeScript-first — reescritura completa del código fuente con declaraciones agrupadas .d.ts para autocompletado instantáneo
• Soporte para GrapesJS 0.21 + 0.22 — funciona con las versiones actuales de serie.
• ~8 KB con zip — Versión impulsada por Vite, la mitad del tamaño del antiguo paquete de Webpack
• 10 preajustes de animación + animaciones CSS personalizadas
• Modo personalizado de marcador de posición — reemplaza la vista previa en vivo por tu propio HTML/CSS
• Color de zona de drop configurable (dropZoneColor) — que coincida con tu marca
• Los tiempos finamente ajustados — flipDurationMs, flipThresholdPx, escapeDispatchDelayMs ahora quedan expuestos
• Desmontaje limpio — método idempotente destroy() ; sin oyentes de eventos filtrados activados editor.destroy()
• Validación de opciones — los valores inválidos vuelven a los valores predeterminados con un clear console.warn en lugar de romperse silenciosamente
• 76 pruebas unitarias + integración (Vitest) — probadas en combate antes de cada lanzamiento
• Correcciones de compatibilidad con Firefox — el comportamiento de arrastrar fuera del lienzo es ahora fiable en todos los navegadores principales
• Compatible con SDK con GrapesJS Studio — funciona dentro del editor Studio

Características

Vista previa de contenido en directo mientras se arrastra

Olvídate del marcador predeterminado. Tu bloque se renderiza a tamaño completo con todos sus estilos aplicados mientras lo mueves — el usuario ve el resultado real, en tiempo real.

10 presets de animación integrados

Elige la sensación que se adapte a tu editor:

Animaciones personalizadas

Introduce tu propio @keyframes + .animation CSS — control creativo total:

{ customAnimation: ` @keyframes my-anim { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .animation { animation: my-anim 300ms ease-out both; } ` } 

Bloque de marcador personalizado

¿Quieres un indicador de drop fino en vez de una vista previa en directo? Cámbiala:

{ dragPlace: { default: 0, html: { block: 'div', content: '' }, css: 'background: #5C6AC4; height: 4px; width: 100%;', } } 

Resaltado en zonas de caída

Un contorno de color configurable marca el objetivo activo de caída — ya no hay más "¿dónde va a caer esto?"

Exclusión por componente

Algunos tipos de componentes (por ejemplo, text) funcionan mejor con el marcador de posición por defecto. Enuméralos dragDefault y el plugin se aparta automáticamente.

Inicio rápido

npm install grapesjs-plugin-placeholder2 

import grapesjs from 'grapesjs'; import placeholder from 'grapesjs-plugin-placeholder2'; grapesjs.init({ container: '#gjs', plugins: [placeholder], pluginsOpts: { [placeholder]: { animation: 'animation1', dropZoneColor: '#5C6AC4', dragDefault: ['text'], } } }); 

También se incluye como un paquete UMD para uso de etiquetas normales <script> .

Casos de uso

• Creadores de páginas SaaS — ofrecen a tus usuarios una sensación premium de arrastrar y soltar
• Editores CMS — haz que los bloques de contenido se sientan tangibles
• Creadores de correo electrónico — visualiza la colocación de bloques antes de la caída
• Herramientas para la página de aterrizaje — pulir la experiencia de usuario de edición
• Proyectos de GrapesJS Studio — totalmente compatibles con Studio SDK

Detalles técnicos

• GrapesJS:^0.21.0 || ^0.22.0
• Conjuntos: ESM + UMD con declaraciones TypeScript enrolladas
• Tamaño: ~8 KB con zipper
• Nodo: ≥18 (para desarrollo)
• Probado: 72 pruebas Vitest + suite Playwright E2E

¿Por qué actualizar desde la versión anterior?

Si usas el plugin original de Placeholder:

• El antiguo plugin era Webpack 3 + Babel 6 — ya no compatible con las cadenas de herramientas modernas
• Sin TypeScript, sin Types, sin soporte para Studio SDK
• Colores codificados, tiempos codificados, sin destroy() método
• Los oyentes de eventos filtrados en las instancias de los editores

La v1.5.0 arregla todo esto sin cambiar la superficie de la API, ya sabes.