@elementor/editor-controls 3.35.0-367 → 3.35.0-369

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

package/src/components/inline-editor.tsx

@@ -44,6 +44,24 @@ const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void
 	}, dependencies );
 };
 
+const calcSelectionCenter = (
+	view: EditorView,
+	container: { left: number; top: number } | undefined
+): { left: number; top: number } | null => {
+	if ( ! container ) {
+		return null;
+	}
+
+	const { from, to } = view.state.selection;
+	const start = view.coordsAtPos( from );
+	const end = view.coordsAtPos( to );
+
+	const left = ( start.left + end.left ) / 2 - container.left;
+	const top = Math.min( start.top, end.top ) - container.top;
+
+	return { left, top };
+};
+
 export const InlineEditor = React.forwardRef(
 	(
 		{
@@ -63,9 +81,19 @@ export const InlineEditor = React.forwardRef(
 		const popupState = usePopupState( { variant: 'popover', disableAutoFocus: true } );
 		const [ hasSelectedContent, setHasSelectedContent ] = React.useState( false );
 		const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
+		const [ selectionRect, setSelectionRect ] = React.useState< { left: number; top: number } | null >( null );
 
 		const onSelectionEnd = ( view: EditorView ) => {
-			setHasSelectedContent( () => ! view.state.selection.empty );
+			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() );
 		};
 
@@ -157,13 +185,20 @@ 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;
+			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: left + initial.left,
-				top: top + initial.top,
+				left: container.left + selectionRect.left + initial.left,
+				top: container.top + selectionRect.top + initial.top,
 			};
 		};
 
@@ -209,11 +244,11 @@ export const InlineEditor = React.forwardRef(
 							},
 						} }
 						{ ...bindPopover( popupState ) }
-						open={ hasSelectedContent }
+						open={ hasSelectedContent && selectionRect !== null }
 						anchorReference="anchorPosition"
 						anchorPosition={ computePopupPosition() }
-						anchorOrigin={ { vertical: 'top', horizontal: 'left' } }
-						transformOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+						anchorOrigin={ { vertical: 'top', horizontal: 'center' } }
+						transformOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 					>
 						<InlineEditorToolbar editor={ editor } />
 					</Popover>