Update builder2.html

builder2.html

@@ -7,6 +7,13 @@
   <script src="https://unpkg.com/grapesjs"></script>
   <script src="https://unpkg.com/grapesjs-plugin-forms"></script>
   <script src="https://unpkg.com/grapesjs-custom-code"></script>
+  <!-- Change code view -->
+  <script src="https://unpkg.com/grapesjs-parser-postcss"></script>
+  <link
+    href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css"
+    rel="stylesheet"
+  />
+  <script src="https://unpkg.com/grapesjs-component-code-editor"></script>
   <style>
     /* Ваш существующий CSS */
     body, html {
@@ -180,7 +187,7 @@
       height: '100%',
       fromElement: true,
       storageManager: { autoload: 0 },
-      plugins: ['grapesjs-plugin-forms', 'grapesjs-custom-code'],
+      plugins: ['grapesjs-plugin-forms', 'grapesjs-custom-code', 'grapesjs-component-code-editor'],
       pluginsOpts: {
         'grapesjs-plugin-forms': {
           // options
@@ -198,9 +205,37 @@
             theme: 'hopscotch',
             readOnly: 0
           }
+        },
+        'grapesjs-component-code-editor': {
+          // options
         }
       }
     });
+
+    // Добавляем команду для открытия редактора кода
+    editor.Commands.add('open-code', {
+      run: function(editor) {
+        editor.runCommand('open-code-editor');
+      }
+    });
+
+    // Добавляем кнопку для открытия редактора кода
+    const pn = editor.Panels;
+    const panelViews = pn.addPanel({
+      id: "views",
+    });
+    panelViews.get("buttons").add([
+      {
+        attributes: {
+          title: "Open Code",
+        },
+        className: "fa fa-file-code-o",
+        command: "open-code",
+        togglable: false, // Не закрывать при повторном нажатии
+        id: "open-code",
+      },
+    ]);
+
     // Обработчик для кнопки экспорта
     document.getElementById('export-html').addEventListener('click', exportHtml);
   </script>