@elementor/editor-canvas 4.1.0-740 → 4.1.0-741

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
+import { Root } from 'react-dom/client';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropValue, PropType, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
 import * as _elementor_utils from '@elementor/utils';
@@ -204,6 +205,8 @@ type ReplacementSettings = {
     id: string;
     element: HTMLElement;
     refreshView: () => void;
+    reactRoot: Root;
+    reactContainer: HTMLElement;
 };
 
 type CreateTemplatedElementTypeOptions = {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
+import { Root } from 'react-dom/client';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropValue, PropType, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
 import * as _elementor_utils from '@elementor/utils';
@@ -204,6 +205,8 @@ type ReplacementSettings = {
     id: string;
     element: HTMLElement;
     refreshView: () => void;
+    reactRoot: Root;
+    reactContainer: HTMLElement;
 };
 
 type CreateTemplatedElementTypeOptions = {

package/dist/index.js

@@ -2421,9 +2421,11 @@ function createNestedTemplatedElementView({
   });
 }
 
+// src/legacy/replacements/manager.ts
+var import_client = require("react-dom/client");
+
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React6 = __toESM(require("react"));
-var import_client = require("react-dom/client");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
@@ -2442,6 +2444,8 @@ var ReplacementBase = class {
   type;
   id;
   refreshView;
+  reactRoot;
+  reactContainer;
   constructor(settings) {
     this.getSetting = settings.getSetting;
     this.setSetting = settings.setSetting;
@@ -2449,6 +2453,8 @@ var ReplacementBase = class {
     this.type = settings.type;
     this.id = settings.id;
     this.refreshView = settings.refreshView;
+    this.reactRoot = settings.reactRoot;
+    this.reactContainer = settings.reactContainer;
   }
   static getTypes() {
     return null;
@@ -2518,6 +2524,11 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    if (!anchor) {
+      removeToolbarAnchor(ownerDocument, id);
+    }
+  }, [anchor, ownerDocument, id]);
   const onSelectionEnd = (view) => {
     const hasSelection = !view.state.selection.empty;
     removeToolbarAnchor(ownerDocument, id);
@@ -2527,7 +2538,10 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  return { onSelectionEnd, anchor };
+  const clearAnchor = (0, import_react11.useCallback)(() => {
+    setAnchor(null);
+  }, []);
+  return { onSelectionEnd, anchor, clearAnchor };
 };
 var createAnchorBasedOnSelection = (ownerDocument, id) => {
   const frameWindow = ownerDocument.defaultView;
@@ -2594,46 +2608,59 @@ var horizontalShifterMiddleware = {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
 var CanvasInlineEditor = ({
   elementClasses,
   initialValue,
   expectedTag,
   rootElement,
+  contentElement,
   id,
   setValue,
-  ...props
+  requestDestroy
 }) => {
+  const [active, setActive] = (0, import_react12.useState)(true);
   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(
+  const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  (0, import_react12.useEffect)(() => {
+    if (!active) {
+      clearAnchor();
+      requestDestroy();
+    }
+  }, [active, clearAnchor, requestDestroy]);
+  const dismiss = (0, import_react12.useCallback)(() => {
+    setEditor(null);
+    setActive(false);
+  }, []);
+  useOnClickOutsideIframe(dismiss);
+  (0, import_react12.useEffect)(() => {
+    const ownerDocument = contentElement.ownerDocument;
+    const handleClickAway = (event) => {
+      if (contentElement.contains(event.target)) {
+        return;
+      }
+      dismiss();
+    };
+    ownerDocument.addEventListener("mousedown", handleClickAway);
+    return () => ownerDocument.removeEventListener("mousedown", handleClickAway);
+  }, [contentElement, dismiss]);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
     import_editor_controls2.InlineEditor,
     {
       onEditorCreate: setEditor,
+      mountElement: contentElement,
       editorProps: {
         attributes: {
-          style: "outline: none;overflow-wrap: normal;height:100%"
+          style: "outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;"
         }
       },
       elementClasses,
       value: initialValue,
       setValue,
-      onBlur,
+      onBlur: dismiss,
       autofocus: true,
-      expectedTag,
       onSelectionEnd
     }
   ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
@@ -2662,7 +2689,18 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     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 })));
+  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
@@ -2696,8 +2734,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
 var InlineEditingReplacement = class extends ReplacementBase {
-  inlineEditorRoot = null;
   handlerAttached = false;
+  editing = false;
   getReplacementKey() {
     return "inline-editing";
   }
@@ -2705,7 +2743,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return Object.keys(INLINE_EDITING_PROPERTY_PER_TYPE);
   }
   isEditingModeActive() {
-    return !!this.inlineEditorRoot;
+    return this.editing;
   }
   shouldRenderReplacement() {
     return this.isInlineEditingEligible() && (0, import_editor_v1_adapters12.getCurrentEditMode)() === "edit";
@@ -2748,8 +2786,8 @@ var InlineEditingReplacement = class extends ReplacementBase {
   resetInlineEditorRoot() {
     this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
-    this.inlineEditorRoot?.unmount?.();
-    this.inlineEditorRoot = null;
+    this.reactRoot.render(null);
+    this.editing = false;
   }
   unmountInlineEditor() {
     this.resetInlineEditorRoot();
@@ -2860,12 +2898,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const contentElement = this.element.children?.[0];
+    if (!contentElement) {
+      return;
+    }
+    const elementClasses = contentElement.classList.toString();
     const propValue = this.getExtractedContentValue();
     const expectedTag = this.getExpectedTag();
-    this.element.innerHTML = "";
-    this.inlineEditorRoot = (0, import_client.createRoot)(this.element);
-    this.inlineEditorRoot.render(
+    contentElement.innerHTML = "";
+    this.editing = true;
+    this.reactRoot.render(
       /* @__PURE__ */ React6.createElement(
         CanvasInlineEditor,
         {
@@ -2873,9 +2915,10 @@ var InlineEditingReplacement = class extends ReplacementBase {
           initialValue: propValue,
           expectedTag,
           rootElement: this.element,
+          contentElement,
           id: this.id,
           setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this)
+          requestDestroy: this.unmountInlineEditor.bind(this)
         }
       )
     );
@@ -2904,16 +2947,24 @@ var createViewWithReplacements = (options) => {
   return class extends TemplatedView {
     #replacement = null;
     #config;
+    #reactContainer;
+    #reactRoot;
     constructor(...args) {
       super(...args);
       const settings = this.model.get("settings");
+      this.#reactContainer = this.el.ownerDocument.createElement("div");
+      this.#reactContainer.style.display = "none";
+      this.el.ownerDocument.body.appendChild(this.#reactContainer);
+      this.#reactRoot = (0, import_client.createRoot)(this.#reactContainer);
       this.#config = {
         getSetting: settings.get.bind(settings),
         setSetting: settings.set.bind(settings),
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.refreshView.bind(this)
+        refreshView: this.refreshView.bind(this),
+        reactRoot: this.#reactRoot,
+        reactContainer: this.#reactContainer
       };
     }
     refreshView() {
@@ -2934,6 +2985,8 @@ var createViewWithReplacements = (options) => {
     }
     onDestroy() {
       this.#triggerAltMethod("onDestroy");
+      this.#reactRoot.unmount();
+      this.#reactContainer.remove();
     }
     _afterRender() {
       this.#triggerAltMethod("_afterRender");

package/dist/index.mjs

@@ -2387,9 +2387,11 @@ function createNestedTemplatedElementView({
   });
 }
 
+// src/legacy/replacements/manager.ts
+import { createRoot } from "react-dom/client";
+
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 import * as React6 from "react";
-import { createRoot } from "react-dom/client";
 import { getContainer, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
@@ -2412,6 +2414,8 @@ var ReplacementBase = class {
   type;
   id;
   refreshView;
+  reactRoot;
+  reactContainer;
   constructor(settings) {
     this.getSetting = settings.getSetting;
     this.setSetting = settings.setSetting;
@@ -2419,6 +2423,8 @@ var ReplacementBase = class {
     this.type = settings.type;
     this.id = settings.id;
     this.refreshView = settings.refreshView;
+    this.reactRoot = settings.reactRoot;
+    this.reactContainer = settings.reactContainer;
   }
   static getTypes() {
     return null;
@@ -2439,7 +2445,7 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React5 from "react";
-import { useEffect as useEffect8, useLayoutEffect, useState as useState5 } from "react";
+import { useCallback as useCallback2, 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 { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal2, useFloating as useFloating2 } from "@floating-ui/react";
@@ -2488,6 +2494,11 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = useState4(null);
+  useEffect7(() => {
+    if (!anchor) {
+      removeToolbarAnchor(ownerDocument, id);
+    }
+  }, [anchor, ownerDocument, id]);
   const onSelectionEnd = (view) => {
     const hasSelection = !view.state.selection.empty;
     removeToolbarAnchor(ownerDocument, id);
@@ -2497,7 +2508,10 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  return { onSelectionEnd, anchor };
+  const clearAnchor = useCallback(() => {
+    setAnchor(null);
+  }, []);
+  return { onSelectionEnd, anchor, clearAnchor };
 };
 var createAnchorBasedOnSelection = (ownerDocument, id) => {
   const frameWindow = ownerDocument.defaultView;
@@ -2564,46 +2578,59 @@ var horizontalShifterMiddleware = {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
 var CanvasInlineEditor = ({
   elementClasses,
   initialValue,
   expectedTag,
   rootElement,
+  contentElement,
   id,
   setValue,
-  ...props
+  requestDestroy
 }) => {
+  const [active, setActive] = useState5(true);
   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(
+  const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  useEffect8(() => {
+    if (!active) {
+      clearAnchor();
+      requestDestroy();
+    }
+  }, [active, clearAnchor, requestDestroy]);
+  const dismiss = useCallback2(() => {
+    setEditor(null);
+    setActive(false);
+  }, []);
+  useOnClickOutsideIframe(dismiss);
+  useEffect8(() => {
+    const ownerDocument = contentElement.ownerDocument;
+    const handleClickAway = (event) => {
+      if (contentElement.contains(event.target)) {
+        return;
+      }
+      dismiss();
+    };
+    ownerDocument.addEventListener("mousedown", handleClickAway);
+    return () => ownerDocument.removeEventListener("mousedown", handleClickAway);
+  }, [contentElement, dismiss]);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
     InlineEditor,
     {
       onEditorCreate: setEditor,
+      mountElement: contentElement,
       editorProps: {
         attributes: {
-          style: "outline: none;overflow-wrap: normal;height:100%"
+          style: "outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;"
         }
       },
       elementClasses,
       value: initialValue,
       setValue,
-      onBlur,
+      onBlur: dismiss,
       autofocus: true,
-      expectedTag,
       onSelectionEnd
     }
   ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
@@ -2632,7 +2659,18 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     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 })));
+  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
@@ -2666,8 +2704,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
 var InlineEditingReplacement = class extends ReplacementBase {
-  inlineEditorRoot = null;
   handlerAttached = false;
+  editing = false;
   getReplacementKey() {
     return "inline-editing";
   }
@@ -2675,7 +2713,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return Object.keys(INLINE_EDITING_PROPERTY_PER_TYPE);
   }
   isEditingModeActive() {
-    return !!this.inlineEditorRoot;
+    return this.editing;
   }
   shouldRenderReplacement() {
     return this.isInlineEditingEligible() && getCurrentEditMode() === "edit";
@@ -2718,8 +2756,8 @@ var InlineEditingReplacement = class extends ReplacementBase {
   resetInlineEditorRoot() {
     this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
-    this.inlineEditorRoot?.unmount?.();
-    this.inlineEditorRoot = null;
+    this.reactRoot.render(null);
+    this.editing = false;
   }
   unmountInlineEditor() {
     this.resetInlineEditorRoot();
@@ -2830,12 +2868,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const contentElement = this.element.children?.[0];
+    if (!contentElement) {
+      return;
+    }
+    const elementClasses = contentElement.classList.toString();
     const propValue = this.getExtractedContentValue();
     const expectedTag = this.getExpectedTag();
-    this.element.innerHTML = "";
-    this.inlineEditorRoot = createRoot(this.element);
-    this.inlineEditorRoot.render(
+    contentElement.innerHTML = "";
+    this.editing = true;
+    this.reactRoot.render(
       /* @__PURE__ */ React6.createElement(
         CanvasInlineEditor,
         {
@@ -2843,9 +2885,10 @@ var InlineEditingReplacement = class extends ReplacementBase {
           initialValue: propValue,
           expectedTag,
           rootElement: this.element,
+          contentElement,
           id: this.id,
           setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this)
+          requestDestroy: this.unmountInlineEditor.bind(this)
         }
       )
     );
@@ -2874,16 +2917,24 @@ var createViewWithReplacements = (options) => {
   return class extends TemplatedView {
     #replacement = null;
     #config;
+    #reactContainer;
+    #reactRoot;
     constructor(...args) {
       super(...args);
       const settings = this.model.get("settings");
+      this.#reactContainer = this.el.ownerDocument.createElement("div");
+      this.#reactContainer.style.display = "none";
+      this.el.ownerDocument.body.appendChild(this.#reactContainer);
+      this.#reactRoot = createRoot(this.#reactContainer);
       this.#config = {
         getSetting: settings.get.bind(settings),
         setSetting: settings.set.bind(settings),
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.refreshView.bind(this)
+        refreshView: this.refreshView.bind(this),
+        reactRoot: this.#reactRoot,
+        reactContainer: this.#reactContainer
       };
     }
     refreshView() {
@@ -2904,6 +2955,8 @@ var createViewWithReplacements = (options) => {
     }
     onDestroy() {
       this.#triggerAltMethod("onDestroy");
+      this.#reactRoot.unmount();
+      this.#reactContainer.remove();
     }
     _afterRender() {
       this.#triggerAltMethod("_afterRender");

package/package.json

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

package/src/legacy/replacements/base.ts

@@ -26,6 +26,8 @@ export class ReplacementBase implements ReplacementBaseInterface {
 	protected type: ReplacementSettings[ 'type' ];
 	protected id: ReplacementSettings[ 'id' ];
 	protected refreshView: ReplacementSettings[ 'refreshView' ];
+	protected reactRoot: ReplacementSettings[ 'reactRoot' ];
+	protected reactContainer: ReplacementSettings[ 'reactContainer' ];
 
 	constructor( settings: ReplacementSettings ) {
 		this.getSetting = settings.getSetting;
@@ -34,6 +36,8 @@ export class ReplacementBase implements ReplacementBaseInterface {
 		this.type = settings.type;
 		this.id = settings.id;
 		this.refreshView = settings.refreshView;
+		this.reactRoot = settings.reactRoot;
+		this.reactContainer = settings.reactContainer;
 	}
 
 	static getTypes(): string[] | null {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
 import { Box, ThemeProvider } from '@elementor/ui';
 import { autoUpdate, flip, FloatingPortal, useFloating } from '@floating-ui/react';
@@ -9,68 +9,83 @@ import {
 	type Editor,
 	getInlineEditorElement,
 	horizontalShifterMiddleware as horizontalShifter,
-	removeToolbarAnchor,
 	useOnClickOutsideIframe,
 	useRenderToolbar,
 } from './inline-editing-utils';
 
-const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
-
 export const CanvasInlineEditor = ( {
 	elementClasses,
 	initialValue,
 	expectedTag,
 	rootElement,
+	contentElement,
 	id,
 	setValue,
-	...props
+	requestDestroy,
 }: {
 	elementClasses: string;
 	initialValue: string | null;
 	expectedTag: string | null;
 	rootElement: HTMLElement;
+	contentElement: HTMLElement;
 	id: string;
 	setValue: ( value: string | null ) => void;
-	onBlur: () => void;
+	requestDestroy: () => void;
 } ) => {
+	const [ active, setActive ] = useState( true );
 	const [ editor, setEditor ] = useState< Editor | null >( null );
-	const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
+	const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
+
+	useEffect( () => {
+		if ( ! active ) {
+			clearAnchor();
+			requestDestroy();
+		}
+	}, [ active, clearAnchor, requestDestroy ] );
+
+	const dismiss = useCallback( () => {
+		setEditor( null );
+		setActive( false );
+	}, [] );
 
-	const onBlur = () => {
-		removeToolbarAnchor( rootElement.ownerDocument, id );
+	useOnClickOutsideIframe( dismiss );
 
-		props.onBlur();
-	};
+	useEffect( () => {
+		const ownerDocument = contentElement.ownerDocument;
+
+		const handleClickAway = ( event: MouseEvent ) => {
+			if ( contentElement.contains( event.target as Node ) ) {
+				return;
+			}
 
-	useOnClickOutsideIframe( onBlur );
+			dismiss();
+		};
+
+		ownerDocument.addEventListener( 'mousedown', handleClickAway );
+
+		return () => ownerDocument.removeEventListener( 'mousedown', handleClickAway );
+	}, [ contentElement, dismiss ] );
+
+	if ( ! active ) {
+		return null;
+	}
 
 	return (
 		<ThemeProvider>
 			<InlineEditingOverlay expectedTag={ expectedTag } rootElement={ rootElement } id={ id } />
-			<style>
-				{ `
-			.ProseMirror > * {
-				height: 100%;
-			}
-			.${ EDITOR_WRAPPER_SELECTOR } .ProseMirror > button[contenteditable="true"] {
-				height: auto;
-				cursor: text;
-			}
-			` }
-			</style>
 			<InlineEditor
 				onEditorCreate={ setEditor }
+				mountElement={ contentElement }
 				editorProps={ {
 					attributes: {
-						style: 'outline: none;overflow-wrap: normal;height:100%',
+						style: 'outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;',
 					},
 				} }
 				elementClasses={ elementClasses }
 				value={ initialValue }
 				setValue={ setValue }
-				onBlur={ onBlur }
+				onBlur={ dismiss }
 				autofocus
-				expectedTag={ expectedTag }
 				onSelectionEnd={ onSelectionEnd }
 			/>
 			{ toolbarAnchor && editor && <InlineEditingToolbar anchor={ toolbarAnchor } editor={ editor } id={ id } /> }
@@ -114,7 +129,14 @@ const InlineEditingToolbar = ( { anchor, editor, id }: { anchor: HTMLElement; ed
 
 	return (
 		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
-			<Box ref={ refs.setFloating } role="presentation" style={ { ...floatingStyles, pointerEvents: 'none' } }>
+			<Box
+				ref={ refs.setFloating }
+				role="presentation"
+				style={ {
+					...floatingStyles,
+					pointerEvents: 'none',
+				} }
+			>
 				<InlineEditorToolbar editor={ editor } elementId={ id } />
 			</Box>
 		</FloatingPortal>

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
 	htmlV3PropTypeUtil,
@@ -25,8 +24,8 @@ type TagPropType = PropType< 'tag' > & {
 const HISTORY_DEBOUNCE_WAIT = 800;
 
 export default class InlineEditingReplacement extends ReplacementBase {
-	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
+	private editing = false;
 
 	getReplacementKey() {
 		return 'inline-editing';
@@ -37,7 +36,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	isEditingModeActive() {
-		return !! this.inlineEditorRoot;
+		return this.editing;
 	}
 
 	shouldRenderReplacement() {
@@ -91,8 +90,8 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	resetInlineEditorRoot() {
 		this.element.removeEventListener( 'click', this.handleRenderInlineEditor );
 		this.handlerAttached = false;
-		this.inlineEditorRoot?.unmount?.();
-		this.inlineEditorRoot = null;
+		this.reactRoot.render( null );
+		this.editing = false;
 	}
 
 	unmountInlineEditor() {
@@ -239,22 +238,29 @@ export default class InlineEditingReplacement extends ReplacementBase {
 			this.resetInlineEditorRoot();
 		}
 
-		const elementClasses = this.element.children?.[ 0 ]?.classList.toString() ?? '';
+		const contentElement = this.element.children?.[ 0 ] as HTMLElement | undefined;
+
+		if ( ! contentElement ) {
+			return;
+		}
+
+		const elementClasses = contentElement.classList.toString();
 		const propValue = this.getExtractedContentValue();
 		const expectedTag = this.getExpectedTag();
 
-		this.element.innerHTML = '';
+		contentElement.innerHTML = '';
+		this.editing = true;
 
-		this.inlineEditorRoot = createRoot( this.element );
-		this.inlineEditorRoot.render(
+		this.reactRoot.render(
 			<CanvasInlineEditor
 				elementClasses={ elementClasses }
 				initialValue={ propValue }
 				expectedTag={ expectedTag }
 				rootElement={ this.element }
+				contentElement={ contentElement }
 				id={ this.id }
 				setValue={ this.setContentValue.bind( this ) }
-				onBlur={ this.unmountInlineEditor.bind( this ) }
+				requestDestroy={ this.unmountInlineEditor.bind( this ) }
 			/>
 		);
 	}

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

@@ -80,6 +80,12 @@ export const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
 export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
 	const [ anchor, setAnchor ] = useState< HTMLElement | null >( null );
 
+	useEffect( () => {
+		if ( ! anchor ) {
+			removeToolbarAnchor( ownerDocument, id );
+		}
+	}, [ anchor, ownerDocument, id ] );
+
 	const onSelectionEnd = ( view: EditorView ) => {
 		const hasSelection = ! view.state.selection.empty;
 
@@ -92,7 +98,11 @@ export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
 		}
 	};
 
-	return { onSelectionEnd, anchor };
+	const clearAnchor = useCallback( () => {
+		setAnchor( null );
+	}, [] );
+
+	return { onSelectionEnd, anchor, clearAnchor };
 };
 
 const createAnchorBasedOnSelection = ( ownerDocument: Document, id: string ): HTMLElement | null => {

package/src/legacy/replacements/manager.ts

@@ -1,3 +1,5 @@
+import { createRoot, type Root } from 'react-dom/client';
+
 import type { CreateTemplatedElementTypeOptions } from '../create-templated-element-type';
 import { createTemplatedElementView } from '../create-templated-element-type';
 import type { ElementType, ElementView, LegacyWindow, ReplacementSettings } from '../types';
@@ -34,11 +36,18 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 	return class extends TemplatedView {
 		#replacement: ReplacementBaseInterface | null = null;
 		#config: ReplacementSettings;
+		#reactContainer: HTMLElement;
+		#reactRoot: Root;
 
 		constructor( ...args: unknown[] ) {
 			super( ...args );
 			const settings = this.model.get( 'settings' );
 
+			this.#reactContainer = this.el.ownerDocument.createElement( 'div' );
+			this.#reactContainer.style.display = 'none';
+			this.el.ownerDocument.body.appendChild( this.#reactContainer );
+			this.#reactRoot = createRoot( this.#reactContainer );
+
 			this.#config = {
 				getSetting: settings.get.bind( settings ),
 				setSetting: settings.set.bind( settings ),
@@ -46,6 +55,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				type: this?.model?.get( 'widgetType' ) ?? this.container?.model?.get( 'elType' ) ?? null,
 				id: this?.model?.get( 'id' ) ?? null,
 				refreshView: this.refreshView.bind( this ),
+				reactRoot: this.#reactRoot,
+				reactContainer: this.#reactContainer,
 			};
 		}
 
@@ -72,6 +83,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 
 		onDestroy() {
 			this.#triggerAltMethod( 'onDestroy' );
+			this.#reactRoot.unmount();
+			this.#reactContainer.remove();
 		}
 
 		_afterRender() {

package/src/legacy/types.ts

@@ -1,3 +1,4 @@
+import { type Root } from 'react-dom/client';
 import { type V1Element } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
@@ -241,4 +242,6 @@ export type ReplacementSettings = {
 	id: string;
 	element: HTMLElement;
 	refreshView: () => void;
+	reactRoot: Root;
+	reactContainer: HTMLElement;
 };