@elementor/editor-controls 0.16.0 → 0.17.0

package/src/controls/toggle-control.tsx

@@ -6,28 +6,54 @@ import { useBoundProp } from '../bound-prop-context';
 import { ControlToggleButtonGroup, type ToggleButtonGroupItem } from '../components/control-toggle-button-group';
 import { createControl } from '../create-control';
 
-type ToggleControlProps< T extends PropValue > = {
-	options: ToggleButtonGroupItem< T >[];
+export type ToggleControlProps< T extends PropValue > = {
+	options: Array< ToggleButtonGroupItem< T > & { exclusive?: boolean } >;
 	fullWidth?: boolean;
 	size?: ToggleButtonProps[ 'size' ];
+	exclusive?: boolean;
 };
 
 export const ToggleControl = createControl(
-	( { options, fullWidth = false, size = 'tiny' }: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
+	( {
+		options,
+		fullWidth = false,
+		size = 'tiny',
+		exclusive = true,
+	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
 		const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
-		const handleToggle = ( option: StringPropValue[ 'value' ] | null ) => {
-			setValue( option );
+		const exclusiveValues = options.filter( ( option ) => option.exclusive ).map( ( option ) => option.value );
+
+		const handleNonExclusiveToggle = ( selectedValues: StringPropValue[ 'value' ][] ) => {
+			const newSelectedValue = selectedValues[ selectedValues.length - 1 ];
+			const isNewSelectedValueExclusive = exclusiveValues.includes( newSelectedValue );
+
+			const updatedValues = isNewSelectedValueExclusive
+				? [ newSelectedValue ]
+				: selectedValues?.filter( ( val ) => ! exclusiveValues.includes( val ) );
+
+			setValue( updatedValues?.join( ' ' ) || null );
 		};
 
-		return (
+		const toggleButtonGroupProps = {
+			items: options,
+			fullWidth,
+			size,
+		};
+
+		return exclusive ? (
 			<ControlToggleButtonGroup
-				items={ options }
+				{ ...toggleButtonGroupProps }
 				value={ value ?? null }
-				onChange={ handleToggle }
+				onChange={ setValue }
 				exclusive={ true }
-				fullWidth={ fullWidth }
-				size={ size }
+			/>
+		) : (
+			<ControlToggleButtonGroup
+				{ ...toggleButtonGroupProps }
+				value={ value?.split( ' ' ) ?? [] }
+				onChange={ handleNonExclusiveToggle }
+				exclusive={ false }
 			/>
 		);
 	}

package/src/hooks/use-filtered-font-families.ts

@@ -1,25 +1,24 @@
+import { type FontCategory } from '@elementor/editor-controls';
+
 export type FontListItem = {
 	type: 'font' | 'category';
 	value: string;
 };
 
-export const useFilteredFontFamilies = ( fontFamilies: Record< string, string[] >, searchValue: string ) => {
-	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< FontListItem[] >(
-		( acc, [ category, fonts ] ) => {
-			const filteredFonts = fonts.filter( ( font ) => font.toLowerCase().includes( searchValue.toLowerCase() ) );
-
-			if ( filteredFonts.length ) {
-				acc.push( { type: 'category', value: category } );
+export const useFilteredFontFamilies = ( fontFamilies: FontCategory[], searchValue: string ) => {
+	return fontFamilies.reduce< FontListItem[] >( ( acc, category ) => {
+		const filteredFonts = category.fonts.filter( ( font ) =>
+			font.toLowerCase().includes( searchValue.toLowerCase() )
+		);
 
-				filteredFonts.forEach( ( font ) => {
-					acc.push( { type: 'font', value: font } );
-				} );
-			}
+		if ( filteredFonts.length ) {
+			acc.push( { type: 'category', value: category.label } );
 
-			return acc;
-		},
-		[]
-	);
+			filteredFonts.forEach( ( font ) => {
+				acc.push( { type: 'font', value: font } );
+			} );
+		}
 
-	return [ ...filteredFontFamilies ];
+		return acc;
+	}, [] );
 };

package/src/index.ts

@@ -30,6 +30,8 @@ export type { ControlActionsItems } from './control-actions/control-actions-cont
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue } from './bound-prop-context/prop-context';
 export type { ExtendedValue } from './controls/size-control';
+export type { ToggleControlProps } from './controls/toggle-control';
+export type { FontCategory } from './controls/font-family-control/font-family-control';
 
 // providers
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';

package/src/utils/link-restriction.ts

@@ -0,0 +1,47 @@
+import { getContainer } from '@elementor/editor-elements';
+
+type LinkRestriction =
+	| {
+			shouldRestrict: true;
+			restrictReason: 'ancestor' | 'descendant';
+	  }
+	| {
+			shouldRestrict: false;
+			restrictReason?: never;
+	  };
+
+export function getLinkRestriction( elementId: string ): LinkRestriction {
+	if ( getAncestorAnchor( elementId ) ) {
+		return {
+			shouldRestrict: true,
+			restrictReason: 'ancestor',
+		};
+	}
+
+	if ( getDescendantAnchor( elementId ) ) {
+		return {
+			shouldRestrict: true,
+			restrictReason: 'descendant',
+		};
+	}
+
+	return { shouldRestrict: false };
+}
+
+function getAncestorAnchor( elementId: string ) {
+	const element = getElementView( elementId );
+
+	return element?.closest( 'a' ) || null;
+}
+
+function getDescendantAnchor( elementId: string ) {
+	const element = getElementView( elementId );
+
+	return element?.querySelector( 'a' ) || null;
+}
+
+function getElementView( id: string ) {
+	const elementContainer = getContainer( id );
+
+	return elementContainer?.view?.el || null;
+}

package/src/utils/types.ts

@@ -0,0 +1,5 @@
+export type ControlProps< TControlProps = unknown > = TControlProps & {
+	context: {
+		elementId: string;
+	};
+};