@daisychainapp/maily-to-core 0.4.4 → 0.4.5

package/dist/index.mjs

@@ -53,7 +53,7 @@ var __async = (__this, __arguments, generator) => {
 
 // src/editor/index.tsx
 import { EditorContent, useEditor } from "@tiptap/react";
-import { useMemo as useMemo12, useRef as useRef13 } from "react";
+import { useMemo as useMemo13, useRef as useRef13 } from "react";
 
 // src/editor/components/column-menu/columns-bubble-menu.tsx
 import { BubbleMenu } from "@tiptap/react";
@@ -3445,7 +3445,10 @@ function Divider(props) {
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipProvider = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx2(TooltipPrimitive.Provider, __spreadProps(__spreadValues({ delayDuration: 80, skipDelayDuration: 120 }, props), { children }));
+};
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = React.forwardRef((_a, ref) => {
@@ -3530,6 +3533,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
@@ -3957,11 +3961,11 @@ function ColumnsWidthConfig(props) {
     onColumnWidthChange
   } = props;
   return /* @__PURE__ */ jsxs4(Popover, { children: [
-    /* @__PURE__ */ jsx9(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__ */ jsx9(SlidersVertical, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" }) }),
+    /* @__PURE__ */ jsx9(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__ */ jsx9(SlidersVertical, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" }) }),
     /* @__PURE__ */ jsxs4(
       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",
@@ -4040,8 +4044,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
@@ -4066,7 +4070,7 @@ function Select(props) {
     placeholder
   } = props;
   const selectId = `mly${useId()}`;
-  const content = /* @__PURE__ */ jsxs5("div", { className: "mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
+  const content = /* @__PURE__ */ jsxs5("div", { className: "menu-select-wrap mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
     /* @__PURE__ */ jsx10("label", { htmlFor: selectId, className: "mly:sr-only", children: label }),
     Icon && /* @__PURE__ */ jsx10("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__ */ jsx10(Icon, { className: cn("mly:size-3.5", iconClassName) }) }),
     /* @__PURE__ */ jsxs5(
@@ -4074,7 +4078,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
         ),
@@ -4799,14 +4803,14 @@ function ContentMenu(props) {
       },
       onNodeChange: handleNodeChange,
       className: cn(editor.isEditable ? "mly:visible" : "mly:hidden"),
-      children: /* @__PURE__ */ jsx14(TooltipProvider, { children: /* @__PURE__ */ jsxs7("div", { className: "mly:flex mly:items-center mly:pr-1.5", children: [
+      children: /* @__PURE__ */ jsx14(TooltipProvider, { children: /* @__PURE__ */ jsxs7("div", { className: "menu-content-actions-offset mly:flex mly:items-center mly:pr-1.5", children: [
         /* @__PURE__ */ jsxs7(Tooltip, { children: [
           /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
             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__ */ jsx14(Plus, { className: "mly:size-3.5 mly:shrink-0" })
@@ -4829,7 +4833,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);
@@ -4856,26 +4860,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__ */ jsxs7(
                   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__ */ jsx14(Copy, { className: "mly:size-[15px] mly:shrink-0" }),
                       "Duplicate"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx14(Divider, { type: "horizontal" }),
+                /* @__PURE__ */ jsx14(Divider, { type: "horizontal", className: "menu-actions-divider" }),
                 /* @__PURE__ */ jsxs7(
                   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__ */ jsx14(Trash2, { className: "mly:size-[15px] mly:shrink-0" }),
                       "Delete"
@@ -4891,8 +4895,59 @@ function ContentMenu(props) {
   );
 }
 
-// src/editor/components/editor-menu-bar.tsx
+// src/editor/components/divider-menu/divider-bubble-menu.tsx
+import { BubbleMenu as BubbleMenu2 } from "@tiptap/react";
 import { useMemo as useMemo3 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function DividerBubbleMenu(props) {
+  const { editor, appendTo } = props;
+  if (!editor) {
+    return null;
+  }
+  const items = useMemo3(
+    () => 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__ */ jsx15(
+    BubbleMenu2,
+    __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__ */ jsx15(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ jsx15(
+        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
+import { useMemo as useMemo4 } from "react";
 import {
   AlignCenter,
   AlignLeft,
@@ -4905,10 +4960,10 @@ import {
   StrikethroughIcon,
   UnderlineIcon
 } from "lucide-react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var EditorMenuBar = (props) => {
   const { editor, config } = props;
-  const items = useMemo3(
+  const items = useMemo4(
     () => [
       {
         name: "bold",
@@ -4947,7 +5002,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: SeparatorHorizontal
@@ -4992,7 +5061,7 @@ var EditorMenuBar = (props) => {
     ],
     [editor]
   );
-  const groups = useMemo3(
+  const groups = useMemo4(
     () => items.reduce((acc, item) => {
       if (!acc.includes(item.group)) {
         acc.push(item.group);
@@ -5004,15 +5073,15 @@ var EditorMenuBar = (props) => {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: `mly:flex mly:items-center mly:gap-3 ${config == null ? void 0 : config.toolbarClassName}`,
-      children: groups.map((group, index) => /* @__PURE__ */ jsx15(
+      children: groups.map((group, index) => /* @__PURE__ */ jsx16(
         "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__ */ jsx15(BubbleMenuButton, __spreadValues({}, item), index2))
+          children: items.filter((item) => item.group === group).map((item, index2) => /* @__PURE__ */ jsx16(BubbleMenuButton, __spreadValues({}, item), index2))
         },
         index
       ))
@@ -5429,7 +5498,7 @@ function ImageUploadPlugin(options) {
 
 // src/editor/extensions/image-upload/image-upload.ts
 import { Extension } from "@tiptap/core";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var ImageUploadExtension = Extension.create({
   name: "imageUpload",
   addOptions() {
@@ -5464,7 +5533,7 @@ var ImageUploadExtension = Extension.create({
   }
 });
 function useImageUploadOptions(editor) {
-  return useMemo4(() => {
+  return useMemo5(() => {
     const node = editor.extensionManager.extensions.find(
       (extension) => extension.name === "imageUpload"
     );
@@ -5497,12 +5566,9 @@ function getNewHeight(width, aspectRatio) {
   }
   return width / aspectRatio;
 }
-function getNewWidth(height, aspectRatio) {
-  return height * aspectRatio;
-}
 
 // src/editor/nodes/image/image-view.tsx
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var MIN_WIDTH = 20;
 var IMAGE_MAX_WIDTH = 600;
 var IMAGE_MAX_HEIGHT = 400;
@@ -5576,7 +5642,7 @@ function ImageView(props) {
       if (isPlaceholderImage) {
         return null;
       }
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         "div",
         {
           role: "button",
@@ -5761,7 +5827,7 @@ function ImageView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx16(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx17(
           ImageStatusLabel,
           {
             status: "idle",
@@ -5769,11 +5835,11 @@ function ImageView(props) {
             isDropZone: isDroppable
           }
         ),
-        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx16(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx16(ImageStatusLabel, { status: "variable", minHeight: height }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx16(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx16(ImageStatusLabel, { status: "error", minHeight: height }),
-        isDroppable && /* @__PURE__ */ jsx16(
+        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "variable", minHeight: height }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "error", minHeight: height }),
+        isDroppable && /* @__PURE__ */ jsx17(
           "input",
           {
             type: "file",
@@ -5784,7 +5850,7 @@ function ImageView(props) {
           }
         ),
         hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "img",
             __spreadProps(__spreadValues({}, attrs), {
               ref: imgRef,
@@ -5810,7 +5876,7 @@ function ImageView(props) {
               { 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__ */ jsx16(
+            ].map((style, i) => /* @__PURE__ */ jsx17(
               "div",
               {
                 className: "mly:bg-rose-500",
@@ -5853,24 +5919,24 @@ function ImageStatusLabel(props) {
       } : {}), style),
       children: [
         status === "idle" && !isDropZone && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx16(ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx16("span", { children: "No image selected" })
+          /* @__PURE__ */ jsx17(ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx17("span", { children: "No image selected" })
         ] }),
         status === "idle" && isDropZone && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx16(GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx16("span", { children: "Click or Drop image here" })
+          /* @__PURE__ */ jsx17(GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx17("span", { children: "Click or Drop image here" })
         ] }),
         status === "loading" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx16(Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx16("span", { children: "Loading image..." })
+          /* @__PURE__ */ jsx17(Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx17("span", { children: "Loading image..." })
         ] }),
         status === "error" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx16(Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx16("span", { children: "Error loading image" })
+          /* @__PURE__ */ jsx17(Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx17("span", { children: "Error loading image" })
         ] }),
         status === "variable" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx16(BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx16("span", { children: "Variable Image URL" })
+          /* @__PURE__ */ jsx17(BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx17("span", { children: "Variable Image URL" })
         ] })
       ]
     })
@@ -5878,7 +5944,7 @@ function ImageStatusLabel(props) {
 }
 
 // src/editor/nodes/logo/logo-view.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function LogoView(props) {
   const { node, editor, updateAttributes: updateAttributes2 } = props;
   const [status, setStatus] = useState5("idle");
@@ -6004,7 +6070,7 @@ function LogoView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx17(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx18(
           ImageStatusLabel,
           {
             status: "idle",
@@ -6012,11 +6078,11 @@ function LogoView(props) {
             isDropZone: isDroppable
           }
         ),
-        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx17(ImageStatusLabel, { status: "error", minHeight: logoSize }),
-        isDroppable && /* @__PURE__ */ jsx17(
+        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx18(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx18(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx18(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx18(ImageStatusLabel, { status: "error", minHeight: logoSize }),
+        isDroppable && /* @__PURE__ */ jsx18(
           "input",
           {
             type: "file",
@@ -6026,7 +6092,7 @@ function LogoView(props) {
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsx17(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsx18(
           "img",
           {
             src: logoSrc,
@@ -6177,13 +6243,13 @@ var borderRadius = [
 ];
 
 // src/editor/components/image-menu/image-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu2 } from "@tiptap/react";
-import { ImageDown, LockIcon, LockOpenIcon } from "lucide-react";
+import { BubbleMenu as BubbleMenu3 } from "@tiptap/react";
+import { LockIcon, LockOpenIcon } from "lucide-react";
 import { sticky as sticky2 } from "tippy.js";
 
 // src/editor/components/alignment-switch.tsx
 import { AlignCenter as AlignCenter2, AlignLeft as AlignLeft2, AlignRight as AlignRight2 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function AlignmentSwitch(props) {
   const { alignment: rawAlignment, onAlignmentChange } = props;
   const alignment = allowedLogoAlignment.includes(
@@ -6215,16 +6281,16 @@ function AlignmentSwitch(props) {
   const activeAlignment = alignments[alignment];
   return /* @__PURE__ */ jsxs10(Popover, { children: [
     /* @__PURE__ */ jsxs10(Tooltip, { children: [
-      /* @__PURE__ */ jsx18(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
         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__ */ jsx18(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
+          children: /* @__PURE__ */ jsx19(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
         }
       ) }),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         TooltipContent,
         {
           sideOffset: 8,
@@ -6233,7 +6299,7 @@ function AlignmentSwitch(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       PopoverContent,
       {
         className: "mly:flex mly:w-max mly:gap-0.5 mly:rounded-lg mly:p-0.5!",
@@ -6247,7 +6313,7 @@ function AlignmentSwitch(props) {
           e.preventDefault();
         },
         children: Object.entries(alignments).map(([key, value]) => {
-          return /* @__PURE__ */ jsx18(
+          return /* @__PURE__ */ jsx19(
             BubbleMenuButton,
             {
               icon: value.icon,
@@ -6263,6 +6329,300 @@ function AlignmentSwitch(props) {
   ] });
 }
 
+// src/editor/components/image-menu/use-image-state.tsx
+import { useEditorState as useEditorState2 } from "@tiptap/react";
+import deepEql2 from "fast-deep-equal";
+var useImageState = (editor) => {
+  const states = useEditorState2({
+    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: deepEql2
+  });
+  return states;
+};
+
+// src/editor/components/image-menu/image-bubble-menu.tsx
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+function ImageBubbleMenu(props) {
+  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: [sticky2],
+      sticky: "popper",
+      maxWidth: "100%"
+    }
+  });
+  const { lockAspectRatio } = state;
+  return /* @__PURE__ */ jsx20(
+    BubbleMenu3,
+    __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__ */ jsxs11(TooltipProvider, { children: [
+        state.isLogoActive && state.imageSrc && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx20(
+            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__ */ jsx20(Divider, {})
+        ] }),
+        /* @__PURE__ */ jsx20("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: /* @__PURE__ */ jsx20(
+          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__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx20(Divider, {}),
+          /* @__PURE__ */ jsx20(
+            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__ */ jsx20("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: /* @__PURE__ */ jsx20(
+            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 ? LockIcon : LockOpenIcon,
+              tooltip: "Lock Aspect Ratio"
+            }
+          ) })
+        ] })
+      ] })
+    })
+  );
+}
+
+// src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
+import { BubbleMenu as BubbleMenu4 } from "@tiptap/react";
+import { sticky as sticky3 } from "tippy.js";
+
+// src/editor/components/image-menu/image-size.tsx
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+function ImageSize(props) {
+  const { value, onValueChange, dimension } = props;
+  return /* @__PURE__ */ jsxs12("label", { className: "menu-option image-size-control mly:relative mly:flex mly:items-center", children: [
+    /* @__PURE__ */ jsx21("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__ */ jsx21(
+      "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__ */ jsx21("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
+import { mergeAttributes as mergeAttributes3, Node as Node4 } from "@tiptap/core";
+import { PluginKey as PluginKey3, Plugin as Plugin3 } from "@tiptap/pm/state";
+var DEFAULT_INLINE_IMAGE_HEIGHT = 20;
+var DEFAULT_INLINE_IMAGE_WIDTH = 20;
+var InlineImageExtension = Node4.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 = mergeAttributes3(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 Plugin3({
+        key: new PluginKey3("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
+import { useEditorState as useEditorState3 } from "@tiptap/react";
+import deepEql3 from "fast-deep-equal";
+var useInlineImageState = (editor) => {
+  const states = useEditorState3({
+    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: deepEql3
+  });
+  return states;
+};
+
 // src/editor/components/ui/link-input-popover.tsx
 import { Link, LinkIcon as LinkIcon2 } from "lucide-react";
 import { useRef as useRef7, useState as useState7 } from "react";
@@ -6275,12 +6635,12 @@ import { FootprintsIcon as FootprintsIcon2, Heading1 as Heading12 } from "lucide
 
 // src/blocks/button.tsx
 import { MousePointer, ArrowUpRightSquare } from "lucide-react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var button = {
   title: "Button",
   description: "Add a call to action button to email.",
   searchTerms: ["link", "button", "cta"],
-  icon: /* @__PURE__ */ jsx19(MousePointer, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(MousePointer, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setButton().run();
   }
@@ -6289,7 +6649,7 @@ var linkCard = {
   title: "Link Card",
   description: "Add a link card to email.",
   searchTerms: ["link", "button", "image"],
-  icon: /* @__PURE__ */ jsx19(ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLinkCard().run();
   },
@@ -6302,12 +6662,12 @@ var linkCard = {
 
 // src/blocks/code.tsx
 import { CodeXmlIcon } from "lucide-react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var htmlCodeBlock = {
   title: "Custom HTML",
   description: "Insert a custom HTML block",
   searchTerms: ["html", "code", "custom"],
-  icon: /* @__PURE__ */ jsx20(CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx23(CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
   }
@@ -6316,12 +6676,12 @@ var htmlCodeBlock = {
 // src/blocks/image.tsx
 import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { ImageIcon } from "lucide-react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var image = {
   title: "Image",
   description: "Full width image",
   searchTerms: ["image"],
-  icon: /* @__PURE__ */ jsx21(ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
   }
@@ -6330,7 +6690,7 @@ var logo = {
   title: "Logo",
   description: "Add your brand logo",
   searchTerms: ["image", "logo"],
-  icon: /* @__PURE__ */ jsx21(ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
   }
@@ -6339,7 +6699,7 @@ var inlineImage = {
   title: "Inline Image",
   description: "Inline image",
   searchTerms: ["image", "inline"],
-  icon: /* @__PURE__ */ jsx21(ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setInlineImage({
       src: "https://maily.to/brand/logo.png"
@@ -6369,12 +6729,12 @@ import {
   RectangleHorizontal,
   Minus
 } from "lucide-react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var columns = {
   title: "Columns",
   description: "Add columns to email.",
   searchTerms: ["layout", "columns"],
-  icon: /* @__PURE__ */ jsx22(ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx25(ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
   }
@@ -6383,7 +6743,7 @@ var section = {
   title: "Section",
   description: "Add a section to email.",
   searchTerms: ["layout", "section"],
-  icon: /* @__PURE__ */ jsx22(RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx25(RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSection().run();
   }
@@ -6392,7 +6752,7 @@ var repeat = {
   title: "Repeat",
   description: "Loop over an array of items.",
   searchTerms: ["repeat", "for", "loop"],
-  icon: /* @__PURE__ */ jsx22(Repeat2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx25(Repeat2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setRepeat().run();
   }
@@ -6401,7 +6761,7 @@ var spacer = {
   title: "Spacer",
   description: "Add space between blocks.",
   searchTerms: ["space", "gap", "divider"],
-  icon: /* @__PURE__ */ jsx22(MoveVertical, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx25(MoveVertical, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
   }
@@ -6410,20 +6770,32 @@ var divider = {
   title: "Divider",
   description: "Add a horizontal divider.",
   searchTerms: ["divider", "line"],
-  icon: /* @__PURE__ */ jsx22(Minus, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx25(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
 import { List, ListOrdered } from "lucide-react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var bulletList = {
   title: "Bullet List",
   description: "Create a simple bullet list.",
   searchTerms: ["unordered", "point"],
-  icon: /* @__PURE__ */ jsx23(List, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx26(List, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
@@ -6432,7 +6804,7 @@ var orderedList = {
   title: "Numbered List",
   description: "Create a list with numbering.",
   searchTerms: ["ordered"],
-  icon: /* @__PURE__ */ jsx23(ListOrdered, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx26(ListOrdered, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
@@ -6449,12 +6821,12 @@ import {
   FootprintsIcon,
   EraserIcon as EraserIcon2
 } from "lucide-react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var text = {
   title: "Text",
   description: "Just start typing with plain text.",
   searchTerms: ["p", "paragraph"],
-  icon: /* @__PURE__ */ jsx24(Text, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(Text, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
   }
@@ -6463,7 +6835,7 @@ var heading1 = {
   title: "Heading 1",
   description: "Big heading.",
   searchTerms: ["h1", "title", "big", "large"],
-  icon: /* @__PURE__ */ jsx24(Heading1, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(Heading1, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   }
@@ -6472,7 +6844,7 @@ var heading2 = {
   title: "Heading 2",
   description: "Medium heading.",
   searchTerms: ["h2", "subtitle", "medium"],
-  icon: /* @__PURE__ */ jsx24(Heading2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(Heading2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
   }
@@ -6481,7 +6853,7 @@ var heading3 = {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ jsx24(Heading3, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(Heading3, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
   }
@@ -6490,7 +6862,7 @@ var hardBreak = {
   title: "Hard Break",
   description: "Add a break between lines.",
   searchTerms: ["break", "line"],
-  icon: /* @__PURE__ */ jsx24(DivideIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(DivideIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHardBreak().run();
   }
@@ -6499,7 +6871,7 @@ var blockquote = {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ jsx24(TextQuote, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(TextQuote, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
@@ -6508,7 +6880,7 @@ var footer = {
   title: "Footer",
   description: "Add a footer text to email.",
   searchTerms: ["footer", "text"],
-  icon: /* @__PURE__ */ jsx24(FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setFooter().run();
   }
@@ -6517,16 +6889,16 @@ var clearLine = {
   title: "Clear Line",
   description: "Clear the current line.",
   searchTerms: ["clear", "line"],
-  icon: /* @__PURE__ */ jsx24(EraserIcon2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx27(EraserIcon2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().selectParentNode().deleteSelection().run();
   }
 };
 
 // src/editor/components/icons/logo-with-cover-image.tsx
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
 function LogoWithCoverImageIcon(props) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6536,7 +6908,7 @@ function LogoWithCoverImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "path",
           {
             fillRule: "evenodd",
@@ -6545,7 +6917,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "path",
           {
             fillRule: "evenodd",
@@ -6554,7 +6926,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "path",
           {
             fillRule: "evenodd",
@@ -6563,8 +6935,8 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx25("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ jsx25("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ jsx28("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
+        /* @__PURE__ */ jsx28(
           "rect",
           {
             x: "3",
@@ -6577,7 +6949,7 @@ function LogoWithCoverImageIcon(props) {
             mask: "url(#path-4-inside-1_1046_19527)"
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "rect",
           {
             x: "6.25",
@@ -6589,16 +6961,16 @@ function LogoWithCoverImageIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx25("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
+        /* @__PURE__ */ jsx28("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
       ]
     })
   );
 }
 
 // src/editor/components/icons/logo-with-text-horizon.tsx
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function LogoWithTextHorizonIcon(props) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6608,7 +6980,7 @@ function LogoWithTextHorizonIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             fillRule: "evenodd",
@@ -6617,7 +6989,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx29(
           "rect",
           {
             x: "6.25",
@@ -6629,8 +7001,8 @@ function LogoWithTextHorizonIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx26("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx29("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx29(
           "path",
           {
             fillRule: "evenodd",
@@ -6639,7 +7011,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx29(
           "path",
           {
             fillRule: "evenodd",
@@ -6654,9 +7026,9 @@ function LogoWithTextHorizonIcon(props) {
 }
 
 // src/editor/components/icons/logo-with-text-vertical.tsx
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 function LogoWithTextVerticalIcon(props) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6666,7 +7038,7 @@ function LogoWithTextVerticalIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           "path",
           {
             fillRule: "evenodd",
@@ -6675,7 +7047,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           "rect",
           {
             x: "4.25",
@@ -6687,8 +7059,8 @@ function LogoWithTextVerticalIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx27("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx30(
           "path",
           {
             fillRule: "evenodd",
@@ -6697,7 +7069,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           "path",
           {
             fillRule: "evenodd",
@@ -6712,12 +7084,12 @@ function LogoWithTextVerticalIcon(props) {
 }
 
 // src/blocks/headers.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var headerLogoWithTextHorizontal = {
   title: "Logo with Text (Horizontal)",
   description: "Logo and a text horizontally",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ jsx28(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx31(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent({
       type: "columns",
@@ -6781,7 +7153,7 @@ var headerLogoWithTextVertical = {
   title: "Logo with Text (Vertical)",
   description: "Logo and a text vertically",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ jsx28(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx31(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent([
       {
@@ -6812,7 +7184,7 @@ var headerLogoWithCoverImage = {
   title: "Logo with Cover Image",
   description: "Logo and a cover image",
   searchTerms: ["logo", "cover", "image"],
-  icon: /* @__PURE__ */ jsx28(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx31(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
       year: "numeric",
@@ -6905,12 +7277,12 @@ import {
   LayoutTemplateIcon,
   RectangleHorizontalIcon
 } from "lucide-react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var footerCopyrightText = {
   title: "Footer Copyright",
   description: "Copyright text for the footer.",
   searchTerms: ["footer", "copyright"],
-  icon: /* @__PURE__ */ jsx29(CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx32(CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     editor.chain().focus().deleteRange(range).insertContent({
@@ -6930,7 +7302,7 @@ var footerCommunityFeedbackCta = {
   title: "Footer Community Feedback CTA",
   description: "Community feedback CTA for the footer.",
   searchTerms: ["footer", "community", "feedback", "cta"],
-  icon: /* @__PURE__ */ jsx29(RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx32(RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       {
@@ -6973,7 +7345,7 @@ var footerCompanySignature = {
   title: "Footer Company Signature",
   description: "Company signature for the footer.",
   searchTerms: ["footer", "company", "signature"],
-  icon: /* @__PURE__ */ jsx29(LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx32(LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       { type: "horizontalRule" },
@@ -7127,7 +7499,7 @@ var footerCompanySignature = {
 };
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var DEFAULT_SLASH_COMMANDS = [
   {
     title: "Blocks",
@@ -7162,7 +7534,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Headers",
         description: "Add pre-designed headers block",
         searchTerms: ["header", "headers"],
-        icon: /* @__PURE__ */ jsx30(Heading12, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ jsx33(Heading12, { className: "mly:h-4 mly:w-4" }),
         preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
         commands: [
           headerLogoWithTextVertical,
@@ -7175,7 +7547,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Footers",
         description: "Add pre-designed footers block",
         searchTerms: ["footers"],
-        icon: /* @__PURE__ */ jsx30(FootprintsIcon2, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ jsx33(FootprintsIcon2, { className: "mly:h-4 mly:w-4" }),
         commands: [
           footerCopyrightText,
           footerCommunityFeedbackCta,
@@ -7188,7 +7560,7 @@ var DEFAULT_SLASH_COMMANDS = [
 ];
 
 // src/editor/provider.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
 var MailyContext = createContext({
   placeholderUrl: DEFAULT_PLACEHOLDER_URL,
@@ -7196,7 +7568,7 @@ var MailyContext = createContext({
 });
 function MailyProvider(props) {
   const _a = props, { children } = _a, defaultValues = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx31(MailyContext.Provider, { value: defaultValues, children });
+  return /* @__PURE__ */ jsx34(MailyContext.Provider, { value: defaultValues, children });
 }
 function useMailyContext() {
   const values = useContext(MailyContext);
@@ -7207,11 +7579,11 @@ function useMailyContext() {
 }
 
 // src/editor/components/ui/link-input-popover.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/editor/nodes/variable/variable.ts
-import { mergeAttributes as mergeAttributes3, Node as Node4 } from "@tiptap/core";
-import { PluginKey as PluginKey3 } from "@tiptap/pm/state";
+import { mergeAttributes as mergeAttributes4, Node as Node5 } from "@tiptap/core";
+import { PluginKey as PluginKey4 } from "@tiptap/pm/state";
 import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 import Suggestion from "@tiptap/suggestion";
 
@@ -7229,7 +7601,7 @@ import {
   useRef as useRef6,
   useState as useState6
 } from "react";
-import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 var VariableSuggestionsPopover = forwardRef5((props, ref) => {
   const { items, onSelectItem } = props;
   const [selectedIndex, setSelectedIndex] = useState6(0);
@@ -7275,17 +7647,17 @@ var VariableSuggestionsPopover = forwardRef5((props, ref) => {
       onSelectItem(item);
     }
   }));
-  return /* @__PURE__ */ jsxs14("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__ */ jsxs14("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__ */ jsx32("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
-      /* @__PURE__ */ jsx32(VariableIcon, { children: /* @__PURE__ */ jsx32(Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+  return /* @__PURE__ */ jsxs16("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__ */ jsxs16("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__ */ jsx35("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
+      /* @__PURE__ */ jsx35(VariableIcon, { children: /* @__PURE__ */ jsx35(Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx35(
       "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__ */ jsx32("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__ */ jsxs14(
+        children: /* @__PURE__ */ jsx35("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__ */ jsxs16(
           "button",
           {
             ref: (el) => itemRefs.current[index] = el,
@@ -7295,27 +7667,27 @@ var VariableSuggestionsPopover = forwardRef5((props, ref) => {
               index === selectedIndex ? "mly:bg-soft-gray" : "mly:bg-white"
             ),
             children: [
-              /* @__PURE__ */ jsx32(Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
+              /* @__PURE__ */ jsx35(Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
               (item == null ? void 0 : item.label) || item.name
             ]
           },
           index
-        )) : /* @__PURE__ */ jsx32("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__ */ jsx35("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__ */ jsxs14("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__ */ jsxs14("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
-        /* @__PURE__ */ jsx32(VariableIcon, { children: /* @__PURE__ */ jsx32(ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ jsx32(VariableIcon, { children: /* @__PURE__ */ jsx32(ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ jsx32("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
+    /* @__PURE__ */ jsxs16("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__ */ jsxs16("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
+        /* @__PURE__ */ jsx35(VariableIcon, { children: /* @__PURE__ */ jsx35(ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
+        /* @__PURE__ */ jsx35(VariableIcon, { children: /* @__PURE__ */ jsx35(ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
+        /* @__PURE__ */ jsx35("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
       ] }),
-      /* @__PURE__ */ jsx32(VariableIcon, { children: /* @__PURE__ */ jsx32(CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+      /* @__PURE__ */ jsx35(VariableIcon, { children: /* @__PURE__ */ jsx35(CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] })
   ] });
 });
 function VariableIcon(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn(
@@ -7330,8 +7702,8 @@ function VariableIcon(props) {
 // src/editor/nodes/variable/variable-view.tsx
 import { NodeViewWrapper as NodeViewWrapper3 } from "@tiptap/react";
 import { AlertTriangle, Braces as Braces2, Pencil } from "lucide-react";
-import { useMemo as useMemo5 } from "react";
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useMemo as useMemo6 } from "react";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 function VariableView(props) {
   const { node, updateAttributes: updateAttributes2, editor } = props;
   const {
@@ -7341,24 +7713,24 @@ function VariableView(props) {
     hideDefaultValue = false,
     label
   } = node.attrs;
-  const renderVariable = useMemo5(() => {
+  const renderVariable = useMemo6(() => {
     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__ */ jsx33(
+  return /* @__PURE__ */ jsx36(
     NodeViewWrapper3,
     {
       className: "react-component mly:inline-block mly:leading-none",
       draggable: "false",
-      children: /* @__PURE__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs17(
         Popover,
         {
           onOpenChange: (open) => {
             editor.storage.variable.popover = open;
           },
           children: [
-            /* @__PURE__ */ jsx33(PopoverTrigger, { children: renderVariable({
+            /* @__PURE__ */ jsx36(PopoverTrigger, { children: renderVariable({
               variable: {
                 name: id,
                 required,
@@ -7369,7 +7741,7 @@ function VariableView(props) {
               editor,
               from: "content-variable"
             }) }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx36(
               PopoverContent,
               {
                 align: "start",
@@ -7378,10 +7750,10 @@ function VariableView(props) {
                 sideOffset: 8,
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 onCloseAutoFocus: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ jsx33(TooltipProvider, { children: /* @__PURE__ */ jsxs15("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-                  /* @__PURE__ */ jsxs15("label", { className: "mly:relative", children: [
-                    /* @__PURE__ */ jsx33("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
-                    /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx36(TooltipProvider, { children: /* @__PURE__ */ jsxs17("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+                  /* @__PURE__ */ jsxs17("label", { className: "mly:relative", children: [
+                    /* @__PURE__ */ jsx36("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
+                    /* @__PURE__ */ jsx36(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: id != null ? id : "",
@@ -7395,11 +7767,11 @@ function VariableView(props) {
                       })
                     )
                   ] }),
-                  !hideDefaultValue && /* @__PURE__ */ jsxs15(Fragment4, { children: [
-                    /* @__PURE__ */ jsx33(Divider, { className: "mly:mx-1.5" }),
-                    /* @__PURE__ */ jsxs15("label", { className: "mly:relative", children: [
-                      /* @__PURE__ */ jsx33("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
-                      /* @__PURE__ */ jsx33(
+                  !hideDefaultValue && /* @__PURE__ */ jsxs17(Fragment5, { children: [
+                    /* @__PURE__ */ jsx36(Divider, { className: "mly:mx-1.5" }),
+                    /* @__PURE__ */ jsxs17("label", { className: "mly:relative", children: [
+                      /* @__PURE__ */ jsx36("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
+                      /* @__PURE__ */ jsx36(
                         "input",
                         __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                           value: fallback != null ? fallback : "",
@@ -7412,7 +7784,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__ */ jsx33("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ jsx33(Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
+                      /* @__PURE__ */ jsx36("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ jsx36(Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
                     ] })
                   ] })
                 ] }) })
@@ -7429,13 +7801,13 @@ var DefaultRenderVariable = (props) => {
   const { name, required, valid, label } = variable;
   const variableLabel = label || name;
   if (from === "button-variable") {
-    return /* @__PURE__ */ jsxs15("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__ */ jsx33(Braces2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-      /* @__PURE__ */ jsx33("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+    return /* @__PURE__ */ jsxs17("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__ */ jsx36(Braces2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
+      /* @__PURE__ */ jsx36("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
     ] });
   }
   if (from === "bubble-variable") {
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         className: cn(
@@ -7443,21 +7815,21 @@ var DefaultRenderVariable = (props) => {
           !valid && "mly:border-rose-400 mly:bg-rose-50 mly:text-rose-600 mly:hover:bg-rose-100"
         ),
         children: [
-          /* @__PURE__ */ jsx33(Braces2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
-          /* @__PURE__ */ jsx33("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+          /* @__PURE__ */ jsx36(Braces2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+          /* @__PURE__ */ jsx36("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "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__ */ jsx33(Braces2, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+        /* @__PURE__ */ jsx36(Braces2, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
         variableLabel,
-        required && !fallback && /* @__PURE__ */ jsx33(AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
+        required && !fallback && /* @__PURE__ */ jsx36(AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
       ]
     }
   );
@@ -7468,8 +7840,8 @@ var DEFAULT_VARIABLE_TRIGGER_CHAR = "@";
 var DEFAULT_VARIABLES = [];
 var DEFAULT_RENDER_VARIABLE_FUNCTION = DefaultRenderVariable;
 var DEFAULT_VARIABLE_SUGGESTION_POPOVER = VariableSuggestionsPopover;
-var VariablePluginKey = new PluginKey3("variable");
-var VariableExtension = Node4.create({
+var VariablePluginKey = new PluginKey4("variable");
+var VariableExtension = Node5.create({
   name: "variable",
   group: "inline",
   inline: true,
@@ -7585,7 +7957,7 @@ var VariableExtension = Node4.create({
   renderHTML({ node, HTMLAttributes: HTMLAttributes2 }) {
     return [
       "div",
-      mergeAttributes3({ "data-type": this.name }, HTMLAttributes2),
+      mergeAttributes4({ "data-type": this.name }, HTMLAttributes2),
       this.options.renderLabel({
         options: this.options,
         node
@@ -7638,7 +8010,7 @@ var VariableExtension = Node4.create({
 });
 
 // src/editor/components/ui/link-input-popover.tsx
-import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
 function LinkInputPopover(props) {
   var _a, _b;
   const {
@@ -7657,7 +8029,7 @@ function LinkInputPopover(props) {
   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 = useMemo6(() => {
+  const autoCompleteOptions = useMemo7(() => {
     const withoutTrigger = defaultValue.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -7668,18 +8040,18 @@ function LinkInputPopover(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, variableTriggerCharacter, defaultValue, editor]);
-  const popoverButton = /* @__PURE__ */ jsx34(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
+  const popoverButton = /* @__PURE__ */ jsx37(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(
     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__ */ jsx34(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
+      children: /* @__PURE__ */ jsx37(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
     }
   ) });
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18(
     Popover,
     {
       open: isOpen,
@@ -7693,9 +8065,9 @@ function LinkInputPopover(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ jsxs16(Tooltip, { children: [
-          /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ jsx34(
+        tooltip ? /* @__PURE__ */ jsxs18(Tooltip, { children: [
+          /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ jsx37(
             TooltipContent,
             {
               sideOffset: 8,
@@ -7704,7 +8076,7 @@ function LinkInputPopover(props) {
             }
           )
         ] }) : popoverButton,
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx37(
           PopoverContent,
           {
             align: "end",
@@ -7712,7 +8084,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__ */ jsx34(
+            children: /* @__PURE__ */ jsx37(
               "form",
               {
                 onSubmit: (e) => {
@@ -7724,8 +8096,8 @@ function LinkInputPopover(props) {
                   onValueChange == null ? void 0 : onValueChange(input.value);
                   setIsOpen(false);
                 },
-                children: /* @__PURE__ */ jsxs16("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
-                  !isEditing && /* @__PURE__ */ jsx34("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__ */ jsx34(
+                children: /* @__PURE__ */ jsxs18("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
+                  !isEditing && /* @__PURE__ */ jsx37("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__ */ jsx37(
                     "button",
                     {
                       onClick: () => {
@@ -7746,9 +8118,9 @@ function LinkInputPopover(props) {
                       })
                     }
                   ) }),
-                  isEditing && /* @__PURE__ */ jsxs16("div", { className: "mly:relative", children: [
-                    /* @__PURE__ */ jsx34("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ jsx34(LinkIcon2, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
-                    /* @__PURE__ */ jsx34(
+                  isEditing && /* @__PURE__ */ jsxs18("div", { className: "mly:relative", children: [
+                    /* @__PURE__ */ jsx37("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ jsx37(LinkIcon2, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
+                    /* @__PURE__ */ jsx37(
                       InputAutocomplete,
                       {
                         editor,
@@ -7770,399 +8142,22 @@ function LinkInputPopover(props) {
                           onValueChange == null ? void 0 : onValueChange(value, isVariable2);
                           setIsOpen(false);
                         }
-                      }
-                    )
-                  ] })
-                ] })
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/editor/components/image-menu/image-size.tsx
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
-function ImageSize(props) {
-  const { value, onValueChange, dimension } = props;
-  return /* @__PURE__ */ jsxs17("label", { className: "mly:relative mly:flex mly:items-center", children: [
-    /* @__PURE__ */ jsx35("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__ */ jsx35(
-      "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__ */ jsx35("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
-import { useEditorState as useEditorState2 } from "@tiptap/react";
-import deepEql2 from "fast-deep-equal";
-var useImageState = (editor) => {
-  const states = useEditorState2({
-    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: deepEql2
-  });
-  return states;
-};
-
-// src/editor/components/image-menu/image-bubble-menu.tsx
-import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs18 } from "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: [sticky2],
-      sticky: "popper",
-      maxWidth: "100%"
-    }
-  });
-  const { lockAspectRatio } = state;
-  return /* @__PURE__ */ jsx36(
-    BubbleMenu2,
-    __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__ */ jsxs18(TooltipProvider, { children: [
-        state.isLogoActive && state.imageSrc && /* @__PURE__ */ jsxs18(Fragment5, { children: [
-          /* @__PURE__ */ jsx36(
-            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__ */ jsx36(Divider, {})
-        ] }),
-        /* @__PURE__ */ jsxs18("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ jsx36(
-            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__ */ jsx36(
-            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: ImageDown,
-              editor,
-              isVariable: state.isSrcVariable
-            }
-          ),
-          state.isImageActive && /* @__PURE__ */ jsx36(
-            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__ */ jsxs18(Fragment5, { children: [
-          /* @__PURE__ */ jsx36(Divider, {}),
-          /* @__PURE__ */ jsx36(
-            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__ */ jsxs18("div", { className: "mly:flex mly:gap-x-0.5", children: [
-            /* @__PURE__ */ jsx36(
-              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__ */ jsx36(
-              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__ */ jsx36(
-              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 ? LockIcon : LockOpenIcon,
-                tooltip: "Lock Aspect Ratio"
+                      }
+                    )
+                  ] })
+                ] })
               }
             )
-          ] })
-        ] })
-      ] })
-    })
+          }
+        )
+      ]
+    }
   );
 }
 
-// src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu3 } from "@tiptap/react";
-import { sticky as sticky3 } from "tippy.js";
-
-// src/editor/nodes/inline-image/inline-image.tsx
-import { mergeAttributes as mergeAttributes4, Node as Node5 } from "@tiptap/core";
-import { PluginKey as PluginKey4, Plugin as Plugin3 } from "@tiptap/pm/state";
-var DEFAULT_INLINE_IMAGE_HEIGHT = 20;
-var DEFAULT_INLINE_IMAGE_WIDTH = 20;
-var InlineImageExtension = Node5.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 = mergeAttributes4(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 Plugin3({
-        key: new PluginKey4("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
-import { useEditorState as useEditorState3 } from "@tiptap/react";
-import deepEql3 from "fast-deep-equal";
-var useInlineImageState = (editor) => {
-  const states = useEditorState3({
-    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: deepEql3
-  });
-  return states;
-};
-
 // src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
 import { ImageDownIcon } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 function InlineImageBubbleMenu(props) {
   var _a, _b;
   const { editor, appendTo } = props;
@@ -8186,12 +8181,12 @@ function InlineImageBubbleMenu(props) {
       maxWidth: "100%"
     }
   });
-  return /* @__PURE__ */ jsx37(
-    BubbleMenu3,
+  return /* @__PURE__ */ jsx38(
+    BubbleMenu4,
     __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__ */ jsx37(TooltipProvider, { children: /* @__PURE__ */ jsxs19("div", { className: "mly:flex mly:gap-x-0.5", children: [
-        /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(TooltipProvider, { children: /* @__PURE__ */ jsxs19("div", { className: "mly:flex mly:gap-x-0.5", children: [
+        /* @__PURE__ */ jsx38(
           LinkInputPopover,
           {
             defaultValue: (_a = state == null ? void 0 : state.src) != null ? _a : "",
@@ -8207,7 +8202,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isSrcVariable
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           LinkInputPopover,
           {
             defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
@@ -8222,7 +8217,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isExternalLinkVariable
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           ImageSize,
           {
             dimension: "height",
@@ -8241,9 +8236,9 @@ function InlineImageBubbleMenu(props) {
 }
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu4, findChildren } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu5, findChildren } from "@tiptap/react";
 import { InfoIcon as InfoIcon2 } from "lucide-react";
-import { useCallback as useCallback7, useMemo as useMemo7, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo8, useRef as useRef8, useState as useState8 } from "react";
 import { sticky as sticky4 } from "tippy.js";
 
 // src/editor/components/repeat-menu/use-repeat-state.ts
@@ -8266,7 +8261,7 @@ var useRepeatState = (editor) => {
 };
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 function RepeatBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
@@ -8310,7 +8305,7 @@ function RepeatBubbleMenu(props) {
   const inputRef = useRef8(null);
   const [isUpdatingKey, setIsUpdatingKey] = useState8(false);
   const eachKey = (state == null ? void 0 : state.each) || "";
-  const autoCompleteOptions = useMemo7(() => {
+  const autoCompleteOptions = useMemo8(() => {
     return processVariables(variables, {
       query: eachKey || "",
       editor,
@@ -8318,21 +8313,21 @@ function RepeatBubbleMenu(props) {
     }).map((variable) => variable.name);
   }, [variables, eachKey, editor]);
   const isValidEachKey = eachKey;
-  return /* @__PURE__ */ jsx38(
-    BubbleMenu4,
+  return /* @__PURE__ */ jsx39(
+    BubbleMenu5,
     __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__ */ jsxs20(TooltipProvider, { children: [
         /* @__PURE__ */ jsxs20("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
           "Repeat",
           /* @__PURE__ */ jsxs20(Tooltip, { children: [
-            /* @__PURE__ */ jsx38(TooltipTrigger, { children: /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(TooltipTrigger, { children: /* @__PURE__ */ jsx39(
               InfoIcon2,
               {
                 className: cn("mly:size-3 mly:stroke-[2.5] mly:text-gray-500")
               }
             ) }),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(
               TooltipContent,
               {
                 sideOffset: 14,
@@ -8343,7 +8338,7 @@ function RepeatBubbleMenu(props) {
             )
           ] })
         ] }),
-        !isUpdatingKey && /* @__PURE__ */ jsx38(
+        !isUpdatingKey && /* @__PURE__ */ jsx39(
           "button",
           {
             onClick: () => {
@@ -8364,7 +8359,7 @@ function RepeatBubbleMenu(props) {
             })
           }
         ),
-        isUpdatingKey && /* @__PURE__ */ jsx38(
+        isUpdatingKey && /* @__PURE__ */ jsx39(
           "form",
           {
             onSubmit: (e) => {
@@ -8376,7 +8371,7 @@ function RepeatBubbleMenu(props) {
                 setIsUpdatingKey(false);
               }
             },
-            children: /* @__PURE__ */ jsx38(
+            children: /* @__PURE__ */ jsx39(
               InputAutocomplete,
               {
                 editor,
@@ -8402,8 +8397,8 @@ function RepeatBubbleMenu(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsx38(Divider, {}),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(Divider, {}),
+        /* @__PURE__ */ jsx39(
           ShowPopover,
           {
             showIfKey: state.currentShowIfKey,
@@ -8421,13 +8416,13 @@ function RepeatBubbleMenu(props) {
 }
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu5, findChildren as findChildren2 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu6, findChildren as findChildren2 } from "@tiptap/react";
 import { ChevronUp, Trash as Trash3 } from "lucide-react";
 import { useCallback as useCallback8 } from "react";
 import { sticky as sticky5 } from "tippy.js";
 
 // src/editor/components/icons/border-color.tsx
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 function BorderColor(props) {
   const _a = props, { topBarClassName } = _a, rest = __objRest(_a, ["topBarClassName"]);
   return /* @__PURE__ */ jsxs21(
@@ -8440,8 +8435,8 @@ function BorderColor(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx39("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx40(
           "path",
           {
             d: "M0.666504 9V6.33333C0.666504 3.38781 3.05432 1 5.99984 1H10.6665",
@@ -8455,9 +8450,9 @@ function BorderColor(props) {
 }
 
 // src/editor/components/icons/margin-icon.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function MarginIcon(props) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "svg",
     __spreadProps(__spreadValues({
       width: 12,
@@ -8466,7 +8461,7 @@ function MarginIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx41(
         "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",
@@ -8480,9 +8475,9 @@ function MarginIcon(props) {
 }
 
 // src/editor/components/icons/padding-icon.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function PaddingIcon(props) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "svg",
     __spreadProps(__spreadValues({
       width: 10,
@@ -8491,7 +8486,7 @@ function PaddingIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         "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",
@@ -8506,7 +8501,7 @@ function PaddingIcon(props) {
 
 // src/editor/components/ui/color-picker.tsx
 import { HexColorPicker, HexColorInput } from "react-colorful";
-import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 function ColorPicker(props) {
   const {
     color,
@@ -8524,14 +8519,14 @@ function ColorPicker(props) {
       onColorChange(color2);
     });
   };
-  const popoverButton = /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ jsx42(
+  const popoverButton = /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ jsx43(
     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__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         "div",
         {
           className: cn(
@@ -8555,8 +8550,8 @@ function ColorPicker(props) {
       },
       children: [
         tooltip ? /* @__PURE__ */ jsxs22(Tooltip, { children: [
-          /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ jsx43(
             TooltipContent,
             {
               sideOffset: 8,
@@ -8565,13 +8560,13 @@ function ColorPicker(props) {
             }
           )
         ] }) : popoverButton,
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           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__ */ jsxs22("div", { className: "mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
-              /* @__PURE__ */ jsx42(
+            children: /* @__PURE__ */ jsxs22("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__ */ jsx43(
                 HexColorPicker,
                 {
                   color,
@@ -8579,20 +8574,20 @@ function ColorPicker(props) {
                   className: "mly:flex mly:w-full! mly:flex-col mly:gap-4"
                 }
               ),
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(
                 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__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx42("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
-                /* @__PURE__ */ jsx42("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
-                /* @__PURE__ */ jsx42("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ jsx42(
+                /* @__PURE__ */ jsx43("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
+                /* @__PURE__ */ jsx43("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
+                /* @__PURE__ */ jsx43("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ jsx43(
                   BaseButton,
                   {
                     variant: "ghost",
@@ -8600,7 +8595,7 @@ function ColorPicker(props) {
                     className: "!mly:size-7 mly:shrink-0",
                     type: "button",
                     onClick: () => handleColorChange(suggestedColor),
-                    children: /* @__PURE__ */ jsx42(
+                    children: /* @__PURE__ */ jsx43(
                       "div",
                       {
                         className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded",
@@ -8653,7 +8648,7 @@ var useSectionState = (editor) => {
 };
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 function SectionBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
@@ -8700,12 +8695,12 @@ function SectionBubbleMenu(props) {
     { value: "6", label: "Smooth" },
     { value: "9999", label: "Round" }
   ];
-  return /* @__PURE__ */ jsx43(
-    BubbleMenu5,
+  return /* @__PURE__ */ jsx44(
+    BubbleMenu6,
     __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",
+      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__ */ jsxs23(TooltipProvider, { children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           AlignmentSwitch,
           {
             alignment: state.currentAlignment,
@@ -8717,9 +8712,9 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        /* @__PURE__ */ jsx43(Divider, {}),
-        /* @__PURE__ */ jsxs23("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(Divider, {}),
+        /* @__PURE__ */ jsxs23("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ jsx44(
             Select,
             {
               label: "Border Radius",
@@ -8735,7 +8730,7 @@ function SectionBubbleMenu(props) {
               className: "mly:capitalize"
             }
           ),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44(
             Select,
             {
               label: "Border Width",
@@ -8757,8 +8752,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx43(Divider, {}),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(Divider, {}),
+        /* @__PURE__ */ jsx44(
           Select,
           {
             icon: MarginIcon,
@@ -8786,8 +8781,8 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ jsx43(Divider, {}),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(Divider, {}),
+        /* @__PURE__ */ jsx44(
           Select,
           {
             icon: PaddingIcon,
@@ -8815,9 +8810,9 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ jsx43(Divider, {}),
-        /* @__PURE__ */ jsxs23("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(Divider, {}),
+        /* @__PURE__ */ jsxs23("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ jsx44(
             ColorPicker,
             {
               color: state.currentBorderColor,
@@ -8828,14 +8823,14 @@ function SectionBubbleMenu(props) {
                 });
               },
               tooltip: "Border Color",
-              children: /* @__PURE__ */ jsx43(
+              children: /* @__PURE__ */ jsx44(
                 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__ */ jsx43(
+                  children: /* @__PURE__ */ jsx44(
                     BorderColor,
                     {
                       className: "mly:size-3 mly:shrink-0",
@@ -8849,7 +8844,7 @@ function SectionBubbleMenu(props) {
               )
             }
           ),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44(
             ColorPicker,
             {
               color: state.currentBackgroundColor,
@@ -8865,8 +8860,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx43(Divider, {}),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(Divider, {}),
+        /* @__PURE__ */ jsx44(
           BubbleMenuButton,
           {
             icon: Trash3,
@@ -8877,16 +8872,16 @@ function SectionBubbleMenu(props) {
           }
         ),
         state.isColumnsActive && /* @__PURE__ */ jsxs23(Fragment6, { children: [
-          /* @__PURE__ */ jsx43(Divider, {}),
+          /* @__PURE__ */ jsx44(Divider, {}),
           /* @__PURE__ */ jsxs23(Popover, { children: [
-            /* @__PURE__ */ jsxs23(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: [
+            /* @__PURE__ */ jsxs23(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__ */ jsx43(ChevronUp, { className: "mly:h-3 mly:w-3" })
+              /* @__PURE__ */ jsx44(ChevronUp, { className: "mly:h-3 mly:w-3" })
             ] }),
-            /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx44(
               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",
@@ -8896,7 +8891,7 @@ function SectionBubbleMenu(props) {
                 onCloseAutoFocus: (e) => {
                   e.preventDefault();
                 },
-                children: /* @__PURE__ */ jsx43(ColumnsBubbleMenuContent, { editor })
+                children: /* @__PURE__ */ jsx44(ColumnsBubbleMenuContent, { editor })
               }
             )
           ] })
@@ -8907,7 +8902,7 @@ function SectionBubbleMenu(props) {
 }
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu6 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu7 } from "@tiptap/react";
 
 // src/editor/components/spacer-menu/use-spacer-state.ts
 import { useEditorState as useEditorState6 } from "@tiptap/react";
@@ -8927,14 +8922,14 @@ var useSpacerState = (editor) => {
 };
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function SpacerBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
     return null;
   }
-  const items = useMemo8(
+  const items = useMemo9(
     () => spacing.map((space) => {
       const { value: height, short: name } = space;
       return {
@@ -8960,11 +8955,11 @@ function SpacerBubbleMenu(props) {
     }
   });
   const state = useSpacerState(editor);
-  return /* @__PURE__ */ jsx44(
-    BubbleMenu6,
+  return /* @__PURE__ */ jsx45(
+    BubbleMenu7,
     __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__ */ jsx44(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ jsx44(
+      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__ */ jsx45(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ jsx45(
         BubbleMenuButton,
         __spreadValues({
           className: "!mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
@@ -9088,6 +9083,17 @@ var ColumnsExtension = Node6.create({
 import { InputRule } from "@tiptap/core";
 import { HorizontalRule as TipTapHorizontalRule } from "@tiptap/extension-horizontal-rule";
 var HorizontalRule = TipTapHorizontalRule.extend({
+  addAttributes() {
+    return {
+      size: {
+        default: 32,
+        parseHTML: (element) => Number(element.getAttribute("data-size") || 32),
+        renderHTML: (attributes) => ({
+          "data-size": attributes.size
+        })
+      }
+    };
+  },
   addInputRules() {
     return [
       new InputRule({
@@ -9108,7 +9114,7 @@ var HorizontalRule = TipTapHorizontalRule.extend({
   addOptions() {
     return {
       HTMLAttributes: {
-        class: "mly:relative"
+        class: "mly:relative mly-divider-node"
       }
     };
   }
@@ -9205,11 +9211,11 @@ import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
 
 // src/editor/components/input.tsx
 import * as React5 from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var Input = React5.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       "input",
       __spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
         type,
@@ -9227,11 +9233,11 @@ Input.displayName = "Input";
 
 // src/editor/components/textarea.tsx
 import * as React6 from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var Textarea = React6.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(
       "textarea",
       __spreadValues({
         className: cn(
@@ -9247,18 +9253,18 @@ var Textarea = React6.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/editor/nodes/link-card.tsx
-import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
 function LinkCardComponent(props) {
   const { title, description, link, linkTitle, image: image2, badgeText, subTitle } = props.node.attrs;
   const { getPos, editor } = props;
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     NodeViewWrapper4,
     {
       className: `react-component ${props.selected && "ProseMirror-selectednode"}`,
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
       children: /* @__PURE__ */ jsxs24(Popover, { open: props.selected, children: [
-        /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
           "div",
           {
             tabIndex: -1,
@@ -9268,7 +9274,7 @@ function LinkCardComponent(props) {
               editor.commands.setNodeSelection(pos);
             },
             children: /* @__PURE__ */ jsxs24("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
-              image2 && /* @__PURE__ */ jsx47("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ jsx47(
+              image2 && /* @__PURE__ */ jsx48("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ jsx48(
                 "img",
                 {
                   src: image2,
@@ -9277,17 +9283,17 @@ function LinkCardComponent(props) {
                   draggable: editor.isEditable
                 }
               ) }),
-              /* @__PURE__ */ jsx47("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ jsxs24("div", { className: cn("mly:flex mly:flex-col"), children: [
+              /* @__PURE__ */ jsx48("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ jsxs24("div", { className: cn("mly:flex mly:flex-col"), children: [
                 /* @__PURE__ */ jsxs24("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
-                  /* @__PURE__ */ jsx47("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
-                  badgeText && /* @__PURE__ */ jsx47("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__ */ jsx48("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
+                  badgeText && /* @__PURE__ */ jsx48("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__ */ jsx47("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__ */ jsx48("span", { className: "!mly:font-base mly:font-regular mly:rounded-md mly:leading-none mly:text-gray-400 text-xs", children: subTitle })
                 ] }),
                 /* @__PURE__ */ jsxs24("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
                   description,
                   " ",
-                  linkTitle ? /* @__PURE__ */ jsx47("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
+                  linkTitle ? /* @__PURE__ */ jsx48("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
                 ] })
               ] }) })
             ] })
@@ -9303,8 +9309,8 @@ function LinkCardComponent(props) {
             onCloseAutoFocus: (e) => e.preventDefault(),
             children: [
               /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
+                /* @__PURE__ */ jsx48(
                   Input,
                   {
                     placeholder: "Add Image",
@@ -9319,8 +9325,8 @@ function LinkCardComponent(props) {
                 )
               ] }),
               /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
+                /* @__PURE__ */ jsx48(
                   Input,
                   {
                     placeholder: "Add title",
@@ -9334,8 +9340,8 @@ function LinkCardComponent(props) {
                 )
               ] }),
               /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
+                /* @__PURE__ */ jsx48(
                   Textarea,
                   {
                     placeholder: "Add description here",
@@ -9350,8 +9356,8 @@ function LinkCardComponent(props) {
               ] }),
               /* @__PURE__ */ jsxs24("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
                 /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
-                  /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
+                  /* @__PURE__ */ jsx48(
                     Input,
                     {
                       placeholder: "Add link title here",
@@ -9365,8 +9371,8 @@ function LinkCardComponent(props) {
                   )
                 ] }),
                 /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
-                  /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
+                  /* @__PURE__ */ jsx48(
                     Input,
                     {
                       placeholder: "Add link here",
@@ -9382,8 +9388,8 @@ function LinkCardComponent(props) {
               ] }),
               /* @__PURE__ */ jsxs24("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
                 /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
-                  /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
+                  /* @__PURE__ */ jsx48(
                     Input,
                     {
                       placeholder: "Add badge text here",
@@ -9397,8 +9403,8 @@ function LinkCardComponent(props) {
                   )
                 ] }),
                 /* @__PURE__ */ jsxs24("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx47("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
-                  /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
+                  /* @__PURE__ */ jsx48(
                     Input,
                     {
                       placeholder: "Add sub title here",
@@ -9497,11 +9503,12 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer4 } from "@tiptap/react";
 
 // src/editor/nodes/button/button-view.tsx
 import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
-import { useMemo as useMemo10 } from "react";
+import { AlignCenter as AlignCenter3, AlignLeft as AlignLeft3, AlignRight as AlignRight3 } from "lucide-react";
+import { useMemo as useMemo11 } from "react";
 
 // src/editor/nodes/button/button-label-input.tsx
-import { useMemo as useMemo9, useRef as useRef9, useState as useState9 } from "react";
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useMemo as useMemo10, useRef as useRef9, useState as useState9 } from "react";
+import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 function ButtonLabelInput(props) {
   var _a, _b;
   const { value, onValueChange, isVariable, editor } = props;
@@ -9512,7 +9519,7 @@ function ButtonLabelInput(props) {
   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 = useMemo9(() => {
+  const autoCompleteOptions = useMemo10(() => {
     const withoutTrigger = value.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -9524,7 +9531,7 @@ function ButtonLabelInput(props) {
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
   return /* @__PURE__ */ jsxs25("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ jsx48(
+    !isEditing && /* @__PURE__ */ jsx49(
       "button",
       {
         onClick: () => {
@@ -9545,7 +9552,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ jsx48(
+    isEditing && /* @__PURE__ */ jsx49(
       InputAutocomplete,
       {
         editor,
@@ -9556,7 +9563,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;
@@ -9572,7 +9579,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -9581,6 +9588,7 @@ function ButtonView(props) {
     alignment,
     variant,
     borderRadius: _radius,
+    size: rawSize,
     buttonColor,
     textColor,
     url: externalLink,
@@ -9592,7 +9600,7 @@ function ButtonView(props) {
   } = node.attrs;
   const opts = useVariableOptions(editor);
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const sizes = useMemo10(
+  const sizes = useMemo11(
     () => ({
       small: {
         paddingX: 24,
@@ -9609,13 +9617,16 @@ function ButtonView(props) {
     }),
     []
   );
-  const size = useMemo10(() => {
+  const size = useMemo11(() => {
     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__ */ jsx49(
+    )) == null ? void 0 : _a[0]) || "medium";
+  }, [rawSize, paddingRight, paddingTop, sizes]);
+  return /* @__PURE__ */ jsx50(
     NodeViewWrapper5,
     {
       draggable: editor.isEditable,
@@ -9625,7 +9636,7 @@ function ButtonView(props) {
         textAlign: alignment
       },
       children: /* @__PURE__ */ jsxs26(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx49("div", { children: /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsx50(
           "button",
           {
             className: cn(
@@ -9668,17 +9679,17 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           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__ */ jsx49(TooltipProvider, { children: /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-              /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx50(TooltipProvider, { children: /* @__PURE__ */ jsxs26("div", { className: "menu-surface menu-inline-gap mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+              /* @__PURE__ */ jsx50(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -9692,9 +9703,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ jsx49(Divider, {}),
-              /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(Divider, {}),
+              /* @__PURE__ */ jsxs26("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ jsx50(
                   Select,
                   {
                     label: "Border Radius",
@@ -9712,7 +9723,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx50(
                   Select,
                   {
                     label: "Style",
@@ -9730,7 +9741,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx50(
                   Select,
                   {
                     label: "Size",
@@ -9743,6 +9754,7 @@ function ButtonView(props) {
                     onValueChange: (value) => {
                       const { paddingX, paddingY } = sizes[value];
                       updateAttributes2({
+                        size: value,
                         paddingTop: paddingY,
                         paddingRight: paddingX,
                         paddingBottom: paddingY,
@@ -9754,20 +9766,48 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx49(Divider, {}),
-              /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ jsx49(
-                  AlignmentSwitch,
+              /* @__PURE__ */ jsx50(Divider, {}),
+              /* @__PURE__ */ jsxs26("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ jsx50(
+                  BubbleMenuButton,
                   {
-                    alignment,
-                    onAlignmentChange: (alignment2) => {
+                    icon: AlignLeft3,
+                    tooltip: "Align Left",
+                    command: () => {
                       updateAttributes2({
-                        alignment: alignment2
+                        alignment: "left"
                       });
-                    }
+                    },
+                    isActive: () => alignment === "left"
+                  }
+                ),
+                /* @__PURE__ */ jsx50(
+                  BubbleMenuButton,
+                  {
+                    icon: AlignCenter3,
+                    tooltip: "Align Center",
+                    command: () => {
+                      updateAttributes2({
+                        alignment: "center"
+                      });
+                    },
+                    isActive: () => alignment === "center"
                   }
                 ),
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx50(
+                  BubbleMenuButton,
+                  {
+                    icon: AlignRight3,
+                    tooltip: "Align Right",
+                    command: () => {
+                      updateAttributes2({
+                        alignment: "right"
+                      });
+                    },
+                    isActive: () => alignment === "right"
+                  }
+                ),
+                /* @__PURE__ */ jsx50(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -9783,13 +9823,13 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx49(Divider, {}),
-              /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(Divider, {}),
+              /* @__PURE__ */ jsxs26("div", { className: "menu-inline-gap mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ jsx50(
                   BackgroundColorPickerPopup,
                   {
                     variant,
-                    color: buttonColor || "transparent",
+                    color: buttonColor || DEFAULT_BUTTON_BACKGROUND_COLOR,
                     onChange: (color) => {
                       updateAttributes2({
                         buttonColor: color
@@ -9797,10 +9837,10 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx50(
                   TextColorPickerPopup,
                   {
-                    color: textColor || "transparent",
+                    color: textColor || DEFAULT_BUTTON_TEXT_COLOR,
                     onChange: (color) => {
                       updateAttributes2({
                         textColor: color
@@ -9818,20 +9858,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx50(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
-          className: "mly:size-7",
-          children: /* @__PURE__ */ jsx49(
+          className: "menu-option mly:size-7",
+          children: /* @__PURE__ */ jsx50(
             "div",
             {
               className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded-full mly:shadow",
@@ -9850,16 +9890,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ jsx49(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx50(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
-      className: "mly:size-7",
+      className: "menu-option mly:size-7",
       children: /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-        /* @__PURE__ */ jsx49("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
+        /* @__PURE__ */ jsx50(
           "div",
           {
             className: "mly:h-[2px] mly:w-3 mly:shrink-0 mly:rounded-md mly:shadow",
@@ -9875,14 +9915,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 = Node9.create({
   name: "button",
   group: "block",
@@ -9976,6 +10017,18 @@ var ButtonExtension = Node9.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) => {
@@ -10018,7 +10071,10 @@ var ButtonExtension = Node9.create({
       setButton: () => ({ commands }) => {
         return commands.insertContent({
           type: this.name,
-          attrs: {},
+          attrs: {
+            buttonColor: DEFAULT_BUTTON_BACKGROUND_COLOR,
+            textColor: DEFAULT_BUTTON_TEXT_COLOR
+          },
           content: []
         });
       },
@@ -10190,18 +10246,18 @@ import { createLowlight, common } from "lowlight";
 
 // src/editor/nodes/html/html-view.tsx
 import { NodeViewContent, NodeViewWrapper as NodeViewWrapper6 } from "@tiptap/react";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function HTMLCodeBlockView(props) {
   const { node } = props;
   const { language } = node.attrs;
   const languageClass = language ? `language-${language}` : "";
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     NodeViewWrapper6,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
-      children: /* @__PURE__ */ jsx50("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx51("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ jsx51(
         NodeViewContent,
         {
           as: "code",
@@ -10351,7 +10407,7 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer6 } from "@tiptap/react";
 // src/editor/nodes/repeat/repeat-view.tsx
 import { NodeViewWrapper as NodeViewWrapper7, NodeViewContent as NodeViewContent2 } from "@tiptap/react";
 import { Repeat2 as Repeat22 } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
 function RepeatView(props) {
   const { editor, getPos } = props;
   return /* @__PURE__ */ jsxs27(
@@ -10362,7 +10418,7 @@ function RepeatView(props) {
       "data-drag-handle": editor.isEditable,
       className: "mly:relative",
       children: [
-        /* @__PURE__ */ jsx51(NodeViewContent2, { className: "is-editable" }),
+        /* @__PURE__ */ jsx52(NodeViewContent2, { className: "is-editable" }),
         /* @__PURE__ */ jsxs27(
           "div",
           {
@@ -10374,8 +10430,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__PURE__ */ jsx51(Repeat22, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
-              /* @__PURE__ */ jsx51("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
+              /* @__PURE__ */ jsx52(Repeat22, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
+              /* @__PURE__ */ jsx52("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
             ]
           }
         )
@@ -10632,7 +10688,7 @@ import tippy2 from "tippy.js";
 // src/editor/extensions/slash-command/slash-command-item.tsx
 import { ChevronRightIcon } from "lucide-react";
 import { useCallback as useCallback9, useState as useState10, useRef as useRef10, useEffect as useEffect7 } from "react";
-import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
 function SlashCommandItem(props) {
   var _a;
   const {
@@ -10656,12 +10712,12 @@ function SlashCommandItem(props) {
   const hasRenderFunction = typeof item.render === "function";
   const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
   let value = /* @__PURE__ */ jsxs28(Fragment7, { children: [
-    /* @__PURE__ */ jsx52("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
+    /* @__PURE__ */ jsx53("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
     /* @__PURE__ */ jsxs28("div", { className: "mly:grow", children: [
-      /* @__PURE__ */ jsx52("p", { className: "mly:font-medium", children: item.title }),
-      /* @__PURE__ */ jsx52("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
+      /* @__PURE__ */ jsx53("p", { className: "mly:font-medium", children: item.title }),
+      /* @__PURE__ */ jsx53("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
     ] }),
-    isSubCommand2 && /* @__PURE__ */ jsx52("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ jsx52(ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
+    isSubCommand2 && /* @__PURE__ */ jsx53("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ jsx53(ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
   ] });
   if (renderFunctionValue !== null && renderFunctionValue !== true) {
     value = renderFunctionValue;
@@ -10693,7 +10749,7 @@ function SlashCommandItem(props) {
     };
   }, []);
   return /* @__PURE__ */ jsxs28(Tooltip, { open, children: [
-    /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
       "button",
       {
         className: cn(
@@ -10708,14 +10764,14 @@ function SlashCommandItem(props) {
         children: value
       }
     ) }),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(
       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__ */ jsxs28(Fragment7, { children: [
-          /* @__PURE__ */ jsx52("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__ */ jsx52(
+          /* @__PURE__ */ jsx53("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__ */ jsx53(
             "img",
             {
               src: item == null ? void 0 : item.preview,
@@ -10723,7 +10779,7 @@ function SlashCommandItem(props) {
               className: "mly:absolute mly:inset-0 mly:h-full mly:w-full mly:object-cover"
             }
           ) }),
-          /* @__PURE__ */ jsx52("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
+          /* @__PURE__ */ jsx53("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
         ] })
       }
     )
@@ -10812,7 +10868,7 @@ function processCommand(options) {
 }
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
 var CommandList = forwardRef8((props, ref) => {
   const { items: groups, command, editor, range, query } = props;
   const [selectedGroupIndex, setSelectedGroupIndex] = useState11(0);
@@ -10950,15 +11006,15 @@ var CommandList = forwardRef8((props, ref) => {
   if (!groups || groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx53(TooltipProvider, { children: /* @__PURE__ */ jsxs29("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__ */ jsx53(
+  return /* @__PURE__ */ jsx54(TooltipProvider, { children: /* @__PURE__ */ jsxs29("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__ */ jsx54(
       "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__ */ jsxs29(Fragment8, { children: [
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             "span",
             {
               className: cn(
@@ -10968,9 +11024,9 @@ var CommandList = forwardRef8((props, ref) => {
               children: group.title
             }
           ),
-          /* @__PURE__ */ jsx53("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ jsx54("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
             const itemKey = `${groupIndex}-${commandIndex}`;
-            return /* @__PURE__ */ jsx53(
+            return /* @__PURE__ */ jsx54(
               SlashCommandItem,
               {
                 item,
@@ -10990,16 +11046,16 @@ var CommandList = forwardRef8((props, ref) => {
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ jsx53("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ jsxs29("div", { className: "mly:flex mly:items-center", children: [
+    /* @__PURE__ */ jsx54("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ jsxs29("div", { className: "mly:flex mly:items-center", children: [
       /* @__PURE__ */ jsxs29("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ jsx53("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
-        /* @__PURE__ */ jsx53("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__ */ jsx54("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
+        /* @__PURE__ */ jsx54("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__ */ jsx53("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
+      /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
       /* @__PURE__ */ jsxs29("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ jsx53("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
+        /* @__PURE__ */ jsx54("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
         " ",
         "to select"
       ] })
@@ -11079,7 +11135,7 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle3, useRef as useRef12 } from "react";
 import tippy3 from "tippy.js";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var VariableList = forwardRef9((props, ref) => {
   var _a;
   const { items = [], editor } = props;
@@ -11108,7 +11164,7 @@ var VariableList = forwardRef9((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     VariableSuggestionPopoverComponent,
     {
       items,
@@ -11292,7 +11348,7 @@ var isCustomNodeSelected = (editor, node) => {
 };
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu7 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu8 } from "@tiptap/react";
 
 // src/editor/components/text-menu/text-bubble-content.tsx
 import {
@@ -11332,7 +11388,7 @@ var useTextMenuState = (editor) => {
 };
 
 // src/editor/components/text-menu/text-bubble-content.tsx
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 function TextBubbleContent(props) {
   var _a, _b, _c, _d;
   const { editor, showListMenu = true } = props;
@@ -11377,8 +11433,8 @@ function TextBubbleContent(props) {
     }
   ];
   return /* @__PURE__ */ jsxs30(Fragment9, { children: [
-    items.map((item, index) => /* @__PURE__ */ jsx55(BubbleMenuButton, __spreadValues({}, item), index)),
-    /* @__PURE__ */ jsx55(
+    items.map((item, index) => /* @__PURE__ */ jsx56(BubbleMenuButton, __spreadValues({}, item), index)),
+    /* @__PURE__ */ jsx56(
       AlignmentSwitch,
       {
         alignment: state.textAlign,
@@ -11388,7 +11444,7 @@ function TextBubbleContent(props) {
       }
     ),
     !state.isListActive && showListMenu && /* @__PURE__ */ jsxs30(Fragment9, { children: [
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx56(
         BubbleMenuButton,
         {
           icon: List2,
@@ -11398,7 +11454,7 @@ function TextBubbleContent(props) {
           tooltip: "Bullet List"
         }
       ),
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx56(
         BubbleMenuButton,
         {
           icon: ListOrdered2,
@@ -11409,7 +11465,7 @@ function TextBubbleContent(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       LinkInputPopover,
       {
         defaultValue: (_d = state == null ? void 0 : state.linkUrl) != null ? _d : "",
@@ -11425,8 +11481,8 @@ function TextBubbleContent(props) {
         isVariable: state.isUrlVariable
       }
     ),
-    /* @__PURE__ */ jsx55(Divider, {}),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(Divider, {}),
+    /* @__PURE__ */ jsx56(
       ColorPicker,
       {
         color: state.currentTextColor,
@@ -11435,16 +11491,16 @@ function TextBubbleContent(props) {
         },
         tooltip: "Text Color",
         suggestedColors,
-        children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx56(
           BaseButton,
           {
             variant: "ghost",
             size: "sm",
             type: "button",
-            className: "mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
+            className: "menu-option mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
             children: /* @__PURE__ */ jsxs30("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-              /* @__PURE__ */ jsx55("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
+              /* @__PURE__ */ jsx56(
                 "div",
                 {
                   className: "mly:h-[2px] mly:w-3",
@@ -11461,32 +11517,32 @@ function TextBubbleContent(props) {
 
 // src/editor/components/text-menu/turn-into-block.tsx
 import { ChevronDownIcon as ChevronDownIcon2, PilcrowIcon } from "lucide-react";
-import { useMemo as useMemo11 } from "react";
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useMemo as useMemo12 } from "react";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var isOption = (option) => option.type === "option";
 var isCategory = (option) => option.type === "category";
 function TurnIntoBlock(props) {
   const { options } = props;
-  const activeItem = useMemo11(
+  const activeItem = useMemo12(
     () => options.find((option) => option.type === "option" && option.isActive()),
     [options]
   );
   const { icon: ActiveIcon = PilcrowIcon } = activeItem || {};
   return /* @__PURE__ */ jsxs31(Popover, { children: [
     /* @__PURE__ */ jsxs31(Tooltip, { children: [
-      /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs31(
+      /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs31(
         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__ */ jsx56(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-            /* @__PURE__ */ jsx56(ChevronDownIcon2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
+            /* @__PURE__ */ jsx57(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
+            /* @__PURE__ */ jsx57(ChevronDownIcon2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsx57(
         TooltipContent,
         {
           sideOffset: 8,
@@ -11495,13 +11551,13 @@ function TurnIntoBlock(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       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__ */ jsxs31(
@@ -11509,20 +11565,23 @@ function TurnIntoBlock(props) {
               {
                 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__ */ jsx56(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
+                  /* @__PURE__ */ jsx57(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
                   option.label
                 ]
               },
               option.id
             );
           } else if (isCategory(option)) {
-            return /* @__PURE__ */ jsx56(
+            return /* @__PURE__ */ jsx57(
               "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
@@ -11619,7 +11678,7 @@ function useTurnIntoBlockOptions(editor) {
 }
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 function TextBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11670,23 +11729,23 @@ function TextBubbleMenu(props) {
     }
   });
   const turnIntoBlockOptions = useTurnIntoBlockOptions(editor);
-  return /* @__PURE__ */ jsx57(
-    BubbleMenu7,
+  return /* @__PURE__ */ jsx58(
+    BubbleMenu8,
     __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",
+      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__ */ jsxs32(TooltipProvider, { children: [
-        /* @__PURE__ */ jsx57(TurnIntoBlock, { options: turnIntoBlockOptions }),
-        /* @__PURE__ */ jsx57(Divider, { className: "mly:mx-0" }),
-        /* @__PURE__ */ jsx57(TextBubbleContent, { editor })
+        /* @__PURE__ */ jsx58(TurnIntoBlock, { options: turnIntoBlockOptions }),
+        /* @__PURE__ */ jsx58(Divider, { className: "mly:mx-0" }),
+        /* @__PURE__ */ jsx58(TextBubbleContent, { editor })
       ] })
     })
   );
 }
 
 // src/editor/components/variable-menu/variable-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu8 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu9 } from "@tiptap/react";
 import { sticky as sticky6 } from "tippy.js";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function VariableBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11709,11 +11768,11 @@ function VariableBubbleMenu(props) {
       placement: "top-start"
     }
   });
-  return /* @__PURE__ */ jsx58(
-    BubbleMenu8,
+  return /* @__PURE__ */ jsx59(
+    BubbleMenu9,
     __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__ */ jsx58(TooltipProvider, { children: /* @__PURE__ */ jsx58(TextBubbleContent, { showListMenu: false, editor }) })
+      children: /* @__PURE__ */ jsx59(TooltipProvider, { children: /* @__PURE__ */ jsx59(TextBubbleContent, { showListMenu: false, editor }) })
     })
   );
 }
@@ -11799,7 +11858,7 @@ function replaceDeprecatedNode(json) {
 }
 
 // src/editor/index.tsx
-import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
 function Editor12(props) {
   const {
     config: {
@@ -11823,7 +11882,7 @@ function Editor12(props) {
     scrollThreshold = 40,
     scrollMargin = 40
   } = props;
-  const formattedContent = useMemo12(() => {
+  const formattedContent = useMemo13(() => {
     if (contentJson) {
       const json = (contentJson == null ? void 0 : contentJson.type) === "doc" ? contentJson : {
         type: "doc",
@@ -11872,7 +11931,7 @@ function Editor12(props) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ jsx59(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsx60(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ jsxs33(
     "div",
     {
       id: "mly-editor",
@@ -11883,7 +11942,7 @@ function Editor12(props) {
       ),
       ref: menuContainerRef,
       children: [
-        hasMenuBar && /* @__PURE__ */ jsx59(EditorMenuBar, { config: props.config, editor }),
+        hasMenuBar && /* @__PURE__ */ jsx60(EditorMenuBar, { config: props.config, editor }),
         /* @__PURE__ */ jsxs33(
           "div",
           {
@@ -11892,16 +11951,17 @@ function Editor12(props) {
               bodyClassName
             ),
             children: [
-              /* @__PURE__ */ jsx59(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx59(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx59(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx59(EditorContent, { editor }),
-              /* @__PURE__ */ jsx59(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx59(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
-              !hideContextMenu && /* @__PURE__ */ jsx59(ContentMenu, { editor }),
-              /* @__PURE__ */ jsx59(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx59(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx59(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
+              /* @__PURE__ */ jsx60(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(DividerBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(EditorContent, { editor }),
+              /* @__PURE__ */ jsx60(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
+              !hideContextMenu && /* @__PURE__ */ jsx60(ContentMenu, { editor }),
+              /* @__PURE__ */ jsx60(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ jsx60(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
             ]
           }
         )