@elementor/editor-canvas 3.35.4 → 3.35.6

package/dist/index.js

@@ -1767,66 +1767,129 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 var React5 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui4 = require("@elementor/ui");
-var import_react12 = require("@floating-ui/react");
+var import_react13 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
+var import_react11 = require("react");
+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 TOOLBAR_ANCHOR_ID_PREFIX = "inline-editing-toolbar-anchor";
+var TOOLBAR_ANCHOR_STATIC_STYLES = {
+  backgroundColor: "transparent",
+  border: "none",
+  outline: "none",
+  boxShadow: "none",
+  padding: "0",
+  margin: "0",
+  borderRadius: "0",
+  overflow: "hidden",
+  opacity: "0",
+  pointerEvents: "none",
+  position: "absolute",
+  display: "block"
+};
 var INLINE_EDITING_PROPERTY_PER_TYPE = {
   "e-form-label": "text",
   "e-heading": "title",
   "e-paragraph": "paragraph"
 };
-var calcSelectionCenterOffsets = (view) => {
-  const frameWindow = view.root?.defaultView;
+var getInlineEditorElement = (elementWrapper, expectedTag) => {
+  return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
+};
+var useOnClickOutsideIframe = (handleUnmount) => {
+  const asyncUnmountInlineEditor = (0, import_react11.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)
+    );
+  }, []);
+};
+var useRenderToolbar = (ownerDocument, id) => {
+  const [anchor, setAnchor] = (0, import_react11.useState)(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    removeToolbarAnchor(ownerDocument, id);
+    if (hasSelection) {
+      setAnchor(createAnchorBasedOnSelection(ownerDocument, id));
+    } else {
+      setAnchor(null);
+    }
+  };
+  return { onSelectionEnd, anchor };
+};
+var createAnchorBasedOnSelection = (ownerDocument, id) => {
+  const frameWindow = ownerDocument.defaultView;
   const selection = frameWindow?.getSelection();
-  const editorContainer = view.dom;
-  if (!selection || !editorContainer) {
+  if (!selection) {
     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"
-  };
+  const bodyRect = ownerDocument.body.getBoundingClientRect();
+  const toolbarAnchor = ownerDocument.createElement("span");
+  styleToolbarAnchor(toolbarAnchor, selectionRect, bodyRect);
+  toolbarAnchor.setAttribute("id", getToolbarAnchorId(id));
+  ownerDocument.body.appendChild(toolbarAnchor);
+  return toolbarAnchor;
+};
+var removeToolbarAnchor = (ownerDocument, id) => {
+  const toolbarAnchor = getToolbarAnchor(ownerDocument, id);
+  if (toolbarAnchor) {
+    ownerDocument.body.removeChild(toolbarAnchor);
+  }
+};
+var getToolbarAnchorId = (id) => `${TOOLBAR_ANCHOR_ID_PREFIX}-${id}`;
+var getToolbarAnchor = (ownerDocument, id) => ownerDocument.getElementById(getToolbarAnchorId(id));
+var styleToolbarAnchor = (anchor, selectionRect, bodyRect) => {
+  const { width, height } = selectionRect;
+  Object.assign(anchor.style, {
+    ...TOOLBAR_ANCHOR_STATIC_STYLES,
+    top: `${selectionRect.top - bodyRect.top}px`,
+    left: `${selectionRect.left - bodyRect.left}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  });
 };
-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;
+var horizontalShifterMiddleware = {
+  name: "horizontalShifter",
+  fn(state) {
+    const {
+      x: left,
+      y: top,
+      elements: { reference: anchor, floating }
+    } = state;
+    const newState = {
+      ...state,
+      x: left,
+      y: top
+    };
+    const isLeftOverflown = left < 0;
+    if (isLeftOverflown) {
+      newState.x = 0;
+      return newState;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const right = left + floating.offsetWidth;
+    const documentWidth = anchor.ownerDocument.body.offsetWidth;
+    const isRightOverflown = right > documentWidth && anchorRect.right < right;
+    if (isRightOverflown) {
+      const diff = right - documentWidth;
+      newState.x = left - diff;
+      return newState;
+    }
+    return newState;
   }
-  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,
@@ -1835,19 +1898,23 @@ var CanvasInlineEditor = ({
   rootElement,
   id,
   setValue,
-  onBlur
+  ...props
 }) => {
-  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);
+  const [editor, setEditor] = (0, import_react12.useState)(null);
+  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  const onBlur = () => {
+    removeToolbarAnchor(rootElement.ownerDocument, id);
+    props.onBlur();
   };
   useOnClickOutsideIframe(onBlur);
   return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
 			.ProseMirror > * {
 				height: 100%;
 			}
+			.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
+				height: auto;
+				cursor: text;
+			}
 			`), /* @__PURE__ */ React5.createElement(
     import_editor_controls2.InlineEditor,
     {
@@ -1863,19 +1930,9 @@ var CanvasInlineEditor = ({
       onBlur,
       autofocus: true,
       expectedTag,
-      wrapperClassName: EDITOR_WRAPPER_SELECTOR,
       onSelectionEnd
     }
-  ), selectionOffsets && editor && /* @__PURE__ */ React5.createElement(
-    InlineEditingToolbarWrapper,
-    {
-      expectedTag,
-      editor,
-      rootElement,
-      id,
-      selectionOffsets
-    }
-  ));
+  ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
 };
 var InlineEditingOverlay = ({
   expectedTag,
@@ -1883,84 +1940,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react11.useState)(inlineEditedElement);
-  (0, import_react11.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react12.useState)(inlineEditedElement);
+  (0, import_react12.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
+var InlineEditingToolbar = ({ anchor, editor, id }) => {
+  const { refs, floatingStyles } = (0, import_react13.useFloating)({
+    placement: "top",
+    strategy: "fixed",
+    transform: false,
+    whileElementsMounted: import_react13.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react13.flip)()]
   });
-  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)
-    );
-  }, []);
+  (0, import_react12.useLayoutEffect)(() => {
+    refs.setReference(anchor);
+    return () => refs.setReference(null);
+  }, [anchor, refs]);
+  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(import_ui4.Box, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts

package/dist/index.mjs

@@ -1738,66 +1738,129 @@ 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 { useEffect as useEffect8, useLayoutEffect, useState as useState5 } 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";
+import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal2, useFloating as useFloating2 } from "@floating-ui/react";
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
+import { useCallback, useEffect as useEffect7, useState as useState4 } from "react";
+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 TOOLBAR_ANCHOR_ID_PREFIX = "inline-editing-toolbar-anchor";
+var TOOLBAR_ANCHOR_STATIC_STYLES = {
+  backgroundColor: "transparent",
+  border: "none",
+  outline: "none",
+  boxShadow: "none",
+  padding: "0",
+  margin: "0",
+  borderRadius: "0",
+  overflow: "hidden",
+  opacity: "0",
+  pointerEvents: "none",
+  position: "absolute",
+  display: "block"
+};
 var INLINE_EDITING_PROPERTY_PER_TYPE = {
   "e-form-label": "text",
   "e-heading": "title",
   "e-paragraph": "paragraph"
 };
-var calcSelectionCenterOffsets = (view) => {
-  const frameWindow = view.root?.defaultView;
+var getInlineEditorElement = (elementWrapper, expectedTag) => {
+  return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
+};
+var useOnClickOutsideIframe = (handleUnmount) => {
+  const asyncUnmountInlineEditor = 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)
+    );
+  }, []);
+};
+var useRenderToolbar = (ownerDocument, id) => {
+  const [anchor, setAnchor] = useState4(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    removeToolbarAnchor(ownerDocument, id);
+    if (hasSelection) {
+      setAnchor(createAnchorBasedOnSelection(ownerDocument, id));
+    } else {
+      setAnchor(null);
+    }
+  };
+  return { onSelectionEnd, anchor };
+};
+var createAnchorBasedOnSelection = (ownerDocument, id) => {
+  const frameWindow = ownerDocument.defaultView;
   const selection = frameWindow?.getSelection();
-  const editorContainer = view.dom;
-  if (!selection || !editorContainer) {
+  if (!selection) {
     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"
-  };
+  const bodyRect = ownerDocument.body.getBoundingClientRect();
+  const toolbarAnchor = ownerDocument.createElement("span");
+  styleToolbarAnchor(toolbarAnchor, selectionRect, bodyRect);
+  toolbarAnchor.setAttribute("id", getToolbarAnchorId(id));
+  ownerDocument.body.appendChild(toolbarAnchor);
+  return toolbarAnchor;
+};
+var removeToolbarAnchor = (ownerDocument, id) => {
+  const toolbarAnchor = getToolbarAnchor(ownerDocument, id);
+  if (toolbarAnchor) {
+    ownerDocument.body.removeChild(toolbarAnchor);
+  }
+};
+var getToolbarAnchorId = (id) => `${TOOLBAR_ANCHOR_ID_PREFIX}-${id}`;
+var getToolbarAnchor = (ownerDocument, id) => ownerDocument.getElementById(getToolbarAnchorId(id));
+var styleToolbarAnchor = (anchor, selectionRect, bodyRect) => {
+  const { width, height } = selectionRect;
+  Object.assign(anchor.style, {
+    ...TOOLBAR_ANCHOR_STATIC_STYLES,
+    top: `${selectionRect.top - bodyRect.top}px`,
+    left: `${selectionRect.left - bodyRect.left}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  });
 };
-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;
+var horizontalShifterMiddleware = {
+  name: "horizontalShifter",
+  fn(state) {
+    const {
+      x: left,
+      y: top,
+      elements: { reference: anchor, floating }
+    } = state;
+    const newState = {
+      ...state,
+      x: left,
+      y: top
+    };
+    const isLeftOverflown = left < 0;
+    if (isLeftOverflown) {
+      newState.x = 0;
+      return newState;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const right = left + floating.offsetWidth;
+    const documentWidth = anchor.ownerDocument.body.offsetWidth;
+    const isRightOverflown = right > documentWidth && anchorRect.right < right;
+    if (isRightOverflown) {
+      const diff = right - documentWidth;
+      newState.x = left - diff;
+      return newState;
+    }
+    return newState;
   }
-  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,
@@ -1806,19 +1869,23 @@ var CanvasInlineEditor = ({
   rootElement,
   id,
   setValue,
-  onBlur
+  ...props
 }) => {
-  const [selectionOffsets, setSelectionOffsets] = useState4(null);
-  const [editor, setEditor] = useState4(null);
-  const onSelectionEnd = (view) => {
-    const hasSelection = !view.state.selection.empty;
-    setSelectionOffsets(hasSelection ? calcSelectionCenterOffsets(view) : null);
+  const [editor, setEditor] = useState5(null);
+  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  const onBlur = () => {
+    removeToolbarAnchor(rootElement.ownerDocument, id);
+    props.onBlur();
   };
   useOnClickOutsideIframe(onBlur);
   return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
 			.ProseMirror > * {
 				height: 100%;
 			}
+			.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
+				height: auto;
+				cursor: text;
+			}
 			`), /* @__PURE__ */ React5.createElement(
     InlineEditor,
     {
@@ -1834,19 +1901,9 @@ var CanvasInlineEditor = ({
       onBlur,
       autofocus: true,
       expectedTag,
-      wrapperClassName: EDITOR_WRAPPER_SELECTOR,
       onSelectionEnd
     }
-  ), selectionOffsets && editor && /* @__PURE__ */ React5.createElement(
-    InlineEditingToolbarWrapper,
-    {
-      expectedTag,
-      editor,
-      rootElement,
-      id,
-      selectionOffsets
-    }
-  ));
+  ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
 };
 var InlineEditingOverlay = ({
   expectedTag,
@@ -1854,84 +1911,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = useState4(inlineEditedElement);
-  useEffect7(() => {
+  const [overlayRefElement, setOverlayElement] = useState5(inlineEditedElement);
+  useEffect8(() => {
     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
+var InlineEditingToolbar = ({ anchor, editor, id }) => {
+  const { refs, floatingStyles } = useFloating2({
+    placement: "top",
+    strategy: "fixed",
+    transform: false,
+    whileElementsMounted: autoUpdate2,
+    middleware: [horizontalShifterMiddleware, flip()]
   });
-  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)
-    );
-  }, []);
+  useLayoutEffect(() => {
+    refs.setReference(anchor);
+    return () => refs.setReference(null);
+  }, [anchor, refs]);
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(Box2, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts

package/package.json

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

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

@@ -1,26 +1,19 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
 import { Box, ThemeProvider } from '@elementor/ui';
-import { FloatingPortal, useInteractions } from '@floating-ui/react';
+import { autoUpdate, flip, FloatingPortal, useFloating } 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,
+	getInlineEditorElement,
+	horizontalShifterMiddleware as horizontalShifter,
+	removeToolbarAnchor,
+	useOnClickOutsideIframe,
+	useRenderToolbar,
 } 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 = ( {
@@ -30,7 +23,7 @@ export const CanvasInlineEditor = ( {
 	rootElement,
 	id,
 	setValue,
-	onBlur,
+	...props
 }: {
 	elementClasses: string;
 	initialValue: string | null;
@@ -40,13 +33,13 @@ export const CanvasInlineEditor = ( {
 	setValue: ( value: string | null ) => void;
 	onBlur: () => void;
 } ) => {
-	const [ selectionOffsets, setSelectionOffsets ] = useState< Offsets | null >( null );
 	const [ editor, setEditor ] = useState< Editor | null >( null );
+	const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
 
-	const onSelectionEnd = ( view: EditorView ) => {
-		const hasSelection = ! view.state.selection.empty;
+	const onBlur = () => {
+		removeToolbarAnchor( rootElement.ownerDocument, id );
 
-		setSelectionOffsets( hasSelection ? calcSelectionCenterOffsets( view ) : null );
+		props.onBlur();
 	};
 
 	useOnClickOutsideIframe( onBlur );
@@ -59,6 +52,10 @@ export const CanvasInlineEditor = ( {
 			.ProseMirror > * {
 				height: 100%;
 			}
+			.${ EDITOR_WRAPPER_SELECTOR } .ProseMirror > button[contenteditable="true"] {
+				height: auto;
+				cursor: text;
+			}
 			` }
 			</style>
 			<InlineEditor
@@ -74,18 +71,9 @@ export const CanvasInlineEditor = ( {
 				onBlur={ onBlur }
 				autofocus
 				expectedTag={ expectedTag }
-				wrapperClassName={ EDITOR_WRAPPER_SELECTOR }
 				onSelectionEnd={ onSelectionEnd }
 			/>
-			{ selectionOffsets && editor && (
-				<InlineEditingToolbarWrapper
-					expectedTag={ expectedTag }
-					editor={ editor }
-					rootElement={ rootElement }
-					id={ id }
-					selectionOffsets={ selectionOffsets }
-				/>
-			) }
+			{ toolbarAnchor && editor && <InlineEditingToolbar anchor={ toolbarAnchor } editor={ editor } id={ id } /> }
 		</ThemeProvider>
 	);
 };
@@ -109,104 +97,26 @@ const InlineEditingOverlay = ( {
 	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 InlineEditingToolbar = ( { anchor, editor, id }: { anchor: HTMLElement; editor: Editor; id: string } ) => {
+	const { refs, floatingStyles } = useFloating( {
+		placement: 'top',
+		strategy: 'fixed',
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: [ horizontalShifter, flip() ],
 	} );
-	const { getFloatingProps, getReferenceProps } = useInteractions();
-	const style = getComputedStyle( floating.styles, selectionOffsets );
 
-	useBindReactPropsToElement( element, getReferenceProps );
+	useLayoutEffect( () => {
+		refs.setReference( anchor );
+
+		return () => refs.setReference( null );
+	}, [ anchor, refs ] );
 
 	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 ref={ refs.setFloating } role="presentation" style={ { ...floatingStyles, pointerEvents: 'none' } }>
+				<InlineEditorToolbar editor={ editor } elementId={ id } />
 			</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-utils.ts

@@ -1,9 +1,35 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, useCallback, useEffect, useState } from 'react';
 import { type InlineEditorToolbarProps } from '@elementor/editor-controls';
 import { type V1Element } from '@elementor/editor-elements';
+import { type MiddlewareReturn, type MiddlewareState } from '@floating-ui/react';
 
 import { type LegacyWindow } from '../../types';
 
+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 ];
+
+export const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
+
+const TOOLBAR_ANCHOR_ID_PREFIX = 'inline-editing-toolbar-anchor';
+
+const TOOLBAR_ANCHOR_STATIC_STYLES: CSSProperties = {
+	backgroundColor: 'transparent',
+	border: 'none',
+	outline: 'none',
+	boxShadow: 'none',
+	padding: '0',
+	margin: '0',
+	borderRadius: '0',
+	overflow: 'hidden',
+	opacity: '0',
+	pointerEvents: 'none',
+	position: 'absolute',
+	display: 'block',
+};
+
 export type Editor = InlineEditorToolbarProps[ 'editor' ];
 export type EditorView = Editor[ 'view' ];
 
@@ -24,62 +50,134 @@ export const getWidgetType = ( container: V1Element | null ) => {
 	return container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' ) ?? null;
 };
 
-export const calcSelectionCenterOffsets = ( view: EditorView ): Offsets | null => {
-	const frameWindow = ( view.root as Document )?.defaultView;
+export 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.
+export const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
+	const asyncUnmountInlineEditor = 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
+	}, [] );
+};
+
+export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
+	const [ anchor, setAnchor ] = useState< HTMLElement | null >( null );
+
+	const onSelectionEnd = ( view: EditorView ) => {
+		const hasSelection = ! view.state.selection.empty;
+
+		removeToolbarAnchor( ownerDocument, id );
+
+		if ( hasSelection ) {
+			setAnchor( createAnchorBasedOnSelection( ownerDocument, id ) );
+		} else {
+			setAnchor( null );
+		}
+	};
+
+	return { onSelectionEnd, anchor };
+};
+
+const createAnchorBasedOnSelection = ( ownerDocument: Document, id: string ): HTMLElement | null => {
+	const frameWindow = ownerDocument.defaultView;
 	const selection = frameWindow?.getSelection();
-	const editorContainer = view.dom;
 
-	if ( ! selection || ! editorContainer ) {
+	if ( ! selection ) {
 		return null;
 	}
 
 	const range = selection.getRangeAt( 0 );
 	const selectionRect = range.getBoundingClientRect();
-	const editorContainerRect = editorContainer.getBoundingClientRect();
+	const bodyRect = ownerDocument.body.getBoundingClientRect();
+	const toolbarAnchor = ownerDocument.createElement( 'span' );
 
-	if ( ! selectionRect || ! editorContainerRect ) {
-		return null;
-	}
+	styleToolbarAnchor( toolbarAnchor, selectionRect, bodyRect );
+	toolbarAnchor.setAttribute( 'id', getToolbarAnchorId( id ) );
 
-	const verticalOffset = selectionRect.top - editorContainerRect.top;
+	ownerDocument.body.appendChild( toolbarAnchor );
 
-	const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
-	const horizontalOffset = selectionCenter - editorContainerRect.left;
+	return toolbarAnchor;
+};
+
+export const removeToolbarAnchor = ( ownerDocument: Document, id: string ) => {
+	const toolbarAnchor = getToolbarAnchor( ownerDocument, id );
 
-	return { left: horizontalOffset, top: verticalOffset };
+	if ( toolbarAnchor ) {
+		ownerDocument.body.removeChild( toolbarAnchor );
+	}
 };
 
-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 getToolbarAnchorId = ( id: string ) => `${ TOOLBAR_ANCHOR_ID_PREFIX }-${ id }`;
+
+export const getToolbarAnchor = ( ownerDocument: Document, id: string ) =>
+	ownerDocument.getElementById( getToolbarAnchorId( id ) ) as HTMLElement | null;
+
+const styleToolbarAnchor = ( anchor: HTMLElement, selectionRect: DOMRect, bodyRect: DOMRect ) => {
+	const { width, height } = selectionRect;
+
+	Object.assign( anchor.style, {
+		...TOOLBAR_ANCHOR_STATIC_STYLES,
+		top: `${ selectionRect.top - bodyRect.top }px`,
+		left: `${ selectionRect.left - bodyRect.left }px`,
+		width: `${ width }px`,
+		height: `${ height }px`,
+	} );
 };
 
-const extractTransformValue = ( styles: CSSProperties ) => {
-	const translateRegex = /translate\([^)]*\)\s?/g;
-	const numericValuesRegex = /(-?\d+\.?\d*)/g;
+export const horizontalShifterMiddleware: {
+	name: string;
+	fn: ( state: MiddlewareState ) => MiddlewareReturn;
+} = {
+	name: 'horizontalShifter',
+	fn( state ) {
+		const {
+			x: left,
+			y: top,
+			elements: { reference: anchor, floating },
+		} = state;
 
-	const translateValue = styles?.transform?.match( translateRegex )?.[ 0 ];
-	const values = translateValue?.match( numericValuesRegex );
+		const newState: MiddlewareReturn = {
+			...state,
+			x: left,
+			y: top,
+		};
 
-	if ( ! translateValue || ! values ) {
-		return null;
-	}
+		const isLeftOverflown = left < 0;
 
-	const [ numericX, numericY ] = values.map( Number );
+		if ( isLeftOverflown ) {
+			newState.x = 0;
 
-	if ( ! numericX || ! numericY ) {
-		return null;
-	}
+			return newState;
+		}
+
+		const anchorRect = anchor.getBoundingClientRect();
+		const right = left + floating.offsetWidth;
+		const documentWidth = ( anchor as HTMLElement ).ownerDocument.body.offsetWidth;
+		const isRightOverflown = right > documentWidth && anchorRect.right < right;
+
+		if ( isRightOverflown ) {
+			const diff = right - documentWidth;
+
+			newState.x = left - diff;
+
+			return newState;
+		}
 
-	return styles.transform;
+		return newState;
+	},
 };