projects/emailtemplate.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

asdasd

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-01-16 03:11:04 +01:00
parent 5edc64d013
commit d7cac55df5
2 changed files with 241 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
public/assets/js/bridge/table-builder.js Normal file
View File

@@ -0,0 +1,230 @@
/* /assets/js/bridge/table-builder.js */
(function () {
const PluginName = 'bridge-table-builder';
const B = window.BridgeParts || (window.BridgeParts = {});
if (B.__tableBuilderLoaded) return;
B.__tableBuilderLoaded = true;
const log = (type, message, color = '#94a3b8', logType = 'info', force = false) => {
if (typeof B.log === 'function') {
B.log(PluginName, `[${type}] ${message}`, color, logType, force);
}
};
B.setupTableBuilder = (editor) => {
const domc = editor && editor.DomComponents;
if (!domc) return;
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');
const ensureTableTags = () => {
const baseType = domc.getType('default');
if (!baseType) return;
const BaseModel = baseType.model;
const BaseView = baseType.view;
const tags = ['table', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th'];
tags.forEach((tag) => {
if (domc.getType(tag)) return;
domc.addType(tag, {
model: BaseModel,
view: BaseView,
isComponent: (el) => {
if (el.tagName && el.tagName.toLowerCase() === tag) {
return { type: tag };
}
return '';
},
});
});
};
const collectTableCells = (component) => {
const el = component?.view?.el;
if (!el) return [];
return Array.from(el.querySelectorAll('tr')).map(row =>
Array.from(row.children || []).map(cell => cell.innerHTML || '')
);
};
const buildTableHtml = (rows, cols, existing) => {
const safeRows = Math.max(1, Math.min(20, Number(rows) || 1));
const safeCols = Math.max(2, Math.min(2, 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 = '';
for (let r = 0; r < safeRows; r++) {
html += '<tr>';
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 style="${headStyle}">${label}</th>`;
} else {
html += `<td style="${cellStyle}">${label}</td>`;
}
}
html += '</tr>';
}
return html;
};
const openTableModal = (component) => {
if (!component) return;
const modal = editor.Modal;
if (!modal) return;
const attrs = component.getAttributes ? component.getAttributes() : {};
const rows = Number(attrs['data-bridge-rows'] || 3) || 3;
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.gap = '12px';
container.style.minWidth = '280px';
const label = document.createElement('label');
label.textContent = 'Anzahl Zeilen';
label.style.fontSize = '13px';
label.style.fontWeight = '600';
const input = document.createElement('input');
input.type = 'number';
input.min = '1';
input.max = '20';
input.value = String(rows);
input.style.width = '100%';
input.style.padding = '6px 8px';
input.style.border = '1px solid #cbd5f5';
input.style.borderRadius = '4px';
label.appendChild(input);
container.appendChild(label);
const actions = document.createElement('div');
actions.style.display = 'flex';
actions.style.justifyContent = 'flex-end';
actions.style.gap = '8px';
const cancelBtn = document.createElement('button');
cancelBtn.type = 'button';
cancelBtn.textContent = 'Abbrechen';
cancelBtn.className = 'btn';
cancelBtn.addEventListener('click', () => modal.close());
const saveBtn = document.createElement('button');
saveBtn.type = 'button';
saveBtn.textContent = 'Uebernehmen';
saveBtn.className = 'btn';
saveBtn.addEventListener('click', () => {
const nextRows = Math.max(1, Math.min(20, Number(input.value) || 1));
const existing = collectTableCells(component);
const html = buildTableHtml(nextRows, 2, existing);
component.addAttributes && component.addAttributes({
'data-bridge-rows': String(nextRows),
'data-bridge-cols': '2',
});
if (component.components) {
component.components(html);
}
if (component.view && component.view.render) {
component.view.render();
}
modal.close();
});
actions.appendChild(cancelBtn);
actions.appendChild(saveBtn);
container.appendChild(actions);
modal.setTitle('Tabelle konfigurieren');
modal.setContent(container);
const mdl = modal.getModel && modal.getModel();
if (mdl && typeof mdl.set === 'function') {
mdl.set('closeOnEsc', false);
mdl.set('closeOnClick', false);
}
modal.open();
};
if (editor.Commands && editor.Commands.add) {
editor.Commands.add('bridge-table:edit', {
run(ed, sender, opts = {}) {
if (sender && sender.set) sender.set('active', 0);
const component = opts.component || ed.getSelected();
if (component && component.is && component.is('bridge-table')) {
openTableModal(component);
}
},
});
}
if (!domc.getType('bridge-table')) {
const baseType = domc.getType('table') || domc.getType('default');
const BaseModel = baseType.model;
const BaseView = baseType.view;
domc.addType('bridge-table', {
model: BaseModel.extend({
initialize(props = {}, opts = {}) {
if (BaseModel.prototype.initialize) {
BaseModel.prototype.initialize.apply(this, [props, opts]);
}
const attrs = this.getAttributes ? this.getAttributes() : {};
const nextAttrs = Object.assign({
'data-bridge-table': '1',
'data-bridge-rows': '3',
'data-bridge-cols': '2',
role: 'presentation',
}, attrs || {});
if (this.addAttributes) {
this.addAttributes(nextAttrs);
} else if (this.set) {
this.set('attributes', nextAttrs, { silent: true });
}
const toolbar = this.get && this.get('toolbar');
if (!Array.isArray(toolbar) || !toolbar.some(btn => btn && btn.command === 'bridge-table:edit')) {
this.set && this.set('toolbar', [
...(Array.isArray(toolbar) ? toolbar : []),
{
label: tableIcon,
command: 'bridge-table:edit',
attributes: { title: 'Tabelle bearbeiten' },
},
]);
}
},
}),
view: BaseView,
isComponent: (el) => {
if (el.tagName === 'TABLE' && el.getAttribute('data-bridge-table')) {
return { type: 'bridge-table' };
}
return '';
},
});
}
editor.on('component:selected', (model) => {
if (model && model.is && model.is('bridge-table')) {
const toolbar = model.get('toolbar') || [];
const exists = toolbar.some(btn => btn && btn.command === 'bridge-table:edit');
if (!exists) {
toolbar.push({
label: tableIcon,
command: 'bridge-table:edit',
attributes: { title: 'Tabelle bearbeiten' },
});
model.set('toolbar', toolbar);
}
}
});
editor.on('component:dblclick', (model) => {
if (model && model.is && model.is('bridge-table')) {
openTableModal(model);
}
});
ensureTableTags();
log('INIT', 'Table-Builder geladen.', '#10b981');
};
})();

228
public/editor/bridge-core.js
View File

@@ -150,8 +150,11 @@
        ];         ];
        const initialLoadList = B.ENABLE_EDITOR_EXTENSIONS === false         const initialLoadList = B.ENABLE_EDITOR_EXTENSIONS === false
             ? [base + 'general-functions.js']             ? [base + 'general-functions.js']
             : [...coreFiles];             : [...coreFiles];
if (B.ENABLE_EDITOR_EXTENSIONS !== false && B.ENABLE_TABLE_BUILDER) {
initialLoadList.push(base + 'table-builder.js');
}
                 
        function recursiveLoader(list, index = 0) {         function recursiveLoader(list, index = 0) {
            if (index >= list.length) {             if (index >= list.length) {
@@ -881,220 +884,7 @@
editor.on('component:add', (model) => rememberIfPresent(model)); editor.on('component:add', (model) => rememberIfPresent(model));
}; };
const setupTableBuilder = (editor) => { // Table-Builder ausgelagert nach /assets/js/bridge/table-builder.js
const domc = editor.DomComponents;
if (!domc) return;
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');
const ensureTableTags = () => {
const baseType = domc.getType('default');
if (!baseType) return;
const BaseModel = baseType.model;
const BaseView = baseType.view;
const tags = ['table', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th'];
tags.forEach((tag) => {
if (domc.getType(tag)) return;
domc.addType(tag, {
model: BaseModel,
view: BaseView,
isComponent: el => {
if (el.tagName && el.tagName.toLowerCase() === tag) {
return { type: tag };
}
return '';
},
});
});
};
const collectTableCells = (component) => {
const el = component?.view?.el;
if (!el) return [];
return Array.from(el.querySelectorAll('tr')).map(row =>
Array.from(row.children || []).map(cell => cell.innerHTML || '')
);
};
const buildTableHtml = (rows, cols, existing) => {
const safeRows = Math.max(1, Math.min(20, Number(rows) || 1));
const safeCols = Math.max(2, Math.min(2, 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 = '';
for (let r = 0; r < safeRows; r++) {
html += '<tr>';
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 style="${headStyle}">${label}</th>`;
} else {
html += `<td style="${cellStyle}">${label}</td>`;
}
}
html += '</tr>';
}
return html;
};
const openTableModal = (component) => {
if (!component) return;
const modal = editor.Modal;
if (!modal) return;
const attrs = component.getAttributes ? component.getAttributes() : {};
const rows = Number(attrs['data-bridge-rows'] || 3) || 3;
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.gap = '12px';
container.style.minWidth = '280px';
const label = document.createElement('label');
label.textContent = 'Anzahl Zeilen';
label.style.fontSize = '13px';
label.style.fontWeight = '600';
const input = document.createElement('input');
input.type = 'number';
input.min = '1';
input.max = '20';
input.value = String(rows);
input.style.width = '100%';
input.style.padding = '6px 8px';
input.style.border = '1px solid #cbd5f5';
input.style.borderRadius = '4px';
label.appendChild(input);
container.appendChild(label);
const actions = document.createElement('div');
actions.style.display = 'flex';
actions.style.justifyContent = 'flex-end';
actions.style.gap = '8px';
const cancelBtn = document.createElement('button');
cancelBtn.type = 'button';
cancelBtn.textContent = 'Abbrechen';
cancelBtn.className = 'btn';
cancelBtn.addEventListener('click', () => modal.close());
const saveBtn = document.createElement('button');
saveBtn.type = 'button';
saveBtn.textContent = 'Uebernehmen';
saveBtn.className = 'btn';
saveBtn.addEventListener('click', () => {
const nextRows = Math.max(1, Math.min(20, Number(input.value) || 1));
const existing = collectTableCells(component);
const html = buildTableHtml(nextRows, 2, existing);
component.addAttributes && component.addAttributes({
'data-bridge-rows': String(nextRows),
'data-bridge-cols': '2',
});
if (component.components) {
component.components(html);
}
if (component.view && component.view.render) {
component.view.render();
}
modal.close();
});
actions.appendChild(cancelBtn);
actions.appendChild(saveBtn);
container.appendChild(actions);
modal.setTitle('Tabelle konfigurieren');
modal.setContent(container);
const mdl = modal.getModel && modal.getModel();
if (mdl && typeof mdl.set === 'function') {
mdl.set('closeOnEsc', false);
mdl.set('closeOnClick', false);
}
modal.open();
};
if (editor.Commands && editor.Commands.add) {
editor.Commands.add('bridge-table:edit', {
run(ed, sender, opts = {}) {
if (sender && sender.set) sender.set('active', 0);
const component = opts.component || ed.getSelected();
if (component && component.is && component.is('bridge-table')) {
openTableModal(component);
}
},
});
}
if (!domc.getType('bridge-table')) {
const baseType = domc.getType('table') || domc.getType('default');
const BaseModel = baseType.model;
const BaseView = baseType.view;
domc.addType('bridge-table', {
model: BaseModel.extend({
initialize(props = {}, opts = {}) {
if (BaseModel.prototype.initialize) {
BaseModel.prototype.initialize.apply(this, [props, opts]);
}
const attrs = this.getAttributes ? this.getAttributes() : {};
const nextAttrs = Object.assign({
'data-bridge-table': '1',
'data-bridge-rows': '3',
'data-bridge-cols': '2',
role: 'presentation',
}, attrs || {});
if (this.addAttributes) {
this.addAttributes(nextAttrs);
} else if (this.set) {
this.set('attributes', nextAttrs, { silent: true });
}
const toolbar = this.get && this.get('toolbar');
if (!Array.isArray(toolbar) || !toolbar.some(btn => btn && btn.command === 'bridge-table:edit')) {
this.set && this.set('toolbar', [
...(Array.isArray(toolbar) ? toolbar : []),
{
label: tableIcon,
command: 'bridge-table:edit',
attributes: { title: 'Tabelle bearbeiten' },
},
]);
}
},
}),
view: BaseView,
isComponent: el => {
if (el.tagName === 'TABLE' && el.getAttribute('data-bridge-table')) {
return { type: 'bridge-table' };
}
return '';
},
});
}
editor.on('component:selected', (model) => {
if (model && model.is && model.is('bridge-table')) {
const toolbar = model.get('toolbar') || [];
const exists = toolbar.some(btn => btn && btn.command === 'bridge-table:edit');
if (!exists) {
toolbar.push({
label: tableIcon,
command: 'bridge-table:edit',
attributes: { title: 'Tabelle bearbeiten' },
});
model.set('toolbar', toolbar);
}
}
});
editor.on('component:dblclick', (model) => {
if (model && model.is && model.is('bridge-table')) {
openTableModal(model);
}
});
ensureTableTags();
};
const setupBlurLogger = (editor) => { const setupBlurLogger = (editor) => {
if (!editor || !editor.Canvas || !editor.Canvas.getBody) return; if (!editor || !editor.Canvas || !editor.Canvas.getBody) return;
@@ -1243,7 +1033,11 @@
} }
if (B.ENABLE_EDITOR_EXTENSIONS !== false && (B.ENABLE_EDITOR_BEHAVIOR !== false || B.ENABLE_TABLE_BUILDER)) { if (B.ENABLE_EDITOR_EXTENSIONS !== false && (B.ENABLE_EDITOR_BEHAVIOR !== false || B.ENABLE_TABLE_BUILDER)) {
setupTableBuilder(ed); if (typeof B.setupTableBuilder === 'function') {
B.setupTableBuilder(ed);
} else {
log('TABLE WARN', 'Table-Builder nicht geladen.', 'orange', 'warn');
}
} }
if (B.ENABLE_EDITOR_EXTENSIONS !== false && B.ENABLE_EDITOR_BEHAVIOR !== false) { if (B.ENABLE_EDITOR_EXTENSIONS !== false && B.ENABLE_EDITOR_BEHAVIOR !== false) {
setupPlainTextPreserver(ed); setupPlainTextPreserver(ed);