@elementor/editor-controls 4.1.0-740 → 4.1.0-742

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.1.0-740",
+  "version": "4.1.0-742",
   "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.1.0-740",
-    "@elementor/editor-elements": "4.1.0-740",
-    "@elementor/editor-props": "4.1.0-740",
-    "@elementor/editor-responsive": "4.1.0-740",
-    "@elementor/editor-ui": "4.1.0-740",
-    "@elementor/editor-v1-adapters": "4.1.0-740",
-    "@elementor/env": "4.1.0-740",
-    "@elementor/http-client": "4.1.0-740",
+    "@elementor/editor-current-user": "4.1.0-742",
+    "@elementor/editor-elements": "4.1.0-742",
+    "@elementor/editor-props": "4.1.0-742",
+    "@elementor/editor-responsive": "4.1.0-742",
+    "@elementor/editor-ui": "4.1.0-742",
+    "@elementor/editor-v1-adapters": "4.1.0-742",
+    "@elementor/env": "4.1.0-742",
+    "@elementor/http-client": "4.1.0-742",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-740",
-    "@elementor/events": "4.1.0-740",
-    "@elementor/query": "4.1.0-740",
-    "@elementor/session": "4.1.0-740",
+    "@elementor/locations": "4.1.0-742",
+    "@elementor/events": "4.1.0-742",
+    "@elementor/query": "4.1.0-742",
+    "@elementor/session": "4.1.0-742",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-740",
-    "@elementor/wp-media": "4.1.0-740",
+    "@elementor/utils": "4.1.0-742",
+    "@elementor/wp-media": "4.1.0-742",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/inline-editor.tsx

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import {
-	type DependencyList,
-	type Dispatch,
-	type PropsWithChildren,
-	type RefObject,
-	type SetStateAction,
-	useEffect,
-	useRef,
-} from 'react';
-import { Box, ClickAwayListener, type SxProps, type Theme } from '@elementor/ui';
+import { type DependencyList, type Dispatch, type SetStateAction, useEffect, useRef } from 'react';
+import { Box, 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';
@@ -42,16 +34,9 @@ type InlineEditorProps = {
 	onEditorCreate?: Dispatch< SetStateAction< Editor | null > >;
 	wrapperClassName?: string;
 	onSelectionEnd?: ( view: EditorView ) => void;
+	mountElement?: HTMLElement | null;
 };
 
-type WrapperProps = PropsWithChildren< {
-	containerRef: RefObject< HTMLDivElement >;
-	editor: ReturnType< typeof useEditor >;
-	sx: SxProps< Theme >;
-	onBlur?: () => void;
-	className?: string;
-} >;
-
 export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref ) => {
 	const {
 		value,
@@ -65,9 +50,12 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		onEditorCreate,
 		wrapperClassName,
 		onSelectionEnd,
+		mountElement = null,
 	} = props;
 
 	const containerRef = useRef< HTMLDivElement >( null );
+	const onBlurRef = useRef( onBlur );
+	onBlurRef.current = onBlur;
 	const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
 
 	const onUpdate = ( { editor: updatedEditor }: { editor: Editor } ) => {
@@ -78,7 +66,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 
 	const onKeyDown = ( _: Editor[ 'view' ], event: KeyboardEvent ) => {
 		if ( event.key === 'Escape' ) {
-			onBlur?.();
+			onBlurRef.current?.();
 		}
 
 		if ( ( ! event.metaKey && ! event.ctrlKey ) || event.altKey ) {
@@ -96,6 +84,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 	} );
 
 	const editor = useEditor( {
+		...( mountElement ? { element: mountElement } : {} ),
 		extensions: [
 			Document.extend( {
 				content: documentContentSettings,
@@ -153,6 +142,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			},
 		},
 		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,
+		onBlur: mountElement ? undefined : () => onBlurRef.current?.(),
 		onSelectionUpdate: onSelectionEnd
 			? ( { editor: updatedEditor } ) => onSelectionEnd( updatedEditor.view )
 			: undefined,
@@ -170,47 +160,16 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		}
 	}, [ editor, value ] );
 
-	return (
-		<>
-			<Wrapper
-				containerRef={ containerRef }
-				editor={ editor }
-				sx={ sx }
-				onBlur={ onBlur }
-				className={ wrapperClassName }
-			>
-				<EditorContent ref={ ref } editor={ editor } />
-			</Wrapper>
-		</>
-	);
-} );
+	if ( mountElement ) {
+		return null;
+	}
 
-const Wrapper = ( { children, containerRef, editor, sx, onBlur, className }: WrapperProps ) => {
-	const wrappedChildren = (
-		<Box ref={ containerRef } { ...sx } className={ className }>
-			{ children }
+	return (
+		<Box ref={ containerRef } sx={ sx } className={ wrapperClassName }>
+			<EditorContent ref={ ref } editor={ editor } />
 		</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?.();
-			} }
-		>
-			{ wrappedChildren }
-		</ClickAwayListener>
-	) : (
-		<>{ wrappedChildren }</>
-	);
-};
+} );
 
 const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
 	const hasMounted = useRef( false );