ErrorTipoUncatch: No se ejecutó 'appendChild' en 'Node': el parámetro 1 no es de tipo 'Node'.

Versión GrapesJS

• Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Versión nueva de Chrome

Enlace de demo reproducible

https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo?file=/src/Editor.js

Describe el bicho

¿Cómo reproducir el bicho?

1. Simplemente arrastra y suelta el bloque de imagen al lienzo
2. También se puede encontrar el bloque de imagen personalizada de arrastrar y soltar en el bloque de páginas de destino

Demo en directo: https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo?file=/src/Editor.js

¿Cuál es el comportamiento esperado?

Cuando el usuario deja un bloque de imagen personalizado, un bloque de imagen por defecto, o hace doble clic en cualquier imagen en el lienzo en vez de abrir el subador de imágenes modal por defecto, quiero abrir mi react-modal personalizado

¿Cuál es el comportamiento actual?

Ahora, cuando el usuario deja la imagen en el lienzo o hace doble clic en ella para reemplazarla, se abre el subidor de imagen por defecto,

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: '''js importar React, { useState, useEffect } de "react"; importar uvas de "uvasjs"; importar bloque de "grapesjs-blocks-basic"; importar ModalImages desde "./ModalImages";

const Editor = () => { const [editor, setEditor] = useState(null);

function imageBlock(editor) { editor. BlockManager.add("image-block", { etiqueta: '<i class="fa fa-picture-o" aria-hidden="true"></i>', tipo: "imagen", Contenido: '<imagen src="" />', Categoría: { id: "bloque de imagen", etiqueta: "bloque de imagen", Abierto: Verdadero }, Seleccionable: Cierto, render: ({ model, className }) => '<div class="${className}__my-wrap"> ${model.get("label")} Imagen '</div> }); }

useEffect(() => { const editor = grapesjs.init({ contenedor: "#editor", storageManager: false, blockManager: cierto, plugins: [bloque, imageBlock] });

const bm = editor. Jefe de bloque; editor.on("load", () => { editor. BlockManager.render([ bm.get("bloque-de imagen").set("category", "Landing Pages") ]); editor. BlockManager.getCategories().each((ctg) => ctg.set("open", false)); });

Sea modal = editor. modal;

editor.on("component:add", (model, argument) => { console.log("modelo", modelo); if (model.getName() === "Image") { modal.setContent(ModalImages); } });

setEditor (editor); }, []);

console.log("editor", editor); regreso ( <> <div id="editor"></div> </> ); };

exportar el editor por defecto;

### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto