@elementor/editor-controls 4.0.0-512 → 4.0.0-513

package/dist/index.js

@@ -6213,14 +6213,14 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/inline-editing-control.tsx
-var React101 = __toESM(require("react"));
+var React99 = __toESM(require("react"));
 var import_editor_props51 = require("@elementor/editor-props");
-var import_ui87 = require("@elementor/ui");
+var import_ui85 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
-var React100 = __toESM(require("react"));
-var import_react55 = require("react");
-var import_ui86 = require("@elementor/ui");
+var React98 = __toESM(require("react"));
+var import_react52 = require("react");
+var import_ui84 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
 var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
@@ -6233,7 +6233,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
 var import_extension_text = __toESM(require("@tiptap/extension-text"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
-var import_react56 = require("@tiptap/react");
+var import_react53 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
 function isEmpty(value = "") {
@@ -6245,457 +6245,147 @@ function isEmpty(value = "") {
   return !pseudoElement.textContent?.length;
 }
 
-// src/components/inline-editor-toolbar.tsx
-var React99 = __toESM(require("react"));
-var import_react53 = require("react");
-var import_editor_elements6 = require("@elementor/editor-elements");
-var import_icons34 = require("@elementor/icons");
-var import_ui85 = require("@elementor/ui");
-var import_react54 = require("@tiptap/react");
-var import_i18n51 = require("@wordpress/i18n");
-
-// src/components/url-popover.tsx
-var React98 = __toESM(require("react"));
-var import_react52 = require("react");
-var import_icons33 = require("@elementor/icons");
-var import_ui84 = require("@elementor/ui");
-var import_i18n50 = require("@wordpress/i18n");
-var UrlPopover = ({
-  popupState,
-  restoreValue,
-  anchorRef,
-  value,
-  onChange,
-  openInNewTab,
-  onToggleNewTab
-}) => {
-  const inputRef = (0, import_react52.useRef)(null);
-  (0, import_react52.useEffect)(() => {
-    if (popupState.isOpen) {
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [popupState.isOpen]);
-  const handleClose = () => {
-    restoreValue();
-    popupState.close();
+// src/components/inline-editor.tsx
+var ITALIC_KEYBOARD_SHORTCUT = "i";
+var BOLD_KEYBOARD_SHORTCUT = "b";
+var UNDERLINE_KEYBOARD_SHORTCUT = "u";
+var InlineEditor = React98.forwardRef((props, ref) => {
+  const {
+    value,
+    setValue,
+    editorProps = {},
+    elementClasses = "",
+    autofocus = false,
+    sx = {},
+    onBlur = void 0,
+    expectedTag = null,
+    onEditorCreate,
+    wrapperClassName,
+    onSelectionEnd
+  } = props;
+  const containerRef = (0, import_react52.useRef)(null);
+  const documentContentSettings = !!expectedTag ? "block+" : "inline*";
+  const onUpdate = ({ editor: updatedEditor }) => {
+    const newValue = updatedEditor.getHTML();
+    setValue(isEmpty(newValue) ? null : newValue);
   };
-  return /* @__PURE__ */ React98.createElement(
-    import_ui84.Popover,
-    {
-      slotProps: {
-        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
-      },
-      ...(0, import_ui84.bindPopover)(popupState),
-      anchorOrigin: { vertical: "top", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      onClose: handleClose
-    },
-    /* @__PURE__ */ React98.createElement(import_ui84.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React98.createElement(
-      import_ui84.TextField,
-      {
-        value,
-        onChange,
-        size: "tiny",
-        fullWidth: true,
-        placeholder: (0, import_i18n50.__)("Type a URL", "elementor"),
-        inputProps: { ref: inputRef },
-        color: "secondary",
-        InputProps: { sx: { borderRadius: "8px" } },
-        onKeyUp: (event) => event.key === "Enter" && handleClose()
-      }
-    ), /* @__PURE__ */ React98.createElement(import_ui84.Tooltip, { title: (0, import_i18n50.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React98.createElement(
-      import_ui84.ToggleButton,
-      {
-        size: "tiny",
-        value: "newTab",
-        selected: openInNewTab,
-        onClick: onToggleNewTab,
-        "aria-label": (0, import_i18n50.__)("Open in a new tab", "elementor"),
-        sx: { borderRadius: "8px" }
-      },
-      /* @__PURE__ */ React98.createElement(import_icons33.ExternalLinkIcon, { fontSize: "tiny" })
-    )))
-  );
-};
-
-// src/components/inline-editor-toolbar.tsx
-var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
-var toolbarButtons = {
-  clear: {
-    label: (0, import_i18n51.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.MinusIcon, { fontSize: "tiny" }),
-    action: "clear",
-    method: (editor) => {
-      editor.chain().focus().clearNodes().unsetAllMarks().run();
-    }
-  },
-  bold: {
-    label: (0, import_i18n51.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.BoldIcon, { fontSize: "tiny" }),
-    action: "bold",
-    method: (editor) => {
-      editor.chain().focus().toggleBold().run();
+  const onKeyDown = (_, event) => {
+    if (event.key === "Escape") {
+      onBlur?.();
     }
-  },
-  italic: {
-    label: (0, import_i18n51.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.ItalicIcon, { fontSize: "tiny" }),
-    action: "italic",
-    method: (editor) => {
-      editor.chain().focus().toggleItalic().run();
-    }
-  },
-  underline: {
-    label: (0, import_i18n51.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.UnderlineIcon, { fontSize: "tiny" }),
-    action: "underline",
-    method: (editor) => {
-      editor.chain().focus().toggleUnderline().run();
-    }
-  },
-  strike: {
-    label: (0, import_i18n51.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.StrikethroughIcon, { fontSize: "tiny" }),
-    action: "strike",
-    method: (editor) => {
-      editor.chain().focus().toggleStrike().run();
-    }
-  },
-  superscript: {
-    label: (0, import_i18n51.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.SuperscriptIcon, { fontSize: "tiny" }),
-    action: "superscript",
-    method: (editor) => {
-      editor.chain().focus().toggleSuperscript().run();
-    }
-  },
-  subscript: {
-    label: (0, import_i18n51.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.SubscriptIcon, { fontSize: "tiny" }),
-    action: "subscript",
-    method: (editor) => {
-      editor.chain().focus().toggleSubscript().run();
-    }
-  },
-  link: {
-    label: (0, import_i18n51.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React99.createElement(import_icons34.LinkIcon, { fontSize: "tiny" }),
-    action: "link",
-    method: null
-  }
-};
-var { clear: clearButton, ...formatButtons } = toolbarButtons;
-var possibleFormats = Object.keys(formatButtons);
-var InlineEditorToolbar = ({ editor, elementId }) => {
-  const [urlValue, setUrlValue] = (0, import_react53.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react53.useState)(false);
-  const toolbarRef = (0, import_react53.useRef)(null);
-  const linkPopupState = (0, import_ui85.usePopupState)({ variant: "popover" });
-  const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
-  const editorState = (0, import_react54.useEditorState)({
-    editor,
-    selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
-  });
-  const formatButtonsList = (0, import_react53.useMemo)(() => {
-    const buttons = Object.values(formatButtons);
-    if (hasLinkOnElement) {
-      return buttons.filter((button) => button.action !== "link");
-    }
-    return buttons;
-  }, [hasLinkOnElement]);
-  const handleLinkClick = () => {
-    const linkAttrs = editor.getAttributes("link");
-    setUrlValue(linkAttrs.href || "");
-    setOpenInNewTab(linkAttrs.target === "_blank");
-    linkPopupState.open(toolbarRef.current);
-  };
-  const handleUrlChange = (event) => {
-    setUrlValue(event.target.value);
-  };
-  const handleToggleNewTab = () => {
-    setOpenInNewTab(!openInNewTab);
-  };
-  const handleUrlSubmit = () => {
-    if (urlValue) {
-      editor.chain().focus().setLink({
-        href: urlValue,
-        target: openInNewTab ? "_blank" : "_self"
-      }).run();
-    } else {
-      editor.chain().focus().unsetLink().run();
+    if (!event.metaKey && !event.ctrlKey || event.altKey) {
+      return;
     }
-    if (elementId) {
-      window.dispatchEvent(
-        new CustomEvent("elementor:inline-link-changed", {
-          detail: { elementId }
-        })
-      );
+    if ([ITALIC_KEYBOARD_SHORTCUT, BOLD_KEYBOARD_SHORTCUT, UNDERLINE_KEYBOARD_SHORTCUT].includes(event.key)) {
+      event.stopPropagation();
     }
-    linkPopupState.close();
   };
-  React99.useEffect(() => {
-    editor?.commands?.focus();
-  }, [editor]);
-  return /* @__PURE__ */ React99.createElement(
-    import_ui85.Box,
-    {
-      ref: toolbarRef,
-      sx: {
-        display: "inline-flex",
-        gap: 0.5,
-        padding: 0.5,
-        borderRadius: "8px",
-        backgroundColor: "background.paper",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-        alignItems: "center",
-        visibility: linkPopupState.isOpen ? "hidden" : "visible",
-        pointerEvents: linkPopupState.isOpen ? "none" : "all"
-      }
-    },
-    /* @__PURE__ */ React99.createElement(import_ui85.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React99.createElement(import_ui85.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React99.createElement(
-      import_ui85.ToggleButtonGroup,
-      {
-        value: editorState,
-        size: "tiny",
-        sx: {
-          display: "flex",
-          gap: 0.5,
-          border: "none",
-          [`& .${import_ui85.toggleButtonGroupClasses.firstButton}, & .${import_ui85.toggleButtonGroupClasses.middleButton}, & .${import_ui85.toggleButtonGroupClasses.lastButton}`]: {
-            borderRadius: "8px",
-            border: "none",
-            marginLeft: 0,
-            "&.Mui-selected": {
-              marginLeft: 0
-            },
-            "& + &.Mui-selected": {
-              marginLeft: 0
-            }
+  const editedElementAttributes = (HTMLAttributes) => ({
+    ...HTMLAttributes,
+    class: elementClasses
+  });
+  const editor = (0, import_react53.useEditor)({
+    extensions: [
+      import_extension_document.default.extend({
+        content: documentContentSettings
+      }),
+      import_extension_paragraph.default.extend({
+        renderHTML({ HTMLAttributes }) {
+          const tag = expectedTag ?? "p";
+          return [tag, editedElementAttributes(HTMLAttributes), 0];
+        }
+      }),
+      import_extension_heading.default.extend({
+        renderHTML({ node, HTMLAttributes }) {
+          if (expectedTag) {
+            return [expectedTag, editedElementAttributes(HTMLAttributes), 0];
           }
+          const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
+          return [`h${level}`, editedElementAttributes(HTMLAttributes), 0];
+        }
+      }).configure({
+        levels: [1, 2, 3, 4, 5, 6]
+      }),
+      import_extension_link.default.configure({
+        openOnClick: false
+      }),
+      import_extension_text.default,
+      import_extension_bold.default,
+      import_extension_italic.default,
+      import_extension_strike.default,
+      import_extension_superscript.default,
+      import_extension_subscript.default,
+      import_extension_underline.default,
+      import_extension_hard_break.default.extend({
+        addKeyboardShortcuts() {
+          return {
+            Enter: () => this.editor.commands.setHardBreak()
+          };
         }
+      })
+    ],
+    content: value,
+    onUpdate,
+    autofocus,
+    editorProps: {
+      ...editorProps,
+      handleDOMEvents: {
+        keydown: onKeyDown
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React99.createElement(import_ui85.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React99.createElement(
-        import_ui85.ToggleButton,
-        {
-          value: button.action,
-          "aria-label": button.label,
-          size: "tiny",
-          onClick: () => {
-            if (button.action === "link") {
-              handleLinkClick();
-            } else {
-              button.method?.(editor);
-            }
-            editor?.commands?.focus();
-          }
-        },
-        button.icon
-      )))
-    ),
-    /* @__PURE__ */ React99.createElement(
-      UrlPopover,
-      {
-        popupState: linkPopupState,
-        anchorRef: toolbarRef,
-        restoreValue: handleUrlSubmit,
-        value: urlValue,
-        onChange: handleUrlChange,
-        openInNewTab,
-        onToggleNewTab: handleToggleNewTab
+      attributes: {
+        ...editorProps.attributes ?? {},
+        role: "textbox"
       }
-    )
-  );
-};
-
-// src/components/inline-editor.tsx
-var ITALIC_KEYBOARD_SHORTCUT = "i";
-var BOLD_KEYBOARD_SHORTCUT = "b";
-var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var INLINE_EDITOR_RESET_CLASS = "elementor-inline-editor-reset";
-var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = (0, import_react55.useRef)(false);
-  (0, import_react55.useEffect)(() => {
-    if (hasMounted.current) {
-      callback();
-    } else {
-      hasMounted.current = true;
+    },
+    onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
+    onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
+  });
+  useOnUpdate(() => {
+    if (!editor) {
+      return;
     }
-  }, dependencies);
-};
-var calcSelectionCenter = (view, container) => {
-  if (!container) {
-    return null;
-  }
-  const { from, to } = view.state.selection;
-  const start = view.coordsAtPos(from);
-  const end = view.coordsAtPos(to);
-  const left = (start.left + end.left) / 2 - container.left;
-  const top = Math.min(start.top, end.top) - container.top;
-  return { left, top };
-};
-var Wrapper = ({ children, containerRef, editor, sx, onBlur }) => {
-  const wrappedChildren = /* @__PURE__ */ React100.createElement(import_ui86.Box, { ref: containerRef, ...sx }, children);
-  return onBlur ? /* @__PURE__ */ React100.createElement(
-    import_ui86.ClickAwayListener,
+    const currentContent = editor.getHTML();
+    if (currentContent !== value) {
+      editor.commands.setContent(value, { emitUpdate: false });
+    }
+  }, [editor, value]);
+  return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
+    Wrapper,
+    {
+      containerRef,
+      editor,
+      sx,
+      onBlur,
+      className: wrapperClassName
+    },
+    /* @__PURE__ */ React98.createElement(import_react53.EditorContent, { ref, editor })
+  ));
+});
+var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
+  const wrappedChildren = /* @__PURE__ */ React98.createElement(import_ui84.Box, { ref: containerRef, ...sx, className }, children);
+  return onBlur ? /* @__PURE__ */ React98.createElement(
+    import_ui84.ClickAwayListener,
     {
       onClickAway: (event) => {
         if (containerRef.current?.contains(event.target) || editor.view.dom.contains(event.target)) {
           return;
-        }
-        onBlur?.(event);
-      }
-    },
-    wrappedChildren
-  ) : /* @__PURE__ */ React100.createElement(React100.Fragment, null, wrappedChildren);
-};
-var InlineEditor = (0, import_react55.forwardRef)(
-  ({
-    value,
-    setValue,
-    attributes = {},
-    elementClasses = "",
-    showToolbar = false,
-    autofocus = false,
-    sx = {},
-    onBlur = void 0,
-    getInitialPopoverPosition = void 0,
-    expectedTag = null,
-    elementId = void 0
-  }, ref) => {
-    const containerRef = (0, import_react55.useRef)(null);
-    const popupState = (0, import_ui86.usePopupState)({ variant: "popover", disableAutoFocus: true });
-    const [hasSelectedContent, setHasSelectedContent] = (0, import_react55.useState)(false);
-    const documentContentSettings = !!expectedTag ? "block+" : "inline*";
-    const [selectionRect, setSelectionRect] = (0, import_react55.useState)(null);
-    const onSelectionEnd = (view) => {
-      const hasSelection = !view.state.selection.empty;
-      setHasSelectedContent(hasSelection);
-      if (hasSelection) {
-        const container = containerRef.current?.getBoundingClientRect();
-        setSelectionRect(calcSelectionCenter(view, container));
-      } else {
-        setSelectionRect(null);
-      }
-      queueMicrotask(() => view.focus());
-    };
-    const onKeyDown = (_, event) => {
-      if (event.key === "Escape") {
-        onBlur?.(event);
-      }
-      if (!event.metaKey && !event.ctrlKey || event.altKey) {
-        return;
-      }
-      if ([ITALIC_KEYBOARD_SHORTCUT, BOLD_KEYBOARD_SHORTCUT, UNDERLINE_KEYBOARD_SHORTCUT].includes(event.key)) {
-        event.stopPropagation();
-      }
-    };
-    const toolbarRelatedListeners = showToolbar ? {
-      mouseup: onSelectionEnd,
-      keyup: onSelectionEnd,
-      keydown: onKeyDown
-    } : void 0;
-    const onUpdate = ({ editor: updatedEditor }) => {
-      const newValue = updatedEditor.getHTML();
-      setValue(isEmpty(newValue) ? null : newValue);
-    };
-    const classes = `${INLINE_EDITOR_RESET_CLASS} ${elementClasses}`;
-    const editor = (0, import_react56.useEditor)({
-      extensions: [
-        import_extension_document.default.extend({
-          content: documentContentSettings
-        }),
-        import_extension_paragraph.default.extend({
-          renderHTML({ HTMLAttributes }) {
-            const tag = expectedTag ?? "p";
-            return [tag, { ...HTMLAttributes, class: classes }, 0];
-          }
-        }),
-        import_extension_heading.default.extend({
-          renderHTML({ node, HTMLAttributes }) {
-            if (expectedTag) {
-              return [expectedTag, { ...HTMLAttributes, class: classes }, 0];
-            }
-            const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
-            return [`h${level}`, { ...HTMLAttributes, class: classes }, 0];
-          }
-        }).configure({
-          levels: [1, 2, 3, 4, 5, 6]
-        }),
-        import_extension_link.default.configure({
-          openOnClick: false
-        }),
-        import_extension_text.default,
-        import_extension_bold.default,
-        import_extension_italic.default,
-        import_extension_strike.default,
-        import_extension_superscript.default,
-        import_extension_subscript.default,
-        import_extension_underline.default,
-        import_extension_hard_break.default.extend({
-          addKeyboardShortcuts() {
-            return {
-              Enter: () => this.editor.commands.setHardBreak()
-            };
-          }
-        })
-      ],
-      content: value,
-      onUpdate,
-      autofocus,
-      editorProps: {
-        attributes: {
-          ...attributes,
-          class: attributes.class ?? "",
-          role: "textbox"
-        },
-        handleDOMEvents: toolbarRelatedListeners
-      }
-    });
-    useOnUpdate(() => {
-      if (!editor) {
-        return;
-      }
-      const currentContent = editor.getHTML();
-      if (currentContent !== value) {
-        editor.commands.setContent(value, { emitUpdate: false });
-      }
-    }, [editor, value]);
-    const computePopupPosition = () => {
-      if (!selectionRect) {
-        return { left: 0, top: 0 };
-      }
-      const container = containerRef.current?.getBoundingClientRect();
-      if (!container) {
-        return { left: 0, top: 0 };
+        }
+        onBlur?.();
       }
-      const initial = getInitialPopoverPosition?.() ?? { left: 0, top: 0 };
-      return {
-        left: container.left + selectionRect.left + initial.left,
-        top: container.top + selectionRect.top + initial.top
-      };
-    };
-    return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(Wrapper, { containerRef, editor, sx, onBlur }, /* @__PURE__ */ React100.createElement(import_react56.EditorContent, { ref, editor })), showToolbar && containerRef.current && /* @__PURE__ */ React100.createElement(
-      import_ui86.Popover,
-      {
-        slotProps: {
-          root: {
-            sx: {
-              pointerEvents: "none"
-            }
-          }
-        },
-        ...(0, import_ui86.bindPopover)(popupState),
-        open: hasSelectedContent && selectionRect !== null,
-        anchorReference: "anchorPosition",
-        anchorPosition: computePopupPosition(),
-        anchorOrigin: { vertical: "top", horizontal: "center" },
-        transformOrigin: { vertical: "bottom", horizontal: "center" }
-      },
-      /* @__PURE__ */ React100.createElement(InlineEditorToolbar, { editor, elementId })
-    ));
-  }
-);
+    },
+    wrappedChildren
+  ) : /* @__PURE__ */ React98.createElement(React98.Fragment, null, wrappedChildren);
+};
+var useOnUpdate = (callback, dependencies) => {
+  const hasMounted = (0, import_react52.useRef)(false);
+  (0, import_react52.useEffect)(() => {
+    if (hasMounted.current) {
+      callback();
+    } else {
+      hasMounted.current = true;
+    }
+  }, dependencies);
+};
 
 // src/controls/inline-editing-control.tsx
 var InlineEditingControl = createControl(
@@ -6706,8 +6396,8 @@ var InlineEditingControl = createControl(
   }) => {
     const { value, setValue } = useBoundProp(import_editor_props51.htmlPropTypeUtil);
     const handleChange = (newValue) => setValue(newValue);
-    return /* @__PURE__ */ React101.createElement(ControlActions, null, /* @__PURE__ */ React101.createElement(
-      import_ui87.Box,
+    return /* @__PURE__ */ React99.createElement(ControlActions, null, /* @__PURE__ */ React99.createElement(
+      import_ui85.Box,
       {
         sx: {
           p: 0.8,
@@ -6744,27 +6434,27 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React101.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+      /* @__PURE__ */ React99.createElement(InlineEditor, { value: value || "", setValue: handleChange })
     ));
   }
 );
 
 // src/components/icon-buttons/clear-icon-button.tsx
-var React102 = __toESM(require("react"));
-var import_icons35 = require("@elementor/icons");
-var import_ui88 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui88.styled)(import_ui88.IconButton)(({ theme }) => ({
+var React100 = __toESM(require("react"));
+var import_icons33 = require("@elementor/icons");
+var import_ui86 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui86.styled)(import_ui86.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React102.createElement(import_ui88.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React102.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React102.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React100.createElement(import_ui86.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React100.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React100.createElement(import_icons33.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React103 = __toESM(require("react"));
-var import_react57 = require("react");
-var import_icons36 = require("@elementor/icons");
-var import_ui89 = require("@elementor/ui");
-var import_i18n52 = require("@wordpress/i18n");
+var React101 = __toESM(require("react"));
+var import_react54 = require("react");
+var import_icons34 = require("@elementor/icons");
+var import_ui87 = require("@elementor/ui");
+var import_i18n50 = require("@wordpress/i18n");
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -6782,7 +6472,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react54.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6845,8 +6535,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React103.createElement(
-    import_ui89.IconButton,
+  const addButton = /* @__PURE__ */ React101.createElement(
+    import_ui87.IconButton,
     {
       size: SIZE9,
       sx: {
@@ -6854,32 +6544,32 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n52.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n50.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React103.createElement(import_icons36.PlusIcon, { fontSize: SIZE9 })
+    /* @__PURE__ */ React101.createElement(import_icons34.PlusIcon, { fontSize: SIZE9 })
   );
-  return /* @__PURE__ */ React103.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React103.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React103.createElement(
-    import_ui89.Infotip,
+  return /* @__PURE__ */ React101.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React101.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React101.createElement(
+    import_ui87.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React103.createElement(import_ui89.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React103.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React101.createElement(import_ui87.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React101.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React103.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React103.createElement(
+    return /* @__PURE__ */ React101.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React101.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React103.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React103.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React101.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React101.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React101.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React101.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -6891,7 +6581,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React103.createElement(
+      (props) => /* @__PURE__ */ React101.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -6921,27 +6611,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = (0, import_i18n52.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n52.__)("Show", "elementor") : (0, import_i18n52.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n52.__)("Remove", "elementor");
-  return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
+  const duplicateLabel = (0, import_i18n50.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n50.__)("Show", "elementor") : (0, import_i18n50.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n50.__)("Remove", "elementor");
+  return /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n52.__)("Open item", "elementor"),
-      ...(0, import_ui89.bindTrigger)(popoverState),
+      "aria-label": (0, import_i18n50.__)("Open item", "elementor"),
+      ...(0, import_ui87.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React103.createElement(import_icons36.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React103.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React103.createElement(import_icons36.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React103.createElement(import_icons36.XIcon, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React101.createElement(React101.Fragment, null, showDuplicate && /* @__PURE__ */ React101.createElement(import_ui87.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React101.createElement(import_ui87.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React101.createElement(import_icons34.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React101.createElement(import_ui87.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React101.createElement(import_ui87.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React101.createElement(import_icons34.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React101.createElement(import_icons34.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React101.createElement(import_ui87.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React101.createElement(import_ui87.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React101.createElement(import_icons34.XIcon, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React103.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React103.createElement(import_ui89.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React101.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React101.createElement(import_ui87.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react57.useState)(null);
-  const popoverState = (0, import_ui89.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui89.bindPopover)(popoverState);
-  (0, import_react57.useEffect)(() => {
+  const [ref, setRef] = (0, import_react54.useState)(null);
+  const popoverState = (0, import_ui87.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui87.bindPopover)(popoverState);
+  (0, import_react54.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -6955,6 +6645,270 @@ var usePopover = (openOnMount, onOpen) => {
   };
 };
 
+// src/components/inline-editor-toolbar.tsx
+var React103 = __toESM(require("react"));
+var import_react56 = require("react");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_icons36 = require("@elementor/icons");
+var import_ui89 = require("@elementor/ui");
+var import_react57 = require("@tiptap/react");
+var import_i18n52 = require("@wordpress/i18n");
+
+// src/components/url-popover.tsx
+var React102 = __toESM(require("react"));
+var import_react55 = require("react");
+var import_icons35 = require("@elementor/icons");
+var import_ui88 = require("@elementor/ui");
+var import_i18n51 = require("@wordpress/i18n");
+var UrlPopover = ({
+  popupState,
+  restoreValue,
+  anchorRef,
+  value,
+  onChange,
+  openInNewTab,
+  onToggleNewTab
+}) => {
+  const inputRef = (0, import_react55.useRef)(null);
+  (0, import_react55.useEffect)(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [popupState.isOpen]);
+  const handleClose = () => {
+    restoreValue();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React102.createElement(
+    import_ui88.Popover,
+    {
+      slotProps: {
+        paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
+      },
+      ...(0, import_ui88.bindPopover)(popupState),
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React102.createElement(import_ui88.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React102.createElement(
+      import_ui88.TextField,
+      {
+        value,
+        onChange,
+        size: "tiny",
+        fullWidth: true,
+        placeholder: (0, import_i18n51.__)("Type a URL", "elementor"),
+        inputProps: { ref: inputRef },
+        color: "secondary",
+        InputProps: { sx: { borderRadius: "8px" } },
+        onKeyUp: (event) => event.key === "Enter" && handleClose()
+      }
+    ), /* @__PURE__ */ React102.createElement(import_ui88.Tooltip, { title: (0, import_i18n51.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React102.createElement(
+      import_ui88.ToggleButton,
+      {
+        size: "tiny",
+        value: "newTab",
+        selected: openInNewTab,
+        onClick: onToggleNewTab,
+        "aria-label": (0, import_i18n51.__)("Open in a new tab", "elementor"),
+        sx: { borderRadius: "8px" }
+      },
+      /* @__PURE__ */ React102.createElement(import_icons35.ExternalLinkIcon, { fontSize: "tiny" })
+    )))
+  );
+};
+
+// src/components/inline-editor-toolbar.tsx
+var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
+  const [urlValue, setUrlValue] = (0, import_react56.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react56.useState)(false);
+  const toolbarRef = (0, import_react56.useRef)(null);
+  const linkPopupState = (0, import_ui89.usePopupState)({ variant: "popover" });
+  const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
+  const editorState = (0, import_react57.useEditorState)({
+    editor,
+    selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
+  });
+  const formatButtonsList = (0, import_react56.useMemo)(() => {
+    const buttons = Object.values(formatButtons);
+    if (hasLinkOnElement) {
+      return buttons.filter((button) => button.action !== "link");
+    }
+    return buttons;
+  }, [hasLinkOnElement]);
+  const handleLinkClick = () => {
+    const linkAttrs = editor.getAttributes("link");
+    setUrlValue(linkAttrs.href || "");
+    setOpenInNewTab(linkAttrs.target === "_blank");
+    linkPopupState.open(toolbarRef.current);
+  };
+  const handleUrlChange = (event) => {
+    setUrlValue(event.target.value);
+  };
+  const handleToggleNewTab = () => {
+    setOpenInNewTab(!openInNewTab);
+  };
+  const handleUrlSubmit = () => {
+    if (urlValue) {
+      editor.chain().focus().setLink({
+        href: urlValue,
+        target: openInNewTab ? "_blank" : "_self"
+      }).run();
+    } else {
+      editor.chain().focus().unsetLink().run();
+    }
+    if (elementId) {
+      window.dispatchEvent(
+        new CustomEvent("elementor:inline-link-changed", {
+          detail: { elementId }
+        })
+      );
+    }
+    linkPopupState.close();
+  };
+  React103.useEffect(() => {
+    editor?.commands?.focus();
+  }, [editor]);
+  return /* @__PURE__ */ React103.createElement(
+    import_ui89.Box,
+    {
+      ref: toolbarRef,
+      sx: {
+        display: "inline-flex",
+        gap: 0.5,
+        padding: 0.5,
+        borderRadius: "8px",
+        backgroundColor: "background.paper",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+        alignItems: "center",
+        visibility: linkPopupState.isOpen ? "hidden" : "visible",
+        pointerEvents: linkPopupState.isOpen ? "none" : "all",
+        ...sx
+      }
+    },
+    /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React103.createElement(
+      import_ui89.ToggleButtonGroup,
+      {
+        value: editorState,
+        size: "tiny",
+        sx: {
+          display: "flex",
+          gap: 0.5,
+          border: "none",
+          [`& .${import_ui89.toggleButtonGroupClasses.firstButton}, & .${import_ui89.toggleButtonGroupClasses.middleButton}, & .${import_ui89.toggleButtonGroupClasses.lastButton}`]: {
+            borderRadius: "8px",
+            border: "none",
+            marginLeft: 0,
+            "&.Mui-selected": {
+              marginLeft: 0
+            },
+            "& + &.Mui-selected": {
+              marginLeft: 0
+            }
+          }
+        }
+      },
+      formatButtonsList.map((button) => /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React103.createElement(
+        import_ui89.ToggleButton,
+        {
+          value: button.action,
+          "aria-label": button.label,
+          size: "tiny",
+          onClick: () => {
+            if (button.action === "link") {
+              handleLinkClick();
+            } else {
+              button.method?.(editor);
+            }
+            editor?.commands?.focus();
+          }
+        },
+        button.icon
+      )))
+    ),
+    /* @__PURE__ */ React103.createElement(
+      UrlPopover,
+      {
+        popupState: linkPopupState,
+        anchorRef: toolbarRef,
+        restoreValue: handleUrlSubmit,
+        value: urlValue,
+        onChange: handleUrlChange,
+        openInNewTab,
+        onToggleNewTab: handleToggleNewTab
+      }
+    )
+  );
+};
+var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
+var toolbarButtons = {
+  clear: {
+    label: (0, import_i18n52.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.MinusIcon, { fontSize: "tiny" }),
+    action: "clear",
+    method: (editor) => {
+      editor.chain().focus().clearNodes().unsetAllMarks().run();
+    }
+  },
+  bold: {
+    label: (0, import_i18n52.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.BoldIcon, { fontSize: "tiny" }),
+    action: "bold",
+    method: (editor) => {
+      editor.chain().focus().toggleBold().run();
+    }
+  },
+  italic: {
+    label: (0, import_i18n52.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.ItalicIcon, { fontSize: "tiny" }),
+    action: "italic",
+    method: (editor) => {
+      editor.chain().focus().toggleItalic().run();
+    }
+  },
+  underline: {
+    label: (0, import_i18n52.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.UnderlineIcon, { fontSize: "tiny" }),
+    action: "underline",
+    method: (editor) => {
+      editor.chain().focus().toggleUnderline().run();
+    }
+  },
+  strike: {
+    label: (0, import_i18n52.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.StrikethroughIcon, { fontSize: "tiny" }),
+    action: "strike",
+    method: (editor) => {
+      editor.chain().focus().toggleStrike().run();
+    }
+  },
+  superscript: {
+    label: (0, import_i18n52.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.SuperscriptIcon, { fontSize: "tiny" }),
+    action: "superscript",
+    method: (editor) => {
+      editor.chain().focus().toggleSuperscript().run();
+    }
+  },
+  subscript: {
+    label: (0, import_i18n52.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.SubscriptIcon, { fontSize: "tiny" }),
+    action: "subscript",
+    method: (editor) => {
+      editor.chain().focus().toggleSubscript().run();
+    }
+  },
+  link: {
+    label: (0, import_i18n52.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React103.createElement(import_icons36.LinkIcon, { fontSize: "tiny" }),
+    action: "link",
+    method: null
+  }
+};
+var { clear: clearButton, ...formatButtons } = toolbarButtons;
+var possibleFormats = Object.keys(formatButtons);
+
 // src/components/size/unstable-size-field.tsx
 var React106 = __toESM(require("react"));
 var import_ui91 = require("@elementor/ui");