Closed Abhisheknanda1344463 closed 3 years ago
Facing same issue @artf
Did you add the block to your blockmanager like so: https://github.com/artf/grapesjs-mjml/issues/195#issuecomment-673664804?
@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.
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
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
defaultModel is not defined @chiragkataria22
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
Does one here could make it compile in mjml?
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
but the Question is how can we use the mj-link in block
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
Where to define that
data-gjs-type
so that I can make my new custom component accordingly @DRoet @artf