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

Question

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome new versionReproducible demo link https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo?file=/src/Editor.jsDescribe the bug How to reproduce the bug?Just drag and drop image block to canvasalso 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 th...

throne1986 · Accepted Answer

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

artf · Answer

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

throne1986 · Answer

@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

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

Question

Answers (4)

Related Questions and Answers

Target :null when adding video

Cannot read properties of undefined (reading 'uploadFile')

Custom component styles are not applied after deletion and re-addition

Cannot drag to move components on mobile

Paid Plugins That Match This Issue

Related tutorials

Ship to Production Faster: What’s New in GrapesJS Shadcn

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor

Browse Plugin Categories