Create(extend) custom mjml component

[sweeft-vanikoakopashvili]

Hi.
I am new at Grapes, and I'm trying to define a new custom component that will extend the existing one and create a new block for it to be easily drag-droppable.

  editor.DomComponents.addType('new-type', {
    isComponent: el => el.tagName === "MJ-SECTION",
    extend: 'mj-section',
    model: {
      defaults: {
        // Alos tried that *
        // ...editor.DomComponents.getType('mj-section')?.model.prototype.defaults
        attributes: {
          'padding-left': '50px',
        },
      },
    },
    view: {
      // *
      // ...editor.DomComponents.getType('mj-section')?.view.prototype,
    },
  })

Block

editor.BlockManager.add('new-type-block', {
    label: 'Custom section',
    content: {
      type: 'new-type',
      attributes: {
        'padding-left': '100px',
      },
    },
  })

But I can't drag and drop this component inside the canvas; there is an error saying

I've seen in other issues people suggesting using only blocks for defining your 'elements', but I need to attach custom behavior to sections and wrappers ... and preserve original ones as well.

[sweeft-vanikoakopashvili]

@artf Hi
I've noticed that drag-and-dropping the custom block from Block Manager doesn't work, but adding it programmatically does the job. Can you check the sandbox and test it? First, drag and drop my wrapper block from Block Manager and check the console (you will see "Invalid target position"), but if you select body and run

editor.getSelected().append(` <mj-wrapper data-gjs-type="custom-wrapper">
          <mj-section>
            <mj-column>
              <mj-image src="/vite.svg" /> 
            </mj-column> 
          </mj-section>
      </mj-wrapper>  `)

it'll work
Maybe dropping happens outside of the mj-body tag?

[artf]

Please provide a reproducible demo

[sweeft-vanikoakopashvili]

Sorry, I missed the link.
https://codesandbox.io/s/relaxed-night-5w73n3?file=/src/App.js

[artf]

As you're defining a new custom-wrapper type, the mj-body doesn't support it, so you have to extend also mj-body and add the new type to droppable property, eg.

editor.Components.addType('mj-body', {
    model: {
      defaults: {
        droppable: `[data-gjs-type="custom-wrapper"], [data-gjs-type="mj-section"], [data-gjs-type="mj-wrapper"], [data-gjs-type="mj-hero"], [data-gjs-type="mj-raw"]`,
      }
    }
  });

[sweeft-vanikoakopashvili]

Thank you very much.

[sweeft-vanikoakopashvili]

Here is another demo: https://codesandbox.io/s/hungry-kapitsa-l6ms6x?file=/src/App.js

I'm creating a new section component where I need to define custom attributes for all the sections, but drag and drop becomes impossible