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

Umbau custom blocks

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-02-07 23:16:48 +01:00
parent c6e8e37a9c
commit 764d427b1c
12 changed files with 256 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/current.ver
View File

@@ -1 +1 @@
1.2.65 1.2.66

200
public/assets/js/bridge/blocks-custom.js
View File

@@ -1,29 +1,19 @@
/* /assets/js/bridge/blocks-custom.js (FINAL & LOG-KONTROLLIERT) */ /* /assets/js/bridge/blocks-custom.js (DYNAMIC ELEMENT LOADER) */
(function () { (function () {
const PluginName = 'blocks-custom'; const PluginName = 'blocks-custom';
const B = window.BridgeParts || (window.BridgeParts = {}); const B = window.BridgeParts || (window.BridgeParts = {});
// ----------------------------------------------------------------------
// 🎯 NEU: LOKALE LOG-KONFIGURATION UND WRAPPER
// ----------------------------------------------------------------------
// Setzen Sie dies auf 'false' in der config.js oder hier, um alle Logs NUR für dieses Plugin zu deaktivieren.
if (B.LOG_CONFIG && B.LOG_CONFIG.PLUGINS) { if (B.LOG_CONFIG && B.LOG_CONFIG.PLUGINS) {
B.LOG_CONFIG.PLUGINS[PluginName] = false; // <-- HIER IST IHR SCHALTER B.LOG_CONFIG.PLUGINS[PluginName] = false;
} }
// NEUER LOKALER WRAPPER, der die zentrale B.log Funktion verwendet:
const log = (type, message, color = '#FFD700', logType = 'info', force = false) => { const log = (type, message, color = '#FFD700', logType = 'info', force = false) => {
if (typeof B.log === 'function') { if (typeof B.log === 'function') {
B.log(PluginName, `[${type}] ${message}`, color, logType, force); B.log(PluginName, `[${type}] ${message}`, color, logType, force);
} else if (logType === 'error') { } else if (logType === 'error') {
// Fallback für kritische Fehler, wenn B.log fehlt
console.error(`%c[${PluginName} - ${type}] %c${message}`, `color:red; font-weight:bold;`, 'color:inherit;'); console.error(`%c[${PluginName} - ${type}] %c${message}`, `color:red; font-weight:bold;`, 'color:inherit;');
} }
}; };
// ----------------------------------------------------------------------
log('FILE CHECK', 'Datei-IIFE startet.'); // NEU: Kontrollierbarer Start-Log
if (window.__CUSTOM_BLOCKS_LOADED) return; if (window.__CUSTOM_BLOCKS_LOADED) return;
window.__CUSTOM_BLOCKS_LOADED = true; window.__CUSTOM_BLOCKS_LOADED = true;
@@ -32,7 +22,6 @@
const ALL_CUSTOM_BLOCK_IDS = []; const ALL_CUSTOM_BLOCK_IDS = [];
function addOnce(bm, id, def, category = TARGET_CAT_ID) { function addOnce(bm, id, def, category = TARGET_CAT_ID) {
// Hinzufügen des Blocks und Sicherstellen der Kategorie-Zuweisung
try { try {
bm.add(id, { ...def, category }); bm.add(id, { ...def, category });
ALL_CUSTOM_BLOCK_IDS.push(id); ALL_CUSTOM_BLOCK_IDS.push(id);
@@ -42,157 +31,78 @@
} }
} }
const css = o => Object.entries(o).map(([k,v]) => `${k}:${v}`).join(';'); const css = o => Object.entries(o).map(([k, v]) => `${k}:${v}`).join(';');
const loadScript = (src) => new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = src;
s.async = true;
s.onload = () => resolve();
s.onerror = (e) => reject(e);
document.head.appendChild(s);
});
const defaultElementFiles = [
'text.js',
'image.js',
'button.js',
'table-2xn.js',
'image-text.js',
'divider.js',
'spacer.js',
'hero.js',
'footer.js',
];
async function loadElementFiles() {
const base = B.API_KERNEL_URL || '/api.php';
const sep = base.includes('?') ? '&' : '?';
const url = `${base}${sep}action=blocks_custom.list`;
try {
const res = await fetch(url, { credentials: 'include' });
const data = await res.json();
if (data && data.ok && Array.isArray(data.files) && data.files.length) {
return data.files;
}
} catch {}
return defaultElementFiles;
}
function register(editor) { function register(editor) {
log('EXECUTION', `Starte Block-Registrierung für ${TARGET_CAT_ID}.`, '#DAA520'); log('EXECUTION', `Starte Block-Registrierung für ${TARGET_CAT_ID}.`, '#DAA520');
const bm = editor.BlockManager; const bm = editor.BlockManager;
const basePath = (B.BASE_PATH_BRIDGE || '/assets/js/bridge/') + 'blocks-custom/elements/';
// TEXT 2 loadElementFiles().then(async (files) => {
addOnce(bm, 'cust-text', { id:'cust-text', label:'📝 Text', const unique = Array.from(new Set(files.filter(Boolean)));
content:{ for (const file of unique) {
type:'text', await loadScript(basePath + file).catch(() => {
tagName:'p', log('LOAD ERROR', `Element-Datei konnte nicht geladen werden: ${file}`, 'red', 'error');
content:'Dies ist ein Absatz. Doppelklick zum Bearbeiten.', });
style:{
'font-family':'Arial,sans-serif',
'font-size':'14px',
'line-height':'1.5',
color:'#0f172a',
margin:'0 0 12px'
} }
} });
// IMAGE const fns = Array.isArray(window.BridgeBlocksCustomElements) ? window.BridgeBlocksCustomElements : [];
addOnce(bm, 'cust-image', { id:'cust-image', label:'🖼️ Bild', fns.forEach((fn) => {
content:`<div style="${css({'text-align':'center',margin:'0 0 16px'})}"> try {
<img src="https://placehold.co/600x300" alt="Bild" style="${css({width:'100%',height:'auto','max-width':'600px',border:'0',display:'inline-block'})}"></div>` }); fn({ editor, bm, addOnce, css, category: TARGET_CAT_ID, log });
} catch (e) {
// BUTTON log('ELEMENT ERROR', e?.message || String(e), 'red', 'error');
addOnce(bm, 'cust-button', { id:'cust-button', label:'🔘 Button', }
content:`<div style="${css({'text-align':'center',margin:'0 0 16px'})}"> });
<a href="#" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'10px 18px','border-radius':'6px','font-family':'Arial,sans-serif','font-size':'14px'})}">Call To Action</a></div>` });
// TABLE
const hasBridgeTable = !!(editor && editor.DomComponents && editor.DomComponents.getType && editor.DomComponents.getType('bridge-table'));
const tableType = hasBridgeTable ? 'bridge-table' : 'default';
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'} },
],
},
],
},
]
} });
// DIVIDER
addOnce(bm, 'cust-divider',{ id:'cust-divider',label:'⎯ Divider',
content:`<hr style="${css({border:'0',height:'1px','background-color':'#e2e8f0',margin:'16px 0'})}">` });
// SPACER
addOnce(bm, 'cust-spacer', { id:'cust-spacer', label:'↕ Spacer',
content:`<div style="${css({height:'24px'})}"></div>` });
// MEDIA LEFT
addOnce(bm, 'cust-media-left', { id:'cust-media-left', label:'🖼️◀ Text',
content:{
type:'default',
tagName:'table',
attributes:{
role:'presentation',
width:'100%',
cellpadding:'0',
cellspacing:'0'
},
style:{
'font-family':'Arial,sans-serif',
'border-collapse':'collapse',
'margin-bottom':'16px'
},
components:`
<tr>
<td width="40%" valign="top" style="${css({padding:'0 8px 0 0'})}">
<img src="https://placehold.co/400x260" alt="Bild" style="${css({width:'100%',height:'auto',border:'0',display:'block'})}">
</td>
<td width="60%" valign="top" style="${css({padding:'0 0 0 8px'})}">
<p style="${css({margin:'0','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Text …</p>
</td>
</tr>`
} });
// HERO
addOnce(bm, 'cust-hero', { id:'cust-hero', label:'🌄 Hero',
content:`<div style="${css({'text-align':'center',margin:'0 0 16px',padding:'12px','background-color':'#eef2ff',color:'#1e3a8a','border':'1px solid #c7d2fe','border-radius':'8px'})}">
<img src="https://placehold.co/640x240" alt="Hero" style="${css({width:'100%',height:'auto','max-width':'640px',border:'0',display:'inline-block','border-radius':'6px'})}">
<h2 style="${css({'font-family':'Arial,sans-serif',margin:'12px 0 8px','font-size':'22px'})}">Titel des Newsletters</h2>
<p style="${css({'font-size':'14px',margin:'0 0 12px'})}">Kurzer Untertitel oder Einleitung.</p>
</div>` });
// FOOTER
addOnce(bm, 'cust-footer', { id:'cust-footer', label:'⚓ Footer',
content:`<div style="${css({'font-family':'Arial,sans-serif','font-size':'12px',color:'#475569','line-height':'1.5','border-top':'1px solid #e2e8f0',padding:'12px 0','text-align':'center'})}">
<p style="${css({margin:'0 0 6px'})}"><strong>Dein Unternehmen GmbH</strong> • Musterstraße 1 • 12345 Berlin</p>
<p style="${css({margin:'0'})}"><a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Abmelden</a> ·
<a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Impressum</a> ·
<a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Datenschutz</a></p>
</div>` });
log('SUCCESS', `Registrierung abgeschlossen. ${ALL_CUSTOM_BLOCK_IDS.length} Blöcke erstellt.`, '#008000', 'info'); log('SUCCESS', `Registrierung abgeschlossen. ${ALL_CUSTOM_BLOCK_IDS.length} Blöcke erstellt.`, '#008000', 'info');
});
} }
// 🛑 KRITISCHE EXPORT-KORREKTUR: Exportiere 'register', um den Fehler in bridge-core.js zu beheben
window.BridgeBlocksCustom = { window.BridgeBlocksCustom = {
IDS: ALL_CUSTOM_BLOCK_IDS, IDS: ALL_CUSTOM_BLOCK_IDS,
register: register // <--- NEU: Exportiert die Register-Funktion register: register
}; };
// Registriere das Modul als GrapesJS Plugin
if (B && B.registerGrapesJSPlugin && typeof register === 'function') { if (B && B.registerGrapesJSPlugin && typeof register === 'function') {
B.registerGrapesJSPlugin('bridge-blocks-custom', register); B.registerGrapesJSPlugin('bridge-blocks-custom', register);
log('PLUGIN REGISTER', `'bridge-blocks-custom' erfolgreich zur Bridge Plugin Registry hinzugefügt.`, '#008000'); log('PLUGIN REGISTER', `'bridge-blocks-custom' erfolgreich zur Bridge Plugin Registry hinzugefügt.`, '#008000');
} else { } else {
log('CRITICAL ERROR', `BridgeParts oder registerGrapesJSPlugin fehlt! Plugin-Registrierung gescheitert.`, 'red', 'error'); log('CRITICAL ERROR', `BridgeParts oder registerGrapesJSPlugin fehlt! Plugin-Registrierung gescheitert.`, 'red', 'error');
} }
})(); })();

10
public/assets/js/bridge/blocks-custom/elements/button.js Normal file
View File

@@ -0,0 +1,10 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-button', { id:'cust-button', label:'🔘 Button',
content:`<div style="${css({'text-align':'center',margin:'0 0 16px'})}">
<a href="#" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'10px 18px','border-radius':'6px','font-family':'Arial,sans-serif','font-size':'14px'})}">Call To Action</a></div>`
});
});
})();

9
public/assets/js/bridge/blocks-custom/elements/divider.js Normal file
View File

@@ -0,0 +1,9 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-divider',{ id:'cust-divider',label:'⎯ Divider',
content:`<hr style="${css({border:'0',height:'1px','background-color':'#e2e8f0',margin:'16px 0'})}">`
});
});
})();

14
public/assets/js/bridge/blocks-custom/elements/footer.js Normal file
View File

@@ -0,0 +1,14 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-footer', { id:'cust-footer', label:'⚓ Footer',
content:`<div style="${css({'font-family':'Arial,sans-serif','font-size':'12px',color:'#475569','line-height':'1.5','border-top':'1px solid #e2e8f0',padding:'12px 0','text-align':'center'})}">
<p style="${css({margin:'0 0 6px'})}"><strong>Dein Unternehmen GmbH</strong> • Musterstraße 1 • 12345 Berlin</p>
<p style="${css({margin:'0'})}"><a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Abmelden</a> ·
<a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Impressum</a> ·
<a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Datenschutz</a></p>
</div>`
});
});
})();

13
public/assets/js/bridge/blocks-custom/elements/hero.js Normal file
View File

@@ -0,0 +1,13 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-hero', { id:'cust-hero', label:'🌄 Hero',
content:`<div style="${css({'text-align':'center',margin:'0 0 16px',padding:'12px','background-color':'#eef2ff',color:'#1e3a8a','border':'1px solid #c7d2fe','border-radius':'8px'})}">
<img src="https://placehold.co/640x240" alt="Hero" style="${css({width:'100%',height:'auto','max-width':'640px',border:'0',display:'inline-block','border-radius':'6px'})}">
<h2 style="${css({'font-family':'Arial,sans-serif',margin:'12px 0 8px','font-size':'22px'})}">Titel des Newsletters</h2>
<p style="${css({'font-size':'14px',margin:'0 0 12px'})}">Kurzer Untertitel oder Einleitung.</p>
</div>`
});
});
})();

32
public/assets/js/bridge/blocks-custom/elements/image-text.js Normal file
View File

@@ -0,0 +1,32 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-media-left', { id:'cust-media-left', label:'🖼️◀ Text',
content:{
type:'default',
tagName:'table',
attributes:{
role:'presentation',
width:'100%',
cellpadding:'0',
cellspacing:'0'
},
style:{
'font-family':'Arial,sans-serif',
'border-collapse':'collapse',
'margin-bottom':'16px'
},
components:`
<tr>
<td width="40%" valign="top" style="${css({padding:'0 8px 0 0'})}">
<img src="https://placehold.co/400x260" alt="Bild" style="${css({width:'100%',height:'auto',border:'0',display:'block'})}">
</td>
<td width="60%" valign="top" style="${css({padding:'0 0 0 8px'})}">
<p style="${css({margin:'0','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Text …</p>
</td>
</tr>`
}
});
});
})();

10
public/assets/js/bridge/blocks-custom/elements/image.js Normal file
View File

@@ -0,0 +1,10 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-image', { id:'cust-image', label:'🖼️ Bild',
content:`<div style="${css({'text-align':'center',margin:'0 0 16px'})}">
<img src="https://placehold.co/600x300" alt="Bild" style="${css({width:'100%',height:'auto','max-width':'600px',border:'0',display:'inline-block'})}"></div>`
});
});
})();

9
public/assets/js/bridge/blocks-custom/elements/spacer.js Normal file
View File

@@ -0,0 +1,9 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-spacer', { id:'cust-spacer', label:'↕ Spacer',
content:`<div style="${css({height:'24px'})}"></div>`
});
});
})();

57
public/assets/js/bridge/blocks-custom/elements/table-2xn.js Normal file
View File

@@ -0,0 +1,57 @@
(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';
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'} },
],
},
],
},
]
}
});
});
})();

20
public/assets/js/bridge/blocks-custom/elements/text.js Normal file
View File

@@ -0,0 +1,20 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce } = ctx;
addOnce(bm, 'cust-text', { id:'cust-text', label:'📝 Text',
content:{
type:'text',
tagName:'p',
content:'Dies ist ein Absatz. Doppelklick zum Bearbeiten.',
style:{
'font-family':'Arial,sans-serif',
'font-size':'14px',
'line-height':'1.5',
color:'#0f172a',
margin:'0 0 12px'
}
}
});
});
})();

21
src/ApiKernel.php
View File

@@ -3005,6 +3005,9 @@ class ApiKernel
case 'account.fonts.list': case 'account.fonts.list':
$this->handleAccountFontsList(); $this->handleAccountFontsList();
break; break;
case 'blocks_custom.list':
$this->handleBlocksCustomList();
break;
case 'debug.logs.list': case 'debug.logs.list':
$this->handleDebugLogsList(); $this->handleDebugLogsList();
break; break;
@@ -3090,6 +3093,24 @@ class ApiKernel
} }
} }
private function handleBlocksCustomList(): void
{
$this->requireAuth();
$baseDir = realpath(__DIR__ . '/../public/assets/js/bridge/blocks-custom/elements');
if (!$baseDir || !is_dir($baseDir)) {
$this->respond(['ok' => true, 'files' => []]);
return;
}
$files = glob($baseDir . '/*.js') ?: [];
$out = [];
foreach ($files as $file) {
$name = basename($file);
if ($name && $name[0] !== '.') $out[] = $name;
}
sort($out, SORT_NATURAL | SORT_FLAG_CASE);
$this->respond(['ok' => true, 'files' => $out]);
}
private function lookupTableName(string $key, string $default): string private function lookupTableName(string $key, string $default): string
{ {
$tables = $this->conf['tables'] ?? []; $tables = $this->conf['tables'] ?? [];