@elementor/editor-components 4.0.0-604 → 4.0.0-607

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-604",
+  "version": "4.0.0-607",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-604",
-    "@elementor/editor-canvas": "4.0.0-604",
-    "@elementor/editor-controls": "4.0.0-604",
-    "@elementor/editor-documents": "4.0.0-604",
-    "@elementor/editor-editing-panel": "4.0.0-604",
-    "@elementor/editor-elements": "4.0.0-604",
-    "@elementor/editor-elements-panel": "4.0.0-604",
-    "@elementor/editor-mcp": "4.0.0-604",
-    "@elementor/editor-templates": "4.0.0-604",
-    "@elementor/editor-panels": "4.0.0-604",
-    "@elementor/editor-props": "4.0.0-604",
-    "@elementor/editor-styles-repository": "4.0.0-604",
-    "@elementor/editor-ui": "4.0.0-604",
-    "@elementor/editor-v1-adapters": "4.0.0-604",
-    "@elementor/http-client": "4.0.0-604",
+    "@elementor/editor": "4.0.0-607",
+    "@elementor/editor-canvas": "4.0.0-607",
+    "@elementor/editor-controls": "4.0.0-607",
+    "@elementor/editor-documents": "4.0.0-607",
+    "@elementor/editor-editing-panel": "4.0.0-607",
+    "@elementor/editor-elements": "4.0.0-607",
+    "@elementor/editor-elements-panel": "4.0.0-607",
+    "@elementor/editor-mcp": "4.0.0-607",
+    "@elementor/editor-templates": "4.0.0-607",
+    "@elementor/editor-panels": "4.0.0-607",
+    "@elementor/editor-props": "4.0.0-607",
+    "@elementor/editor-styles-repository": "4.0.0-607",
+    "@elementor/editor-ui": "4.0.0-607",
+    "@elementor/editor-v1-adapters": "4.0.0-607",
+    "@elementor/http-client": "4.0.0-607",
     "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-604",
-    "@elementor/query": "4.0.0-604",
-    "@elementor/schema": "4.0.0-604",
-    "@elementor/store": "4.0.0-604",
+    "@elementor/events": "4.0.0-607",
+    "@elementor/query": "4.0.0-607",
+    "@elementor/schema": "4.0.0-607",
+    "@elementor/store": "4.0.0-607",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-604",
+    "@elementor/utils": "4.0.0-607",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-604",
-    "@elementor/editor-current-user": "4.0.0-604"
+    "@elementor/editor-notifications": "4.0.0-607",
+    "@elementor/editor-current-user": "4.0.0-607"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/extended/init.ts

@@ -1,4 +1,4 @@
-import { injectIntoTop } from '@elementor/editor';
+import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { registerControlReplacement } from '@elementor/editor-controls';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
 import { FIELD_TYPE, injectIntoPanelHeaderTop, registerFieldIndicator } from '@elementor/editor-editing-panel';
@@ -21,6 +21,7 @@ import { initCleanupOverridablePropsOnDelete } from './sync/cleanup-overridable-
 import { initHandleComponentEditModeContainer } from './sync/handle-component-edit-mode-container';
 import { initNonAtomicNestingPrevention } from './sync/prevent-non-atomic-nesting';
 import { initRevertOverridablesOnCopyOrDuplicate } from './sync/revert-overridables-on-copy-or-duplicate';
+import { SanitizeOverridableProps } from './sync/sanitize-overridable-props';
 
 export function initExtended() {
 	registerPanel( componentPropertiesPanel );
@@ -74,4 +75,9 @@ export function initExtended() {
 	initHandleComponentEditModeContainer();
 
 	initRevertOverridablesOnCopyOrDuplicate();
+
+	injectIntoLogic( {
+		id: 'sanitize-overridable-props',
+		component: SanitizeOverridableProps,
+	} );
 }

package/src/extended/sync/sanitize-overridable-props.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+import { useCurrentComponentId, useIsSanitizedComponent, useOverridableProps } from '../../store/store';
+import { filterValidOverridableProps } from '../../utils/filter-valid-overridable-props';
+import { deleteOverridableProp } from '../store/actions/delete-overridable-prop';
+import { updateComponentSanitizedAttribute } from '../store/actions/update-component-sanitized-attribute';
+
+export function SanitizeOverridableProps() {
+	const currentComponentId = useCurrentComponentId();
+	const overridableProps = useOverridableProps( currentComponentId );
+	const isSanitized = useIsSanitizedComponent( currentComponentId, 'overridableProps' );
+
+	useEffect( () => {
+		if ( isSanitized || ! overridableProps || ! currentComponentId ) {
+			return;
+		}
+
+		const filtered = filterValidOverridableProps( overridableProps );
+
+		const propsToDelete = Object.keys( overridableProps.props ?? {} ).filter( ( key ) => ! filtered.props[ key ] );
+
+		if ( propsToDelete.length > 0 ) {
+			propsToDelete.forEach( ( key ) => {
+				deleteOverridableProp( { componentId: currentComponentId, propKey: key, source: 'system' } );
+			} );
+		}
+
+		updateComponentSanitizedAttribute( currentComponentId, 'overridableProps' );
+	}, [ currentComponentId, isSanitized, overridableProps ] );
+
+	return null;
+}

package/src/hooks/use-sanitize-overridable-props.ts

@@ -1,14 +1,12 @@
-import { deleteOverridableProp } from '../extended/store/actions/delete-overridable-prop';
-import { updateComponentSanitizedAttribute } from '../extended/store/actions/update-component-sanitized-attribute';
 import { useIsSanitizedComponent, useOverridableProps } from '../store/store';
 import { type ComponentId, type OverridableProps } from '../types';
 import { filterValidOverridableProps } from '../utils/filter-valid-overridable-props';
 
 export function useSanitizeOverridableProps(
 	componentId: ComponentId | null,
+	instanceElementId?: string
 	// instanceElementId is used to find the component inner elements,
 	// and should be passed when editing component instance (not in component edit mode)
-	instanceElementId?: string
 ): OverridableProps | undefined {
 	const overridableProps = useOverridableProps( componentId );
 	const isSanitized = useIsSanitizedComponent( componentId, 'overridableProps' );
@@ -21,16 +19,5 @@ export function useSanitizeOverridableProps(
 		return overridableProps;
 	}
 
-	const filteredOverridableProps = filterValidOverridableProps( overridableProps, instanceElementId );
-
-	const originalPropsArray = Object.entries( overridableProps.props ?? {} );
-	const propsToDelete = originalPropsArray.filter( ( [ key ] ) => ! filteredOverridableProps.props[ key ] );
-
-	propsToDelete.forEach( ( [ key ] ) => {
-		deleteOverridableProp( { componentId, propKey: key, source: 'system' } );
-	} );
-
-	updateComponentSanitizedAttribute( componentId, 'overridableProps' );
-
-	return filteredOverridableProps;
+	return filterValidOverridableProps( overridableProps, instanceElementId );
 }