@elementor/editor-controls 4.0.0 → 4.0.2

package/dist/index.d.mts

@@ -630,6 +630,7 @@ type InlineEditorProps = {
     onEditorCreate?: Dispatch<SetStateAction<Editor | null>>;
     wrapperClassName?: string;
     onSelectionEnd?: (view: EditorView) => void;
+    mountElement?: HTMLElement | null;
 };
 declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<unknown>>;
 

package/dist/index.d.ts

@@ -630,6 +630,7 @@ type InlineEditorProps = {
     onEditorCreate?: Dispatch<SetStateAction<Editor | null>>;
     wrapperClassName?: string;
     onSelectionEnd?: (view: EditorView) => void;
+    mountElement?: HTMLElement | null;
 };
 declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<unknown>>;
 

package/dist/index.js

@@ -4134,8 +4134,9 @@ var StyledCardMediaContainer = (0, import_ui56.styled)(import_ui56.Stack)`
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
 var SvgMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props28.imageSrcPropTypeUtil);
-  const { id, url } = value ?? {};
+  const { value, setValue } = useBoundProp(import_editor_props28.svgSrcPropTypeUtil);
+  const id = value?.id;
+  const url = value?.url;
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
@@ -4151,7 +4152,7 @@ var SvgMediaControl = createControl(() => {
           $$type: "image-attachment-id",
           value: selectedAttachment.id
         },
-        url: null
+        url: import_editor_props28.urlPropTypeUtil.create(selectedAttachment.url)
       });
     }
   });
@@ -6492,9 +6493,12 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     expectedTag = null,
     onEditorCreate,
     wrapperClassName,
-    onSelectionEnd
+    onSelectionEnd,
+    mountElement = null
   } = props;
   const containerRef = (0, import_react51.useRef)(null);
+  const onBlurRef = (0, import_react51.useRef)(onBlur);
+  onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
     const newValue = updatedEditor.getHTML();
@@ -6502,7 +6506,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;
@@ -6516,6 +6520,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
     class: elementClasses
   });
   const editor = (0, import_react52.useEditor)({
+    ...mountElement ? { element: mountElement } : {},
     extensions: [
       import_extension_document.default.extend({
         content: documentContentSettings
@@ -6569,6 +6574,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(() => {
@@ -6580,33 +6586,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(import_react52.EditorContent, { ref, editor })
-  ));
+  if (mountElement) {
+    return null;
+  }
+  return /* @__PURE__ */ React100.createElement(import_ui86.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React100.createElement(import_react52.EditorContent, { ref, editor }));
 });
-var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
-  const wrappedChildren = /* @__PURE__ */ React100.createElement(import_ui86.Box, { ref: containerRef, ...sx, className }, children);
-  return onBlur ? /* @__PURE__ */ React100.createElement(
-    import_ui86.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 = (0, import_react51.useRef)(false);
   (0, import_react51.useEffect)(() => {