Element rebuild
This commit is contained in:
@@ -1,57 +1,22 @@
|
||||
(function(){
|
||||
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
|
||||
window.BridgeBlocksCustomElements.push(function(ctx){
|
||||
const { bm, addOnce } = ctx;
|
||||
const hasBridgeTable = !!(ctx.editor && ctx.editor.DomComponents && ctx.editor.DomComponents.getType && ctx.editor.DomComponents.getType('bridge-table'));
|
||||
const tableType = hasBridgeTable ? 'bridge-table' : 'default';
|
||||
const { bm, addOnce, css } = ctx;
|
||||
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
|
||||
content:{
|
||||
type: tableType,
|
||||
tagName:'table',
|
||||
attributes:{
|
||||
role:'presentation',
|
||||
width:'100%',
|
||||
cellpadding:'0',
|
||||
cellspacing:'0',
|
||||
'data-bridge-table':'1',
|
||||
'data-bridge-rows':'3',
|
||||
'data-bridge-cols':'2'
|
||||
},
|
||||
style:{
|
||||
'font-family':'Arial,sans-serif',
|
||||
'border-collapse':'collapse',
|
||||
'width':'100%',
|
||||
'margin-bottom':'16px'
|
||||
},
|
||||
components: [
|
||||
{
|
||||
tagName: 'tbody',
|
||||
components: [
|
||||
{
|
||||
tagName: 'tr',
|
||||
components: [
|
||||
{ tagName: 'th', content: 'Spalte A', style: {'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'} },
|
||||
{ tagName: 'th', content: 'Spalte B', style: {'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'} },
|
||||
],
|
||||
},
|
||||
{
|
||||
tagName: 'tr',
|
||||
components: [
|
||||
{ tagName: 'td', content: 'Zeile 1', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
|
||||
{ tagName: 'td', content: '...', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
|
||||
],
|
||||
},
|
||||
{
|
||||
tagName: 'tr',
|
||||
components: [
|
||||
{ tagName: 'td', content: 'Zeile 2', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
|
||||
{ tagName: 'td', content: '...', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
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'})}">
|
||||
<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>
|
||||
</table>`
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user