@elementor/editor-controls 3.35.0-350 → 3.35.0-352

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": "3.35.0-350",
+  "version": "3.35.0-352",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,29 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-350",
-    "@elementor/editor-elements": "3.35.0-350",
-    "@elementor/editor-props": "3.35.0-350",
-    "@elementor/editor-responsive": "3.35.0-350",
-    "@elementor/editor-ui": "3.35.0-350",
-    "@elementor/editor-v1-adapters": "3.35.0-350",
-    "@elementor/env": "3.35.0-350",
-    "@elementor/http-client": "3.35.0-350",
+    "@elementor/editor-current-user": "3.35.0-352",
+    "@elementor/editor-elements": "3.35.0-352",
+    "@elementor/editor-props": "3.35.0-352",
+    "@elementor/editor-responsive": "3.35.0-352",
+    "@elementor/editor-ui": "3.35.0-352",
+    "@elementor/editor-v1-adapters": "3.35.0-352",
+    "@elementor/env": "3.35.0-352",
+    "@elementor/http-client": "3.35.0-352",
     "@elementor/icons": "^1.62.0",
-    "@elementor/locations": "3.35.0-350",
-    "@elementor/mixpanel": "3.35.0-350",
-    "@elementor/query": "3.35.0-350",
-    "@elementor/session": "3.35.0-350",
+    "@elementor/locations": "3.35.0-352",
+    "@elementor/mixpanel": "3.35.0-352",
+    "@elementor/query": "3.35.0-352",
+    "@elementor/session": "3.35.0-352",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-350",
-    "@elementor/wp-media": "3.35.0-350",
+    "@elementor/utils": "3.35.0-352",
+    "@elementor/wp-media": "3.35.0-352",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",
     "@tiptap/extension-hard-break": "^3.11.1",
+    "@tiptap/extension-heading": "^3.10.4",
     "@tiptap/extension-italic": "^3.11.1",
+    "@tiptap/extension-paragraph": "^3.10.4",
     "@tiptap/extension-strike": "^3.11.1",
     "@tiptap/extension-subscript": "^3.11.1",
     "@tiptap/extension-superscript": "^3.11.1",

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

@@ -105,7 +105,7 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 	const [ urlValue, setUrlValue ] = useState( '' );
 	const [ openInNewTab, setOpenInNewTab ] = useState( false );
 	const toolbarRef = useRef< HTMLDivElement >( null );
-	const popupState = usePopupState( { variant: 'popover' } );
+	const linkPopupState = usePopupState( { variant: 'popover' } );
 
 	const editorState = useEditorState( {
 		editor,
@@ -118,7 +118,7 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 		const linkAttrs = editor.getAttributes( 'link' );
 		setUrlValue( linkAttrs.href || '' );
 		setOpenInNewTab( linkAttrs.target === '_blank' );
-		popupState.open( toolbarRef.current );
+		linkPopupState.open( toolbarRef.current );
 	};
 
 	const handleUrlChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -142,16 +142,17 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 		} else {
 			editor.chain().focus().unsetLink().run();
 		}
-		popupState.close();
+		linkPopupState.close();
 	};
 
+	React.useEffect( () => {
+		editor?.commands?.focus();
+	}, [ editor ] );
+
 	return (
 		<Box
 			ref={ toolbarRef }
 			sx={ {
-				position: 'absolute',
-				left: 0,
-				top: -40,
 				display: 'inline-flex',
 				gap: 0.5,
 				padding: 0.5,
@@ -159,7 +160,8 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 				backgroundColor: 'background.paper',
 				boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
 				alignItems: 'center',
-				visibility: popupState.isOpen ? 'hidden' : 'visible',
+				visibility: linkPopupState.isOpen ? 'hidden' : 'visible',
+				pointerEvents: linkPopupState.isOpen ? 'none' : 'all',
 			} }
 		>
 			<Tooltip title={ clearButton.label } placement="top" sx={ { borderRadius: '8px' } }>
@@ -194,9 +196,15 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 							value={ button.action }
 							aria-label={ button.label }
 							size="tiny"
-							onClick={ () =>
-								button.action === 'link' ? handleLinkClick() : button.method?.( editor )
-							}
+							onClick={ () => {
+								if ( button.action === 'link' ) {
+									handleLinkClick();
+								} else {
+									button.method?.( editor );
+								}
+
+								editor?.commands?.focus();
+							} }
 						>
 							{ button.icon }
 						</ToggleButton>
@@ -204,7 +212,7 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 				) ) }
 			</ToggleButtonGroup>
 			<UrlPopover
-				popupState={ popupState }
+				popupState={ linkPopupState }
 				anchorRef={ toolbarRef }
 				restoreValue={ handleUrlSubmit }
 				value={ urlValue }

package/src/components/inline-editor.tsx

@@ -1,28 +1,34 @@
 import * as React from 'react';
-import { type DependencyList, type ForwardedRef, useEffect, useRef } from 'react';
-import { Box, type SxProps, type Theme } from '@elementor/ui';
+import { type DependencyList, useEffect, useRef } from 'react';
+import { bindPopover, Box, ClickAwayListener, Popover, type SxProps, type Theme, usePopupState } from '@elementor/ui';
 import Bold from '@tiptap/extension-bold';
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
+import Heading from '@tiptap/extension-heading';
 import Italic from '@tiptap/extension-italic';
 import Link from '@tiptap/extension-link';
+import Paragraph from '@tiptap/extension-paragraph';
 import Strike from '@tiptap/extension-strike';
 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 AnyExtension, EditorContent, useEditor } from '@tiptap/react';
+import { type EditorView } from '@tiptap/pm/view';
+import { EditorContent, useEditor } from '@tiptap/react';
 
+import { isEmpty } from '../utils/inline-editing';
 import { InlineEditorToolbar } from './inline-editor-toolbar';
 
 type InlineEditorProps = {
-	value: string;
-	setValue: ( value: string ) => void;
+	value: string | null;
+	setValue: ( value: string | null ) => void;
 	attributes?: Record< string, string >;
 	sx?: SxProps< Theme >;
+	onBlur?: ( event: Event ) => void;
 	showToolbar?: boolean;
-	// UnstableFloatingActionBar sends props to be used for event handling for floating actions.
-	props?: React.ComponentProps< 'div' >;
+	autofocus?: boolean;
+	getInitialPopoverPosition?: () => { left: number; top: number };
+	expectedTag?: string | null;
 };
 
 const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
@@ -40,24 +46,79 @@ const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void
 
 export const InlineEditor = React.forwardRef(
 	(
-		{ value, setValue, attributes = {}, showToolbar = false, sx, ...props }: InlineEditorProps,
-		ref: ForwardedRef< HTMLDivElement >
+		{
+			value,
+			setValue,
+			attributes = {},
+			showToolbar = false,
+			autofocus = false,
+			sx = {},
+			onBlur = undefined,
+			getInitialPopoverPosition = undefined,
+			expectedTag = null,
+		}: InlineEditorProps,
+		ref
 	) => {
+		const containerRef = React.useRef< HTMLDivElement >( null );
+		const popupState = usePopupState( { variant: 'popover', disableAutoFocus: true } );
+		const [ hasSelectedContent, setHasSelectedContent ] = React.useState( false );
+		const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
+
+		const onSelectionEnd = ( view: EditorView ) => {
+			setHasSelectedContent( () => ! view.state.selection.empty );
+			queueMicrotask( () => view.focus() );
+		};
+
+		const onKeyDown = ( _: EditorView, event: KeyboardEvent ) => {
+			if ( event.key === 'Escape' ) {
+				onBlur?.( event );
+			}
+		};
+
+		const toolbarRelatedListeners = showToolbar
+			? {
+					mouseup: onSelectionEnd,
+					keyup: onSelectionEnd,
+					keydown: onKeyDown,
+			  }
+			: undefined;
+
 		const editor = useEditor( {
 			extensions: [
 				Document.extend( {
-					content: 'inline*',
+					content: documentContentSettings,
+				} ),
+				Paragraph.extend( {
+					renderHTML( { HTMLAttributes } ) {
+						const tag = expectedTag ?? 'p';
+						return [ tag, { ...HTMLAttributes, style: 'margin:0;padding:0;' }, 0 ];
+					},
+				} ),
+				Heading.extend( {
+					renderHTML( { node, HTMLAttributes } ) {
+						if ( expectedTag ) {
+							return [ expectedTag, { ...HTMLAttributes, style: 'margin:0;padding:0;' }, 0 ];
+						}
+
+						const level = this.options.levels.includes( node.attrs.level )
+							? node.attrs.level
+							: this.options.levels[ 0 ];
+
+						return [ `h${ level }`, { ...HTMLAttributes, style: 'margin:0;padding:0;' }, 0 ];
+					},
+				} ).configure( {
+					levels: [ 1, 2, 3, 4, 5, 6 ],
+				} ),
+				Link.configure( {
+					openOnClick: false,
 				} ),
 				Text,
 				Bold,
 				Italic,
 				Strike,
-				Underline,
 				Superscript,
 				Subscript,
-				Link.configure( {
-					openOnClick: false,
-				} ),
+				Underline,
 				HardBreak.extend( {
 					addKeyboardShortcuts() {
 						return {
@@ -65,9 +126,22 @@ export const InlineEditor = React.forwardRef(
 						};
 					},
 				} ),
-			] as AnyExtension[],
+			],
 			content: value,
-			onUpdate: ( { editor: updatedEditor } ) => setValue( updatedEditor.getHTML() ),
+			onUpdate: ( { editor: updatedEditor } ) => {
+				const newValue: string | null = updatedEditor.getHTML();
+
+				setValue( isEmpty( newValue ) ? null : newValue );
+			},
+			autofocus,
+			editorProps: {
+				attributes: {
+					...attributes,
+					class: attributes.class ?? '',
+					role: 'textbox',
+				},
+				handleDOMEvents: toolbarRelatedListeners,
+			},
 		} );
 
 		useOnUpdate( () => {
@@ -82,40 +156,69 @@ export const InlineEditor = React.forwardRef(
 			}
 		}, [ editor, value ] );
 
+		const computePopupPosition = () => {
+			const positionFallback = { left: 0, top: 0 };
+			const { left, top } = containerRef.current?.getBoundingClientRect() ?? positionFallback;
+			const initial = getInitialPopoverPosition?.() ?? positionFallback;
+
+			return {
+				left: left + initial.left,
+				top: top + initial.top,
+			};
+		};
+
+		const Wrapper = ( { children }: React.PropsWithChildren ) => {
+			const wrappedChildren = (
+				<Box ref={ containerRef } { ...sx }>
+					{ children }
+				</Box>
+			);
+
+			return onBlur ? (
+				<ClickAwayListener
+					onClickAway={ ( event: PointerEvent ) => {
+						if (
+							containerRef.current?.contains( event.target as Node ) ||
+							editor.view.dom.contains( event.target as Node )
+						) {
+							return;
+						}
+
+						onBlur?.( event );
+					} }
+				>
+					{ wrappedChildren }
+				</ClickAwayListener>
+			) : (
+				<>{ wrappedChildren }</>
+			);
+		};
+
 		return (
-			<Box
-				ref={ ref }
-				sx={ {
-					p: 0.8,
-					border: '1px solid',
-					borderColor: 'grey.200',
-					borderRadius: '8px',
-					transition: 'border-color .2s ease, box-shadow .2s ease',
-					'&:hover': {
-						borderColor: 'black',
-					},
-					'&:focus-within': {
-						borderColor: 'black',
-						boxShadow: '0 0 0 1px black',
-					},
-					'& .ProseMirror:focus': {
-						outline: 'none',
-					},
-					'& .ProseMirror': {
-						minHeight: '70px',
-						fontSize: '12px',
-						'& a': {
-							color: 'inherit',
-						},
-					},
-					...sx,
-				} }
-				{ ...attributes }
-				{ ...props }
-			>
-				{ showToolbar && <InlineEditorToolbar editor={ editor } /> }
-				<EditorContent editor={ editor } />
-			</Box>
+			<>
+				<Wrapper>
+					<EditorContent ref={ ref } editor={ editor } />
+				</Wrapper>
+				{ showToolbar && containerRef.current && (
+					<Popover
+						slotProps={ {
+							root: {
+								sx: {
+									pointerEvents: 'none',
+								},
+							},
+						} }
+						{ ...bindPopover( popupState ) }
+						open={ hasSelectedContent }
+						anchorReference="anchorPosition"
+						anchorPosition={ computePopupPosition() }
+						anchorOrigin={ { vertical: 'top', horizontal: 'left' } }
+						transformOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+					>
+						<InlineEditorToolbar editor={ editor } />
+					</Popover>
+				) }
+			</>
 		);
 	}
 );

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

@@ -1,18 +1,62 @@
 import * as React from 'react';
 import { htmlPropTypeUtil } from '@elementor/editor-props';
+import { Box, type SxProps, type Theme } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import { InlineEditor } from '../components/inline-editor';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const InlineEditingControl = createControl( () => {
-	const { value, setValue } = useBoundProp( htmlPropTypeUtil );
-	const handleChange = ( newValue: unknown ) => setValue( newValue as string );
+export const InlineEditingControl = createControl(
+	( {
+		sx,
+		attributes,
+		props,
+	}: {
+		sx?: SxProps< Theme >;
+		attributes?: Record< string, string >;
+		props?: React.ComponentProps< 'div' >;
+	} ) => {
+		const { value, setValue } = useBoundProp( htmlPropTypeUtil );
+		const handleChange = ( newValue: unknown ) => setValue( newValue as string );
 
-	return (
-		<ControlActions>
-			<InlineEditor value={ value || '' } setValue={ handleChange } />
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<Box
+					sx={ {
+						p: 0.8,
+						border: '1px solid',
+						borderColor: 'grey.200',
+						borderRadius: '8px',
+						transition: 'border-color .2s ease, box-shadow .2s ease',
+						'&:hover': {
+							borderColor: 'black',
+						},
+						'&:focus-within': {
+							borderColor: 'black',
+							boxShadow: '0 0 0 1px black',
+						},
+						'& .ProseMirror:focus': {
+							outline: 'none',
+						},
+						'& .ProseMirror': {
+							minHeight: '70px',
+							fontSize: '12px',
+							'& a': {
+								color: 'inherit',
+							},
+						},
+						'.strip-styles *': {
+							all: 'unset',
+						},
+						...sx,
+					} }
+					{ ...attributes }
+					{ ...props }
+				>
+					<InlineEditor value={ value || '' } setValue={ handleChange } />
+				</Box>
+			</ControlActions>
+		);
+	}
+);

package/src/index.ts

@@ -35,8 +35,6 @@ export { enqueueFont } from './controls/font-family-control/enqueue-font';
 export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
 export { DateTimeControl } from './controls/date-time-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
-export { InlineEditor } from './components/inline-editor';
-export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
@@ -51,6 +49,8 @@ export {
 } from './components/repeater/repeater';
 export { FloatingActionsBar } from './components/floating-bar';
 export { PopoverGridContainer } from './components/popover-grid-container';
+export { InlineEditor } from './components/inline-editor';
+export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 
 // types
 export type { ControlComponent } from './create-control';

package/src/utils/inline-editing.ts

@@ -0,0 +1,11 @@
+export function isEmpty( value: string | null = '' ) {
+	if ( ! value ) {
+		return true;
+	}
+
+	const pseudoElement = document.createElement( 'div' );
+
+	pseudoElement.innerHTML = value;
+
+	return ! pseudoElement.textContent?.length;
+}