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