Grapesjs: Custom component, Need 4 Columns at a time when I drag

[PKRekha]

Hello @artf, I have created custom component, where I need to display 4 columns with specific style when I drag a component to the canvas and in each column again I have some html content with specific styles and again i have to give user to edit the content or image but not the styles. Can I have a example where anybody does this kind of functionality? as of now I have created a custom type for a column and static content with in the column, but I am stuck with remaining functionalities. please help to achieve this

[Jogai]

Please adjust title and follow the contents of the issue template

[PKRekha]

Hello @artf , I have created custom component, where I need to display 4 columns with specific style when I drag a component to the canvas and in each column again I have some html content with specific styles and again i have to give user to edit the content or image but not the styles. Can I have a example where anybody does this kind of functionality? as of now I have created a custom type for a column and static content with in the column, but I am stuck with remaining functionalities. please help to achieve this

[pouyamiralayi]

@PKRekha you can prevent the styling by setting stylable property to false and for having 4 instances of your component type, just go like this:

const bm = editor.BlockManager;

    bm.add('COLUMN', {
        label:'Column',
        content:`
            <div data-gjs-type="column-type"></div>   
            <div data-gjs-type="column-type"></div>   
            <div data-gjs-type="column-type"></div>   
            <div data-gjs-type="column-type"></div>   
        `
    })

Cheers!

[PKRekha]

Hey @pouyamiralayi thanks for giving me an idea on how can I approach to this.. I got it now.