Update pages.html

pages.html

@@ -767,89 +767,136 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
   
   
-<script type="text/javascript">
-  var editor = grapesjs.init({
-    showOffsets: 1,
-    noticeOnUnload: 0,
-    container: '#gjs',
-    height: '100%',
-    fromElement: true,
-    storageManager: { autoload: 0 },
-    styleManager: {
-      sectors: [
-        {
-          name: 'General',
-          open: false,
-          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+  <script type="text/javascript">
+    // Wait for the plugin to be injected by the dev server
+    setTimeout(() => {
+      var editor = grapesjs.init({
+        height: '100%',
+        container: '#gjs',
+        showOffsets: true,
+        fromElement: true,
+        noticeOnUnload: false,
+        storageManager: false,
+        selectorManager: {
+          componentFirst: true,
         },
-        {
-          name: 'Flex',
-          open: false,
-          buildProps: [
-            'flex-direction',
-            'flex-wrap',
-            'justify-content',
-            'align-items',
-            'align-content',
-            'order',
-            'flex-basis',
-            'flex-grow',
-            'flex-shrink',
-            'align-self',
-          ],
+        canvas: {
+          styles: ['https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap-grid.min.css']
         },
-        {
-          name: 'Dimension',
-          open: false,
-          buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
-        },
-        {
-          name: 'Typography',
-          open: false,
-          buildProps: [
-            'font-family',
-            'font-size',
-            'font-weight',
-            'letter-spacing',
-            'color',
-            'line-height',
-            'text-shadow',
-          ],
-        },
-        {
-          name: 'Decorations',
-          open: false,
-          buildProps: [
-            'border-radius-c',
-            'background-color',
-            'border-radius',
-            'border',
-            'box-shadow',
-            'background',
-          ],
-        },
-        {
-          name: 'Extra',
-          open: false,
-          buildProps: ['transition', 'perspective', 'transform'],
+        plugins: [
+          'gjs-blocks-basic',
+          'grapesjs-plugin-forms',
+          'grapesjs-component-countdown',
+          'grapesjs-plugin-export',
+          'grapesjs-tabs',
+          'grapesjs-custom-code',
+          'grapesjs-touch',
+          'grapesjs-parser-postcss',
+          'grapesjs-tooltip',
+          'grapesjs-tui-image-editor',
+          'grapesjs-typed',
+          'grapesjs-style-bg',
+          'grapesjs-preset-webpage',
+          'grapesjs-templates'
+        ],
+        pluginsOpts: {
+          'gjs-blocks-basic': { flexGrid: true, blocks: ['text', 'link', 'image', 'video', 'map'] },
+          'grapesjs-tui-image-editor': {
+            script: [
+              // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
+              'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
+              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
+              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
+            ],
+            style: [
+              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
+              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
+            ],
+          },
+          'grapesjs-tabs': {
+            tabsBlock: { category: 'Extra' }
+          },
+          'grapesjs-typed': {
+            block: {
+              category: 'Extra',
+              content: {
+                type: 'typed',
+                'type-speed': 40,
+                strings: [
+                  'Text row one',
+                  'Text row two',
+                  'Text row three',
+                ],
+              }
+            }
+          },
+          'grapesjs-preset-webpage': {
+            modalImportTitle: 'Import Template',
+            modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
+            modalImportContent: function (editor) {
+              return editor.getHtml() + '<style>' + editor.getCss() + '</style>'
+            },
+          },
+          'grapesjs-templates': {
+            contactForms: [
+              { id: 1000, label: 'Contact us' },
+              { id: 1001, label: 'Contact us 2' }
+            ],
+            templates: 'http://localhost:3000/templates',
+            projects: 'http://localhost:3000/projects',
+            //onLoad: (type) => {
+            //  return []
+            //}
+          }
         },
-      ],
-    },
-    plugins: [
-      "gjs-blocks-basic",
-      "grapesjs-component-countdown",
-      "grapesjs-component-code-editor",
-      "grapesjs-templates",      
-    ],
-  });
+      });
+
+      window.editor = editor
+
+
+      var pn = editor.Panels;
+
+      editor.on('load', () => {
+        var $ = grapesjs.$;
+        // Load and show settings and style manager
+        var openTmBtn = pn.getButton('views', 'open-tm');
+        openTmBtn && openTmBtn.set('active', 1);
+        var openSm = pn.getButton('views', 'open-sm');
+        openSm && openSm.set('active', 1);
+
+        // Remove trait view
+        pn.removeButton('views', 'open-tm');
+
+        // Add Settings Sector
+        var traitsSector = $('<div class="gjs-sm-sector no-select">' +
+          '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
+          '<div class="gjs-sm-properties" style="display: none;"></div></div>');
+        var traitsProps = traitsSector.find('.gjs-sm-properties');
+        traitsProps.append($('.gjs-traits-cs'));
+        $('.gjs-sm-sectors').before(traitsSector);
+        traitsSector.find('.gjs-sm-sector-title').on('click', function () {
+          var traitStyle = traitsProps.get(0).style;
+          var hidden = traitStyle.display == 'none';
+          if (hidden) {
+            traitStyle.display = 'block';
+          } else {
+            traitStyle.display = 'none';
+          }
+        });
+
+        // Open block manager
+        var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
+        openBlocksBtn && openBlocksBtn.set('active', 1);
+      })
+    }, 100);
+  </script>
 
-  editor.BlockManager.add('testBlock', {
-    label: 'Block',
-    attributes: { class: 'gjs-fonts gjs-f-b1' },
-    content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`,
-  });
-</script>
 
+
+
+
+
+  
 <script>
 
   // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки