@elementor/editor-canvas 4.0.0-512 → 4.0.0-513

package/dist/index.js

@@ -1493,8 +1493,8 @@ function escapeURL(value) {
 
 // src/legacy/create-element-type.ts
 function createElementType(type) {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -1504,8 +1504,8 @@ function createElementType(type) {
   };
 }
 function createElementViewClassDeclaration() {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.views.Widget {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.views.Widget {
     // Dispatch `render` event so the overlay layer will be updated
     onRender(...args) {
       super.onRender(...args);
@@ -1551,7 +1551,7 @@ function createElementViewClassDeclaration() {
       );
     }
     #dispatchPreviewEvent(eventType) {
-      legacyWindow2.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
+      legacyWindow.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
         new CustomEvent(eventType, {
           detail: {
             id: this.model.get("id"),
@@ -1711,14 +1711,11 @@ function createTemplatedElementView({
 }
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-var React5 = __toESM(require("react"));
-var import_react11 = require("react");
+var React6 = __toESM(require("react"));
 var import_client = require("react-dom/client");
-var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_ui4 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
 
 // src/legacy/replacements/base.ts
@@ -1759,6 +1756,207 @@ var ReplacementBase = class {
   }
 };
 
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+var React5 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_ui4 = require("@elementor/ui");
+var import_react12 = require("@floating-ui/react");
+
+// src/legacy/replacements/inline-editing/inline-editing-utils.ts
+var INLINE_EDITING_PROPERTY_PER_TYPE = {
+  "e-form-label": "text",
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var calcSelectionCenterOffsets = (view) => {
+  const frameWindow = view.root?.defaultView;
+  const selection = frameWindow?.getSelection();
+  const editorContainer = view.dom;
+  if (!selection || !editorContainer) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  const selectionRect = range.getBoundingClientRect();
+  const editorContainerRect = editorContainer.getBoundingClientRect();
+  if (!selectionRect || !editorContainerRect) {
+    return null;
+  }
+  const verticalOffset = selectionRect.top - editorContainerRect.top;
+  const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
+  const horizontalOffset = selectionCenter - editorContainerRect.left;
+  return { left: horizontalOffset, top: verticalOffset };
+};
+var getComputedStyle = (styles, offsets) => {
+  const transform = extractTransformValue(styles);
+  return transform ? {
+    ...styles,
+    marginLeft: `${offsets.left}px`,
+    marginTop: `${offsets.top}px`,
+    pointerEvents: "none"
+  } : {
+    display: "none"
+  };
+};
+var extractTransformValue = (styles) => {
+  const translateRegex = /translate\([^)]*\)\s?/g;
+  const numericValuesRegex = /(-?\d+\.?\d*)/g;
+  const translateValue = styles?.transform?.match(translateRegex)?.[0];
+  const values = translateValue?.match(numericValuesRegex);
+  if (!translateValue || !values) {
+    return null;
+  }
+  const [numericX, numericY] = values.map(Number);
+  if (!numericX || !numericY) {
+    return null;
+  }
+  return styles.transform;
+};
+
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
+var NAVIGATOR_SELECTOR = "#elementor-navigator";
+var EDITING_PANEL = "#elementor-panel";
+var EDITOR_ELEMENTS_OUT_OF_IFRAME = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, EDITING_PANEL];
+var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
+var CanvasInlineEditor = ({
+  elementClasses,
+  initialValue,
+  expectedTag,
+  rootElement,
+  id,
+  setValue,
+  onBlur
+}) => {
+  const [selectionOffsets, setSelectionOffsets] = (0, import_react11.useState)(null);
+  const [editor, setEditor] = (0, import_react11.useState)(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    setSelectionOffsets(hasSelection ? calcSelectionCenterOffsets(view) : null);
+  };
+  useOnClickOutsideIframe(onBlur);
+  return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
+			.${EDITOR_WRAPPER_SELECTOR}, .${EDITOR_WRAPPER_SELECTOR} > * {
+				height: 100%;
+			}
+			.ProseMirror > * {
+				height: 100%;
+			}
+			`), /* @__PURE__ */ React5.createElement(
+    import_editor_controls2.InlineEditor,
+    {
+      onEditorCreate: setEditor,
+      editorProps: {
+        attributes: {
+          style: "outline: none;overflow-wrap: normal;height:100%"
+        }
+      },
+      elementClasses,
+      value: initialValue,
+      setValue,
+      onBlur,
+      autofocus: true,
+      expectedTag,
+      wrapperClassName: EDITOR_WRAPPER_SELECTOR,
+      onSelectionEnd
+    }
+  ), selectionOffsets && editor && /* @__PURE__ */ React5.createElement(
+    InlineEditingToolbarWrapper,
+    {
+      expectedTag,
+      editor,
+      rootElement,
+      id,
+      selectionOffsets
+    }
+  ));
+};
+var InlineEditingOverlay = ({
+  expectedTag,
+  rootElement,
+  id
+}) => {
+  const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
+  const [overlayRefElement, setOverlayElement] = (0, import_react11.useState)(inlineEditedElement);
+  (0, import_react11.useEffect)(() => {
+    setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
+  }, [expectedTag, rootElement]);
+  return overlayRefElement ? /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
+};
+var InlineEditingToolbarWrapper = ({
+  expectedTag,
+  editor,
+  rootElement,
+  id,
+  selectionOffsets
+}) => {
+  const [element, setElement] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    setElement(getInlineEditorElement(rootElement, expectedTag));
+  }, [expectedTag, rootElement]);
+  return element ? /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { element, editor, id, selectionOffsets }) : null;
+};
+var InlineEditingToolbar = ({
+  element,
+  editor,
+  id,
+  selectionOffsets
+}) => {
+  const { floating } = useFloatingOnElement({
+    element,
+    isSelected: true
+  });
+  const { getFloatingProps, getReferenceProps } = (0, import_react12.useInteractions)();
+  const style = getComputedStyle(floating.styles, selectionOffsets);
+  useBindReactPropsToElement(element, getReferenceProps);
+  return /* @__PURE__ */ React5.createElement(import_react12.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    import_ui4.Box,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        pointerEvents: "none"
+      },
+      role: "presentation",
+      ...getFloatingProps({ style })
+    },
+    floating.styles.transform && /* @__PURE__ */ React5.createElement(
+      import_ui4.Box,
+      {
+        sx: {
+          position: "relative",
+          transform: "translateY(-100%)",
+          height: "max-content"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        import_editor_controls2.InlineEditorToolbar,
+        {
+          editor,
+          elementId: id,
+          sx: {
+            transform: "translateX(-50%)"
+          }
+        }
+      )
+    )
+  ));
+};
+var getInlineEditorElement = (elementWrapper, expectedTag) => {
+  return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
+};
+var useOnClickOutsideIframe = (handleUnmount) => {
+  const asyncUnmountInlineEditor = React5.useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  (0, import_react11.useEffect)(() => {
+    EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+      (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
+    );
+    return () => EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+      (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
+    );
+  }, []);
+};
+
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
 var import_editor_props3 = require("@elementor/editor-props");
 var hasKey = (propType) => {
@@ -1788,32 +1986,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   return import_editor_props3.htmlPropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
 };
 
-// src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var INLINE_EDITING_PROPERTY_PER_TYPE = {
-  "e-form-label": "text",
-  "e-heading": "title",
-  "e-paragraph": "paragraph"
-};
-var legacyWindow = window;
-var getInitialPopoverPosition = () => {
-  const positionFallback = { left: 0, top: 0 };
-  const iFrameElement = legacyWindow?.elementor?.$preview?.get(0);
-  const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
-  const previewElement = legacyWindow?.elementor?.$previewWrapper?.get(0);
-  const previewPosition = previewElement ? { left: previewElement.scrollLeft, top: previewElement.scrollTop } : positionFallback;
-  return {
-    left: iFramePosition.left + previewPosition.left,
-    top: iFramePosition.top + previewPosition.top
-  };
-};
-
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
-var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
-var NAVIGATOR_SELECTOR = "#elementor-navigator";
-var V4_EDITING_PANEL = "main.MuiBox-root";
-var V3_EDITING_PANEL = "#elementor-panel-content-wrapper";
-var BLUR_TRIGGERING_SELECTORS = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL];
 var InlineEditingReplacement = class extends ReplacementBase {
   inlineEditorRoot = null;
   handlerAttached = false;
@@ -1827,7 +2001,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return this.isInlineEditingEligible();
+    return this.isInlineEditingEligible() && (0, import_editor_v1_adapters9.getCurrentEditMode)() === "edit";
   }
   handleRenderInlineEditor = () => {
     if (this.isEditingModeActive() || !this.isInlineEditingEligible()) {
@@ -1973,65 +2147,26 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const InlineEditorApp = this.InlineEditorApp;
-    const wrapperClasses = "elementor";
     const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const propValue = this.getExtractedContentValue();
+    const expectedTag = this.getExpectedTag();
     this.element.innerHTML = "";
     this.inlineEditorRoot = (0, import_client.createRoot)(this.element);
     this.inlineEditorRoot.render(
-      /* @__PURE__ */ React5.createElement(InlineEditorApp, { wrapperClasses, elementClasses })
-    );
-  }
-  InlineEditorApp = ({ wrapperClasses, elementClasses }) => {
-    const propValue = this.getExtractedContentValue();
-    const expectedTag = this.getExpectedTag();
-    const wrapperRef = (0, import_react11.useRef)(null);
-    const [isWrapperRendered, setIsWrapperRendered] = (0, import_react11.useState)(false);
-    (0, import_react11.useEffect)(() => {
-      setIsWrapperRendered(!!wrapperRef.current);
-      BLUR_TRIGGERING_SELECTORS.forEach(
-        (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
-      );
-      return () => BLUR_TRIGGERING_SELECTORS.forEach(
-        (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
-      );
-    }, []);
-    const asyncUnmountInlineEditor = React5.useCallback(
-      () => queueMicrotask(this.unmountInlineEditor.bind(this)),
-      []
-    );
-    return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-      import_ui4.Box,
-      {
-        ref: wrapperRef,
-        sx: {
-          "& .elementor-inline-editor-reset": {
-            margin: 0,
-            padding: 0
-          }
-        }
-      },
-      isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }),
-      /* @__PURE__ */ React5.createElement(
-        import_editor_controls2.InlineEditor,
+      /* @__PURE__ */ React6.createElement(
+        CanvasInlineEditor,
         {
-          attributes: {
-            class: wrapperClasses,
-            style: "outline: none;"
-          },
           elementClasses,
-          value: propValue,
-          setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this),
-          autofocus: true,
-          showToolbar: true,
-          getInitialPopoverPosition,
+          initialValue: propValue,
           expectedTag,
-          elementId: this.id
+          rootElement: this.element,
+          id: this.id,
+          setValue: this.setContentValue.bind(this),
+          onBlur: this.unmountInlineEditor.bind(this)
         }
       )
-    ));
-  };
+    );
+  }
 };
 
 // src/legacy/replacements/manager.ts
@@ -2116,13 +2251,13 @@ var createTemplatedElementTypeWithReplacements = ({
   renderer,
   element
 }) => {
-  const legacyWindow2 = window;
+  const legacyWindow = window;
   const view = createViewWithReplacements({
     type,
     renderer,
     element
   });
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -2140,7 +2275,7 @@ function registerElementType(type, elementTypeGenerator) {
 function initLegacyViews() {
   (0, import_editor_v1_adapters10.__privateListenTo)((0, import_editor_v1_adapters10.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements4.getWidgetsCache)() ?? {};
-    const legacyWindow2 = window;
+    const legacyWindow = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
@@ -2154,7 +2289,7 @@ function initLegacyViews() {
       } else {
         ElementType = createElementType(type);
       }
-      legacyWindow2.elementor.elementsManager.registerElementType(new ElementType());
+      legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
 }

package/dist/index.mjs

@@ -1464,8 +1464,8 @@ function escapeURL(value) {
 
 // src/legacy/create-element-type.ts
 function createElementType(type) {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -1475,8 +1475,8 @@ function createElementType(type) {
   };
 }
 function createElementViewClassDeclaration() {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.views.Widget {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.views.Widget {
     // Dispatch `render` event so the overlay layer will be updated
     onRender(...args) {
       super.onRender(...args);
@@ -1522,7 +1522,7 @@ function createElementViewClassDeclaration() {
       );
     }
     #dispatchPreviewEvent(eventType) {
-      legacyWindow2.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
+      legacyWindow.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
         new CustomEvent(eventType, {
           detail: {
             id: this.model.get("id"),
@@ -1682,14 +1682,11 @@ function createTemplatedElementView({
 }
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-import * as React5 from "react";
-import { useEffect as useEffect7, useRef as useRef2, useState as useState4 } from "react";
+import * as React6 from "react";
 import { createRoot } from "react-dom/client";
-import { InlineEditor } from "@elementor/editor-controls";
 import { getContainer, getElementLabel, getElementType } from "@elementor/editor-elements";
 import { htmlPropTypeUtil as htmlPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
-import { __privateRunCommandSync as runCommandSync, undoable } from "@elementor/editor-v1-adapters";
-import { Box as Box2, ThemeProvider } from "@elementor/ui";
+import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from "@elementor/editor-v1-adapters";
 import { __ } from "@wordpress/i18n";
 
 // src/legacy/replacements/base.ts
@@ -1730,6 +1727,207 @@ var ReplacementBase = class {
   }
 };
 
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+import * as React5 from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
+import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
+import { Box as Box2, ThemeProvider } from "@elementor/ui";
+import { FloatingPortal as FloatingPortal2, useInteractions as useInteractions2 } from "@floating-ui/react";
+
+// src/legacy/replacements/inline-editing/inline-editing-utils.ts
+var INLINE_EDITING_PROPERTY_PER_TYPE = {
+  "e-form-label": "text",
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var calcSelectionCenterOffsets = (view) => {
+  const frameWindow = view.root?.defaultView;
+  const selection = frameWindow?.getSelection();
+  const editorContainer = view.dom;
+  if (!selection || !editorContainer) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  const selectionRect = range.getBoundingClientRect();
+  const editorContainerRect = editorContainer.getBoundingClientRect();
+  if (!selectionRect || !editorContainerRect) {
+    return null;
+  }
+  const verticalOffset = selectionRect.top - editorContainerRect.top;
+  const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
+  const horizontalOffset = selectionCenter - editorContainerRect.left;
+  return { left: horizontalOffset, top: verticalOffset };
+};
+var getComputedStyle = (styles, offsets) => {
+  const transform = extractTransformValue(styles);
+  return transform ? {
+    ...styles,
+    marginLeft: `${offsets.left}px`,
+    marginTop: `${offsets.top}px`,
+    pointerEvents: "none"
+  } : {
+    display: "none"
+  };
+};
+var extractTransformValue = (styles) => {
+  const translateRegex = /translate\([^)]*\)\s?/g;
+  const numericValuesRegex = /(-?\d+\.?\d*)/g;
+  const translateValue = styles?.transform?.match(translateRegex)?.[0];
+  const values = translateValue?.match(numericValuesRegex);
+  if (!translateValue || !values) {
+    return null;
+  }
+  const [numericX, numericY] = values.map(Number);
+  if (!numericX || !numericY) {
+    return null;
+  }
+  return styles.transform;
+};
+
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
+var NAVIGATOR_SELECTOR = "#elementor-navigator";
+var EDITING_PANEL = "#elementor-panel";
+var EDITOR_ELEMENTS_OUT_OF_IFRAME = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, EDITING_PANEL];
+var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
+var CanvasInlineEditor = ({
+  elementClasses,
+  initialValue,
+  expectedTag,
+  rootElement,
+  id,
+  setValue,
+  onBlur
+}) => {
+  const [selectionOffsets, setSelectionOffsets] = useState4(null);
+  const [editor, setEditor] = useState4(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    setSelectionOffsets(hasSelection ? calcSelectionCenterOffsets(view) : null);
+  };
+  useOnClickOutsideIframe(onBlur);
+  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
+			.${EDITOR_WRAPPER_SELECTOR}, .${EDITOR_WRAPPER_SELECTOR} > * {
+				height: 100%;
+			}
+			.ProseMirror > * {
+				height: 100%;
+			}
+			`), /* @__PURE__ */ React5.createElement(
+    InlineEditor,
+    {
+      onEditorCreate: setEditor,
+      editorProps: {
+        attributes: {
+          style: "outline: none;overflow-wrap: normal;height:100%"
+        }
+      },
+      elementClasses,
+      value: initialValue,
+      setValue,
+      onBlur,
+      autofocus: true,
+      expectedTag,
+      wrapperClassName: EDITOR_WRAPPER_SELECTOR,
+      onSelectionEnd
+    }
+  ), selectionOffsets && editor && /* @__PURE__ */ React5.createElement(
+    InlineEditingToolbarWrapper,
+    {
+      expectedTag,
+      editor,
+      rootElement,
+      id,
+      selectionOffsets
+    }
+  ));
+};
+var InlineEditingOverlay = ({
+  expectedTag,
+  rootElement,
+  id
+}) => {
+  const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
+  const [overlayRefElement, setOverlayElement] = useState4(inlineEditedElement);
+  useEffect7(() => {
+    setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
+  }, [expectedTag, rootElement]);
+  return overlayRefElement ? /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
+};
+var InlineEditingToolbarWrapper = ({
+  expectedTag,
+  editor,
+  rootElement,
+  id,
+  selectionOffsets
+}) => {
+  const [element, setElement] = useState4(null);
+  useEffect7(() => {
+    setElement(getInlineEditorElement(rootElement, expectedTag));
+  }, [expectedTag, rootElement]);
+  return element ? /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { element, editor, id, selectionOffsets }) : null;
+};
+var InlineEditingToolbar = ({
+  element,
+  editor,
+  id,
+  selectionOffsets
+}) => {
+  const { floating } = useFloatingOnElement({
+    element,
+    isSelected: true
+  });
+  const { getFloatingProps, getReferenceProps } = useInteractions2();
+  const style = getComputedStyle(floating.styles, selectionOffsets);
+  useBindReactPropsToElement(element, getReferenceProps);
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    Box2,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        pointerEvents: "none"
+      },
+      role: "presentation",
+      ...getFloatingProps({ style })
+    },
+    floating.styles.transform && /* @__PURE__ */ React5.createElement(
+      Box2,
+      {
+        sx: {
+          position: "relative",
+          transform: "translateY(-100%)",
+          height: "max-content"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        InlineEditorToolbar,
+        {
+          editor,
+          elementId: id,
+          sx: {
+            transform: "translateX(-50%)"
+          }
+        }
+      )
+    )
+  ));
+};
+var getInlineEditorElement = (elementWrapper, expectedTag) => {
+  return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
+};
+var useOnClickOutsideIframe = (handleUnmount) => {
+  const asyncUnmountInlineEditor = React5.useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  useEffect7(() => {
+    EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+      (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
+    );
+    return () => EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+      (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
+    );
+  }, []);
+};
+
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
 import { htmlPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 var hasKey = (propType) => {
@@ -1759,32 +1957,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   return htmlPropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
 };
 
-// src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var INLINE_EDITING_PROPERTY_PER_TYPE = {
-  "e-form-label": "text",
-  "e-heading": "title",
-  "e-paragraph": "paragraph"
-};
-var legacyWindow = window;
-var getInitialPopoverPosition = () => {
-  const positionFallback = { left: 0, top: 0 };
-  const iFrameElement = legacyWindow?.elementor?.$preview?.get(0);
-  const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
-  const previewElement = legacyWindow?.elementor?.$previewWrapper?.get(0);
-  const previewPosition = previewElement ? { left: previewElement.scrollLeft, top: previewElement.scrollTop } : positionFallback;
-  return {
-    left: iFramePosition.left + previewPosition.left,
-    top: iFramePosition.top + previewPosition.top
-  };
-};
-
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
-var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
-var NAVIGATOR_SELECTOR = "#elementor-navigator";
-var V4_EDITING_PANEL = "main.MuiBox-root";
-var V3_EDITING_PANEL = "#elementor-panel-content-wrapper";
-var BLUR_TRIGGERING_SELECTORS = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL];
 var InlineEditingReplacement = class extends ReplacementBase {
   inlineEditorRoot = null;
   handlerAttached = false;
@@ -1798,7 +1972,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return this.isInlineEditingEligible();
+    return this.isInlineEditingEligible() && getCurrentEditMode() === "edit";
   }
   handleRenderInlineEditor = () => {
     if (this.isEditingModeActive() || !this.isInlineEditingEligible()) {
@@ -1944,65 +2118,26 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const InlineEditorApp = this.InlineEditorApp;
-    const wrapperClasses = "elementor";
     const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const propValue = this.getExtractedContentValue();
+    const expectedTag = this.getExpectedTag();
     this.element.innerHTML = "";
     this.inlineEditorRoot = createRoot(this.element);
     this.inlineEditorRoot.render(
-      /* @__PURE__ */ React5.createElement(InlineEditorApp, { wrapperClasses, elementClasses })
-    );
-  }
-  InlineEditorApp = ({ wrapperClasses, elementClasses }) => {
-    const propValue = this.getExtractedContentValue();
-    const expectedTag = this.getExpectedTag();
-    const wrapperRef = useRef2(null);
-    const [isWrapperRendered, setIsWrapperRendered] = useState4(false);
-    useEffect7(() => {
-      setIsWrapperRendered(!!wrapperRef.current);
-      BLUR_TRIGGERING_SELECTORS.forEach(
-        (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
-      );
-      return () => BLUR_TRIGGERING_SELECTORS.forEach(
-        (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
-      );
-    }, []);
-    const asyncUnmountInlineEditor = React5.useCallback(
-      () => queueMicrotask(this.unmountInlineEditor.bind(this)),
-      []
-    );
-    return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-      Box2,
-      {
-        ref: wrapperRef,
-        sx: {
-          "& .elementor-inline-editor-reset": {
-            margin: 0,
-            padding: 0
-          }
-        }
-      },
-      isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }),
-      /* @__PURE__ */ React5.createElement(
-        InlineEditor,
+      /* @__PURE__ */ React6.createElement(
+        CanvasInlineEditor,
         {
-          attributes: {
-            class: wrapperClasses,
-            style: "outline: none;"
-          },
           elementClasses,
-          value: propValue,
-          setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this),
-          autofocus: true,
-          showToolbar: true,
-          getInitialPopoverPosition,
+          initialValue: propValue,
           expectedTag,
-          elementId: this.id
+          rootElement: this.element,
+          id: this.id,
+          setValue: this.setContentValue.bind(this),
+          onBlur: this.unmountInlineEditor.bind(this)
         }
       )
-    ));
-  };
+    );
+  }
 };
 
 // src/legacy/replacements/manager.ts
@@ -2087,13 +2222,13 @@ var createTemplatedElementTypeWithReplacements = ({
   renderer,
   element
 }) => {
-  const legacyWindow2 = window;
+  const legacyWindow = window;
   const view = createViewWithReplacements({
     type,
     renderer,
     element
   });
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -2111,7 +2246,7 @@ function registerElementType(type, elementTypeGenerator) {
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent2(), () => {
     const config = getWidgetsCache2() ?? {};
-    const legacyWindow2 = window;
+    const legacyWindow = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
@@ -2125,7 +2260,7 @@ function initLegacyViews() {
       } else {
         ElementType = createElementType(type);
       }
-      legacyWindow2.elementor.elementsManager.registerElementType(new ElementType());
+      legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
 }
@@ -2207,7 +2342,7 @@ function extractElementData(element) {
 
 // src/mcp/tools/build-composition/tool.ts
 import {
-  createElement as createElement7,
+  createElement as createElement8,
   deleteElement,
   getContainer as getContainer3,
   getWidgetsCache as getWidgetsCache6
@@ -2215,7 +2350,7 @@ import {
 
 // src/composition-builder/composition-builder.ts
 import {
-  createElement as createElement6,
+  createElement as createElement7,
   generateElementId,
   getContainer as getContainer2,
   getWidgetsCache as getWidgetsCache5
@@ -2433,7 +2568,7 @@ var CompositionBuilder = class _CompositionBuilder {
   rootContainers = [];
   containerElements = [];
   api = {
-    createElement: createElement6,
+    createElement: createElement7,
     getWidgetsCache: getWidgetsCache5,
     generateElementId,
     getContainer: getContainer2,
@@ -2822,7 +2957,7 @@ var initBuildCompositionsTool = (reg) => {
       const documentContainer = getContainer3("document");
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement7,
+          createElement: createElement8,
           getWidgetsCache: getWidgetsCache6
         });
         compositionBuilder.setElementConfig(elementConfig);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.0.0-512",
+  "version": "4.0.0-513",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-512",
-    "@elementor/editor-controls": "4.0.0-512",
-    "@elementor/editor-documents": "4.0.0-512",
-    "@elementor/editor-elements": "4.0.0-512",
-    "@elementor/editor-interactions": "4.0.0-512",
-    "@elementor/editor-mcp": "4.0.0-512",
-    "@elementor/editor-notifications": "4.0.0-512",
-    "@elementor/editor-props": "4.0.0-512",
-    "@elementor/editor-responsive": "4.0.0-512",
-    "@elementor/editor-styles": "4.0.0-512",
-    "@elementor/editor-styles-repository": "4.0.0-512",
-    "@elementor/editor-ui": "4.0.0-512",
-    "@elementor/editor-v1-adapters": "4.0.0-512",
-    "@elementor/schema": "4.0.0-512",
-    "@elementor/twing": "4.0.0-512",
+    "@elementor/editor": "4.0.0-513",
+    "@elementor/editor-controls": "4.0.0-513",
+    "@elementor/editor-documents": "4.0.0-513",
+    "@elementor/editor-elements": "4.0.0-513",
+    "@elementor/editor-interactions": "4.0.0-513",
+    "@elementor/editor-mcp": "4.0.0-513",
+    "@elementor/editor-notifications": "4.0.0-513",
+    "@elementor/editor-props": "4.0.0-513",
+    "@elementor/editor-responsive": "4.0.0-513",
+    "@elementor/editor-styles": "4.0.0-513",
+    "@elementor/editor-styles-repository": "4.0.0-513",
+    "@elementor/editor-ui": "4.0.0-513",
+    "@elementor/editor-v1-adapters": "4.0.0-513",
+    "@elementor/schema": "4.0.0-513",
+    "@elementor/twing": "4.0.0-513",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-512",
-    "@elementor/wp-media": "4.0.0-512",
+    "@elementor/utils": "4.0.0-513",
+    "@elementor/wp-media": "4.0.0-513",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/legacy/replacements/inline-editing/canvas-inline-editor.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
+import { Box, ThemeProvider } from '@elementor/ui';
+import { FloatingPortal, useInteractions } from '@floating-ui/react';
+
+import { CANVAS_WRAPPER_ID, OutlineOverlay } from '../../../components/outline-overlay';
+import { useBindReactPropsToElement } from '../../../hooks/use-bind-react-props-to-element';
+import { useFloatingOnElement } from '../../../hooks/use-floating-on-element';
+import {
+	calcSelectionCenterOffsets,
+	type Editor,
+	type EditorView,
+	getComputedStyle,
+	type Offsets,
+} from './inline-editing-utils';
+
+const TOP_BAR_SELECTOR = '#elementor-editor-wrapper-v2';
+const NAVIGATOR_SELECTOR = '#elementor-navigator';
+const EDITING_PANEL = '#elementor-panel';
+
+const EDITOR_ELEMENTS_OUT_OF_IFRAME = [ TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, EDITING_PANEL ];
+
+const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
+
+export const CanvasInlineEditor = ( {
+	elementClasses,
+	initialValue,
+	expectedTag,
+	rootElement,
+	id,
+	setValue,
+	onBlur,
+}: {
+	elementClasses: string;
+	initialValue: string | null;
+	expectedTag: string | null;
+	rootElement: HTMLElement;
+	id: string;
+	setValue: ( value: string | null ) => void;
+	onBlur: () => void;
+} ) => {
+	const [ selectionOffsets, setSelectionOffsets ] = useState< Offsets | null >( null );
+	const [ editor, setEditor ] = useState< Editor | null >( null );
+
+	const onSelectionEnd = ( view: EditorView ) => {
+		const hasSelection = ! view.state.selection.empty;
+
+		setSelectionOffsets( hasSelection ? calcSelectionCenterOffsets( view ) : null );
+	};
+
+	useOnClickOutsideIframe( onBlur );
+
+	return (
+		<ThemeProvider>
+			<InlineEditingOverlay expectedTag={ expectedTag } rootElement={ rootElement } id={ id } />
+			<style>
+				{ `
+			.${ EDITOR_WRAPPER_SELECTOR }, .${ EDITOR_WRAPPER_SELECTOR } > * {
+				height: 100%;
+			}
+			.ProseMirror > * {
+				height: 100%;
+			}
+			` }
+			</style>
+			<InlineEditor
+				onEditorCreate={ setEditor }
+				editorProps={ {
+					attributes: {
+						style: 'outline: none;overflow-wrap: normal;height:100%',
+					},
+				} }
+				elementClasses={ elementClasses }
+				value={ initialValue }
+				setValue={ setValue }
+				onBlur={ onBlur }
+				autofocus
+				expectedTag={ expectedTag }
+				wrapperClassName={ EDITOR_WRAPPER_SELECTOR }
+				onSelectionEnd={ onSelectionEnd }
+			/>
+			{ selectionOffsets && editor && (
+				<InlineEditingToolbarWrapper
+					expectedTag={ expectedTag }
+					editor={ editor }
+					rootElement={ rootElement }
+					id={ id }
+					selectionOffsets={ selectionOffsets }
+				/>
+			) }
+		</ThemeProvider>
+	);
+};
+
+const InlineEditingOverlay = ( {
+	expectedTag,
+	rootElement,
+	id,
+}: {
+	expectedTag: string | null;
+	rootElement: HTMLElement;
+	id: string;
+} ) => {
+	const inlineEditedElement = getInlineEditorElement( rootElement, expectedTag );
+	const [ overlayRefElement, setOverlayElement ] = useState< HTMLDivElement | null >( inlineEditedElement );
+
+	useEffect( () => {
+		setOverlayElement( getInlineEditorElement( rootElement, expectedTag ) );
+	}, [ expectedTag, rootElement ] );
+
+	return overlayRefElement ? <OutlineOverlay element={ overlayRefElement } id={ id } isSelected /> : null;
+};
+
+const InlineEditingToolbarWrapper = ( {
+	expectedTag,
+	editor,
+	rootElement,
+	id,
+	selectionOffsets,
+}: {
+	expectedTag: string | null;
+	editor: Editor;
+	rootElement: HTMLElement;
+	id: string;
+	selectionOffsets: Offsets;
+} ) => {
+	const [ element, setElement ] = useState< HTMLElement | null >( null );
+
+	useEffect( () => {
+		setElement( getInlineEditorElement( rootElement, expectedTag ) );
+	}, [ expectedTag, rootElement ] );
+
+	return element ? (
+		<InlineEditingToolbar element={ element } editor={ editor } id={ id } selectionOffsets={ selectionOffsets } />
+	) : null;
+};
+
+const InlineEditingToolbar = ( {
+	element,
+	editor,
+	id,
+	selectionOffsets,
+}: {
+	element: HTMLElement;
+	editor: Editor;
+	id: string;
+	selectionOffsets: Offsets;
+} ) => {
+	const { floating } = useFloatingOnElement( {
+		element,
+		isSelected: true,
+	} );
+	const { getFloatingProps, getReferenceProps } = useInteractions();
+	const style = getComputedStyle( floating.styles, selectionOffsets );
+
+	useBindReactPropsToElement( element, getReferenceProps );
+
+	return (
+		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
+			<Box
+				ref={ floating.setRef }
+				style={ {
+					...floating.styles,
+					pointerEvents: 'none',
+				} }
+				role="presentation"
+				{ ...getFloatingProps( { style } ) }
+			>
+				{ floating.styles.transform && (
+					<Box
+						sx={ {
+							position: 'relative',
+							transform: 'translateY(-100%)',
+							height: 'max-content',
+						} }
+					>
+						<InlineEditorToolbar
+							editor={ editor }
+							elementId={ id }
+							sx={ {
+								transform: 'translateX(-50%)',
+							} }
+						/>
+					</Box>
+				) }
+			</Box>
+		</FloatingPortal>
+	);
+};
+
+const getInlineEditorElement = ( elementWrapper: HTMLElement, expectedTag: string | null ) => {
+	return ! expectedTag ? null : ( elementWrapper.querySelector( expectedTag ) as HTMLDivElement );
+};
+
+// Elements out of iframe and canvas don't trigger "onClickAway" which unmounts the editor
+// since they are not part of the iframes owner document.
+// We need to manually add listeners to these elements to unmount the editor when they are clicked.
+const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
+	const asyncUnmountInlineEditor = React.useCallback( () => queueMicrotask( handleUnmount ), [ handleUnmount ] );
+
+	useEffect( () => {
+		EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+			( selector ) =>
+				document?.querySelector( selector )?.addEventListener( 'mousedown', asyncUnmountInlineEditor )
+		);
+
+		return () =>
+			EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+				( selector ) =>
+					document?.querySelector( selector )?.removeEventListener( 'mousedown', asyncUnmountInlineEditor )
+			);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+};

package/src/legacy/replacements/inline-editing/inline-editing-elements.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { InlineEditor } from '@elementor/editor-controls';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import { htmlPropTypeUtil, type PropType, type PropValue, stringPropTypeUtil } from '@elementor/editor-props';
-import { __privateRunCommandSync as runCommandSync, undoable } from '@elementor/editor-v1-adapters';
-import { Box, ThemeProvider } from '@elementor/ui';
+import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { OutlineOverlay } from '../../../components/outline-overlay';
 import { ReplacementBase, TRIGGER_TIMING } from '../base';
+import { CanvasInlineEditor } from './canvas-inline-editor';
 import { isInlineEditingAllowed } from './inline-editing-eligibility';
-import { getInitialPopoverPosition, INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
+import { INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
 
 type TagPropType = PropType< 'tag' > & {
 	settings?: {
@@ -21,13 +18,6 @@ type TagPropType = PropType< 'tag' > & {
 
 const HISTORY_DEBOUNCE_WAIT = 800;
 
-const TOP_BAR_SELECTOR = '#elementor-editor-wrapper-v2';
-const NAVIGATOR_SELECTOR = '#elementor-navigator';
-const V4_EDITING_PANEL = 'main.MuiBox-root';
-const V3_EDITING_PANEL = '#elementor-panel-content-wrapper';
-
-const BLUR_TRIGGERING_SELECTORS = [ TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL ];
-
 export default class InlineEditingReplacement extends ReplacementBase {
 	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
@@ -45,7 +35,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	shouldRenderReplacement() {
-		return this.isInlineEditingEligible();
+		return this.isInlineEditingEligible() && getCurrentEditMode() === 'edit';
 	}
 
 	handleRenderInlineEditor = () => {
@@ -236,77 +226,23 @@ export default class InlineEditingReplacement extends ReplacementBase {
 			this.resetInlineEditorRoot();
 		}
 
-		const InlineEditorApp = this.InlineEditorApp;
-		const wrapperClasses = 'elementor';
 		const elementClasses = this.element.children?.[ 0 ]?.classList.toString() ?? '';
+		const propValue = this.getExtractedContentValue();
+		const expectedTag = this.getExpectedTag();
 
 		this.element.innerHTML = '';
 
 		this.inlineEditorRoot = createRoot( this.element );
 		this.inlineEditorRoot.render(
-			<InlineEditorApp wrapperClasses={ wrapperClasses } elementClasses={ elementClasses } />
+			<CanvasInlineEditor
+				elementClasses={ elementClasses }
+				initialValue={ propValue }
+				expectedTag={ expectedTag }
+				rootElement={ this.element }
+				id={ this.id }
+				setValue={ this.setContentValue.bind( this ) }
+				onBlur={ this.unmountInlineEditor.bind( this ) }
+			/>
 		);
 	}
-
-	InlineEditorApp = ( { wrapperClasses, elementClasses }: { wrapperClasses: string; elementClasses: string } ) => {
-		const propValue = this.getExtractedContentValue();
-		const expectedTag = this.getExpectedTag();
-		const wrapperRef = useRef< HTMLDivElement | null >( null );
-		const [ isWrapperRendered, setIsWrapperRendered ] = useState( false );
-
-		useEffect( () => {
-			setIsWrapperRendered( !! wrapperRef.current );
-			BLUR_TRIGGERING_SELECTORS.forEach(
-				( selector ) =>
-					document?.querySelector( selector )?.addEventListener( 'mousedown', asyncUnmountInlineEditor )
-			);
-
-			return () =>
-				BLUR_TRIGGERING_SELECTORS.forEach(
-					( selector ) =>
-						document
-							?.querySelector( selector )
-							?.removeEventListener( 'mousedown', asyncUnmountInlineEditor )
-				);
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [] );
-
-		const asyncUnmountInlineEditor = React.useCallback(
-			() => queueMicrotask( this.unmountInlineEditor.bind( this ) ),
-			[]
-		);
-
-		return (
-			<ThemeProvider>
-				<Box
-					ref={ wrapperRef }
-					sx={ {
-						'& .elementor-inline-editor-reset': {
-							margin: 0,
-							padding: 0,
-						},
-					} }
-				>
-					{ isWrapperRendered && (
-						<OutlineOverlay element={ wrapperRef.current as HTMLDivElement } id={ this.id } isSelected />
-					) }
-					<InlineEditor
-						attributes={ {
-							class: wrapperClasses,
-							style: 'outline: none;',
-						} }
-						elementClasses={ elementClasses }
-						value={ propValue }
-						setValue={ this.setContentValue.bind( this ) }
-						onBlur={ this.unmountInlineEditor.bind( this ) }
-						autofocus
-						showToolbar
-						getInitialPopoverPosition={ getInitialPopoverPosition }
-						expectedTag={ expectedTag }
-						elementId={ this.id }
-					/>
-				</Box>
-			</ThemeProvider>
-		);
-	};
 }

package/src/legacy/replacements/inline-editing/inline-editing-utils.ts

@@ -1,7 +1,17 @@
+import { type CSSProperties } from 'react';
+import { type InlineEditorToolbarProps } from '@elementor/editor-controls';
 import { type V1Element } from '@elementor/editor-elements';
 
 import { type LegacyWindow } from '../../types';
 
+export type Editor = InlineEditorToolbarProps[ 'editor' ];
+export type EditorView = Editor[ 'view' ];
+
+export type Offsets = {
+	left: number;
+	top: number;
+};
+
 export const INLINE_EDITING_PROPERTY_PER_TYPE: Record< string, string > = {
 	'e-form-label': 'text',
 	'e-heading': 'title',
@@ -14,19 +24,62 @@ export const getWidgetType = ( container: V1Element | null ) => {
 	return container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' ) ?? null;
 };
 
-export const getInitialPopoverPosition = () => {
-	const positionFallback = { left: 0, top: 0 };
+export const calcSelectionCenterOffsets = ( view: EditorView ): Offsets | null => {
+	const frameWindow = ( view.root as Document )?.defaultView;
+	const selection = frameWindow?.getSelection();
+	const editorContainer = view.dom;
+
+	if ( ! selection || ! editorContainer ) {
+		return null;
+	}
+
+	const range = selection.getRangeAt( 0 );
+	const selectionRect = range.getBoundingClientRect();
+	const editorContainerRect = editorContainer.getBoundingClientRect();
+
+	if ( ! selectionRect || ! editorContainerRect ) {
+		return null;
+	}
+
+	const verticalOffset = selectionRect.top - editorContainerRect.top;
+
+	const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
+	const horizontalOffset = selectionCenter - editorContainerRect.left;
+
+	return { left: horizontalOffset, top: verticalOffset };
+};
+
+export const getComputedStyle = ( styles: CSSProperties, offsets: Offsets ): CSSProperties => {
+	const transform = extractTransformValue( styles );
+
+	return transform
+		? {
+				...styles,
+				marginLeft: `${ offsets.left }px`,
+				marginTop: `${ offsets.top }px`,
+				pointerEvents: 'none',
+		  }
+		: {
+				display: 'none',
+		  };
+};
+
+const extractTransformValue = ( styles: CSSProperties ) => {
+	const translateRegex = /translate\([^)]*\)\s?/g;
+	const numericValuesRegex = /(-?\d+\.?\d*)/g;
+
+	const translateValue = styles?.transform?.match( translateRegex )?.[ 0 ];
+	const values = translateValue?.match( numericValuesRegex );
+
+	if ( ! translateValue || ! values ) {
+		return null;
+	}
 
-	const iFrameElement = legacyWindow?.elementor?.$preview?.get( 0 );
-	const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
+	const [ numericX, numericY ] = values.map( Number );
 
-	const previewElement = legacyWindow?.elementor?.$previewWrapper?.get( 0 );
-	const previewPosition = previewElement
-		? { left: previewElement.scrollLeft, top: previewElement.scrollTop }
-		: positionFallback;
+	if ( ! numericX || ! numericY ) {
+		return null;
+	}
 
-	return {
-		left: iFramePosition.left + previewPosition.left,
-		top: iFramePosition.top + previewPosition.top,
-	};
+	return styles.transform;
 };