@elementor/editor-default-styles 4.3.0-1042

package/src/components/tag-chip.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { DotsVerticalIcon } from '@elementor/icons';
+import {
+	type AutocompleteRenderGetTagProps,
+	bindTrigger,
+	Chip,
+	Stack,
+	type Theme,
+	Typography,
+	UnstableChipGroup,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { TagStateMenu } from './tag-state-menu';
+
+const CHIP_SIZE = 'tiny';
+
+type TagChipProps = {
+	label: string;
+	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
+	activeState: StyleDefinitionState | null;
+	onSelectState: ( state: StyleDefinitionState | null ) => void;
+};
+
+export function TagChip( { label, chipProps, activeState, onSelectState }: TagChipProps ) {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'tag-state-menu',
+	} );
+	const [ chipRef, setChipRef ] = useState< HTMLElement | null >( null );
+
+	const { onDelete: _onDelete, ...chipGroupProps } = chipProps;
+	const isShowingState = Boolean( activeState );
+
+	return (
+		<>
+			<UnstableChipGroup
+				ref={ setChipRef }
+				{ ...chipGroupProps }
+				aria-label={ `Edit ${ label }` }
+				role="group"
+				sx={ ( theme: Theme ) => ( {
+					'&.MuiChipGroup-root.MuiAutocomplete-tag': {
+						margin: theme.spacing( 0.125 ),
+					},
+				} ) }
+			>
+				<Chip
+					size={ CHIP_SIZE }
+					label={ label }
+					variant={ isShowingState ? 'standard' : 'filled' }
+					shape="rounded"
+					color="default"
+					onClick={ () => {
+						if ( isShowingState ) {
+							onSelectState( null );
+						}
+					} }
+					sx={ ( theme: Theme ) => ( {
+						lineHeight: 1,
+						borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
+					} ) }
+				/>
+				<Chip
+					icon={ isShowingState ? undefined : <DotsVerticalIcon fontSize="tiny" /> }
+					size={ CHIP_SIZE }
+					label={
+						isShowingState ? (
+							<Stack direction="row" gap={ 0.5 } alignItems="center">
+								<Typography variant="inherit">{ activeState }</Typography>
+								<DotsVerticalIcon fontSize="tiny" />
+							</Stack>
+						) : undefined
+					}
+					variant="filled"
+					shape="rounded"
+					color="default"
+					{ ...bindTrigger( popupState ) }
+					aria-label={ __( 'Open tag state menu', 'elementor' ) }
+					sx={ ( theme: Theme ) => ( {
+						borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
+						paddingRight: 0,
+						...( ! isShowingState ? { paddingLeft: 0 } : {} ),
+						'.MuiChip-label': isShowingState ? { paddingRight: 0 } : { padding: 0 },
+					} ) }
+				/>
+			</UnstableChipGroup>
+			<TagStateMenu
+				popupState={ popupState }
+				anchorEl={ chipRef }
+				activeState={ activeState }
+				onSelectState={ onSelectState }
+			/>
+		</>
+	);
+}

package/src/components/tag-state-menu.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { DEFAULT_PSEUDO_STATES, PseudoStateMenuItems } from '@elementor/editor-editing-panel';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { bindMenu, Menu, type PopupState } from '@elementor/ui';
+
+type TagStateMenuProps = {
+	popupState: PopupState;
+	anchorEl: HTMLElement | null;
+	activeState: StyleDefinitionState | null;
+	onSelectState: ( state: StyleDefinitionState | null ) => void;
+};
+
+export function TagStateMenu( { popupState, anchorEl, activeState, onSelectState }: TagStateMenuProps ) {
+	return (
+		<Menu
+			MenuListProps={ { dense: true, sx: { minWidth: '160px' } } }
+			{ ...bindMenu( popupState ) }
+			anchorEl={ anchorEl }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+			transformOrigin={ { horizontal: 'left', vertical: -4 } }
+			disableAutoFocusItem
+		>
+			<PseudoStateMenuItems
+				states={ DEFAULT_PSEUDO_STATES }
+				activeState={ activeState }
+				onSelectState={ onSelectState }
+				onClose={ popupState.close }
+			/>
+		</Menu>
+	);
+}

package/src/default-styles-open-gate.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useActiveDocumentActions as useActiveDocumentActions,
+} from '@elementor/editor-documents';
+import { SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
+import { __ } from '@wordpress/i18n';
+
+import { usePanelActions } from './default-styles-panel';
+
+export const EVENT_REQUEST_OPEN_DEFAULT_STYLES = 'elementor/default-styles/request-open';
+
+export function DefaultStylesOpenGate() {
+	const { open } = usePanelActions();
+	const document = useActiveDocument();
+	const { save: saveDocument } = useActiveDocumentActions();
+	const { open: openSaveDialog, close: closeSaveDialog, isOpen: isSaveDialogOpen } = useDialog();
+
+	const documentRef = useRef( document );
+	documentRef.current = document;
+
+	const pendingOpenRef = useRef< ( () => void ) | null >( null );
+
+	const gatedOpen = useCallback(
+		( onClean: () => void ) => {
+			if ( documentRef.current?.isDirty ) {
+				pendingOpenRef.current = onClean;
+				openSaveDialog();
+				return;
+			}
+
+			onClean();
+		},
+		[ openSaveDialog ]
+	);
+
+	const handleSaveAndContinue = useCallback( async () => {
+		try {
+			await saveDocument();
+			closeSaveDialog();
+			pendingOpenRef.current?.();
+			pendingOpenRef.current = null;
+		} catch {
+			// Keep dialog open.
+		}
+	}, [ saveDocument, closeSaveDialog ] );
+
+	const handleStayHere = useCallback( () => {
+		closeSaveDialog();
+		pendingOpenRef.current = null;
+	}, [ closeSaveDialog ] );
+
+	useEffect( () => {
+		const handler = () => {
+			gatedOpen( () => {
+				void open();
+			} );
+		};
+
+		window.addEventListener( EVENT_REQUEST_OPEN_DEFAULT_STYLES, handler );
+
+		return () => {
+			window.removeEventListener( EVENT_REQUEST_OPEN_DEFAULT_STYLES, handler );
+		};
+	}, [ gatedOpen, open ] );
+
+	if ( ! isSaveDialogOpen ) {
+		return null;
+	}
+
+	return (
+		<ThemeProvider>
+			<SaveChangesDialog>
+				<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>
+				<SaveChangesDialog.Content>
+					<SaveChangesDialog.ContentText sx={ { mb: 2 } }>
+						{ __(
+							"To open Default Styles, save your page first. You can't continue without saving.",
+							'elementor'
+						) }
+					</SaveChangesDialog.ContentText>
+				</SaveChangesDialog.Content>
+				<SaveChangesDialog.Actions
+					actions={ {
+						cancel: {
+							label: __( 'Stay here', 'elementor' ),
+							action: handleStayHere,
+						},
+						confirm: {
+							label: __( 'Save & Continue', 'elementor' ),
+							action: handleSaveAndContinue,
+						},
+					} }
+				/>
+			</SaveChangesDialog>
+		</ThemeProvider>
+	);
+}

package/src/default-styles-panel.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { __createPanel as createPanel } from '@elementor/editor-panels';
+import { changeEditMode } from '@elementor/editor-v1-adapters';
+
+import { DefaultStylesPanelContent } from './components/default-styles-panel-content';
+
+export const DEFAULT_STYLES_PANEL_ID = 'default-styles';
+
+export const { panel, usePanelStatus, usePanelActions } = createPanel( {
+	id: DEFAULT_STYLES_PANEL_ID,
+	component: DefaultStylesPanelRoot,
+	allowedEditModes: [ 'edit', DEFAULT_STYLES_PANEL_ID ],
+	onOpen: () => {
+		changeEditMode( DEFAULT_STYLES_PANEL_ID );
+	},
+	onClose: async () => {
+		changeEditMode( 'edit' );
+	},
+	isOpenPreviousElement: true,
+} );
+
+function DefaultStylesPanelRoot() {
+	const { close } = usePanelActions();
+
+	return (
+		<DefaultStylesPanelContent
+			onRequestClose={ () => {
+				void close();
+			} }
+		/>
+	);
+}

package/src/default-styles-provider.ts

@@ -0,0 +1,96 @@
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+import { createStylesProvider } from '@elementor/editor-styles-repository';
+import {
+	__dispatch as dispatch,
+	__getState as getState,
+	__subscribeWithSelector as subscribeWithSelector,
+} from '@elementor/store';
+import { __ } from '@wordpress/i18n';
+
+import { getAllowedDefaultStyleTags } from './allowed-tags';
+import { selectData, slice } from './store';
+
+export const DEFAULT_STYLES_PROVIDER_KEY = 'default-styles';
+export const DEFAULT_STYLES_CSS_NAME_PREFIX = 'e-default-';
+
+const resolveCssName = ( id: StyleDefinitionID ) => `${ DEFAULT_STYLES_CSS_NAME_PREFIX }${ id }`;
+
+const placeholderDefinition = ( id: StyleDefinitionID ): StyleDefinition => ( {
+	id,
+	label: id,
+	type: 'class',
+	variants: [],
+} );
+
+const asClassDefinition = ( style: StyleDefinition ): StyleDefinition => ( {
+	...style,
+	type: 'class',
+} );
+
+export const defaultStylesStylesProvider = createStylesProvider( {
+	key: DEFAULT_STYLES_PROVIDER_KEY,
+	priority: 15,
+	labels: {
+		singular: __( 'tag', 'elementor' ),
+		plural: __( 'tags', 'elementor' ),
+	},
+	subscribe: ( cb ) => subscribeWithStates( cb ),
+	actions: {
+		all: () =>
+			getAllowedDefaultStyleTags().map( ( tag ) => {
+				const style = selectData( getState() )[ tag ];
+
+				return style ? asClassDefinition( style ) : placeholderDefinition( tag );
+			} ),
+		get: ( id ) => {
+			const style = selectData( getState() )[ id ];
+
+			return style ? asClassDefinition( style ) : placeholderDefinition( id );
+		},
+		resolveCssName,
+		update: ( payload ) => {
+			dispatch(
+				slice.actions.update( {
+					style: payload,
+				} )
+			);
+		},
+		delete: ( id ) => {
+			dispatch( slice.actions.deleteTag( id ) );
+		},
+		updateProps: ( args ) => {
+			dispatch(
+				slice.actions.updateProps( {
+					id: args.id,
+					meta: args.meta,
+					props: args.props,
+					mode: args.mode,
+				} )
+			);
+		},
+		updateCustomCss: ( args ) => {
+			dispatch(
+				slice.actions.updateProps( {
+					id: args.id,
+					meta: args.meta,
+					custom_css: args.custom_css,
+					props: {},
+				} )
+			);
+		},
+	},
+} );
+
+const subscribeWithStates = (
+	cb: ( previous: Record< string, StyleDefinition >, current: Record< string, StyleDefinition > ) => void
+) => {
+	let previousState = selectData( getState() );
+
+	return subscribeWithSelector(
+		( state ) => selectData( state ),
+		( currentState ) => {
+			cb( previousState, currentState );
+			previousState = currentState;
+		}
+	);
+};

package/src/hooks/use-default-styles-action-props.ts

@@ -0,0 +1,15 @@
+import { type ActionProps } from '@elementor/editor-app-bar';
+import { TextIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { EVENT_REQUEST_OPEN_DEFAULT_STYLES } from '../default-styles-open-gate';
+
+export function useDefaultStylesActionProps(): ActionProps {
+	return {
+		title: __( 'Default Styles', 'elementor' ),
+		icon: TextIcon,
+		onClick: () => {
+			window.dispatchEvent( new CustomEvent( EVENT_REQUEST_OPEN_DEFAULT_STYLES ) );
+		},
+	};
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { init } from './init';

package/src/init.ts

@@ -0,0 +1,44 @@
+import { injectIntoLogic } from '@elementor/editor';
+import { toolsMenu } from '@elementor/editor-app-bar';
+import { registerElementPanelDefaults, STYLE_SECTION_NAMES } from '@elementor/editor-editing-panel';
+import { __registerPanel as registerPanel } from '@elementor/editor-panels';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { __registerSlice as registerSlice } from '@elementor/store';
+
+import { PopulateStore } from './components/populate-store';
+import { DefaultStylesOpenGate } from './default-styles-open-gate';
+import { panel } from './default-styles-panel';
+import { defaultStylesStylesProvider } from './default-styles-provider';
+import { useDefaultStylesActionProps } from './hooks/use-default-styles-action-props';
+import { slice } from './store';
+
+export function init() {
+	registerSlice( slice );
+
+	registerElementPanelDefaults( 'default-style', {
+		defaultTab: 'style',
+		defaultSectionsExpanded: {
+			style: [ ...STYLE_SECTION_NAMES ],
+		},
+	} );
+
+	registerPanel( panel );
+
+	stylesRepository.register( defaultStylesStylesProvider );
+
+	toolsMenu.registerAction( {
+		id: 'default-styles-button',
+		priority: 4,
+		useProps: useDefaultStylesActionProps,
+	} );
+
+	injectIntoLogic( {
+		id: 'default-styles-populate-store',
+		component: PopulateStore,
+	} );
+
+	injectIntoLogic( {
+		id: 'default-styles-open-gate',
+		component: DefaultStylesOpenGate,
+	} );
+}

package/src/load-default-styles.ts

@@ -0,0 +1,16 @@
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { apiClient } from './api';
+import { slice } from './store';
+
+export async function loadDefaultStyles() {
+	const response = await apiClient.all();
+
+	const items = response.data.data;
+
+	dispatch(
+		slice.actions.load( {
+			data: items,
+		} )
+	);
+}

package/src/panel-interactions.ts

@@ -0,0 +1,24 @@
+type ExtendedWindow = Window & {
+	$e?: {
+		components?: {
+			get?: ( name: 'panel' ) =>
+				| {
+						blockUserInteractions?: () => void;
+						unblockUserInteractions?: () => void;
+				  }
+				| undefined;
+		};
+	};
+};
+
+export function blockPanelInteractions() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	extendedWindow.$e?.components?.get?.( 'panel' )?.blockUserInteractions?.();
+}
+
+export function unblockPanelInteractions() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	extendedWindow.$e?.components?.get?.( 'panel' )?.unblockUserInteractions?.();
+}

package/src/save-default-styles.ts

@@ -0,0 +1,57 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { hash } from '@elementor/utils';
+
+import { type AllowedHtmlTag } from './allowed-tags';
+import { apiClient } from './api';
+import { selectData, selectInitialData, selectIsDirty, slice, type StateWithDefaultStyles } from './store';
+
+function getChangedTags( state: StateWithDefaultStyles ): AllowedHtmlTag[] {
+	const current = selectData( state );
+	const initial = selectInitialData( state );
+
+	const changed: AllowedHtmlTag[] = [];
+
+	Object.keys( current ).forEach( ( tag ) => {
+		const currentStyle = current[ tag ];
+		const initialStyle = initial[ tag ];
+
+		if ( ! initialStyle || hash( currentStyle ) !== hash( initialStyle ) ) {
+			changed.push( tag as AllowedHtmlTag );
+		}
+	} );
+
+	Object.keys( initial ).forEach( ( tag ) => {
+		if ( ! current[ tag ] ) {
+			changed.push( tag as AllowedHtmlTag );
+		}
+	} );
+
+	return changed;
+}
+
+export async function saveDefaultStyles() {
+	const state = getState() as StateWithDefaultStyles;
+
+	if ( ! selectIsDirty( state ) ) {
+		return;
+	}
+
+	const data = selectData( state );
+	const changedTags = getChangedTags( state );
+
+	await Promise.all(
+		changedTags.map( async ( tag ) => {
+			const style = data[ tag ];
+
+			if ( ! style || style.variants.length === 0 ) {
+				await apiClient.delete( tag );
+
+				return;
+			}
+
+			await apiClient.put( tag, style.variants );
+		} )
+	);
+
+	dispatch( slice.actions.commit() );
+}

package/src/store.ts

@@ -0,0 +1,141 @@
+import { type Props } from '@elementor/editor-props';
+import {
+	type CustomCss,
+	getVariantByMeta,
+	type StyleDefinition,
+	type StyleDefinitionID,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
+import { type UpdateActionPayload } from '@elementor/editor-styles-repository';
+import {
+	__createSelector as createSelector,
+	__createSlice as createSlice,
+	type PayloadAction,
+	type SliceState,
+} from '@elementor/store';
+
+type DefaultStylesState = {
+	data: Record< StyleDefinitionID, StyleDefinition >;
+	initialData: Record< StyleDefinitionID, StyleDefinition >;
+	isDirty: boolean;
+};
+
+const initialState: DefaultStylesState = {
+	data: {},
+	initialData: {},
+	isDirty: false,
+};
+
+export type StateWithDefaultStyles = SliceState< typeof slice >;
+
+const SLICE_NAME = 'defaultStyles';
+
+export const slice = createSlice( {
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		load(
+			state,
+			{
+				payload: { data },
+			}: PayloadAction< {
+				data: Record< StyleDefinitionID, StyleDefinition >;
+			} >
+		) {
+			state.initialData = structuredClone( data );
+			state.data = structuredClone( data );
+			state.isDirty = false;
+		},
+
+		update( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {
+			state.data[ payload.style.id ] = {
+				...state.data[ payload.style.id ],
+				...payload.style,
+			} as StyleDefinition;
+			state.isDirty = true;
+		},
+
+		updateProps(
+			state,
+			{
+				payload,
+			}: PayloadAction< {
+				id: StyleDefinitionID;
+				meta: StyleDefinitionVariant[ 'meta' ];
+				props: Props;
+				custom_css?: CustomCss | null;
+				mode?: 'merge' | 'replace';
+			} >
+		) {
+			const style = state.data[ payload.id ] ?? {
+				id: payload.id,
+				label: payload.id,
+				type: 'class' as const,
+				variants: [],
+			};
+
+			const variant = getVariantByMeta( style, payload.meta );
+			let customCss = ( 'custom_css' in payload ? payload.custom_css : variant?.custom_css ) ?? null;
+			customCss = customCss?.raw ? customCss : null;
+
+			if ( variant ) {
+				const payloadProps = JSON.parse( JSON.stringify( payload.props ) ) as Props;
+				const mode = payload.mode ?? 'merge';
+
+				if ( mode === 'replace' ) {
+					variant.props = payloadProps;
+				} else {
+					const variantProps = JSON.parse( JSON.stringify( variant.props ) ) as Props;
+					variant.props = { ...variantProps, ...payloadProps };
+				}
+
+				variant.custom_css = customCss;
+			} else {
+				style.variants.push( {
+					meta: payload.meta,
+					props: payload.props,
+					custom_css: customCss,
+				} );
+			}
+
+			state.data[ payload.id ] = style;
+			state.isDirty = true;
+		},
+
+		reset( state ) {
+			state.data = structuredClone( state.initialData );
+			state.isDirty = false;
+		},
+
+		commit( state ) {
+			state.initialData = structuredClone( state.data );
+			state.isDirty = false;
+		},
+
+		deleteTag( state, { payload }: PayloadAction< StyleDefinitionID > ) {
+			// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+			delete state.data[ payload ];
+			state.isDirty = true;
+		},
+	},
+} );
+
+export const selectData = createSelector(
+	( state: StateWithDefaultStyles ) => state.defaultStyles.data,
+	( data ) => data
+);
+
+export const selectIsDirty = createSelector(
+	( state: StateWithDefaultStyles ) => state.defaultStyles.isDirty,
+	( isDirty ) => isDirty
+);
+
+export const selectInitialData = createSelector(
+	( state: StateWithDefaultStyles ) => state.defaultStyles.initialData,
+	( initialData ) => initialData
+);
+
+export const selectTagStyle = createSelector(
+	[ selectData, ( _state: StateWithDefaultStyles, id: StyleDefinitionID ) => id ],
+	( data, id ) => data[ id ]
+);