Problemas con GrapesJS

Problemas analizados por 3,464 en GitHub 370 resuelto · 90 abierto. Busca, filtra y explora respuestas probadas en batalla.

Se han detectado problemas con 466

🔍 components
#545711 de octubre de 2023por boardmain4 respuestas
Reacciones 3

Editor congelado en loadProjectData 0.21.7

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 117.0 Enlace de demo reproducible localhost Describe el bicho grapesjs": "^0.21.7", editor.loadProjectData({ "activos": [], "estilos": [], "páginas": [{ "componente": "<div>PRUEBA PRUEBA</div>" }] }) Congelación de...

antoinematyja

Hola, me encontré con el mismo problema usando Vue 3 y usando una 'ref' de Vue para almacenar el editor. Aunque no estoy seguro de si es buena idea. Una reproducción de código sería algo así: Solución: no uses un 'árbitro' 😅

artf

¿Puedes ofrecer una demo reproducible? He probado tu ejemplo y no veo ninguna congelación...

boardmain

Probé con la última versión 21.7 Intento ponerlo en línea, pero acabo de pegar HTML desde un comando personalizado, el código fuente está pegado, pero después el editor se congela (necesito cerrar la página). por ejemplo ~~~ btnImp.onclick...

#54413 de octubre de 2023por padcom2 respuestas
Reacciones 0

No hay id para que los elementos no tengan estilos sino con 'script', lo que hace que el script no se ejecute para esos elementos

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Última versión de ChromeEnlace de demo reproducible https://github.com/padcom/grapesjs-no-id-for-element-exampleDescribe el bicho Al crear componentes personalizados de GrapesJS, si esos componentes tienen el 'script()' (co...

artf

El problema se debe al uso de 'jsInHtml: false' y a cómo se gestiona el generador JS interno. Intentaré arreglarlo para la próxima entrega.

ClaudeCode

Gracias por informar de esto, @padcom. El problema de No identificar elementos que no tienen estilos sino 'script', que hace que el script no se ejecute para esos elementos, parece ser una condición de carrera o un problema de temporizació...

#542526 de septiembre de 2023por javadsamiee2 respuestas
Reacciones 2

Al añadir una página similar, solo cambian los identificadores de componentes

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? 117 Enlace de demo reproducible https://jsfiddle.net/mirjavad/ctsx7zer/5/ Describe el bicho Quería crear una acción de clon para una página y noté este error. ¿Cómo reproducir el bicho?Crear varias páginas con el mismo ID...

artf

Buen detalle @javadsamiee se corregirá en la próxima versión

ClaudeCode

Gracias por informar de esto, @javadsamiee. Buena pregunta sobre Cuando añadir una página similar solo cambiarán los identificadores de componentes. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí:...

#542426 de septiembre de 2023por bgrand-ch2 respuestas
Reacciones 1

El evento 'component:styleUpdate' no se activa

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Chrome 116.0.5845.187Enlace de demo reproducible https://jsfiddle.net/yLcvbwjd/Describe el bicho ¿Cómo reproducir el bicho?Añadir el evento 'component:styleUpdate'Actualizar el estilo de un componente con 'addStyle' o 'setS...

bgrand-ch

@artf ❤️

ClaudeCode

Gracias por informar de esto, @bgrand-ch. Buena pregunta sobre 'component:styleUpdate' que el evento no se activa. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de Grape...

#537912 de septiembre de 2023por Sw33tgt4 respuestas
Reacciones 4

Las modificaciones de clase de los componentes no se detectan automáticamente

Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Chrome Versión 116Enlace de demo reproducible https://jsfiddle.net/h5b0ndvL/1/Describe el bicho Cuando un componente se vuelve a renderizar en el lienzo, se renderiza un nuevo atributo añadido a la definición del modelo, pe...

Sw33tgt

Por ahora, como solución temporal, he añadido esto en una función 'editor.on('component:mount', (component) => {});' hasta que se reciba cualquier retroalimentación. Parece que funciona bien. En el caso de que una clase se elimine de la de...

Sw33tgt

sí, esto es intencionado con las clases, con tu enfoque no podrás eliminar clases definidas del componente, seguirán añadiéndose en el componente dentro de la estructura. Lo cual está bien cuando una clase ha sido olvidada en un componente...

Sw33tgt

Algo así en la función initClasses() de Component.ts añadiría las nuevas clases al elemento en render. Déjame saber qué te parece: '''Manuscrito mecanografiado const cls = this.get('classes') || attrCls || []; Cambiando de const a Sea sea...

#537811 de septiembre de 2023por Sw33tgt4 respuestas
Reacciones 0

ErrorTipo no capturado: No se pueden leer propiedades de undefined (leyendo 'Lienzo') mientras se arrastra un componente en el Panel del Gestor de Capas

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v116.0.5845.97 Enlace de demo reproducible https://grapesjs.com/demo.html Describe el bicho ¿Cómo reproducir el bicho?Seleccionar cualquier componente del lienzoAbrir el Panel del Gestor de CapasSelecciona el prime...

Sw33tgt

Bajé a la v0.21.4 y ya no tengo el problema, así que solo ocurre en la última versión disponible.

padcom

Tengo el mismo problema en los ejemplos más sencillos. Hacer downgrade a 0,4 hace que desaparezca. ¿Regresión?

artf

Sí, ya está arreglado aquí. Voy a posponer un nuevo lanzamiento para finales de esta semana.

#53728 de septiembre de 2023por uncldrwRespuesta 1
Reacciones 0

No se puede añadir AtRule personalizado (@container, @font-face)

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Windows, Chrome, React Enlace de demo reproducible / Describe el bicho Al intentar añadir una atRules personalizada como @container o @font-face, el CSS se compila consistentemente a @media en su lugar. He probado varios...

ClaudeCode

Gracias por informar de esto, @uncldrw. El problema con No se puede añadir AtRule personalizado (@container, @font-face) parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando lo...

#53625 de septiembre de 2023por rozek4 respuestas
Reacciones 0

Funciones de propiedad arrastrables/soltables que no se llaman al arrastrar

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión 1.56.20 Chromium: 115.0.5790.171 (Versión Offizieller) (arm64) Enlace de demo reproducible ninguno Describe el bicho He definido mis propios tipos de componentes con reglas específicas de arrastrar y soltar: pero...

rozek

incluso con 'arrastrable' y 'soltable' en 'verdadero', no puedo arrastrar un elemento a otro

rozek

Una primera solución que ayuda a colocar componentes en otros componentes:eliminar 'dragMode:'absolute', de 'grapesjs.init({...})`En su lugar, añade 'dmode:'absolute' a 'model.defaults' de cada tipo de componente que quieras que sea arrast...

artf

En modo absoluto, no existe el concepto de mover componentes dentro o fuera de otros componentes. Un componente en modo absoluto solo se actualiza en posición de estilo, no se mueve en el DOM, por eso no tiene sentido que funcione arrastra...

#53551 de septiembre de 2023por andcmatiasRespuesta 1
Reacciones 0

En la capa de movimiento

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 116 Enlace de demo reproducible https://grapesjs.com/demo.html Describe el bicho ¿Cómo reproducir el bicho?Abrir el gestor de capas e intentar mover el componenteDesactivará el componente y mostrará los errores en...

ClaudeCode

Gracias por informar de esto, @andcmatias. Buena pregunta sobre En la capa de movimiento. El enfoque recomendado con ProseMirror es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específic...

#535231 de agosto de 2023por rozek3 respuestas
Reacciones 0

Uncaught SyntaxError: Token inesperado '{' a las CanvasView.ts:590:12

Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión 1.56.20 Chromium: 115.0.5790.171 (Versión Offizieller) (arm64) Enlace de demo reproducible ninguno Describe el bicho Tengo un tipo de componente con un script Al previsualizar un proyecto usando un componente de e...

rozek

Eso es interesante: definir una función separada y definiendo el tipo de componente tal y como se describe en la documentación Funciona tal y como está diseñado. Pero sigue sonando extraño que una función en línea produzca un error de sint...

artf

@rozek buena observación, lo arreglará para la próxima versión

ClaudeCode

Gracias por informar de esto, @rozek. El problema con Uncaught SyntaxError: Token inesperado '{' en CanvasView.ts:590:12 parece ser una condición de carrera o un problema de temporización de gestión de estado. Esto suele ocurrir cuando los...

Explora todos los temas