add grapesjs-component-code-editor and grapesjs-parser-postcss

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} {

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()))

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 %}