diff --git a/public/assets/js/bridge/blocks-custom.js b/public/assets/js/bridge/blocks-custom.js index 48b9028..bf2e0ab 100644 --- a/public/assets/js/bridge/blocks-custom.js +++ b/public/assets/js/bridge/blocks-custom.js @@ -91,18 +91,13 @@ const domc = editor.DomComponents; if (domc.getType(PLACEHOLDER_COMPONENT)) return; - const baseType = domc.getType('text') ? 'text' : 'default'; - domc.addType(PLACEHOLDER_COMPONENT, { - extend: baseType, - isComponent(el) { - if (el && el.hasAttribute && el.hasAttribute('data-placeholder-type')) { - return { type: PLACEHOLDER_COMPONENT }; - } - return false; - }, - model: { - defaults: { - name: 'Placeholder', + const baseType = domc.getType('text') || domc.getType('default') || {}; + const BaseModel = baseType.model || editor.DomComponents.Component; + const BaseView = baseType.view || editor.DomComponents.View; + + const PlaceholderModel = BaseModel.extend({ + defaults: { + name: 'Placeholder', tagName: 'span', droppable: false, attributes: { @@ -231,20 +226,33 @@ } }, }, - view: editor.DomComponents.View.extend({ - render() { - editor.DomComponents.View.prototype.render.apply(this, arguments); - this.el.classList.add('placeholder-block'); - this.el.style.display = 'inline-block'; - this.el.style.padding = '2px 8px'; - this.el.style.border = '1px dashed #94a3b8'; - this.el.style.borderRadius = '6px'; - this.el.style.background = '#f1f5f9'; - this.el.style.fontFamily = 'monospace'; - this.el.style.fontSize = '12px'; - return this; - }, - }), + }, { + isComponent(el) { + if (el && el.hasAttribute && el.hasAttribute('data-placeholder-type')) { + return { type: PLACEHOLDER_COMPONENT }; + } + return false; + }, + }); + + const PlaceholderView = BaseView.extend({ + render() { + BaseView.prototype.render.apply(this, arguments); + this.el.classList.add('placeholder-block'); + this.el.style.display = 'inline-block'; + this.el.style.padding = '2px 8px'; + this.el.style.border = '1px dashed #94a3b8'; + this.el.style.borderRadius = '6px'; + this.el.style.background = '#f1f5f9'; + this.el.style.fontFamily = 'monospace'; + this.el.style.fontSize = '12px'; + return this; + }, + }); + + domc.addType(PLACEHOLDER_COMPONENT, { + model: PlaceholderModel, + view: PlaceholderView, }); }; @@ -264,12 +272,30 @@ // --- Custom-Blöcke DEFINIEREN --- - // PLACEHOLDER - addOnce(bm, 'cust-placeholder', { - id: 'cust-placeholder', - label: '🔖 Placeholder', + // PLACEHOLDER (Custom) + const customPlaceholderBlock = { + id: 'cust-placeholder-custom', + label: '🔖 Placeholder (Text)', content: `{{UEBERSCHRIFT}}` - }); + }; + addOnce(bm, customPlaceholderBlock.id, customPlaceholderBlock); + + // Datenbank Placeholder – erst registrieren, wenn Tabellen verfügbar + fetchPlaceholderSchema() + .then(tables => { + if (!tables || !tables.length) { + log('PLACEHOLDER INFO', 'Keine Tabellen – DB Placeholder Block wird nicht angezeigt.', '#888'); + return; + } + addOnce(bm, 'cust-placeholder-db', { + id: 'cust-placeholder-db', + label: '🗄️ Placeholder (DB)', + content: `{{${(tables[0].name + '.' + (tables[0].columns?.[0]?.name || '')).toUpperCase()}}}` + }); + }) + .catch(() => { + log('PLACEHOLDER WARN', 'DB Placeholder Block ausgeblendet (Schemafehler).', '#b45309'); + }); // TEXT addOnce(bm, 'cust-text', { id:'cust-text', label:'📝 Text',