@elementor/editor-editing-panel 1.17.1 → 1.19.0

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { ELEMENTS_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { styled } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useStyle } from '../contexts/style-context';
+import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
+import { useStylesField } from '../hooks/use-styles-field';
+
+const Circle = styled( 'div', {
+	shouldForwardProp: ( prop ) => prop !== 'variant',
+} )< { variant?: 'overridden' | 'local-affects' | 'global-affects' } >`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background-color: ${ ( { theme, variant } ) => {
+		switch ( variant ) {
+			case 'overridden':
+				return theme.palette.warning.main;
+			case 'global-affects':
+				return theme.palette.global.main;
+			case 'local-affects':
+				return theme.palette.primary.main;
+			default:
+				return theme.palette.text.secondary;
+		}
+	} };
+`;
+
+export const StylesInheritanceIndicator = () => {
+	const { bind } = useBoundProp();
+	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
+	const [ value ] = useStylesField( bind );
+	const inheritanceChain = useStylesInheritanceField( bind );
+
+	if ( ! inheritanceChain.length ) {
+		return null;
+	}
+
+	const [ { styleId, styleVariant } ] = inheritanceChain;
+
+	const { breakpoint, state } = styleVariant.meta;
+
+	if (
+		styleId === currentStyleId &&
+		breakpoint === currentStyleMeta.breakpoint &&
+		state === currentStyleMeta.state
+	) {
+		return (
+			<Circle
+				aria-label={ __( 'This is the final value', 'elementor' ) }
+				variant={
+					currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY ? 'local-affects' : 'global-affects'
+				}
+			/>
+		);
+	}
+
+	if ( value !== null && value !== undefined ) {
+		return (
+			<Circle
+				aria-label={ __( 'This value is overridden by another style', 'elementor' ) }
+				variant="overridden"
+			/>
+		);
+	}
+
+	return <Circle aria-label={ __( 'This has value from another style', 'elementor' ) } />;
+};

package/src/sync/types.ts

@@ -1,7 +1,7 @@
 import { type ControlItem, type V1Element } from '@elementor/editor-elements';
 import { type PropsSchema } from '@elementor/editor-props';
 
-type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+export type SupportedFonts = 'system' | 'googlefonts' | 'custom';
 
 type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 

package/src/hooks/use-close-editor-panel.ts

@@ -1,23 +0,0 @@
-import { useEffect } from 'react';
-import { getSelectedElements, isElementInContainer, type V1Element } from '@elementor/editor-elements';
-import { __privateListenTo as listenTo, type CommandEvent, commandStartEvent } from '@elementor/editor-v1-adapters';
-
-import { usePanelActions } from '../panel';
-import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
-
-export const useCloseEditorPanel = () => {
-	const { close } = usePanelActions();
-
-	return useEffect( () => {
-		return listenTo( commandStartEvent( 'document/elements/delete' ), ( e ) => {
-			const selectedElement = getSelectedElements()[ 0 ];
-			const { container: deletedContainer } = ( e as CommandEvent< { container: V1Element } > )?.args;
-			const isSelectedElementInDeletedContainer =
-				deletedContainer && selectedElement && isElementInContainer( selectedElement, deletedContainer );
-
-			if ( isSelectedElementInDeletedContainer && isAtomicWidgetSelected() ) {
-				close();
-			}
-		} );
-	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
-};