table

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

@@ -125,11 +125,16 @@
             container.style.flexDirection = 'column';
             container.style.gap = '12px';
             container.style.minWidth = '280px';
+            container.style.maxWidth = '360px';
+            container.style.width = '100%';
 
             const label = document.createElement('label');
             label.textContent = 'Anzahl Zeilen';
             label.style.fontSize = '13px';
             label.style.fontWeight = '600';
+            label.style.display = 'flex';
+            label.style.flexDirection = 'column';
+            label.style.gap = '6px';
 
             const input = document.createElement('input');
             input.type = 'number';
@@ -140,6 +145,7 @@
             input.style.padding = '6px 8px';
             input.style.border = '1px solid #cbd5f5';
             input.style.borderRadius = '4px';
+            input.style.boxSizing = 'border-box';
 
             label.appendChild(input);
             container.appendChild(label);
@@ -148,6 +154,9 @@
             colLabel.textContent = 'Anzahl Spalten';
             colLabel.style.fontSize = '13px';
             colLabel.style.fontWeight = '600';
+            colLabel.style.display = 'flex';
+            colLabel.style.flexDirection = 'column';
+            colLabel.style.gap = '6px';
 
             const colInput = document.createElement('input');
             colInput.type = 'number';
@@ -158,6 +167,7 @@
             colInput.style.padding = '6px 8px';
             colInput.style.border = '1px solid #cbd5f5';
             colInput.style.borderRadius = '4px';
+            colInput.style.boxSizing = 'border-box';
 
             colLabel.appendChild(colInput);
             container.appendChild(colLabel);
@@ -235,6 +245,30 @@
         };
 
         let lastClickedCellComp = null;
+        let tableCellClickBound = false;
+        const bindTableCellClick = () => {
+            if (tableCellClickBound) return;
+            const body = editor.Canvas && editor.Canvas.getBody && editor.Canvas.getBody();
+            if (!body) return;
+            tableCellClickBound = true;
+            body.addEventListener('click', (evt) => {
+                const target = evt.target && evt.target.closest ? evt.target.closest('td,th') : null;
+                if (!target) return;
+                const tableEl = target.closest && target.closest('table');
+                if (!tableEl || tableEl.getAttribute('data-bridge-table') !== '1') return;
+                const comp = editor.DomComponents && editor.DomComponents.getComponent
+                    ? editor.DomComponents.getComponent(target)
+                    : null;
+                if (comp) {
+                    lastClickedCellComp = comp;
+                    editor.select(comp);
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }
+            }, true);
+        };
+        editor.on('load', bindTableCellClick);
+        setTimeout(bindTableCellClick, 0);
 
         if (editor.Commands && editor.Commands.add) {
             editor.Commands.add('bridge-table:edit', {