BUG: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

chrome new version

Reproducible demo link

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

Describe the bug

How to reproduce the bug?

1. Just drag and drop image block to canvas
2. also drag and drop custom image block to canvas can be found on landing pages block

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

What is the expected behavior?

When the user drops custom image block, default image block, or double-clicking any image on canvas instead of opening the default modal image uploader I want to open my custom react-modal

What is the current behavior?

Now when the user drops the image on canvas or doubles click the image for replacing the image it opens up the default image uploader,

If is necessary to execute some code in order to reproduce the bug, paste it here below:

    import React, { useState, useEffect } from "react";
    import grapesjs from "grapesjs";
    import block from "grapesjs-blocks-basic";
    import ModalImages from "./ModalImages";
    
    
    const Editor = () => {
      const [editor, setEditor] = useState(null);
    
      function imageBlock(editor) {
        editor.BlockManager.add("image-block", {
          label: '<i class="fa fa-picture-o" aria-hidden="true"></i>',
          type: "image",
          content: '<image src="" />',
          category: {
            id: "image-block",
            label: "image-block",
            open: true
          },
          selectable: true,
          render: ({ model, className }) => `<div class="${className}__my-wrap">
          ${model.get("label")}
          Image
        </div>`
        });
      }
    
      useEffect(() => {
        const editor = grapesjs.init({
          container: "#editor",
          storageManager: false,
          blockManager: true,
          plugins: [block, imageBlock]
        });
    
        const bm = editor.BlockManager;
        editor.on("load", () => {
          editor.BlockManager.render([
            bm.get("image-block").set("category", "Landing Pages")
          ]);
          editor.BlockManager.getCategories().each((ctg) => ctg.set("open", false));
        });
    
        let modal = editor.Modal;
    
        editor.on("component:add", (model, argument) => {
          console.log("model", model);
          if (model.getName() === "Image") {
            modal.setContent(ModalImages);
          }
        });
    
        setEditor(editor);
      }, []);
    
      console.log("editor", editor);
      return (
        <>
          <div id="editor"></div>
        </>
      );
    };
    
    export default Editor;

Code of Conduct

• I agree to follow this project’s Code of Conduct

[throne1986]

@artf I solved the issue it was about closure problem , the solution just passing the URL as options as follows

      editor.Commands.run("open-assets", {
          target: editor.getSelected()
          url: imageUrl
        });
    
     editor.Commands.add("open-assets", {
          run(editor, sender, opts = {}) {
            dispatch(setIsOpen(true));
            console.log("imageUrl", opts.url);
            opts.target.set("src", opts.url);
          }
        });

U can close the issue , again thank you so much for this library god bless ya

[artf]

when you run editor.command.run('open-assets') you have to pass options, eg.

editor.command.run('open-assets', {
 target: editor.getSelected(),
})