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 %} + + {{ encore_entry_script_tags('admin') }} {% endblock %}