Update builder.html

builder.html

@@ -10,6 +10,18 @@
       <!-- Your Custom CSS -->
      <!-- Your Custom CSS -->
     <style>
+        .gjs-row {
+            display: flex;
+            justify-content: space-between;
+            border: 1px dashed #ccc; /* Добавляем контур для строк */
+        }
+        .gjs-cell {
+            flex: 1;
+            border: 1px solid #ccc; /* Добавляем контур для ячеек */
+            padding: 10px;
+            text-align: center;
+            min-height: 50px; /* Добавляем минимальную высоту для ячеек */
+        }
         .my-button {
             background-color: #4CAF50; /* Green */
             border: none;
@@ -37,13 +49,64 @@
             height: '100vh',
             storageManager: { type: 0 },
             plugins: [],
-            pluginsOpts: {}
+            pluginsOpts: {},
+            styleManager: {
+                sectors: [
+                    {
+                        name: 'Dimensions',
+                        properties: [
+                            {
+                                type: 'number',
+                                label: 'Width',
+                                property: 'width',
+                                units: ['px', '%'],
+                                min: 0,
+                            },
+                            {
+                                type: 'number',
+                                label: 'Height',
+                                property: 'height',
+                                units: ['px', '%'],
+                                min: 0,
+                            },
+                        ],
+                    },
+                    {
+                        name: 'Colors',
+                        properties: [
+                            {
+                                type: 'color',
+                                label: 'Background Color',
+                                property: 'background-color',
+                            },
+                            {
+                                type: 'color',
+                                label: 'Text Color',
+                                property: 'color',
+                            },
+                        ],
+                    },
+                ],
+            },
         });
 
-        // Example of adding a block with a button
+        // Example of adding a horizontal block with three items
         const blockManager = editor.BlockManager;
-        blockManager.add('my-button-block', {
-            label: 'My Button',
+        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' }
+        });
+
+        // Example of adding a draggable button
+        blockManager.add('draggable-button', {
+            label: 'Draggable Button',
             content: `<button class="my-button">Click Me</button>`,
             attributes: { class: 'gjs-block-section' }
         });