From bb7dfc2f25cdd8d95e712909ea10b1bc78ed404a Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Thu, 5 May 2022 14:39:26 +0200
Subject: [PATCH] add grapesjs-component-code-editor and
 grapesjs-parser-postcss

---
 src/core/Resources/assets/css/admin.scss         |  1 +
 src/core/Resources/assets/js/modules/grapesjs.js | 15 ++++++++++++++-
 src/core/Resources/views/admin/layout.html.twig  |  2 ++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index 75ce3c7..91da900 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -15,6 +15,7 @@ $pagination-active-bg: #343a40 !default;
 @import "~@fortawesome/fontawesome-free/css/all.css";
 @import "~flag-icons/sass/flag-icons.scss";
 @import '~grapesjs/dist/css/grapes.min.css';
+@import '~grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css';
 
 @for $i from 1 through 100 {
     .miw-#{$i*5} {
diff --git a/src/core/Resources/assets/js/modules/grapesjs.js b/src/core/Resources/assets/js/modules/grapesjs.js
index 8b56067..eab44f9 100644
--- a/src/core/Resources/assets/js/modules/grapesjs.js
+++ b/src/core/Resources/assets/js/modules/grapesjs.js
@@ -83,7 +83,12 @@ const doInitEditor = () => {
       noticeOnUnload: 0,
       showOffsets: 1,
       showDevices: false,
-      plugins: [modes[mode].id, 'grapesjs-plugin-header'],
+      plugins: [
+        modes[mode].id,
+        'grapesjs-plugin-header',
+        'grapesjs-component-code-editor',
+        'grapesjs-parser-postcss'
+      ],
       colorPicker: {
         appendTo: 'parent',
         offset: {
@@ -116,6 +121,14 @@ const doInitEditor = () => {
     deviceManager.add('All', '100%')
 
     editor.Panels.getPanels().remove('devices-buttons')
+    editor.Panels.addButton('views', {
+      id: 'open-code',
+      attributes: {
+        title: 'Open Code'
+      },
+      className: 'fa fa-edit',
+      command: 'open-code'
+    })
 
     editor.on('update', () => {
       textarea.val(JSON.stringify(editor.storeData()))
diff --git a/src/core/Resources/views/admin/layout.html.twig b/src/core/Resources/views/admin/layout.html.twig
index 8f9e241..e1f3978 100644
--- a/src/core/Resources/views/admin/layout.html.twig
+++ b/src/core/Resources/views/admin/layout.html.twig
@@ -53,6 +53,8 @@
 
         {% block js %}
             <script src="{{ asset('vendor/tinymce/tinymce.min.js') }}"></script>
+            <script src="{{ asset('vendor/grapesjs-parser-postcss/dist/grapesjs-parser-postcss.min.js') }}"></script>
+            <script src="{{ asset('vendor/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.js') }}"></script>
 
             {{ encore_entry_script_tags('admin') }}
         {% endblock %}