table

config/current.ver

@@ -1 +1 @@
-1.2.85
+1.2.86

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: {
+      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'})}">
-        tagName: 'table',
+        <tbody>
-        attributes: {
+          <tr>
-          'data-bridge-table': '1',
+            <th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
-          'data-bridge-rows': '3',
+            <th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
-          'data-bridge-cols': '2',
+          </tr>
-          role: 'presentation',
+          <tr>
-          width: '100%',
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
-          cellpadding: '0',
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
-          cellspacing: '0',
+          </tr>
-          style: css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'}),
+          <tr>
-          'data-gjs-selectable': 'true',
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
-          'data-gjs-hoverable': 'true',
+            <td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
-        },
+          </tr>
-        components: [{
+        </tbody>
-          tagName: 'tbody',
+      </table>`
-          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:'...' },
-              ],
-            },
-          ],
-        }],
-      }
     });
   });
 })();

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 [];