@elementor/editor-canvas 4.3.0-1061 → 4.3.0-1062

package/dist/index.d.mts

@@ -151,6 +151,8 @@ declare class ElementView {
     }): void;
     once: (event: string, callback: () => void) => void;
     getContainer(): V1Element;
+    initialize?(...args: unknown[]): void;
+    listenTo(target: unknown, event: string, callback: () => void): void;
 }
 declare class TemplatedElementView extends ElementView {
     _doAfterRender(callback: () => void): void;

package/dist/index.d.ts

@@ -151,6 +151,8 @@ declare class ElementView {
     }): void;
     once: (event: string, callback: () => void) => void;
     getContainer(): V1Element;
+    initialize?(...args: unknown[]): void;
+    listenTo(target: unknown, event: string, callback: () => void): void;
 }
 declare class TemplatedElementView extends ElementView {
     _doAfterRender(callback: () => void): void;

package/dist/index.js

@@ -4089,6 +4089,52 @@ function createNestedTemplatedType(type, renderer, element) {
   });
 }
 
+// src/legacy/list-type.ts
+var LIST_TYPE = "e-list";
+function initListType() {
+  registerElementType(
+    LIST_TYPE,
+    (options) => createListType(options)
+  );
+}
+function createListType(options) {
+  const BaseType = createNestedTemplatedElementType(options);
+  let ListView = null;
+  return class extends BaseType {
+    getView() {
+      if (!ListView) {
+        ListView = createListView(options);
+      }
+      return ListView;
+    }
+  };
+}
+function createListView(options) {
+  const BaseView = createNestedTemplatedElementView(options);
+  return BaseView.extend({
+    getRenderContext() {
+      const parentContext = this._parent?.getRenderContext?.();
+      const settings = this.model.get("settings");
+      const showMarkersProp = settings?.get?.("show_markers");
+      const showMarkers = showMarkersProp?.value ?? showMarkersProp ?? true;
+      return {
+        ...parentContext,
+        show_markers: showMarkers
+      };
+    },
+    getResolverRenderContext() {
+      const parentContext = this._parent?.getResolverRenderContext?.();
+      const settings = this.model.get("settings");
+      const showMarkersProp = settings?.get?.("show_markers");
+      const showMarkers = showMarkersProp?.value ?? showMarkersProp ?? true;
+      return {
+        ...parentContext,
+        show_markers: showMarkers
+      };
+    }
+  });
+}
+
 // src/legacy/tabs-model-extensions.ts
 var import_editor_props5 = require("@elementor/editor-props");
 var tabModelExtensions = {
@@ -5746,6 +5792,7 @@ function init() {
     })
   );
   initTabsModelExtensions();
+  initListType();
 }
 
 // src/sync/drag-element-from-panel.ts

package/dist/index.mjs

@@ -4054,6 +4054,52 @@ function createNestedTemplatedType(type, renderer, element) {
   });
 }
 
+// src/legacy/list-type.ts
+var LIST_TYPE = "e-list";
+function initListType() {
+  registerElementType(
+    LIST_TYPE,
+    (options) => createListType(options)
+  );
+}
+function createListType(options) {
+  const BaseType = createNestedTemplatedElementType(options);
+  let ListView = null;
+  return class extends BaseType {
+    getView() {
+      if (!ListView) {
+        ListView = createListView(options);
+      }
+      return ListView;
+    }
+  };
+}
+function createListView(options) {
+  const BaseView = createNestedTemplatedElementView(options);
+  return BaseView.extend({
+    getRenderContext() {
+      const parentContext = this._parent?.getRenderContext?.();
+      const settings = this.model.get("settings");
+      const showMarkersProp = settings?.get?.("show_markers");
+      const showMarkers = showMarkersProp?.value ?? showMarkersProp ?? true;
+      return {
+        ...parentContext,
+        show_markers: showMarkers
+      };
+    },
+    getResolverRenderContext() {
+      const parentContext = this._parent?.getResolverRenderContext?.();
+      const settings = this.model.get("settings");
+      const showMarkersProp = settings?.get?.("show_markers");
+      const showMarkers = showMarkersProp?.value ?? showMarkersProp ?? true;
+      return {
+        ...parentContext,
+        show_markers: showMarkers
+      };
+    }
+  });
+}
+
 // src/legacy/tabs-model-extensions.ts
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil3 } from "@elementor/editor-props";
 var tabModelExtensions = {
@@ -5739,6 +5785,7 @@ function init() {
     })
   );
   initTabsModelExtensions();
+  initListType();
 }
 
 // src/sync/drag-element-from-panel.ts

package/package.json

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

package/src/init.tsx

@@ -10,6 +10,7 @@ import { initFormNestingPrevention } from './form-structure/prevent-form-nesting
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
 import { initLegacyViews } from './legacy/init-legacy-views';
+import { initListType } from './legacy/list-type';
 import { initViewReplacements } from './legacy/replacements/manager';
 import { initTabsModelExtensions } from './legacy/tabs-model-extensions';
 import { initCanvasMcp } from './mcp/canvas-mcp';
@@ -63,4 +64,5 @@ export function init() {
 	);
 
 	initTabsModelExtensions();
+	initListType();
 }

package/src/legacy/__tests__/list-type.test.ts

@@ -0,0 +1,89 @@
+import {
+	createNestedTemplatedElementType,
+	createNestedTemplatedElementView,
+} from '../create-nested-templated-element-type';
+import { elementsLegacyTypes } from '../init-legacy-views';
+import { initListType } from '../list-type';
+import type { ElementType, NestedTemplatedElementViewClass } from '../types';
+
+jest.mock( '../create-nested-templated-element-type', () => ( {
+	createNestedTemplatedElementType: jest.fn(),
+	createNestedTemplatedElementView: jest.fn(),
+} ) );
+
+const LIST_TYPE = 'e-list';
+const resetListType = () => Reflect.deleteProperty( elementsLegacyTypes, LIST_TYPE );
+
+const createMockBaseType = (): typeof ElementType => {
+	const MockBaseType = function MockBaseType() {};
+
+	MockBaseType.prototype.getType = () => LIST_TYPE;
+	MockBaseType.prototype.getView = () => function MockBaseView() {};
+
+	return MockBaseType as unknown as typeof ElementType;
+};
+
+const createMockBaseView = ( generatedViewIdRef: { current: number } ): NestedTemplatedElementViewClass => {
+	const MockBaseView = Object.assign( function BaseViewMock() {}, {
+		extend() {
+			return Object.assign( function ExtendedViewMock() {}, {
+				viewId: ++generatedViewIdRef.current,
+			} );
+		},
+	} );
+
+	return MockBaseView as unknown as NestedTemplatedElementViewClass;
+};
+
+const createMockOptions = () => ( {
+	type: LIST_TYPE,
+	renderer: {
+		register: jest.fn(),
+		render: jest.fn(),
+	},
+	element: {
+		twig_templates: {},
+		twig_main_template: 'main',
+		atomic_props_schema: {},
+		base_styles_dictionary: {},
+		default_html_tag: 'ul',
+		html_tag_follows_link: false,
+		support_nesting: true,
+	},
+} );
+
+describe( 'initListType', () => {
+	beforeEach( () => {
+		const generatedViewIdRef = { current: 0 };
+
+		jest.clearAllMocks();
+		resetListType();
+
+		jest.mocked( createNestedTemplatedElementType ).mockImplementation( () => createMockBaseType() );
+
+		jest.mocked( createNestedTemplatedElementView ).mockImplementation( () =>
+			createMockBaseView( generatedViewIdRef )
+		);
+	} );
+
+	afterEach( () => {
+		resetListType();
+	} );
+
+	it( 'should reuse the same view class for multiple list type instances', () => {
+		// Arrange
+		initListType();
+		const createListType = elementsLegacyTypes[ LIST_TYPE ];
+		const ElementType = createListType( createMockOptions() );
+
+		// Act
+		const typeInstance1 = new ElementType();
+		const typeInstance2 = new ElementType();
+		const viewClass1 = typeInstance1.getView();
+		const viewClass2 = typeInstance2.getView();
+
+		// Assert
+		expect( viewClass1 ).toBe( viewClass2 );
+		expect( createNestedTemplatedElementView ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/legacy/list-type.ts

@@ -0,0 +1,63 @@
+import {
+	createNestedTemplatedElementType,
+	type CreateNestedTemplatedElementTypeOptions,
+	createNestedTemplatedElementView,
+} from './create-nested-templated-element-type';
+import { registerElementType } from './init-legacy-views';
+import type { ElementType, RenderContext } from './types';
+
+const LIST_TYPE = 'e-list';
+
+/**
+ * Initialize the e-list element type with custom render context.
+ */
+export function initListType() {
+	registerElementType( LIST_TYPE, ( options ) =>
+		createListType( options as CreateNestedTemplatedElementTypeOptions )
+	);
+}
+
+function createListType( options: CreateNestedTemplatedElementTypeOptions ): typeof ElementType {
+	const BaseType = createNestedTemplatedElementType( options );
+	let ListView: ReturnType< typeof createListView > | null = null;
+
+	return class extends BaseType {
+		getView() {
+			if ( ! ListView ) {
+				ListView = createListView( options );
+			}
+
+			return ListView;
+		}
+	};
+}
+
+function createListView( options: CreateNestedTemplatedElementTypeOptions ) {
+	const BaseView = createNestedTemplatedElementView( options );
+
+	return BaseView.extend( {
+		getRenderContext(): RenderContext | undefined {
+			const parentContext = this._parent?.getRenderContext?.();
+			const settings = this.model.get( 'settings' );
+			const showMarkersProp = settings?.get?.( 'show_markers' ) as unknown;
+			const showMarkers = ( showMarkersProp as { value?: boolean } )?.value ?? showMarkersProp ?? true;
+
+			return {
+				...parentContext,
+				show_markers: showMarkers,
+			};
+		},
+
+		getResolverRenderContext(): RenderContext | undefined {
+			const parentContext = this._parent?.getResolverRenderContext?.();
+			const settings = this.model.get( 'settings' );
+			const showMarkersProp = settings?.get?.( 'show_markers' ) as unknown;
+			const showMarkers = ( showMarkersProp as { value?: boolean } )?.value ?? showMarkersProp ?? true;
+
+			return {
+				...parentContext,
+				show_markers: showMarkers,
+			};
+		},
+	} );
+}

package/src/legacy/types.ts

@@ -174,6 +174,10 @@ export declare class ElementView {
 	once: ( event: string, callback: () => void ) => void;
 
 	getContainer(): V1Element;
+
+	initialize?( ...args: unknown[] ): void;
+
+	listenTo( target: unknown, event: string, callback: () => void ): void;
 }
 
 export declare class TemplatedElementView extends ElementView {