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

package/dist/index.js

@@ -6224,6 +6224,17 @@ var useOnUpdate = (callback, dependencies) => {
     }
   }, dependencies);
 };
+var calcSelectionCenter = (view, container) => {
+  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 };
+};
 var InlineEditor = React101.forwardRef(
   ({
     value,
@@ -6240,8 +6251,16 @@ var InlineEditor = React101.forwardRef(
     const popupState = (0, import_ui87.usePopupState)({ variant: "popover", disableAutoFocus: true });
     const [hasSelectedContent, setHasSelectedContent] = React101.useState(false);
     const documentContentSettings = !!expectedTag ? "block+" : "inline*";
+    const [selectionRect, setSelectionRect] = React101.useState(null);
     const onSelectionEnd = (view) => {
-      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());
     };
     const onKeyDown = (_, event) => {
@@ -6319,12 +6338,17 @@ var InlineEditor = React101.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
       };
     };
     const Wrapper = ({ children }) => {
@@ -6353,11 +6377,11 @@ var InlineEditor = React101.forwardRef(
           }
         },
         ...(0, import_ui87.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" }
       },
       /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor })
     ));