@elementor/editor-controls 4.3.0-1058 → 4.3.0-1060

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-1058",
+  "version": "4.3.0-1060",
   "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-1058",
-    "@elementor/editor-elements": "4.3.0-1058",
-    "@elementor/editor-props": "4.3.0-1058",
-    "@elementor/editor-responsive": "4.3.0-1058",
-    "@elementor/editor-ui": "4.3.0-1058",
-    "@elementor/editor-v1-adapters": "4.3.0-1058",
-    "@elementor/env": "4.3.0-1058",
-    "@elementor/events": "4.3.0-1058",
-    "@elementor/http-client": "4.3.0-1058",
+    "@elementor/editor-current-user": "4.3.0-1060",
+    "@elementor/editor-elements": "4.3.0-1060",
+    "@elementor/editor-props": "4.3.0-1060",
+    "@elementor/editor-responsive": "4.3.0-1060",
+    "@elementor/editor-ui": "4.3.0-1060",
+    "@elementor/editor-v1-adapters": "4.3.0-1060",
+    "@elementor/env": "4.3.0-1060",
+    "@elementor/events": "4.3.0-1060",
+    "@elementor/http-client": "4.3.0-1060",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-1058",
-    "@elementor/query": "4.3.0-1058",
-    "@elementor/schema": "4.3.0-1058",
-    "@elementor/session": "4.3.0-1058",
+    "@elementor/locations": "4.3.0-1060",
+    "@elementor/query": "4.3.0-1060",
+    "@elementor/schema": "4.3.0-1060",
+    "@elementor/session": "4.3.0-1060",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1058",
-    "@elementor/wp-media": "4.3.0-1058",
+    "@elementor/utils": "4.3.0-1060",
+    "@elementor/wp-media": "4.3.0-1060",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/inline-editor-toolbar.tsx

@@ -32,13 +32,19 @@ export type InlineEditorToolbarProps = {
 	editor: Editor;
 	elementId?: ElementID;
 	sx?: SxProps< Theme >;
+	inControlPanel?: boolean;
 };
 
 type ToolbarButtonKeys = keyof typeof toolbarButtons;
 
 type FormatAction = Omit< ToolbarButtonKeys, 'clear' >;
 
-export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEditorToolbarProps ) => {
+export const InlineEditorToolbar = ( {
+	editor,
+	elementId,
+	sx = {},
+	inControlPanel = false,
+}: InlineEditorToolbarProps ) => {
 	const [ urlValue, setUrlValue ] = useState( '' );
 	const [ openInNewTab, setOpenInNewTab ] = useState( false );
 	const toolbarRef = useRef< HTMLDivElement >( null );
@@ -101,8 +107,10 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 	};
 
 	useEffect( () => {
-		editor?.commands?.focus();
-	}, [ editor ] );
+		if ( ! inControlPanel ) {
+			editor?.commands?.focus();
+		}
+	}, [ editor, inControlPanel ] );
 
 	return (
 		<Box
@@ -118,6 +126,20 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 				visibility: linkPopupState.isOpen ? 'hidden' : 'visible',
 				pointerEvents: linkPopupState.isOpen ? 'none' : 'all',
 				...sx,
+				...( inControlPanel && {
+					width: '100%',
+					justifyContent: 'center',
+					flexDirection: 'row',
+					backgroundColor: 'transparent',
+					boxShadow: 'none',
+					borderWidth: '0',
+					borderBottom: '1px solid',
+					borderBottomColor: 'grey.200',
+					borderRadius: '0',
+					position: 'absolute',
+					top: '0',
+					left: '0',
+				} ),
 			} }
 		>
 			<Tooltip title={ clearButton.label } placement="top" sx={ { borderRadius: '8px' } }>
@@ -144,6 +166,15 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 								marginLeft: 0,
 							},
 						},
+					...( inControlPanel && {
+						justifyContent: 'space-between',
+						width: '100%',
+						'& svg': {
+							width: '0.7rem',
+							height: '0.7rem',
+							fill: 'black',
+						},
+					} ),
 				} }
 			>
 				{ formatButtonsList.map( ( button ) => (

package/src/components/inline-editor.tsx

@@ -33,6 +33,7 @@ type InlineEditorProps = {
 	autofocus?: boolean;
 	expectedTag?: string | null;
 	onEditorCreate?: Dispatch< SetStateAction< Editor | null > >;
+	onEditorDestroy?: () => void;
 	wrapperClassName?: string;
 	onSelectionEnd?: ( view: EditorView ) => void;
 	mountElement?: HTMLElement | null;
@@ -50,6 +51,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		onBlur = undefined,
 		expectedTag = null,
 		onEditorCreate,
+		onEditorDestroy,
 		wrapperClassName,
 		onSelectionEnd,
 		mountElement = null,
@@ -146,6 +148,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			},
 		},
 		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,
+		onDestroy: onEditorDestroy ? () => onEditorDestroy() : undefined,
 		onBlur: mountElement ? undefined : () => onBlurRef.current?.(),
 		onSelectionUpdate: onSelectionEnd
 			? ( { editor: updatedEditor } ) => onSelectionEnd( updatedEditor.view )

package/src/controls/inline-editing-control.tsx

@@ -1,39 +1,54 @@
 import * as React from 'react';
-import { type ComponentProps, useCallback } from 'react';
+import { type ComponentProps, useCallback, useState } from 'react';
 import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
 import { Box, type SxProps, type Theme } from '@elementor/ui';
+import { type Editor } from '@tiptap/react';
 
 import { useBoundProp, usePropKeyContext } from '../bound-prop-context';
 import { InlineEditor } from '../components/inline-editor';
+import { InlineEditorToolbar } from '../components/inline-editor-toolbar';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { extractInlineHtmlContent } from '../utils/inline-editing';
+import { type ControlProps } from '../utils/types';
 
-export const InlineEditingControl = createControl(
-	( {
-		sx,
-		attributes,
-		props,
-	}: {
-		sx?: SxProps< Theme >;
-		attributes?: Record< string, string >;
-		props?: ComponentProps< 'div' >;
-	} ) => {
-		const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
-		const { value: rawValue } = usePropKeyContext();
-		const content = value ?? extractInlineHtmlContent( rawValue );
+type Props = ControlProps< {
+	sx?: SxProps< Theme >;
+	attributes?: Record< string, string >;
+	props?: ComponentProps< 'div' >;
+} >;
 
-		const handleChange = useCallback(
-			( newValue: unknown ) => {
-				const html = ( newValue ?? '' ) as string;
+export const InlineEditingControl = createControl( ( { sx, attributes, props, context: { elementId } }: Props ) => {
+	const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
+	const { value: rawValue } = usePropKeyContext();
+	const content = value ?? extractInlineHtmlContent( rawValue );
+	const [ editor, setEditor ] = useState< Editor | null >( null );
 
-				setValue( html );
-			},
-			[ setValue ]
-		);
+	const handleChange = useCallback(
+		( newValue: unknown ) => {
+			const html = ( newValue ?? '' ) as string;
 
-		return (
-			<ControlActions>
+			setValue( html );
+		},
+		[ setValue ]
+	);
+
+	return (
+		<ControlActions>
+			<Box sx={ { position: 'relative' } }>
+				{ editor && editor.isEditable && (
+					<InlineEditorToolbar
+						editor={ editor }
+						elementId={ elementId }
+						sx={ {
+							boxShadow: 'none',
+							border: '1px solid',
+							borderColor: 'grey.200',
+							mb: 0.5,
+						} }
+						inControlPanel={ true }
+					/>
+				) }
 				<Box
 					sx={ {
 						p: 0.8,
@@ -52,7 +67,7 @@ export const InlineEditingControl = createControl(
 							outline: 'none',
 						},
 						'& .ProseMirror': {
-							minHeight: '70px',
+							minHeight: '100px',
 							fontSize: '12px',
 							'& a': {
 								color: 'inherit',
@@ -77,9 +92,18 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor value={ content } setValue={ handleChange } placeholder={ placeholder ?? null } />
+					<InlineEditor
+						value={ content }
+						setValue={ handleChange }
+						placeholder={ placeholder ?? null }
+						onEditorCreate={ setEditor }
+						onEditorDestroy={ () => setEditor( null ) }
+						sx={ {
+							paddingBlockStart: 5,
+						} }
+					/>
 				</Box>
-			</ControlActions>
-		);
-	}
-);
+			</Box>
+		</ControlActions>
+	);
+} );

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` } }
+		/>
+	);
+}