@elementor/editor-variables 4.2.0-842 → 4.2.0-843

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.2.0-842",
+  "version": "4.2.0-843",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-842",
-    "@elementor/editor-canvas": "4.2.0-842",
-    "@elementor/editor-controls": "4.2.0-842",
-    "@elementor/editor-current-user": "4.2.0-842",
-    "@elementor/editor-mcp": "4.2.0-842",
-    "@elementor/editor-panels": "4.2.0-842",
-    "@elementor/editor-props": "4.2.0-842",
-    "@elementor/editor-ui": "4.2.0-842",
-    "@elementor/editor-v1-adapters": "4.2.0-842",
-    "@elementor/menus": "4.2.0-842",
-    "@elementor/http-client": "4.2.0-842",
+    "@elementor/editor": "4.2.0-843",
+    "@elementor/editor-canvas": "4.2.0-843",
+    "@elementor/editor-controls": "4.2.0-843",
+    "@elementor/editor-current-user": "4.2.0-843",
+    "@elementor/editor-mcp": "4.2.0-843",
+    "@elementor/editor-panels": "4.2.0-843",
+    "@elementor/editor-props": "4.2.0-843",
+    "@elementor/editor-ui": "4.2.0-843",
+    "@elementor/editor-v1-adapters": "4.2.0-843",
+    "@elementor/menus": "4.2.0-843",
+    "@elementor/http-client": "4.2.0-843",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.2.0-842",
-    "@elementor/schema": "4.2.0-842",
+    "@elementor/events": "4.2.0-843",
+    "@elementor/schema": "4.2.0-843",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-842",
+    "@elementor/utils": "4.2.0-843",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/global-styles-import-listener.tsx

@@ -2,28 +2,17 @@ import { useEffect } from 'react';
 import { GLOBAL_STYLES_IMPORTED_EVENT } from '@elementor/editor-canvas';
 
 import { service } from '../service';
-import { styleVariablesRepository } from '../style-variables-repository';
 
 export function GlobalStylesImportListener() {
 	useEffect( () => {
-		const handleGlobalStylesImported = ( event: CustomEvent ) => {
-			const importedVars = event.detail?.global_variables;
-
-			if ( ! importedVars ) {
-				return;
-			}
-
-			if ( importedVars.data && typeof importedVars.data === 'object' ) {
-				styleVariablesRepository.update( importedVars.data );
-			}
-
+		const handleGlobalStylesImported = () => {
 			service.load();
 		};
 
-		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
+		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported );
 
 		return () => {
-			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
+			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported );
 		};
 	}, [] );
 

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -1,9 +1,9 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { generateTempId } from '../../../batch-operations';
 import { getVariables } from '../../../hooks/use-prop-variables';
 import { service } from '../../../service';
-import { type TVariablesList } from '../../../storage';
+import { STORAGE_UPDATED_EVENT, type TVariablesList } from '../../../storage';
 import { generateDuplicateLabel } from '../../../utils/duplicate-label';
 import { filterBySearch } from '../../../utils/filter-by-search';
 import { applySelectionFilters, variablesToList } from '../../../utils/variables-to-list';
@@ -17,6 +17,20 @@ export const useVariablesManagerState = () => {
 	const [ isSaving, setIsSaving ] = useState( false );
 	const [ searchValue, setSearchValue ] = useState( '' );
 
+	useEffect( () => {
+		const handleStorageUpdated = () => {
+			setVariables( getVariables( false ) );
+			setDeletedVariables( [] );
+			setIsDirty( false );
+		};
+
+		window.addEventListener( STORAGE_UPDATED_EVENT, handleStorageUpdated );
+
+		return () => {
+			window.removeEventListener( STORAGE_UPDATED_EVENT, handleStorageUpdated );
+		};
+	}, [] );
+
 	const handleOnChange = useCallback(
 		( newVariables: TVariablesList ) => {
 			setVariables( { ...variables, ...newVariables } );

package/src/mcp/variables-resource.ts

@@ -2,7 +2,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 
 import { service } from '../service';
-import { type TVariable } from '../storage';
+import { STORAGE_UPDATED_EVENT, type TVariable } from '../storage';
 
 export const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
 
@@ -47,7 +47,7 @@ export const initVariablesResource = ( variablesMcpEntry: MCPRegistryEntry, canv
 			}
 		);
 
-		window.addEventListener( 'variables:updated', notifyGlobalVariablesUpdated );
+		window.addEventListener( STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated );
 
 		listenTo( commandEndEvent( 'document/save/update' ), notifyGlobalVariablesUpdated );
 	} );

package/src/storage.ts

@@ -13,6 +13,8 @@ export type TVariablesList = Record< string, TVariable >;
 const STORAGE_KEY = 'elementor-global-variables';
 const STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';
 
+export const STORAGE_UPDATED_EVENT = 'variables:updated';
+
 export const OP_RW = 'RW';
 const OP_RO = 'RO';
 
@@ -23,7 +25,7 @@ export class Storage {
 	};
 
 	notifyChange() {
-		window.dispatchEvent( new Event( 'variables:updated' ) );
+		window.dispatchEvent( new Event( STORAGE_UPDATED_EVENT ) );
 	}
 
 	constructor() {