sadsd

public/assets/js/bridge/blocks-placeholder.js

@@ -568,28 +568,29 @@
         return null;
     };
 
-    const ensurePlaceholderComponent = (editor) => {
+    const cloneValue = (value) => {
-        const domc = editor.DomComponents;
+        if (Array.isArray(value)) {
-        if (domc.getType(PLACEHOLDER_COMPONENT)) return;
+            return value.map(cloneValue);
-
-        const baseType = domc.getType('text') || domc.getType('default') || {};
-        const BaseModel = baseType.model || editor.DomComponents.Component;
-        const BaseView = baseType.view || editor.DomComponents.View;
-
-        const placeholderDefaults = {};
-        if (BaseModel.prototype && BaseModel.prototype.defaults) {
-            for (const key in BaseModel.prototype.defaults) {
-                placeholderDefaults[key] = BaseModel.prototype.defaults[key];
         }
+        if (value && typeof value === 'object') {
+            const copy = {};
+            Object.keys(value).forEach(key => {
+                copy[key] = cloneValue(value[key]);
+            });
+            return copy;
         }
-        placeholderDefaults.name = 'Placeholder';
+        return value;
-        placeholderDefaults.tagName = 'span';
+    };
-        placeholderDefaults.droppable = false;
+
-        placeholderDefaults.attributes = {
+    const defaultPlaceholderProps = {
+        name: 'Placeholder',
+        tagName: 'span',
+        droppable: false,
+        attributes: {
             'data-placeholder-type': 'custom',
             'data-placeholder-key': 'UEBERSCHRIFT',
-        };
+        },
-        placeholderDefaults.traits = [
+        traits: [
             {
                 type: 'select',
                 name: 'data-placeholder-type',
@@ -621,17 +622,37 @@
                 options: [],
                 changeProp: true,
             },
-        ];
+        ],
-        const baseToolbar = Array.isArray(placeholderDefaults.toolbar) ? placeholderDefaults.toolbar.slice() : [];
+        toolbar: [
-        baseToolbar.push({
+            {
                 attributes: { class: 'fa fa-edit', title: 'Placeholder bearbeiten' },
                 command: 'bridge-placeholder:edit',
+            },
+        ],
+    };
+
+    const applyPlaceholderDefaults = (model) => {
+        if (!model || typeof model.get !== 'function' || typeof model.set !== 'function') {
+            return;
+        }
+        Object.entries(defaultPlaceholderProps).forEach(([key, value]) => {
+            if (typeof model.get(key) === 'undefined') {
+                model.set(key, cloneValue(value));
+            }
         });
-        placeholderDefaults.toolbar = baseToolbar;
+    };
+
+    const ensurePlaceholderComponent = (editor) => {
+        const domc = editor.DomComponents;
+        if (domc.getType(PLACEHOLDER_COMPONENT)) return;
+
+        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: placeholderDefaults,
             init() {
+                applyPlaceholderDefaults(this);
                 this.listenTo(this, 'change:attributes', this.updatePlaceholderState);
                 this.updatePlaceholderState();
                 fetchPlaceholderSchema()
@@ -720,13 +741,6 @@
             }
         });
 
-        PlaceholderModel.isComponent = function (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);
@@ -745,44 +759,49 @@
         domc.addType(PLACEHOLDER_COMPONENT, {
             model: PlaceholderModel,
             view: PlaceholderView,
+            isComponent(el) {
+                if (el && el.hasAttribute && el.hasAttribute('data-placeholder-type')) {
+                    return { type: PLACEHOLDER_COMPONENT };
+                }
+                return false;
+            },
         });
     };
 
-    const ensureTextSupportsPlaceholders = (editor) => {
+    const patchTextComponentDroppable = (component) => {
-        if (editor.__bridgeTextPlaceholderExtended) return;
+        if (!component || !component.is || !component.is('text')) {
-        const domc = editor.DomComponents;
+            return;
-        const textType = domc.getType('text');
+        }
-        if (!textType || !textType.model) return;
+        if (component.__bridgePlaceholderDroppable) {
-
+            return;
-        const BaseModel = textType.model;
+        }
-        const BaseView = textType.view;
+        component.__bridgePlaceholderDroppable = true;
-        const baseDefaults = (BaseModel.prototype && BaseModel.prototype.defaults) ? BaseModel.prototype.defaults : {};
+        const originalDroppable = component.get('droppable');
-        const originalDroppable = baseDefaults.droppable;
+        const allowFn = function (source, cmp) {
-        const baseIsComponent = typeof textType.isComponent === 'function' ? textType.isComponent : null;
+            if (cmp && cmp.get && cmp.get('type') === PLACEHOLDER_COMPONENT) {
-
-        const TextModel = BaseModel.extend({
-            defaults: {
-                ...baseDefaults,
-                droppable(source, component) {
-                    if (component && component.get && component.get('type') === PLACEHOLDER_COMPONENT) {
                 return true;
             }
             if (typeof originalDroppable === 'function') {
-                        return originalDroppable.call(this, source, component);
+                return originalDroppable.call(this, source, cmp);
             }
-                    return typeof originalDroppable === 'undefined' ? false : originalDroppable;
+            if (typeof originalDroppable === 'undefined') {
-                },
+                return true;
-            },
+            }
-        }, {});
+            return originalDroppable;
+        };
+        component.set('droppable', allowFn);
+    };
 
-        domc.addType('text', {
+    const ensureTextSupportsPlaceholders = (editor) => {
-            model: TextModel,
+        const wrapper = editor.getWrapper && editor.getWrapper();
-            isComponent: baseIsComponent || textType.isComponent,
+        if (wrapper) {
-            view: BaseView,
+            if (typeof wrapper.findType === 'function') {
-        });
+                wrapper.findType('text').forEach(patchTextComponentDroppable);
-
+            } else if (typeof wrapper.find === 'function') {
-        editor.__bridgeTextPlaceholderExtended = true;
+                wrapper.find('[data-gjs-type="text"]').forEach(patchTextComponentDroppable);
-        log('TEXT EXTEND', 'Text-Komponenten erlauben jetzt Placeholder als Inline-Drop.', '#DAA520');
+            }
+        }
+        editor.on('component:add', (cmp) => patchTextComponentDroppable(cmp));
     };
 
     function setTraitOptions(trait, options) {