Custom Component - Githubissues

Abhisheknanda1344463 commented 3 years ago

Hi I've integrated the Mjml plugin in my react app But, Now I want to make new block and custom component of Mjml How can i achieve that. Please guide me here is my code of block

export const LinkBlock = () => {
  const block = {
    id: 'link',
    label: 'Link',
    attributes: { class: 'gjs-block-label', type: 'link' },
    content: `
    <mj-section border="1px dashed #E0E4E8" background-color="#F9FAFB" padding="7px 7px 7px 14px" border-radius="4px">
      <mj-group>
        <mj-column width="80%">
          <mj-raw>
            <input type="text" placeholder="Type or paste the link here..." style="width: 100%; border: none; background: transparent; font-size: 16px; height: 42px; outline: none; padding: 0 10px;"  />
          </mj-raw>
        </mj-column>
        <mj-column width="20%">
          <mj-button css-class="add-link-btn" padding="0" color="#E15718" background-color="#fff" border-radius="100px" border="1px solid #E15718" font-size="16px" align="right">Add Link</mj-button>
        </mj-column>
      </mj-group>
    </mj-section>
    `,
  };

  return block;
};

Where to define that data-gjs-type so that I can make my new custom component accordingly @DRoet @artf

chiragkataria22 commented 3 years ago

Facing same issue @artf

DRoet commented 3 years ago

Did you add the block to your blockmanager like so: https://github.com/artf/grapesjs-mjml/issues/195#issuecomment-673664804?

chiragkataria22 commented 3 years ago

@DRoet Yes, I added But I am not able to provide custom data-gjs-type on the block content

As it is wrapped under mj-section so it is setting its data-gjs-type to mj-section

I have to add a dom component on this custom gjs-type because I want to add some events onto it.

Abhisheknanda1344463 commented 3 years ago

Hi @DRoet @artf Yes, I am adding block like this way -:

editor.BlockManager.add('link', {
  label: 'Link',
  attributes: { class: 'gjs-block-label' },
  content: `
  <mj-section data-gjs-type="link" border="1px dashed #E0E4E8" background-color="#F9FAFB" padding="7px 7px 7px 14px" border-radius="4px">
    <mj-group>
      <mj-column width="80%">
        <mj-raw>
          <input type="text" placeholder="Type or paste the link here..." style="width: 100%; border: none; background: transparent; font-size: 16px; height: 42px; outline: none; padding: 0 10px;"  />
        </mj-raw>
      </mj-column>
      <mj-column width="20%">
        <mj-button css-class="add-link-btn" padding="0" color="#E15718" background-color="#fff" border-radius="100px" border="1px solid #E15718" font-size="16px" align="right">Add Link</mj-button>
      </mj-column>
    </mj-group>
  </mj-section>
  `,
});

I am not able to define my custom component related to this block and I've tried to add data-gjs-type="link" but it didn't work Could you please help? Thanks

chiragkataria22 commented 3 years ago

For anyone looking for an answer I resolved it by:

Block:

editor.BlockManager.add('mj-link', {
    label: 'Link',
    attributes: { class: 'gjs-block-label' },
    content: `
    <div data-gjs-type="mj-link" style="padding: 10px 0">
      <mj-section data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false" border="1px dashed #E0E4E8" background-color="#F9FAFB" padding="7px 7px 7px 14px" border-radius="4px">
        <mj-group data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
          <mj-column width="70%" data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
            <mj-raw data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
              <input class="link-input" data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false" type="text" placeholder="Type or paste the link here..." style="width: 100%; border: none !important; background: transparent; font-size: 16px; height: 42px; outline: none; padding: 0 10px;"  />
            </mj-raw>
          </mj-column>
          <mj-column width="30%" data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
            <mj-button data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false" css-class="add-link-btn" padding="0" color="#E15718" background-color="#fff" border-radius="100px" border="1px solid #E15718" font-size="16px" align="right">Add Link</mj-button>
          </mj-column>
        </mj-group>
      </mj-section>
    </div>
    `,
});

Attaching Dom component to it, if you want to attach any events:

   domComponents.addType('mj-link', {
    model: {
      defaults: {
        ...defaultModel.prototype.defaults,
        draggable: '[data-gjs-type=mj-column]',
        droppable: false,
      },
    },
    view: defaultView.extend({
      events: {
        'click .add-link-btn': 'handleClick',
      },
      async handleClick(event) {
        const selectedComponent = editor.getSelected();
        if (!selectedComponent) {
          return;
        }
      },
    }),
  });

we can close this issue

mingxin-yang commented 3 years ago

defaultModel is not defined @chiragkataria22

mingxin-yang commented 3 years ago

For anyone looking for an answer I resolved it by:

Block:

editor.BlockManager.add('mj-link', {
    label: 'Link',
    attributes: { class: 'gjs-block-label' },
    content: `
    <div data-gjs-type="mj-link" style="padding: 10px 0">
      <mj-section data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false" border="1px dashed #E0E4E8" background-color="#F9FAFB" padding="7px 7px 7px 14px" border-radius="4px">
        <mj-group data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
          <mj-column width="70%" data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
            <mj-raw data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
              <input class="link-input" data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false" type="text" placeholder="Type or paste the link here..." style="width: 100%; border: none !important; background: transparent; font-size: 16px; height: 42px; outline: none; padding: 0 10px;"  />
            </mj-raw>
          </mj-column>
          <mj-column width="30%" data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false">
            <mj-button data-gjs-draggable="false" data-gjs-droppable="false" data-gjs-editable="false" data-gjs-hoverable="false" data-gjs-selectable="false" css-class="add-link-btn" padding="0" color="#E15718" background-color="#fff" border-radius="100px" border="1px solid #E15718" font-size="16px" align="right">Add Link</mj-button>
          </mj-column>
        </mj-group>
      </mj-section>
    </div>
    `,
});

Attaching Dom component to it, if you want to attach any events:

 domComponents.addType('mj-link', {
  model: {
    defaults: {
      ...defaultModel.prototype.defaults,
      draggable: '[data-gjs-type=mj-column]',
      droppable: false,
    },
  },
  view: defaultView.extend({
    events: {
      'click .add-link-btn': 'handleClick',
    },
    async handleClick(event) {
      const selectedComponent = editor.getSelected();
      if (!selectedComponent) {
        return;
      }
    },
  }),
});

we can close this issue

I use this code that custom component is work, but I use editor.getHtml(), the output is not mjml style, there is a div, It's a error @DRoet @chiragkataria22

ronaldohoch commented 2 years ago

Does one here could make it compile in mjml?

RakulAgn commented 4 months ago

But this is not doing to work like default behaviour of mjml i think this is the correct way to defined custom mjml component after that we need to add them into block and defined the domComponent for that

Create a mj-link using mjml-custom-component-boilerplate
Defined a mj-link block
Define the mj-link DomComponent

but the Question is how can we use the mj-link in block

GrapesJS / mjml

Custom Component #250