ryandeba / grapesjs-html-block Goto Github PK

I am using grapejs with the MJML plugin. There's a blocks which work much like sections in grapejs. The HTML is not editable when placed in the sections.

Is this fixable?

Hi @ryandeba

I have a problem with the component, which is that when I save the component and try to edit it, I don't get the desired result.

I found two cases:

1- I cannot select it:
The isComponent() function has the following code

isComponent: function(el) {
                    if (el.hasAttribute && el.hasAttribute("data-html-code")) {
                        console.log(el);
                        return {
                            type: "html-code",
                            content: el.innerHTML,
                            components: []
                        };
                    }
                }

2 - The code is duplicated when reloading the page:
In this case remove from the previous code the components: []

Reference

Hi! Awesome plugin! Thanks. A suggestion I have is to add a double click feature to it, so it is easier to edit the code. Here is the code changes I made to accomplish this:

In the component view:

view: defaultType.view.extend({
  events: {
    dblclick: function(){
      editor.runCommand("open-html-code-editor");
    }
  },
})

In the block, change the default text to reflect this change:

      content: '<div data-html-code>Double Click to Edit Code</div>'

I also added an advance category to the block, but that was just my personal preference.

      category: 'Advanced',

How to add the icon of ordered List in rich text editor? Here is my code.

rte.add('insertOrderedList', {
icon: '',//how to add the icon of orderlist here??
attributes: {title: "Ordered List"},
result: (rte, action) => rte.exec('insertOrderedList'),
});

Great, Its work fine. If I want to create a html block with MJML framework, then How should I change this code?

Thanks.

Is it possible to add border-top, border-right,border-left properties individually under the decoration heading in grapesjs. For now it only shows the border-width which gives all sided borders. I want only right or left sided borders.

Thanks