@daisychainapp/maily-to-core 0.4.4 → 0.4.5

package/dist/index.cjs

@@ -85,8 +85,8 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/editor/index.tsx
-var import_react62 = require("@tiptap/react");
-var import_react63 = require("react");
+var import_react64 = require("@tiptap/react");
+var import_react65 = require("react");
 
 // src/editor/components/column-menu/columns-bubble-menu.tsx
 var import_react8 = require("@tiptap/react");
@@ -3478,7 +3478,10 @@ function Divider(props) {
 var React = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipProvider = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipPrimitive.Provider, __spreadProps(__spreadValues({ delayDuration: 80, skipDelayDuration: 120 }, props), { children }));
+};
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = React.forwardRef((_a, ref) => {
@@ -3559,6 +3562,7 @@ function BubbleMenuButton(item) {
     }, item.command ? { onClick: item.command } : {}), {
       "data-state": isActive,
       className: cn(
+        "menu-option",
         isActive && "menu-active-option",
         "mly:size-7! mly:px-2.5 mly:disabled:cursor-not-allowed",
         item == null ? void 0 : item.className
@@ -3986,11 +3990,11 @@ function ColumnsWidthConfig(props) {
     onColumnWidthChange
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverTrigger, { className: "mly:flex mly:size-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SlidersVertical, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PopoverTrigger, { className: "menu-option mly:flex mly:size-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SlidersVertical, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       PopoverContent,
       {
-        className: "mly:w-[300px] mly:rounded-lg mly:p-0.5!",
+        className: "menu-dropdown-surface mly:w-[300px] mly:rounded-lg mly:p-0.5!",
         side: "top",
         sideOffset: 8,
         align: "center",
@@ -4069,8 +4073,8 @@ function SwitchButton(props) {
     "button",
     {
       className: cn(
-        "mly:flex mly:h-7 mly:items-center mly:gap-1 mly:rounded-md mly:px-2 mly:text-sm mly:text-gray-500 mly:hover:bg-soft-gray mly:hover:text-midnight-gray",
-        isActive && "mly:bg-soft-gray mly:text-midnight-gray"
+        "menu-option mly:flex mly:h-7 mly:items-center mly:gap-1 mly:rounded-md mly:px-2 mly:text-sm mly:text-gray-500 mly:hover:bg-soft-gray mly:hover:text-midnight-gray",
+        isActive && "menu-active-option mly:bg-soft-gray mly:text-midnight-gray"
       ),
       onClick,
       children
@@ -4095,7 +4099,7 @@ function Select(props) {
     placeholder
   } = props;
   const selectId = `mly${(0, import_react7.useId)()}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-select-wrap mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: selectId, className: "mly:sr-only", children: label }),
     Icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mly:pointer-events-none mly:absolute mly:left-2 mly:top-1/2 mly:z-20 mly:flex mly:h-7 mly:-translate-y-1/2 mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: cn("mly:size-3.5", iconClassName) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -4103,7 +4107,7 @@ function Select(props) {
       {
         id: selectId,
         className: cn(
-          "mly-select-padding mly:flex mly:h-7 mly:max-w-max mly:appearance-none mly:items-center mly:rounded-md mly:bg-white mly:text-sm mly:leading-none mly:text-midnight-gray mly:ring-offset-white mly:transition-colors mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2 mly:active:bg-soft-gray",
+          "menu-option menu-select-control mly-select-padding mly:flex mly:h-7 mly:max-w-max mly:appearance-none mly:items-center mly:rounded-md mly:bg-white mly:text-sm mly:leading-none mly:text-midnight-gray mly:ring-offset-white mly:transition-colors mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2 mly:active:bg-soft-gray",
           !!Icon && "mly:pl-[25px]",
           className
         ),
@@ -4820,14 +4824,14 @@ function ContentMenu(props) {
       },
       onNodeChange: handleNodeChange,
       className: cn(editor.isEditable ? "mly:visible" : "mly:hidden"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mly:flex mly:items-center mly:pr-1.5", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "menu-content-actions-offset mly:flex mly:items-center mly:pr-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             BaseButton,
             {
               variant: "ghost",
               size: "icon",
-              className: "mly:size-5! mly:cursor-grab mly:text-gray-500 mly:hover:text-black",
+              className: "menu-icon-button mly:size-5! mly:cursor-grab mly:text-gray-500 mly:hover:text-black",
               onClick: handleAddNewNode,
               type: "button",
               children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Plus, { className: "mly:size-3.5 mly:shrink-0" })
@@ -4850,7 +4854,7 @@ function ContentMenu(props) {
                 {
                   variant: "ghost",
                   size: "icon",
-                  className: "mly:relative mly:z-1 mly:size-5! mly:cursor-grab mly:text-gray-500 mly:hover:text-black",
+                  className: "menu-icon-button mly:relative mly:z-1 mly:size-5! mly:cursor-grab mly:text-gray-500 mly:hover:text-black",
                   onClick: (e) => {
                     e.preventDefault();
                     setMenuOpen(true);
@@ -4877,26 +4881,26 @@ function ContentMenu(props) {
               align: "start",
               side: "bottom",
               sideOffset: 8,
-              className: "mly:flex mly:w-max mly:flex-col mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:p-1 mly:shadow-md",
+              className: "menu-actions-surface mly:flex mly:w-max mly:flex-col mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:p-1 mly:shadow-md",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   BaseButton,
                   {
                     variant: "ghost",
                     onClick: duplicateNode,
-                    className: "mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2 mly:!py-1.5 mly:text-sm mly:font-normal mly:hover:bg-soft-gray",
+                    className: "menu-action-item mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2 mly:!py-1.5 mly:text-sm mly:font-normal mly:hover:bg-soft-gray",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Copy, { className: "mly:size-[15px] mly:shrink-0" }),
                       "Duplicate"
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Divider, { type: "horizontal" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Divider, { type: "horizontal", className: "menu-actions-divider" }),
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   BaseButton,
                   {
                     onClick: deleteCurrentNode,
-                    className: "mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:bg-red-100 mly:!px-2 mly:!py-1.5 mly:text-sm mly:font-normal mly:text-red-600 mly:hover:bg-red-200 mly:focus:bg-red-200",
+                    className: "menu-action-item menu-action-item-danger mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:bg-red-100 mly:!px-2 mly:!py-1.5 mly:text-sm mly:font-normal mly:text-red-600 mly:hover:bg-red-200 mly:focus:bg-red-200",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Trash2, { className: "mly:size-[15px] mly:shrink-0" }),
                       "Delete"
@@ -4912,13 +4916,64 @@ function ContentMenu(props) {
   );
 }
 
+// src/editor/components/divider-menu/divider-bubble-menu.tsx
+var import_react12 = require("@tiptap/react");
+var import_react13 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function DividerBubbleMenu(props) {
+  const { editor, appendTo } = props;
+  if (!editor) {
+    return null;
+  }
+  const items = (0, import_react13.useMemo)(
+    () => spacing.map((space) => {
+      const { value: size, short: name } = space;
+      return {
+        name,
+        isActive: () => editor.isActive("horizontalRule", { size }),
+        command: () => {
+          editor.chain().focus().updateAttributes("horizontalRule", { size }).run();
+        }
+      };
+    }),
+    [editor]
+  );
+  const bubbleMenuProps = __spreadProps(__spreadValues(__spreadValues({}, props), appendTo ? { appendTo: appendTo.current } : {}), {
+    shouldShow: ({ editor: editor2 }) => {
+      if (!editor2.isEditable) {
+        return false;
+      }
+      return editor2.isActive("horizontalRule");
+    },
+    tippyOptions: {
+      maxWidth: "100%",
+      moveTransition: "mly:transform 0.15s mly:ease-out"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react12.BubbleMenu,
+    __spreadProps(__spreadValues({}, bubbleMenuProps), {
+      className: "menu-surface mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        BubbleMenuButton,
+        __spreadValues({
+          className: "!mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
+          iconClassName: "mly:w-3 mly:h-3",
+          nameClassName: "mly:text-xs"
+        }, item),
+        index
+      )) })
+    })
+  );
+}
+
 // src/editor/components/editor-menu-bar.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var EditorMenuBar = (props) => {
   const { editor, config } = props;
-  const items = (0, import_react12.useMemo)(
+  const items = (0, import_react14.useMemo)(
     () => [
       {
         name: "bold",
@@ -4957,7 +5012,21 @@ var EditorMenuBar = (props) => {
       },
       {
         name: "divider",
-        command: () => editor.chain().focus().setHorizontalRule().run(),
+        command: () => {
+          editor.chain().focus().setHorizontalRule().run();
+          const { from } = editor.state.selection;
+          const nearbyPositions = [from, from - 1, from - 2, from + 1];
+          const dividerPos = nearbyPositions.find((pos) => {
+            var _a;
+            if (pos < 0) {
+              return false;
+            }
+            return ((_a = editor.state.doc.nodeAt(pos)) == null ? void 0 : _a.type.name) === "horizontalRule";
+          });
+          if (dividerPos != null) {
+            editor.chain().focus().setNodeSelection(dividerPos).run();
+          }
+        },
         isActive: () => editor.isActive("horizontalRule"),
         group: "custom",
         icon: import_lucide_react8.SeparatorHorizontal
@@ -5002,7 +5071,7 @@ var EditorMenuBar = (props) => {
     ],
     [editor]
   );
-  const groups = (0, import_react12.useMemo)(
+  const groups = (0, import_react14.useMemo)(
     () => items.reduce((acc, item) => {
       if (!acc.includes(item.group)) {
         acc.push(item.group);
@@ -5014,15 +5083,15 @@ var EditorMenuBar = (props) => {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: `mly:flex mly:items-center mly:gap-3 ${config == null ? void 0 : config.toolbarClassName}`,
-      children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           className: "mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:p-1",
-          children: items.filter((item) => item.group === group).map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BubbleMenuButton, __spreadValues({}, item), index2))
+          children: items.filter((item) => item.group === group).map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BubbleMenuButton, __spreadValues({}, item), index2))
         },
         index
       ))
@@ -5032,7 +5101,7 @@ var EditorMenuBar = (props) => {
 
 // src/editor/nodes/logo/logo.ts
 var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
-var import_react20 = require("@tiptap/react");
+var import_react22 = require("@tiptap/react");
 
 // src/editor/nodes/section/section.ts
 var import_core5 = require("@tiptap/core");
@@ -5333,13 +5402,13 @@ var SectionExtension = import_core5.Node.create({
 });
 
 // src/editor/nodes/logo/logo-view.tsx
-var import_react17 = require("@tiptap/react");
-var import_react18 = require("react");
-var import_react19 = require("react");
+var import_react19 = require("@tiptap/react");
+var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/editor/nodes/image/image-view.tsx
-var import_react15 = require("react");
-var import_react16 = require("@tiptap/react");
+var import_react17 = require("react");
+var import_react18 = require("@tiptap/react");
 var import_lucide_react9 = require("lucide-react");
 
 // src/editor/plugins/image-upload/image-upload-plugin.ts
@@ -5434,7 +5503,7 @@ function ImageUploadPlugin(options) {
 
 // src/editor/extensions/image-upload/image-upload.ts
 var import_core6 = require("@tiptap/core");
-var import_react13 = require("react");
+var import_react15 = require("react");
 var ImageUploadExtension = import_core6.Extension.create({
   name: "imageUpload",
   addOptions() {
@@ -5469,7 +5538,7 @@ var ImageUploadExtension = import_core6.Extension.create({
   }
 });
 function useImageUploadOptions(editor) {
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     const node = editor.extensionManager.extensions.find(
       (extension) => extension.name === "imageUpload"
     );
@@ -5478,13 +5547,13 @@ function useImageUploadOptions(editor) {
 }
 
 // src/editor/utils/use-event.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 var useEvent = (handler) => {
-  const handlerRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useLayoutEffect)(() => {
+  const handlerRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useLayoutEffect)(() => {
     handlerRef.current = handler;
   }, [handler]);
-  return (0, import_react14.useCallback)((...args) => {
+  return (0, import_react16.useCallback)((...args) => {
     if (handlerRef.current === null) {
       throw new Error("Handler is not assigned");
     }
@@ -5502,24 +5571,21 @@ function getNewHeight(width, aspectRatio) {
   }
   return width / aspectRatio;
 }
-function getNewWidth(height, aspectRatio) {
-  return height * aspectRatio;
-}
 
 // src/editor/nodes/image/image-view.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var MIN_WIDTH = 20;
 var IMAGE_MAX_WIDTH = 600;
 var IMAGE_MAX_HEIGHT = 400;
 function ImageView(props) {
   const { node, updateAttributes: updateAttributes2, selected, editor } = props;
-  const [status, setStatus] = (0, import_react15.useState)("idle");
-  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react15.useState)(false);
+  const [status, setStatus] = (0, import_react17.useState)("idle");
+  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react17.useState)(false);
   const { onImageUpload, allowedMimeTypes = [] } = useImageUploadOptions(editor);
-  const wrapperRef = (0, import_react15.useRef)(null);
-  const imgRef = (0, import_react15.useRef)(null);
-  const [resizingStyle, setResizingStyle] = (0, import_react15.useState)();
-  const [isDraggingOver, setIsDraggingOver] = (0, import_react15.useState)(false);
+  const wrapperRef = (0, import_react17.useRef)(null);
+  const imgRef = (0, import_react17.useRef)(null);
+  const [resizingStyle, setResizingStyle] = (0, import_react17.useState)();
+  const [isDraggingOver, setIsDraggingOver] = (0, import_react17.useState)(false);
   const handleMouseDown = useEvent(
     (event) => {
       const imageParent = document.querySelector(
@@ -5576,12 +5642,12 @@ function ImageView(props) {
       window.addEventListener("mouseup", removeListeners);
     }
   );
-  const dragCornerButton = (0, import_react15.useCallback)(
+  const dragCornerButton = (0, import_react17.useCallback)(
     (direction) => {
       if (isPlaceholderImage) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           role: "button",
@@ -5634,7 +5700,7 @@ function ImageView(props) {
     const file = e.target.files[0];
     yield handleImageUpload(file);
   });
-  const handleImageUpload = (0, import_react15.useCallback)(
+  const handleImageUpload = (0, import_react17.useCallback)(
     (file) => __async(this, null, function* () {
       if (!isDroppable) {
         return;
@@ -5652,7 +5718,7 @@ function ImageView(props) {
     }),
     [onImageUpload, updateAttributes2]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     var _a2, _b, _c, _d;
     if (!src || isSrcVariable) {
       return;
@@ -5690,7 +5756,7 @@ function ImageView(props) {
       img.onerror = null;
     };
   }, [src]);
-  const handleDragOver = (0, import_react15.useCallback)(
+  const handleDragOver = (0, import_react17.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5701,7 +5767,7 @@ function ImageView(props) {
     },
     [onImageUpload]
   );
-  const handleDragLeave = (0, import_react15.useCallback)(
+  const handleDragLeave = (0, import_react17.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5712,7 +5778,7 @@ function ImageView(props) {
     },
     [onImageUpload]
   );
-  const handleDrop = (0, import_react15.useCallback)(
+  const handleDrop = (0, import_react17.useCallback)(
     (e) => __async(this, null, function* () {
       var _a2;
       if (!isDroppable) {
@@ -5737,8 +5803,8 @@ function ImageView(props) {
   const heightValue = height && height !== "auto" ? `${height}px` : void 0;
   const hasExplicitWidth = Boolean(widthValue || (resizingStyle == null ? void 0 : resizingStyle.width));
   const hasExplicitHeight = Boolean(heightValue || (resizingStyle == null ? void 0 : resizingStyle.height));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    import_react16.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react18.NodeViewWrapper,
     __spreadProps(__spreadValues({
       as: "div",
       draggable: editor.isEditable,
@@ -5766,7 +5832,7 @@ function ImageView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           ImageStatusLabel,
           {
             status: "idle",
@@ -5774,11 +5840,11 @@ function ImageView(props) {
             isDropZone: isDroppable
           }
         ),
-        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
-        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
+        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             type: "file",
@@ -5788,8 +5854,8 @@ function ImageView(props) {
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "img",
             __spreadProps(__spreadValues({}, attrs), {
               ref: imgRef,
@@ -5809,13 +5875,13 @@ function ImageView(props) {
               )
             })
           ),
-          selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
             [
               { left: 0, top: 0, height: "100%", width: "1px" },
               { right: 0, top: 0, height: "100%", width: "1px" },
               { top: 0, left: 0, width: "100%", height: "1px" },
               { bottom: 0, left: 0, width: "100%", height: "1px" }
-            ].map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            ].map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "div",
               {
                 className: "mly:bg-rose-500",
@@ -5839,7 +5905,7 @@ function ImageStatusLabel(props) {
   const _a = props, { status, minHeight, className, style, isDropZone } = _a, rest = __objRest(_a, ["status", "minHeight", "className", "style", "isDropZone"]);
   const resolvedMinHeight = minHeight != null ? minHeight : isDropZone ? 36 : void 0;
   const resolvedPaddingY = isDropZone ? 8 : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: cn(
@@ -5857,25 +5923,25 @@ function ImageStatusLabel(props) {
         paddingBottom: resolvedPaddingY
       } : {}), style),
       children: [
-        status === "idle" && !isDropZone && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "No image selected" })
+        status === "idle" && !isDropZone && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "No image selected" })
         ] }),
-        status === "idle" && isDropZone && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Click or Drop image here" })
+        status === "idle" && isDropZone && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Click or Drop image here" })
         ] }),
-        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Loading image..." })
+        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Loading image..." })
         ] }),
-        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Error loading image" })
+        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Error loading image" })
         ] }),
-        status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Variable Image URL" })
+        status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Variable Image URL" })
         ] })
       ]
     })
@@ -5883,12 +5949,12 @@ function ImageStatusLabel(props) {
 }
 
 // src/editor/nodes/logo/logo-view.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function LogoView(props) {
   const { node, editor, updateAttributes: updateAttributes2 } = props;
-  const [status, setStatus] = (0, import_react19.useState)("idle");
-  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react19.useState)(false);
-  const [isDraggingOver, setIsDraggingOver] = (0, import_react19.useState)(false);
+  const [status, setStatus] = (0, import_react21.useState)("idle");
+  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react21.useState)(false);
+  const [isDraggingOver, setIsDraggingOver] = (0, import_react21.useState)(false);
   const { onImageUpload, allowedMimeTypes = [] } = useImageUploadOptions(editor);
   let {
     alignment = "center",
@@ -5905,7 +5971,7 @@ function LogoView(props) {
     const file = e.target.files[0];
     yield handleImageUpload(file);
   });
-  const handleImageUpload = (0, import_react18.useCallback)(
+  const handleImageUpload = (0, import_react20.useCallback)(
     (file) => __async(this, null, function* () {
       if (!isDroppable) {
         return;
@@ -5923,7 +5989,7 @@ function LogoView(props) {
     }),
     [onImageUpload, updateAttributes2]
   );
-  const handleDragOver = (0, import_react18.useCallback)(
+  const handleDragOver = (0, import_react20.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5934,7 +6000,7 @@ function LogoView(props) {
     },
     [onImageUpload]
   );
-  const handleDragLeave = (0, import_react18.useCallback)(
+  const handleDragLeave = (0, import_react20.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5945,7 +6011,7 @@ function LogoView(props) {
     },
     [onImageUpload]
   );
-  const handleDrop = (0, import_react18.useCallback)(
+  const handleDrop = (0, import_react20.useCallback)(
     (e) => __async(this, null, function* () {
       var _a;
       if (!isDroppable) {
@@ -5966,7 +6032,7 @@ function LogoView(props) {
     }),
     [handleImageUpload]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a, _b, _c, _d;
     if (!logoSrc) {
       return;
@@ -5989,8 +6055,8 @@ function LogoView(props) {
     };
   }, [logoSrc]);
   const logoSize = logoSizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react17.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_react19.NodeViewWrapper,
     __spreadProps(__spreadValues({
       as: "div",
       draggable: editor.isEditable,
@@ -6009,7 +6075,7 @@ function LogoView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           ImageStatusLabel,
           {
             status: "idle",
@@ -6017,11 +6083,11 @@ function LogoView(props) {
             isDropZone: isDroppable
           }
         ),
-        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
-        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
+        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "file",
@@ -6031,7 +6097,7 @@ function LogoView(props) {
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "img",
           {
             src: logoSrc,
@@ -6151,7 +6217,7 @@ var LogoExtension = import_extension_image.default.extend({
     ];
   },
   addNodeView() {
-    return (0, import_react20.ReactNodeViewRenderer)(LogoView, {
+    return (0, import_react22.ReactNodeViewRenderer)(LogoView, {
       className: "mly:relative"
     });
   }
@@ -6182,13 +6248,13 @@ var borderRadius = [
 ];
 
 // src/editor/components/image-menu/image-bubble-menu.tsx
-var import_react29 = require("@tiptap/react");
-var import_lucide_react22 = require("lucide-react");
+var import_react24 = require("@tiptap/react");
+var import_lucide_react11 = require("lucide-react");
 var import_tippy3 = require("tippy.js");
 
 // src/editor/components/alignment-switch.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function AlignmentSwitch(props) {
   const { alignment: rawAlignment, onAlignmentChange } = props;
   const alignment = allowedLogoAlignment.includes(
@@ -6218,18 +6284,18 @@ function AlignmentSwitch(props) {
     }
   };
   const activeAlignment = alignments[alignment];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         PopoverTrigger,
         {
           className: cn(
-            "mly:flex mly:size-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2"
+            "menu-option mly:flex mly:size-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         TooltipContent,
         {
           sideOffset: 8,
@@ -6238,7 +6304,7 @@ function AlignmentSwitch(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       PopoverContent,
       {
         className: "mly:flex mly:w-max mly:gap-0.5 mly:rounded-lg mly:p-0.5!",
@@ -6252,7 +6318,7 @@ function AlignmentSwitch(props) {
           e.preventDefault();
         },
         children: Object.entries(alignments).map(([key, value]) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             BubbleMenuButton,
             {
               icon: value.icon,
@@ -6268,112 +6334,406 @@ function AlignmentSwitch(props) {
   ] });
 }
 
-// src/editor/components/ui/link-input-popover.tsx
-var import_lucide_react21 = require("lucide-react");
-var import_react26 = require("react");
-
-// src/editor/provider.tsx
-var import_react21 = require("react");
-
-// src/editor/extensions/slash-command/default-slash-commands.tsx
-var import_lucide_react18 = require("lucide-react");
-
-// src/blocks/button.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var button = {
-  title: "Button",
-  description: "Add a call to action button to email.",
-  searchTerms: ["link", "button", "cta"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.MousePointer, { className: "mly:h-4 mly:w-4" }),
-  command: ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setButton().run();
-  }
-};
-var linkCard = {
-  title: "Link Card",
-  description: "Add a link card to email.",
-  searchTerms: ["link", "button", "image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
-  command: ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setLinkCard().run();
-  },
-  render: (editor) => {
-    return editor.extensionManager.extensions.findIndex(
-      (ext) => ext.name === "linkCard"
-    ) === -1 ? null : true;
-  }
+// src/editor/components/image-menu/use-image-state.tsx
+var import_react23 = require("@tiptap/react");
+var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
+var useImageState = (editor) => {
+  const states = (0, import_react23.useEditorState)({
+    editor,
+    selector: ({ editor: editor2 }) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      return {
+        width: String(editor2.getAttributes("image").width),
+        height: String(editor2.getAttributes("image").height),
+        isImageActive: editor2.isActive("image"),
+        isLogoActive: editor2.isActive("logo"),
+        alignment: ((_a = editor2.getAttributes("image")) == null ? void 0 : _a.alignment) || ((_b = editor2.getAttributes("logo")) == null ? void 0 : _b.alignment),
+        borderRadius: (_c = editor2.getAttributes("image")) == null ? void 0 : _c.borderRadius,
+        logoSize: ((_d = editor2.getAttributes("logo")) == null ? void 0 : _d.size) || DEFAULT_LOGO_SIZE,
+        imageSrc: ((_e = editor2.getAttributes("image")) == null ? void 0 : _e.src) || ((_f = editor2.getAttributes("logo")) == null ? void 0 : _f.src) || "",
+        isSrcVariable: (_j = (_i = (_g = editor2.getAttributes("image")) == null ? void 0 : _g.isSrcVariable) != null ? _i : (_h = editor2.getAttributes("logo")) == null ? void 0 : _h.isSrcVariable) != null ? _j : false,
+        imageExternalLink: ((_k = editor2.getAttributes("image")) == null ? void 0 : _k.externalLink) || "",
+        isExternalLinkVariable: (_l = editor2.getAttributes("image")) == null ? void 0 : _l.isExternalLinkVariable,
+        lockAspectRatio: (_m = editor2.getAttributes("image")) == null ? void 0 : _m.lockAspectRatio,
+        aspectRatio: (_n = editor2.getAttributes("image")) == null ? void 0 : _n.aspectRatio,
+        currentShowIfKey: ((_o = editor2.getAttributes("image")) == null ? void 0 : _o.showIfKey) || ((_p = editor2.getAttributes("logo")) == null ? void 0 : _p.showIfKey) || ""
+      };
+    },
+    equalityFn: import_fast_deep_equal2.default
+  });
+  return states;
 };
 
-// src/blocks/code.tsx
-var import_lucide_react12 = require("lucide-react");
+// src/editor/components/image-menu/image-bubble-menu.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var htmlCodeBlock = {
-  title: "Custom HTML",
-  description: "Insert a custom HTML block",
-  searchTerms: ["html", "code", "custom"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
-  command: ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
-  }
-};
-
-// src/blocks/image.tsx
-var import_state4 = require("@tiptap/pm/state");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var image = {
-  title: "Image",
-  description: "Full width image",
-  searchTerms: ["image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
-  command: ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
-  }
-};
-var logo = {
-  title: "Logo",
-  description: "Add your brand logo",
-  searchTerms: ["image", "logo"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
-  command: ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
+function ImageBubbleMenu(props) {
+  const { editor, appendTo } = props;
+  if (!editor) {
+    return null;
   }
-};
-var inlineImage = {
-  title: "Inline Image",
-  description: "Inline image",
-  searchTerms: ["image", "inline"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
-  command: ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setInlineImage({
-      src: "https://maily.to/brand/logo.png"
-    }).command((props) => {
-      const { tr, state, view, editor: editor2 } = props;
-      const { from } = range;
-      const node = state.doc.nodeAt(from);
-      if (!node) {
+  const state = useImageState(editor);
+  const bubbleMenuProps = __spreadProps(__spreadValues(__spreadValues({}, props), appendTo ? { appendTo: appendTo.current } : {}), {
+    shouldShow: ({ editor: editor2 }) => {
+      if (!editor2.isEditable) {
         return false;
       }
-      const selection = import_state4.TextSelection.create(
-        tr.doc,
-        from,
-        from + node.nodeSize
-      );
-      tr.setSelection(selection);
-      return true;
-    }).run();
-  }
-};
+      return editor2.isActive("logo") || editor2.isActive("image");
+    },
+    tippyOptions: {
+      popperOptions: {
+        modifiers: [{ name: "flip", enabled: false }]
+      },
+      plugins: [import_tippy3.sticky],
+      sticky: "popper",
+      maxWidth: "100%"
+    }
+  });
+  const { lockAspectRatio } = state;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react24.BubbleMenu,
+    __spreadProps(__spreadValues({}, bubbleMenuProps), {
+      className: "menu-surface image-menu-surface mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TooltipProvider, { children: [
+        state.isLogoActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            Select,
+            {
+              label: "Size",
+              tooltip: "Size",
+              value: state.logoSize,
+              options: allowedLogoSize.map((size) => ({
+                value: size,
+                label: size
+              })),
+              onValueChange: (value) => {
+                editor == null ? void 0 : editor.chain().focus().setLogoAttributes({ size: value }).run();
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          AlignmentSwitch,
+          {
+            alignment: state.alignment,
+            onAlignmentChange: (alignment) => {
+              const isCurrentNodeImage = state.isImageActive;
+              if (!isCurrentNodeImage) {
+                editor == null ? void 0 : editor.chain().focus().setLogoAttributes({ alignment }).run();
+              } else {
+                editor == null ? void 0 : editor.chain().focus().updateAttributes("image", { alignment }).run();
+              }
+            }
+          }
+        ) }),
+        state.isImageActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            Select,
+            {
+              label: "Border Radius",
+              value: state == null ? void 0 : state.borderRadius,
+              options: borderRadius.map((value) => ({
+                value: String(value.value),
+                label: value.name
+              })),
+              onValueChange: (value) => {
+                editor == null ? void 0 : editor.chain().updateAttributes("image", {
+                  borderRadius: Number(value)
+                }).run();
+              },
+              tooltip: "Border Radius",
+              className: "mly:capitalize"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            BubbleMenuButton,
+            {
+              isActive: () => lockAspectRatio,
+              command: () => {
+                const width = Number(state.width) || 0;
+                const height = Number(state.height) || 0;
+                const aspectRatio = width / height;
+                editor == null ? void 0 : editor.chain().updateAttributes("image", {
+                  lockAspectRatio: !lockAspectRatio,
+                  aspectRatio
+                }).run();
+              },
+              icon: lockAspectRatio ? import_lucide_react11.LockIcon : import_lucide_react11.LockOpenIcon,
+              tooltip: "Lock Aspect Ratio"
+            }
+          ) })
+        ] })
+      ] })
+    })
+  );
+}
 
-// src/blocks/layout.tsx
-var import_lucide_react14 = require("lucide-react");
+// src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
+var import_react33 = require("@tiptap/react");
+var import_tippy4 = require("tippy.js");
+
+// src/editor/components/image-menu/image-size.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ImageSize(props) {
+  const { value, onValueChange, dimension } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "menu-option image-size-control mly:relative mly:flex mly:items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:left-2 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: dimension === "width" ? "W" : "H" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "input",
+      __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
+        className: "hide-number-controls image-size-input mly:h-auto mly:max-w-20 mly:appearance-none mly:border-0 mly:border-none mly:p-1 mly:px-[26px] mly:text-sm mly:uppercase mly:tabular-nums mly:outline-hidden mly:focus-visible:outline-hidden",
+        type: "number",
+        value,
+        onChange: (e) => onValueChange(e.target.value)
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: "PX" })
+  ] });
+}
+
+// src/editor/nodes/inline-image/inline-image.tsx
+var import_core7 = require("@tiptap/core");
+var import_state4 = require("@tiptap/pm/state");
+var DEFAULT_INLINE_IMAGE_HEIGHT = 20;
+var DEFAULT_INLINE_IMAGE_WIDTH = 20;
+var InlineImageExtension = import_core7.Node.create({
+  name: "inlineImage",
+  inline: true,
+  group: "inline",
+  selectable: false,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      height: {
+        default: DEFAULT_INLINE_IMAGE_HEIGHT
+      },
+      width: {
+        default: DEFAULT_INLINE_IMAGE_WIDTH
+      },
+      src: {
+        default: null
+      },
+      isSrcVariable: {
+        default: false,
+        renderHTML(attributes) {
+          if (!attributes.isSrcVariable) {
+            return {};
+          }
+          return {
+            "data-is-src-variable": "true"
+          };
+        }
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
+      },
+      externalLink: {
+        default: null,
+        renderHTML(attributes) {
+          if (!attributes.externalLink) {
+            return {};
+          }
+          return {
+            "data-external-link": attributes.externalLink
+          };
+        }
+      },
+      isExternalLinkVariable: {
+        default: false,
+        renderHTML(attributes) {
+          if (!attributes.isExternalLinkVariable) {
+            return {};
+          }
+          return {
+            "data-is-external-link-variable": "true"
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `img[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: HTMLAttributes2 }) {
+    const attrs = (0, import_core7.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes2, {
+      "data-type": this.name,
+      class: "mly:relative",
+      style: `display: inline; --mly-inline-image-height: ${HTMLAttributes2.height}px; --mly-inline-image-width: ${HTMLAttributes2.width}px; margin:0; vertical-align: middle;`,
+      draggable: "false",
+      loading: "lazy"
+    });
+    return ["img", attrs];
+  },
+  addCommands() {
+    return {
+      setInlineImage: (options) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new import_state4.Plugin({
+        key: new import_state4.PluginKey("inlineImage"),
+        props: {
+          handleClickOn: (_, pos, node) => {
+            if (node.type !== this.type) {
+              return false;
+            }
+            const from = pos;
+            const to = pos + node.nodeSize;
+            this.editor.commands.setTextSelection({ from, to });
+            return true;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/editor/components/inline-image-menu/use-inline-image-state.tsx
+var import_react25 = require("@tiptap/react");
+var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"), 1);
+var useInlineImageState = (editor) => {
+  const states = (0, import_react25.useEditorState)({
+    editor,
+    selector: ({ editor: editor2 }) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        height: ((_a = editor2.getAttributes("inlineImage")) == null ? void 0 : _a.height) || DEFAULT_INLINE_IMAGE_HEIGHT,
+        width: ((_b = editor2.getAttributes("inlineImage")) == null ? void 0 : _b.width) || DEFAULT_INLINE_IMAGE_WIDTH,
+        src: ((_c = editor2.getAttributes("inlineImage")) == null ? void 0 : _c.src) || "",
+        isSrcVariable: (_e = (_d = editor2.getAttributes("inlineImage")) == null ? void 0 : _d.isSrcVariable) != null ? _e : false,
+        imageExternalLink: ((_f = editor2.getAttributes("inlineImage")) == null ? void 0 : _f.externalLink) || "",
+        isExternalLinkVariable: (_h = (_g = editor2.getAttributes("inlineImage")) == null ? void 0 : _g.isExternalLinkVariable) != null ? _h : false
+      };
+    },
+    equalityFn: import_fast_deep_equal3.default
+  });
+  return states;
+};
+
+// src/editor/components/ui/link-input-popover.tsx
+var import_lucide_react22 = require("lucide-react");
+var import_react31 = require("react");
+
+// src/editor/provider.tsx
+var import_react26 = require("react");
+
+// src/editor/extensions/slash-command/default-slash-commands.tsx
+var import_lucide_react19 = require("lucide-react");
+
+// src/blocks/button.tsx
+var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var button = {
+  title: "Button",
+  description: "Add a call to action button to email.",
+  searchTerms: ["link", "button", "cta"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.MousePointer, { className: "mly:h-4 mly:w-4" }),
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).setButton().run();
+  }
+};
+var linkCard = {
+  title: "Link Card",
+  description: "Add a link card to email.",
+  searchTerms: ["link", "button", "image"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).setLinkCard().run();
+  },
+  render: (editor) => {
+    return editor.extensionManager.extensions.findIndex(
+      (ext) => ext.name === "linkCard"
+    ) === -1 ? null : true;
+  }
+};
+
+// src/blocks/code.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var htmlCodeBlock = {
+  title: "Custom HTML",
+  description: "Insert a custom HTML block",
+  searchTerms: ["html", "code", "custom"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react13.CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
+  }
+};
+
+// src/blocks/image.tsx
+var import_state5 = require("@tiptap/pm/state");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var image = {
+  title: "Image",
+  description: "Full width image",
+  searchTerms: ["image"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
+  }
+};
+var logo = {
+  title: "Logo",
+  description: "Add your brand logo",
+  searchTerms: ["image", "logo"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
+  }
+};
+var inlineImage = {
+  title: "Inline Image",
+  description: "Inline image",
+  searchTerms: ["image", "inline"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).setInlineImage({
+      src: "https://maily.to/brand/logo.png"
+    }).command((props) => {
+      const { tr, state, view, editor: editor2 } = props;
+      const { from } = range;
+      const node = state.doc.nodeAt(from);
+      if (!node) {
+        return false;
+      }
+      const selection = import_state5.TextSelection.create(
+        tr.doc,
+        from,
+        from + node.nodeSize
+      );
+      tr.setSelection(selection);
+      return true;
+    }).run();
+  }
+};
+
+// src/blocks/layout.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var columns = {
   title: "Columns",
   description: "Add columns to email.",
   searchTerms: ["layout", "columns"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
   }
@@ -6382,7 +6742,7 @@ var section = {
   title: "Section",
   description: "Add a section to email.",
   searchTerms: ["layout", "section"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSection().run();
   }
@@ -6391,7 +6751,7 @@ var repeat = {
   title: "Repeat",
   description: "Loop over an array of items.",
   searchTerms: ["repeat", "for", "loop"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Repeat2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.Repeat2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setRepeat().run();
   }
@@ -6400,7 +6760,7 @@ var spacer = {
   title: "Spacer",
   description: "Add space between blocks.",
   searchTerms: ["space", "gap", "divider"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.MoveVertical, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.MoveVertical, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
   }
@@ -6409,20 +6769,32 @@ var divider = {
   title: "Divider",
   description: "Add a horizontal divider.",
   searchTerms: ["divider", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Minus, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.Minus, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    const { from } = editor.state.selection;
+    const nearbyPositions = [from, from - 1, from - 2, from + 1];
+    const dividerPos = nearbyPositions.find((pos) => {
+      var _a;
+      if (pos < 0) {
+        return false;
+      }
+      return ((_a = editor.state.doc.nodeAt(pos)) == null ? void 0 : _a.type.name) === "horizontalRule";
+    });
+    if (dividerPos != null) {
+      editor.chain().focus().setNodeSelection(dividerPos).run();
+    }
   }
 };
 
 // src/blocks/list.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var bulletList = {
   title: "Bullet List",
   description: "Create a simple bullet list.",
   searchTerms: ["unordered", "point"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.List, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react16.List, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
@@ -6431,20 +6803,20 @@ var orderedList = {
   title: "Numbered List",
   description: "Create a list with numbering.",
   searchTerms: ["ordered"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.ListOrdered, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react16.ListOrdered, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
 };
 
 // src/blocks/typography.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var text = {
   title: "Text",
   description: "Just start typing with plain text.",
   searchTerms: ["p", "paragraph"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Text, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.Text, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
   }
@@ -6453,7 +6825,7 @@ var heading1 = {
   title: "Heading 1",
   description: "Big heading.",
   searchTerms: ["h1", "title", "big", "large"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading1, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.Heading1, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   }
@@ -6462,7 +6834,7 @@ var heading2 = {
   title: "Heading 2",
   description: "Medium heading.",
   searchTerms: ["h2", "subtitle", "medium"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.Heading2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
   }
@@ -6471,7 +6843,7 @@ var heading3 = {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading3, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.Heading3, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
   }
@@ -6480,7 +6852,7 @@ var hardBreak = {
   title: "Hard Break",
   description: "Add a break between lines.",
   searchTerms: ["break", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.DivideIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.DivideIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHardBreak().run();
   }
@@ -6489,7 +6861,7 @@ var blockquote = {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.TextQuote, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.TextQuote, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
@@ -6498,7 +6870,7 @@ var footer = {
   title: "Footer",
   description: "Add a footer text to email.",
   searchTerms: ["footer", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setFooter().run();
   }
@@ -6507,16 +6879,16 @@ var clearLine = {
   title: "Clear Line",
   description: "Clear the current line.",
   searchTerms: ["clear", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.EraserIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.EraserIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().selectParentNode().deleteSelection().run();
   }
 };
 
 // src/editor/components/icons/logo-with-cover-image.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function LogoWithCoverImageIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6526,7 +6898,7 @@ function LogoWithCoverImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6535,7 +6907,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6544,7 +6916,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6553,8 +6925,8 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "rect",
           {
             x: "3",
@@ -6567,7 +6939,7 @@ function LogoWithCoverImageIcon(props) {
             mask: "url(#path-4-inside-1_1046_19527)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "rect",
           {
             x: "6.25",
@@ -6579,16 +6951,16 @@ function LogoWithCoverImageIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
       ]
     })
   );
 }
 
 // src/editor/components/icons/logo-with-text-horizon.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function LogoWithTextHorizonIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6598,7 +6970,7 @@ function LogoWithTextHorizonIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6607,7 +6979,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "rect",
           {
             x: "6.25",
@@ -6619,8 +6991,8 @@ function LogoWithTextHorizonIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6629,7 +7001,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6644,9 +7016,9 @@ function LogoWithTextHorizonIcon(props) {
 }
 
 // src/editor/components/icons/logo-with-text-vertical.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function LogoWithTextVerticalIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6656,7 +7028,7 @@ function LogoWithTextVerticalIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6665,7 +7037,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "rect",
           {
             x: "4.25",
@@ -6677,8 +7049,8 @@ function LogoWithTextVerticalIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6687,7 +7059,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6702,12 +7074,12 @@ function LogoWithTextVerticalIcon(props) {
 }
 
 // src/blocks/headers.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var headerLogoWithTextHorizontal = {
   title: "Logo with Text (Horizontal)",
   description: "Logo and a text horizontally",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent({
       type: "columns",
@@ -6771,7 +7143,7 @@ var headerLogoWithTextVertical = {
   title: "Logo with Text (Vertical)",
   description: "Logo and a text vertically",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent([
       {
@@ -6802,7 +7174,7 @@ var headerLogoWithCoverImage = {
   title: "Logo with Cover Image",
   description: "Logo and a cover image",
   searchTerms: ["logo", "cover", "image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
       year: "numeric",
@@ -6890,13 +7262,13 @@ var headerLogoWithCoverImage = {
 };
 
 // src/blocks/footers.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var footerCopyrightText = {
   title: "Footer Copyright",
   description: "Copyright text for the footer.",
   searchTerms: ["footer", "copyright"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     editor.chain().focus().deleteRange(range).insertContent({
@@ -6916,7 +7288,7 @@ var footerCommunityFeedbackCta = {
   title: "Footer Community Feedback CTA",
   description: "Community feedback CTA for the footer.",
   searchTerms: ["footer", "community", "feedback", "cta"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       {
@@ -6959,7 +7331,7 @@ var footerCompanySignature = {
   title: "Footer Company Signature",
   description: "Company signature for the footer.",
   searchTerms: ["footer", "company", "signature"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       { type: "horizontalRule" },
@@ -7113,7 +7485,7 @@ var footerCompanySignature = {
 };
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_SLASH_COMMANDS = [
   {
     title: "Blocks",
@@ -7148,7 +7520,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Headers",
         description: "Add pre-designed headers block",
         searchTerms: ["header", "headers"],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.Heading1, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.Heading1, { className: "mly:h-4 mly:w-4" }),
         preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
         commands: [
           headerLogoWithTextVertical,
@@ -7161,7 +7533,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Footers",
         description: "Add pre-designed footers block",
         searchTerms: ["footers"],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
         commands: [
           footerCopyrightText,
           footerCommunityFeedbackCta,
@@ -7174,18 +7546,18 @@ var DEFAULT_SLASH_COMMANDS = [
 ];
 
 // src/editor/provider.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
-var MailyContext = (0, import_react21.createContext)({
+var MailyContext = (0, import_react26.createContext)({
   placeholderUrl: DEFAULT_PLACEHOLDER_URL,
   blocks: DEFAULT_SLASH_COMMANDS
 });
 function MailyProvider(props) {
   const _a = props, { children } = _a, defaultValues = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MailyContext.Provider, { value: defaultValues, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MailyContext.Provider, { value: defaultValues, children });
 }
 function useMailyContext() {
-  const values = (0, import_react21.useContext)(MailyContext);
+  const values = (0, import_react26.useContext)(MailyContext);
   if (!values) {
     throw new Error("Missing MailyContext.Provider in the component tree");
   }
@@ -7193,23 +7565,23 @@ function useMailyContext() {
 }
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_react27 = require("react");
+var import_react32 = require("react");
 
 // src/editor/nodes/variable/variable.ts
-var import_core7 = require("@tiptap/core");
-var import_state5 = require("@tiptap/pm/state");
-var import_react25 = require("@tiptap/react");
+var import_core8 = require("@tiptap/core");
+var import_state6 = require("@tiptap/pm/state");
+var import_react30 = require("@tiptap/react");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
 
 // src/editor/nodes/variable/variable-suggestions-popover.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_react22 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var VariableSuggestionsPopover = (0, import_react22.forwardRef)((props, ref) => {
+var import_lucide_react20 = require("lucide-react");
+var import_react27 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var VariableSuggestionsPopover = (0, import_react27.forwardRef)((props, ref) => {
   const { items, onSelectItem } = props;
-  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
-  const scrollContainerRef = (0, import_react22.useRef)(null);
-  const itemRefs = (0, import_react22.useRef)([]);
+  const [selectedIndex, setSelectedIndex] = (0, import_react27.useState)(0);
+  const scrollContainerRef = (0, import_react27.useRef)(null);
+  const itemRefs = (0, import_react27.useRef)([]);
   const scrollSelectedIntoView = (index) => {
     const container = scrollContainerRef.current;
     const selectedItem = itemRefs.current[index];
@@ -7225,17 +7597,17 @@ var VariableSuggestionsPopover = (0, import_react22.forwardRef)((props, ref) =>
       container.scrollTop += itemRect.top - containerRect.top - padding;
     }
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setSelectedIndex(0);
     if (scrollContainerRef.current) {
       scrollContainerRef.current.scrollTop = 0;
     }
     itemRefs.current = items.map(() => null);
   }, [items]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     scrollSelectedIntoView(selectedIndex);
   }, [selectedIndex]);
-  (0, import_react22.useImperativeHandle)(ref, () => ({
+  (0, import_react27.useImperativeHandle)(ref, () => ({
     moveUp: () => {
       setSelectedIndex((selectedIndex + items.length - 1) % items.length);
     },
@@ -7250,17 +7622,17 @@ var VariableSuggestionsPopover = (0, import_react22.forwardRef)((props, ref) =>
       onSelectItem(item);
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:z-50 mly:w-64 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-b mly:border-gray-200 mly:bg-soft-gray/40 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly:z-50 mly:w-64 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-b mly:border-gray-200 mly:bg-soft-gray/40 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         ref: scrollContainerRef,
         className: "mly:max-h-52 mly:overflow-y-auto mly:scrollbar-thin mly:scrollbar-track-transparent mly:scrollbar-thumb-gray-200",
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mly:flex mly:w-fit mly:min-w-full mly:flex-col mly:gap-0.5 mly:p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly:flex mly:w-fit mly:min-w-full mly:flex-col mly:gap-0.5 mly:p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "button",
           {
             ref: (el) => itemRefs.current[index] = el,
@@ -7270,27 +7642,27 @@ var VariableSuggestionsPopover = (0, import_react22.forwardRef)((props, ref) =>
               index === selectedIndex ? "mly:bg-soft-gray" : "mly:bg-white"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
               (item == null ? void 0 : item.label) || item.name
             ]
           },
           index
-        )) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mly:flex mly:h-7 mly:w-full mly:items-center mly:gap-2 mly:rounded-md mly:px-2 mly:py-1 mly:text-left mly:font-mono mly:text-[13px] mly:text-gray-900 mly:hover:bg-soft-gray", children: "No result" }) })
+        )) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly:flex mly:h-7 mly:w-full mly:items-center mly:gap-2 mly:rounded-md mly:px-2 mly:py-1 mly:text-left mly:font-mono mly:text-[13px] mly:text-gray-900 mly:hover:bg-soft-gray", children: "No result" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-t mly:border-gray-200 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-t mly:border-gray-200 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] })
   ] });
 });
 function VariableIcon(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: cn(
@@ -7303,10 +7675,10 @@ function VariableIcon(props) {
 }
 
 // src/editor/nodes/variable/variable-view.tsx
-var import_react23 = require("@tiptap/react");
-var import_lucide_react20 = require("lucide-react");
-var import_react24 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react28 = require("@tiptap/react");
+var import_lucide_react21 = require("lucide-react");
+var import_react29 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function VariableView(props) {
   const { node, updateAttributes: updateAttributes2, editor } = props;
   const {
@@ -7316,24 +7688,24 @@ function VariableView(props) {
     hideDefaultValue = false,
     label
   } = node.attrs;
-  const renderVariable = (0, import_react24.useMemo)(() => {
+  const renderVariable = (0, import_react29.useMemo)(() => {
     var _a, _b;
     const variableRender = (_b = (_a = getNodeOptions(editor, "variable")) == null ? void 0 : _a.renderVariable) != null ? _b : DEFAULT_RENDER_VARIABLE_FUNCTION;
     return variableRender;
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react23.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react28.NodeViewWrapper,
     {
       className: "react-component mly:inline-block mly:leading-none",
       draggable: "false",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         Popover,
         {
           onOpenChange: (open) => {
             editor.storage.variable.popover = open;
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { children: renderVariable({
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PopoverTrigger, { children: renderVariable({
               variable: {
                 name: id,
                 required,
@@ -7344,7 +7716,7 @@ function VariableView(props) {
               editor,
               from: "content-variable"
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               PopoverContent,
               {
                 align: "start",
@@ -7353,10 +7725,10 @@ function VariableView(props) {
                 sideOffset: 8,
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 onCloseAutoFocus: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "mly:relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "mly:relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: id != null ? id : "",
@@ -7370,11 +7742,11 @@ function VariableView(props) {
                       })
                     )
                   ] }),
-                  !hideDefaultValue && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, { className: "mly:mx-1.5" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "mly:relative", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  !hideDefaultValue && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, { className: "mly:mx-1.5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "mly:relative", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                         "input",
                         __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                           value: fallback != null ? fallback : "",
@@ -7387,7 +7759,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 mly:focus:bg-soft-gray mly:focus:outline-none"
                         })
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
                     ] })
                   ] })
                 ] }) })
@@ -7404,13 +7776,13 @@ var DefaultRenderVariable = (props) => {
   const { name, required, valid, label } = variable;
   const variableLabel = label || name;
   if (from === "button-variable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:inline-grid mly:max-w-xs mly:grid-cols-[12px_1fr] mly:items-center mly:gap-1.5 mly:rounded-md mly:border mly:border-(--button-var-border-color) mly:px-2 mly:py-px mly:font-mono mly:text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:inline-grid mly:max-w-xs mly:grid-cols-[12px_1fr] mly:items-center mly:gap-1.5 mly:rounded-md mly:border mly:border-(--button-var-border-color) mly:px-2 mly:py-px mly:font-mono mly:text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
     ] });
   }
   if (from === "bubble-variable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         className: cn(
@@ -7418,21 +7790,21 @@ var DefaultRenderVariable = (props) => {
           !valid && "mly:border-rose-400 mly:bg-rose-50 mly:text-rose-600 mly:hover:bg-rose-100"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "span",
     {
       tabIndex: -1,
       className: "mly:inline-flex mly:items-center mly:gap-(--variable-icon-gap) mly:rounded-full mly:border mly:border-gray-200 mly:px-1.5 mly:py-0.5 mly:leading-none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Braces, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
         variableLabel,
-        required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
+        required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
       ]
     }
   );
@@ -7443,8 +7815,8 @@ var DEFAULT_VARIABLE_TRIGGER_CHAR = "@";
 var DEFAULT_VARIABLES = [];
 var DEFAULT_RENDER_VARIABLE_FUNCTION = DefaultRenderVariable;
 var DEFAULT_VARIABLE_SUGGESTION_POPOVER = VariableSuggestionsPopover;
-var VariablePluginKey = new import_state5.PluginKey("variable");
-var VariableExtension = import_core7.Node.create({
+var VariablePluginKey = new import_state6.PluginKey("variable");
+var VariableExtension = import_core8.Node.create({
   name: "variable",
   group: "inline",
   inline: true,
@@ -7560,7 +7932,7 @@ var VariableExtension = import_core7.Node.create({
   renderHTML({ node, HTMLAttributes: HTMLAttributes2 }) {
     return [
       "div",
-      (0, import_core7.mergeAttributes)({ "data-type": this.name }, HTMLAttributes2),
+      (0, import_core8.mergeAttributes)({ "data-type": this.name }, HTMLAttributes2),
       this.options.renderLabel({
         options: this.options,
         node
@@ -7605,7 +7977,7 @@ var VariableExtension = import_core7.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react25.ReactNodeViewRenderer)(VariableView, {
+    return (0, import_react30.ReactNodeViewRenderer)(VariableView, {
       className: "mly:relative mly:inline-block",
       as: "div"
     });
@@ -7613,26 +7985,26 @@ var VariableExtension = import_core7.Node.create({
 });
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function LinkInputPopover(props) {
   var _a, _b;
   const {
     defaultValue = "",
     onValueChange,
     tooltip,
-    icon: Icon = import_lucide_react21.Link,
+    icon: Icon = import_lucide_react22.Link,
     editor,
     isVariable
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const [isEditing, setIsEditing] = (0, import_react26.useState)(!isVariable);
-  const linkInputRef = (0, import_react26.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
+  const [isEditing, setIsEditing] = (0, import_react31.useState)(!isVariable);
+  const linkInputRef = (0, import_react31.useRef)(null);
   const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
   const options = useVariableOptions(editor);
   const renderVariable = options == null ? void 0 : options.renderVariable;
   const variables = options == null ? void 0 : options.variables;
   const variableTriggerCharacter = (_b = (_a = options == null ? void 0 : options.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
-  const autoCompleteOptions = (0, import_react27.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react32.useMemo)(() => {
     const withoutTrigger = defaultValue.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -7643,18 +8015,18 @@ function LinkInputPopover(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, variableTriggerCharacter, defaultValue, editor]);
-  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
-      className: "mly:h-7! mly:w-7!",
+      className: "menu-option mly:h-7! mly:w-7!",
       "data-state": !!defaultValue,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     Popover,
     {
       open: isOpen,
@@ -7668,9 +8040,9 @@ function LinkInputPopover(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             TooltipContent,
             {
               sideOffset: 8,
@@ -7679,7 +8051,7 @@ function LinkInputPopover(props) {
             }
           )
         ] }) : popoverButton,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           PopoverContent,
           {
             align: "end",
@@ -7687,7 +8059,7 @@ function LinkInputPopover(props) {
             className: "mly:w-max mly:rounded-none mly:border-none mly:bg-transparent mly:p-0! mly:shadow-none",
             sideOffset: 8,
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "form",
               {
                 onSubmit: (e) => {
@@ -7699,445 +8071,68 @@ function LinkInputPopover(props) {
                   onValueChange == null ? void 0 : onValueChange(input.value);
                   setIsOpen(false);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
-                  !isEditing && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:flex mly:h-8 mly:items-center mly:rounded-lg mly:border mly:border-gray-300 mly:bg-white mly:px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
+                  !isEditing && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mly:flex mly:h-8 mly:items-center mly:rounded-lg mly:border mly:border-gray-300 mly:bg-white mly:px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                     "button",
                     {
                       onClick: () => {
-                        setIsEditing(true);
-                        setTimeout(() => {
-                          var _a2;
-                          (_a2 = linkInputRef.current) == null ? void 0 : _a2.focus();
-                        }, 0);
-                      },
-                      children: renderVariable({
-                        variable: {
-                          name: defaultValue,
-                          valid: true
-                        },
-                        fallback: "",
-                        from: "bubble-variable",
-                        editor
-                      })
-                    }
-                  ) }),
-                  isEditing && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.LinkIcon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                      InputAutocomplete,
-                      {
-                        editor,
-                        value: defaultValue,
-                        onValueChange: (value) => {
-                          onValueChange == null ? void 0 : onValueChange(value);
-                        },
-                        autoCompleteOptions,
-                        ref: linkInputRef,
-                        placeholder: placeholderUrl,
-                        className: "-mly:ms-px mly-link-input-padding mly:block mly:h-8 mly:w-56 mly:rounded-lg mly:border mly:border-gray-300 mly:text-sm mly:shadow-sm mly:outline-hidden mly:placeholder:text-gray-400",
-                        triggerChar: variableTriggerCharacter,
-                        onSelectOption: (value) => {
-                          var _a2;
-                          const isVariable2 = (_a2 = autoCompleteOptions.includes(value)) != null ? _a2 : false;
-                          if (isVariable2) {
-                            setIsEditing(false);
-                          }
-                          onValueChange == null ? void 0 : onValueChange(value, isVariable2);
-                          setIsOpen(false);
-                        }
-                      }
-                    )
-                  ] })
-                ] })
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/editor/components/image-menu/image-size.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-function ImageSize(props) {
-  const { value, onValueChange, dimension } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "mly:relative mly:flex mly:items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:left-2 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: dimension === "width" ? "W" : "H" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      "input",
-      __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
-        className: "hide-number-controls mly:h-auto mly:max-w-20 mly:appearance-none mly:border-0 mly:border-none mly:p-1 mly:px-[26px] mly:text-sm mly:uppercase mly:tabular-nums mly:outline-hidden mly:focus-visible:outline-hidden",
-        type: "number",
-        value,
-        onChange: (e) => onValueChange(e.target.value)
-      })
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: "PX" })
-  ] });
-}
-
-// src/editor/components/image-menu/use-image-state.tsx
-var import_react28 = require("@tiptap/react");
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
-var useImageState = (editor) => {
-  const states = (0, import_react28.useEditorState)({
-    editor,
-    selector: ({ editor: editor2 }) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-      return {
-        width: String(editor2.getAttributes("image").width),
-        height: String(editor2.getAttributes("image").height),
-        isImageActive: editor2.isActive("image"),
-        isLogoActive: editor2.isActive("logo"),
-        alignment: ((_a = editor2.getAttributes("image")) == null ? void 0 : _a.alignment) || ((_b = editor2.getAttributes("logo")) == null ? void 0 : _b.alignment),
-        borderRadius: (_c = editor2.getAttributes("image")) == null ? void 0 : _c.borderRadius,
-        logoSize: ((_d = editor2.getAttributes("logo")) == null ? void 0 : _d.size) || DEFAULT_LOGO_SIZE,
-        imageSrc: ((_e = editor2.getAttributes("image")) == null ? void 0 : _e.src) || ((_f = editor2.getAttributes("logo")) == null ? void 0 : _f.src) || "",
-        isSrcVariable: (_j = (_i = (_g = editor2.getAttributes("image")) == null ? void 0 : _g.isSrcVariable) != null ? _i : (_h = editor2.getAttributes("logo")) == null ? void 0 : _h.isSrcVariable) != null ? _j : false,
-        imageExternalLink: ((_k = editor2.getAttributes("image")) == null ? void 0 : _k.externalLink) || "",
-        isExternalLinkVariable: (_l = editor2.getAttributes("image")) == null ? void 0 : _l.isExternalLinkVariable,
-        lockAspectRatio: (_m = editor2.getAttributes("image")) == null ? void 0 : _m.lockAspectRatio,
-        aspectRatio: (_n = editor2.getAttributes("image")) == null ? void 0 : _n.aspectRatio,
-        currentShowIfKey: ((_o = editor2.getAttributes("image")) == null ? void 0 : _o.showIfKey) || ((_p = editor2.getAttributes("logo")) == null ? void 0 : _p.showIfKey) || ""
-      };
-    },
-    equalityFn: import_fast_deep_equal2.default
-  });
-  return states;
-};
-
-// src/editor/components/image-menu/image-bubble-menu.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-function ImageBubbleMenu(props) {
-  var _a, _b, _c, _d;
-  const { editor, appendTo } = props;
-  if (!editor) {
-    return null;
-  }
-  const state = useImageState(editor);
-  const bubbleMenuProps = __spreadProps(__spreadValues(__spreadValues({}, props), appendTo ? { appendTo: appendTo.current } : {}), {
-    shouldShow: ({ editor: editor2 }) => {
-      if (!editor2.isEditable) {
-        return false;
-      }
-      return editor2.isActive("logo") || editor2.isActive("image");
-    },
-    tippyOptions: {
-      popperOptions: {
-        modifiers: [{ name: "flip", enabled: false }]
-      },
-      plugins: [import_tippy3.sticky],
-      sticky: "popper",
-      maxWidth: "100%"
-    }
-  });
-  const { lockAspectRatio } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react29.BubbleMenu,
-    __spreadProps(__spreadValues({}, bubbleMenuProps), {
-      className: "mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(TooltipProvider, { children: [
-        state.isLogoActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            Select,
-            {
-              label: "Size",
-              tooltip: "Size",
-              value: state.logoSize,
-              options: allowedLogoSize.map((size) => ({
-                value: size,
-                label: size
-              })),
-              onValueChange: (value) => {
-                editor == null ? void 0 : editor.chain().focus().setLogoAttributes({ size: value }).run();
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {})
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            AlignmentSwitch,
-            {
-              alignment: state.alignment,
-              onAlignmentChange: (alignment) => {
-                const isCurrentNodeImage = state.isImageActive;
-                if (!isCurrentNodeImage) {
-                  editor == null ? void 0 : editor.chain().focus().setLogoAttributes({ alignment }).run();
-                } else {
-                  editor == null ? void 0 : editor.chain().focus().updateAttributes("image", { alignment }).run();
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            LinkInputPopover,
-            {
-              defaultValue: (_a = state == null ? void 0 : state.imageSrc) != null ? _a : "",
-              onValueChange: (value, isVariable) => {
-                if (state.isLogoActive) {
-                  editor == null ? void 0 : editor.chain().setLogoAttributes({
-                    src: value,
-                    isSrcVariable: isVariable != null ? isVariable : false
-                  }).run();
-                } else {
-                  editor == null ? void 0 : editor.chain().updateAttributes("image", {
-                    src: value,
-                    isSrcVariable: isVariable != null ? isVariable : false
-                  }).run();
-                }
-              },
-              tooltip: "Source URL",
-              icon: import_lucide_react22.ImageDown,
-              editor,
-              isVariable: state.isSrcVariable
-            }
-          ),
-          state.isImageActive && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            LinkInputPopover,
-            {
-              defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
-              onValueChange: (value, isVariable) => {
-                editor == null ? void 0 : editor.chain().updateAttributes("image", {
-                  externalLink: value,
-                  isExternalLinkVariable: isVariable != null ? isVariable : false
-                }).run();
-              },
-              tooltip: "External URL",
-              editor,
-              isVariable: state.isExternalLinkVariable
-            }
-          )
-        ] }),
-        state.isImageActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            Select,
-            {
-              label: "Border Radius",
-              value: state == null ? void 0 : state.borderRadius,
-              options: borderRadius.map((value) => ({
-                value: String(value.value),
-                label: value.name
-              })),
-              onValueChange: (value) => {
-                editor == null ? void 0 : editor.chain().updateAttributes("image", {
-                  borderRadius: Number(value)
-                }).run();
-              },
-              tooltip: "Border Radius",
-              className: "mly:capitalize"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              ImageSize,
-              {
-                dimension: "width",
-                value: (_c = state == null ? void 0 : state.width) != null ? _c : "",
-                onValueChange: (value) => {
-                  const width = Math.min(Number(value) || 0, IMAGE_MAX_WIDTH);
-                  const currentHeight = Number(state.height) || 0;
-                  const currentWidth = Number(state.width) || 0;
-                  const currentAspectRatio = state.aspectRatio || currentWidth / currentHeight || 1;
-                  editor == null ? void 0 : editor.chain().updateAttributes("image", __spreadValues({
-                    width: String(width)
-                  }, lockAspectRatio && value ? {
-                    height: String(
-                      getNewHeight(width, currentAspectRatio)
-                    )
-                  } : {})).run();
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              ImageSize,
-              {
-                dimension: "height",
-                value: (_d = state == null ? void 0 : state.height) != null ? _d : "",
-                onValueChange: (value) => {
-                  const height = Number(value) || 0;
-                  const currentHeight = Number(state.height) || 0;
-                  const currentWidth = Number(state.width) || 0;
-                  const currentAspectRatio = state.aspectRatio || currentWidth / currentHeight || 1;
-                  editor == null ? void 0 : editor.chain().updateAttributes("image", __spreadValues({
-                    height: String(height)
-                  }, lockAspectRatio && value ? {
-                    width: String(
-                      getNewWidth(height, currentAspectRatio)
-                    )
-                  } : {})).run();
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              BubbleMenuButton,
-              {
-                isActive: () => lockAspectRatio,
-                command: () => {
-                  const width = Number(state.width) || 0;
-                  const height = Number(state.height) || 0;
-                  const aspectRatio = width / height;
-                  editor == null ? void 0 : editor.chain().updateAttributes("image", {
-                    lockAspectRatio: !lockAspectRatio,
-                    aspectRatio
-                  }).run();
-                },
-                icon: lockAspectRatio ? import_lucide_react22.LockIcon : import_lucide_react22.LockOpenIcon,
-                tooltip: "Lock Aspect Ratio"
-              }
-            )
-          ] })
-        ] })
-      ] })
-    })
-  );
-}
-
-// src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
-var import_react31 = require("@tiptap/react");
-var import_tippy4 = require("tippy.js");
-
-// src/editor/nodes/inline-image/inline-image.tsx
-var import_core8 = require("@tiptap/core");
-var import_state6 = require("@tiptap/pm/state");
-var DEFAULT_INLINE_IMAGE_HEIGHT = 20;
-var DEFAULT_INLINE_IMAGE_WIDTH = 20;
-var InlineImageExtension = import_core8.Node.create({
-  name: "inlineImage",
-  inline: true,
-  group: "inline",
-  selectable: false,
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
-  },
-  addAttributes() {
-    return {
-      height: {
-        default: DEFAULT_INLINE_IMAGE_HEIGHT
-      },
-      width: {
-        default: DEFAULT_INLINE_IMAGE_WIDTH
-      },
-      src: {
-        default: null
-      },
-      isSrcVariable: {
-        default: false,
-        renderHTML(attributes) {
-          if (!attributes.isSrcVariable) {
-            return {};
-          }
-          return {
-            "data-is-src-variable": "true"
-          };
-        }
-      },
-      alt: {
-        default: null
-      },
-      title: {
-        default: null
-      },
-      externalLink: {
-        default: null,
-        renderHTML(attributes) {
-          if (!attributes.externalLink) {
-            return {};
-          }
-          return {
-            "data-external-link": attributes.externalLink
-          };
-        }
-      },
-      isExternalLinkVariable: {
-        default: false,
-        renderHTML(attributes) {
-          if (!attributes.isExternalLinkVariable) {
-            return {};
-          }
-          return {
-            "data-is-external-link-variable": "true"
-          };
-        }
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: `img[data-type="${this.name}"]`
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes: HTMLAttributes2 }) {
-    const attrs = (0, import_core8.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes2, {
-      "data-type": this.name,
-      class: "mly:relative",
-      style: `display: inline; --mly-inline-image-height: ${HTMLAttributes2.height}px; --mly-inline-image-width: ${HTMLAttributes2.width}px; margin:0; vertical-align: middle;`,
-      draggable: "false",
-      loading: "lazy"
-    });
-    return ["img", attrs];
-  },
-  addCommands() {
-    return {
-      setInlineImage: (options) => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: options
-        });
-      }
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      new import_state6.Plugin({
-        key: new import_state6.PluginKey("inlineImage"),
-        props: {
-          handleClickOn: (_, pos, node) => {
-            if (node.type !== this.type) {
-              return false;
-            }
-            const from = pos;
-            const to = pos + node.nodeSize;
-            this.editor.commands.setTextSelection({ from, to });
-            return true;
+                        setIsEditing(true);
+                        setTimeout(() => {
+                          var _a2;
+                          (_a2 = linkInputRef.current) == null ? void 0 : _a2.focus();
+                        }, 0);
+                      },
+                      children: renderVariable({
+                        variable: {
+                          name: defaultValue,
+                          valid: true
+                        },
+                        fallback: "",
+                        from: "bubble-variable",
+                        editor
+                      })
+                    }
+                  ) }),
+                  isEditing && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.LinkIcon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      InputAutocomplete,
+                      {
+                        editor,
+                        value: defaultValue,
+                        onValueChange: (value) => {
+                          onValueChange == null ? void 0 : onValueChange(value);
+                        },
+                        autoCompleteOptions,
+                        ref: linkInputRef,
+                        placeholder: placeholderUrl,
+                        className: "-mly:ms-px mly-link-input-padding mly:block mly:h-8 mly:w-56 mly:rounded-lg mly:border mly:border-gray-300 mly:text-sm mly:shadow-sm mly:outline-hidden mly:placeholder:text-gray-400",
+                        triggerChar: variableTriggerCharacter,
+                        onSelectOption: (value) => {
+                          var _a2;
+                          const isVariable2 = (_a2 = autoCompleteOptions.includes(value)) != null ? _a2 : false;
+                          if (isVariable2) {
+                            setIsEditing(false);
+                          }
+                          onValueChange == null ? void 0 : onValueChange(value, isVariable2);
+                          setIsOpen(false);
+                        }
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            )
           }
-        }
-      })
-    ];
-  }
-});
-
-// src/editor/components/inline-image-menu/use-inline-image-state.tsx
-var import_react30 = require("@tiptap/react");
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"), 1);
-var useInlineImageState = (editor) => {
-  const states = (0, import_react30.useEditorState)({
-    editor,
-    selector: ({ editor: editor2 }) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      return {
-        height: ((_a = editor2.getAttributes("inlineImage")) == null ? void 0 : _a.height) || DEFAULT_INLINE_IMAGE_HEIGHT,
-        width: ((_b = editor2.getAttributes("inlineImage")) == null ? void 0 : _b.width) || DEFAULT_INLINE_IMAGE_WIDTH,
-        src: ((_c = editor2.getAttributes("inlineImage")) == null ? void 0 : _c.src) || "",
-        isSrcVariable: (_e = (_d = editor2.getAttributes("inlineImage")) == null ? void 0 : _d.isSrcVariable) != null ? _e : false,
-        imageExternalLink: ((_f = editor2.getAttributes("inlineImage")) == null ? void 0 : _f.externalLink) || "",
-        isExternalLinkVariable: (_h = (_g = editor2.getAttributes("inlineImage")) == null ? void 0 : _g.isExternalLinkVariable) != null ? _h : false
-      };
-    },
-    equalityFn: import_fast_deep_equal3.default
-  });
-  return states;
-};
+        )
+      ]
+    }
+  );
+}
 
 // src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
 var import_lucide_react23 = require("lucide-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function InlineImageBubbleMenu(props) {
   var _a, _b;
   const { editor, appendTo } = props;
@@ -8161,12 +8156,12 @@ function InlineImageBubbleMenu(props) {
       maxWidth: "100%"
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_react31.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react33.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           LinkInputPopover,
           {
             defaultValue: (_a = state == null ? void 0 : state.src) != null ? _a : "",
@@ -8182,7 +8177,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isSrcVariable
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           LinkInputPopover,
           {
             defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
@@ -8197,7 +8192,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isExternalLinkVariable
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           ImageSize,
           {
             dimension: "height",
@@ -8216,16 +8211,16 @@ function InlineImageBubbleMenu(props) {
 }
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-var import_react33 = require("@tiptap/react");
+var import_react35 = require("@tiptap/react");
 var import_lucide_react24 = require("lucide-react");
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_tippy5 = require("tippy.js");
 
 // src/editor/components/repeat-menu/use-repeat-state.ts
-var import_react32 = require("@tiptap/react");
+var import_react34 = require("@tiptap/react");
 var import_fast_deep_equal4 = __toESM(require("fast-deep-equal"), 1);
 var useRepeatState = (editor) => {
-  const states = (0, import_react32.useEditorState)({
+  const states = (0, import_react34.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b;
@@ -8241,14 +8236,14 @@ var useRepeatState = (editor) => {
 };
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function RepeatBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
     return null;
   }
   const state = useRepeatState(editor);
-  const getReferenceClientRect = (0, import_react34.useCallback)(() => {
+  const getReferenceClientRect = (0, import_react36.useCallback)(() => {
     const renderContainer = getRenderContainer(editor, "repeat");
     const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
     return rect;
@@ -8257,7 +8252,7 @@ function RepeatBubbleMenu(props) {
     shouldShow: ({ editor: editor2 }) => {
       var _a;
       const activeForNode = getClosestNodeByName(editor2, "repeat");
-      const sectionNodeChildren = activeForNode ? (_a = (0, import_react33.findChildren)(activeForNode == null ? void 0 : activeForNode.node, (node) => {
+      const sectionNodeChildren = activeForNode ? (_a = (0, import_react35.findChildren)(activeForNode == null ? void 0 : activeForNode.node, (node) => {
         return node.type.name === "section";
       })) == null ? void 0 : _a[0] : null;
       const hasActiveSectionNodeChildren = sectionNodeChildren && editor2.isActive("section");
@@ -8282,10 +8277,10 @@ function RepeatBubbleMenu(props) {
   const opts = useVariableOptions(editor);
   const variables = opts == null ? void 0 : opts.variables;
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const inputRef = (0, import_react34.useRef)(null);
-  const [isUpdatingKey, setIsUpdatingKey] = (0, import_react34.useState)(false);
+  const inputRef = (0, import_react36.useRef)(null);
+  const [isUpdatingKey, setIsUpdatingKey] = (0, import_react36.useState)(false);
   const eachKey = (state == null ? void 0 : state.each) || "";
-  const autoCompleteOptions = (0, import_react34.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react36.useMemo)(() => {
     return processVariables(variables, {
       query: eachKey || "",
       editor,
@@ -8293,21 +8288,21 @@ function RepeatBubbleMenu(props) {
     }).map((variable) => variable.name);
   }, [variables, eachKey, editor]);
   const isValidEachKey = eachKey;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react33.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_react35.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TooltipProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
           "Repeat",
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_lucide_react24.InfoIcon,
               {
                 className: cn("mly:size-3 mly:stroke-[2.5] mly:text-gray-500")
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               TooltipContent,
               {
                 sideOffset: 14,
@@ -8318,7 +8313,7 @@ function RepeatBubbleMenu(props) {
             )
           ] })
         ] }),
-        !isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        !isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             onClick: () => {
@@ -8339,7 +8334,7 @@ function RepeatBubbleMenu(props) {
             })
           }
         ),
-        isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "form",
           {
             onSubmit: (e) => {
@@ -8351,7 +8346,7 @@ function RepeatBubbleMenu(props) {
                 setIsUpdatingKey(false);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               InputAutocomplete,
               {
                 editor,
@@ -8377,8 +8372,8 @@ function RepeatBubbleMenu(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           ShowPopover,
           {
             showIfKey: state.currentShowIfKey,
@@ -8396,16 +8391,16 @@ function RepeatBubbleMenu(props) {
 }
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-var import_react36 = require("@tiptap/react");
+var import_react38 = require("@tiptap/react");
 var import_lucide_react25 = require("lucide-react");
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_tippy6 = require("tippy.js");
 
 // src/editor/components/icons/border-color.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function BorderColor(props) {
   const _a = props, { topBarClassName } = _a, rest = __objRest(_a, ["topBarClassName"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: 11,
@@ -8415,8 +8410,8 @@ function BorderColor(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "path",
           {
             d: "M0.666504 9V6.33333C0.666504 3.38781 3.05432 1 5.99984 1H10.6665",
@@ -8430,9 +8425,9 @@ function BorderColor(props) {
 }
 
 // src/editor/components/icons/margin-icon.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function MarginIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       width: 12,
@@ -8441,7 +8436,7 @@ function MarginIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "path",
         {
           d: "M10.5 10.499V1.49902M1.5 10.499V1.49902M4.5 5.99902C4.5 5.53308 4.5 5.30011 4.57612 5.11634C4.67761 4.87131 4.87229 4.67664 5.11732 4.57514C5.30109 4.49902 5.53406 4.49902 6 4.49902C6.46594 4.49902 6.69891 4.49902 6.88268 4.57514C7.12771 4.67664 7.32239 4.87131 7.42388 5.11634C7.5 5.30011 7.5 5.53308 7.5 5.99902C7.5 6.46496 7.5 6.69794 7.42388 6.88171C7.32239 7.12673 7.12771 7.32141 6.88268 7.4229C6.69891 7.49902 6.46594 7.49902 6 7.49902C5.53406 7.49902 5.30109 7.49902 5.11732 7.4229C4.87229 7.32141 4.67761 7.12673 4.57612 6.88171C4.5 6.69794 4.5 6.46496 4.5 5.99902Z",
@@ -8455,9 +8450,9 @@ function MarginIcon(props) {
 }
 
 // src/editor/components/icons/padding-icon.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function PaddingIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       width: 10,
@@ -8466,7 +8461,7 @@ function PaddingIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "path",
         {
           d: "M9.50244 0.501526L9.10244 0.501526C8.54239 0.501526 8.26236 0.501526 8.04845 0.610519C7.86029 0.706392 7.70731 0.859373 7.61144 1.04754C7.50244 1.26145 7.50244 1.54147 7.50244 2.10153V7.90153C7.50244 8.46158 7.50244 8.74161 7.61144 8.95552C7.70731 9.14368 7.86029 9.29666 8.04845 9.39253C8.26236 9.50153 8.54239 9.50153 9.10244 9.50153H9.50244M0.502441 0.501527L0.902441 0.501527C1.46249 0.501527 1.74252 0.501527 1.95643 0.61052C2.14459 0.706393 2.29757 0.859374 2.39345 1.04754C2.50244 1.26145 2.50244 1.54147 2.50244 2.10153L2.50244 7.90153C2.50244 8.46158 2.50244 8.74161 2.39345 8.95552C2.29757 9.14368 2.14459 9.29666 1.95643 9.39253C1.74252 9.50153 1.46249 9.50153 0.902442 9.50153H0.502442M4.99994 7.99903V1.99903",
@@ -8481,7 +8476,7 @@ function PaddingIcon(props) {
 
 // src/editor/components/ui/color-picker.tsx
 var import_react_colorful = require("react-colorful");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ColorPicker(props) {
   const {
     color,
@@ -8499,14 +8494,14 @@ function ColorPicker(props) {
       onColorChange(color2);
     });
   };
-  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     BaseButton,
     {
       variant: "ghost",
-      className: "mly:h-7 mly:w-7 mly:shrink-0",
+      className: "menu-option mly:h-7 mly:w-7 mly:shrink-0",
       size: "sm",
       type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
           className: cn(
@@ -8520,7 +8515,7 @@ function ColorPicker(props) {
       )
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     Popover,
     {
       onOpenChange: (open) => {
@@ -8529,9 +8524,9 @@ function ColorPicker(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             TooltipContent,
             {
               sideOffset: 8,
@@ -8540,13 +8535,13 @@ function ColorPicker(props) {
             }
           )
         ] }) : popoverButton,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           PopoverContent,
           {
-            className: "mly:w-full mly:rounded-none mly:border-0 mly:bg-transparent! mly:p-0! mly:shadow-none mly:drop-shadow-md",
+            className: "menu-color-popover mly:w-full mly:rounded-none mly:border-0 mly:bg-transparent! mly:p-0! mly:shadow-none mly:drop-shadow-md",
             sideOffset: 8,
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "menu-color-panel mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 import_react_colorful.HexColorPicker,
                 {
                   color,
@@ -8554,20 +8549,20 @@ function ColorPicker(props) {
                   className: "mly:flex mly:w-full! mly:flex-col mly:gap-4"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 import_react_colorful.HexColorInput,
                 {
                   alpha: true,
                   color,
                   onChange: handleColorChange,
-                  className: "mly:mt-4 mly:w-full mly:min-w-0 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:px-2 mly:py-1.5 mly:text-sm mly:uppercase mly:focus-visible:border-gray-400 mly:focus-visible:outline-hidden",
+                  className: "menu-color-hex-input mly:mt-4 mly:w-full mly:min-w-0 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:px-2 mly:py-1.5 mly:text-sm mly:uppercase mly:focus-visible:border-gray-400 mly:focus-visible:outline-hidden",
                   prefixed: true
                 }
               ),
-              suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   BaseButton,
                   {
                     variant: "ghost",
@@ -8575,7 +8570,7 @@ function ColorPicker(props) {
                     className: "!mly:size-7 mly:shrink-0",
                     type: "button",
                     onClick: () => handleColorChange(suggestedColor),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "div",
                       {
                         className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded",
@@ -8597,10 +8592,10 @@ function ColorPicker(props) {
 }
 
 // src/editor/components/section-menu/use-section-state.tsx
-var import_react35 = require("@tiptap/react");
+var import_react37 = require("@tiptap/react");
 var import_fast_deep_equal5 = __toESM(require("fast-deep-equal"), 1);
 var useSectionState = (editor) => {
-  const states = (0, import_react35.useEditorState)({
+  const states = (0, import_react37.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -8628,13 +8623,13 @@ var useSectionState = (editor) => {
 };
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function SectionBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
     return null;
   }
-  const getReferenceClientRect = (0, import_react37.useCallback)(() => {
+  const getReferenceClientRect = (0, import_react39.useCallback)(() => {
     const renderContainer = getRenderContainer(editor, "section");
     const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
     return rect;
@@ -8643,10 +8638,10 @@ function SectionBubbleMenu(props) {
     shouldShow: ({ editor: editor2 }) => {
       var _a, _b;
       const activeSectionNode = getClosestNodeByName(editor2, "section");
-      const repeatNodeChildren = activeSectionNode ? (_a = (0, import_react36.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
+      const repeatNodeChildren = activeSectionNode ? (_a = (0, import_react38.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
         return node.type.name === "repeat";
       })) == null ? void 0 : _a[0] : null;
-      const inlineImageNodeChildren = activeSectionNode ? (_b = (0, import_react36.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
+      const inlineImageNodeChildren = activeSectionNode ? (_b = (0, import_react38.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
         return node.type.name === "inlineImage";
       })) == null ? void 0 : _b[0] : null;
       const hasActiveRepeatNodeChildren = repeatNodeChildren && editor2.isActive("repeat");
@@ -8675,12 +8670,12 @@ function SectionBubbleMenu(props) {
     { value: "6", label: "Smooth" },
     { value: "9999", label: "Round" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_react36.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_react38.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
-      className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      className: "menu-surface menu-inline-gap mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TooltipProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           AlignmentSwitch,
           {
             alignment: state.currentAlignment,
@@ -8692,9 +8687,9 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             Select,
             {
               label: "Border Radius",
@@ -8710,7 +8705,7 @@ function SectionBubbleMenu(props) {
               className: "mly:capitalize"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             Select,
             {
               label: "Border Width",
@@ -8732,8 +8727,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           Select,
           {
             icon: MarginIcon,
@@ -8761,8 +8756,8 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           Select,
           {
             icon: PaddingIcon,
@@ -8790,9 +8785,9 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             ColorPicker,
             {
               color: state.currentBorderColor,
@@ -8803,14 +8798,14 @@ function SectionBubbleMenu(props) {
                 });
               },
               tooltip: "Border Color",
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 BaseButton,
                 {
                   variant: "ghost",
-                  className: "mly:h-7 mly:w-7 mly:shrink-0",
+                  className: "menu-option mly:h-7 mly:w-7 mly:shrink-0",
                   size: "sm",
                   type: "button",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                     BorderColor,
                     {
                       className: "mly:size-3 mly:shrink-0",
@@ -8824,7 +8819,7 @@ function SectionBubbleMenu(props) {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             ColorPicker,
             {
               color: state.currentBackgroundColor,
@@ -8840,8 +8835,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           BubbleMenuButton,
           {
             icon: import_lucide_react25.Trash,
@@ -8851,17 +8846,17 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        state.isColumnsActive && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Popover, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PopoverTrigger, { className: "mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: [
+        state.isColumnsActive && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Popover, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PopoverTrigger, { className: "menu-option mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: [
               "Column",
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.ChevronUp, { className: "mly:h-3 mly:w-3" })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.ChevronUp, { className: "mly:h-3 mly:w-3" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               PopoverContent,
               {
-                className: "mly:w-max mly:rounded-lg mly:p-0.5!",
+                className: "menu-dropdown-surface mly:w-max mly:rounded-lg mly:p-0.5!",
                 side: "top",
                 sideOffset: 8,
                 align: "end",
@@ -8871,7 +8866,7 @@ function SectionBubbleMenu(props) {
                 onCloseAutoFocus: (e) => {
                   e.preventDefault();
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ColumnsBubbleMenuContent, { editor })
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ColumnsBubbleMenuContent, { editor })
               }
             )
           ] })
@@ -8882,13 +8877,13 @@ function SectionBubbleMenu(props) {
 }
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-var import_react39 = require("@tiptap/react");
+var import_react41 = require("@tiptap/react");
 
 // src/editor/components/spacer-menu/use-spacer-state.ts
-var import_react38 = require("@tiptap/react");
+var import_react40 = require("@tiptap/react");
 var import_fast_deep_equal6 = __toESM(require("fast-deep-equal"), 1);
 var useSpacerState = (editor) => {
-  const states = (0, import_react38.useEditorState)({
+  const states = (0, import_react40.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a;
@@ -8902,14 +8897,14 @@ var useSpacerState = (editor) => {
 };
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-var import_react40 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function SpacerBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
     return null;
   }
-  const items = (0, import_react40.useMemo)(
+  const items = (0, import_react42.useMemo)(
     () => spacing.map((space) => {
       const { value: height, short: name } = space;
       return {
@@ -8935,11 +8930,11 @@ function SpacerBubbleMenu(props) {
     }
   });
   const state = useSpacerState(editor);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_react39.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_react41.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
-      className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      className: "menu-surface mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         BubbleMenuButton,
         __spreadValues({
           className: "!mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
@@ -9063,6 +9058,17 @@ var ColumnsExtension = import_core10.Node.create({
 var import_core11 = require("@tiptap/core");
 var import_extension_horizontal_rule = require("@tiptap/extension-horizontal-rule");
 var HorizontalRule = import_extension_horizontal_rule.HorizontalRule.extend({
+  addAttributes() {
+    return {
+      size: {
+        default: 32,
+        parseHTML: (element) => Number(element.getAttribute("data-size") || 32),
+        renderHTML: (attributes) => ({
+          "data-size": attributes.size
+        })
+      }
+    };
+  },
   addInputRules() {
     return [
       new import_core11.InputRule({
@@ -9083,7 +9089,7 @@ var HorizontalRule = import_extension_horizontal_rule.HorizontalRule.extend({
   addOptions() {
     return {
       HTMLAttributes: {
-        class: "mly:relative"
+        class: "mly:relative mly-divider-node"
       }
     };
   }
@@ -9173,18 +9179,18 @@ var Spacer = import_core12.Node.create({
 
 // src/editor/extensions/link-card.ts
 var import_core13 = require("@tiptap/core");
-var import_react42 = require("@tiptap/react");
+var import_react44 = require("@tiptap/react");
 
 // src/editor/nodes/link-card.tsx
-var import_react41 = require("@tiptap/react");
+var import_react43 = require("@tiptap/react");
 
 // src/editor/components/input.tsx
 var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Input = React5.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "input",
       __spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
         type,
@@ -9202,11 +9208,11 @@ Input.displayName = "Input";
 
 // src/editor/components/textarea.tsx
 var React6 = __toESM(require("react"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Textarea = React6.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "textarea",
       __spreadValues({
         className: cn(
@@ -9222,18 +9228,18 @@ var Textarea = React6.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/editor/nodes/link-card.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function LinkCardComponent(props) {
   const { title, description, link, linkTitle, image: image2, badgeText, subTitle } = props.node.attrs;
   const { getPos, editor } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_react41.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_react43.NodeViewWrapper,
     {
       className: `react-component ${props.selected && "ProseMirror-selectednode"}`,
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { open: props.selected, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Popover, { open: props.selected, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "div",
           {
             tabIndex: -1,
@@ -9242,8 +9248,8 @@ function LinkCardComponent(props) {
               const pos = getPos();
               editor.commands.setNodeSelection(pos);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
-              image2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
+              image2 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "img",
                 {
                   src: image2,
@@ -9252,23 +9258,23 @@ function LinkCardComponent(props) {
                   draggable: editor.isEditable
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("mly:flex mly:flex-col"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
-                  badgeText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "!mly:font-base mly:rounded-md mly:bg-yellow-200 mly:px-2 mly:py-1 mly:font-semibold mly:leading-none text-xs", children: badgeText }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("mly:flex mly:flex-col"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
+                  badgeText && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "!mly:font-base mly:rounded-md mly:bg-yellow-200 mly:px-2 mly:py-1 mly:font-semibold mly:leading-none text-xs", children: badgeText }),
                   " ",
-                  subTitle && !badgeText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "!mly:font-base mly:font-regular mly:rounded-md mly:leading-none mly:text-gray-400 text-xs", children: subTitle })
+                  subTitle && !badgeText && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "!mly:font-base mly:font-regular mly:rounded-md mly:leading-none mly:text-gray-400 text-xs", children: subTitle })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
                   description,
                   " ",
-                  linkTitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
+                  linkTitle ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
                 ] })
               ] }) })
             ] })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           PopoverContent,
           {
             align: "end",
@@ -9277,9 +9283,9 @@ function LinkCardComponent(props) {
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   Input,
                   {
                     placeholder: "Add Image",
@@ -9293,9 +9299,9 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   Input,
                   {
                     placeholder: "Add title",
@@ -9308,9 +9314,9 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   Textarea,
                   {
                     placeholder: "Add description here",
@@ -9323,10 +9329,10 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     Input,
                     {
                       placeholder: "Add link title here",
@@ -9339,9 +9345,9 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     Input,
                     {
                       placeholder: "Add link here",
@@ -9355,10 +9361,10 @@ function LinkCardComponent(props) {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     Input,
                     {
                       placeholder: "Add badge text here",
@@ -9371,9 +9377,9 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     Input,
                     {
                       placeholder: "Add sub title here",
@@ -9460,7 +9466,7 @@ var LinkCardExtension = import_core13.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react42.ReactNodeViewRenderer)(LinkCardComponent, {
+    return (0, import_react44.ReactNodeViewRenderer)(LinkCardComponent, {
       className: "mly:relative"
     });
   }
@@ -9468,26 +9474,27 @@ var LinkCardExtension = import_core13.Node.create({
 
 // src/editor/nodes/button/button.tsx
 var import_core14 = require("@tiptap/core");
-var import_react46 = require("@tiptap/react");
+var import_react48 = require("@tiptap/react");
 
 // src/editor/nodes/button/button-view.tsx
-var import_react44 = require("@tiptap/react");
-var import_react45 = require("react");
+var import_react46 = require("@tiptap/react");
+var import_lucide_react26 = require("lucide-react");
+var import_react47 = require("react");
 
 // src/editor/nodes/button/button-label-input.tsx
-var import_react43 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react45 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function ButtonLabelInput(props) {
   var _a, _b;
   const { value, onValueChange, isVariable, editor } = props;
-  const linkInputRef = (0, import_react43.useRef)(null);
-  const [isEditing, setIsEditing] = (0, import_react43.useState)(!isVariable);
+  const linkInputRef = (0, import_react45.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react45.useState)(!isVariable);
   const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
   const otps = useVariableOptions(editor);
   const variables = otps == null ? void 0 : otps.variables;
   const variableTriggerCharacter = (_b = (_a = otps == null ? void 0 : otps.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
   const renderVariable = otps == null ? void 0 : otps.renderVariable;
-  const autoCompleteOptions = (0, import_react43.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react45.useMemo)(() => {
     const withoutTrigger = value.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -9498,8 +9505,8 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "button",
       {
         onClick: () => {
@@ -9520,7 +9527,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       InputAutocomplete,
       {
         editor,
@@ -9531,7 +9538,7 @@ function ButtonLabelInput(props) {
         autoCompleteOptions,
         ref: linkInputRef,
         placeholder: placeholderUrl,
-        className: "mly:h-7 mly:w-40 mly:rounded-md mly:px-2 mly:pr-6 mly:text-sm mly:text-midnight-gray mly:hover:bg-soft-gray mly:focus:bg-soft-gray mly:focus:outline-hidden",
+        className: "menu-option mly:h-7 mly:w-40 mly:rounded-md mly:px-2 mly:pr-6 mly:text-sm mly:text-midnight-gray mly:hover:bg-soft-gray mly:focus:bg-soft-gray mly:focus:outline-hidden",
         triggerChar: variableTriggerCharacter,
         onSelectOption: (value2) => {
           var _a2;
@@ -9547,7 +9554,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -9556,6 +9563,7 @@ function ButtonView(props) {
     alignment,
     variant,
     borderRadius: _radius,
+    size: rawSize,
     buttonColor,
     textColor,
     url: externalLink,
@@ -9567,7 +9575,7 @@ function ButtonView(props) {
   } = node.attrs;
   const opts = useVariableOptions(editor);
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const sizes = (0, import_react45.useMemo)(
+  const sizes = (0, import_react47.useMemo)(
     () => ({
       small: {
         paddingX: 24,
@@ -9584,14 +9592,17 @@ function ButtonView(props) {
     }),
     []
   );
-  const size = (0, import_react45.useMemo)(() => {
+  const size = (0, import_react47.useMemo)(() => {
     var _a;
-    return (_a = Object.entries(sizes).find(
+    if (allowedButtonSize.includes(rawSize)) {
+      return rawSize;
+    }
+    return ((_a = Object.entries(sizes).find(
       ([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
-    )) == null ? void 0 : _a[0];
-  }, [paddingRight, paddingTop, sizes]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    import_react44.NodeViewWrapper,
+    )) == null ? void 0 : _a[0]) || "medium";
+  }, [rawSize, paddingRight, paddingTop, sizes]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    import_react46.NodeViewWrapper,
     {
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
@@ -9599,8 +9610,8 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "button",
           {
             className: cn(
@@ -9643,17 +9654,17 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           PopoverContent,
           {
             align: "end",
             side: "top",
-            className: "mly:w-max mly:rounded-lg mly:p-0.5!",
+            className: "menu-dropdown-surface button-menu-surface mly:w-max mly:rounded-lg mly:p-0.5!",
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "menu-surface menu-inline-gap mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -9667,9 +9678,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Select,
                   {
                     label: "Border Radius",
@@ -9687,7 +9698,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Select,
                   {
                     label: "Style",
@@ -9705,7 +9716,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Select,
                   {
                     label: "Size",
@@ -9718,6 +9729,7 @@ function ButtonView(props) {
                     onValueChange: (value) => {
                       const { paddingX, paddingY } = sizes[value];
                       updateAttributes2({
+                        size: value,
                         paddingTop: paddingY,
                         paddingRight: paddingX,
                         paddingBottom: paddingY,
@@ -9729,20 +9741,48 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  AlignmentSwitch,
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  BubbleMenuButton,
                   {
-                    alignment,
-                    onAlignmentChange: (alignment2) => {
+                    icon: import_lucide_react26.AlignLeft,
+                    tooltip: "Align Left",
+                    command: () => {
                       updateAttributes2({
-                        alignment: alignment2
+                        alignment: "left"
                       });
-                    }
+                    },
+                    isActive: () => alignment === "left"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  BubbleMenuButton,
+                  {
+                    icon: import_lucide_react26.AlignCenter,
+                    tooltip: "Align Center",
+                    command: () => {
+                      updateAttributes2({
+                        alignment: "center"
+                      });
+                    },
+                    isActive: () => alignment === "center"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  BubbleMenuButton,
+                  {
+                    icon: import_lucide_react26.AlignRight,
+                    tooltip: "Align Right",
+                    command: () => {
+                      updateAttributes2({
+                        alignment: "right"
+                      });
+                    },
+                    isActive: () => alignment === "right"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -9758,13 +9798,13 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   BackgroundColorPickerPopup,
                   {
                     variant,
-                    color: buttonColor || "transparent",
+                    color: buttonColor || DEFAULT_BUTTON_BACKGROUND_COLOR,
                     onChange: (color) => {
                       updateAttributes2({
                         buttonColor: color
@@ -9772,10 +9812,10 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   TextColorPickerPopup,
                   {
-                    color: textColor || "transparent",
+                    color: textColor || DEFAULT_BUTTON_TEXT_COLOR,
                     onChange: (color) => {
                       updateAttributes2({
                         textColor: color
@@ -9793,20 +9833,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
-          className: "mly:size-7",
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          className: "menu-option mly:size-7",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "div",
             {
               className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded-full mly:shadow",
@@ -9825,16 +9865,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
-      className: "mly:size-7",
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      className: "menu-option mly:size-7",
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
           {
             className: "mly:h-[2px] mly:w-3 mly:shrink-0 mly:rounded-md mly:shadow",
@@ -9850,14 +9890,15 @@ function TextColorPickerPopup(props) {
 var DEFAULT_BUTTON_ALIGNMENT = "left";
 var DEFAULT_BUTTON_VARIANT = "filled";
 var DEFAULT_BUTTON_BORDER_RADIUS = "smooth";
-var DEFAULT_BUTTON_BACKGROUND_COLOR = null;
-var DEFAULT_BUTTON_TEXT_COLOR = null;
+var DEFAULT_BUTTON_BACKGROUND_COLOR = "#000000";
+var DEFAULT_BUTTON_TEXT_COLOR = "#ffffff";
 var DEFAULT_BUTTON_PADDING_TOP = null;
 var DEFAULT_BUTTON_PADDING_RIGHT = null;
 var DEFAULT_BUTTON_PADDING_BOTTOM = null;
 var DEFAULT_BUTTON_PADDING_LEFT = null;
 var allowedButtonVariant = ["filled", "outline"];
 var allowedButtonBorderRadius = ["sharp", "smooth", "round"];
+var allowedButtonSize = ["small", "medium", "large"];
 var ButtonExtension = import_core14.Node.create({
   name: "button",
   group: "block",
@@ -9951,6 +9992,18 @@ var ButtonExtension = import_core14.Node.create({
           };
         }
       },
+      size: {
+        default: "medium",
+        parseHTML: (element) => {
+          const value = element.getAttribute("data-size");
+          return allowedButtonSize.includes(value) ? value : "medium";
+        },
+        renderHTML: (attributes) => {
+          return {
+            "data-size": attributes.size
+          };
+        }
+      },
       showIfKey: {
         default: DEFAULT_SECTION_SHOW_IF_KEY,
         parseHTML: (element) => {
@@ -9993,7 +10046,10 @@ var ButtonExtension = import_core14.Node.create({
       setButton: () => ({ commands }) => {
         return commands.insertContent({
           type: this.name,
-          attrs: {},
+          attrs: {
+            buttonColor: DEFAULT_BUTTON_BACKGROUND_COLOR,
+            textColor: DEFAULT_BUTTON_TEXT_COLOR
+          },
           content: []
         });
       },
@@ -10001,7 +10057,7 @@ var ButtonExtension = import_core14.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react46.ReactNodeViewRenderer)(ButtonView, {
+    return (0, import_react48.ReactNodeViewRenderer)(ButtonView, {
       contentDOMElementTag: "div",
       className: "mly:relative"
     });
@@ -10010,7 +10066,7 @@ var ButtonExtension = import_core14.Node.create({
 
 // src/editor/nodes/image/image.ts
 var import_extension_image2 = __toESM(require("@tiptap/extension-image"), 1);
-var import_react47 = require("@tiptap/react");
+var import_react49 = require("@tiptap/react");
 var DEFAULT_IMAGE_BORDER_RADIUS = 0;
 var ImageExtension = import_extension_image2.default.extend({
   addAttributes() {
@@ -10148,7 +10204,7 @@ var ImageExtension = import_extension_image2.default.extend({
     });
   },
   addNodeView() {
-    return (0, import_react47.ReactNodeViewRenderer)(ImageView, {
+    return (0, import_react49.ReactNodeViewRenderer)(ImageView, {
       className: "mly:relative"
     });
   }
@@ -10157,25 +10213,25 @@ var ImageExtension = import_extension_image2.default.extend({
 // src/editor/nodes/html/html.tsx
 var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
 var import_state7 = require("@tiptap/pm/state");
-var import_react56 = require("@tiptap/react");
+var import_react58 = require("@tiptap/react");
 var import_xml = __toESM(require("highlight.js/lib/languages/xml"), 1);
 var import_lowlight = require("lowlight");
 
 // src/editor/nodes/html/html-view.tsx
-var import_react48 = require("@tiptap/react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react50 = require("@tiptap/react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function HTMLCodeBlockView(props) {
   const { node } = props;
   const { language } = node.attrs;
   const languageClass = language ? `language-${language}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_react48.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    import_react50.NodeViewWrapper,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_react48.NodeViewContent,
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        import_react50.NodeViewContent,
         {
           as: "code",
           className: cn("is-editable", languageClass)
@@ -10319,24 +10375,24 @@ var ParagraphExtension = import_extension_paragraph.default.extend({
 
 // src/editor/nodes/repeat/repeat.ts
 var import_core16 = require("@tiptap/core");
-var import_react50 = require("@tiptap/react");
+var import_react52 = require("@tiptap/react");
 
 // src/editor/nodes/repeat/repeat-view.tsx
-var import_react49 = require("@tiptap/react");
-var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react51 = require("@tiptap/react");
+var import_lucide_react27 = require("lucide-react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function RepeatView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-    import_react49.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    import_react51.NodeViewWrapper,
     {
       "data-type": "repeat",
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
       className: "mly:relative",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react49.NodeViewContent, { className: "is-editable" }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react51.NodeViewContent, { className: "is-editable" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           "div",
           {
             role: "button",
@@ -10347,8 +10403,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.Repeat2, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.Repeat2, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
             ]
           }
         )
@@ -10432,7 +10488,7 @@ var RepeatExtension = import_core16.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react50.ReactNodeViewRenderer)(RepeatView, {
+    return (0, import_react52.ReactNodeViewRenderer)(RepeatView, {
       contentDOMElementTag: "div",
       className: "mly:relative"
     });
@@ -10589,14 +10645,14 @@ var SlashCommandExtension = import_core18.Extension.create({
 });
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_react52 = require("@tiptap/react");
-var import_react53 = require("react");
+var import_react54 = require("@tiptap/react");
+var import_react55 = require("react");
 var import_tippy7 = __toESM(require("tippy.js"), 1);
 
 // src/editor/extensions/slash-command/slash-command-item.tsx
-var import_lucide_react27 = require("lucide-react");
-var import_react51 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_lucide_react28 = require("lucide-react");
+var import_react53 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function SlashCommandItem(props) {
   var _a;
   const {
@@ -10611,7 +10667,7 @@ function SlashCommandItem(props) {
     hoveredItemKey,
     onHover
   } = props;
-  const [open, setOpen] = (0, import_react51.useState)(false);
+  const [open, setOpen] = (0, import_react53.useState)(false);
   const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
   const itemKey = `${groupIndex}-${commandIndex}`;
   const isHovered = hoveredItemKey === itemKey;
@@ -10619,19 +10675,19 @@ function SlashCommandItem(props) {
   const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && (isHovered || isActive && !hoveredItemKey);
   const hasRenderFunction = typeof item.render === "function";
   const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
-  let value = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "mly:grow", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:font-medium", children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
+  let value = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:grow", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "mly:font-medium", children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
     ] }),
-    isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
+    isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react28.ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
   ] });
   if (renderFunctionValue !== null && renderFunctionValue !== true) {
     value = renderFunctionValue;
   }
-  const openTimerRef = (0, import_react51.useRef)(0);
-  const handleDelayedOpen = (0, import_react51.useCallback)(() => {
+  const openTimerRef = (0, import_react53.useRef)(0);
+  const handleDelayedOpen = (0, import_react53.useCallback)(() => {
     window.clearTimeout(openTimerRef.current);
     const delay = 200;
     openTimerRef.current = window.setTimeout(() => {
@@ -10639,7 +10695,7 @@ function SlashCommandItem(props) {
       openTimerRef.current = 0;
     }, delay);
   }, [setOpen]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (shouldOpenTooltip) {
       handleDelayedOpen();
     } else {
@@ -10648,7 +10704,7 @@ function SlashCommandItem(props) {
       setOpen(false);
     }
   }, [shouldOpenTooltip]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     return () => {
       if (openTimerRef.current) {
         window.clearTimeout(openTimerRef.current);
@@ -10656,8 +10712,8 @@ function SlashCommandItem(props) {
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Tooltip, { open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Tooltip, { open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         className: cn(
@@ -10672,14 +10728,14 @@ function SlashCommandItem(props) {
         children: value
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       TooltipContent,
       {
         side: "right",
         sideOffset: 10,
         className: "mly:w-52 mly:rounded-lg mly:border-none mly:p-1 mly:shadow",
-        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("figure", { className: "mly:relative mly:aspect-[2.5] mly:w-full mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("figure", { className: "mly:relative mly:aspect-[2.5] mly:w-full mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "img",
             {
               src: item == null ? void 0 : item.preview,
@@ -10687,7 +10743,7 @@ function SlashCommandItem(props) {
               className: "mly:absolute mly:inset-0 mly:h-full mly:w-full mly:object-cover"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
         ] })
       }
     )
@@ -10776,16 +10832,16 @@ function processCommand(options) {
 }
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var CommandList = (0, import_react53.forwardRef)((props, ref) => {
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var CommandList = (0, import_react55.forwardRef)((props, ref) => {
   const { items: groups, command, editor, range, query } = props;
-  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react53.useState)(0);
-  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react53.useState)(0);
-  const [hoveredItemKey, setHoveredItemKey] = (0, import_react53.useState)(null);
-  const prevQuery = (0, import_react53.useRef)("");
-  const prevSelectedGroupIndex = (0, import_react53.useRef)(0);
-  const prevSelectedCommandIndex = (0, import_react53.useRef)(0);
-  const selectItem = (0, import_react53.useCallback)(
+  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react55.useState)(0);
+  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react55.useState)(0);
+  const [hoveredItemKey, setHoveredItemKey] = (0, import_react55.useState)(null);
+  const prevQuery = (0, import_react55.useRef)("");
+  const prevSelectedGroupIndex = (0, import_react55.useRef)(0);
+  const prevSelectedCommandIndex = (0, import_react55.useRef)(0);
+  const selectItem = (0, import_react55.useCallback)(
     (groupIndex, commandIndex) => {
       const item = groups[groupIndex].commands[commandIndex];
       if (!item) {
@@ -10795,7 +10851,7 @@ var CommandList = (0, import_react53.forwardRef)((props, ref) => {
     },
     [command]
   );
-  (0, import_react53.useImperativeHandle)(ref, () => ({
+  (0, import_react55.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       var _a, _b, _c, _d;
       const navigationKeys = [
@@ -10883,9 +10939,9 @@ var CommandList = (0, import_react53.forwardRef)((props, ref) => {
       }
     }
   }));
-  const commandListContainer = (0, import_react53.useRef)(null);
-  const activeCommandRef = (0, import_react53.useRef)(null);
-  (0, import_react53.useLayoutEffect)(() => {
+  const commandListContainer = (0, import_react55.useRef)(null);
+  const activeCommandRef = (0, import_react55.useRef)(null);
+  (0, import_react55.useLayoutEffect)(() => {
     const container = commandListContainer == null ? void 0 : commandListContainer.current;
     const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
     if (!container || !activeCommandContainer) {
@@ -10900,11 +10956,11 @@ var CommandList = (0, import_react53.forwardRef)((props, ref) => {
     commandListContainer,
     activeCommandRef
   ]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     setSelectedGroupIndex(0);
     setSelectedCommandIndex(0);
   }, [groups]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     return () => {
       prevQuery.current = "";
       prevSelectedGroupIndex.current = 0;
@@ -10914,15 +10970,15 @@ var CommandList = (0, import_react53.forwardRef)((props, ref) => {
   if (!groups || groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:z-50 mly:w-72 mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mly:z-50 mly:w-72 mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "div",
       {
         id: "slash-command",
         ref: commandListContainer,
         className: "mly:no-scrollbar mly:h-auto mly:max-h-[330px] mly:overflow-y-auto",
-        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react53.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react55.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "span",
             {
               className: cn(
@@ -10932,9 +10988,9 @@ var CommandList = (0, import_react53.forwardRef)((props, ref) => {
               children: group.title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
             const itemKey = `${groupIndex}-${commandIndex}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               SlashCommandItem,
               {
                 item,
@@ -10954,16 +11010,16 @@ var CommandList = (0, import_react53.forwardRef)((props, ref) => {
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:flex mly:items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:ml-1 mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2193" }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mly:flex mly:items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("kbd", { className: "mly:ml-1 mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2193" }),
         " ",
         "to navigate"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
         " ",
         "to select"
       ] })
@@ -10987,7 +11043,7 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react52.ReactRenderer(CommandList, {
+          component = new import_react54.ReactRenderer(CommandList, {
             props,
             editor: props.editor
           });
@@ -11040,16 +11096,16 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
 }
 
 // src/editor/nodes/variable/variable-suggestions.tsx
-var import_react54 = require("@tiptap/react");
-var import_react55 = require("react");
+var import_react56 = require("@tiptap/react");
+var import_react57 = require("react");
 var import_tippy8 = __toESM(require("tippy.js"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var VariableList = (0, import_react55.forwardRef)((props, ref) => {
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var VariableList = (0, import_react57.forwardRef)((props, ref) => {
   var _a;
   const { items = [], editor } = props;
-  const popoverRef = (0, import_react55.useRef)(null);
+  const popoverRef = (0, import_react57.useRef)(null);
   const VariableSuggestionPopoverComponent = (_a = useVariableOptions(editor)) == null ? void 0 : _a.variableSuggestionsPopover;
-  (0, import_react55.useImperativeHandle)(ref, () => ({
+  (0, import_react57.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (!popoverRef.current) {
         return false;
@@ -11072,7 +11128,7 @@ var VariableList = (0, import_react55.forwardRef)((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     VariableSuggestionPopoverComponent,
     {
       items,
@@ -11107,7 +11163,7 @@ function getVariableSuggestions(char = DEFAULT_VARIABLE_TRIGGER_CHAR) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react54.ReactRenderer(VariableList, {
+          component = new import_react56.ReactRenderer(VariableList, {
             props,
             editor: props.editor
           });
@@ -11181,7 +11237,7 @@ var HTMLCodeBlockExtension = import_extension_code_block_lowlight.default.extend
     });
   },
   addNodeView() {
-    return (0, import_react56.ReactNodeViewRenderer)(HTMLCodeBlockView, {
+    return (0, import_react58.ReactNodeViewRenderer)(HTMLCodeBlockView, {
       className: "mly:relative",
       attrs: ({ node }) => {
         var _a;
@@ -11256,17 +11312,17 @@ var isCustomNodeSelected = (editor, node) => {
 };
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-var import_react60 = require("@tiptap/react");
+var import_react62 = require("@tiptap/react");
 
 // src/editor/components/text-menu/text-bubble-content.tsx
-var import_lucide_react28 = require("lucide-react");
+var import_lucide_react29 = require("lucide-react");
 
 // src/editor/components/text-menu/use-text-menu-state.tsx
-var import_react57 = require("@tiptap/react");
+var import_react59 = require("@tiptap/react");
 var import_fast_deep_equal7 = __toESM(require("fast-deep-equal"), 1);
 var DEFAULT_TEXT_COLOR = "#374151";
 var useTextMenuState = (editor) => {
-  const states = (0, import_react57.useEditorState)({
+  const states = (0, import_react59.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -11288,7 +11344,7 @@ var useTextMenuState = (editor) => {
 };
 
 // src/editor/components/text-menu/text-bubble-content.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function TextBubbleContent(props) {
   var _a, _b, _c, _d;
   const { editor, showListMenu = true } = props;
@@ -11300,41 +11356,41 @@ function TextBubbleContent(props) {
       name: "bold",
       isActive: () => editor == null ? void 0 : editor.isActive("bold"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
-      icon: import_lucide_react28.BoldIcon,
+      icon: import_lucide_react29.BoldIcon,
       tooltip: "Bold"
     },
     {
       name: "italic",
       isActive: () => editor == null ? void 0 : editor.isActive("italic"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
-      icon: import_lucide_react28.ItalicIcon,
+      icon: import_lucide_react29.ItalicIcon,
       tooltip: "Italic"
     },
     {
       name: "underline",
       isActive: () => editor == null ? void 0 : editor.isActive("underline"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run(),
-      icon: import_lucide_react28.UnderlineIcon,
+      icon: import_lucide_react29.UnderlineIcon,
       tooltip: "Underline"
     },
     {
       name: "strike",
       isActive: () => editor == null ? void 0 : editor.isActive("strike"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run(),
-      icon: import_lucide_react28.StrikethroughIcon,
+      icon: import_lucide_react29.StrikethroughIcon,
       tooltip: "Strikethrough"
     },
     {
       name: "code",
       isActive: () => editor == null ? void 0 : editor.isActive("code"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleCode().run(),
-      icon: import_lucide_react28.CodeIcon,
+      icon: import_lucide_react29.CodeIcon,
       tooltip: "Code"
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BubbleMenuButton, __spreadValues({}, item), index)),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BubbleMenuButton, __spreadValues({}, item), index)),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       AlignmentSwitch,
       {
         alignment: state.textAlign,
@@ -11343,21 +11399,21 @@ function TextBubbleContent(props) {
         }
       }
     ),
-    !state.isListActive && showListMenu && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    !state.isListActive && showListMenu && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         BubbleMenuButton,
         {
-          icon: import_lucide_react28.List,
+          icon: import_lucide_react29.List,
           command: () => {
             editor.chain().focus().toggleBulletList().run();
           },
           tooltip: "Bullet List"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         BubbleMenuButton,
         {
-          icon: import_lucide_react28.ListOrdered,
+          icon: import_lucide_react29.ListOrdered,
           command: () => {
             editor.chain().focus().toggleOrderedList().run();
           },
@@ -11365,7 +11421,7 @@ function TextBubbleContent(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       LinkInputPopover,
       {
         defaultValue: (_d = state == null ? void 0 : state.linkUrl) != null ? _d : "",
@@ -11381,8 +11437,8 @@ function TextBubbleContent(props) {
         isVariable: state.isUrlVariable
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       ColorPicker,
       {
         color: state.currentTextColor,
@@ -11391,16 +11447,16 @@ function TextBubbleContent(props) {
         },
         tooltip: "Text Color",
         suggestedColors,
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           BaseButton,
           {
             variant: "ghost",
             size: "sm",
             type: "button",
-            className: "mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            className: "menu-option mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "div",
                 {
                   className: "mly:h-[2px] mly:w-3",
@@ -11416,33 +11472,33 @@ function TextBubbleContent(props) {
 }
 
 // src/editor/components/text-menu/turn-into-block.tsx
-var import_lucide_react29 = require("lucide-react");
-var import_react58 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_lucide_react30 = require("lucide-react");
+var import_react60 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var isOption = (option) => option.type === "option";
 var isCategory = (option) => option.type === "category";
 function TurnIntoBlock(props) {
   const { options } = props;
-  const activeItem = (0, import_react58.useMemo)(
+  const activeItem = (0, import_react60.useMemo)(
     () => options.find((option) => option.type === "option" && option.isActive()),
     [options]
   );
-  const { icon: ActiveIcon = import_lucide_react29.PilcrowIcon } = activeItem || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  const { icon: ActiveIcon = import_lucide_react30.PilcrowIcon } = activeItem || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
         PopoverTrigger,
         {
           className: cn(
-            "mly:flex mly:aspect-square mly:h-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2"
+            "menu-option mly:flex mly:aspect-square mly:h-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react29.ChevronDownIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react30.ChevronDownIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         TooltipContent,
         {
           sideOffset: 8,
@@ -11451,34 +11507,37 @@ function TurnIntoBlock(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       PopoverContent,
       {
         align: "start",
         side: "bottom",
         sideOffset: 8,
-        className: "mly:flex mly:w-[160px] mly:flex-col mly:rounded-md mly:p-1",
+        className: "menu-dropdown-surface mly:flex mly:w-[160px] mly:flex-col mly:rounded-md mly:p-1",
         children: options.map((option, index) => {
           if (isOption(option)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               BaseButton,
               {
                 onClick: option.onClick,
                 variant: "ghost",
-                className: "mly:mb-0.5 mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2.5 mly:py-1 mly:!pl-3.5 mly:text-sm mly:font-normal mly:text-midnight-gray",
+                className: cn(
+                  "menu-option menu-dropdown-option mly:mb-0.5 mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2.5 mly:py-1 mly:!pl-3.5 mly:text-sm mly:font-normal mly:text-midnight-gray",
+                  option.isActive() && "menu-active-option"
+                ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
                   option.label
                 ]
               },
               option.id
             );
           } else if (isCategory(option)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "label",
               {
                 className: cn(
-                  "mly:!px-2.5 mly:!pl-3.5 mly:text-xs mly:font-medium mly:text-midnight-gray/60",
+                  "menu-dropdown-category mly:!px-2.5 mly:!pl-3.5 mly:text-xs mly:font-medium mly:text-midnight-gray/60",
                   index === 0 ? "mly:mb-2 mly:mt-1" : "mly:my-2"
                 ),
                 children: option.label
@@ -11493,10 +11552,10 @@ function TurnIntoBlock(props) {
 }
 
 // src/editor/components/text-menu/use-turn-into-block-options.tsx
-var import_react59 = require("@tiptap/react");
-var import_lucide_react30 = require("lucide-react");
+var import_react61 = require("@tiptap/react");
+var import_lucide_react31 = require("lucide-react");
 function useTurnIntoBlockOptions(editor) {
-  return (0, import_react59.useEditorState)({
+  return (0, import_react61.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => [
       {
@@ -11505,7 +11564,7 @@ function useTurnIntoBlockOptions(editor) {
         id: "hierarchy"
       },
       {
-        icon: import_lucide_react30.PilcrowIcon,
+        icon: import_lucide_react31.PilcrowIcon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setParagraph().run(),
         id: "paragraph",
         disabled: () => !editor2.can().setParagraph(),
@@ -11514,7 +11573,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react30.Heading1Icon,
+        icon: import_lucide_react31.Heading1Icon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 1 }).run(),
         id: "heading1",
         disabled: () => !editor2.can().setHeading({ level: 1 }),
@@ -11523,7 +11582,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react30.Heading2Icon,
+        icon: import_lucide_react31.Heading2Icon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 2 }).run(),
         id: "heading2",
         disabled: () => !editor2.can().setHeading({ level: 2 }),
@@ -11532,7 +11591,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react30.Heading3Icon,
+        icon: import_lucide_react31.Heading3Icon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 3 }).run(),
         id: "heading3",
         disabled: () => !editor2.can().setHeading({ level: 3 }),
@@ -11546,7 +11605,7 @@ function useTurnIntoBlockOptions(editor) {
         id: "lists"
       },
       {
-        icon: import_lucide_react30.ListIcon,
+        icon: import_lucide_react31.ListIcon,
         onClick: () => editor2.chain().focus().toggleBulletList().run(),
         id: "bulletList",
         disabled: () => !editor2.can().toggleBulletList(),
@@ -11555,7 +11614,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react30.ListOrderedIcon,
+        icon: import_lucide_react31.ListOrderedIcon,
         onClick: () => editor2.chain().focus().toggleOrderedList().run(),
         id: "orderedList",
         disabled: () => !editor2.can().toggleOrderedList(),
@@ -11568,7 +11627,7 @@ function useTurnIntoBlockOptions(editor) {
 }
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function TextBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11619,23 +11678,23 @@ function TextBubbleMenu(props) {
     }
   });
   const turnIntoBlockOptions = useTurnIntoBlockOptions(editor);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_react60.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react62.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
-      className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TurnIntoBlock, { options: turnIntoBlockOptions }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Divider, { className: "mly:mx-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TextBubbleContent, { editor })
+      className: "menu-surface mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(TooltipProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TurnIntoBlock, { options: turnIntoBlockOptions }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Divider, { className: "mly:mx-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TextBubbleContent, { editor })
       ] })
     })
   );
 }
 
 // src/editor/components/variable-menu/variable-bubble-menu.tsx
-var import_react61 = require("@tiptap/react");
+var import_react63 = require("@tiptap/react");
 var import_tippy9 = require("tippy.js");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function VariableBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11658,11 +11717,11 @@ function VariableBubbleMenu(props) {
       placement: "top-start"
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react61.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    import_react63.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-slate-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TextBubbleContent, { showListMenu: false, editor }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TextBubbleContent, { showListMenu: false, editor }) })
     })
   );
 }
@@ -11748,7 +11807,7 @@ function replaceDeprecatedNode(json) {
 }
 
 // src/editor/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function Editor12(props) {
   const {
     config: {
@@ -11772,7 +11831,7 @@ function Editor12(props) {
     scrollThreshold = 40,
     scrollMargin = 40
   } = props;
-  const formattedContent = (0, import_react63.useMemo)(() => {
+  const formattedContent = (0, import_react65.useMemo)(() => {
     if (contentJson) {
       const json = (contentJson == null ? void 0 : contentJson.type) === "doc" ? contentJson : {
         type: "doc",
@@ -11793,8 +11852,8 @@ function Editor12(props) {
       };
     }
   }, [contentHtml, contentJson, replaceDeprecatedNode]);
-  const menuContainerRef = (0, import_react63.useRef)(null);
-  const editor = (0, import_react62.useEditor)({
+  const menuContainerRef = (0, import_react65.useRef)(null);
+  const editor = (0, import_react64.useEditor)({
     editorProps: {
       scrollThreshold,
       scrollMargin,
@@ -11821,7 +11880,7 @@ function Editor12(props) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       id: "mly-editor",
@@ -11832,8 +11891,8 @@ function Editor12(props) {
       ),
       ref: menuContainerRef,
       children: [
-        hasMenuBar && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(EditorMenuBar, { config: props.config, editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+        hasMenuBar && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EditorMenuBar, { config: props.config, editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "div",
           {
             className: cn(
@@ -11841,16 +11900,17 @@ function Editor12(props) {
               bodyClassName
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react62.EditorContent, { editor }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
-              !hideContextMenu && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ContentMenu, { editor }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DividerBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react64.EditorContent, { editor }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
+              !hideContextMenu && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ContentMenu, { editor }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
             ]
           }
         )