Update builder.html

builder.html

@@ -7,21 +7,24 @@
     <!-- GrapesJS CSS -->
     <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
 
-      <!-- Your Custom CSS -->
+
+    <!-- Your Custom CSS -->
     <style>
+        /* Styles for rows */
         .gjs-row {
             display: flex;
             justify-content: space-between;
-            border: 1px solid #ccc; /* Добавляем контур для строк */
+            border: 1px solid #ccc;
             padding: 10px;
             text-align: center;
-            min-height: 50px; /* Добавляем минимальную высоту для строк */
+            min-height: 50px;
         }
+        /* Styles for cells */
         .gjs-cell {
-            border: 1px solid #ccc; /* Добавляем контур для ячеек */
+            border: 1px solid #ccc;
             padding: 10px;
             text-align: center;
-            min-height: 50px; /* Добавляем минимальную высоту для ячеек */
+            min-height: 50px;
         }
     </style>
 </head>
@@ -32,13 +35,14 @@
     <script src="https://unpkg.com/grapesjs"></script>
     <!-- Your Custom JS -->
     <script>
+        // Initialize GrapesJS editor
         const editor = grapesjs.init({
-            container: '#gjs',
-            fromElement: true,
-            height: '100vh',
-            storageManager: { type: 0 },
-            plugins: [],
-            pluginsOpts: {},
+            container: '#gjs', // Container element for the editor
+            fromElement: true, // Initialize from existing HTML content
+            height: '100vh', // Full viewport height
+            storageManager: { type: 0 }, // Disable storage manager
+            plugins: [], // No plugins for now
+            pluginsOpts: {}, // No plugin options
             styleManager: {
                 sectors: [
                     {
@@ -50,7 +54,7 @@
                                 property: 'width',
                                 units: ['px', '%'],
                                 min: 0,
-                                default: '300px', // Настройки по умолчанию для ширины
+                                default: '300px', // Default width
                             },
                             {
                                 type: 'number',
@@ -58,7 +62,7 @@
                                 property: 'height',
                                 units: ['px', '%'],
                                 min: 0,
-                                default: '80px', // Настройки по умолчанию для высоты
+                                default: '80px', // Default height
                             },
                         ],
                     },
@@ -66,7 +70,7 @@
             },
         });
 
-        // Example of adding a block with custom components
+        // Add a block with custom components
         const blockManager = editor.BlockManager;
         blockManager.add('horizontal-block', {
             label: 'Horizontal Block',