Update builder.html

builder.html

@@ -7,15 +7,21 @@
     <!-- GrapesJS CSS -->
     <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
 
-    <!-- Your Custom CSS -->
+     <!-- Your Custom CSS -->
     <style>
-        .gjs-block {
+        .gjs-row {
             display: flex;
             justify-content: space-between;
-            border: 1px solid #ccc; /* Добавляем контур для блоков */
+            border: 1px solid #ccc; /* Добавляем контур для строк */
             padding: 10px;
             text-align: center;
-            min-height: 50px; /* Добавляем минимальную высоту для блоков */
+            min-height: 50px; /* Добавляем минимальную высоту для строк */
+        }
+        .gjs-cell {
+            border: 1px solid #ccc; /* Добавляем контур для ячеек */
+            padding: 10px;
+            text-align: center;
+            min-height: 50px; /* Добавляем минимальную высоту для ячеек */
         }
     </style>
 </head>
@@ -60,45 +66,17 @@
             },
         });
 
-        // Define custom components
-        editor.Components.addType('custom-block', {
-            model: {
-                defaults: {
-                    tagName: 'div',
-                    traits: [
-                        {
-                            type: 'number',
-                            label: 'Width',
-                            name: 'width',
-                            units: ['px', '%'],
-                            min: 0,
-                            default: '300px', // Добавлены настройки по умолчанию
-                        },
-                        {
-                            type: 'number',
-                            label: 'Height',
-                            name: 'height',
-                            units: ['px', '%'],
-                            min: 0,
-                            default: '80px', // Добавлены настройки по умолчанию
-                        },
-                    ],
-                    components: `
-                        <div class="gjs-block">
-                            <div></div>
-                            <div></div>
-                            <div></div>
-                        </div>
-                    `,
-                },
-            },
-        });
-
         // Example of adding a block with custom components
         const blockManager = editor.BlockManager;
-        blockManager.add('custom-block-block', {
-            label: 'Custom Block',
-            content: { type: 'custom-block' },
+        blockManager.add('horizontal-block', {
+            label: 'Horizontal Block',
+            content: `
+                <div class="gjs-row">
+                    <div class="gjs-cell"></div>
+                    <div class="gjs-cell"></div>
+                    <div class="gjs-cell"></div>
+                </div>
+            `,
             attributes: { class: 'gjs-block-section' }
         });
     </script>