Custom plugin not saved properly

[Ananthumpillai]

I am creating a custom plugin
#component.js
export default (editor, opts = {}) => {
const dc = editor.DomComponents;
dc.addType("AudioComponent", {
model: {
defaults: {
draggable: true,
droppable: true,
resizable: true,
content: "",
style: {
width: '250px',
height:'250px'
}
},
},
});
};

block.js

export default (editor, opts = {}) => {
const bm = editor.BlockManager;
bm.add("AudioComponent", {
label: "Audio",
category: opts.category,
content: { type: "AudioComponent" },
});
};

and I am setting the component content, when i add a component to the editor,
editor.on("component:add", (component) => {
const { type, tagName } = component.attributes;
if (type === "AudioComponent") {
component.set({
type: "video",
content: <video style="width: 100%; height: 100%; background-color:#F0FBFB; padding:20px;" controls preload="auto" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYscfUBUbqwGd_DHVhG-ZjCOD7MUpxp4uhNe7toUg4ug&s" src="https://media.geeksforgeeks.org/wp-content/uploads/20230524142525/gfg_offline_classes_en.mp3" type="audio/mp3" />,
name: "asset.name",
autoplay: true,
});
}
})

This works perfectly until I save it, on reopening the container of the component is not tied with it. If i move the component its container won't move.
how to fix it??

[Ananthumpillai]

screencast-from-22-02-24-044751-pm-ist_eet8UKrP.webm

[mosh-tudor]

@Ananthumpillai

on reopening the container of the component is not tied with it

The isComponent function, which you don’t have, is responsible for this.
https://grapesjs.com/docs/modules/Components.html#iscomponent

You can try something like this:

export default (editor, opts = {}) => {
  const dc = editor.DomComponents;
  dc.addType("AudioComponent", {
    model: {
      defaults: {
        draggable: true,
        droppable: true,
        resizable: true,
        style: {
          width: '250px',
          height: '250px'
        }
      },
    },

    view: {
      init(this) {
        if (!this.components().length) {
          this.components('<div class="gjs-my-video"><video style="width: 100%; height: 100%; background-color:#F0FBFB; padding:20px;" controls preload="auto"    poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYscfUBUbqwGd_DHVhG-ZjCOD7MUpxp4uhNe7toUg4ug&s" src="https://media.geeksforgeeks.org/wp-content/uploads/20230524142525/gfg_offline_classes_en.mp3" type="audio/mp3" /></div>');
        }
      },
    },

    isComponent() {
      if (el?.classList?.contains('gjs-my-video')) {
        return { type: "AudioComponent" };
      }
    },
  });
};

[mosh-tudor]

Or just extend the Video component.

[Ananthumpillai]

Hi @mosh-tudor,
isComponent helped me , but still I am facing some issue.

Before saving everything works, but when reopening now the component is not resizing or moving, even if I want to delete it first I have to delete the component then I have to delete its container.

let isNewComponent = true;
editor.on("component:add", (component) => {
const { type } = component.attributes;

  if (type === "video" && isNewComponent) {
    setData(component);
    dispatch(setVideoModal(true));
  } else if (type === "AudioComponent") {
    component.set({
      type: "video",
             content: `<video class="myAudio" style="width: 100%; height: 100%; background-color:#F0FBFB; padding:20px;" controls preload="auto"    poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYscfUBUbqwGd_DHVhG-ZjCOD7MUpxp4uhNe7toUg4ug&s" src="https://media.geeksforgeeks.org/wp-content/uploads/20230524142525/gfg_offline_classes_en.mp3" type="audio/mp3" />`,

      name: "asset.name",
      autoplay: true,
    });
  }
  isNewComponent = true;
});
editor.on("component:clone", (component) => {
  isNewComponent = false;
});

^^ This is how I am setting the content

export default (editor, opts = {}) => {
const dc = editor.DomComponents;
const defaultType = dc.getType("default");
const defaultView = defaultType.view;
dc.addType("AudioComponent", {
model: {
defaults: {
draggable: true,
droppable: true,
resizable: true,
content: "",
style: {
width: "250px",
height: "250px",
},
},
},
isComponent(el) {
return el.classList && el.classList.contains("myAudio");
},
});
};
screencast-from-22-02-24-074656-pm-ist_qdL93Hkp (1).webm

[mosh-tudor]

@Ananthumpillai
Try to add resizable: true, here:

    component.set({
      type: "video",
      content: `<video class="myAudio" style="width: 100%; height: 100%; background-color:#F0FBFB; padding:20px;" controls preload="auto"    poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYscfUBUbqwGd_DHVhG-ZjCOD7MUpxp4uhNe7toUg4ug&s" src="https://media.geeksforgeeks.org/wp-content/uploads/20230524142525/gfg_offline_classes_en.mp3" type="audio/mp3" />`,
      name: "asset.name",
      autoplay: true,
      resizable: true,
    });

[Ananthumpillai]

@mosh-tudor
editor.on("component:add", (component) => {
const { type } = component.attributes;
console.log(component,'component');
if (type === "video" && isNewComponent) {
setData(component);
dispatch(setVideoModal(true));
} else if (type === "AudioComponent") {
component.set({
content: <video class="myAudio" style="width: 100%; height: 100%; background-color:#F0FBFB; padding:20px;" controls preload="auto" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYscfUBUbqwGd_DHVhG-ZjCOD7MUpxp4uhNe7toUg4ug&s" src="https://media.geeksforgeeks.org/wp-content/uploads/20230524142525/gfg_offline_classes_en.mp3" type="audio/mp3" />,
name: "asset.name",
autoplay: true,
resizable: true,
});
}

  No this didn't helped ,
  
  Is this happens because of style paramater, because upon reopening the editor on second time the component is automatically scalled to the mentioned height and width
   dc.addType("AudioComponent", {
model: {
  defaults: {
    draggable: true,
    droppable: true,
    resizable: true,
    content: "",
  
    style: {
      width: "250px",
      height: "250px",
    },
  },
},