@daisychainapp/maily-to-core 0.2.10 → 0.2.12

package/dist/extensions/index.mjs

@@ -2146,302 +2146,9 @@ function AlignmentSwitch(props) {
   ] });
 }
 
-// src/editor/components/show-popover.tsx
-import { Eye, InfoIcon } from "lucide-react";
-import { memo, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
-
-// src/editor/utils/node-options.ts
-import { useMemo as useMemo2 } from "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 useMemo2(() => {
-    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
-import { useCallback as useCallback4 } from "react";
-import { useEffect as useEffect3 } from "react";
-function useOutsideClick(ref, callback) {
-  const handleClick = useCallback4(
-    (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        callback();
-      }
-    },
-    [ref, callback]
-  );
-  useEffect3(() => {
-    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
-import { CornerDownLeft } from "lucide-react";
-import { forwardRef as forwardRef6, useRef as useRef3 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var InputAutocomplete = forwardRef6((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 = useRef3(null);
-  const popoverRef = useRef3(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__ */ jsxs6("div", { className: cn("mly-relative"), ref: containerRef, children: [
-    /* @__PURE__ */ jsxs6("label", { className: "mly-relative", children: [
-      /* @__PURE__ */ jsx11(
-        "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__ */ jsx11("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ jsx11(CornerDownLeft, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
-    ] }),
-    isTriggeringVariable && /* @__PURE__ */ jsx11("div", { className: "mly-absolute mly-left-0 mly-top-8", children: /* @__PURE__ */ jsx11(
-      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
-import { jsx as jsx12, jsxs as jsxs7 } from "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] = useState3(false);
-  const inputRef = useRef4(null);
-  const autoCompleteOptions = useMemo3(() => {
-    return processVariables(variables, {
-      query: showIfKey || "",
-      from: "bubble-variable",
-      editor
-    }).map((variable) => variable.name);
-  }, [variables, showIfKey, editor]);
-  const isValidWhenKey = showIfKey || autoCompleteOptions.includes(showIfKey);
-  return /* @__PURE__ */ jsxs7(
-    Popover,
-    {
-      onOpenChange: (open) => {
-        if (open) {
-          return;
-        }
-        setIsUpdatingKey(false);
-      },
-      children: [
-        /* @__PURE__ */ jsxs7(Tooltip, { children: [
-          /* @__PURE__ */ jsx12(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(
-            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__ */ jsx12(Eye, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5]" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx12(TooltipContent, { sideOffset: 8, children: "Show block conditionally" })
-        ] }),
-        /* @__PURE__ */ jsxs7(
-          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__ */ jsxs7("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__ */ jsxs7(Tooltip, { children: [
-                  /* @__PURE__ */ jsx12(TooltipTrigger, { children: /* @__PURE__ */ jsx12(
-                    InfoIcon,
-                    {
-                      className: cn("mly-size-3 mly-stroke-[2.5] mly-text-gray-500")
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx12(
-                    TooltipContent,
-                    {
-                      sideOffset: 14,
-                      className: "mly-max-w-[285px]",
-                      align: "start",
-                      children: "Show the block if the selected variable is true."
-                    }
-                  )
-                ] })
-              ] }),
-              !isUpdatingKey && /* @__PURE__ */ jsx12(
-                "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__ */ jsx12(
-                "form",
-                {
-                  onSubmit: (e) => {
-                    e.preventDefault();
-                    setIsUpdatingKey(false);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Escape") {
-                      setIsUpdatingKey(false);
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx12(
-                    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 = memo(_ShowPopover);
-
 // src/editor/components/ui/color-picker.tsx
 import { HexColorPicker, HexColorInput } from "react-colorful";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function ColorPicker(props) {
   const {
     color,
@@ -2459,14 +2166,14 @@ function ColorPicker(props) {
       onColorChange(color2);
     });
   };
-  const popoverButton = /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ jsx13(
+  const popoverButton = /* @__PURE__ */ jsx11(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ jsx11(
     BaseButton,
     {
       variant: "ghost",
       className: "!mly-size-7 mly-shrink-0",
       size: "sm",
       type: "button",
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx11(
         "div",
         {
           className: cn(
@@ -2480,7 +2187,7 @@ function ColorPicker(props) {
       )
     }
   ) });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs6(
     Popover,
     {
       onOpenChange: (open) => {
@@ -2489,17 +2196,17 @@ function ColorPicker(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ jsxs8(Tooltip, { children: [
-          /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ jsx13(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ jsxs6(Tooltip, { children: [
+          /* @__PURE__ */ jsx11(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ jsx11(TooltipContent, { sideOffset: 8, children: tooltip })
         ] }) : popoverButton,
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx11(
           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__ */ jsxs8("div", { className: "mly-min-w-[260px] mly-rounded-xl mly-border mly-border-gray-200 mly-bg-white mly-p-4", children: [
-              /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsxs6("div", { className: "mly-min-w-[260px] mly-rounded-xl mly-border mly-border-gray-200 mly-bg-white mly-p-4", children: [
+              /* @__PURE__ */ jsx11(
                 HexColorPicker,
                 {
                   color,
@@ -2507,7 +2214,7 @@ function ColorPicker(props) {
                   className: "mly-flex !mly-w-full mly-flex-col mly-gap-4"
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx11(
                 HexColorInput,
                 {
                   alpha: true,
@@ -2517,10 +2224,10 @@ function ColorPicker(props) {
                   prefixed: true
                 }
               ),
-              suggestedColors.length > 0 && /* @__PURE__ */ jsxs8("div", { children: [
-                /* @__PURE__ */ jsx13("div", { className: "-mly-mx-4 mly-my-4 mly-h-px mly-bg-gray-200" }),
-                /* @__PURE__ */ jsx13("h2", { className: "mly-text-xs mly-text-gray-500", children: "Recently used" }),
-                /* @__PURE__ */ jsx13("div", { className: "mly-mt-2 mly-flex mly-flex-wrap mly-gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ jsx13(
+              suggestedColors.length > 0 && /* @__PURE__ */ jsxs6("div", { children: [
+                /* @__PURE__ */ jsx11("div", { className: "-mly-mx-4 mly-my-4 mly-h-px mly-bg-gray-200" }),
+                /* @__PURE__ */ jsx11("h2", { className: "mly-text-xs mly-text-gray-500", children: "Recently used" }),
+                /* @__PURE__ */ jsx11("div", { className: "mly-mt-2 mly-flex mly-flex-wrap mly-gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ jsx11(
                   BaseButton,
                   {
                     variant: "ghost",
@@ -2528,7 +2235,7 @@ function ColorPicker(props) {
                     className: "!mly-size-7 mly-shrink-0",
                     type: "button",
                     onClick: () => handleColorChange(suggestedColor),
-                    children: /* @__PURE__ */ jsx13(
+                    children: /* @__PURE__ */ jsx11(
                       "div",
                       {
                         className: "mly-h-4 mly-w-4 mly-shrink-0 mly-rounded",
@@ -2550,10 +2257,10 @@ function ColorPicker(props) {
 }
 
 // src/editor/components/ui/divider.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Divider(props) {
   const { type = "vertical", className } = props;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: cn(
@@ -2567,7 +2274,7 @@ function Divider(props) {
 
 // src/editor/components/ui/link-input-popover.tsx
 import { Link, LinkIcon } from "lucide-react";
-import { useRef as useRef6, useState as useState5 } from "react";
+import { useRef as useRef5, useState as useState4 } from "react";
 
 // src/editor/provider.tsx
 import { createContext, useContext } from "react";
@@ -2577,12 +2284,12 @@ import { FootprintsIcon as FootprintsIcon2, Heading1 as Heading12 } from "lucide
 
 // src/blocks/button.tsx
 import { MousePointer, ArrowUpRightSquare } from "lucide-react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var button = {
   title: "Button",
   description: "Add a call to action button to email.",
   searchTerms: ["link", "button", "cta"],
-  icon: /* @__PURE__ */ jsx15(MousePointer, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx13(MousePointer, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setButton().run();
   }
@@ -2591,7 +2298,7 @@ var linkCard = {
   title: "Link Card",
   description: "Add a link card to email.",
   searchTerms: ["link", "button", "image"],
-  icon: /* @__PURE__ */ jsx15(ArrowUpRightSquare, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx13(ArrowUpRightSquare, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLinkCard().run();
   },
@@ -2604,12 +2311,12 @@ var linkCard = {
 
 // src/blocks/code.tsx
 import { CodeXmlIcon } from "lucide-react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var htmlCodeBlock = {
   title: "Custom HTML",
   description: "Insert a custom HTML block",
   searchTerms: ["html", "code", "custom"],
-  icon: /* @__PURE__ */ jsx16(CodeXmlIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx14(CodeXmlIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
   }
@@ -2618,12 +2325,12 @@ var htmlCodeBlock = {
 // src/blocks/image.tsx
 import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { ImageIcon } from "lucide-react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var image = {
   title: "Image",
   description: "Full width image",
   searchTerms: ["image"],
-  icon: /* @__PURE__ */ jsx17(ImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx15(ImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
   }
@@ -2632,7 +2339,7 @@ var logo = {
   title: "Logo",
   description: "Add your brand logo",
   searchTerms: ["image", "logo"],
-  icon: /* @__PURE__ */ jsx17(ImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx15(ImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
   }
@@ -2641,7 +2348,7 @@ var inlineImage = {
   title: "Inline Image",
   description: "Inline image",
   searchTerms: ["image", "inline"],
-  icon: /* @__PURE__ */ jsx17(ImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx15(ImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setInlineImage({
       src: "https://maily.to/brand/logo.png"
@@ -2671,12 +2378,12 @@ import {
   RectangleHorizontal,
   Minus
 } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var columns = {
   title: "Columns",
   description: "Add columns to email.",
   searchTerms: ["layout", "columns"],
-  icon: /* @__PURE__ */ jsx18(ColumnsIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx16(ColumnsIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
   }
@@ -2685,7 +2392,7 @@ var section = {
   title: "Section",
   description: "Add a section to email.",
   searchTerms: ["layout", "section"],
-  icon: /* @__PURE__ */ jsx18(RectangleHorizontal, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx16(RectangleHorizontal, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSection().run();
   }
@@ -2694,7 +2401,7 @@ var repeat = {
   title: "Repeat",
   description: "Loop over an array of items.",
   searchTerms: ["repeat", "for", "loop"],
-  icon: /* @__PURE__ */ jsx18(Repeat2, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx16(Repeat2, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setRepeat().run();
   }
@@ -2703,7 +2410,7 @@ var spacer = {
   title: "Spacer",
   description: "Add space between blocks.",
   searchTerms: ["space", "gap", "divider"],
-  icon: /* @__PURE__ */ jsx18(MoveVertical, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx16(MoveVertical, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
   }
@@ -2712,7 +2419,7 @@ var divider = {
   title: "Divider",
   description: "Add a horizontal divider.",
   searchTerms: ["divider", "line"],
-  icon: /* @__PURE__ */ jsx18(Minus, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx16(Minus, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
@@ -2720,12 +2427,12 @@ var divider = {
 
 // src/blocks/list.tsx
 import { List, ListOrdered } from "lucide-react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var bulletList = {
   title: "Bullet List",
   description: "Create a simple bullet list.",
   searchTerms: ["unordered", "point"],
-  icon: /* @__PURE__ */ jsx19(List, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx17(List, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
@@ -2734,7 +2441,7 @@ var orderedList = {
   title: "Numbered List",
   description: "Create a list with numbering.",
   searchTerms: ["ordered"],
-  icon: /* @__PURE__ */ jsx19(ListOrdered, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx17(ListOrdered, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
@@ -2751,12 +2458,12 @@ import {
   FootprintsIcon,
   EraserIcon
 } from "lucide-react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var text = {
   title: "Text",
   description: "Just start typing with plain text.",
   searchTerms: ["p", "paragraph"],
-  icon: /* @__PURE__ */ jsx20(Text, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(Text, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
   }
@@ -2765,7 +2472,7 @@ var heading1 = {
   title: "Heading 1",
   description: "Big heading.",
   searchTerms: ["h1", "title", "big", "large"],
-  icon: /* @__PURE__ */ jsx20(Heading1, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(Heading1, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   }
@@ -2774,7 +2481,7 @@ var heading2 = {
   title: "Heading 2",
   description: "Medium heading.",
   searchTerms: ["h2", "subtitle", "medium"],
-  icon: /* @__PURE__ */ jsx20(Heading2, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(Heading2, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
   }
@@ -2783,7 +2490,7 @@ var heading3 = {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ jsx20(Heading3, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(Heading3, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
   }
@@ -2792,7 +2499,7 @@ var hardBreak = {
   title: "Hard Break",
   description: "Add a break between lines.",
   searchTerms: ["break", "line"],
-  icon: /* @__PURE__ */ jsx20(DivideIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(DivideIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHardBreak().run();
   }
@@ -2801,7 +2508,7 @@ var blockquote = {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ jsx20(TextQuote, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(TextQuote, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
@@ -2810,7 +2517,7 @@ var footer = {
   title: "Footer",
   description: "Add a footer text to email.",
   searchTerms: ["footer", "text"],
-  icon: /* @__PURE__ */ jsx20(FootprintsIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(FootprintsIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setFooter().run();
   }
@@ -2819,16 +2526,16 @@ var clearLine = {
   title: "Clear Line",
   description: "Clear the current line.",
   searchTerms: ["clear", "line"],
-  icon: /* @__PURE__ */ jsx20(EraserIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx18(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
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 function LogoWithCoverImageIcon(props) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs7(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -2838,7 +2545,7 @@ function LogoWithCoverImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -2847,7 +2554,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -2856,7 +2563,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             fillRule: "evenodd",
@@ -2865,8 +2572,8 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx21("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ jsx21("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx19("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ jsx19("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
+        /* @__PURE__ */ jsx19(
           "rect",
           {
             x: "3",
@@ -2879,7 +2586,7 @@ function LogoWithCoverImageIcon(props) {
             mask: "url(#path-4-inside-1_1046_19527)"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx19(
           "rect",
           {
             x: "6.25",
@@ -2891,16 +2598,16 @@ function LogoWithCoverImageIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx21("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
+        /* @__PURE__ */ jsx19("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
       ]
     })
   );
 }
 
 // src/editor/components/icons/logo-with-text-horizon.tsx
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 function LogoWithTextHorizonIcon(props) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs8(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -2910,7 +2617,7 @@ function LogoWithTextHorizonIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx20(
           "path",
           {
             fillRule: "evenodd",
@@ -2919,7 +2626,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx20(
           "rect",
           {
             x: "6.25",
@@ -2931,8 +2638,8 @@ function LogoWithTextHorizonIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx22("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx20("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx20(
           "path",
           {
             fillRule: "evenodd",
@@ -2941,7 +2648,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx20(
           "path",
           {
             fillRule: "evenodd",
@@ -2956,9 +2663,9 @@ function LogoWithTextHorizonIcon(props) {
 }
 
 // src/editor/components/icons/logo-with-text-vertical.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function LogoWithTextVerticalIcon(props) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -2968,7 +2675,7 @@ function LogoWithTextVerticalIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx21(
           "path",
           {
             fillRule: "evenodd",
@@ -2977,7 +2684,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx21(
           "rect",
           {
             x: "4.25",
@@ -2989,8 +2696,8 @@ function LogoWithTextVerticalIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx23("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx21("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx21(
           "path",
           {
             fillRule: "evenodd",
@@ -2999,7 +2706,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx21(
           "path",
           {
             fillRule: "evenodd",
@@ -3014,12 +2721,12 @@ function LogoWithTextVerticalIcon(props) {
 }
 
 // src/blocks/headers.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var headerLogoWithTextHorizontal = {
   title: "Logo with Text (Horizontal)",
   description: "Logo and a text horizontally",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ jsx24(LogoWithTextHorizonIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx22(LogoWithTextHorizonIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent({
       type: "columns",
@@ -3083,7 +2790,7 @@ var headerLogoWithTextVertical = {
   title: "Logo with Text (Vertical)",
   description: "Logo and a text vertically",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ jsx24(LogoWithTextVerticalIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx22(LogoWithTextVerticalIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent([
       {
@@ -3114,7 +2821,7 @@ var headerLogoWithCoverImage = {
   title: "Logo with Cover Image",
   description: "Logo and a cover image",
   searchTerms: ["logo", "cover", "image"],
-  icon: /* @__PURE__ */ jsx24(LogoWithCoverImageIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx22(LogoWithCoverImageIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
       year: "numeric",
@@ -3207,12 +2914,12 @@ import {
   LayoutTemplateIcon,
   RectangleHorizontalIcon
 } from "lucide-react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var footerCopyrightText = {
   title: "Footer Copyright",
   description: "Copyright text for the footer.",
   searchTerms: ["footer", "copyright"],
-  icon: /* @__PURE__ */ jsx25(CopyrightIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx23(CopyrightIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     editor.chain().focus().deleteRange(range).insertContent({
@@ -3232,7 +2939,7 @@ var footerCommunityFeedbackCta = {
   title: "Footer Community Feedback CTA",
   description: "Community feedback CTA for the footer.",
   searchTerms: ["footer", "community", "feedback", "cta"],
-  icon: /* @__PURE__ */ jsx25(RectangleHorizontalIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx23(RectangleHorizontalIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       {
@@ -3275,7 +2982,7 @@ var footerCompanySignature = {
   title: "Footer Company Signature",
   description: "Company signature for the footer.",
   searchTerms: ["footer", "company", "signature"],
-  icon: /* @__PURE__ */ jsx25(LayoutTemplateIcon, { className: "mly-h-4 mly-w-4" }),
+  icon: /* @__PURE__ */ jsx23(LayoutTemplateIcon, { className: "mly-h-4 mly-w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       { type: "horizontalRule" },
@@ -3429,7 +3136,7 @@ var footerCompanySignature = {
 };
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DEFAULT_SLASH_COMMANDS = [
   {
     title: "Blocks",
@@ -3464,7 +3171,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Headers",
         description: "Add pre-designed headers block",
         searchTerms: ["header", "headers"],
-        icon: /* @__PURE__ */ jsx26(Heading12, { className: "mly-h-4 mly-w-4" }),
+        icon: /* @__PURE__ */ jsx24(Heading12, { className: "mly-h-4 mly-w-4" }),
         preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
         commands: [
           headerLogoWithTextVertical,
@@ -3477,7 +3184,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Footers",
         description: "Add pre-designed footers block",
         searchTerms: ["footers"],
-        icon: /* @__PURE__ */ jsx26(FootprintsIcon2, { className: "mly-h-4 mly-w-4" }),
+        icon: /* @__PURE__ */ jsx24(FootprintsIcon2, { className: "mly-h-4 mly-w-4" }),
         commands: [
           footerCopyrightText,
           footerCommunityFeedbackCta,
@@ -3490,7 +3197,7 @@ var DEFAULT_SLASH_COMMANDS = [
 ];
 
 // src/editor/provider.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
 var MailyContext = createContext({
   placeholderUrl: DEFAULT_PLACEHOLDER_URL,
@@ -3504,8 +3211,160 @@ function useMailyContext() {
   return values;
 }
 
+// src/editor/utils/node-options.ts
+import { useMemo as useMemo2 } from "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 useMemo2(() => {
+    return getVariableOptions(editor);
+  }, [editor]);
+}
+
+// src/editor/utils/use-outside-click.ts
+import { useCallback as useCallback4 } from "react";
+import { useEffect as useEffect3 } from "react";
+function useOutsideClick(ref, callback) {
+  const handleClick = useCallback4(
+    (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        callback();
+      }
+    },
+    [ref, callback]
+  );
+  useEffect3(() => {
+    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
+import { CornerDownLeft } from "lucide-react";
+import { forwardRef as forwardRef6, useRef as useRef3 } from "react";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var InputAutocomplete = forwardRef6((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 = useRef3(null);
+  const popoverRef = useRef3(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__ */ jsxs10("div", { className: cn("mly-relative"), ref: containerRef, children: [
+    /* @__PURE__ */ jsxs10("label", { className: "mly-relative", children: [
+      /* @__PURE__ */ jsx26(
+        "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__ */ jsx26("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ jsx26(CornerDownLeft, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
+    ] }),
+    isTriggeringVariable && /* @__PURE__ */ jsx26("div", { className: "mly-absolute mly-left-0 mly-top-8", children: /* @__PURE__ */ jsx26(
+      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
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/editor/nodes/variable/variable.ts
 import { mergeAttributes as mergeAttributes7, Node as Node8 } from "@tiptap/core";
@@ -3524,15 +3383,15 @@ import {
   forwardRef as forwardRef7,
   useEffect as useEffect4,
   useImperativeHandle,
-  useRef as useRef5,
-  useState as useState4
+  useRef as useRef4,
+  useState as useState3
 } from "react";
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 var VariableSuggestionsPopover = forwardRef7((props, ref) => {
   const { items, onSelectItem } = props;
-  const [selectedIndex, setSelectedIndex] = useState4(0);
-  const scrollContainerRef = useRef5(null);
-  const itemRefs = useRef5([]);
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const scrollContainerRef = useRef4(null);
+  const itemRefs = useRef4([]);
   const scrollSelectedIntoView = (index) => {
     const container = scrollContainerRef.current;
     const selectedItem = itemRefs.current[index];
@@ -3573,17 +3432,17 @@ var VariableSuggestionsPopover = forwardRef7((props, ref) => {
       onSelectItem(item);
     }
   }));
-  return /* @__PURE__ */ jsxs12("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__ */ jsxs12("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__ */ jsx28("span", { className: "mly-text-xs mly-uppercase", children: "Variables" }),
-      /* @__PURE__ */ jsx28(VariableIcon, { children: /* @__PURE__ */ jsx28(Braces, { className: "mly-size-3 mly-stroke-[2.5]" }) })
+  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("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__ */ jsx27("span", { className: "mly-text-xs mly-uppercase", children: "Variables" }),
+      /* @__PURE__ */ jsx27(VariableIcon, { children: /* @__PURE__ */ jsx27(Braces, { className: "mly-size-3 mly-stroke-[2.5]" }) })
     ] }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx27(
       "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__ */ jsx28("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__ */ jsxs12(
+        children: /* @__PURE__ */ jsx27("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__ */ jsxs11(
           "button",
           {
             ref: (el) => itemRefs.current[index] = el,
@@ -3593,27 +3452,27 @@ var VariableSuggestionsPopover = forwardRef7((props, ref) => {
               index === selectedIndex ? "mly-bg-soft-gray" : "mly-bg-white"
             ),
             children: [
-              /* @__PURE__ */ jsx28(Braces, { className: "mly-size-3 mly-stroke-[2.5] mly-text-rose-600" }),
+              /* @__PURE__ */ jsx27(Braces, { className: "mly-size-3 mly-stroke-[2.5] mly-text-rose-600" }),
               item.name
             ]
           },
           index
-        )) : /* @__PURE__ */ jsx28("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__ */ jsx27("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__ */ jsxs12("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__ */ jsxs12("div", { className: "mly-flex mly-items-center mly-gap-1", children: [
-        /* @__PURE__ */ jsx28(VariableIcon, { children: /* @__PURE__ */ jsx28(ArrowDownIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
-        /* @__PURE__ */ jsx28(VariableIcon, { children: /* @__PURE__ */ jsx28(ArrowUpIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
-        /* @__PURE__ */ jsx28("span", { className: "mly-text-xs mly-text-gray-500", children: "Navigate" })
+    /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "mly-flex mly-items-center mly-gap-1", children: [
+        /* @__PURE__ */ jsx27(VariableIcon, { children: /* @__PURE__ */ jsx27(ArrowDownIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
+        /* @__PURE__ */ jsx27(VariableIcon, { children: /* @__PURE__ */ jsx27(ArrowUpIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) }),
+        /* @__PURE__ */ jsx27("span", { className: "mly-text-xs mly-text-gray-500", children: "Navigate" })
       ] }),
-      /* @__PURE__ */ jsx28(VariableIcon, { children: /* @__PURE__ */ jsx28(CornerDownLeftIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) })
+      /* @__PURE__ */ jsx27(VariableIcon, { children: /* @__PURE__ */ jsx27(CornerDownLeftIcon, { className: "mly-size-3 mly-stroke-[2.5]" }) })
     ] })
   ] });
 });
 function VariableIcon(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn(
@@ -3628,35 +3487,35 @@ function VariableIcon(props) {
 // src/editor/nodes/variable/variable-view.tsx
 import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
 import { AlertTriangle, Braces as Braces2, Pencil } from "lucide-react";
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
 function VariableView(props) {
   const { node, updateAttributes: updateAttributes2, editor } = props;
   const { id, fallback, required } = node.attrs;
-  const renderVariable = useMemo4(() => {
+  const renderVariable = useMemo3(() => {
     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__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     NodeViewWrapper4,
     {
       className: "react-component mly-inline-block mly-leading-none",
       draggable: "false",
-      children: /* @__PURE__ */ jsxs13(
+      children: /* @__PURE__ */ jsxs12(
         Popover,
         {
           onOpenChange: (open) => {
             editor.storage.variable.popover = open;
           },
           children: [
-            /* @__PURE__ */ jsx29(PopoverTrigger, { children: renderVariable({
+            /* @__PURE__ */ jsx28(PopoverTrigger, { children: renderVariable({
               variable: { name: id, required, valid: true },
               fallback,
               editor,
               from: "content-variable"
             }) }),
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx28(
               PopoverContent,
               {
                 align: "start",
@@ -3665,10 +3524,10 @@ function VariableView(props) {
                 sideOffset: 8,
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 onCloseAutoFocus: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs13("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
-                  /* @__PURE__ */ jsxs13("label", { className: "mly-relative", children: [
-                    /* @__PURE__ */ jsx29("span", { className: "mly-inline-block mly-px-2 mly-text-xs mly-text-midnight-gray", children: "Variable" }),
-                    /* @__PURE__ */ jsx29(
+                children: /* @__PURE__ */ jsx28(TooltipProvider, { children: /* @__PURE__ */ jsxs12("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
+                  /* @__PURE__ */ jsxs12("label", { className: "mly-relative", children: [
+                    /* @__PURE__ */ jsx28("span", { className: "mly-inline-block mly-px-2 mly-text-xs mly-text-midnight-gray", children: "Variable" }),
+                    /* @__PURE__ */ jsx28(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: id != null ? id : "",
@@ -3682,10 +3541,10 @@ function VariableView(props) {
                       })
                     )
                   ] }),
-                  /* @__PURE__ */ jsx29(Divider, { className: "mly-mx-1.5" }),
-                  /* @__PURE__ */ jsxs13("label", { className: "mly-relative", children: [
-                    /* @__PURE__ */ jsx29("span", { className: "mly-inline-block mly-px-2 mly-pl-1 mly-text-xs mly-text-midnight-gray", children: "Default" }),
-                    /* @__PURE__ */ jsx29(
+                  /* @__PURE__ */ jsx28(Divider, { className: "mly-mx-1.5" }),
+                  /* @__PURE__ */ jsxs12("label", { className: "mly-relative", children: [
+                    /* @__PURE__ */ jsx28("span", { className: "mly-inline-block mly-px-2 mly-pl-1 mly-text-xs mly-text-midnight-gray", children: "Default" }),
+                    /* @__PURE__ */ jsx28(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: fallback != null ? fallback : "",
@@ -3698,7 +3557,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__ */ jsx29("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ jsx29(Pencil, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
+                    /* @__PURE__ */ jsx28("div", { className: "mly-absolute mly-inset-y-0 mly-right-1 mly-flex mly-items-center", children: /* @__PURE__ */ jsx28(Pencil, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) })
                   ] })
                 ] }) })
               }
@@ -3713,13 +3572,13 @@ var DefaultRenderVariable = (props) => {
   const { variable, fallback, from } = props;
   const { name, required, valid } = variable;
   if (from === "button-variable") {
-    return /* @__PURE__ */ jsxs13("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__ */ jsx29(Braces2, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5]" }),
-      /* @__PURE__ */ jsx29("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
+    return /* @__PURE__ */ jsxs12("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__ */ jsx28(Braces2, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5]" }),
+      /* @__PURE__ */ jsx28("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
     ] });
   }
   if (from === "bubble-variable") {
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         className: cn(
@@ -3727,21 +3586,21 @@ var DefaultRenderVariable = (props) => {
           !valid && "mly-border-rose-400 mly-bg-rose-50 mly-text-rose-600 hover:mly-bg-rose-100"
         ),
         children: [
-          /* @__PURE__ */ jsx29(Braces2, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
-          /* @__PURE__ */ jsx29("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
+          /* @__PURE__ */ jsx28(Braces2, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
+          /* @__PURE__ */ jsx28("span", { className: "mly-min-w-0 mly-truncate mly-text-left", children: name })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs12(
     "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__ */ jsx29(Braces2, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
+        /* @__PURE__ */ jsx28(Braces2, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5] mly-text-rose-600" }),
         name,
-        required && !fallback && /* @__PURE__ */ jsx29(AlertTriangle, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5]" })
+        required && !fallback && /* @__PURE__ */ jsx28(AlertTriangle, { className: "mly-size-[var(--variable-icon-size)] mly-shrink-0 mly-stroke-[2.5]" })
       ]
     }
   );
@@ -3918,7 +3777,7 @@ var VariableExtension = Node8.create({
 });
 
 // src/editor/components/ui/link-input-popover.tsx
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function LinkInputPopover(props) {
   var _a, _b;
   const {
@@ -3929,15 +3788,15 @@ function LinkInputPopover(props) {
     editor,
     isVariable
   } = props;
-  const [isOpen, setIsOpen] = useState5(false);
-  const [isEditing, setIsEditing] = useState5(!isVariable);
-  const linkInputRef = useRef6(null);
+  const [isOpen, setIsOpen] = useState4(false);
+  const [isEditing, setIsEditing] = useState4(!isVariable);
+  const linkInputRef = useRef5(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 = useMemo5(() => {
+  const autoCompleteOptions = useMemo4(() => {
     const withoutTrigger = defaultValue.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -3948,7 +3807,7 @@ function LinkInputPopover(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, variableTriggerCharacter, defaultValue, editor]);
-  const popoverButton = /* @__PURE__ */ jsx30(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx30(
+  const popoverButton = /* @__PURE__ */ jsx29(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx29(
     BaseButton,
     {
       variant: "ghost",
@@ -3956,10 +3815,10 @@ function LinkInputPopover(props) {
       type: "button",
       className: "!mly-size-7",
       "data-state": !!defaultValue,
-      children: /* @__PURE__ */ jsx30(Icon, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-midnight-gray" })
+      children: /* @__PURE__ */ jsx29(Icon, { className: "mly-h-3 mly-w-3 mly-shrink-0 mly-stroke-[2.5] mly-text-midnight-gray" })
     }
   ) });
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(
     Popover,
     {
       open: isOpen,
@@ -3973,11 +3832,11 @@ function LinkInputPopover(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ jsxs14(Tooltip, { children: [
-          /* @__PURE__ */ jsx30(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ jsx30(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ jsxs13(Tooltip, { children: [
+          /* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ jsx29(TooltipContent, { sideOffset: 8, children: tooltip })
         ] }) : popoverButton,
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           PopoverContent,
           {
             align: "end",
@@ -3985,7 +3844,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__ */ jsx30(
+            children: /* @__PURE__ */ jsx29(
               "form",
               {
                 onSubmit: (e) => {
@@ -3997,8 +3856,8 @@ function LinkInputPopover(props) {
                   onValueChange == null ? void 0 : onValueChange(input.value);
                   setIsOpen(false);
                 },
-                children: /* @__PURE__ */ jsxs14("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
-                  !isEditing && /* @__PURE__ */ jsx30("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__ */ jsx30(
+                children: /* @__PURE__ */ jsxs13("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
+                  !isEditing && /* @__PURE__ */ jsx29("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__ */ jsx29(
                     "button",
                     {
                       onClick: () => {
@@ -4019,9 +3878,9 @@ function LinkInputPopover(props) {
                       })
                     }
                   ) }),
-                  isEditing && /* @__PURE__ */ jsxs14("div", { className: "mly-relative", children: [
-                    /* @__PURE__ */ jsx30("div", { className: "mly-absolute mly-inset-y-0 mly-left-1.5 mly-z-10 mly-flex mly-items-center", children: /* @__PURE__ */ jsx30(LinkIcon, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) }),
-                    /* @__PURE__ */ jsx30(
+                  isEditing && /* @__PURE__ */ jsxs13("div", { className: "mly-relative", children: [
+                    /* @__PURE__ */ jsx29("div", { className: "mly-absolute mly-inset-y-0 mly-left-1.5 mly-z-10 mly-flex mly-items-center", children: /* @__PURE__ */ jsx29(LinkIcon, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5] mly-text-midnight-gray" }) }),
+                    /* @__PURE__ */ jsx29(
                       InputAutocomplete,
                       {
                         editor,
@@ -4059,7 +3918,7 @@ function LinkInputPopover(props) {
 // src/editor/components/ui/select.tsx
 import { useId } from "react";
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 function Select(props) {
   const {
     label,
@@ -4072,10 +3931,10 @@ function Select(props) {
     iconClassName
   } = props;
   const selectId = `mly${useId()}`;
-  const content = /* @__PURE__ */ jsxs15("div", { className: "mly-relative", children: [
-    /* @__PURE__ */ jsx31("label", { htmlFor: selectId, className: "mly-sr-only", children: label }),
-    Icon && /* @__PURE__ */ jsx31("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__ */ jsx31(Icon, { className: cn("mly-size-3", iconClassName) }) }),
-    /* @__PURE__ */ jsx31(
+  const content = /* @__PURE__ */ jsxs14("div", { className: "mly-relative", children: [
+    /* @__PURE__ */ jsx30("label", { htmlFor: selectId, className: "mly-sr-only", children: label }),
+    Icon && /* @__PURE__ */ jsx30("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__ */ jsx30(Icon, { className: cn("mly-size-3", iconClassName) }) }),
+    /* @__PURE__ */ jsx30(
       "select",
       {
         id: selectId,
@@ -4086,10 +3945,10 @@ function Select(props) {
         ),
         value,
         onChange: (event) => onValueChange(event.target.value),
-        children: options.map((option) => /* @__PURE__ */ jsx31("option", { value: option.value, children: option.label }, option.value))
+        children: options.map((option) => /* @__PURE__ */ jsx30("option", { value: option.value, children: option.label }, option.value))
       }
     ),
-    /* @__PURE__ */ jsx31("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__ */ jsx31(
+    /* @__PURE__ */ jsx30("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__ */ jsx30(
       ChevronDownIcon,
       {
         size: 16,
@@ -4102,30 +3961,30 @@ function Select(props) {
   if (!tooltip) {
     return content;
   }
-  return /* @__PURE__ */ jsxs15(Tooltip, { children: [
-    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: content }),
-    /* @__PURE__ */ jsx31(TooltipContent, { sideOffset: 8, children: tooltip })
+  return /* @__PURE__ */ jsxs14(Tooltip, { children: [
+    /* @__PURE__ */ jsx30(TooltipTrigger, { asChild: true, children: content }),
+    /* @__PURE__ */ jsx30(TooltipContent, { sideOffset: 8, children: tooltip })
   ] });
 }
 
 // src/editor/nodes/button/button-view.tsx
 import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/editor/nodes/button/button-label-input.tsx
-import { useMemo as useMemo6, useRef as useRef7, useState as useState6 } from "react";
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 function ButtonLabelInput(props) {
   var _a, _b;
   const { value, onValueChange, isVariable, editor } = props;
-  const linkInputRef = useRef7(null);
-  const [isEditing, setIsEditing] = useState6(!isVariable);
+  const linkInputRef = useRef6(null);
+  const [isEditing, setIsEditing] = useState5(!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 = useMemo6(() => {
+  const autoCompleteOptions = useMemo5(() => {
     const withoutTrigger = value.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -4136,8 +3995,8 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ jsxs16("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs15("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
+    !isEditing && /* @__PURE__ */ jsx31(
       "button",
       {
         onClick: () => {
@@ -4158,7 +4017,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ jsx32(
+    isEditing && /* @__PURE__ */ jsx31(
       InputAutocomplete,
       {
         editor,
@@ -4185,7 +4044,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -4206,7 +4065,7 @@ function ButtonView(props) {
   } = node.attrs;
   const opts = useVariableOptions(editor);
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const sizes = useMemo7(
+  const sizes = useMemo6(
     () => ({
       small: {
         paddingX: 24,
@@ -4223,13 +4082,13 @@ function ButtonView(props) {
     }),
     []
   );
-  const size = useMemo7(() => {
+  const size = useMemo6(() => {
     var _a;
     return (_a = Object.entries(sizes).find(
       ([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
     )) == null ? void 0 : _a[0];
   }, [paddingRight, paddingTop, sizes]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     NodeViewWrapper5,
     {
       draggable: editor.isEditable,
@@ -4238,8 +4097,8 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ jsxs17(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsxs16(Popover, { open: props.selected && editor.isEditable, children: [
+        /* @__PURE__ */ jsx32(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
           "button",
           {
             className: cn(
@@ -4282,7 +4141,7 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx32(
           PopoverContent,
           {
             align: "end",
@@ -4291,8 +4150,8 @@ function ButtonView(props) {
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ jsx33(TooltipProvider, { children: /* @__PURE__ */ jsxs17("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
-              /* @__PURE__ */ jsx33(
+            children: /* @__PURE__ */ jsx32(TooltipProvider, { children: /* @__PURE__ */ jsxs16("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
+              /* @__PURE__ */ jsx32(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -4306,9 +4165,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ jsx33(Divider, {}),
-              /* @__PURE__ */ jsxs17("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx32(Divider, {}),
+              /* @__PURE__ */ jsxs16("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ jsx32(
                   Select,
                   {
                     label: "Border Radius",
@@ -4326,7 +4185,7 @@ function ButtonView(props) {
                     className: "mly-capitalize"
                   }
                 ),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx32(
                   Select,
                   {
                     label: "Style",
@@ -4344,7 +4203,7 @@ function ButtonView(props) {
                     className: "mly-capitalize"
                   }
                 ),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx32(
                   Select,
                   {
                     label: "Size",
@@ -4367,9 +4226,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx33(Divider, {}),
-              /* @__PURE__ */ jsxs17("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx32(Divider, {}),
+              /* @__PURE__ */ jsxs16("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ jsx32(
                   AlignmentSwitch,
                   {
                     alignment,
@@ -4380,7 +4239,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx32(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -4396,9 +4255,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx33(Divider, {}),
-              /* @__PURE__ */ jsxs17("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx32(Divider, {}),
+              /* @__PURE__ */ jsxs16("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ jsx32(
                   BackgroundColorPickerPopup,
                   {
                     variant,
@@ -4410,7 +4269,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx32(
                   TextColorPickerPopup,
                   {
                     color: textColor,
@@ -4421,20 +4280,7 @@ function ButtonView(props) {
                     }
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsx33(Divider, {}),
-              /* @__PURE__ */ jsx33(
-                ShowPopover,
-                {
-                  showIfKey,
-                  onShowIfKeyValueChange: (value) => {
-                    updateAttributes2({
-                      showIfKey: value
-                    });
-                  },
-                  editor
-                }
-              )
+              ] })
             ] }) })
           }
         )
@@ -4444,20 +4290,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx32(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
           className: "mly-size-7",
-          children: /* @__PURE__ */ jsx33(
+          children: /* @__PURE__ */ jsx32(
             "div",
             {
               className: "mly-h-4 mly-w-4 mly-shrink-0 mly-rounded-full mly-shadow",
@@ -4476,16 +4322,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ jsx33(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx32(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
       className: "mly-size-7",
-      children: /* @__PURE__ */ jsxs17("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
-        /* @__PURE__ */ jsx33("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsxs16("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
+        /* @__PURE__ */ jsx32("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
+        /* @__PURE__ */ jsx32(
           "div",
           {
             className: "mly-h-[2px] mly-w-3 mly-shrink-0 mly-rounded-md mly-shadow",
@@ -4953,10 +4799,10 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer6 } from "@tiptap/react";
 // src/editor/nodes/repeat/repeat-view.tsx
 import { NodeViewWrapper as NodeViewWrapper6, NodeViewContent } from "@tiptap/react";
 import { Repeat2 as Repeat22 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 function RepeatView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs17(
     NodeViewWrapper6,
     {
       "data-type": "repeat",
@@ -4964,8 +4810,8 @@ function RepeatView(props) {
       "data-drag-handle": editor.isEditable,
       className: "mly-relative",
       children: [
-        /* @__PURE__ */ jsx34(NodeViewContent, { className: "is-editable" }),
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx33(NodeViewContent, { className: "is-editable" }),
+        /* @__PURE__ */ jsxs17(
           "div",
           {
             role: "button",
@@ -4976,8 +4822,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__PURE__ */ jsx34(Repeat22, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
-              /* @__PURE__ */ jsx34("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
+              /* @__PURE__ */ jsx33(Repeat22, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
+              /* @__PURE__ */ jsx33("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
             ]
           }
         )
@@ -5226,15 +5072,15 @@ import {
   useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef9,
-  useState as useState8
+  useRef as useRef8,
+  useState as useState7
 } from "react";
 import tippy from "tippy.js";
 
 // src/editor/extensions/slash-command/slash-command-item.tsx
 import { ChevronRightIcon } from "lucide-react";
-import { useCallback as useCallback5, useState as useState7, useRef as useRef8, useEffect as useEffect5 } from "react";
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useCallback as useCallback5, useState as useState6, useRef as useRef7, useEffect as useEffect5 } from "react";
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function SlashCommandItem(props) {
   var _a;
   const {
@@ -5249,7 +5095,7 @@ function SlashCommandItem(props) {
     hoveredItemKey,
     onHover
   } = props;
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState6(false);
   const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
   const itemKey = `${groupIndex}-${commandIndex}`;
   const isHovered = hoveredItemKey === itemKey;
@@ -5257,18 +5103,18 @@ 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__ */ jsxs19(Fragment3, { children: [
-    /* @__PURE__ */ jsx35("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
-    /* @__PURE__ */ jsxs19("div", { className: "mly-grow", children: [
-      /* @__PURE__ */ jsx35("p", { className: "mly-font-medium", children: item.title }),
-      /* @__PURE__ */ jsx35("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
+  let value = /* @__PURE__ */ jsxs18(Fragment3, { children: [
+    /* @__PURE__ */ jsx34("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
+    /* @__PURE__ */ jsxs18("div", { className: "mly-grow", children: [
+      /* @__PURE__ */ jsx34("p", { className: "mly-font-medium", children: item.title }),
+      /* @__PURE__ */ jsx34("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
     ] }),
-    isSubCommand2 && /* @__PURE__ */ jsx35("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ jsx35(ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
+    isSubCommand2 && /* @__PURE__ */ jsx34("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ jsx34(ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
   ] });
   if (renderFunctionValue !== null && renderFunctionValue !== true) {
     value = renderFunctionValue;
   }
-  const openTimerRef = useRef8(0);
+  const openTimerRef = useRef7(0);
   const handleDelayedOpen = useCallback5(() => {
     window.clearTimeout(openTimerRef.current);
     const delay = 200;
@@ -5294,8 +5140,8 @@ function SlashCommandItem(props) {
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs19(Tooltip, { open, children: [
-    /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs18(Tooltip, { open, children: [
+    /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
       "button",
       {
         className: cn(
@@ -5310,14 +5156,14 @@ function SlashCommandItem(props) {
         children: value
       }
     ) }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx34(
       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__ */ jsxs19(Fragment3, { children: [
-          /* @__PURE__ */ jsx35("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__ */ jsx35(
+        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
+          /* @__PURE__ */ jsx34("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__ */ jsx34(
             "img",
             {
               src: item == null ? void 0 : item.preview,
@@ -5325,7 +5171,7 @@ function SlashCommandItem(props) {
               className: "mly-absolute mly-inset-0 mly-h-full mly-w-full mly-object-cover"
             }
           ) }),
-          /* @__PURE__ */ jsx35("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
+          /* @__PURE__ */ jsx34("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
         ] })
       }
     )
@@ -5414,15 +5260,15 @@ function processCommand(options) {
 }
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var CommandList = forwardRef8((props, ref) => {
   const { items: groups, command, editor, range, query } = props;
-  const [selectedGroupIndex, setSelectedGroupIndex] = useState8(0);
-  const [selectedCommandIndex, setSelectedCommandIndex] = useState8(0);
-  const [hoveredItemKey, setHoveredItemKey] = useState8(null);
-  const prevQuery = useRef9("");
-  const prevSelectedGroupIndex = useRef9(0);
-  const prevSelectedCommandIndex = useRef9(0);
+  const [selectedGroupIndex, setSelectedGroupIndex] = useState7(0);
+  const [selectedCommandIndex, setSelectedCommandIndex] = useState7(0);
+  const [hoveredItemKey, setHoveredItemKey] = useState7(null);
+  const prevQuery = useRef8("");
+  const prevSelectedGroupIndex = useRef8(0);
+  const prevSelectedCommandIndex = useRef8(0);
   const selectItem = useCallback6(
     (groupIndex, commandIndex) => {
       const item = groups[groupIndex].commands[commandIndex];
@@ -5521,8 +5367,8 @@ var CommandList = forwardRef8((props, ref) => {
       }
     }
   }));
-  const commandListContainer = useRef9(null);
-  const activeCommandRef = useRef9(null);
+  const commandListContainer = useRef8(null);
+  const activeCommandRef = useRef8(null);
   useLayoutEffect2(() => {
     const container = commandListContainer == null ? void 0 : commandListContainer.current;
     const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
@@ -5552,15 +5398,15 @@ var CommandList = forwardRef8((props, ref) => {
   if (!groups || groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx36(TooltipProvider, { children: /* @__PURE__ */ jsxs20("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__ */ jsx36(
+  return /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsxs19("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__ */ jsx35(
       "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__ */ jsxs20(Fragment4, { children: [
-          /* @__PURE__ */ jsx36(
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs19(Fragment4, { children: [
+          /* @__PURE__ */ jsx35(
             "span",
             {
               className: cn(
@@ -5570,9 +5416,9 @@ var CommandList = forwardRef8((props, ref) => {
               children: group.title
             }
           ),
-          /* @__PURE__ */ jsx36("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ jsx35("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
             const itemKey = `${groupIndex}-${commandIndex}`;
-            return /* @__PURE__ */ jsx36(
+            return /* @__PURE__ */ jsx35(
               SlashCommandItem,
               {
                 item,
@@ -5592,16 +5438,16 @@ var CommandList = forwardRef8((props, ref) => {
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ jsx36("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ jsxs20("div", { className: "mly-flex mly-items-center", children: [
-      /* @__PURE__ */ jsxs20("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
-        /* @__PURE__ */ jsx36("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
-        /* @__PURE__ */ jsx36("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__ */ jsx35("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ jsxs19("div", { className: "mly-flex mly-items-center", children: [
+      /* @__PURE__ */ jsxs19("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+        /* @__PURE__ */ jsx35("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
+        /* @__PURE__ */ jsx35("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__ */ jsx36("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
-      /* @__PURE__ */ jsxs20("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
-        /* @__PURE__ */ jsx36("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
+      /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
+      /* @__PURE__ */ jsxs19("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+        /* @__PURE__ */ jsx35("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
         " ",
         "to select"
       ] })
@@ -5679,13 +5525,13 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
 
 // src/editor/nodes/variable/variable-suggestions.tsx
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
-import { forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle3, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle3, useRef as useRef9 } from "react";
 import tippy2 from "tippy.js";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var VariableList = forwardRef9((props, ref) => {
   var _a;
   const { items = [], editor } = props;
-  const popoverRef = useRef10(null);
+  const popoverRef = useRef9(null);
   const VariableSuggestionPopoverComponent = (_a = useVariableOptions(editor)) == null ? void 0 : _a.variableSuggestionsPopover;
   useImperativeHandle3(ref, () => ({
     onKeyDown: ({ event }) => {
@@ -5710,7 +5556,7 @@ var VariableList = forwardRef9((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx36(
     VariableSuggestionPopoverComponent,
     {
       items,
@@ -5801,14 +5647,14 @@ import { createLowlight, common } from "lowlight";
 
 // src/editor/nodes/html/html-view.tsx
 import { NodeViewContent as NodeViewContent2, NodeViewWrapper as NodeViewWrapper7 } from "@tiptap/react";
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx37, jsxs as jsxs20 } from "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 = useMemo8(() => {
+  const html2 = useMemo7(() => {
     const text2 = node.content.content.reduce((acc, cur) => {
       if (cur.type.name === "text") {
         return acc + cur.text;
@@ -5827,21 +5673,21 @@ function HTMLCodeBlockView(props) {
     return `<style>${combinedStyle}</style>${body.innerHTML}`;
   }, [activeTab]);
   const isEmpty = html2 === "";
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs20(
     NodeViewWrapper7,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
       children: [
-        activeTab === "code" && /* @__PURE__ */ jsx38("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__ */ jsx38(
+        activeTab === "code" && /* @__PURE__ */ jsx37("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__ */ jsx37(
           NodeViewContent2,
           {
             as: "code",
             className: cn("is-editable", languageClass)
           }
         ) }),
-        activeTab === "preview" && /* @__PURE__ */ jsx38(
+        activeTab === "preview" && /* @__PURE__ */ jsx37(
           "div",
           {
             className: cn(