@elementor/editor-editing-panel 0.18.0 → 1.0.0

package/src/controls/control-types/color-control.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { UnstableColorPicker, UnstableColorPickerProps } from '@elementor/ui';
-import { useControl } from '../control-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-import { TransformablePropValue } from '../../types';
-
-export type ColorPropValue = TransformablePropValue< 'color', string >;
-
-export const ColorControl = createControl(
-	( props: Partial< Omit< UnstableColorPickerProps, 'value' | 'onChange' > > ) => {
-		const { value, setValue } = useControl< ColorPropValue >();
-
-		const handleChange = ( selectedColor: string ) => {
-			setValue( {
-				$$type: 'color',
-				value: selectedColor,
-			} );
-		};
-
-		return (
-			<ControlActions>
-				<UnstableColorPicker size="tiny" { ...props } value={ value?.value } onChange={ handleChange } />
-			</ControlActions>
-		);
-	}
-);

package/src/controls/hooks/use-style-control.ts

@@ -1,29 +0,0 @@
-import { useElementContext } from '../../contexts/element-context';
-import { useStyleContext } from '../../contexts/style-context';
-import { useElementStyleProp } from '../../hooks/use-element-style-prop';
-import { updateStyle } from '../../sync/update-style';
-import { PropKey, PropValue } from '../../types';
-
-export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
-	const { element } = useElementContext();
-	const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
-
-	const value = useElementStyleProp< T >( {
-		elementID: element.id,
-		styleDefID: selectedStyleDef?.id,
-		meta: selectedMeta,
-		propName,
-	} );
-
-	const setValue = ( newValue: T ) => {
-		updateStyle( {
-			elementID: element.id,
-			styleDefID: selectedStyleDef?.id,
-			props: { [ propName ]: newValue },
-			meta: selectedMeta,
-			bind: selectedClassesProp,
-		} );
-	};
-
-	return [ value, setValue ] as const;
-};

package/src/controls/settings-control.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { ControlContext } from './control-context';
-import { PropKey, PropValue } from '../types';
-import { useElementContext } from '../contexts/element-context';
-import { useWidgetSettings } from '../hooks/use-widget-settings';
-import { updateSettings } from '../sync/update-settings';
-import { ControlLabel } from '../components/control-label';
-
-type Props = {
-	bind: PropKey;
-	children: React.ReactNode;
-};
-
-const SettingsControl = ( { bind, children }: Props ) => {
-	const { element, elementType } = useElementContext();
-
-	const defaultValue = elementType.propsSchema[ bind ]?.default;
-	const settingsValue = useWidgetSettings( { id: element.id, bind } );
-	const value = settingsValue ?? defaultValue ?? null;
-
-	const setValue = ( newValue: PropValue ) => {
-		updateSettings( {
-			id: element.id,
-			props: {
-				[ bind ]: newValue,
-			},
-		} );
-	};
-
-	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
-};
-
-// TODO: When we start using useControl inside the label component, we should create a new component for it,
-// and keep ControlLabel as a simple label component without context.
-SettingsControl.Label = ControlLabel;
-
-export { SettingsControl };

package/src/controls/style-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { PropKey } from '../types';
-import { ControlContext } from '../controls/control-context';
-import { ControlLabel } from '../components/control-label';
-import { useStyleControl } from './hooks/use-style-control';
-
-export type StyleControlProps = {
-	bind: PropKey;
-	children: React.ReactNode;
-};
-
-export const StyleControl = ( { bind, children }: StyleControlProps ) => {
-	const [ value, setValue ] = useStyleControl( bind );
-
-	return <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;
-};
-
-// TODO: When we start using useControl inside the label component, we should create a new component for it,
-// and keep ControlLabel as a simple label component without context.
-StyleControl.Label = ControlLabel;

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

@@ -1,45 +0,0 @@
-import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
-import { ElementID, PropKey, PropValue } from '../types';
-import { getElementStyles } from '../sync/get-element-styles';
-import { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';
-
-export type UseElementStylePropArgs = {
-	elementID: ElementID;
-	styleDefID?: StyleDefinitionID;
-	meta: StyleVariant[ 'meta' ];
-	propName: PropKey;
-};
-
-export const useElementStyleProp = < T extends PropValue >( {
-	elementID,
-	styleDefID,
-	meta,
-	propName,
-}: UseElementStylePropArgs ): T | null => {
-	return useListenTo(
-		commandEndEvent( 'document/atomic-widgets/styles' ),
-		() => {
-			// TODO: return default value for style prop
-			if ( ! styleDefID ) {
-				return null;
-			}
-
-			const styleDef = getElementStyles( elementID )?.[ styleDefID ];
-
-			if ( ! styleDef ) {
-				return null;
-			}
-
-			const variant = getVariantByMeta( styleDef, meta );
-
-			return variant?.props[ propName ] ?? null;
-		},
-		[ elementID, styleDefID, propName, meta ]
-	) as T;
-};
-
-function getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {
-	return styleDef.variants.find( ( variant ) => {
-		return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
-	} );
-}

package/src/hooks/use-element-styles.ts

@@ -1,13 +0,0 @@
-import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
-import { getElementStyles } from '../sync/get-element-styles';
-import { ElementID } from '../types';
-
-export const useElementStyles = ( elementID: ElementID ) => {
-	return useListenTo(
-		commandEndEvent( 'document/atomic-widgets/styles' ),
-		() => {
-			return getElementStyles( elementID );
-		},
-		[ elementID ]
-	);
-};

package/src/hooks/use-element-type.ts

@@ -1,33 +0,0 @@
-import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
-import getWidgetsCache from '../sync/get-widgets-cache';
-import { ElementType } from '../types';
-
-export default function useElementType( type?: string ) {
-	return useListenTo(
-		commandEndEvent( 'editor/documents/load' ),
-		(): ElementType | null => {
-			if ( ! type ) {
-				return null;
-			}
-
-			const widgetsCache = getWidgetsCache();
-			const elementType = widgetsCache?.[ type ];
-
-			if ( ! elementType?.atomic_controls ) {
-				return null;
-			}
-
-			if ( ! elementType?.atomic_props_schema ) {
-				return null;
-			}
-
-			return {
-				key: type,
-				controls: elementType.atomic_controls,
-				propsSchema: elementType.atomic_props_schema,
-				title: elementType.title,
-			};
-		},
-		[ type ]
-	);
-}

package/src/hooks/use-selected-elements.ts

@@ -1,9 +0,0 @@
-import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
-import getSelectedElements from '../sync/get-selected-elements';
-
-export default function useSelectedElements() {
-	return useListenTo(
-		[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],
-		() => getSelectedElements()
-	);
-}

package/src/hooks/use-widget-settings.ts

@@ -1,16 +0,0 @@
-import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
-import { PropValue } from '../types';
-import getContainer from '../sync/get-container';
-
-export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {
-	return useListenTo(
-		commandEndEvent( 'document/elements/settings' ),
-		() => {
-			const container = getContainer( id );
-			const value = container?.settings?.get( bind ) ?? null;
-
-			return value;
-		},
-		[ id, bind ]
-	);
-};

package/src/props/is-transformable.ts

@@ -1,14 +0,0 @@
-import { z } from '@elementor/schema';
-
-// TODO: Move this file content a shared package.
-
-export const transformableSchema = z.object( {
-	$$type: z.string(),
-	value: z.any(),
-} );
-
-export type TransformablePropValue = z.infer< typeof transformableSchema >;
-
-export const isTransformable = ( value: unknown ): value is TransformablePropValue => {
-	return transformableSchema.safeParse( value ).success;
-};

package/src/sync/get-container.ts

@@ -1,8 +0,0 @@
-import { ExtendedWindow } from './types';
-
-export default function getContainer( id: string ) {
-	const extendedWindow = window as unknown as ExtendedWindow;
-	const container = extendedWindow.elementor?.getContainer?.( id );
-
-	return container ?? null;
-}

package/src/sync/get-element-styles.ts

@@ -1,9 +0,0 @@
-import getContainer from './get-container';
-import { ElementID } from '../types';
-import { StyleDefinition } from '@elementor/editor-style';
-
-export const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {
-	const container = getContainer( elementID );
-
-	return container?.model.get( 'styles' ) || null;
-};

package/src/sync/get-selected-elements.ts

@@ -1,21 +0,0 @@
-import { ExtendedWindow } from './types';
-import { Element } from '../types';
-
-export default function getSelectedElements(): Element[] {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
-
-	return selectedElements.reduce< Element[] >( ( acc, el ) => {
-		const type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );
-
-		if ( type ) {
-			acc.push( {
-				id: el.model.get( 'id' ),
-				type,
-			} );
-		}
-
-		return acc;
-	}, [] );
-}

package/src/sync/get-widgets-cache.ts

@@ -1,7 +0,0 @@
-import { ExtendedWindow } from './types';
-
-export default function getWidgetsCache() {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow?.elementor?.widgetsCache || null;
-}

package/src/sync/update-settings.ts

@@ -1,14 +0,0 @@
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { Props } from '../types';
-import getContainer from './get-container';
-
-export const updateSettings = ( { id, props }: { id: string; props: Props } ) => {
-	const container = getContainer( id );
-
-	runCommand( 'document/elements/settings', {
-		container,
-		settings: {
-			...props,
-		},
-	} );
-};

package/src/sync/update-style.ts

@@ -1,24 +0,0 @@
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { ElementID, PropKey, Props } from '../types';
-import getContainer from './get-container';
-import { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';
-
-export type UpdateStyleProps = {
-	elementID: ElementID;
-	styleDefID?: StyleDefinitionID;
-	meta: StyleVariant[ 'meta' ];
-	props: Props;
-	bind: PropKey;
-};
-
-export const updateStyle = ( { elementID, styleDefID, meta, props, bind }: UpdateStyleProps ) => {
-	const container = getContainer( elementID );
-
-	runCommand( 'document/atomic-widgets/styles', {
-		container,
-		styleDefID,
-		bind,
-		meta,
-		props,
-	} );
-};

package/src/types.ts

@@ -1,89 +0,0 @@
-export type ElementID = string;
-
-export type Element = {
-	id: ElementID;
-	type: string;
-};
-
-export type ElementType = {
-	key: string;
-	controls: ControlItem[];
-	propsSchema: PropsSchema;
-	title: string;
-};
-
-export type ControlsSection = {
-	type: 'section';
-	value: {
-		description?: string;
-		label: string;
-		items: ControlItem[];
-	};
-};
-
-export type Control = {
-	type: 'control';
-	value: {
-		bind: string;
-		label?: string;
-		description?: string;
-		type: string;
-		props: Record< string, unknown >;
-	};
-};
-
-export type ControlItem = ControlsSection | Control;
-
-type PropTypeKey = string;
-
-type BasePropType = {
-	default: PropValue;
-	settings: Record< string, unknown >;
-	meta: Record< string, unknown >;
-};
-
-export type PlainPropType = BasePropType & {
-	kind: 'plain';
-	key: PropTypeKey;
-};
-
-export type ArrayPropType = BasePropType & {
-	kind: 'array';
-	key: PropTypeKey;
-	item_prop_type: PropType | null;
-};
-
-export type ObjectPropType = BasePropType & {
-	kind: 'object';
-	key: PropTypeKey;
-	shape: Record< string, PropType >;
-};
-
-export type TransformablePropType = PlainPropType | ArrayPropType | ObjectPropType;
-
-export type UnionPropType = BasePropType & {
-	kind: 'union';
-	prop_types: Record< string, TransformablePropType >;
-};
-
-export type PropType = TransformablePropType | UnionPropType;
-
-export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;
-
-type MaybeArray< T > = T | T[];
-
-export type TransformablePropValue< Type extends string, Value = unknown > = {
-	$$type: Type;
-	value: Value;
-	disabled?: boolean;
-};
-
-export type PlainPropValue = MaybeArray< string | number | boolean | object | null | undefined >;
-
-export type PropValue = PlainPropValue | TransformablePropValue< string >;
-
-export type PropKey = string;
-
-export type Props = Record< PropKey, PropValue >;
-
-export type PlainProps = Record< PropKey, PlainPropValue >;

package/src/{controls/control-actions/actions/popover-action.tsx → popover-action.tsx}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
 import { ComponentType, ElementType as ReactElementType, useId } from 'react';
 import { XIcon } from '@elementor/icons';
+import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';