Table, save

public/assets/js/bridge/table-builder.js

@@ -27,27 +27,45 @@
             );
         };
 
-        const buildTableHtml = (rows, cols, existing) => {
+        const buildTableComponents = (rows, cols, existing) => {
             const safeRows = Math.max(1, Math.min(20, Number(rows) || 1));
             const safeCols = Math.max(1, Math.min(6, Number(cols) || 2));
             const cellStyle = "padding:8px;border:1px solid #e2e8f0;font-size:13px";
             const headStyle = "text-align:left;padding:8px;border:1px solid #e2e8f0;background-color:#f8fafc;font-size:13px";
-            let html = '<tbody>';
+            const tbody = {
+                tagName: 'tbody',
+                components: [],
+            };
             for (let r = 0; r < safeRows; r++) {
-                html += '<tr>';
+                const row = { tagName: 'tr', components: [] };
                 for (let c = 0; c < safeCols; c++) {
                     const existingVal = existing?.[r]?.[c] || '';
                     const label = existingVal || (r === 0 ? `Spalte ${String.fromCharCode(65 + c)}` : `Zeile ${r} / ${c + 1}`);
                     if (r === 0) {
-                        html += `<th data-gjs-selectable="false" data-gjs-draggable="false" style="${headStyle}">${label}</th>`;
+                        row.components.push({
+                            tagName: 'th',
+                            attributes: {
+                                style: headStyle,
+                                'data-gjs-selectable': 'false',
+                                'data-gjs-draggable': 'false',
+                            },
+                            components: [{ type: 'textnode', content: label }],
+                        });
                     } else {
-                        html += `<td data-gjs-selectable="false" data-gjs-draggable="false" style="${cellStyle}">${label}</td>`;
+                        row.components.push({
+                            tagName: 'td',
+                            attributes: {
+                                style: cellStyle,
+                                'data-gjs-selectable': 'false',
+                                'data-gjs-draggable': 'false',
+                            },
+                            components: [{ type: 'textnode', content: label }],
+                        });
                     }
                 }
-                html += '</tr>';
+                tbody.components.push(row);
             }
-            html += '</tbody>';
-            return html;
+            return [tbody];
         };
 
         const openTableModal = (component) => {
@@ -117,6 +135,7 @@
                 if (mdl && typeof mdl.set === 'function') {
                     mdl.set('open', false);
                 }
+                return false;
             });
 
             const saveBtn = document.createElement('button');
@@ -129,13 +148,13 @@
                 const nextRows = Math.max(1, Math.min(20, Number(input.value) || 1));
                 const nextCols = Math.max(1, Math.min(6, Number(colInput.value) || 1));
                 const existing = collectTableCells(component);
-                const html = buildTableHtml(nextRows, nextCols, existing);
+                const components = buildTableComponents(nextRows, nextCols, existing);
                 component.addAttributes && component.addAttributes({
                     'data-bridge-rows': String(nextRows),
                     'data-bridge-cols': String(nextCols),
                 });
                 if (component.components) {
-                    component.components(html);
+                    component.components(components);
                 }
                 if (component.view && component.view.render) {
                     component.view.render();