@elementor/editor-controls 4.0.0 → 4.0.1

package/dist/index.mjs

@@ -3980,7 +3980,7 @@ var AspectRatioControl = createControl(({ label }) => {
 import * as React71 from "react";
 import { useState as useState14 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
+import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil3 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled7, ThemeProvider } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
@@ -4072,8 +4072,9 @@ var StyledCardMediaContainer = styled7(Stack13)`
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
 var SvgMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(imageSrcPropTypeUtil2);
-  const { id, url } = value ?? {};
+  const { value, setValue } = useBoundProp(svgSrcPropTypeUtil);
+  const id = value?.id;
+  const url = value?.url;
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
@@ -4089,7 +4090,7 @@ var SvgMediaControl = createControl(() => {
           $$type: "image-attachment-id",
           value: selectedAttachment.id
         },
-        url: null
+        url: urlPropTypeUtil3.create(selectedAttachment.url)
       });
     }
   });
@@ -6428,11 +6429,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";
@@ -6473,9 +6471,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();
@@ -6483,7 +6484,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;
@@ -6497,6 +6498,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     class: elementClasses
   });
   const editor = useEditor({
+    ...mountElement ? { element: mountElement } : {},
     extensions: [
       Document.extend({
         content: documentContentSettings
@@ -6550,6 +6552,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(() => {
@@ -6561,33 +6564,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(() => {