How to modify the draggable property of a defined component

[maxming2333]

I am using the grapesjs-mjml plug-in,
but I want to modify the properties of some defined components,
such as the draggable property of mj-image. How do I modify it?

I tried the following methods, but the modification cannot be completed.

const componentType = editor.Components.getType('mj-image');
const { model } = componentType;
model.prototype.defaults.draggable = '.new-draggable-selector'; // The setting here does not take effect. It seems to be a read-only attribute.

editor.on('block:drag:start', (block) => {
  const type = block.attributes.id;
  if (type === 'mj-image') {
    block.set('draggable', '.new-draggable-selector'); // This seems to be the attribute that sets the block, not the component.
  }
});

---

I have added several new custom components. I hope mj-image can be dragged into my custom components.

[artf]

You can update defined components with your default properties.

[maxming2333]

thx, this method works for me

const addDraggable = (editor: Editor, target: string, compType: string) => {
  const componentType = editor.Components.getType(target);
  const model = componentType?.model;
  const draggable = (model?.prototype.defaults?.draggable || '').split(', ');

  draggable.push(`[data-gjs-type="${compType}"]`);
  editor.Components.addType(target, {
    model: {
      defaults: {
        draggable: draggable.join(', '),
      },
    },
  });
};