Update builder.html

builder.html

@@ -26,111 +26,35 @@
             },
         });
 
-        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', {
+        // Define a custom script
+        const script = function() {
+            alert('Hi');
+            console.log('the element', this);
+        };
+
+        // Define a new custom component
+        editor.Components.addType('comp-with-js', {
             model: {
                 defaults: {
-                    attributes: { class: 'cmp-css' },
+                    script,
+                    // Add some style, just to make the component visible
+                    style: {
+                        width: '100px',
+                        height: '100px',
+                        background: 'red',
+                    },
                     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: {
-                defaults: {
-                    attributes: { class: 'cmp-css-a' },
-                    components: 'Component A',
-                    styles: `
-                        .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 }
-                        }
+                        <button onclick="alert('Ещё')" style="margin: 10px;">Ещё</button>
                     `,
                 }
-            },
+            }
         });
 
-        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; }
-                        }
-                    `,
-                },
-            },
+        // 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' },
         });
     </script>
 </body>