@elementor/editor-canvas 4.1.0-787 → 4.1.0-788

package/dist/index.d.mts

@@ -52,7 +52,7 @@ type LegacyWindow = Window & {
         elementsManager: {
             registerElementType: (type: ElementType) => void;
             getElementTypeClass: (type: string) => typeof ElementType | undefined;
-            _elementTypes: Record<string, ElementType>;
+            elementTypes: Record<string, ElementType>;
         };
         $preview: JQueryElement & [
             {

package/dist/index.d.ts

@@ -52,7 +52,7 @@ type LegacyWindow = Window & {
         elementsManager: {
             registerElementType: (type: ElementType) => void;
             getElementTypeClass: (type: string) => typeof ElementType | undefined;
-            _elementTypes: Record<string, ElementType>;
+            elementTypes: Record<string, ElementType>;
         };
         $preview: JQueryElement & [
             {

package/dist/index.js

@@ -2169,7 +2169,7 @@ function createTemplatedElementView({
       this.triggerMethod("render:template");
     }
     afterSettingsResolve(settings) {
-      return this._getLinkAttributes(settings);
+      return settings;
     }
     _beforeRender() {
       createBeforeRender(this);
@@ -2192,28 +2192,6 @@ function createTemplatedElementView({
       const id = this.model.get("id");
       return originId ?? id;
     }
-    _getLinkAttributes(settings) {
-      const linkAttributes = Object.entries(this._handleActionLinkAttributes(settings)).map(([key, value]) => `${key}="${value}"`).join(" ");
-      return {
-        ...settings,
-        link: linkAttributes ? {
-          tag: settings?.link?.tag,
-          attributes: linkAttributes
-        } : null
-      };
-    }
-    _handleActionLinkAttributes(settings) {
-      const link = settings.link;
-      if (!link || typeof link !== "object" || !("href" in link) || !link.href) {
-        return {};
-      }
-      const isActionLink = "tag" in link && link.tag === "button";
-      const urlAttrKey = isActionLink ? "data-action-link" : "href";
-      return {
-        [urlAttrKey]: link.href,
-        target: ("target" in link && link.target) ?? "_self"
-      };
-    }
   };
 }
 
@@ -2278,6 +2256,11 @@ function createNestedTemplatedElementView({
     _lastResolvedSettingsHash: null,
     _domUpdateWasSkipped: false,
     template: false,
+    attributes() {
+      return {
+        "data-model-cid": this.model.cid
+      };
+    },
     getTemplateType() {
       return "twig";
     },
@@ -2369,12 +2352,18 @@ function createNestedTemplatedElementView({
         return;
       }
       this._destroyAlpine();
+      const overlayHTML = this.getHandlesOverlay()?.get(0)?.outerHTML ?? "";
+      const needsTagSwap = oldEl.tagName !== newEl.tagName;
+      const targetEl = needsTagSwap ? (oldEl.ownerDocument ?? document).createElement(newEl.tagName) : oldEl;
       Array.from(newEl.attributes).forEach((attr) => {
-        oldEl.setAttribute(attr.name, attr.value);
+        targetEl.setAttribute(attr.name, attr.value);
       });
-      oldEl.setAttribute("draggable", "true");
-      const overlayHTML = this.getHandlesOverlay()?.get(0)?.outerHTML ?? "";
-      oldEl.innerHTML = overlayHTML + newEl.innerHTML;
+      targetEl.setAttribute("draggable", "true");
+      targetEl.innerHTML = overlayHTML + newEl.innerHTML;
+      if (needsTagSwap) {
+        oldEl.replaceWith(targetEl);
+        this.setElement(legacyWindow.jQuery(targetEl));
+      }
     },
     async _renderChildren() {
       if (this._shouldReuseChildren()) {
@@ -3198,7 +3187,7 @@ function tryRegisterElement(legacyWindow, type, element, ResolvedElementType) {
   } catch {
     const canOverrideExisting = canBeNestedTemplated(element) && isAlreadyRegistered;
     if (canOverrideExisting) {
-      elementsManager._elementTypes[type] = new ResolvedElementType();
+      elementsManager.elementTypes[type] = new ResolvedElementType();
     }
   }
 }

package/dist/index.mjs

@@ -2135,7 +2135,7 @@ function createTemplatedElementView({
       this.triggerMethod("render:template");
     }
     afterSettingsResolve(settings) {
-      return this._getLinkAttributes(settings);
+      return settings;
     }
     _beforeRender() {
       createBeforeRender(this);
@@ -2158,28 +2158,6 @@ function createTemplatedElementView({
       const id = this.model.get("id");
       return originId ?? id;
     }
-    _getLinkAttributes(settings) {
-      const linkAttributes = Object.entries(this._handleActionLinkAttributes(settings)).map(([key, value]) => `${key}="${value}"`).join(" ");
-      return {
-        ...settings,
-        link: linkAttributes ? {
-          tag: settings?.link?.tag,
-          attributes: linkAttributes
-        } : null
-      };
-    }
-    _handleActionLinkAttributes(settings) {
-      const link = settings.link;
-      if (!link || typeof link !== "object" || !("href" in link) || !link.href) {
-        return {};
-      }
-      const isActionLink = "tag" in link && link.tag === "button";
-      const urlAttrKey = isActionLink ? "data-action-link" : "href";
-      return {
-        [urlAttrKey]: link.href,
-        target: ("target" in link && link.target) ?? "_self"
-      };
-    }
   };
 }
 
@@ -2244,6 +2222,11 @@ function createNestedTemplatedElementView({
     _lastResolvedSettingsHash: null,
     _domUpdateWasSkipped: false,
     template: false,
+    attributes() {
+      return {
+        "data-model-cid": this.model.cid
+      };
+    },
     getTemplateType() {
       return "twig";
     },
@@ -2335,12 +2318,18 @@ function createNestedTemplatedElementView({
         return;
       }
       this._destroyAlpine();
+      const overlayHTML = this.getHandlesOverlay()?.get(0)?.outerHTML ?? "";
+      const needsTagSwap = oldEl.tagName !== newEl.tagName;
+      const targetEl = needsTagSwap ? (oldEl.ownerDocument ?? document).createElement(newEl.tagName) : oldEl;
       Array.from(newEl.attributes).forEach((attr) => {
-        oldEl.setAttribute(attr.name, attr.value);
+        targetEl.setAttribute(attr.name, attr.value);
       });
-      oldEl.setAttribute("draggable", "true");
-      const overlayHTML = this.getHandlesOverlay()?.get(0)?.outerHTML ?? "";
-      oldEl.innerHTML = overlayHTML + newEl.innerHTML;
+      targetEl.setAttribute("draggable", "true");
+      targetEl.innerHTML = overlayHTML + newEl.innerHTML;
+      if (needsTagSwap) {
+        oldEl.replaceWith(targetEl);
+        this.setElement(legacyWindow.jQuery(targetEl));
+      }
     },
     async _renderChildren() {
       if (this._shouldReuseChildren()) {
@@ -3168,7 +3157,7 @@ function tryRegisterElement(legacyWindow, type, element, ResolvedElementType) {
   } catch {
     const canOverrideExisting = canBeNestedTemplated(element) && isAlreadyRegistered;
     if (canOverrideExisting) {
-      elementsManager._elementTypes[type] = new ResolvedElementType();
+      elementsManager.elementTypes[type] = new ResolvedElementType();
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-787",
+  "version": "4.1.0-788",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-787",
+    "@elementor/editor": "4.1.0-788",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.1.0-787",
-    "@elementor/editor-documents": "4.1.0-787",
-    "@elementor/editor-elements": "4.1.0-787",
-    "@elementor/editor-interactions": "4.1.0-787",
-    "@elementor/editor-mcp": "4.1.0-787",
-    "@elementor/editor-notifications": "4.1.0-787",
-    "@elementor/editor-props": "4.1.0-787",
-    "@elementor/editor-responsive": "4.1.0-787",
-    "@elementor/editor-styles": "4.1.0-787",
-    "@elementor/editor-styles-repository": "4.1.0-787",
-    "@elementor/editor-ui": "4.1.0-787",
-    "@elementor/editor-v1-adapters": "4.1.0-787",
-    "@elementor/schema": "4.1.0-787",
-    "@elementor/twing": "4.1.0-787",
+    "@elementor/editor-controls": "4.1.0-788",
+    "@elementor/editor-documents": "4.1.0-788",
+    "@elementor/editor-elements": "4.1.0-788",
+    "@elementor/editor-interactions": "4.1.0-788",
+    "@elementor/editor-mcp": "4.1.0-788",
+    "@elementor/editor-notifications": "4.1.0-788",
+    "@elementor/editor-props": "4.1.0-788",
+    "@elementor/editor-responsive": "4.1.0-788",
+    "@elementor/editor-styles": "4.1.0-788",
+    "@elementor/editor-styles-repository": "4.1.0-788",
+    "@elementor/editor-ui": "4.1.0-788",
+    "@elementor/editor-v1-adapters": "4.1.0-788",
+    "@elementor/schema": "4.1.0-788",
+    "@elementor/twing": "4.1.0-788",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-787",
-    "@elementor/wp-media": "4.1.0-787",
+    "@elementor/utils": "4.1.0-788",
+    "@elementor/wp-media": "4.1.0-788",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/legacy/create-nested-templated-element-type.ts

@@ -109,6 +109,12 @@ export function createNestedTemplatedElementView( {
 
 		template: false,
 
+		attributes() {
+			return {
+				'data-model-cid': this.model.cid,
+			};
+		},
+
 		getTemplateType() {
 			return 'twig';
 		},
@@ -240,14 +246,21 @@ export function createNestedTemplatedElementView( {
 
 			this._destroyAlpine();
 
+			const overlayHTML = this.getHandlesOverlay()?.get( 0 )?.outerHTML ?? '';
+			const needsTagSwap = oldEl.tagName !== newEl.tagName;
+			const targetEl = needsTagSwap ? ( oldEl.ownerDocument ?? document ).createElement( newEl.tagName ) : oldEl;
+
 			Array.from( newEl.attributes ).forEach( ( attr ) => {
-				oldEl.setAttribute( attr.name, attr.value );
+				targetEl.setAttribute( attr.name, attr.value );
 			} );
 
-			oldEl.setAttribute( 'draggable', 'true' );
+			targetEl.setAttribute( 'draggable', 'true' );
+			targetEl.innerHTML = overlayHTML + newEl.innerHTML;
 
-			const overlayHTML = this.getHandlesOverlay()?.get( 0 )?.outerHTML ?? '';
-			oldEl.innerHTML = overlayHTML + newEl.innerHTML;
+			if ( needsTagSwap ) {
+				oldEl.replaceWith( targetEl );
+				this.setElement( legacyWindow.jQuery( targetEl as unknown as string ) );
+			}
 		},
 
 		async _renderChildren() {

package/src/legacy/create-templated-element-type.ts

@@ -186,7 +186,7 @@ export function createTemplatedElementView( {
 		}
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
-			return this._getLinkAttributes( settings );
+			return settings;
 		}
 
 		_beforeRender() {
@@ -214,37 +214,5 @@ export function createTemplatedElementView( {
 
 			return originId ?? id;
 		}
-
-		_getLinkAttributes( settings: { [ key: string ]: unknown } ) {
-			const linkAttributes = Object.entries( this._handleActionLinkAttributes( settings ) )
-				.map( ( [ key, value ] ) => `${ key }="${ value }"` )
-				.join( ' ' );
-
-			return {
-				...settings,
-				link: linkAttributes
-					? {
-							tag: ( settings?.link as { tag?: string } )?.tag,
-							attributes: linkAttributes,
-					  }
-					: null,
-			};
-		}
-
-		_handleActionLinkAttributes( settings: { [ key: string ]: unknown } ) {
-			const link = settings.link;
-
-			if ( ! link || typeof link !== 'object' || ! ( 'href' in link ) || ! link.href ) {
-				return {};
-			}
-
-			const isActionLink = 'tag' in link && link.tag === 'button';
-			const urlAttrKey = isActionLink ? 'data-action-link' : 'href';
-
-			return {
-				[ urlAttrKey ]: link.href,
-				target: ( 'target' in link && link.target ) ?? '_self',
-			};
-		}
 	};
 }

package/src/legacy/init-legacy-views.ts

@@ -101,7 +101,7 @@ function tryRegisterElement(
 		const canOverrideExisting = canBeNestedTemplated( element ) && isAlreadyRegistered;
 
 		if ( canOverrideExisting ) {
-			elementsManager._elementTypes[ type ] = new ResolvedElementType();
+			elementsManager.elementTypes[ type ] = new ResolvedElementType();
 		}
 	}
 }

package/src/legacy/types.ts

@@ -37,7 +37,7 @@ export type LegacyWindow = Window & {
 		elementsManager: {
 			registerElementType: ( type: ElementType ) => void;
 			getElementTypeClass: ( type: string ) => typeof ElementType | undefined;
-			_elementTypes: Record< string, ElementType >;
+			elementTypes: Record< string, ElementType >;
 		};
 		$preview: JQueryElement &
 			[