@elementor/editor-controls 4.1.0-739 → 4.1.0-741

package/dist/index.mjs

@@ -6457,11 +6457,8 @@ import { debounce as debounce4 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
 import * as React100 from "react";
-import {
-  useEffect as useEffect12,
-  useRef as useRef24
-} from "react";
-import { Box as Box22, ClickAwayListener } from "@elementor/ui";
+import { useEffect as useEffect12, useRef as useRef24 } from "react";
+import { Box as Box22 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
@@ -6502,9 +6499,12 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     expectedTag = null,
     onEditorCreate,
     wrapperClassName,
-    onSelectionEnd
+    onSelectionEnd,
+    mountElement = null
   } = props;
   const containerRef = useRef24(null);
+  const onBlurRef = useRef24(onBlur);
+  onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
     const newValue = updatedEditor.getHTML();
@@ -6512,7 +6512,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
   };
   const onKeyDown = (_, event) => {
     if (event.key === "Escape") {
-      onBlur?.();
+      onBlurRef.current?.();
     }
     if (!event.metaKey && !event.ctrlKey || event.altKey) {
       return;
@@ -6526,6 +6526,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     class: elementClasses
   });
   const editor = useEditor({
+    ...mountElement ? { element: mountElement } : {},
     extensions: [
       Document.extend({
         content: documentContentSettings
@@ -6579,6 +6580,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
       }
     },
     onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
+    onBlur: mountElement ? void 0 : () => onBlurRef.current?.(),
     onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
   });
   useOnUpdate(() => {
@@ -6590,33 +6592,11 @@ var InlineEditor = React100.forwardRef((props, ref) => {
       editor.commands.setContent(value, { emitUpdate: false });
     }
   }, [editor, value]);
-  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
-    Wrapper,
-    {
-      containerRef,
-      editor,
-      sx,
-      onBlur,
-      className: wrapperClassName
-    },
-    /* @__PURE__ */ React100.createElement(EditorContent, { ref, editor })
-  ));
+  if (mountElement) {
+    return null;
+  }
+  return /* @__PURE__ */ React100.createElement(Box22, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React100.createElement(EditorContent, { ref, editor }));
 });
-var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
-  const wrappedChildren = /* @__PURE__ */ React100.createElement(Box22, { ref: containerRef, ...sx, className }, children);
-  return onBlur ? /* @__PURE__ */ React100.createElement(
-    ClickAwayListener,
-    {
-      onClickAway: (event) => {
-        if (containerRef.current?.contains(event.target) || editor.view.dom.contains(event.target)) {
-          return;
-        }
-        onBlur?.();
-      }
-    },
-    wrappedChildren
-  ) : /* @__PURE__ */ React100.createElement(React100.Fragment, null, wrappedChildren);
-};
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef24(false);
   useEffect12(() => {