@elementor/editor-controls 3.35.0-351 → 3.35.0-352

package/dist/index.mjs

@@ -5909,16 +5909,19 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 // src/controls/inline-editing-control.tsx
 import * as React102 from "react";
 import { htmlPropTypeUtil } from "@elementor/editor-props";
+import { Box as Box23 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React101 from "react";
-import { useEffect as useEffect10, useRef as useRef26 } from "react";
-import { Box as Box22 } from "@elementor/ui";
+import { useEffect as useEffect11, useRef as useRef27 } from "react";
+import { bindPopover as bindPopover8, Box as Box22, ClickAwayListener, Popover as Popover8, usePopupState as usePopupState9 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
+import Heading from "@tiptap/extension-heading";
 import Italic from "@tiptap/extension-italic";
 import Link3 from "@tiptap/extension-link";
+import Paragraph from "@tiptap/extension-paragraph";
 import Strike from "@tiptap/extension-strike";
 import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
@@ -5926,6 +5929,16 @@ import Text from "@tiptap/extension-text";
 import Underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 
+// src/utils/inline-editing.ts
+function isEmpty(value = "") {
+  if (!value) {
+    return true;
+  }
+  const pseudoElement = document.createElement("div");
+  pseudoElement.innerHTML = value;
+  return !pseudoElement.textContent?.length;
+}
+
 // src/components/inline-editor-toolbar.tsx
 import * as React100 from "react";
 import { useMemo as useMemo12, useRef as useRef25, useState as useState17 } from "react";
@@ -6085,7 +6098,7 @@ var InlineEditorToolbar = ({ editor }) => {
   const [urlValue, setUrlValue] = useState17("");
   const [openInNewTab, setOpenInNewTab] = useState17(false);
   const toolbarRef = useRef25(null);
-  const popupState = usePopupState8({ variant: "popover" });
+  const linkPopupState = usePopupState8({ variant: "popover" });
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
@@ -6095,7 +6108,7 @@ var InlineEditorToolbar = ({ editor }) => {
     const linkAttrs = editor.getAttributes("link");
     setUrlValue(linkAttrs.href || "");
     setOpenInNewTab(linkAttrs.target === "_blank");
-    popupState.open(toolbarRef.current);
+    linkPopupState.open(toolbarRef.current);
   };
   const handleUrlChange = (event) => {
     setUrlValue(event.target.value);
@@ -6112,16 +6125,16 @@ var InlineEditorToolbar = ({ editor }) => {
     } else {
       editor.chain().focus().unsetLink().run();
     }
-    popupState.close();
+    linkPopupState.close();
   };
+  React100.useEffect(() => {
+    editor?.commands?.focus();
+  }, [editor]);
   return /* @__PURE__ */ React100.createElement(
     Box21,
     {
       ref: toolbarRef,
       sx: {
-        position: "absolute",
-        left: 0,
-        top: -40,
         display: "inline-flex",
         gap: 0.5,
         padding: 0.5,
@@ -6129,7 +6142,8 @@ var InlineEditorToolbar = ({ editor }) => {
         backgroundColor: "background.paper",
         boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
         alignItems: "center",
-        visibility: popupState.isOpen ? "hidden" : "visible"
+        visibility: linkPopupState.isOpen ? "hidden" : "visible",
+        pointerEvents: linkPopupState.isOpen ? "none" : "all"
       }
     },
     /* @__PURE__ */ React100.createElement(Tooltip9, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React100.createElement(IconButton8, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
@@ -6161,7 +6175,14 @@ var InlineEditorToolbar = ({ editor }) => {
           value: button.action,
           "aria-label": button.label,
           size: "tiny",
-          onClick: () => button.action === "link" ? handleLinkClick() : button.method?.(editor)
+          onClick: () => {
+            if (button.action === "link") {
+              handleLinkClick();
+            } else {
+              button.method?.(editor);
+            }
+            editor?.commands?.focus();
+          }
         },
         button.icon
       )))
@@ -6169,7 +6190,7 @@ var InlineEditorToolbar = ({ editor }) => {
     /* @__PURE__ */ React100.createElement(
       UrlPopover,
       {
-        popupState,
+        popupState: linkPopupState,
         anchorRef: toolbarRef,
         restoreValue: handleUrlSubmit,
         value: urlValue,
@@ -6183,8 +6204,8 @@ var InlineEditorToolbar = ({ editor }) => {
 
 // src/components/inline-editor.tsx
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef26(false);
-  useEffect10(() => {
+  const hasMounted = useRef27(false);
+  useEffect11(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -6193,22 +6214,67 @@ var useOnUpdate = (callback, dependencies) => {
   }, dependencies);
 };
 var InlineEditor = React101.forwardRef(
-  ({ value, setValue, attributes = {}, showToolbar = false, sx, ...props }, ref) => {
+  ({
+    value,
+    setValue,
+    attributes = {},
+    showToolbar = false,
+    autofocus = false,
+    sx = {},
+    onBlur = void 0,
+    getInitialPopoverPosition = void 0,
+    expectedTag = null
+  }, ref) => {
+    const containerRef = React101.useRef(null);
+    const popupState = usePopupState9({ variant: "popover", disableAutoFocus: true });
+    const [hasSelectedContent, setHasSelectedContent] = React101.useState(false);
+    const documentContentSettings = !!expectedTag ? "block+" : "inline*";
+    const onSelectionEnd = (view) => {
+      setHasSelectedContent(() => !view.state.selection.empty);
+      queueMicrotask(() => view.focus());
+    };
+    const onKeyDown = (_, event) => {
+      if (event.key === "Escape") {
+        onBlur?.(event);
+      }
+    };
+    const toolbarRelatedListeners = showToolbar ? {
+      mouseup: onSelectionEnd,
+      keyup: onSelectionEnd,
+      keydown: onKeyDown
+    } : void 0;
     const editor = useEditor({
       extensions: [
         Document.extend({
-          content: "inline*"
+          content: documentContentSettings
+        }),
+        Paragraph.extend({
+          renderHTML({ HTMLAttributes }) {
+            const tag = expectedTag ?? "p";
+            return [tag, { ...HTMLAttributes, style: "margin:0;padding:0;" }, 0];
+          }
+        }),
+        Heading.extend({
+          renderHTML({ node, HTMLAttributes }) {
+            if (expectedTag) {
+              return [expectedTag, { ...HTMLAttributes, style: "margin:0;padding:0;" }, 0];
+            }
+            const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
+            return [`h${level}`, { ...HTMLAttributes, style: "margin:0;padding:0;" }, 0];
+          }
+        }).configure({
+          levels: [1, 2, 3, 4, 5, 6]
+        }),
+        Link3.configure({
+          openOnClick: false
         }),
         Text,
         Bold,
         Italic,
         Strike,
-        Underline,
         Superscript,
         Subscript,
-        Link3.configure({
-          openOnClick: false
-        }),
+        Underline,
         HardBreak.extend({
           addKeyboardShortcuts() {
             return {
@@ -6218,7 +6284,19 @@ var InlineEditor = React101.forwardRef(
         })
       ],
       content: value,
-      onUpdate: ({ editor: updatedEditor }) => setValue(updatedEditor.getHTML())
+      onUpdate: ({ editor: updatedEditor }) => {
+        const newValue = updatedEditor.getHTML();
+        setValue(isEmpty(newValue) ? null : newValue);
+      },
+      autofocus,
+      editorProps: {
+        attributes: {
+          ...attributes,
+          class: attributes.class ?? "",
+          role: "textbox"
+        },
+        handleDOMEvents: toolbarRelatedListeners
+      }
     });
     useOnUpdate(() => {
       if (!editor) {
@@ -6229,10 +6307,64 @@ var InlineEditor = React101.forwardRef(
         editor.commands.setContent(value, { emitUpdate: false });
       }
     }, [editor, value]);
-    return /* @__PURE__ */ React101.createElement(
-      Box22,
+    const computePopupPosition = () => {
+      const positionFallback = { left: 0, top: 0 };
+      const { left, top } = containerRef.current?.getBoundingClientRect() ?? positionFallback;
+      const initial = getInitialPopoverPosition?.() ?? positionFallback;
+      return {
+        left: left + initial.left,
+        top: top + initial.top
+      };
+    };
+    const Wrapper = ({ children }) => {
+      const wrappedChildren = /* @__PURE__ */ React101.createElement(Box22, { ref: containerRef, ...sx }, children);
+      return onBlur ? /* @__PURE__ */ React101.createElement(
+        ClickAwayListener,
+        {
+          onClickAway: (event) => {
+            if (containerRef.current?.contains(event.target) || editor.view.dom.contains(event.target)) {
+              return;
+            }
+            onBlur?.(event);
+          }
+        },
+        wrappedChildren
+      ) : /* @__PURE__ */ React101.createElement(React101.Fragment, null, wrappedChildren);
+    };
+    return /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(Wrapper, null, /* @__PURE__ */ React101.createElement(EditorContent, { ref, editor })), showToolbar && containerRef.current && /* @__PURE__ */ React101.createElement(
+      Popover8,
+      {
+        slotProps: {
+          root: {
+            sx: {
+              pointerEvents: "none"
+            }
+          }
+        },
+        ...bindPopover8(popupState),
+        open: hasSelectedContent,
+        anchorReference: "anchorPosition",
+        anchorPosition: computePopupPosition(),
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" }
+      },
+      /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor })
+    ));
+  }
+);
+
+// src/controls/inline-editing-control.tsx
+var InlineEditingControl = createControl(
+  ({
+    sx,
+    attributes,
+    props
+  }) => {
+    const { value, setValue } = useBoundProp(htmlPropTypeUtil);
+    const handleChange = (newValue) => setValue(newValue);
+    return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(
+      Box23,
       {
-        ref,
         sx: {
           p: 0.8,
           border: "1px solid",
@@ -6256,24 +6388,19 @@ var InlineEditor = React101.forwardRef(
               color: "inherit"
             }
           },
+          ".strip-styles *": {
+            all: "unset"
+          },
           ...sx
         },
         ...attributes,
         ...props
       },
-      showToolbar && /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor }),
-      /* @__PURE__ */ React101.createElement(EditorContent, { editor })
-    );
+      /* @__PURE__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+    ));
   }
 );
 
-// src/controls/inline-editing-control.tsx
-var InlineEditingControl = createControl(() => {
-  const { value, setValue } = useBoundProp(htmlPropTypeUtil);
-  const handleChange = (newValue) => setValue(newValue);
-  return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange }));
-});
-
 // src/components/icon-buttons/clear-icon-button.tsx
 import * as React103 from "react";
 import { BrushBigIcon } from "@elementor/icons";
@@ -6286,16 +6413,16 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React104 from "react";
-import { useEffect as useEffect11, useState as useState18 } from "react";
+import { useEffect as useEffect12, useState as useState19 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
-  bindPopover as bindPopover8,
+  bindPopover as bindPopover9,
   bindTrigger as bindTrigger6,
-  Box as Box23,
+  Box as Box24,
   IconButton as IconButton10,
   Infotip as Infotip4,
   Tooltip as Tooltip11,
-  usePopupState as usePopupState9
+  usePopupState as usePopupState10
 } from "@elementor/ui";
 import { __ as __52 } from "@wordpress/i18n";
 var SIZE9 = "tiny";
@@ -6315,7 +6442,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState18(initialOpenItem);
+  const [openItem, setOpenItem] = useState19(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6399,7 +6526,7 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React104.createElement(Box23, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+    /* @__PURE__ */ React104.createElement(Box24, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
   ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React104.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
@@ -6468,13 +6595,13 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(Tooltip11, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(Tooltip11, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(EyeIcon2, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(Tooltip11, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(IconButton10, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(XIcon4, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box23, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(Box24, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState18(null);
-  const popoverState = usePopupState9({ variant: "popover" });
-  const popoverProps = bindPopover8(popoverState);
-  useEffect11(() => {
+  const [ref, setRef] = useState19(null);
+  const popoverState = usePopupState10({ variant: "popover" });
+  const popoverProps = bindPopover9(popoverState);
+  useEffect12(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();