@elementor/editor-variables 0.7.0 → 0.9.0

package/src/hooks/use-prop-variables.ts

@@ -1,57 +1,51 @@
 import { useMemo } from 'react';
+import { type PropKey } from '@elementor/editor-props';
 
-import { type Variable } from '../types';
+import { styleVariablesRepository } from '../style-variables-repository';
+import { type Variable, type Variables } from '../types';
 
-type VariableData = {
-	value: string;
-	label: string;
+export const usePropVariables = ( propKey: PropKey ) => {
+	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
 };
-type Variables = Record< string, VariableData >;
 
-type VariablesGroup = Record< string, Variables >;
-
-export const usePropVariables = ( propTypeKey: string ) => {
-	return useMemo( () => normalizeVariables( propTypeKey ), [ propTypeKey ] );
-};
-
-export const useVariable = ( propTypeKey: string, key: string ) => {
-	if ( ! variables[ propTypeKey ]?.[ key ] ) {
+export const useVariable = ( key: string ) => {
+	if ( ! variables?.[ key ] ) {
 		return null;
 	}
 
 	return {
-		...variables[ propTypeKey ][ key ],
+		...variables[ key ],
 		key,
 	};
 };
 
-const normalizeVariables = ( propTypeKey: string ) => {
-	return Object.entries( variables[ propTypeKey ] || {} ).map( ( [ key, { label, value } ] ) => ( {
-		key,
-		label,
-		value,
-	} ) );
+const normalizeVariables = ( propKey: string ) => {
+	return Object.entries( variables )
+		.filter( ( [ , { type } ] ) => type === propKey )
+		.map( ( [ key, { label, value } ] ) => ( {
+			key,
+			label,
+			value,
+		} ) );
 };
 
-export const createVariable = ( propTypeKey: string, variable: VariableData ) => {
-	const id = generateId( 'e-gv', Object.keys( variables[ propTypeKey ] ).length );
+export const createVariable = ( variable: Variable ) => {
+	const id = generateId();
 
-	const newVariable: Variable = {
-		value: variable.value,
-		label: variable.label,
-		key: propTypeKey,
-	};
+	variables[ id ] = variable;
 
-	variables[ propTypeKey ][ id ] = newVariable || {};
+	styleVariablesRepository.update( {
+		[ id ]: variable,
+	} );
 
 	return id;
 };
 
 // @ts-expect-error the temporary solution to get the list of variables from the server
-const variables: VariablesGroup = window?.ElementorV4Variables || {};
+const variables: Variables = window?.ElementorV4Variables || {};
 
-const generateId = ( prefix: string, variablesCount: number ) => {
+const generateId = ( prefix = 'e-gv' ) => {
 	const randomHex = Math.random().toString( 16 ).slice( 2, 9 );
 
-	return `${ prefix }${ randomHex }${ variablesCount }`;
+	return `${ prefix }${ randomHex }`;
 };

package/src/init.ts

@@ -1,8 +1,16 @@
+import { injectIntoTop } from '@elementor/editor';
+
 import { initColorVariables } from './init-color-variables';
 import { initFontVariables } from './init-font-variables';
+import { StyleVariablesRenderer } from './renderers/style-variables-renderer';
 
 export function init() {
 	initColorVariables();
 
 	initFontVariables();
+
+	injectIntoTop( {
+		id: 'canvas-style-variables-render',
+		component: StyleVariablesRenderer,
+	} );
 }

package/src/renderers/style-variables-renderer.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { Portal } from '@elementor/ui';
+
+import { styleVariablesRepository } from '../style-variables-repository';
+import { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';
+import { type StyleVariables } from '../types';
+
+const VARIABLES_WRAPPER = 'body';
+
+export function StyleVariablesRenderer() {
+	const container = usePortalContainer();
+	const styleVariables = useStyleVariables();
+
+	const hasVariables = Object.keys( styleVariables ).length > 0;
+
+	if ( ! container || ! hasVariables ) {
+		return null;
+	}
+
+	const cssVariables = convertToCssVariables( styleVariables );
+	const wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;
+
+	return (
+		<Portal container={ container }>
+			<style data-e-style-id="e-variables" key={ wrappedCss }>
+				{ wrappedCss }
+			</style>
+		</Portal>
+	);
+}
+
+function usePortalContainer() {
+	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );
+}
+
+function useStyleVariables() {
+	const [ variables, setVariables ] = useState< StyleVariables >( {} );
+
+	useEffect( () => {
+		const unsubscribe = styleVariablesRepository.subscribe( setVariables );
+
+		return () => {
+			unsubscribe();
+		};
+	}, [] );
+
+	return variables;
+}
+
+function convertToCssVariables( variables: StyleVariables ): string {
+	return Object.entries( variables )
+		.map( ( [ key, value ] ) => `--${ key }:${ value };` )
+		.join( '' );
+}

package/src/style-variables-repository.ts

@@ -0,0 +1,3 @@
+import { createStyleVariablesRepository } from './create-style-variables-repository';
+
+export const styleVariablesRepository = createStyleVariablesRepository();

package/src/sync/get-canvas-iframe-document.ts

@@ -0,0 +1,7 @@
+import type { CanvasExtendedWindow } from './types';
+
+export function getCanvasIframeDocument() {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;
+}

package/src/sync/types.ts

@@ -0,0 +1,5 @@
+export type CanvasExtendedWindow = Window & {
+	elementor?: {
+		$preview?: [ HTMLIFrameElement ];
+	};
+};

package/src/types.ts

@@ -1,5 +1,15 @@
+export type VariableKey = string;
+
+export type VariableValue = string;
+
 export type Variable = {
-	value: string;
+	value: VariableValue;
 	label: string;
-	key: string;
+	type: string;
 };
+
+export type Variables = {
+	[ key: VariableKey ]: Variable;
+};
+
+export type StyleVariables = Record< VariableKey, VariableValue >;