Update builder.html

builder.html

@@ -8,25 +8,19 @@
     <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
 
       <!-- Your Custom CSS -->
+     <!-- Your Custom CSS -->
     <style>
-        .gjs-selected {
-            display: flex;
-            justify-content: space-between;
-            /* Добавляем пунктирную границу вокруг строк */
-            border: 1px dashed #ccc;
-        }
-        .gjs-cell {
-            flex: 1;
-            /* Добавляем сплошную границу вокруг ячеек */
-            border: 1px solid #ccc;
-            padding: 10px;
+        .my-button {
+            background-color: #4CAF50; /* Green */
+            border: none;
+            color: white;
+            padding: 15px 32px;
             text-align: center;
-            /* Добавляем минимальную высоту для ячеек */
-            min-height: 50px;
-        }
-        .draggable {
-            position: absolute;
-            cursor: move;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
         }
     </style>
 </head>
@@ -46,50 +40,13 @@
             pluginsOpts: {}
         });
 
-        // Example of adding a horizontal block with three items
+        // Example of adding a block with a button
         const blockManager = editor.BlockManager;
-        blockManager.add('horizontal-block', {
-            label: 'Horizontal Block',
-            content: `
-                <div class="gjs-row">
-                    <div class="gjs-cell"></div>
-                    <div class="gjs-cell"></div>
-                    <div class="gjs-cell"></div>
-                </div>
-            `,
-            attributes: { class: 'gjs-block-section' }
-        });
-
-        // Example of adding a draggable button
-        blockManager.add('draggable-button', {
-            label: 'Draggable Button',
-            content: `<button class="draggable" draggable="true">Давай</button>`,
+        blockManager.add('my-button-block', {
+            label: 'My Button',
+            content: `<button class="my-button">Click Me</button>`,
             attributes: { class: 'gjs-block-section' }
         });
-
-        document.addEventListener('DOMContentLoaded', function() {
-            var buttons = document.querySelectorAll('.draggable');
-            var offsetX = 0, offsetY = 0, isDragging = false;
-
-            buttons.forEach(button => {
-                button.addEventListener('mousedown', function(e) {
-                    isDragging = true;
-                    offsetX = e.clientX - button.offsetLeft;
-                    offsetY = e.clientY - button.offsetTop;
-                });
-
-                document.addEventListener('mousemove', function(e) {
-                    if (isDragging) {
-                        button.style.left = (e.clientX - offsetX) + 'px';
-                        button.style.top = (e.clientY - offsetY) + 'px';
-                    }
-                });
-
-                document.addEventListener('mouseup', function(e) {
-                    isDragging = false;
-                });
-            });
-        });
     </script>
 </body>
 </html>