Nos complace anunciar la actualización v 0.1.5 de Super Tooltip, nuestro plugin de menú flotante y tooltip para GrapesJS. Esta versión aporta una mejor posición, actualizaciones de compatibilidad y una experiencia de usuario más fluida para tus flujos de trabajo de edición dentro del canvas.
¿Qué es el Super Tooltip Plugin?
Super Tooltip es un plugin enfocado en UX para GrapesJS diseñado para agilizar las interacciones entre componentes dentro del editor. Añade iconos flotantes y menús contextuales junto a componentes seleccionados para que puedas realizar rápidamente acciones comunes (añadir componente, convertir, mover, eliminar, selección de padre, etc.) sin salir del lienzo. El plugin también soporta atajos de teclado y descripciones visuales ordenadas para una experiencia de edición pulida.
Novedades en la versión 0.1.5
Estos son los cambios clave en esta actualización:
- Actualizado las posiciones de botones / tooltips para alinearlas mejor en las versiones recientes de GrapesJS
- Aumento de compatibilidad: actualizado para funcionar sin problemas con GrapesJS v0.22.x
- Correcciones menores de errores en la ubicación de los menús, asegurando que la interfaz flotante se mantenga correctamente alineada al editar componentes. (Siguiendo las correcciones de la v 0.1.3)
Por qué esto importa
- Mejor alineación: Los iconos flotantes y menús ahora se mantienen visualmente consistentes con la selección, ya sea que estés anidado en profundidad o editando dentro de un diseño complejo.
- Compatibilidad actualizada: Con GrapesJS evolucionando rápidamente, asegurarse de que el plugin funcione con la v0.22.x te ayuda a evitar desajustes y fallos.
- Mejor experiencia de usuario: Un comportamiento más fluido significa menos distracciones y más enfoque en el diseño. Las descripciones emergentes y atajos siguen haciendo que la edición sea más rápida e intuitiva.
Resumen rápido de las principales características
Para recordarte lo que ofrece Super Tooltip:
- Junto al componente seleccionado aparecen botones flotantes de "Añadir componente" y "Más opciones".
- Atajos de teclado como:
- Cmd/Ctrl + D → Añadir componente
- Cmd/Ctrl + F → Abrir el menú "Más opciones"
- Cmd/Ctrl + E → Seleccionar padre
- Cmd/Ctrl + ↑ / ↓ → Mover componente arriba/abajo
- Duplicado de Cmd/Ctrl + S →
- Eliminar → eliminar
- Sistema de descripción emergente fluida (activado con el cursor activado) para mostrar atajos sin saturar la interfaz
- Menús contextuales animados: insertar bloques (con búsqueda/filtro), submenú "Convertir a" (reemplazo de componentes en vivo) y acciones rápidas como mover/eliminar/duplicar/seleccionar padre — todos accesibles al teclado
- Integración con BlockManager: extrae automáticamente los bloques (con SVG/previsualizaciones de iconos) y soporte para inyección de contenido
Instrucciones de actualización
Si ya usas Super Tooltip:
- Descarga la última versión (0.1.5) desde el marketplace.
- Reemplaza los archivos de plugins en tu proyecto (compilación dist + fuente según sea necesario).
- Asegúrate de usar GrapesJS v0.22.x (o confirma la compatibilidad).
- Borra la caché (si usas caché del navegador) y vuelve a cargar la instancia de tu editor.
- Revisa los menús flotantes y las descripciones emergentes en el editor — verifica que el posicionamiento funcione como se espera, especialmente al editar componentes anidados.
- Reporta cualquier problema de diseño o peculiaridad de comportamiento para que podamos solucionarlo en el próximo parche.
Si eres nuevo: instala Super Tooltip en tu configuración de GrapesJS y actívalo en la inicialización de tu plugin. Usa la demo/vista previa para verlo en acción y consulta la documentación para más opciones de configuración.
Mirando hacia adelante
Ya estamos planeando la próxima versión menor, en la que nos centraremos en:
- Más opciones de personalización (por ejemplo, cambiar qué iconos flotantes aparecen, control de conjuntos de accesos directos).
- Mejor soporte para tipos de componentes personalizados y flujos de inserción de bloques no estándar.
- Lógica de posicionamiento mejorada para diseños complejos (multipágina, editores anidados, paneles fuera del lienzo).
- Ganchos API para que los usuarios avanzados puedan vincular su propio comportamiento a los menús flotantes y accesos directos.
Reflexiones finales
Si quieres ofrecer a tu editor basado en GrapesJS una experiencia dentro del canvas más pulida y fácil de usar, Super Tooltip ofrece una mejora de interfaz inteligente y ligera. Con la versión 0.1.5 obtienes una mejor alineación, compatibilidad actualizada y un flujo de trabajo más fluido desde el primer momento.
¡Pruébalo hoy y cuéntanos cómo encaja en tu configuración!
Échale un vistazo a ello: https://gjs.market/products/super-tooltip-for-grapesjs
¡Feliz edición!
— El equipo de desarrollo de DevFuture