From 2ffc1cc58bfbcebef20393e6b9c1b529c2b6359b Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Mon, 9 Feb 2026 00:55:02 +0100
Subject: [PATCH] table

---
 config/current.ver                            |  2 +-
 .../blocks-custom/elements/table-2xn.js       | 75 ++++---------------
 public/assets/js/bridge/table-builder.js      | 25 +++++++
 3 files changed, 42 insertions(+), 60 deletions(-)

diff --git a/config/current.ver b/config/current.ver
index 4adb59e..85ac2a9 100644
--- a/config/current.ver
+++ b/config/current.ver
@@ -1 +1 @@
-1.2.85
+1.2.86
diff --git a/public/assets/js/bridge/blocks-custom/elements/table-2xn.js b/public/assets/js/bridge/blocks-custom/elements/table-2xn.js
index e5ea1b2..3886015 100644
--- a/public/assets/js/bridge/blocks-custom/elements/table-2xn.js
+++ b/public/assets/js/bridge/blocks-custom/elements/table-2xn.js
@@ -2,66 +2,23 @@
   window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
   window.BridgeBlocksCustomElements.push(function(ctx){
     const { bm, addOnce, css } = ctx;
-    const headStyle = css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'});
-    const cellStyle = css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'});
     addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
-      content: {
-        tagName: 'table',
-        attributes: {
-          'data-bridge-table': '1',
-          'data-bridge-rows': '3',
-          'data-bridge-cols': '2',
-          role: 'presentation',
-          width: '100%',
-          cellpadding: '0',
-          cellspacing: '0',
-          style: css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'}),
-          'data-gjs-selectable': 'true',
-          'data-gjs-hoverable': 'true',
-        },
-        components: [{
-          tagName: 'tbody',
-          selectable: false,
-          hoverable: false,
-          draggable: false,
-          highlightable: false,
-          components: [
-            {
-              tagName: 'tr',
-              selectable: false,
-              hoverable: false,
-              draggable: false,
-              highlightable: false,
-              components: [
-                { type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte A' },
-                { type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte B' },
-              ],
-            },
-            {
-              tagName: 'tr',
-              selectable: false,
-              hoverable: false,
-              draggable: false,
-              highlightable: false,
-              components: [
-                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 1' },
-                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
-              ],
-            },
-            {
-              tagName: 'tr',
-              selectable: false,
-              hoverable: false,
-              draggable: false,
-              highlightable: false,
-              components: [
-                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 2' },
-                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
-              ],
-            },
-          ],
-        }],
-      }
+      content:`<table data-bridge-table="1" data-bridge-rows="3" data-bridge-cols="2" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'})}">
+        <tbody>
+          <tr>
+            <th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
+            <th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
+          </tr>
+          <tr>
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
+          </tr>
+          <tr>
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
+          </tr>
+        </tbody>
+      </table>`
     });
   });
 })();
diff --git a/public/assets/js/bridge/table-builder.js b/public/assets/js/bridge/table-builder.js
index 4d6d8db..b18f4d3 100644
--- a/public/assets/js/bridge/table-builder.js
+++ b/public/assets/js/bridge/table-builder.js
@@ -19,6 +19,31 @@
         const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
         const tableIcon = icon('M3 4h18v16H3V4zm2 2v3h6V6H5zm8 0v3h6V6h-6zM5 11v3h6v-3H5zm8 0v3h6v-3h-6zM5 16v2h6v-2H5zm8 0v2h6v-2h-6z');
 
+        if (!domc.getType || !domc.getType('bridge-table-cell')) {
+            domc.addType('bridge-table-cell', {
+                isComponent(el) {
+                    if (!el || !el.tagName) return;
+                    const tag = el.tagName.toUpperCase();
+                    if (tag !== 'TD' && tag !== 'TH') return;
+                    const table = el.closest && el.closest('table');
+                    if (!table || table.getAttribute('data-bridge-table') !== '1') return;
+                    return { type: 'bridge-table-cell' };
+                },
+                model: {
+                    defaults: {
+                        editable: true,
+                        selectable: true,
+                        hoverable: true,
+                        highlightable: true,
+                        draggable: false,
+                        droppable: false,
+                        copyable: true,
+                        classes: [],
+                    },
+                },
+            });
+        }
+
         const collectTableCells = (component) => {
             const el = component?.view?.el;
             if (!el) return [];