@elementor/editor-controls 4.3.0-1059 → 4.3.0-1061

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.3.0-1059",
+  "version": "4.3.0-1061",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-1059",
-    "@elementor/editor-elements": "4.3.0-1059",
-    "@elementor/editor-props": "4.3.0-1059",
-    "@elementor/editor-responsive": "4.3.0-1059",
-    "@elementor/editor-ui": "4.3.0-1059",
-    "@elementor/editor-v1-adapters": "4.3.0-1059",
-    "@elementor/env": "4.3.0-1059",
-    "@elementor/events": "4.3.0-1059",
-    "@elementor/http-client": "4.3.0-1059",
+    "@elementor/editor-current-user": "4.3.0-1061",
+    "@elementor/editor-elements": "4.3.0-1061",
+    "@elementor/editor-props": "4.3.0-1061",
+    "@elementor/editor-responsive": "4.3.0-1061",
+    "@elementor/editor-ui": "4.3.0-1061",
+    "@elementor/editor-v1-adapters": "4.3.0-1061",
+    "@elementor/env": "4.3.0-1061",
+    "@elementor/events": "4.3.0-1061",
+    "@elementor/http-client": "4.3.0-1061",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-1059",
-    "@elementor/query": "4.3.0-1059",
-    "@elementor/schema": "4.3.0-1059",
-    "@elementor/session": "4.3.0-1059",
+    "@elementor/locations": "4.3.0-1061",
+    "@elementor/query": "4.3.0-1061",
+    "@elementor/schema": "4.3.0-1061",
+    "@elementor/session": "4.3.0-1061",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1059",
-    "@elementor/wp-media": "4.3.0-1059",
+    "@elementor/utils": "4.3.0-1061",
+    "@elementor/wp-media": "4.3.0-1061",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/open-icon-library.ts

@@ -0,0 +1,82 @@
+import { stringPropTypeUtil } from '@elementor/editor-props';
+
+export const SVG_ICON_LIBRARY = 'svg';
+
+export type IconLibraryMediaValue = {
+	id?: number;
+	url?: string;
+};
+
+export type IconLibrarySelection = {
+	value: string | IconLibraryMediaValue;
+	library: string;
+};
+
+type IconManagerControlView = {
+	model: {
+		get: ( key: string ) => unknown;
+	};
+	getControlValue: () => IconLibrarySelection;
+	setValue: ( icon: IconLibrarySelection ) => void;
+	applySavedValue: () => void;
+};
+
+type IconManager = {
+	loadIconLibraries: () => void;
+	show: ( options: { view: IconManagerControlView } ) => void;
+};
+
+type ElementorWithIconManager = {
+	iconManager?: IconManager;
+};
+
+type OpenIconLibraryOptions = {
+	selected?: IconLibrarySelection;
+	onSelect?: ( icon: IconLibrarySelection ) => void;
+};
+
+export function isSvgLibrarySelection(
+	icon: IconLibrarySelection
+): icon is IconLibrarySelection & { value: IconLibraryMediaValue } {
+	return icon.library === SVG_ICON_LIBRARY && typeof icon.value === 'object' && icon.value !== null;
+}
+
+export function openIconLibrary( { selected, onSelect }: OpenIconLibraryOptions = {} ) {
+	const iconManager = ( window.elementor as ElementorWithIconManager | undefined )?.iconManager;
+
+	if ( ! iconManager ) {
+		return;
+	}
+
+	iconManager.loadIconLibraries();
+	iconManager.show( {
+		view: createIconManagerControlView( selected, onSelect ),
+	} );
+}
+
+export function enqueueIconFonts( library: string ) {
+	window.elementor?.helpers?.enqueueIconFonts?.( library );
+}
+
+function createIconManagerControlView(
+	selected?: IconLibrarySelection,
+	onSelect?: ( icon: IconLibrarySelection ) => void
+): IconManagerControlView {
+	return {
+		model: {
+			get: () => false,
+		},
+		getControlValue: () => selected ?? { value: '', library: '' },
+		setValue: ( icon ) => {
+			onSelect?.( icon );
+		},
+		applySavedValue: () => undefined,
+	};
+}
+
+export function createIconPropValue( icon: Extract< IconLibrarySelection[ 'value' ], string >, library: string ) {
+	return {
+		value: stringPropTypeUtil.create( icon ),
+		library: stringPropTypeUtil.create( library ),
+	};
+}

package/src/controls/svg-media-control.tsx

@@ -1,9 +1,19 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
-import { svgSrcPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
+import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled, ThemeProvider } from '@elementor/ui';
+import {
+	Box,
+	Button,
+	Card,
+	CardMedia,
+	CardOverlay,
+	CircularProgress,
+	Stack,
+	styled,
+	ThemeProvider,
+} from '@elementor/ui';
 import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
@@ -13,10 +23,18 @@ import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
+import {
+	createIconPropValue,
+	enqueueIconFonts,
+	type IconLibrarySelection,
+	isSvgLibrarySelection,
+	openIconLibrary,
+} from './open-icon-library';
 
 const TILE_SIZE = 8;
 const TILE_WHITE = 'transparent';
 const TILE_BLACK = '#c1c1c1';
+const ICON_PREVIEW_FONT_SIZE = 50;
 export const TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${ TILE_BLACK } 25%, ${ TILE_WHITE } 0, ${ TILE_WHITE } 75%, ${ TILE_BLACK } 0, ${ TILE_BLACK })`;
 
 const StyledCard = styled( Card )`
@@ -42,22 +60,31 @@ const StyledCardMediaContainer = styled( Stack )`
 const MODE_BROWSE: OpenOptions = { mode: 'browse' };
 const MODE_UPLOAD: OpenOptions = { mode: 'upload' };
 
-export const SvgMediaControl = createControl( () => {
-	const { value, setValue } = useBoundProp( svgSrcPropTypeUtil );
-	const id = value?.id;
-	const url = value?.url;
+type SvgMediaControlProps = {
+	showIconLibrary?: boolean;
+};
+
+export const SvgMediaControl = createControl( ( { showIconLibrary = false }: SvgMediaControlProps ) => {
+	const { value: svgValue, setValue: setSvgValue } = useBoundProp( svgSrcPropTypeUtil );
+	const { value: iconValue, setValue: setIconValue } = useBoundProp( iconPropTypeUtil );
+	const id = svgValue?.id;
+	const url = svgValue?.url;
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
 	const { isAdmin } = useCurrentUserCapabilities();
+	const selectedIconClass =
+		showIconLibrary && typeof iconValue?.value?.value === 'string' ? iconValue.value.value : null;
+	const selectedIconLibrary =
+		showIconLibrary && typeof iconValue?.library?.value === 'string' ? iconValue.library.value : null;
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'svg' ],
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
-			setValue( {
+			setSvgValue( {
 				id: {
 					$$type: 'image-attachment-id',
 					value: selectedAttachment.id,
@@ -83,6 +110,28 @@ export const SvgMediaControl = createControl( () => {
 		}
 	};
 
+	const handleIconLibrarySelect = ( icon: IconLibrarySelection ) => {
+		if ( ! showIconLibrary ) {
+			return;
+		}
+		if ( isSvgLibrarySelection( icon ) ) {
+			setSvgValue( {
+				id: icon.value.id
+					? {
+							$$type: 'image-attachment-id',
+							value: icon.value.id,
+					  }
+					: null,
+				url: icon.value.url ? urlPropTypeUtil.create( icon.value.url ) : null,
+			} );
+			return;
+		}
+
+		if ( typeof icon.value === 'string' ) {
+			setIconValue( createIconPropValue( icon.value, icon.library ) );
+		}
+	};
+
 	const infotipProps = {
 		title: __( "Sorry, you can't upload that file yet.", 'elementor' ),
 		description: (
@@ -101,16 +150,12 @@ export const SvgMediaControl = createControl( () => {
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>
-						{ isFetching ? (
-							<CircularProgress role="progressbar" />
-						) : (
-							<CardMedia
-								component="img"
-								image={ src }
-								alt={ __( 'Preview SVG', 'elementor' ) }
-								sx={ { maxHeight: '140px', width: '50px' } }
-							/>
-						) }
+						<SvgMediaPreview
+							isFetching={ isFetching }
+							src={ src }
+							iconClassName={ selectedIconClass }
+							iconLibrary={ selectedIconLibrary }
+						/>
 					</StyledCardMediaContainer>
 					<CardOverlay
 						sx={ {
@@ -129,6 +174,25 @@ export const SvgMediaControl = createControl( () => {
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
+							{ showIconLibrary ? (
+								<Button
+									size="tiny"
+									variant="text"
+									color="inherit"
+									onClick={ () =>
+										openIconLibrary( {
+											selected:
+												selectedIconClass && selectedIconLibrary
+													? { value: selectedIconClass, library: selectedIconLibrary }
+													: undefined,
+											onSelect: handleIconLibrarySelect,
+										} )
+									}
+									aria-label={ __( 'Icon library', 'elementor' ) }
+								>
+									{ __( 'Icon library', 'elementor' ) }
+								</Button>
+							) : null }
 							<ConditionalControlInfotip { ...infotipProps }>
 								<span>
 									<ThemeProvider colorScheme={ isAdmin ? 'light' : 'dark' }>
@@ -153,3 +217,45 @@ export const SvgMediaControl = createControl( () => {
 		</Stack>
 	);
 } );
+
+function SvgMediaPreview( {
+	isFetching,
+	src,
+	iconClassName,
+	iconLibrary,
+}: {
+	isFetching: boolean;
+	src: string | null;
+	iconClassName: string | null;
+	iconLibrary: string | null;
+} ) {
+	useEffect( () => {
+		if ( iconLibrary ) {
+			enqueueIconFonts( iconLibrary );
+		}
+	}, [ iconLibrary ] );
+
+	if ( isFetching ) {
+		return <CircularProgress role="progressbar" />;
+	}
+
+	if ( iconClassName ) {
+		return (
+			<Box
+				component="i"
+				className={ iconClassName }
+				aria-label={ __( 'Preview icon', 'elementor' ) }
+				sx={ { fontSize: ICON_PREVIEW_FONT_SIZE } }
+			/>
+		);
+	}
+
+	return (
+		<CardMedia
+			component="img"
+			image={ src }
+			alt={ __( 'Preview SVG', 'elementor' ) }
+			sx={ { maxHeight: '140px', width: `${ ICON_PREVIEW_FONT_SIZE }px` } }
+		/>
+	);
+}