@elementor/editor-controls 4.0.0-512 → 4.0.0-514

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.0.0-512",
+  "version": "4.0.0-514",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-512",
-    "@elementor/editor-elements": "4.0.0-512",
-    "@elementor/editor-props": "4.0.0-512",
-    "@elementor/editor-responsive": "4.0.0-512",
-    "@elementor/editor-ui": "4.0.0-512",
-    "@elementor/editor-v1-adapters": "4.0.0-512",
-    "@elementor/env": "4.0.0-512",
-    "@elementor/http-client": "4.0.0-512",
+    "@elementor/editor-current-user": "4.0.0-514",
+    "@elementor/editor-elements": "4.0.0-514",
+    "@elementor/editor-props": "4.0.0-514",
+    "@elementor/editor-responsive": "4.0.0-514",
+    "@elementor/editor-ui": "4.0.0-514",
+    "@elementor/editor-v1-adapters": "4.0.0-514",
+    "@elementor/env": "4.0.0-514",
+    "@elementor/http-client": "4.0.0-514",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "4.0.0-512",
-    "@elementor/mixpanel": "4.0.0-512",
-    "@elementor/query": "4.0.0-512",
-    "@elementor/session": "4.0.0-512",
+    "@elementor/locations": "4.0.0-514",
+    "@elementor/mixpanel": "4.0.0-514",
+    "@elementor/query": "4.0.0-514",
+    "@elementor/session": "4.0.0-514",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-512",
-    "@elementor/wp-media": "4.0.0-512",
+    "@elementor/utils": "4.0.0-514",
+    "@elementor/wp-media": "4.0.0-514",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

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

@@ -15,6 +15,8 @@ import {
 import {
 	Box,
 	IconButton,
+	type SxProps,
+	type Theme,
 	ToggleButton,
 	ToggleButtonGroup,
 	toggleButtonGroupClasses,
@@ -26,88 +28,17 @@ import { __ } from '@wordpress/i18n';
 
 import { UrlPopover } from './url-popover';
 
-const checkIfElementHasLink = ( elementId: ElementID ): boolean =>
-	!! getElementSetting< LinkPropValue >( elementId, 'link' )?.value?.destination;
-
-type InlineEditorToolbarProps = {
+export type InlineEditorToolbarProps = {
 	editor: Editor;
 	elementId?: ElementID;
+	sx?: SxProps< Theme >;
 };
 
-const toolbarButtons = {
-	clear: {
-		label: __( 'Clear', 'elementor' ),
-		icon: <MinusIcon fontSize="tiny" />,
-		action: 'clear',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().clearNodes().unsetAllMarks().run();
-		},
-	},
-	bold: {
-		label: __( 'Bold', 'elementor' ),
-		icon: <BoldIcon fontSize="tiny" />,
-		action: 'bold',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().toggleBold().run();
-		},
-	},
-	italic: {
-		label: __( 'Italic', 'elementor' ),
-		icon: <ItalicIcon fontSize="tiny" />,
-		action: 'italic',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().toggleItalic().run();
-		},
-	},
-	underline: {
-		label: __( 'Underline', 'elementor' ),
-		icon: <UnderlineIcon fontSize="tiny" />,
-		action: 'underline',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().toggleUnderline().run();
-		},
-	},
-	strike: {
-		label: __( 'Strikethrough', 'elementor' ),
-		icon: <StrikethroughIcon fontSize="tiny" />,
-		action: 'strike',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().toggleStrike().run();
-		},
-	},
-	superscript: {
-		label: __( 'Superscript', 'elementor' ),
-		icon: <SuperscriptIcon fontSize="tiny" />,
-		action: 'superscript',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().toggleSuperscript().run();
-		},
-	},
-	subscript: {
-		label: __( 'Subscript', 'elementor' ),
-		icon: <SubscriptIcon fontSize="tiny" />,
-		action: 'subscript',
-		method: ( editor: Editor ) => {
-			editor.chain().focus().toggleSubscript().run();
-		},
-	},
-	link: {
-		label: __( 'Link', 'elementor' ),
-		icon: <LinkIcon fontSize="tiny" />,
-		action: 'link',
-		method: null,
-	},
-} as const;
-
 type ToolbarButtonKeys = keyof typeof toolbarButtons;
 
 type FormatAction = Omit< ToolbarButtonKeys, 'clear' >;
 
-const { clear: clearButton, ...formatButtons } = toolbarButtons;
-
-const possibleFormats: FormatAction[] = Object.keys( formatButtons ) as FormatAction[];
-
-export const InlineEditorToolbar = ( { editor, elementId }: InlineEditorToolbarProps ) => {
+export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEditorToolbarProps ) => {
 	const [ urlValue, setUrlValue ] = useState( '' );
 	const [ openInNewTab, setOpenInNewTab ] = useState( false );
 	const toolbarRef = useRef< HTMLDivElement >( null );
@@ -186,6 +117,7 @@ export const InlineEditorToolbar = ( { editor, elementId }: InlineEditorToolbarP
 				alignItems: 'center',
 				visibility: linkPopupState.isOpen ? 'hidden' : 'visible',
 				pointerEvents: linkPopupState.isOpen ? 'none' : 'all',
+				...sx,
 			} }
 		>
 			<Tooltip title={ clearButton.label } placement="top" sx={ { borderRadius: '8px' } }>
@@ -247,3 +179,75 @@ export const InlineEditorToolbar = ( { editor, elementId }: InlineEditorToolbarP
 		</Box>
 	);
 };
+
+const checkIfElementHasLink = ( elementId: ElementID ): boolean =>
+	!! getElementSetting< LinkPropValue >( elementId, 'link' )?.value?.destination;
+
+const toolbarButtons = {
+	clear: {
+		label: __( 'Clear', 'elementor' ),
+		icon: <MinusIcon fontSize="tiny" />,
+		action: 'clear',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().clearNodes().unsetAllMarks().run();
+		},
+	},
+	bold: {
+		label: __( 'Bold', 'elementor' ),
+		icon: <BoldIcon fontSize="tiny" />,
+		action: 'bold',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleBold().run();
+		},
+	},
+	italic: {
+		label: __( 'Italic', 'elementor' ),
+		icon: <ItalicIcon fontSize="tiny" />,
+		action: 'italic',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleItalic().run();
+		},
+	},
+	underline: {
+		label: __( 'Underline', 'elementor' ),
+		icon: <UnderlineIcon fontSize="tiny" />,
+		action: 'underline',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleUnderline().run();
+		},
+	},
+	strike: {
+		label: __( 'Strikethrough', 'elementor' ),
+		icon: <StrikethroughIcon fontSize="tiny" />,
+		action: 'strike',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleStrike().run();
+		},
+	},
+	superscript: {
+		label: __( 'Superscript', 'elementor' ),
+		icon: <SuperscriptIcon fontSize="tiny" />,
+		action: 'superscript',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleSuperscript().run();
+		},
+	},
+	subscript: {
+		label: __( 'Subscript', 'elementor' ),
+		icon: <SubscriptIcon fontSize="tiny" />,
+		action: 'subscript',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleSubscript().run();
+		},
+	},
+	link: {
+		label: __( 'Link', 'elementor' ),
+		icon: <LinkIcon fontSize="tiny" />,
+		action: 'link',
+		method: null,
+	},
+} as const;
+
+const { clear: clearButton, ...formatButtons } = toolbarButtons;
+
+const possibleFormats: FormatAction[] = Object.keys( formatButtons ) as FormatAction[];

package/src/components/inline-editor.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {
 	type DependencyList,
-	forwardRef,
+	type Dispatch,
 	type PropsWithChildren,
 	type RefObject,
+	type SetStateAction,
 	useEffect,
 	useRef,
-	useState,
 } from 'react';
-import { bindPopover, Box, ClickAwayListener, Popover, type SxProps, type Theme, usePopupState } from '@elementor/ui';
+import { Box, ClickAwayListener, type SxProps, type Theme } from '@elementor/ui';
 import Bold from '@tiptap/extension-bold';
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
@@ -21,75 +21,173 @@ import Subscript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
 import Text from '@tiptap/extension-text';
 import Underline from '@tiptap/extension-underline';
-import { type EditorView } from '@tiptap/pm/view';
+import { type EditorProps, type EditorView } from '@tiptap/pm/view';
 import { type Editor, EditorContent, useEditor } from '@tiptap/react';
 
 import { isEmpty } from '../utils/inline-editing';
-import { InlineEditorToolbar } from './inline-editor-toolbar';
 
 const ITALIC_KEYBOARD_SHORTCUT = 'i';
 const BOLD_KEYBOARD_SHORTCUT = 'b';
 const UNDERLINE_KEYBOARD_SHORTCUT = 'u';
 
-import type { ElementID } from '@elementor/editor-elements';
-
 type InlineEditorProps = {
 	value: string | null;
 	setValue: ( value: string | null ) => void;
-	attributes?: Record< string, string >;
+	editorProps?: EditorProps;
 	elementClasses?: string;
 	sx?: SxProps< Theme >;
-	onBlur?: ( event: Event ) => void;
-	showToolbar?: boolean;
+	onBlur?: () => void;
 	autofocus?: boolean;
-	getInitialPopoverPosition?: () => { left: number; top: number };
 	expectedTag?: string | null;
-	elementId?: ElementID;
+	onEditorCreate?: Dispatch< SetStateAction< Editor | null > >;
+	wrapperClassName?: string;
+	onSelectionEnd?: ( view: EditorView ) => void;
 };
 
-const INLINE_EDITOR_RESET_CLASS = 'elementor-inline-editor-reset';
-
-const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
-	const hasMounted = useRef( false );
+type WrapperProps = PropsWithChildren< {
+	containerRef: RefObject< HTMLDivElement >;
+	editor: ReturnType< typeof useEditor >;
+	sx: SxProps< Theme >;
+	onBlur?: () => void;
+	className?: string;
+} >;
 
-	useEffect( () => {
-		if ( hasMounted.current ) {
-			callback();
-		} else {
-			hasMounted.current = true;
+export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref ) => {
+	const {
+		value,
+		setValue,
+		editorProps = {},
+		elementClasses = '',
+		autofocus = false,
+		sx = {},
+		onBlur = undefined,
+		expectedTag = null,
+		onEditorCreate,
+		wrapperClassName,
+		onSelectionEnd,
+	} = props;
+
+	const containerRef = useRef< HTMLDivElement >( null );
+	const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
+
+	const onUpdate = ( { editor: updatedEditor }: { editor: Editor } ) => {
+		const newValue: string | null = updatedEditor.getHTML();
+
+		setValue( isEmpty( newValue ) ? null : newValue );
+	};
+
+	const onKeyDown = ( _: Editor[ 'view' ], event: KeyboardEvent ) => {
+		if ( event.key === 'Escape' ) {
+			onBlur?.();
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, dependencies );
-};
 
-const calcSelectionCenter = (
-	view: EditorView,
-	container: { left: number; top: number } | undefined
-): { left: number; top: number } | null => {
-	if ( ! container ) {
-		return null;
-	}
+		if ( ( ! event.metaKey && ! event.ctrlKey ) || event.altKey ) {
+			return;
+		}
 
-	const { from, to } = view.state.selection;
-	const start = view.coordsAtPos( from );
-	const end = view.coordsAtPos( to );
+		if ( [ ITALIC_KEYBOARD_SHORTCUT, BOLD_KEYBOARD_SHORTCUT, UNDERLINE_KEYBOARD_SHORTCUT ].includes( event.key ) ) {
+			event.stopPropagation();
+		}
+	};
+
+	const editedElementAttributes = ( HTMLAttributes: Record< string, unknown > ) => ( {
+		...HTMLAttributes,
+		class: elementClasses,
+	} );
+
+	const editor = useEditor( {
+		extensions: [
+			Document.extend( {
+				content: documentContentSettings,
+			} ),
+			Paragraph.extend( {
+				renderHTML( { HTMLAttributes } ) {
+					const tag = expectedTag ?? 'p';
+					return [ tag, editedElementAttributes( HTMLAttributes ), 0 ];
+				},
+			} ),
+			Heading.extend( {
+				renderHTML( { node, HTMLAttributes } ) {
+					if ( expectedTag ) {
+						return [ expectedTag, editedElementAttributes( HTMLAttributes ), 0 ];
+					}
+
+					const level = this.options.levels.includes( node.attrs.level )
+						? node.attrs.level
+						: this.options.levels[ 0 ];
+
+					return [ `h${ level }`, editedElementAttributes( HTMLAttributes ), 0 ];
+				},
+			} ).configure( {
+				levels: [ 1, 2, 3, 4, 5, 6 ],
+			} ),
+			Link.configure( {
+				openOnClick: false,
+			} ),
+			Text,
+			Bold,
+			Italic,
+			Strike,
+			Superscript,
+			Subscript,
+			Underline,
+			HardBreak.extend( {
+				addKeyboardShortcuts() {
+					return {
+						Enter: () => this.editor.commands.setHardBreak(),
+					};
+				},
+			} ),
+		],
+		content: value,
+		onUpdate,
+		autofocus,
+		editorProps: {
+			...editorProps,
+			handleDOMEvents: {
+				keydown: onKeyDown,
+			},
+			attributes: {
+				...( editorProps.attributes ?? {} ),
+				role: 'textbox',
+			},
+		},
+		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,
+		onSelectionUpdate: onSelectionEnd
+			? ( { editor: updatedEditor } ) => onSelectionEnd( updatedEditor.view )
+			: undefined,
+	} );
+
+	useOnUpdate( () => {
+		if ( ! editor ) {
+			return;
+		}
 
-	const left = ( start.left + end.left ) / 2 - container.left;
-	const top = Math.min( start.top, end.top ) - container.top;
+		const currentContent = editor.getHTML();
 
-	return { left, top };
-};
-
-type WrapperProps = PropsWithChildren< {
-	containerRef: RefObject< HTMLDivElement >;
-	editor: ReturnType< typeof useEditor >;
-	sx: SxProps< Theme >;
-	onBlur?: ( event: Event ) => void;
-} >;
+		if ( currentContent !== value ) {
+			editor.commands.setContent( value, { emitUpdate: false } );
+		}
+	}, [ editor, value ] );
+
+	return (
+		<>
+			<Wrapper
+				containerRef={ containerRef }
+				editor={ editor }
+				sx={ sx }
+				onBlur={ onBlur }
+				className={ wrapperClassName }
+			>
+				<EditorContent ref={ ref } editor={ editor } />
+			</Wrapper>
+		</>
+	);
+} );
 
-const Wrapper = ( { children, containerRef, editor, sx, onBlur }: WrapperProps ) => {
+const Wrapper = ( { children, containerRef, editor, sx, onBlur, className }: WrapperProps ) => {
 	const wrappedChildren = (
-		<Box ref={ containerRef } { ...sx }>
+		<Box ref={ containerRef } { ...sx } className={ className }>
 			{ children }
 		</Box>
 	);
@@ -104,7 +202,7 @@ const Wrapper = ( { children, containerRef, editor, sx, onBlur }: WrapperProps )
 					return;
 				}
 
-				onBlur?.( event );
+				onBlur?.();
 			} }
 		>
 			{ wrappedChildren }
@@ -114,187 +212,15 @@ const Wrapper = ( { children, containerRef, editor, sx, onBlur }: WrapperProps )
 	);
 };
 
-export const InlineEditor = forwardRef(
-	(
-		{
-			value,
-			setValue,
-			attributes = {},
-			elementClasses = '',
-			showToolbar = false,
-			autofocus = false,
-			sx = {},
-			onBlur = undefined,
-			getInitialPopoverPosition = undefined,
-			expectedTag = null,
-			elementId = undefined,
-		}: InlineEditorProps,
-		ref
-	) => {
-		const containerRef = useRef< HTMLDivElement >( null );
-		const popupState = usePopupState( { variant: 'popover', disableAutoFocus: true } );
-		const [ hasSelectedContent, setHasSelectedContent ] = useState( false );
-		const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
-		const [ selectionRect, setSelectionRect ] = useState< { left: number; top: number } | null >( null );
-
-		const onSelectionEnd = ( view: EditorView ) => {
-			const hasSelection = ! view.state.selection.empty;
-			setHasSelectedContent( hasSelection );
-
-			if ( hasSelection ) {
-				const container = containerRef.current?.getBoundingClientRect();
-				setSelectionRect( calcSelectionCenter( view, container ) );
-			} else {
-				setSelectionRect( null );
-			}
-
-			queueMicrotask( () => view.focus() );
-		};
-
-		const onKeyDown = ( _: EditorView, event: KeyboardEvent ) => {
-			if ( event.key === 'Escape' ) {
-				onBlur?.( event );
-			}
-
-			if ( ( ! event.metaKey && ! event.ctrlKey ) || event.altKey ) {
-				return;
-			}
-
-			if (
-				[ ITALIC_KEYBOARD_SHORTCUT, BOLD_KEYBOARD_SHORTCUT, UNDERLINE_KEYBOARD_SHORTCUT ].includes( event.key )
-			) {
-				event.stopPropagation();
-			}
-		};
-
-		const toolbarRelatedListeners = showToolbar
-			? {
-					mouseup: onSelectionEnd,
-					keyup: onSelectionEnd,
-					keydown: onKeyDown,
-			  }
-			: undefined;
-
-		const onUpdate = ( { editor: updatedEditor }: { editor: Editor } ) => {
-			const newValue: string | null = updatedEditor.getHTML();
-
-			setValue( isEmpty( newValue ) ? null : newValue );
-		};
-
-		const classes = `${ INLINE_EDITOR_RESET_CLASS } ${ elementClasses }`;
-
-		const editor = useEditor( {
-			extensions: [
-				Document.extend( {
-					content: documentContentSettings,
-				} ),
-				Paragraph.extend( {
-					renderHTML( { HTMLAttributes } ) {
-						const tag = expectedTag ?? 'p';
-						return [ tag, { ...HTMLAttributes, class: classes }, 0 ];
-					},
-				} ),
-				Heading.extend( {
-					renderHTML( { node, HTMLAttributes } ) {
-						if ( expectedTag ) {
-							return [ expectedTag, { ...HTMLAttributes, class: classes }, 0 ];
-						}
-
-						const level = this.options.levels.includes( node.attrs.level )
-							? node.attrs.level
-							: this.options.levels[ 0 ];
-
-						return [ `h${ level }`, { ...HTMLAttributes, class: classes }, 0 ];
-					},
-				} ).configure( {
-					levels: [ 1, 2, 3, 4, 5, 6 ],
-				} ),
-				Link.configure( {
-					openOnClick: false,
-				} ),
-				Text,
-				Bold,
-				Italic,
-				Strike,
-				Superscript,
-				Subscript,
-				Underline,
-				HardBreak.extend( {
-					addKeyboardShortcuts() {
-						return {
-							Enter: () => this.editor.commands.setHardBreak(),
-						};
-					},
-				} ),
-			],
-			content: value,
-			onUpdate,
-			autofocus,
-			editorProps: {
-				attributes: {
-					...attributes,
-					class: attributes.class ?? '',
-					role: 'textbox',
-				},
-				handleDOMEvents: toolbarRelatedListeners,
-			},
-		} );
-
-		useOnUpdate( () => {
-			if ( ! editor ) {
-				return;
-			}
-
-			const currentContent = editor.getHTML();
-
-			if ( currentContent !== value ) {
-				editor.commands.setContent( value, { emitUpdate: false } );
-			}
-		}, [ editor, value ] );
-
-		const computePopupPosition = () => {
-			if ( ! selectionRect ) {
-				return { left: 0, top: 0 };
-			}
-
-			const container = containerRef.current?.getBoundingClientRect();
-			if ( ! container ) {
-				return { left: 0, top: 0 };
-			}
-
-			const initial = getInitialPopoverPosition?.() ?? { left: 0, top: 0 };
-
-			return {
-				left: container.left + selectionRect.left + initial.left,
-				top: container.top + selectionRect.top + initial.top,
-			};
-		};
+const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
+	const hasMounted = useRef( false );
 
-		return (
-			<>
-				<Wrapper containerRef={ containerRef } editor={ editor } sx={ sx } onBlur={ onBlur }>
-					<EditorContent ref={ ref } editor={ editor } />
-				</Wrapper>
-				{ showToolbar && containerRef.current && (
-					<Popover
-						slotProps={ {
-							root: {
-								sx: {
-									pointerEvents: 'none',
-								},
-							},
-						} }
-						{ ...bindPopover( popupState ) }
-						open={ hasSelectedContent && selectionRect !== null }
-						anchorReference="anchorPosition"
-						anchorPosition={ computePopupPosition() }
-						anchorOrigin={ { vertical: 'top', horizontal: 'center' } }
-						transformOrigin={ { vertical: 'bottom', horizontal: 'center' } }
-					>
-						<InlineEditorToolbar editor={ editor } elementId={ elementId } />
-					</Popover>
-				) }
-			</>
-		);
-	}
-);
+	useEffect( () => {
+		if ( hasMounted.current ) {
+			callback();
+		} else {
+			hasMounted.current = true;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, dependencies );
+};

package/src/index.ts

@@ -63,6 +63,7 @@ export type { SetValue, SetValueMeta } from './bound-prop-context/prop-context';
 export type { ExtendedOption, Unit, LengthUnit, AngleUnit, TimeUnit } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
+export type { InlineEditorToolbarProps } from './components/inline-editor-toolbar';
 
 // providers
 export {