Update builder.html

builder.html

@@ -24,37 +24,73 @@
             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
+                ],
+            },
         });
 
-        // Define a custom script
-        const script = function() {
-            alert('Hi');
-            console.log('the element', this);
-        };
+        // 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>`,
+        });
 
-        // Define a new custom component
-        editor.Components.addType('comp-with-js', {
+        // Define the button component type
+        editor.Components.addType('button', {
             model: {
                 defaults: {
-                    script,
-                    // Add some style, just to make the component visible
-                    style: {
-                        width: '100px',
-                        height: '100px',
-                        background: 'red',
-                    },
-                    components: `
-                        <button onclick="alert('Ещё')" style="margin: 10px;">Ещё</button>
-                    `,
-                }
-            }
-        });
-
-        // Create a block for the component, so we can drop it easily
-        editor.Blocks.add('test-block', {
-            label: 'Test block',
-            attributes: { class: 'fa fa-text' },
-            content: { type: 'comp-with-js' },
+                    traits: [
+                        {
+                            type: 'integer',
+                            name: 'width',
+                            label: 'Width',
+                            changeProp: true,
+                        },
+                        {
+                            type: 'integer',
+                            name: 'height',
+                            label: 'Height',
+                            changeProp: true,
+                        },
+                    ],
+                },
+            },
         });
     </script>
 </body>