Update builder.html

builder.html

@@ -24,74 +24,56 @@
             selectorManager: {
                 componentFirst: true,
             },
-            styleManager: {
-                sectors: [
-                    {
-                        name: 'Dimensions',
-                        properties: [
-                            {
-                                type: 'integer',
-                                name: 'width',
-                                units: ['px', '%'],
-                                defaults: 'auto',
-                                min: 0,
-                            },
-                            {
-                                type: 'integer',
-                                name: 'height',
-                                units: ['px', '%'],
-                                defaults: 'auto',
-                                min: 0,
-                            },
-                        ],
-                    },
-                    {
-                        name: 'Typography',
-                        properties: [
-                            {
-                                type: 'select',
-                                name: 'font-family',
-                            },
-                            {
-                                type: 'integer',
-                                name: 'font-size',
-                                units: ['px'],
-                                defaults: '14px',
-                            },
-                        ],
-                    },
-                    // Add more sectors and properties as needed
-                ],
-            },
         });
 
-        // Add a block for the button
-        editor.Blocks.add('button-block', {
-            label: 'Button',
-            content: `<button id="i1epvz" data-gjs-type="button" draggable="true" type="button" class="sub-btn" autocomplete="off">Submit</button>`,
+        const domc = editor.DomComponents;
+        const bm = editor.BlockManager;
+
+        // Add a block with horizontal triple blocks
+        bm.add('horizontal-triple-block', {
+            label: 'Horizontal Triple Block',
+            content: `
+                <div style="display: flex; justify-content: space-between;">
+                    <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px;">Block 1</div>
+                    <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px;">Block 2</div>
+                    <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px;">Block 3</div>
+                </div>
+            `,
         });
 
-        // Define the button component type
-        editor.Components.addType('button', {
+        // Define a button to add new blocks
+        domc.addType('add-block-button', {
             model: {
                 defaults: {
-                    traits: [
-                        {
-                            type: 'integer',
-                            name: 'width',
-                            label: 'Width',
-                            changeProp: true,
-                        },
-                        {
-                            type: 'integer',
-                            name: 'height',
-                            label: 'Height',
-                            changeProp: true,
-                        },
-                    ],
+                    components: `
+                        <button onclick="addNewBlock()">Add New Block</button>
+                    `,
+                    attributes: {
+                        'data-gjs-type': 'add-block-button',
+                    },
                 },
             },
         });
+
+        // Function to add new blocks
+        window.addNewBlock = function() {
+            const newBlock = `
+                <div style="display: flex; justify-content: space-between;">
+                    <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px;">New Block 1</div>
+                    <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px;">New Block 2</div>
+                    <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px;">New Block 3</div>
+                </div>
+            `;
+            editor.addComponents(newBlock);
+        };
+
+        // Add the button block
+        bm.add('add-block-button', {
+            label: 'Add Block Button',
+            content: {
+                type: 'add-block-button',
+            },
+        });
     </script>
 </body>
 </html>