From 2ff58c91f4906babf4b3a9319c7e1ec944bfc906 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 2 Feb 2024 19:32:40 +0100
Subject: [PATCH] wip #6693

---
 .../fields/pagebuilder-grapesjs.blade.php     | 75 +++++++++++++------
 1 file changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/resources/views/fields/pagebuilder-grapesjs.blade.php b/src/resources/views/fields/pagebuilder-grapesjs.blade.php
index ec1c467..bc8bbe3 100644
--- a/src/resources/views/fields/pagebuilder-grapesjs.blade.php
+++ b/src/resources/views/fields/pagebuilder-grapesjs.blade.php
@@ -1,3 +1,10 @@
+@php
+    $value=old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? '{}';
+    if(is_string($value)){
+        $value=json_decode($value);
+    }
+@endphp
+
 @include('crud::fields.inc.wrapper_start')
 <label>{!! $field['label'] !!}</label>
 @include('crud::fields.inc.translatable_icon')
@@ -11,34 +18,60 @@
     @bassetBlock('cubist/grapesjs-field.js')
     <script>
         jQuery(document).ready(function ($) {
-            $(document).on('cubist.bunchmultiple.added', function () {
-                initUntriggeredGrapesJS($);
-            });
-            initUntriggeredGrapesJS($);
-        });
+            const inlineStorage = (editor) => {
+                editor.Storage.add('inline', {
+                    load() {
+                        let input = $(editor.config.container + '-input');
+                        console.log($(input).val());
+                        let d = JSON.parse($(input).val());
+                        if (d.data !== undefined && d.data !== null) {
+                            return d.data;
+                        }
+                        return {};
+                    },
+                    store(data) {
+                        let input = $(editor.config.container + '-input');
+                        const component = editor.Pages.getSelected().getMainComponent();
+                        let save = {};
+                        save.css = editor.getCss({component});
+                        save.html = editor.getHtml({component});
+                        save.data = data;
+                        $(input).val(JSON.stringify(save));
+                    }
+                });
+            };
 
-        function initUntriggeredGrapesJS($) {
-            // trigger select2 for each untriggered select2 box
-            $('.grapesjs:not(.grapesjs-init)').each(function (i, obj) {
-                let id = 'gjs-' + (Math.round(Math.random() * 10000000));
-                $(obj).attr('id', id);
-
-                if ($(obj).closest('.item.sample').length > 0) {
-                    return;
-                }
-                $(obj).addClass('grapesjs-init');
-                let e = grapesjs.init({
-                    container: '#' + id,
-                    components: '<div class="txt-red">Hello world!</div>',
-                    style: '.txt-red{color: red}',
+            function initUntriggeredGrapesJS() {
+                $('.grapesjs:not(.grapesjs-init)').each(function (i, obj) {
+                    let id = (Math.round(Math.random() * 10000000));
+                    $(obj).attr('id', 'gjs-' + id);
+
+                    if ($(obj).closest('.item.sample').length > 0) {
+                        return;
+                    }
+                    $(obj).addClass('grapesjs-init');
+                    let e = grapesjs.init({
+                        container: '#gjs-' + id,
+                        style: '.txt-red{color: red}',
+                        plugins: [inlineStorage],
+                        storageManager: {type: 'inline'},
+                    });
+                    $(obj).prev('input').attr('id', 'gjs-' + id + '-input')
+                    $(obj).data('grapesjs', e);
                 });
-                $(obj).data('grapesjs', e);
+            }
+
+            $(document).on('cubist.bunchmultiple.added', function () {
+                initUntriggeredGrapesJS();
             });
-        }
+            initUntriggeredGrapesJS();
+        });
     </script>
     @endBassetBlock
 @endpush
 
+<input type="hidden" name="{{ $field['name'] }}"
+       value="@json($value)"/>
 <div class="grapesjs"></div>
 
 
-- 
2.39.5