@elementor/editor-elements 0.4.1 → 0.5.0

package/src/styles/update-element-style.ts

@@ -0,0 +1,50 @@
+import { type Props } from '@elementor/editor-props';
+import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
+
+import { type ElementID } from '../types';
+import { StyleNotFoundError } from './errors';
+import { mutateElementStyles } from './mutate-element-styles';
+
+export type UpdateElementStyleArgs = {
+	elementId: ElementID;
+	styleId: StyleDefinition[ 'id' ];
+	meta: StyleDefinitionVariant[ 'meta' ];
+	props: StyleDefinitionVariant[ 'props' ];
+};
+
+export function updateElementStyle( args: UpdateElementStyleArgs ) {
+	mutateElementStyles( args.elementId, ( styles ) => {
+		const style = styles[ args.styleId ];
+
+		if ( ! style ) {
+			throw new StyleNotFoundError( { context: { styleId: args.styleId } } );
+		}
+
+		let variant = getVariantByMeta( style, args.meta );
+
+		if ( ! variant ) {
+			variant = { meta: args.meta, props: {} };
+
+			style.variants.push( variant );
+		}
+
+		variant.props = mergeVariantProps( variant, args.props );
+
+		return styles;
+	} );
+}
+
+function mergeVariantProps( variant: StyleDefinitionVariant, props: Props ) {
+	const finalProps = { ...variant.props };
+
+	Object.entries( props ).forEach( ( [ key, value ] ) => {
+		if ( value === null || value === undefined ) {
+			// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+			delete finalProps[ key ];
+		} else {
+			finalProps[ key ] = value;
+		}
+	} );
+
+	return finalProps;
+}

package/src/sync/types.ts

@@ -14,6 +14,7 @@ export type ExtendedWindow = Window & {
 				atomic_controls?: ControlItem[];
 				atomic_props_schema?: PropsSchema;
 				controls: object;
+				base_styles?: StyleDefinition[];
 				title: string;
 			}
 		>;
@@ -31,7 +32,7 @@ export type ExtendedWindow = Window & {
 export type V1Element = {
 	id: string;
 	model: V1Model< V1ElementModelProps >;
-	settings?: V1Model< V1ElementSettingsProps >;
+	settings: V1Model< V1ElementSettingsProps >;
 	children?: V1Element[];
 	view?: {
 		el: HTMLElement;
@@ -50,4 +51,6 @@ export type V1ElementSettingsProps = Record< string, PropValue >;
 
 type V1Model< T > = {
 	get: < K extends keyof T >( key: K ) => T[ K ];
+	set: < K extends keyof T >( key: K, value: T[ K ] ) => void;
+	toJSON: () => T;
 };

package/src/sync/update-element-settings.ts

@@ -0,0 +1,26 @@
+import { type Props } from '@elementor/editor-props';
+import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
+
+import { type ElementID } from '../types';
+import getContainer from './get-container';
+
+export type UpdateElementSettingsArgs = {
+	id: ElementID;
+	props: Props;
+	withHistory?: boolean;
+};
+
+export const updateElementSettings = ( { id, props, withHistory = true }: UpdateElementSettingsArgs ) => {
+	const container = getContainer( id );
+
+	const args = {
+		container,
+		settings: { ...props },
+	};
+
+	if ( withHistory ) {
+		runCommandSync( 'document/elements/settings', args );
+	} else {
+		runCommandSync( 'document/elements/set-settings', args, { internal: true } );
+	}
+};

package/src/sync/update-settings.ts

@@ -1,16 +0,0 @@
-import { type Props } from '@elementor/editor-props';
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-
-import { type ElementID } from '../types';
-import getContainer from './get-container';
-
-export const updateSettings = ( { id, props }: { id: ElementID; props: Props } ) => {
-	const container = getContainer( id );
-
-	runCommand( 'document/elements/settings', {
-		container,
-		settings: {
-			...props,
-		},
-	} );
-};

package/src/sync/update-styles.ts

@@ -1,28 +0,0 @@
-import { type PropKey, type Props } from '@elementor/editor-props';
-import { type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-
-import { type ElementID } from '../types';
-import getContainer from './get-container';
-
-export type UpdateStyleProps = {
-	elementID: ElementID;
-	styleDefID: StyleDefinitionID | null;
-	meta: StyleVariant[ 'meta' ];
-	props: Props;
-	bind: PropKey;
-	label?: string;
-};
-
-export const updateStyle = async ( { elementID, styleDefID, meta, props, bind, label }: UpdateStyleProps ) => {
-	const container = getContainer( elementID );
-
-	await runCommand( 'document/atomic-widgets/styles', {
-		container,
-		styleDefID,
-		bind,
-		meta,
-		props,
-		label,
-	} );
-};