Update builder.html

builder.html

@@ -28,24 +28,49 @@
 
         const domc = editor.DomComponents;
 
-        domc.addType('component-css', {
+        domc.addType('cmp-a', {
             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>
-                    `,
+                    attributes: { class: 'cmp-css-a' },
+                    components: 'Component A',
                     styles: `
-                        .cmp-css { color: red }
                         .cmp-css-a { color: green }
+                        @media (max-width: 992px) {
+                            .cmp-css-a { color: darkgreen }
+                        }
+                    `,
+                }
+            },
+        });
+
+        domc.addType('cmp-b', {
+            model: {
+                defaults: {
+                    attributes: { class: 'cmp-css-b' },
+                    components: 'Component B',
+                    styles: `
                         .cmp-css-b { color: blue }
+                        @media (max-width: 992px) {
+                            .cmp-css-b { color: darkblue }
+                        }
+                    `,
+                }
+            },
+        });
 
+        domc.addType('component-css', {
+            model: {
+                defaults: {
+                    attributes: { class: 'cmp-css' },
+                    components: [
+                        '<span>Component with styles<span>',
+                        { type: 'cmp-a' },
+                        { type: 'cmp-b' },
+                    ],
+                    styles: `
+                        .cmp-css { color: red }
                         @media (max-width: 992px) {
                             .cmp-css{ color: darkred; }
-                            .cmp-css-a { color: darkgreen }
-                            .cmp-css-b { color: darkblue }
                         }
                     `,
                 },