@elementor/editor-elements 4.3.4 → 4.3.5

package/src/children-dependencies/bind-settings-reconcile.ts

@@ -82,6 +82,7 @@ function attachChildFromRule( parentId: string, rule: ChildDependencyRule, stash
 	const alreadyPresent = currentChildren.some( ( child ) => child.elType === rule.child_type );
 
 	if ( alreadyPresent ) {
+		placeAnchoredChild( parentId, rule );
 		return;
 	}
 
@@ -123,6 +124,53 @@ function detachChildFromRule( parentId: string, rule: ChildDependencyRule, stash
 	requestNavigatorRefresh( parentId );
 }
 
+function placeAnchoredChild( parentId: string, rule: ChildDependencyRule ): void {
+	if ( rule.position.kind !== 'after_type' && rule.position.kind !== 'before_type' ) {
+		return;
+	}
+
+	let parent: V1Element | undefined;
+
+	try {
+		parent = getContainer( parentId ) ?? undefined;
+	} catch {
+		return;
+	}
+
+	const collection = parent?.model?.get?.( 'elements' ) as
+		| {
+				models?: Array< { get: ( key: string ) => unknown } >;
+				remove?: ( model: unknown, options?: { silent?: boolean } ) => void;
+				add?: ( model: unknown, options?: { at?: number; silent?: boolean } ) => void;
+		  }
+		| undefined;
+	const models = collection?.models;
+
+	if ( ! models || ! collection?.remove || ! collection?.add ) {
+		return;
+	}
+
+	const existingIndex = models.findIndex( ( model ) => model.get( 'elType' ) === rule.child_type );
+
+	if ( existingIndex < 0 ) {
+		return;
+	}
+
+	const siblings = models.map( ( model ) => ( { elType: model.get( 'elType' ) } ) as V1ElementData );
+	const remaining = siblings.filter( ( _, index ) => index !== existingIndex );
+	const insertAt = resolveInsertIndex( rule.position, remaining );
+
+	if ( insertAt === existingIndex ) {
+		return;
+	}
+
+	const model = models[ existingIndex ];
+
+	collection.remove( model, { silent: true } );
+	collection.add( model, { at: insertAt, silent: true } );
+	requestNavigatorRefresh( parentId );
+}
+
 // Backbone `add`/`remove` on the parent elements collection is silent (see
 // assets/dev/js/editor/document/component.js addModelToParent / removeModelFromParent),
 // so the Marionette Navigator CompositeView never observes our mutation. The

package/src/children-dependencies/reconcile-initial-children.ts

@@ -33,6 +33,18 @@ export function reconcileInitialChildren( {
 		const existingIndex = elements.findIndex( ( element ) => element.elType === rule.child_type );
 		const isPresent = existingIndex >= 0;
 
+		if ( isMet && isPresent && isAnchoredPosition( rule.position.kind ) ) {
+			const remaining = elements.filter( ( _, index ) => index !== existingIndex );
+			const insertAt = resolveInsertIndex( rule.position, remaining );
+
+			if ( insertAt !== existingIndex ) {
+				const [ moved ] = elements.splice( existingIndex, 1 );
+				elements.splice( insertAt, 0, moved );
+			}
+
+			return;
+		}
+
 		if ( isMet && ! isPresent ) {
 			const { modelData, wasStashed } = resolveChildModelData( elementId, rule, stash );
 			const insertAt = resolveInsertIndex( rule.position, elements );
@@ -57,3 +69,7 @@ export function reconcileInitialChildren( {
 
 	attributes.elements = elements;
 }
+
+function isAnchoredPosition( kind: string ): boolean {
+	return kind === 'after_type' || kind === 'before_type';
+}

package/src/index.ts

@@ -35,6 +35,7 @@ export {
 	type DuplicatedElementsResult,
 	type DuplicateElementsParams,
 } from './sync/duplicate-elements';
+export { cloneElementTree } from './sync/clone-element-tree';
 export { generateElementId } from './sync/generate-element-id';
 export { getContainer, selectElement } from './sync/get-container';
 export { getPreviewElementDOM } from './sync/get-preview-element-dom';
@@ -54,7 +55,8 @@ export {
 	getElementChildren as getElementChildrenWithFallback,
 	type ModelResult,
 } from './sync/model-utils';
-export { getElements } from './sync/get-elements';
+export { getElements, getHostDocumentElements } from './sync/get-elements';
+export { getHostDocumentId } from './sync/get-host-document-id';
 export { getSelectedElements } from './sync/get-selected-elements';
 export { getWidgetsCache } from './sync/get-widgets-cache';
 export { moveElement, type MoveElementParams } from './sync/move-element';

package/src/sync/clone-element-tree.ts

@@ -0,0 +1,24 @@
+import { generateElementId } from './generate-element-id';
+import { type BackboneModel, type V1ElementModelProps, type V1ElementSettingsProps } from './types';
+
+type CloneableElement = Partial< V1ElementModelProps > | BackboneModel;
+
+function isBackboneModel( item: CloneableElement ): item is BackboneModel {
+	return 'toJSON' in item && 'get' in item;
+}
+
+export function cloneElementTree( item: CloneableElement ): V1ElementModelProps {
+	const source = isBackboneModel( item ) ? ( item.toJSON() as Partial< V1ElementModelProps > ) : item;
+
+	return {
+		...source,
+		id: generateElementId(),
+		settings: {
+			...( source.settings ?? {} ),
+			_element_id: '',
+		} as V1ElementSettingsProps,
+		elements: ( source.elements ?? [] ).map( ( child ) =>
+			cloneElementTree( child as Partial< V1ElementModelProps > )
+		),
+	} as unknown as V1ElementModelProps;
+}

package/src/sync/get-elements.ts

@@ -1,11 +1,10 @@
 import { type ElementID } from '../types';
 import { getContainer } from './get-container';
 import { getCurrentDocumentContainer } from './get-current-document-container';
+import { getHostDocumentContainer } from './get-host-document-container';
 import { type V1Element } from './types';
 
-export function getElements( root?: ElementID ): V1Element[] {
-	const container = root ? getContainer( root ) : getCurrentDocumentContainer();
-
+function collectElements( container: V1Element | null ): V1Element[] {
 	if ( ! container ) {
 		return [];
 	}
@@ -16,3 +15,13 @@ export function getElements( root?: ElementID ): V1Element[] {
 
 	return [ container, ...children ];
 }
+
+export function getElements( root?: ElementID ): V1Element[] {
+	const container = root ? getContainer( root ) : getCurrentDocumentContainer();
+
+	return collectElements( container );
+}
+
+export function getHostDocumentElements(): V1Element[] {
+	return collectElements( getHostDocumentContainer() );
+}

package/src/sync/get-host-document-container.ts

@@ -0,0 +1,13 @@
+import { getHostDocumentId } from './get-host-document-id';
+import { type ExtendedWindow, type V1Element } from './types';
+
+export function getHostDocumentContainer(): V1Element | null {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const hostId = getHostDocumentId();
+
+	if ( ! hostId ) {
+		return null;
+	}
+
+	return extendedWindow.elementor?.documents?.get?.( hostId )?.container ?? null;
+}

package/src/sync/get-host-document-id.ts

@@ -0,0 +1,11 @@
+import { type ExtendedWindow } from './types';
+
+export function getHostDocumentId() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	try {
+		return extendedWindow.elementor?.documents?.getInitialId?.() ?? null;
+	} catch {
+		return null;
+	}
+}

package/src/sync/resolve-element.ts

@@ -40,7 +40,7 @@ export function findModelInDocument( id: string ): BackboneModel | null {
 export function addModelToParent(
 	parentId: string,
 	childData: V1ElementModelProps,
-	options?: { at?: number }
+	options?: { at?: number; clone?: boolean }
 ): boolean {
 	return getDocumentUtils()?.addModelToParent?.( parentId, childData, options ) ?? false;
 }

package/src/sync/types.ts

@@ -10,7 +10,11 @@ export type ExtendedWindow = Window & {
 			get?: ( name: string ) => {
 				utils?: {
 					findModelById?: ( id: string, collection?: unknown ) => BackboneModel | null;
-					addModelToParent?: ( parentId: string, childData: unknown, options?: { at?: number } ) => boolean;
+					addModelToParent?: (
+						parentId: string,
+						childData: unknown,
+						options?: { at?: number; clone?: boolean }
+					) => boolean;
 					removeModelFromParent?: ( parentId: string, childId: string ) => boolean;
 				};
 			};
@@ -28,6 +32,12 @@ export type ExtendedWindow = Window & {
 				  }
 				| undefined;
 			getCurrentId?: () => number;
+			getInitialId?: () => number;
+			get?: ( id: number ) =>
+				| {
+						container: V1Element;
+				  }
+				| undefined;
 		};
 		getContainer?: ( id: string ) => V1Element | undefined;
 		getPreviewContainer?: () => V1Element | undefined;
@@ -183,6 +193,7 @@ export type V1ElementEditorSettingsProps = {
 	component_uid?: string;
 	grid_outline?: boolean;
 	empty_state_preview?: boolean;
+	decorative?: boolean;
 };
 
 export type V1ElementSettingsProps = Record< string, PropValue >;
@@ -199,6 +210,7 @@ export type V1ElementConfig< T = object, TChild = unknown > = {
 	dependencies_per_target_mapping?: Record< string, string[] >;
 	twig_templates?: Record< string, string >;
 	twig_main_template?: string;
+	template_context?: Record< string, unknown >;
 	base_styles?: Record< string, StyleDefinition >;
 	base_styles_dictionary?: Record< string, string >;
 	base_settings?: Record< string, PropValue >;