@elementor/editor-elements 0.5.0 → 0.5.2

package/src/styles/mutate-element-styles.ts

@@ -1,14 +1,15 @@
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
 
+import { ElementNotFoundError } from '../errors';
 import getContainer from '../sync/get-container';
 import { type V1Element } from '../sync/types';
 import { updateElementSettings } from '../sync/update-element-settings';
 import { type ElementID } from '../types';
 import { ELEMENT_STYLE_CHANGE_EVENT } from './consts';
-import { ElementNotFoundError } from './errors';
 
-export type Mutator = ( styles: StyleDefinitionsMap ) => StyleDefinitionsMap;
+type Mutator = ( styles: StyleDefinitionsMap ) => StyleDefinitionsMap;
 
 export function mutateElementStyles( elementId: ElementID, mutator: Mutator ) {
 	const container = getContainer( elementId );
@@ -17,11 +18,18 @@ export function mutateElementStyles( elementId: ElementID, mutator: Mutator ) {
 		throw new ElementNotFoundError( { context: { elementId } } );
 	}
 
+	const oldIds = Object.keys( container.model.get( 'styles' ) ?? {} );
+
 	const styles = mutateStyles( container, mutator );
 
-	removeNonExistingClasses( container, styles );
+	const newIds = Object.keys( styles );
 
-	dispatchChangeEvent();
+	clearRemovedClasses( container, {
+		oldIds,
+		newIds,
+	} );
+
+	notifyChanges();
 
 	return styles;
 }
@@ -54,12 +62,12 @@ function isStyleEmpty( style: StyleDefinition ) {
 	return style.variants.length === 0;
 }
 
-function removeNonExistingClasses( container: V1Element, styles: StyleDefinitionsMap ) {
-	const existingStylesIds = Object.keys( styles );
+function clearRemovedClasses( container: V1Element, { oldIds, newIds }: { oldIds: string[]; newIds: string[] } ) {
+	const removedIds = oldIds.filter( ( id ) => ! newIds.includes( id ) );
 	const classesProps = structuredClone( getClassesProps( container ) );
 
 	classesProps.forEach( ( [ , prop ] ) => {
-		prop.value = prop.value.filter( ( value ) => existingStylesIds.includes( value ) );
+		prop.value = prop.value.filter( ( value ) => ! removedIds.includes( value ) );
 	} );
 
 	updateElementSettings( {
@@ -77,6 +85,11 @@ function getClassesProps( container: V1Element ) {
 	} );
 }
 
+function notifyChanges() {
+	dispatchChangeEvent();
+	runCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );
+}
+
 function dispatchChangeEvent() {
 	window.dispatchEvent( new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ) );
 }

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

@@ -1,8 +1,8 @@
-import { type Props } from '@elementor/editor-props';
+import { mergeProps } from '@elementor/editor-props';
 import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
+import { StyleNotFoundError } from '../errors';
 import { type ElementID } from '../types';
-import { StyleNotFoundError } from './errors';
 import { mutateElementStyles } from './mutate-element-styles';
 
 export type UpdateElementStyleArgs = {
@@ -20,31 +20,14 @@ export function updateElementStyle( args: UpdateElementStyleArgs ) {
 			throw new StyleNotFoundError( { context: { styleId: args.styleId } } );
 		}
 
-		let variant = getVariantByMeta( style, args.meta );
+		const variant = getVariantByMeta( style, args.meta );
 
-		if ( ! variant ) {
-			variant = { meta: args.meta, props: {} };
-
-			style.variants.push( variant );
+		if ( variant ) {
+			variant.props = mergeProps( variant.props, args.props );
+		} else {
+			style.variants.push( { meta: args.meta, props: args.props } );
 		}
 
-		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/get-element-label.ts

@@ -0,0 +1,22 @@
+import { ElementLabelNotExistsError, ElementTypeNotExistsError } from '../errors';
+import getContainer from '../sync/get-container';
+import { getWidgetsCache } from '../sync/get-widgets-cache';
+import { type ElementID } from '../types';
+
+export function getElementLabel( elementId: ElementID ) {
+	const container = getContainer( elementId );
+
+	const type = container?.model.get( 'widgetType' ) || container?.model.get( 'elType' );
+
+	if ( ! type ) {
+		throw new ElementTypeNotExistsError( { context: { elementId } } );
+	}
+
+	const label = getWidgetsCache()?.[ type ]?.title;
+
+	if ( ! label ) {
+		throw new ElementLabelNotExistsError( { context: { elementType: type } } );
+	}
+
+	return label;
+}

package/src/sync/types.ts

@@ -1,7 +1,7 @@
-import { type PropValue } from '@elementor/editor-props';
+import { type PropsSchema, type PropValue } from '@elementor/editor-props';
 import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 
-import { type ControlItem, type PropsSchema } from '../types';
+import { type ControlItem } from '../types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -14,7 +14,7 @@ export type ExtendedWindow = Window & {
 				atomic_controls?: ControlItem[];
 				atomic_props_schema?: PropsSchema;
 				controls: object;
-				base_styles?: StyleDefinition[];
+				base_styles?: Record< string, StyleDefinition >;
 				title: string;
 			}
 		>;

package/src/types.ts

@@ -1,4 +1,4 @@
-import { type PropType } from '@elementor/editor-props';
+import { type PropsSchema } from '@elementor/editor-props';
 
 export type ElementID = string;
 
@@ -35,5 +35,3 @@ export type Control = {
 };
 
 export type ControlItem = ControlsSection | Control;
-
-export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;

package/src/hooks/use-element-style-props.ts

@@ -1,49 +0,0 @@
-import { type Props } from '@elementor/editor-props';
-import { getVariantByMeta, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';
-import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
-
-import { ELEMENT_STYLE_CHANGE_EVENT } from '../styles/consts';
-import { getElementStyles } from '../sync/get-element-styles';
-import { type ElementID } from '../types';
-
-export type UseElementStylePropsArgs< T extends Props > = {
-	elementID: ElementID;
-	styleDefID: StyleDefinitionID | null;
-	meta: StyleDefinitionVariant[ 'meta' ];
-	propNames: Array< keyof T & string >;
-};
-
-type NullableObjectValues< T extends Props > = {
-	[ K in keyof T ]: T[ K ] | null;
-};
-
-export function useElementStyleProps< T extends Props >( {
-	elementID,
-	styleDefID,
-	meta,
-	propNames,
-}: UseElementStylePropsArgs< T > ): NullableObjectValues< T > | null {
-	return useListenTo(
-		windowEvent( ELEMENT_STYLE_CHANGE_EVENT ),
-		() => {
-			if ( ! styleDefID ) {
-				return null;
-			}
-
-			const styleDef = getElementStyles( elementID )?.[ styleDefID ];
-
-			if ( ! styleDef ) {
-				return null;
-			}
-
-			const variant = getVariantByMeta( styleDef, meta );
-
-			return propNames.reduce< Record< string, unknown > >( ( acc, key ) => {
-				acc[ key ] = variant?.props[ key ] ?? null;
-
-				return acc;
-			}, {} ) as NullableObjectValues< T >;
-		},
-		[ elementID, styleDefID, JSON.stringify( propNames ), meta ]
-	);
-}

package/src/styles/errors.ts

@@ -1,11 +0,0 @@
-import { createError } from '@elementor/utils';
-
-export const ElementNotFoundError = createError< { elementId: string } >( {
-	code: 'element_not_found',
-	message: 'Element not found.',
-} );
-
-export const StyleNotFoundError = createError< { styleId: string } >( {
-	code: 'style_not_found',
-	message: 'Style not found.',
-} );