@elementor/editor-canvas 3.33.0-218 → 3.33.0-219

package/dist/index.d.mts

@@ -102,6 +102,10 @@ declare class ElementView {
     $el: JQueryElement;
     model: BackboneModel<ElementModel>;
     collection: BackboneCollection<ElementModel>;
+    children: {
+        length: number;
+        findByIndex: (index: number) => ElementView;
+    };
     constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
     onDestroy(...args: unknown[]): void;
@@ -119,8 +123,12 @@ declare class ElementView {
     _renderTemplate(): void;
     _renderChildren(): void;
     attachBuffer(collectionView: this, buffer: DocumentFragment): void;
-    triggerMethod(method: string): void;
+    triggerMethod(method: string, ...args: unknown[]): void;
     bindUIElements(): void;
+    _ensureViewIsIntact(): void;
+    _isRendering: boolean;
+    resetChildViewContainer(): void;
+    isRendered: boolean;
     options?: {
         model: BackboneModel<ElementModel>;
     };
@@ -134,15 +142,21 @@ type JQueryElement = {
 };
 type BackboneModel<Model extends object> = {
     get: <T extends keyof Model>(key: T) => Model[T];
+    set: <T extends keyof Model>(key: T, value: Model[T]) => void;
     toJSON: () => ToJSON<Model>;
 };
 type BackboneCollection<Model extends object> = {
     models: BackboneModel<Model>[];
+    forEach: (callback: (model: BackboneModel<Model>) => void) => void;
 };
 type ElementModel = {
     id: string;
     settings: BackboneModel<Props>;
     widgetType: string;
+    editSettings?: BackboneModel<{
+        inactive?: boolean;
+    }>;
+    elements?: BackboneCollection<ElementModel>;
 };
 type ToJSON<T> = {
     [K in keyof T]: T[K] extends BackboneModel<infer M> ? ToJSON<M> : T[K];
@@ -165,4 +179,4 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-export { type AnyTransformer, type CreateTemplatedElementTypeOptions, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+export { type AnyTransformer, type BackboneModel, type CreateTemplatedElementTypeOptions, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -102,6 +102,10 @@ declare class ElementView {
     $el: JQueryElement;
     model: BackboneModel<ElementModel>;
     collection: BackboneCollection<ElementModel>;
+    children: {
+        length: number;
+        findByIndex: (index: number) => ElementView;
+    };
     constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
     onDestroy(...args: unknown[]): void;
@@ -119,8 +123,12 @@ declare class ElementView {
     _renderTemplate(): void;
     _renderChildren(): void;
     attachBuffer(collectionView: this, buffer: DocumentFragment): void;
-    triggerMethod(method: string): void;
+    triggerMethod(method: string, ...args: unknown[]): void;
     bindUIElements(): void;
+    _ensureViewIsIntact(): void;
+    _isRendering: boolean;
+    resetChildViewContainer(): void;
+    isRendered: boolean;
     options?: {
         model: BackboneModel<ElementModel>;
     };
@@ -134,15 +142,21 @@ type JQueryElement = {
 };
 type BackboneModel<Model extends object> = {
     get: <T extends keyof Model>(key: T) => Model[T];
+    set: <T extends keyof Model>(key: T, value: Model[T]) => void;
     toJSON: () => ToJSON<Model>;
 };
 type BackboneCollection<Model extends object> = {
     models: BackboneModel<Model>[];
+    forEach: (callback: (model: BackboneModel<Model>) => void) => void;
 };
 type ElementModel = {
     id: string;
     settings: BackboneModel<Props>;
     widgetType: string;
+    editSettings?: BackboneModel<{
+        inactive?: boolean;
+    }>;
+    elements?: BackboneCollection<ElementModel>;
 };
 type ToJSON<T> = {
     [K in keyof T]: T[K] extends BackboneModel<infer M> ? ToJSON<M> : T[K];
@@ -165,4 +179,4 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-export { type AnyTransformer, type CreateTemplatedElementTypeOptions, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+export { type AnyTransformer, type BackboneModel, type CreateTemplatedElementTypeOptions, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -1238,25 +1238,27 @@ function createTemplatedElementView({
   });
   return class extends BaseView {
     #abortController = null;
-    __renderChildren;
-    constructor(...args) {
-      super(...args);
-      this.__renderChildren = this._renderChildren;
-      this._renderChildren = () => {
-      };
-    }
     getTemplateType() {
       return "twig";
     }
     renderOnChange() {
       this.render();
     }
-    // Overriding Marionette original render method to inject our renderer.
-    async _renderTemplate() {
-      this.#beforeRenderTemplate();
+    // Override `render` function to support async `_renderTemplate`
+    // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+    render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then((_, signal) => {
+      const process = signalizedProcess(this.#abortController.signal).then(() => this.#beforeRender()).then(() => this._renderTemplate()).then(() => {
+        this._renderChildren();
+        this.#afterRender();
+      });
+      return process.execute();
+    }
+    // Overriding Marionette original `_renderTemplate` method to inject our renderer.
+    async _renderTemplate() {
+      this.triggerMethod("before:render:template");
+      const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
         const settings = this.model.get("settings").toJSON();
         return resolveProps({
           props: settings,
@@ -1272,20 +1274,24 @@ function createTemplatedElementView({
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
-      }).then((html) => this.$el.html(html)).then(() => this.__renderChildren());
+      }).then((html) => this.$el.html(html));
       await process.execute();
-      this.#afterRenderTemplate();
+      this.bindUIElements();
+      this.triggerMethod("render:template");
     }
     afterSettingsResolve(settings) {
       return settings;
     }
-    // Emulating the original Marionette behavior.
-    #beforeRenderTemplate() {
-      this.triggerMethod("before:render:template");
+    #beforeRender() {
+      this._ensureViewIsIntact();
+      this._isRendering = true;
+      this.resetChildViewContainer();
+      this.triggerMethod("before:render", this);
     }
-    #afterRenderTemplate() {
-      this.bindUIElements();
-      this.triggerMethod("render:template");
+    #afterRender() {
+      this._isRendering = false;
+      this.isRendered = true;
+      this.triggerMethod("render", this);
     }
   };
 }

package/dist/index.mjs

@@ -1200,25 +1200,27 @@ function createTemplatedElementView({
   });
   return class extends BaseView {
     #abortController = null;
-    __renderChildren;
-    constructor(...args) {
-      super(...args);
-      this.__renderChildren = this._renderChildren;
-      this._renderChildren = () => {
-      };
-    }
     getTemplateType() {
       return "twig";
     }
     renderOnChange() {
       this.render();
     }
-    // Overriding Marionette original render method to inject our renderer.
-    async _renderTemplate() {
-      this.#beforeRenderTemplate();
+    // Override `render` function to support async `_renderTemplate`
+    // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+    render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then((_, signal) => {
+      const process = signalizedProcess(this.#abortController.signal).then(() => this.#beforeRender()).then(() => this._renderTemplate()).then(() => {
+        this._renderChildren();
+        this.#afterRender();
+      });
+      return process.execute();
+    }
+    // Overriding Marionette original `_renderTemplate` method to inject our renderer.
+    async _renderTemplate() {
+      this.triggerMethod("before:render:template");
+      const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
         const settings = this.model.get("settings").toJSON();
         return resolveProps({
           props: settings,
@@ -1234,20 +1236,24 @@ function createTemplatedElementView({
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
-      }).then((html) => this.$el.html(html)).then(() => this.__renderChildren());
+      }).then((html) => this.$el.html(html));
       await process.execute();
-      this.#afterRenderTemplate();
+      this.bindUIElements();
+      this.triggerMethod("render:template");
     }
     afterSettingsResolve(settings) {
       return settings;
     }
-    // Emulating the original Marionette behavior.
-    #beforeRenderTemplate() {
-      this.triggerMethod("before:render:template");
+    #beforeRender() {
+      this._ensureViewIsIntact();
+      this._isRendering = true;
+      this.resetChildViewContainer();
+      this.triggerMethod("before:render", this);
     }
-    #afterRenderTemplate() {
-      this.bindUIElements();
-      this.triggerMethod("render:template");
+    #afterRender() {
+      this._isRendering = false;
+      this.isRendered = true;
+      this.triggerMethod("render", this);
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-218",
+  "version": "3.33.0-219",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-218",
-    "@elementor/editor-notifications": "3.33.0-218",
-    "@elementor/editor-documents": "3.33.0-218",
-    "@elementor/editor-elements": "3.33.0-218",
-    "@elementor/editor-props": "3.33.0-218",
-    "@elementor/editor-responsive": "3.33.0-218",
-    "@elementor/editor-styles": "3.33.0-218",
-    "@elementor/editor-styles-repository": "3.33.0-218",
-    "@elementor/editor-v1-adapters": "3.33.0-218",
-    "@elementor/twing": "3.33.0-218",
+    "@elementor/editor": "3.33.0-219",
+    "@elementor/editor-notifications": "3.33.0-219",
+    "@elementor/editor-documents": "3.33.0-219",
+    "@elementor/editor-elements": "3.33.0-219",
+    "@elementor/editor-props": "3.33.0-219",
+    "@elementor/editor-responsive": "3.33.0-219",
+    "@elementor/editor-styles": "3.33.0-219",
+    "@elementor/editor-styles-repository": "3.33.0-219",
+    "@elementor/editor-v1-adapters": "3.33.0-219",
+    "@elementor/twing": "3.33.0-219",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-218",
-    "@elementor/wp-media": "3.33.0-218",
+    "@elementor/utils": "3.33.0-219",
+    "@elementor/wp-media": "3.33.0-219",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -71,18 +71,6 @@ export function createTemplatedElementView( {
 	return class extends BaseView {
 		#abortController: AbortController | null = null;
 
-		__renderChildren: () => void;
-
-		constructor( ...args: unknown[] ) {
-			super( ...args );
-
-			// This override blocks the regular usage of `_renderChildren` method,
-			// and assigns it to another method which will be called later in the `_renderTemplate` method.
-			this.__renderChildren = this._renderChildren;
-
-			this._renderChildren = () => {};
-		}
-
 		getTemplateType() {
 			return 'twig';
 		}
@@ -91,14 +79,28 @@ export function createTemplatedElementView( {
 			this.render();
 		}
 
-		// Overriding Marionette original render method to inject our renderer.
-		async _renderTemplate() {
-			this.#beforeRenderTemplate();
-
+		// Override `render` function to support async `_renderTemplate`
+		// Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+		render() {
 			this.#abortController?.abort();
 			this.#abortController = new AbortController();
 
 			const process = signalizedProcess( this.#abortController.signal )
+				.then( () => this.#beforeRender() )
+				.then( () => this._renderTemplate() )
+				.then( () => {
+					this._renderChildren();
+					this.#afterRender();
+				} );
+
+			return process.execute();
+		}
+
+		// Overriding Marionette original `_renderTemplate` method to inject our renderer.
+		async _renderTemplate() {
+			this.triggerMethod( 'before:render:template' );
+
+			const process = signalizedProcess( this.#abortController?.signal as AbortSignal )
 				.then( ( _, signal ) => {
 					const settings = this.model.get( 'settings' ).toJSON();
 
@@ -121,27 +123,34 @@ export function createTemplatedElementView( {
 
 					return renderer.render( templateKey, context );
 				} )
-				.then( ( html ) => this.$el.html( html ) )
-				.then( () => this.__renderChildren() );
+				.then( ( html ) => this.$el.html( html ) );
 
 			await process.execute();
 
-			this.#afterRenderTemplate();
+			this.bindUIElements();
+
+			this.triggerMethod( 'render:template' );
 		}
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
 			return settings;
 		}
 
-		// Emulating the original Marionette behavior.
-		#beforeRenderTemplate() {
-			this.triggerMethod( 'before:render:template' );
+		#beforeRender() {
+			this._ensureViewIsIntact();
+
+			this._isRendering = true;
+
+			this.resetChildViewContainer();
+
+			this.triggerMethod( 'before:render', this );
 		}
 
-		#afterRenderTemplate() {
-			this.bindUIElements();
+		#afterRender() {
+			this._isRendering = false;
+			this.isRendered = true;
 
-			this.triggerMethod( 'render:template' );
+			this.triggerMethod( 'render', this );
 		}
 	};
 }

package/src/legacy/types.ts

@@ -40,6 +40,11 @@ export declare class ElementView {
 
 	collection: BackboneCollection< ElementModel >;
 
+	children: {
+		length: number;
+		findByIndex: ( index: number ) => ElementView;
+	};
+
 	constructor( ...args: unknown[] );
 
 	onRender( ...args: unknown[] ): void;
@@ -71,10 +76,18 @@ export declare class ElementView {
 
 	attachBuffer( collectionView: this, buffer: DocumentFragment ): void;
 
-	triggerMethod( method: string ): void;
+	triggerMethod( method: string, ...args: unknown[] ): void;
 
 	bindUIElements(): void;
 
+	_ensureViewIsIntact(): void;
+
+	_isRendering: boolean;
+
+	resetChildViewContainer(): void;
+
+	isRendered: boolean;
+
 	options?: {
 		model: BackboneModel< ElementModel >;
 	};
@@ -90,19 +103,23 @@ type JQueryElement = {
 	get: ( index: number ) => HTMLElement;
 };
 
-type BackboneModel< Model extends object > = {
+export type BackboneModel< Model extends object > = {
 	get: < T extends keyof Model >( key: T ) => Model[ T ];
+	set: < T extends keyof Model >( key: T, value: Model[ T ] ) => void;
 	toJSON: () => ToJSON< Model >;
 };
 
 type BackboneCollection< Model extends object > = {
 	models: BackboneModel< Model >[];
+	forEach: ( callback: ( model: BackboneModel< Model > ) => void ) => void;
 };
 
-type ElementModel = {
+export type ElementModel = {
 	id: string;
 	settings: BackboneModel< Props >;
 	widgetType: string;
+	editSettings?: BackboneModel< { inactive?: boolean } >;
+	elements?: BackboneCollection< ElementModel >;
 };
 
 type ToJSON< T > = {