breaking changes (v0.19.4) makes me not able to render the raw HTML/CSS on the frontend

[handhikadj]

have this code:

my html:

<link rel="stylesheet" href="<?php echo $this->view_dir ?>assets/css/css-reset.css">
<link rel="stylesheet" href="<?php echo $this->view_dir ?>assets/css/custom.css">
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">

<div id="gjs"></div>

<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-preset-webpage"></script>
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<script src="https://unpkg.com/grapesjs-plugin-forms"></script>
<script src="https://unpkg.com/grapesjs-component-countdown"></script>
<script src="https://unpkg.com/grapesjs-plugin-export"></script>
<script src="https://unpkg.com/grapesjs-tabs"></script>
<script src="https://unpkg.com/grapesjs-custom-code"></script>
<script src="https://unpkg.com/grapesjs-touch"></script>
<script src="https://unpkg.com/grapesjs-parser-postcss"></script>
<script src="https://unpkg.com/grapesjs-tooltip"></script>
<script src="https://unpkg.com/grapesjs-tui-image-editor"></script>
<script src="https://unpkg.com/grapesjs-typed"></script>
<script src="https://unpkg.com/grapesjs-style-bg"></script>

<script type="text/javascript">
    const baseUri = '<?php echo $this->base_uri ?>';
    const adminBaseUri = `${baseUri}plugin/blesta_grape/admin_theme_builder`

    var editor  = grapesjs.init({
        height: '100vh',
        container : '#gjs',
        fromElement: true,
        showOffsets: true,
        storageManager: {
            type: 'remote',
            stepsBeforeSave: 1,
            autosave: true,
            autoload: true,
            options: {
                remote: {
                    urlStore: `${adminBaseUri}/store`,
                    urlLoad: `${adminBaseUri}/load`,
                    contentTypeJson: true,
                }
            }
        },
        selectorManager: { componentFirst: true },
        styleManager: {
            sectors: [{
                name: 'General',
                properties:[
                    {
                        extend: 'float',
                        type: 'radio',
                        default: 'none',
                        options: [
                            { value: 'none', className: 'fa fa-times'},
                            { value: 'left', className: 'fa fa-align-left'},
                            { value: 'right', className: 'fa fa-align-right'}
                        ],
                    },
                    'display',
                    { extend: 'position', type: 'select' },
                    'top',
                    'right',
                    'left',
                    'bottom',
                ],
            }, {
                name: 'Dimension',
                open: false,
                properties: [
                    'width',
                    {
                        id: 'flex-width',
                        type: 'integer',
                        name: 'Width',
                        units: ['px', '%'],
                        property: 'flex-basis',
                        toRequire: 1,
                    },
                    'height',
                    'max-width',
                    'min-height',
                    'margin',
                    'padding'
                ],
            },{
                name: 'Typography',
                open: false,
                properties: [
                    'font-family',
                    'font-size',
                    'font-weight',
                    'letter-spacing',
                    'color',
                    'line-height',
                    {
                        extend: 'text-align',
                        options: [
                            { id : 'left',  label : 'Left',    className: 'fa fa-align-left'},
                            { id : 'center',  label : 'Center',  className: 'fa fa-align-center' },
                            { id : 'right',   label : 'Right',   className: 'fa fa-align-right'},
                            { id : 'justify', label : 'Justify',   className: 'fa fa-align-justify'}
                        ],
                    },
                    {
                        property: 'text-decoration',
                        type: 'radio',
                        default: 'none',
                        options: [
                            { id: 'none', label: 'None', className: 'fa fa-times'},
                            { id: 'underline', label: 'underline', className: 'fa fa-underline' },
                            { id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough'}
                        ],
                    },
                    'text-shadow'
                ],
            },{
                name: 'Decorations',
                open: false,
                properties: [
                    'opacity',
                    'border-radius',
                    'border',
                    'box-shadow',
                    'background', // { id: 'background-bg', property: 'background', type: 'bg' }
                ],
            },{
                name: 'Extra',
                open: false,
                buildProps: [
                    'transition',
                    'perspective',
                    'transform'
                ],
            },{
                name: 'Flex',
                open: false,
                properties: [{
                    name: 'Flex Container',
                    property: 'display',
                    type: 'select',
                    defaults: 'block',
                    list: [
                        { value: 'block', name: 'Disable'},
                        { value: 'flex', name: 'Enable'}
                    ],
                },{
                    name: 'Flex Parent',
                    property: 'label-parent-flex',
                    type: 'integer',
                },{
                    name: 'Direction',
                    property: 'flex-direction',
                    type: 'radio',
                    defaults: 'row',
                    list: [{
                        value: 'row',
                        name: 'Row',
                        className: 'icons-flex icon-dir-row',
                        title: 'Row',
                    },{
                        value: 'row-reverse',
                        name: 'Row reverse',
                        className: 'icons-flex icon-dir-row-rev',
                        title: 'Row reverse',
                    },{
                        value: 'column',
                        name: 'Column',
                        title: 'Column',
                        className: 'icons-flex icon-dir-col',
                    },{
                        value: 'column-reverse',
                        name: 'Column reverse',
                        title: 'Column reverse',
                        className: 'icons-flex icon-dir-col-rev',
                    }],
                },{
                    name: 'Justify',
                    property: 'justify-content',
                    type: 'radio',
                    defaults: 'flex-start',
                    list: [{
                        value: 'flex-start',
                        className: 'icons-flex icon-just-start',
                        title: 'Start',
                    },{
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-just-end',
                    },{
                        value: 'space-between',
                        title: 'Space between',
                        className: 'icons-flex icon-just-sp-bet',
                    },{
                        value: 'space-around',
                        title: 'Space around',
                        className: 'icons-flex icon-just-sp-ar',
                    },{
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-just-sp-cent',
                    }],
                },{
                    name: 'Align',
                    property: 'align-items',
                    type: 'radio',
                    defaults: 'center',
                    list: [{
                        value: 'flex-start',
                        title: 'Start',
                        className: 'icons-flex icon-al-start',
                    },{
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-al-end',
                    },{
                        value: 'stretch',
                        title: 'Stretch',
                        className: 'icons-flex icon-al-str',
                    },{
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-al-center',
                    }],
                },{
                    name: 'Flex Children',
                    property: 'label-parent-flex',
                    type: 'integer',
                },{
                    name: 'Order',
                    property: 'order',
                    type: 'integer',
                    defaults: 0,
                    min: 0
                },{
                    name: 'Flex',
                    property: 'flex',
                    type: 'composite',
                    properties  : [{
                        name: 'Grow',
                        property: 'flex-grow',
                        type: 'integer',
                        defaults: 0,
                        min: 0
                    },{
                        name: 'Shrink',
                        property: 'flex-shrink',
                        type: 'integer',
                        defaults: 0,
                        min: 0
                    },{
                        name: 'Basis',
                        property: 'flex-basis',
                        type: 'integer',
                        units: ['px','%',''],
                        unit: '',
                        defaults: 'auto',
                    }],
                },{
                    name: 'Align',
                    property: 'align-self',
                    type: 'radio',
                    defaults: 'auto',
                    list: [{
                        value: 'auto',
                        name: 'Auto',
                    },{
                        value: 'flex-start',
                        title: 'Start',
                        className: 'icons-flex icon-al-start',
                    },{
                        value   : 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-al-end',
                    },{
                        value   : 'stretch',
                        title: 'Stretch',
                        className: 'icons-flex icon-al-str',
                    },{
                        value   : 'center',
                        title: 'Center',
                        className: 'icons-flex icon-al-center',
                    }],
                }]
            }
            ],
        },
        plugins: [
            'gjs-blocks-basic',
            'grapesjs-plugin-forms',
            'grapesjs-component-countdown',
            'grapesjs-plugin-export',
            'grapesjs-tabs',
            'grapesjs-custom-code',
            'grapesjs-touch',
            'grapesjs-parser-postcss',
            'grapesjs-tooltip',
            'grapesjs-tui-image-editor',
            'grapesjs-typed',
            'grapesjs-style-bg',
            'grapesjs-preset-webpage',
        ],
        pluginsOpts: {
            'gjs-blocks-basic': { flexGrid: true },
            'grapesjs-tui-image-editor': {
                script: [
                    // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
                    'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
                    'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
                    'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
                ],
                style: [
                    'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
                    'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
                ],
            },
            'grapesjs-tabs': {
                tabsBlock: { category: 'Extra' }
            },
            'grapesjs-typed': {
                block: {
                    category: 'Extra',
                    content: {
                        type: 'typed',
                        'type-speed': 40,
                        strings: [
                            'Text row one',
                            'Text row two',
                            'Text row three',
                        ],
                    }
                }
            },
            'grapesjs-preset-webpage': {
                modalImportTitle: 'Import Template',
                modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
                modalImportContent: function(editor) {
                    return editor.getHtml() + '<style>'+editor.getCss()+'</style>'
                },
            },
        },
    });

    editor.I18n.addMessages({
        en: {
            styleManager: {
                properties: {
                    'background-repeat': 'Repeat',
                    'background-position': 'Position',
                    'background-attachment': 'Attachment',
                    'background-size': 'Size',
                }
            },
        }
    });
</script>

my php

$html = file_get_contents("php://input");
// insert into mysql

it's inserting data to mysql like this:

{
	"assets": [],
	"styles": [{
		"selectors": [{
			"name": "gjs-row",
			"private": 1
		}],
		"style": {
			"display": "flex",
			"justify-content": "flex-start",
			"align-items": "stretch",
			"flex-wrap": "nowrap",
			"padding": "10px"
		}
	}, {
		"selectors": [{
			"name": "gjs-row",
			"private": 1
		}],
		"style": {
			"flex-wrap": "wrap"
		},
		"mediaText": "(max-width: 768px)",
		"atRuleType": "media"
	}, {
		"selectors": [{
			"name": "gjs-cell",
			"private": 1
		}],
		"style": {
			"min-height": "75px",
			"flex-grow": "1",
			"flex-basis": "100%"
		}
	}, {
		"selectors": ["#i6l8"],
		"style": {
			"padding": "10px"
		}
	}],
	"pages": [{
		"frames": [{
			"component": {
				"type": "wrapper",
				"stylable": ["background", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "background-size"],
				"attributes": {
					"id": "i64a"
				},
				"components": [{
					"name": "Row",
					"droppable": ".gjs-cell",
					"resizable": {
						"tl": 0,
						"tc": 0,
						"tr": 0,
						"cl": 0,
						"cr": 0,
						"bl": 0,
						"br": 0,
						"minDim": 1
					},
					"classes": [{
						"name": "gjs-row",
						"private": 1
					}],
					"components": [{
						"name": "Cell",
						"draggable": ".gjs-row",
						"stylable-require": ["flex-basis"],
						"unstylable": ["width"],
						"resizable": {
							"tl": 0,
							"tc": 0,
							"tr": 0,
							"cl": 0,
							"cr": 1,
							"bl": 0,
							"br": 0,
							"minDim": 1,
							"bc": 0,
							"currentUnit": 1,
							"step": 0.2,
							"keyWidth": "flex-basis"
						},
						"classes": [{
							"name": "gjs-cell",
							"private": 1
						}],
						"attributes": {
							"id": "it13"
						},
						"components": [{
							"type": "text",
							"attributes": {
								"id": "i6l8"
							},
							"components": [{
								"type": "textnode",
								"content": "askdaksdkaskdmsmdasmdm"
							}, {
								"tagName": "br",
								"void": true
							}, {
								"tagName": "br",
								"void": true
							}]
						}]
					}]
				}]
			}
		}],
		"type": "main",
		"id": "6vi6McnmuLq6IlS1"
	}]
}

in 2022, I can render it on my laravel blade like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App Page / Sample</title>

    <style>
        {!! $gjsObj['gjs-css'] !!}
    </style>
</head>
{!! $gjsObj['gjs-html'] !!}
</html>

but it's not working right now in 2023. what's wrong with the new grapesjs?

Update: after I examined, it's indeed extremely different request body.
this is the expected version (2022):

{
	"gjs-assets": "[]",
	"gjs-css": "* { box-sizing: border-box; } body {margin: 0;}.row{display:table;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;width:100%;}.cell{width:8%;display:table-cell;height:75px;}.c1805{padding:10px;}@media (max-width: 768px){.cell{width:100%;display:block;}}",
	"gjs-styles": "[{\"selectors\":[{\"name\":\"row\",\"label\":\"row\",\"type\":1,\"active\":true,\"private\":1,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"display\":\"table\",\"padding-top\":\"10px\",\"padding-right\":\"10px\",\"padding-bottom\":\"10px\",\"padding-left\":\"10px\",\"width\":\"100%\"},\"mediaText\":\"\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"\",\"singleAtRule\":0,\"important\":0},{\"selectors\":[{\"name\":\"cell\",\"label\":\"cell\",\"type\":1,\"active\":true,\"private\":1,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"width\":\"100%\",\"display\":\"block\"},\"mediaText\":\"(max-width: 768px)\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"media\",\"singleAtRule\":0,\"important\":0},{\"selectors\":[{\"name\":\"cell30\",\"label\":\"cell30\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"width\":\"100%\",\"display\":\"block\"},\"mediaText\":\"(max-width: 768px)\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"media\",\"singleAtRule\":0,\"important\":0},{\"selectors\":[{\"name\":\"cell70\",\"label\":\"cell70\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"width\":\"100%\",\"display\":\"block\"},\"mediaText\":\"(max-width: 768px)\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"media\",\"singleAtRule\":0,\"important\":0},{\"selectors\":[{\"name\":\"cell\",\"label\":\"cell\",\"type\":1,\"active\":true,\"private\":1,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"width\":\"8%\",\"display\":\"table-cell\",\"height\":\"75px\"},\"mediaText\":\"\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"\",\"singleAtRule\":0,\"important\":0},{\"selectors\":[{\"name\":\"c1805\",\"label\":\"c1805\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"padding\":\"10px\"},\"mediaText\":\"\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"\",\"singleAtRule\":0,\"important\":0}]",
	"gjs-html": "<div class=\"row\"><div class=\"cell\"><div class=\"c1805\">sdInsert your text here<\/div><\/div><\/div>",
	"gjs-components": "[{\"tagName\":\"div\",\"type\":\"\",\"name\":\"Row\",\"removable\":true,\"draggable\":true,\"droppable\":\".cell\",\"badgable\":true,\"stylable\":true,\"stylable-require\":\"\",\"style-signature\":\"\",\"unstylable\":\"\",\"highlightable\":true,\"copyable\":true,\"resizable\":{\"tl\":0,\"tc\":0,\"tr\":0,\"cl\":0,\"cr\":0,\"bl\":0,\"br\":0,\"minDim\":1},\"editable\":false,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"\",\"content\":\"\",\"icon\":\"\",\"style\":\"\",\"classes\":[{\"name\":\"row\",\"label\":\"row\",\"type\":1,\"active\":true,\"private\":1,\"protected\":false}],\"script\":\"\",\"attributes\":{},\"traits\":[{\"type\":\"text\",\"label\":\"\",\"name\":\"id\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]},{\"type\":\"text\",\"label\":\"\",\"name\":\"title\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]}],\"propagate\":\"\",\"components\":[{\"tagName\":\"div\",\"type\":\"\",\"name\":\"Cell\",\"removable\":true,\"draggable\":\".row\",\"droppable\":true,\"badgable\":true,\"stylable\":true,\"stylable-require\":\"\",\"style-signature\":\"\",\"unstylable\":\"\",\"highlightable\":true,\"copyable\":true,\"resizable\":{\"tl\":0,\"tc\":0,\"tr\":0,\"cl\":0,\"cr\":1,\"bl\":0,\"br\":0,\"minDim\":1,\"bc\":0,\"currentUnit\":1,\"step\":0.2},\"editable\":false,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"\",\"content\":\"\",\"icon\":\"\",\"style\":\"\",\"classes\":[{\"name\":\"cell\",\"label\":\"cell\",\"type\":1,\"active\":true,\"private\":1,\"protected\":false}],\"script\":\"\",\"attributes\":{},\"traits\":[{\"type\":\"text\",\"label\":\"\",\"name\":\"id\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]},{\"type\":\"text\",\"label\":\"\",\"name\":\"title\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]}],\"propagate\":\"\",\"components\":[{\"tagName\":\"div\",\"type\":\"text\",\"name\":\"\",\"removable\":true,\"draggable\":true,\"droppable\":false,\"badgable\":true,\"stylable\":true,\"stylable-require\":\"\",\"style-signature\":\"\",\"unstylable\":\"\",\"highlightable\":true,\"copyable\":true,\"resizable\":false,\"editable\":true,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"\",\"content\":\"\",\"icon\":\"\",\"style\":{},\"classes\":[{\"name\":\"c1805\",\"label\":\"c1805\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"script\":\"\",\"attributes\":{},\"traits\":[{\"type\":\"text\",\"label\":\"\",\"name\":\"id\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]},{\"type\":\"text\",\"label\":\"\",\"name\":\"title\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]}],\"propagate\":\"\",\"activeOnRender\":0,\"components\":[{\"tagName\":\"\",\"type\":\"textnode\",\"name\":\"\",\"removable\":0,\"draggable\":0,\"droppable\":false,\"badgable\":true,\"stylable\":true,\"stylable-require\":\"\",\"style-signature\":\"\",\"unstylable\":\"\",\"highlightable\":0,\"copyable\":0,\"resizable\":false,\"editable\":true,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"\",\"content\":\"sdInsert your text here\",\"icon\":\"\",\"style\":\"\",\"classes\":[],\"script\":\"\",\"attributes\":{},\"traits\":[{\"type\":\"text\",\"label\":\"\",\"name\":\"id\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]},{\"type\":\"text\",\"label\":\"\",\"name\":\"title\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]}],\"propagate\":\"\",\"components\":[]}]}]}]}]"
}

this breaking changes makes me nuts

[artf]

Yeah from the v0.19.4 the JSON structure is changed and the HTML/CSS is not included by default, you can check here how you can enrich your project data.

[handhikadj]

if you don't mind to share, what's wrong with the old structure? how is the new structure better than the old one?

[handhikadj]

@artf any way to set the Storage to what we used to do before v0.19 while using the latest version?

I notice that 0.18 has bugs like the transition and transform is not working, producing invalid css styling.
and also I think you need to give an example how to store and load data with backend + db using the latest version.
I can't find the example of this

[artf]

There is an entire section dedicated to what you're asking (including backend example) https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage