From f89cf0e6dc1a67d1f523bfc6a47c070b0b1a9e2e Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 5 Feb 2024 18:40:56 +0100
Subject: [PATCH] wip #6693 @3

---
 src/app/Magic/Fields/GrapesPageBuilder.php    | 19 ++++++++
 .../fields/pagebuilder-grapesjs.blade.php     | 46 +++++++++++++++++--
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/app/Magic/Fields/GrapesPageBuilder.php b/src/app/Magic/Fields/GrapesPageBuilder.php
index df6ae8a..a7db92c 100644
--- a/src/app/Magic/Fields/GrapesPageBuilder.php
+++ b/src/app/Magic/Fields/GrapesPageBuilder.php
@@ -8,4 +8,23 @@ class GrapesPageBuilder extends Textarea
 {
     protected $_adminType = 'pagebuilder-grapesjs';
     protected $_viewNamespace = CubistBackpackServiceProvider::NAMESPACE . '::fields';
+
+    public static function getBlocks()
+    {
+        $res = [];
+        $base = resource_path('grapes/blocks');
+        $dr = opendir($base);
+        while ($file = readdir($dr)) {
+            if ($file === '.' || $file === '..') {
+                continue;
+            }
+            $f = $base . '/' . $file;
+            if (!is_dir($f)) {
+                continue;
+            }
+            $res[] = $f;
+        }
+
+        return $res;
+    }
 }
diff --git a/src/resources/views/fields/pagebuilder-grapesjs.blade.php b/src/resources/views/fields/pagebuilder-grapesjs.blade.php
index bc8bbe3..e8591cf 100644
--- a/src/resources/views/fields/pagebuilder-grapesjs.blade.php
+++ b/src/resources/views/fields/pagebuilder-grapesjs.blade.php
@@ -3,6 +3,8 @@
     if(is_string($value)){
         $value=json_decode($value);
     }
+
+    $blocks=\Cubist\Backpack\Magic\Fields\GrapesPageBuilder::getBlocks();
 @endphp
 
 @include('crud::fields.inc.wrapper_start')
@@ -15,14 +17,34 @@
 
 @push('crud_fields_scripts')
     @basset('https://unpkg.com/grapesjs/dist/grapes.min.js')
+    @basset('https://unpkg.com/grapesjs-preset-webpage@1.0.2/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-blocks-basic@1.0.1/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-plugin-forms@2.0.5/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-component-countdown@1.0.1/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-plugin-export@1.0.11/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-tabs@1.0.6/dist/grapesjs-tabs.min.js')
+    @basset('https://unpkg.com/grapesjs-custom-code@1.0.1/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-touch@0.1.1/dist/grapesjs-touch.min.js')
+    @basset('https://unpkg.com/grapesjs-parser-postcss@1.0.1/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-tooltip@0.1.7/dist/index.js')
+    @basset('https://unpkg.com/grapesjs-tui-image-editor@0.1.3/dist/grapesjs-tui-image-editor.min.js')
+    @basset('https://unpkg.com/grapesjs-typed@1.0.5/dist/grapesjs-typed.min.js')
+    @basset('https://unpkg.com/grapesjs-style-bg@2.0.1/dist/index.js')
     @bassetBlock('cubist/grapesjs-field.js')
     <script>
         jQuery(document).ready(function ($) {
+
+            $(document).on('keydown', ".grapesjs-init", function (e) {
+                if (e.keyCode === 13) {
+                    e.preventDefault();
+                    return false;
+                }
+            });
+
             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;
@@ -42,7 +64,17 @@
             };
 
             function initUntriggeredGrapesJS() {
+
+
                 $('.grapesjs:not(.grapesjs-init)').each(function (i, obj) {
+                    const customComponents = editor => {
+                    };
+
+                    let blocks = ['link-block', 'quote', 'text-basic'];
+                    @foreach($blocks as $block)
+                    {!! file_get_contents($block.'/block.js') !!};
+                    @endforeach
+
                     let id = (Math.round(Math.random() * 10000000));
                     $(obj).attr('id', 'gjs-' + id);
 
@@ -53,8 +85,16 @@
                     let e = grapesjs.init({
                         container: '#gjs-' + id,
                         style: '.txt-red{color: red}',
-                        plugins: [inlineStorage],
+                        plugins: ['grapesjs-preset-webpage', inlineStorage, customComponents],
+                        pluginsOpts: {
+                            'grapesjs-preset-webpage': {
+                                'blocks':blocks,
+                            }
+                        },
                         storageManager: {type: 'inline'},
+                        blockManager: {
+                            blocks: blocks,
+                        },
                     });
                     $(obj).prev('input').attr('id', 'gjs-' + id + '-input')
                     $(obj).data('grapesjs', e);
@@ -71,7 +111,7 @@
 @endpush
 
 <input type="hidden" name="{{ $field['name'] }}"
-       value="@json($value)"/>
+       value="{{json_encode($value)}}"/>
 <div class="grapesjs"></div>
 
 
-- 
2.39.5