Update builder.html

builder.html

@@ -27,6 +27,62 @@
         });
 
         const domc = editor.DomComponents;
+        const bm = editor.BlockManager;
+
+        // Add blocks for the first example
+        bm.add('component-css-block', {
+            label: 'Component with CSS',
+            content: {
+                type: 'component-css',
+            },
+        });
+
+        // Add blocks for the second example
+        bm.add('cmp-a-block', {
+            label: 'Component A',
+            content: {
+                type: 'cmp-a',
+            },
+        });
+
+        bm.add('cmp-b-block', {
+            label: 'Component B',
+            content: {
+                type: 'cmp-b',
+            },
+        });
+
+        bm.add('component-css-block-2', {
+            label: 'Component with CSS 2',
+            content: {
+                type: 'component-css',
+            },
+        });
+
+        // Define component types
+        domc.addType('component-css', {
+            model: {
+                defaults: {
+                    attributes: { class: 'cmp-css' },
+                    components: `
+                        <span>Component with styles<span>
+                        <div class="cmp-css-a">Component A</div>
+                        <div class="cmp-css-b">Component B</div>
+                    `,
+                    styles: `
+                        .cmp-css { color: red }
+                        .cmp-css-a { color: green }
+                        .cmp-css-b { color: blue }
+
+                        @media (max-width: 992px) {
+                            .cmp-css{ color: darkred; }
+                            .cmp-css-a { color: darkgreen }
+                            .cmp-css-b { color: darkblue }
+                        }
+                    `,
+                },
+            },
+        });
 
         domc.addType('cmp-a', {
             model: {