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

[throne1986]

GrapesJS version

• [X] 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

• [X] I agree to follow this project's Code of Conduct

[throne1986]

I solved the issue for future reference

first I removed this function :

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

I replaced with this function

    editor.Commands.add('open-assets', {
         run(editor, sender, opts = {}) {
            dispatch(setIsOpen(true)); // open my custom asset manager
            opts.target.set('src', customImgUrl) // set image url
        }
    })

This replaced the default asset manager with my custom react modal asset manager

[throne1986]

@artf I have one more problem , if I do the following its works

     editor.Commands.add("open-assets", {
          run(editor, sender, opts = {}) {
            dispatch(setIsOpen(true));
            console.log("imageUrl", imageUrl);
            opts.target.set('src', "https://via.placeholder.com/150"); // passing URL manually
          },
        });

But if I pass the URL dynamically it's not working, here is how I am passing URL dynamically

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

Check the image below what I see on the console, and tell me what is wrong here?

[artf]

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

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

[throne1986]

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

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

Thanks that works as expected:

But now when I click once my button for setting image URL its not setting the URL , it setts the URL only if I double click the button for setting the URL here is my solution

    import React, { useState, useEffect } from "react";
    import grapesjs from "grapesjs";
    import { setIsOpen, setImageUrl } from "../reducers/modalSlice";
    import ModalImages from "../components/ModalImages";

    const Editor = () => {
        const [editor, setEditor] = useState(null);
         const imageUrl = useSelector((state) => state.modal.imageUrl)

      useEffect(() => {
        const editor = grapesjs.init({
          container: "#editor",
          storageManager: false,
          blockManager: true,
          plugins: [block, imageBlock],
        });
        setEditor(editor);
      }, []);

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

      const handleUseImage = (image) => {
        dispatch(setImageUrl(image.attributes.path_thumb_url));
        editor.Commands.run("open-assets", {
          target: editor.getSelected(),
        });
      };

      return (
        <>
          <ModalImages handleUseImage={handleUseImage} />
          <div id="editor"></div>
        </>
      );
    };

    export default Editor;

Why do I need to double-click my button for setting the targeted image URL ? what is wrong here? thanks for the help though

Here is minal example demo : https://codesandbox.io/s/react-redux-toolkit-application-forked-l5rhp?file=/src/pages/Editor.js

https://user-images.githubusercontent.com/27904724/132755801-b3497d5d-a06f-4316-81ab-f3ea20e1a662.mp4

[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