@daisychainapp/maily-to-core 0.2.11 → 0.2.12

package/dist/extensions/index.cjs

@@ -1360,7 +1360,7 @@ var ColumnsExtension = import_core10.Node.create({
 
 // src/editor/nodes/button/button.tsx
 var import_core12 = require("@tiptap/core");
-var import_react27 = require("@tiptap/react");
+var import_react26 = require("@tiptap/react");
 
 // src/editor/components/alignment-switch.tsx
 var import_lucide_react2 = require("lucide-react");
@@ -2234,302 +2234,9 @@ function AlignmentSwitch(props) {
   ] });
 }
 
-// src/editor/components/show-popover.tsx
-var import_lucide_react4 = require("lucide-react");
-var import_react15 = require("react");
-
-// src/editor/utils/node-options.ts
-var import_react11 = require("react");
-function getNodeOptions(editor, name) {
-  const node = editor.extensionManager.extensions.find(
-    (extension) => extension.name === name
-  );
-  if (!node) {
-    throw new Error(`Node ${name} not found`);
-  }
-  return node.options;
-}
-function getVariableOptions(editor) {
-  return getNodeOptions(editor, "variable");
-}
-function useVariableOptions(editor) {
-  return (0, import_react11.useMemo)(() => {
-    return getVariableOptions(editor);
-  }, [editor]);
-}
-
-// src/editor/utils/variable.ts
-function processVariables(variables, options) {
-  const { query } = options;
-  const queryLower = query.toLowerCase();
-  let filteredVariables = [];
-  if (Array.isArray(variables)) {
-    filteredVariables = variables.filter(
-      (variable) => variable.name.toLowerCase().startsWith(queryLower)
-    );
-    if (query.length > 0 && !filteredVariables.some((variable) => variable.name === query)) {
-      filteredVariables.push({ name: query, required: true });
-    }
-    return filteredVariables;
-  } else if (typeof variables === "function") {
-    return variables(options);
-  } else {
-    throw new Error(`Invalid variables type. Expected 'Array' or 'Function', but received '${typeof variables}'.
-
-You can check out the documentation for more information: https://github.com/arikchakma/maily.to/blob/main/packages/core/readme.md`);
-  }
-}
-
-// src/editor/utils/use-outside-click.ts
-var import_react12 = require("react");
-var import_react13 = require("react");
-function useOutsideClick(ref, callback) {
-  const handleClick = (0, import_react12.useCallback)(
-    (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        callback();
-      }
-    },
-    [ref, callback]
-  );
-  (0, import_react13.useEffect)(() => {
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("touchstart", handleClick);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("touchstart", handleClick);
-    };
-  }, [handleClick]);
-}
-
-// src/editor/components/ui/input-autocomplete.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_react14 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var InputAutocomplete = (0, import_react14.forwardRef)((props, ref) => {
-  var _b;
-  const _a = props, {
-    value = "",
-    onValueChange,
-    className,
-    onOutsideClick,
-    onSelectOption,
-    autoCompleteOptions = [],
-    triggerChar = "",
-    editor
-  } = _a, inputProps = __objRest(_a, [
-    "value",
-    "onValueChange",
-    "className",
-    "onOutsideClick",
-    "onSelectOption",
-    "autoCompleteOptions",
-    "triggerChar",
-    "editor"
-  ]);
-  const containerRef = (0, import_react14.useRef)(null);
-  const popoverRef = (0, import_react14.useRef)(null);
-  const VariableSuggestionPopoverComponent = (_b = useVariableOptions(editor)) == null ? void 0 : _b.variableSuggestionsPopover;
-  useOutsideClick(containerRef, () => {
-    onOutsideClick == null ? void 0 : onOutsideClick();
-  });
-  const isTriggeringVariable = value.startsWith(triggerChar);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("mly-relative"), ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "mly-relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "input",
-        __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
-          placeholder: "e.g. items",
-          type: "text"
-        }), inputProps), {
-          ref,
-          value,
-          onChange: (e) => {
-            onValueChange(e.target.value);
-          },
-          className: cn(
-            "mly-h-7 mly-w-40 mly-rounded-md mly-bg-white mly-px-2 mly-pr-6 mly-text-sm mly-text-midnight-gray hover:mly-bg-soft-gray focus:mly-bg-soft-gray focus:mly-outline-none",
-            className
-          ),
-          onKeyDown: (e) => {
-            if (!popoverRef.current || !isTriggeringVariable) {
-              return;
-            }
-            const { moveUp, moveDown, select } = popoverRef.current;
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
-              moveDown();
-            } else if (e.key === "ArrowUp") {
-              e.preventDefault();
-              moveUp();
-            } else if (e.key === "Enter") {
-              e.preventDefault();
-              select();
-            }
-          },
-          spellCheck: false
-        })
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.CornerDownLeft, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
-    ] }),
-    isTriggeringVariable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mly-absolute mly-left-0 mly-top-8", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      VariableSuggestionPopoverComponent,
-      {
-        items: autoCompleteOptions.map((option) => {
-          return {
-            name: option
-          };
-        }),
-        onSelectItem: (item) => {
-          onSelectOption == null ? void 0 : onSelectOption(item.name);
-        },
-        ref: popoverRef
-      }
-    ) })
-  ] });
-});
-InputAutocomplete.displayName = "InputAutocomplete";
-
-// src/editor/components/show-popover.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function _ShowPopover(props) {
-  const { showIfKey = "", onShowIfKeyValueChange, editor } = props;
-  const opts = useVariableOptions(editor);
-  const variables = opts == null ? void 0 : opts.variables;
-  const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const [isUpdatingKey, setIsUpdatingKey] = (0, import_react15.useState)(false);
-  const inputRef = (0, import_react15.useRef)(null);
-  const autoCompleteOptions = (0, import_react15.useMemo)(() => {
-    return processVariables(variables, {
-      query: showIfKey || "",
-      from: "bubble-variable",
-      editor
-    }).map((variable) => variable.name);
-  }, [variables, showIfKey, editor]);
-  const isValidWhenKey = showIfKey || autoCompleteOptions.includes(showIfKey);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    Popover,
-    {
-      onOpenChange: (open) => {
-        if (open) {
-          return;
-        }
-        setIsUpdatingKey(false);
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            PopoverTrigger,
-            {
-              className: cn(
-                "mly-flex mly-size-7 mly-items-center mly-justify-center mly-gap-1 mly-rounded-md mly-px-1.5 mly-text-sm data-[state=open]:mly-bg-soft-gray hover:mly-bg-soft-gray focus-visible:mly-relative focus-visible:mly-z-10 focus-visible:mly-outline-none focus-visible:mly-ring-2 focus-visible:mly-ring-gray-400 focus-visible:mly-ring-offset-2",
-                showIfKey && "mly-bg-rose-100 mly-text-rose-800 data-[state=open]:mly-bg-rose-100 hover:mly-bg-rose-100"
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Eye, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5]" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { sideOffset: 8, children: "Show block conditionally" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          PopoverContent,
-          {
-            className: "mly-flex mly-w-max mly-rounded-lg !mly-p-0.5",
-            side: "top",
-            sideOffset: 8,
-            align: "end",
-            onOpenAutoFocus: (e) => {
-              e.preventDefault();
-            },
-            onCloseAutoFocus: (e) => {
-              e.preventDefault();
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mly-flex mly-items-center mly-gap-1.5 mly-px-1.5 mly-text-sm mly-leading-none", children: [
-                "Show if",
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    import_lucide_react4.InfoIcon,
-                    {
-                      className: cn("mly-size-3 mly-stroke-[2.5] mly-text-gray-500")
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    TooltipContent,
-                    {
-                      sideOffset: 14,
-                      className: "mly-max-w-[285px]",
-                      align: "start",
-                      children: "Show the block if the selected variable is true."
-                    }
-                  )
-                ] })
-              ] }),
-              !isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "button",
-                {
-                  onClick: () => {
-                    setIsUpdatingKey(true);
-                    setTimeout(() => {
-                      var _a;
-                      (_a = inputRef.current) == null ? void 0 : _a.focus();
-                    }, 0);
-                  },
-                  children: renderVariable({
-                    variable: {
-                      name: showIfKey,
-                      valid: !!isValidWhenKey
-                    },
-                    fallback: "",
-                    from: "bubble-variable",
-                    editor
-                  })
-                }
-              ),
-              isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "form",
-                {
-                  onSubmit: (e) => {
-                    e.preventDefault();
-                    setIsUpdatingKey(false);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Escape") {
-                      setIsUpdatingKey(false);
-                    }
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    InputAutocomplete,
-                    {
-                      editor,
-                      value: showIfKey || "",
-                      onValueChange: (value) => {
-                        onShowIfKeyValueChange == null ? void 0 : onShowIfKeyValueChange(value);
-                      },
-                      onOutsideClick: () => {
-                        setIsUpdatingKey(false);
-                      },
-                      onSelectOption: (value) => {
-                        onShowIfKeyValueChange == null ? void 0 : onShowIfKeyValueChange(value);
-                        setIsUpdatingKey(false);
-                      },
-                      autoCompleteOptions,
-                      ref: inputRef
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-var ShowPopover = (0, import_react15.memo)(_ShowPopover);
-
 // src/editor/components/ui/color-picker.tsx
 var import_react_colorful = require("react-colorful");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ColorPicker(props) {
   const {
     color,
@@ -2547,14 +2254,14 @@ function ColorPicker(props) {
       onColorChange(color2);
     });
   };
-  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     BaseButton,
     {
       variant: "ghost",
       className: "!mly-size-7 mly-shrink-0",
       size: "sm",
       type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           className: cn(
@@ -2568,7 +2275,7 @@ function ColorPicker(props) {
       )
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     Popover,
     {
       onOpenChange: (open) => {
@@ -2577,17 +2284,17 @@ function ColorPicker(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
         ] }) : popoverButton,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           PopoverContent,
           {
             className: "mly-w-full mly-rounded-none mly-border-0 !mly-bg-transparent !mly-p-0 mly-shadow-none mly-drop-shadow-md",
             sideOffset: 8,
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mly-min-w-[260px] mly-rounded-xl mly-border mly-border-gray-200 mly-bg-white mly-p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mly-min-w-[260px] mly-rounded-xl mly-border mly-border-gray-200 mly-bg-white mly-p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 import_react_colorful.HexColorPicker,
                 {
                   color,
@@ -2595,7 +2302,7 @@ function ColorPicker(props) {
                   className: "mly-flex !mly-w-full mly-flex-col mly-gap-4"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 import_react_colorful.HexColorInput,
                 {
                   alpha: true,
@@ -2605,10 +2312,10 @@ function ColorPicker(props) {
                   prefixed: true
                 }
               ),
-              suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "-mly-mx-4 mly-my-4 mly-h-px mly-bg-gray-200" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "mly-text-xs mly-text-gray-500", children: "Recently used" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mly-mt-2 mly-flex mly-flex-wrap mly-gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "-mly-mx-4 mly-my-4 mly-h-px mly-bg-gray-200" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "mly-text-xs mly-text-gray-500", children: "Recently used" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mly-mt-2 mly-flex mly-flex-wrap mly-gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   BaseButton,
                   {
                     variant: "ghost",
@@ -2616,7 +2323,7 @@ function ColorPicker(props) {
                     className: "!mly-size-7 mly-shrink-0",
                     type: "button",
                     onClick: () => handleColorChange(suggestedColor),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       "div",
                       {
                         className: "mly-h-4 mly-w-4 mly-shrink-0 mly-rounded",
@@ -2638,10 +2345,10 @@ function ColorPicker(props) {
 }
 
 // src/editor/components/ui/divider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Divider(props) {
   const { type = "vertical", className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       className: cn(
@@ -2654,23 +2361,23 @@ function Divider(props) {
 }
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_react21 = require("react");
+var import_lucide_react14 = require("lucide-react");
+var import_react20 = require("react");
 
 // src/editor/provider.tsx
-var import_react16 = require("react");
+var import_react11 = require("react");
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-var import_lucide_react12 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 
 // src/blocks/button.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var button = {
   title: "Button",
   description: "Add a call to action button to email.",
   searchTerms: ["link", "button", "cta"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.MousePointer, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.MousePointer, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setButton().run();
   }
@@ -2679,7 +2386,7 @@ var linkCard = {
   title: "Link Card",
   description: "Add a link card to email.",
   searchTerms: ["link", "button", "image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ArrowUpRightSquare, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.ArrowUpRightSquare, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLinkCard().run();
   },
@@ -2691,13 +2398,13 @@ var linkCard = {
 };
 
 // src/blocks/code.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var htmlCodeBlock = {
   title: "Custom HTML",
   description: "Insert a custom HTML block",
   searchTerms: ["html", "code", "custom"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.CodeXmlIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.CodeXmlIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
   }
@@ -2705,13 +2412,13 @@ var htmlCodeBlock = {
 
 // src/blocks/image.tsx
 var import_state3 = require("@tiptap/pm/state");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var image = {
   title: "Image",
   description: "Full width image",
   searchTerms: ["image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
   }
@@ -2720,7 +2427,7 @@ var logo = {
   title: "Logo",
   description: "Add your brand logo",
   searchTerms: ["image", "logo"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
   }
@@ -2729,7 +2436,7 @@ var inlineImage = {
   title: "Inline Image",
   description: "Inline image",
   searchTerms: ["image", "inline"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setInlineImage({
       src: "https://maily.to/brand/logo.png"
@@ -2752,13 +2459,13 @@ var inlineImage = {
 };
 
 // src/blocks/layout.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var columns = {
   title: "Columns",
   description: "Add columns to email.",
   searchTerms: ["layout", "columns"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ColumnsIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.ColumnsIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
   }
@@ -2767,7 +2474,7 @@ var section = {
   title: "Section",
   description: "Add a section to email.",
   searchTerms: ["layout", "section"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.RectangleHorizontal, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.RectangleHorizontal, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSection().run();
   }
@@ -2776,7 +2483,7 @@ var repeat = {
   title: "Repeat",
   description: "Loop over an array of items.",
   searchTerms: ["repeat", "for", "loop"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Repeat2, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Repeat2, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setRepeat().run();
   }
@@ -2785,7 +2492,7 @@ var spacer = {
   title: "Spacer",
   description: "Add space between blocks.",
   searchTerms: ["space", "gap", "divider"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.MoveVertical, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.MoveVertical, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
   }
@@ -2794,20 +2501,20 @@ var divider = {
   title: "Divider",
   description: "Add a horizontal divider.",
   searchTerms: ["divider", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Minus, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Minus, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 };
 
 // src/blocks/list.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var bulletList = {
   title: "Bullet List",
   description: "Create a simple bullet list.",
   searchTerms: ["unordered", "point"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.List, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.List, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
@@ -2816,20 +2523,20 @@ var orderedList = {
   title: "Numbered List",
   description: "Create a list with numbering.",
   searchTerms: ["ordered"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.ListOrdered, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ListOrdered, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
 };
 
 // src/blocks/typography.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var text = {
   title: "Text",
   description: "Just start typing with plain text.",
   searchTerms: ["p", "paragraph"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Text, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Text, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
   }
@@ -2838,7 +2545,7 @@ var heading1 = {
   title: "Heading 1",
   description: "Big heading.",
   searchTerms: ["h1", "title", "big", "large"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Heading1, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Heading1, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   }
@@ -2847,7 +2554,7 @@ var heading2 = {
   title: "Heading 2",
   description: "Medium heading.",
   searchTerms: ["h2", "subtitle", "medium"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Heading2, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Heading2, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
   }
@@ -2856,7 +2563,7 @@ var heading3 = {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Heading3, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Heading3, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
   }
@@ -2865,7 +2572,7 @@ var hardBreak = {
   title: "Hard Break",
   description: "Add a break between lines.",
   searchTerms: ["break", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.DivideIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.DivideIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHardBreak().run();
   }
@@ -2874,7 +2581,7 @@ var blockquote = {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.TextQuote, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.TextQuote, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
@@ -2883,7 +2590,7 @@ var footer = {
   title: "Footer",
   description: "Add a footer text to email.",
   searchTerms: ["footer", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.FootprintsIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.FootprintsIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setFooter().run();
   }
@@ -2892,16 +2599,16 @@ var clearLine = {
   title: "Clear Line",
   description: "Clear the current line.",
   searchTerms: ["clear", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.EraserIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.EraserIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().selectParentNode().deleteSelection().run();
   }
 };
 
 // src/editor/components/icons/logo-with-cover-image.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function LogoWithCoverImageIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -2911,7 +2618,7 @@ function LogoWithCoverImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -2920,7 +2627,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -2929,7 +2636,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -2938,8 +2645,8 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "rect",
           {
             x: "3",
@@ -2952,7 +2659,7 @@ function LogoWithCoverImageIcon(props) {
             mask: "url(#path-4-inside-1_1046_19527)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "rect",
           {
             x: "6.25",
@@ -2964,16 +2671,16 @@ function LogoWithCoverImageIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
       ]
     })
   );
 }
 
 // src/editor/components/icons/logo-with-text-horizon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function LogoWithTextHorizonIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -2983,7 +2690,7 @@ function LogoWithTextHorizonIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -2992,7 +2699,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "rect",
           {
             x: "6.25",
@@ -3004,8 +2711,8 @@ function LogoWithTextHorizonIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -3014,7 +2721,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -3029,9 +2736,9 @@ function LogoWithTextHorizonIcon(props) {
 }
 
 // src/editor/components/icons/logo-with-text-vertical.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function LogoWithTextVerticalIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -3041,7 +2748,7 @@ function LogoWithTextVerticalIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -3050,7 +2757,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "rect",
           {
             x: "4.25",
@@ -3062,8 +2769,8 @@ function LogoWithTextVerticalIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -3072,7 +2779,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -3087,12 +2794,12 @@ function LogoWithTextVerticalIcon(props) {
 }
 
 // src/blocks/headers.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var headerLogoWithTextHorizontal = {
   title: "Logo with Text (Horizontal)",
   description: "Logo and a text horizontally",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LogoWithTextHorizonIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LogoWithTextHorizonIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent({
       type: "columns",
@@ -3156,7 +2863,7 @@ var headerLogoWithTextVertical = {
   title: "Logo with Text (Vertical)",
   description: "Logo and a text vertically",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LogoWithTextVerticalIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LogoWithTextVerticalIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent([
       {
@@ -3187,7 +2894,7 @@ var headerLogoWithCoverImage = {
   title: "Logo with Cover Image",
   description: "Logo and a cover image",
   searchTerms: ["logo", "cover", "image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LogoWithCoverImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LogoWithCoverImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
       year: "numeric",
@@ -3275,13 +2982,13 @@ var headerLogoWithCoverImage = {
 };
 
 // src/blocks/footers.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var footerCopyrightText = {
   title: "Footer Copyright",
   description: "Copyright text for the footer.",
   searchTerms: ["footer", "copyright"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.CopyrightIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react9.CopyrightIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     editor.chain().focus().deleteRange(range).insertContent({
@@ -3301,7 +3008,7 @@ var footerCommunityFeedbackCta = {
   title: "Footer Community Feedback CTA",
   description: "Community feedback CTA for the footer.",
   searchTerms: ["footer", "community", "feedback", "cta"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.RectangleHorizontalIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react9.RectangleHorizontalIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       {
@@ -3344,7 +3051,7 @@ var footerCompanySignature = {
   title: "Footer Company Signature",
   description: "Company signature for the footer.",
   searchTerms: ["footer", "company", "signature"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.LayoutTemplateIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react9.LayoutTemplateIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       { type: "horizontalRule" },
@@ -3498,7 +3205,7 @@ var footerCompanySignature = {
 };
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var DEFAULT_SLASH_COMMANDS = [
   {
     title: "Blocks",
@@ -3533,7 +3240,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Headers",
         description: "Add pre-designed headers block",
         searchTerms: ["header", "headers"],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react12.Heading1, { className: "mly-h-4 mly-w-4" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react10.Heading1, { className: "mly-h-4 mly-w-4" }),
         preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
         commands: [
           headerLogoWithTextVertical,
@@ -3546,7 +3253,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Footers",
         description: "Add pre-designed footers block",
         searchTerms: ["footers"],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react12.FootprintsIcon, { className: "mly-h-4 mly-w-4" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react10.FootprintsIcon, { className: "mly-h-4 mly-w-4" }),
         commands: [
           footerCopyrightText,
           footerCommunityFeedbackCta,
@@ -3559,38 +3266,190 @@ var DEFAULT_SLASH_COMMANDS = [
 ];
 
 // src/editor/provider.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
-var MailyContext = (0, import_react16.createContext)({
+var MailyContext = (0, import_react11.createContext)({
   placeholderUrl: DEFAULT_PLACEHOLDER_URL,
   blocks: DEFAULT_SLASH_COMMANDS
 });
 function useMailyContext() {
-  const values = (0, import_react16.useContext)(MailyContext);
+  const values = (0, import_react11.useContext)(MailyContext);
   if (!values) {
     throw new Error("Missing MailyContext.Provider in the component tree");
   }
   return values;
 }
 
+// src/editor/utils/node-options.ts
+var import_react12 = require("react");
+function getNodeOptions(editor, name) {
+  const node = editor.extensionManager.extensions.find(
+    (extension) => extension.name === name
+  );
+  if (!node) {
+    throw new Error(`Node ${name} not found`);
+  }
+  return node.options;
+}
+function getVariableOptions(editor) {
+  return getNodeOptions(editor, "variable");
+}
+function useVariableOptions(editor) {
+  return (0, import_react12.useMemo)(() => {
+    return getVariableOptions(editor);
+  }, [editor]);
+}
+
+// src/editor/utils/use-outside-click.ts
+var import_react13 = require("react");
+var import_react14 = require("react");
+function useOutsideClick(ref, callback) {
+  const handleClick = (0, import_react13.useCallback)(
+    (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        callback();
+      }
+    },
+    [ref, callback]
+  );
+  (0, import_react14.useEffect)(() => {
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("touchstart", handleClick);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("touchstart", handleClick);
+    };
+  }, [handleClick]);
+}
+
+// src/editor/components/ui/input-autocomplete.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_react15 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var InputAutocomplete = (0, import_react15.forwardRef)((props, ref) => {
+  var _b;
+  const _a = props, {
+    value = "",
+    onValueChange,
+    className,
+    onOutsideClick,
+    onSelectOption,
+    autoCompleteOptions = [],
+    triggerChar = "",
+    editor
+  } = _a, inputProps = __objRest(_a, [
+    "value",
+    "onValueChange",
+    "className",
+    "onOutsideClick",
+    "onSelectOption",
+    "autoCompleteOptions",
+    "triggerChar",
+    "editor"
+  ]);
+  const containerRef = (0, import_react15.useRef)(null);
+  const popoverRef = (0, import_react15.useRef)(null);
+  const VariableSuggestionPopoverComponent = (_b = useVariableOptions(editor)) == null ? void 0 : _b.variableSuggestionsPopover;
+  useOutsideClick(containerRef, () => {
+    onOutsideClick == null ? void 0 : onOutsideClick();
+  });
+  const isTriggeringVariable = value.startsWith(triggerChar);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("mly-relative"), ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "mly-relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "input",
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
+          placeholder: "e.g. items",
+          type: "text"
+        }), inputProps), {
+          ref,
+          value,
+          onChange: (e) => {
+            onValueChange(e.target.value);
+          },
+          className: cn(
+            "mly-h-7 mly-w-40 mly-rounded-md mly-bg-white mly-px-2 mly-pr-6 mly-text-sm mly-text-midnight-gray hover:mly-bg-soft-gray focus:mly-bg-soft-gray focus:mly-outline-none",
+            className
+          ),
+          onKeyDown: (e) => {
+            if (!popoverRef.current || !isTriggeringVariable) {
+              return;
+            }
+            const { moveUp, moveDown, select } = popoverRef.current;
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              moveDown();
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              moveUp();
+            } else if (e.key === "Enter") {
+              e.preventDefault();
+              select();
+            }
+          },
+          spellCheck: false
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.CornerDownLeft, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
+    ] }),
+    isTriggeringVariable && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mly-absolute mly-left-0 mly-top-8", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      VariableSuggestionPopoverComponent,
+      {
+        items: autoCompleteOptions.map((option) => {
+          return {
+            name: option
+          };
+        }),
+        onSelectItem: (item) => {
+          onSelectOption == null ? void 0 : onSelectOption(item.name);
+        },
+        ref: popoverRef
+      }
+    ) })
+  ] });
+});
+InputAutocomplete.displayName = "InputAutocomplete";
+
+// src/editor/utils/variable.ts
+function processVariables(variables, options) {
+  const { query } = options;
+  const queryLower = query.toLowerCase();
+  let filteredVariables = [];
+  if (Array.isArray(variables)) {
+    filteredVariables = variables.filter(
+      (variable) => variable.name.toLowerCase().startsWith(queryLower)
+    );
+    if (query.length > 0 && !filteredVariables.some((variable) => variable.name === query)) {
+      filteredVariables.push({ name: query, required: true });
+    }
+    return filteredVariables;
+  } else if (typeof variables === "function") {
+    return variables(options);
+  } else {
+    throw new Error(`Invalid variables type. Expected 'Array' or 'Function', but received '${typeof variables}'.
+
+You can check out the documentation for more information: https://github.com/arikchakma/maily.to/blob/main/packages/core/readme.md`);
+  }
+}
+
 // src/editor/components/ui/link-input-popover.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/editor/nodes/variable/variable.ts
 var import_core11 = require("@tiptap/core");
 var import_state4 = require("@tiptap/pm/state");
-var import_react20 = require("@tiptap/react");
+var import_react19 = require("@tiptap/react");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
 
 // src/editor/nodes/variable/variable-suggestions-popover.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_react17 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var VariableSuggestionsPopover = (0, import_react17.forwardRef)((props, ref) => {
+var import_lucide_react12 = require("lucide-react");
+var import_react16 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var VariableSuggestionsPopover = (0, import_react16.forwardRef)((props, ref) => {
   const { items, onSelectItem } = props;
-  const [selectedIndex, setSelectedIndex] = (0, import_react17.useState)(0);
-  const scrollContainerRef = (0, import_react17.useRef)(null);
-  const itemRefs = (0, import_react17.useRef)([]);
+  const [selectedIndex, setSelectedIndex] = (0, import_react16.useState)(0);
+  const scrollContainerRef = (0, import_react16.useRef)(null);
+  const itemRefs = (0, import_react16.useRef)([]);
   const scrollSelectedIntoView = (index) => {
     const container = scrollContainerRef.current;
     const selectedItem = itemRefs.current[index];
@@ -3606,17 +3465,17 @@ var VariableSuggestionsPopover = (0, import_react17.forwardRef)((props, ref) =>
       container.scrollTop += itemRect.top - containerRect.top - padding;
     }
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setSelectedIndex(0);
     if (scrollContainerRef.current) {
       scrollContainerRef.current.scrollTop = 0;
     }
     itemRefs.current = items.map(() => null);
   }, [items]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     scrollSelectedIntoView(selectedIndex);
   }, [selectedIndex]);
-  (0, import_react17.useImperativeHandle)(ref, () => ({
+  (0, import_react16.useImperativeHandle)(ref, () => ({
     moveUp: () => {
       setSelectedIndex((selectedIndex + items.length - 1) % items.length);
     },
@@ -3631,17 +3490,17 @@ var VariableSuggestionsPopover = (0, import_react17.forwardRef)((props, ref) =>
       onSelectItem(item);
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mly-z-50 mly-w-64 mly-rounded-lg mly-border mly-border-gray-200 mly-bg-white mly-shadow-md mly-transition-all", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mly-flex mly-items-center mly-justify-between mly-gap-2 mly-border-b mly-border-gray-200 mly-bg-soft-gray/40 mly-px-1 mly-py-1.5 mly-text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mly-text-xs mly-uppercase", children: "Variables" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Braces, { className: "mly-size-3 mly-stroke-[2.5]" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mly-z-50 mly-w-64 mly-rounded-lg mly-border mly-border-gray-200 mly-bg-white mly-shadow-md mly-transition-all", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mly-flex mly-items-center mly-justify-between mly-gap-2 mly-border-b mly-border-gray-200 mly-bg-soft-gray/40 mly-px-1 mly-py-1.5 mly-text-gray-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mly-text-xs mly-uppercase", children: "Variables" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.Braces, { className: "mly-size-3 mly-stroke-[2.5]" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref: scrollContainerRef,
         className: "mly-max-h-52 mly-overflow-y-auto mly-scrollbar-thin mly-scrollbar-track-transparent mly-scrollbar-thumb-gray-200",
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mly-flex mly-w-fit mly-min-w-full mly-flex-col mly-gap-0.5 mly-p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mly-flex mly-w-fit mly-min-w-full mly-flex-col mly-gap-0.5 mly-p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "button",
           {
             ref: (el) => itemRefs.current[index] = el,
@@ -3651,27 +3510,27 @@ var VariableSuggestionsPopover = (0, import_react17.forwardRef)((props, ref) =>
               index === selectedIndex ? "mly-bg-soft-gray" : "mly-bg-white"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Braces, { className: "mly-size-3 mly-stroke-[2.5] mly-text-rose-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.Braces, { className: "mly-size-3 mly-stroke-[2.5] mly-text-rose-600" }),
               item.name
             ]
           },
           index
-        )) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mly-flex mly-h-7 mly-w-full mly-items-center mly-gap-2 mly-rounded-md mly-px-2 mly-py-1 mly-text-left mly-font-mono mly-text-[13px] mly-text-gray-900 hover:mly-bg-soft-gray", children: "No result" }) })
+        )) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mly-flex mly-h-7 mly-w-full mly-items-center mly-gap-2 mly-rounded-md mly-px-2 mly-py-1 mly-text-left mly-font-mono mly-text-[13px] mly-text-gray-900 hover:mly-bg-soft-gray", children: "No result" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mly-flex mly-items-center mly-justify-between mly-gap-2 mly-border-t mly-border-gray-200 mly-px-1 mly-py-1.5 mly-text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mly-flex mly-items-center mly-gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.ArrowDownIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.ArrowUpIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mly-text-xs mly-text-gray-500", children: "Navigate" })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mly-flex mly-items-center mly-justify-between mly-gap-2 mly-border-t mly-border-gray-200 mly-px-1 mly-py-1.5 mly-text-gray-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mly-flex mly-items-center mly-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.ArrowDownIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.ArrowUpIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mly-text-xs mly-text-gray-500", children: "Navigate" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.CornerDownLeftIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.CornerDownLeftIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) })
     ] })
   ] });
 });
 function VariableIcon(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: cn(
@@ -3684,37 +3543,37 @@ function VariableIcon(props) {
 }
 
 // src/editor/nodes/variable/variable-view.tsx
-var import_react18 = require("@tiptap/react");
-var import_lucide_react14 = require("lucide-react");
-var import_react19 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react17 = require("@tiptap/react");
+var import_lucide_react13 = require("lucide-react");
+var import_react18 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function VariableView(props) {
   const { node, updateAttributes: updateAttributes2, editor } = props;
   const { id, fallback, required } = node.attrs;
-  const renderVariable = (0, import_react19.useMemo)(() => {
+  const renderVariable = (0, import_react18.useMemo)(() => {
     var _a, _b;
     const variableRender = (_b = (_a = getNodeOptions(editor, "variable")) == null ? void 0 : _a.renderVariable) != null ? _b : DEFAULT_RENDER_VARIABLE_FUNCTION;
     return variableRender;
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react18.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react17.NodeViewWrapper,
     {
       className: "react-component mly-inline-block mly-leading-none",
       draggable: "false",
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         Popover,
         {
           onOpenChange: (open) => {
             editor.storage.variable.popover = open;
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PopoverTrigger, { children: renderVariable({
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PopoverTrigger, { children: renderVariable({
               variable: { name: id, required, valid: true },
               fallback,
               editor,
               from: "content-variable"
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               PopoverContent,
               {
                 align: "start",
@@ -3723,10 +3582,10 @@ function VariableView(props) {
                 sideOffset: 8,
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 onCloseAutoFocus: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "mly-relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "mly-inline-block mly-px-2 mly-text-xs mly-text-midnight-gray", children: "Variable" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "mly-relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mly-inline-block mly-px-2 mly-text-xs mly-text-midnight-gray", children: "Variable" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: id != null ? id : "",
@@ -3740,10 +3599,10 @@ function VariableView(props) {
                       })
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Divider, { className: "mly-mx-1.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "mly-relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "mly-inline-block mly-px-2 mly-pl-1 mly-text-xs mly-text-midnight-gray", children: "Default" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider, { className: "mly-mx-1.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "mly-relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mly-inline-block mly-px-2 mly-pl-1 mly-text-xs mly-text-midnight-gray", children: "Default" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: fallback != null ? fallback : "",
@@ -3756,7 +3615,7 @@ function VariableView(props) {
                         className: "mly-h-7 mly-w-32 mly-rounded-md mly-bg-soft-gray mly-px-2 mly-pr-6 mly-text-sm mly-text-midnight-gray focus:mly-bg-soft-gray focus:mly-outline-none"
                       })
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Pencil, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Pencil, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
                   ] })
                 ] }) })
               }
@@ -3771,13 +3630,13 @@ var DefaultRenderVariable = (props) => {
   const { variable, fallback, from } = props;
   const { name, required, valid } = variable;
   if (from === "button-variable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mly-inline-grid mly-h-7 mly-max-w-xs mly-grid-cols-[12px_1fr] mly-items-center mly-gap-1.5 mly-rounded-md mly-border mly-border-[var(--button-var-border-color)] mly-px-2 mly-font-mono mly-text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Braces, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mly-inline-grid mly-h-7 mly-max-w-xs mly-grid-cols-[12px_1fr] mly-items-center mly-gap-1.5 mly-rounded-md mly-border mly-border-[var(--button-var-border-color)] mly-px-2 mly-font-mono mly-text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Braces, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
     ] });
   }
   if (from === "bubble-variable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "div",
       {
         className: cn(
@@ -3785,21 +3644,21 @@ var DefaultRenderVariable = (props) => {
           !valid && "mly-border-rose-400 mly-bg-rose-50 mly-text-rose-600 hover:mly-bg-rose-100"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Braces, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Braces, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "span",
     {
       tabIndex: -1,
       className: "mly-inline-flex mly-items-center mly-gap-[var(--variable-icon-gap)] mly-rounded-full mly-border mly-border-gray-200 mly-px-1.5 mly-py-0.5 mly-leading-none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Braces, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.Braces, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
         name,
-        required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.AlertTriangle, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5]" })
+        required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.AlertTriangle, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5]" })
       ]
     }
   );
@@ -3968,7 +3827,7 @@ var VariableExtension = import_core11.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react20.ReactNodeViewRenderer)(VariableView, {
+    return (0, import_react19.ReactNodeViewRenderer)(VariableView, {
       className: "mly-relative mly-inline-block",
       as: "div"
     });
@@ -3976,26 +3835,26 @@ var VariableExtension = import_core11.Node.create({
 });
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function LinkInputPopover(props) {
   var _a, _b;
   const {
     defaultValue = "",
     onValueChange,
     tooltip,
-    icon: Icon = import_lucide_react15.Link,
+    icon: Icon = import_lucide_react14.Link,
     editor,
     isVariable
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  const [isEditing, setIsEditing] = (0, import_react21.useState)(!isVariable);
-  const linkInputRef = (0, import_react21.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [isEditing, setIsEditing] = (0, import_react20.useState)(!isVariable);
+  const linkInputRef = (0, import_react20.useRef)(null);
   const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
   const options = useVariableOptions(editor);
   const renderVariable = options == null ? void 0 : options.renderVariable;
   const variables = options == null ? void 0 : options.variables;
   const variableTriggerCharacter = (_b = (_a = options == null ? void 0 : options.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
-  const autoCompleteOptions = (0, import_react22.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react21.useMemo)(() => {
     const withoutTrigger = defaultValue.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -4006,7 +3865,7 @@ function LinkInputPopover(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, variableTriggerCharacter, defaultValue, editor]);
-  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     BaseButton,
     {
       variant: "ghost",
@@ -4014,10 +3873,10 @@ function LinkInputPopover(props) {
       type: "button",
       className: "!mly-size-7",
       "data-state": !!defaultValue,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-midnight-gray" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-midnight-gray" })
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Popover,
     {
       open: isOpen,
@@ -4031,11 +3890,11 @@ function LinkInputPopover(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
         ] }) : popoverButton,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           PopoverContent,
           {
             align: "end",
@@ -4043,7 +3902,7 @@ function LinkInputPopover(props) {
             className: "mly-w-max mly-rounded-none mly-border-none mly-bg-transparent !mly-p-0 mly-shadow-none",
             sideOffset: 8,
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "form",
               {
                 onSubmit: (e) => {
@@ -4055,8 +3914,8 @@ function LinkInputPopover(props) {
                   onValueChange == null ? void 0 : onValueChange(input.value);
                   setIsOpen(false);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
-                  !isEditing && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mly-flex mly-h-8 mly-items-center mly-rounded-lg mly-border mly-border-gray-300 mly-bg-white mly-px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
+                  !isEditing && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mly-flex mly-h-8 mly-items-center mly-rounded-lg mly-border mly-border-gray-300 mly-bg-white mly-px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "button",
                     {
                       onClick: () => {
@@ -4077,9 +3936,9 @@ function LinkInputPopover(props) {
                       })
                     }
                   ) }),
-                  isEditing && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mly-absolute mly-inset-y-0 mly-left-1.5 mly-z-10 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.LinkIcon, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  isEditing && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mly-relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mly-absolute mly-inset-y-0 mly-left-1.5 mly-z-10 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.LinkIcon, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       InputAutocomplete,
                       {
                         editor,
@@ -4115,9 +3974,9 @@ function LinkInputPopover(props) {
 }
 
 // src/editor/components/ui/select.tsx
-var import_react23 = require("react");
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Select(props) {
   const {
     label,
@@ -4129,11 +3988,11 @@ function Select(props) {
     icon: Icon,
     iconClassName
   } = props;
-  const selectId = `mly${(0, import_react23.useId)()}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: selectId, className: "mly-sr-only", children: label }),
-    Icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mly-pointer-events-none mly-absolute mly-inset-y-0 mly-left-2 mly-z-20 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: cn("mly-size-3", iconClassName) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const selectId = `mly${(0, import_react22.useId)()}`;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { htmlFor: selectId, className: "mly-sr-only", children: label }),
+    Icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mly-pointer-events-none mly-absolute mly-inset-y-0 mly-left-2 mly-z-20 mly-flex mly-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: cn("mly-size-3", iconClassName) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "select",
       {
         id: selectId,
@@ -4144,11 +4003,11 @@ function Select(props) {
         ),
         value,
         onChange: (event) => onValueChange(event.target.value),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: option.value, children: option.label }, option.value))
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: option.value, children: option.label }, option.value))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mly-pointer-events-none mly-absolute mly-inset-y-0 mly-right-0 mly-z-10 mly-flex mly-h-full mly-w-7 mly-items-center mly-justify-center mly-text-gray-600 peer-disabled:mly-opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_lucide_react16.ChevronDownIcon,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "mly-pointer-events-none mly-absolute mly-inset-y-0 mly-right-0 mly-z-10 mly-flex mly-h-full mly-w-7 mly-items-center mly-justify-center mly-text-gray-600 peer-disabled:mly-opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_lucide_react15.ChevronDownIcon,
       {
         size: 16,
         strokeWidth: 2,
@@ -4160,30 +4019,30 @@ function Select(props) {
   if (!tooltip) {
     return content;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: content }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
   ] });
 }
 
 // src/editor/nodes/button/button-view.tsx
-var import_react25 = require("@tiptap/react");
-var import_react26 = require("react");
+var import_react24 = require("@tiptap/react");
+var import_react25 = require("react");
 
 // src/editor/nodes/button/button-label-input.tsx
-var import_react24 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ButtonLabelInput(props) {
   var _a, _b;
   const { value, onValueChange, isVariable, editor } = props;
-  const linkInputRef = (0, import_react24.useRef)(null);
-  const [isEditing, setIsEditing] = (0, import_react24.useState)(!isVariable);
+  const linkInputRef = (0, import_react23.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react23.useState)(!isVariable);
   const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
   const otps = useVariableOptions(editor);
   const variables = otps == null ? void 0 : otps.variables;
   const variableTriggerCharacter = (_b = (_a = otps == null ? void 0 : otps.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
   const renderVariable = otps == null ? void 0 : otps.renderVariable;
-  const autoCompleteOptions = (0, import_react24.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react23.useMemo)(() => {
     const withoutTrigger = value.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -4194,8 +4053,8 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         onClick: () => {
@@ -4216,7 +4075,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       InputAutocomplete,
       {
         editor,
@@ -4243,7 +4102,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -4264,7 +4123,7 @@ function ButtonView(props) {
   } = node.attrs;
   const opts = useVariableOptions(editor);
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const sizes = (0, import_react26.useMemo)(
+  const sizes = (0, import_react25.useMemo)(
     () => ({
       small: {
         paddingX: 24,
@@ -4281,14 +4140,14 @@ function ButtonView(props) {
     }),
     []
   );
-  const size = (0, import_react26.useMemo)(() => {
+  const size = (0, import_react25.useMemo)(() => {
     var _a;
     return (_a = Object.entries(sizes).find(
       ([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
     )) == null ? void 0 : _a[0];
   }, [paddingRight, paddingTop, sizes]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react25.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_react24.NodeViewWrapper,
     {
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
@@ -4296,8 +4155,8 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "button",
           {
             className: cn(
@@ -4340,7 +4199,7 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           PopoverContent,
           {
             align: "end",
@@ -4349,8 +4208,8 @@ function ButtonView(props) {
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -4364,9 +4223,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Select,
                   {
                     label: "Border Radius",
@@ -4384,7 +4243,7 @@ function ButtonView(props) {
                     className: "mly-capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Select,
                   {
                     label: "Style",
@@ -4402,7 +4261,7 @@ function ButtonView(props) {
                     className: "mly-capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Select,
                   {
                     label: "Size",
@@ -4425,9 +4284,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   AlignmentSwitch,
                   {
                     alignment,
@@ -4438,7 +4297,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -4454,9 +4313,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   BackgroundColorPickerPopup,
                   {
                     variant,
@@ -4468,7 +4327,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   TextColorPickerPopup,
                   {
                     color: textColor,
@@ -4479,20 +4338,7 @@ function ButtonView(props) {
                     }
                   }
                 )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                ShowPopover,
-                {
-                  showIfKey,
-                  onShowIfKeyValueChange: (value) => {
-                    updateAttributes2({
-                      showIfKey: value
-                    });
-                  },
-                  editor
-                }
-              )
+              ] })
             ] }) })
           }
         )
@@ -4502,20 +4348,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
           className: "mly-size-7",
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               className: "mly-h-4 mly-w-4 mly-shrink-0 mly-rounded-full mly-shadow",
@@ -4534,16 +4380,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
       className: "mly-size-7",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
             className: "mly-h-[2px] mly-w-3 mly-shrink-0 mly-rounded-md mly-shadow",
@@ -4782,7 +4628,7 @@ var ButtonExtension = import_core12.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react27.ReactNodeViewRenderer)(ButtonView, {
+    return (0, import_react26.ReactNodeViewRenderer)(ButtonView, {
       contentDOMElementTag: "div",
       className: "mly-relative"
     });
@@ -4791,7 +4637,7 @@ var ButtonExtension = import_core12.Node.create({
 
 // src/editor/nodes/image/image.ts
 var import_extension_image2 = __toESM(require("@tiptap/extension-image"), 1);
-var import_react28 = require("@tiptap/react");
+var import_react27 = require("@tiptap/react");
 var DEFAULT_IMAGE_BORDER_RADIUS = 0;
 var ImageExtension = import_extension_image2.default.extend({
   addAttributes() {
@@ -4929,7 +4775,7 @@ var ImageExtension = import_extension_image2.default.extend({
     });
   },
   addNodeView() {
-    return (0, import_react28.ReactNodeViewRenderer)(ImageView, {
+    return (0, import_react27.ReactNodeViewRenderer)(ImageView, {
       className: "mly-relative"
     });
   }
@@ -5006,24 +4852,24 @@ var ParagraphExtension = import_extension_paragraph.default.extend({
 
 // src/editor/nodes/repeat/repeat.ts
 var import_core13 = require("@tiptap/core");
-var import_react30 = require("@tiptap/react");
+var import_react29 = require("@tiptap/react");
 
 // src/editor/nodes/repeat/repeat-view.tsx
-var import_react29 = require("@tiptap/react");
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react28 = require("@tiptap/react");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function RepeatView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    import_react29.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    import_react28.NodeViewWrapper,
     {
       "data-type": "repeat",
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
       className: "mly-relative",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react29.NodeViewContent, { className: "is-editable" }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.NodeViewContent, { className: "is-editable" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
             role: "button",
@@ -5034,8 +4880,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.Repeat2, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Repeat2, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
             ]
           }
         )
@@ -5119,7 +4965,7 @@ var RepeatExtension = import_core13.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react30.ReactNodeViewRenderer)(RepeatView, {
+    return (0, import_react29.ReactNodeViewRenderer)(RepeatView, {
       contentDOMElementTag: "div",
       className: "mly-relative"
     });
@@ -5276,14 +5122,14 @@ var SlashCommandExtension = import_core15.Extension.create({
 });
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_react32 = require("@tiptap/react");
-var import_react33 = require("react");
+var import_react31 = require("@tiptap/react");
+var import_react32 = require("react");
 var import_tippy = __toESM(require("tippy.js"), 1);
 
 // src/editor/extensions/slash-command/slash-command-item.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_react31 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_react30 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function SlashCommandItem(props) {
   var _a;
   const {
@@ -5298,7 +5144,7 @@ function SlashCommandItem(props) {
     hoveredItemKey,
     onHover
   } = props;
-  const [open, setOpen] = (0, import_react31.useState)(false);
+  const [open, setOpen] = (0, import_react30.useState)(false);
   const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
   const itemKey = `${groupIndex}-${commandIndex}`;
   const isHovered = hoveredItemKey === itemKey;
@@ -5306,19 +5152,19 @@ function SlashCommandItem(props) {
   const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && (isHovered || isActive && !hoveredItemKey);
   const hasRenderFunction = typeof item.render === "function";
   const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
-  let value = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly-grow", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mly-font-medium", children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
+  let value = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly-grow", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mly-font-medium", children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
     ] }),
-    isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react18.ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
+    isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
   ] });
   if (renderFunctionValue !== null && renderFunctionValue !== true) {
     value = renderFunctionValue;
   }
-  const openTimerRef = (0, import_react31.useRef)(0);
-  const handleDelayedOpen = (0, import_react31.useCallback)(() => {
+  const openTimerRef = (0, import_react30.useRef)(0);
+  const handleDelayedOpen = (0, import_react30.useCallback)(() => {
     window.clearTimeout(openTimerRef.current);
     const delay = 200;
     openTimerRef.current = window.setTimeout(() => {
@@ -5326,7 +5172,7 @@ function SlashCommandItem(props) {
       openTimerRef.current = 0;
     }, delay);
   }, [setOpen]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (shouldOpenTooltip) {
       handleDelayedOpen();
     } else {
@@ -5335,7 +5181,7 @@ function SlashCommandItem(props) {
       setOpen(false);
     }
   }, [shouldOpenTooltip]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     return () => {
       if (openTimerRef.current) {
         window.clearTimeout(openTimerRef.current);
@@ -5343,8 +5189,8 @@ function SlashCommandItem(props) {
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         className: cn(
@@ -5359,14 +5205,14 @@ function SlashCommandItem(props) {
         children: value
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       TooltipContent,
       {
         side: "right",
         sideOffset: 10,
         className: "mly-w-52 mly-rounded-lg mly-border-none mly-p-1 mly-shadow",
-        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("figure", { className: "mly-relative mly-aspect-[2.5] mly-w-full mly-overflow-hidden mly-rounded-md mly-border mly-border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("figure", { className: "mly-relative mly-aspect-[2.5] mly-w-full mly-overflow-hidden mly-rounded-md mly-border mly-border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "img",
             {
               src: item == null ? void 0 : item.preview,
@@ -5374,7 +5220,7 @@ function SlashCommandItem(props) {
               className: "mly-absolute mly-inset-0 mly-h-full mly-w-full mly-object-cover"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
         ] })
       }
     )
@@ -5463,16 +5309,16 @@ function processCommand(options) {
 }
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var CommandList = (0, import_react33.forwardRef)((props, ref) => {
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var CommandList = (0, import_react32.forwardRef)((props, ref) => {
   const { items: groups, command, editor, range, query } = props;
-  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react33.useState)(0);
-  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react33.useState)(0);
-  const [hoveredItemKey, setHoveredItemKey] = (0, import_react33.useState)(null);
-  const prevQuery = (0, import_react33.useRef)("");
-  const prevSelectedGroupIndex = (0, import_react33.useRef)(0);
-  const prevSelectedCommandIndex = (0, import_react33.useRef)(0);
-  const selectItem = (0, import_react33.useCallback)(
+  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react32.useState)(0);
+  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react32.useState)(0);
+  const [hoveredItemKey, setHoveredItemKey] = (0, import_react32.useState)(null);
+  const prevQuery = (0, import_react32.useRef)("");
+  const prevSelectedGroupIndex = (0, import_react32.useRef)(0);
+  const prevSelectedCommandIndex = (0, import_react32.useRef)(0);
+  const selectItem = (0, import_react32.useCallback)(
     (groupIndex, commandIndex) => {
       const item = groups[groupIndex].commands[commandIndex];
       if (!item) {
@@ -5482,7 +5328,7 @@ var CommandList = (0, import_react33.forwardRef)((props, ref) => {
     },
     [command]
   );
-  (0, import_react33.useImperativeHandle)(ref, () => ({
+  (0, import_react32.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       var _a, _b, _c, _d;
       const navigationKeys = [
@@ -5570,9 +5416,9 @@ var CommandList = (0, import_react33.forwardRef)((props, ref) => {
       }
     }
   }));
-  const commandListContainer = (0, import_react33.useRef)(null);
-  const activeCommandRef = (0, import_react33.useRef)(null);
-  (0, import_react33.useLayoutEffect)(() => {
+  const commandListContainer = (0, import_react32.useRef)(null);
+  const activeCommandRef = (0, import_react32.useRef)(null);
+  (0, import_react32.useLayoutEffect)(() => {
     const container = commandListContainer == null ? void 0 : commandListContainer.current;
     const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
     if (!container || !activeCommandContainer) {
@@ -5587,11 +5433,11 @@ var CommandList = (0, import_react33.forwardRef)((props, ref) => {
     commandListContainer,
     activeCommandRef
   ]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setSelectedGroupIndex(0);
     setSelectedCommandIndex(0);
   }, [groups]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     return () => {
       prevQuery.current = "";
       prevSelectedGroupIndex.current = 0;
@@ -5601,15 +5447,15 @@ var CommandList = (0, import_react33.forwardRef)((props, ref) => {
   if (!groups || groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly-z-50 mly-w-72 mly-overflow-hidden mly-rounded-md mly-border mly-border-gray-200 mly-bg-white mly-shadow-md mly-transition-all", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly-z-50 mly-w-72 mly-overflow-hidden mly-rounded-md mly-border mly-border-gray-200 mly-bg-white mly-shadow-md mly-transition-all", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         id: "slash-command",
         ref: commandListContainer,
         className: "mly-no-scrollbar mly-h-auto mly-max-h-[330px] mly-overflow-y-auto",
-        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "span",
             {
               className: cn(
@@ -5619,9 +5465,9 @@ var CommandList = (0, import_react33.forwardRef)((props, ref) => {
               children: group.title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
             const itemKey = `${groupIndex}-${commandIndex}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               SlashCommandItem,
               {
                 item,
@@ -5641,16 +5487,16 @@ var CommandList = (0, import_react33.forwardRef)((props, ref) => {
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly-flex mly-items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("kbd", { className: "mly-ml-1 mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2193" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly-flex mly-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("kbd", { className: "mly-ml-1 mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2193" }),
         " ",
         "to navigate"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
         " ",
         "to select"
       ] })
@@ -5674,7 +5520,7 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react32.ReactRenderer(CommandList, {
+          component = new import_react31.ReactRenderer(CommandList, {
             props,
             editor: props.editor
           });
@@ -5727,16 +5573,16 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
 }
 
 // src/editor/nodes/variable/variable-suggestions.tsx
-var import_react34 = require("@tiptap/react");
-var import_react35 = require("react");
+var import_react33 = require("@tiptap/react");
+var import_react34 = require("react");
 var import_tippy2 = __toESM(require("tippy.js"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var VariableList = (0, import_react35.forwardRef)((props, ref) => {
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var VariableList = (0, import_react34.forwardRef)((props, ref) => {
   var _a;
   const { items = [], editor } = props;
-  const popoverRef = (0, import_react35.useRef)(null);
+  const popoverRef = (0, import_react34.useRef)(null);
   const VariableSuggestionPopoverComponent = (_a = useVariableOptions(editor)) == null ? void 0 : _a.variableSuggestionsPopover;
-  (0, import_react35.useImperativeHandle)(ref, () => ({
+  (0, import_react34.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (!popoverRef.current) {
         return false;
@@ -5759,7 +5605,7 @@ var VariableList = (0, import_react35.forwardRef)((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     VariableSuggestionPopoverComponent,
     {
       items,
@@ -5792,7 +5638,7 @@ function getVariableSuggestions(char = DEFAULT_VARIABLE_TRIGGER_CHAR) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react34.ReactRenderer(VariableList, {
+          component = new import_react33.ReactRenderer(VariableList, {
             props,
             editor: props.editor
           });
@@ -5842,20 +5688,20 @@ function getVariableSuggestions(char = DEFAULT_VARIABLE_TRIGGER_CHAR) {
 // src/editor/nodes/html/html.tsx
 var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
 var import_state5 = require("@tiptap/pm/state");
-var import_react38 = require("@tiptap/react");
+var import_react37 = require("@tiptap/react");
 var import_xml = __toESM(require("highlight.js/lib/languages/xml"), 1);
 var import_lowlight = require("lowlight");
 
 // src/editor/nodes/html/html-view.tsx
-var import_react36 = require("@tiptap/react");
-var import_react37 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react35 = require("@tiptap/react");
+var import_react36 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function HTMLCodeBlockView(props) {
   const { node, updateAttributes: updateAttributes2 } = props;
   let { language, activeTab = "code" } = node.attrs;
   activeTab || (activeTab = "code");
   const languageClass = language ? `language-${language}` : "";
-  const html2 = (0, import_react37.useMemo)(() => {
+  const html2 = (0, import_react36.useMemo)(() => {
     const text2 = node.content.content.reduce((acc, cur) => {
       if (cur.type.name === "text") {
         return acc + cur.text;
@@ -5874,21 +5720,21 @@ function HTMLCodeBlockView(props) {
     return `<style>${combinedStyle}</style>${body.innerHTML}`;
   }, [activeTab]);
   const isEmpty = html2 === "";
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-    import_react36.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_react35.NodeViewWrapper,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
       children: [
-        activeTab === "code" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("pre", { className: "mly-my-0 mly-rounded-lg mly-border mly-border-gray-200 mly-bg-white mly-p-2 mly-text-black", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_react36.NodeViewContent,
+        activeTab === "code" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "mly-my-0 mly-rounded-lg mly-border mly-border-gray-200 mly-bg-white mly-p-2 mly-text-black", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          import_react35.NodeViewContent,
           {
             as: "code",
             className: cn("is-editable", languageClass)
           }
         ) }),
-        activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: cn(
@@ -5956,7 +5802,7 @@ var HTMLCodeBlockExtension = import_extension_code_block_lowlight.default.extend
     });
   },
   addNodeView() {
-    return (0, import_react38.ReactNodeViewRenderer)(HTMLCodeBlockView, {
+    return (0, import_react37.ReactNodeViewRenderer)(HTMLCodeBlockView, {
       className: "mly-relative",
       attrs: ({ node }) => {
         var _a;