How to import previous saved templates in new template.

[YashPrince]

@artf I have saved some templates created by grapejs and want to use/import it in new template as a section / block. I do not want import as html and css, I want to import as Component and Style saved as JSON format so that component like countdown and other do not change to div or box and also updated style include the current template style and previous template syle and same for the model also, Any help would be appreciated.

[nojacko]

Think you're missing the point of grapes. It let's you edit HTML. There's no underlying JSON format.

[YashPrince]

@nojacko I have a template which contain countdown, If I direct import as html then it changed to div so I want to import that as json and css so that component do not change to other type and also there style value preserve for clone or copy.

[xamdam777]

@YashPrince take a look at your browser local storage values, you will see what/how is stored.

Anyway, if you make a custom component and load the normal html/css, grapesjs will recognize it as the right type when you import it. The custom component type in grapesjs is usually linked to the main container id, so you do not really need a json to accomplish that.

[YashPrince]

@xamdam777 When we import countdomn saved in html format it changed it to box and countdown settings does not appear. When we use JSON then it's setting come when we re-edit the template so I was thinking that we can use same for the import also.

[xamdam777]

@YashPrince I think that is a small bug from the default countdown component. If you make your own custom component, that problem should not happen (it will still show settings (traits) when you load from HTML).

[artf]

@YashPrince you can use HTML string or Component objects

editor.BlockManager.add('some-id', {
    label: '...',
    content: `<div title="text" data-gjs-draggable="false">
        <h1>Some <b>content</b><h1>
    </div>`,
});

// Same as ...
editor.BlockManager.add('some-id', {
    label: '...',
    content: {
        draggable: false,
        attributes: { title: 'text' },
        components: [
            {
                tagName: 'h1',
                components: 'Some <b>content</b>',
            }
        ]   
    },
})

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.