@daisychainapp/maily-to-core 0.4.0 → 0.4.2

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 useMemo13, useRef as useRef13 } from "react";
+import { useMemo as useMemo12, useRef as useRef13 } from "react";
 
 // src/editor/components/column-menu/columns-bubble-menu.tsx
 import { BubbleMenu } from "@tiptap/react";
@@ -3557,7 +3557,14 @@ function BubbleMenuButton(item) {
   if (tooltip) {
     return /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: content }),
-      /* @__PURE__ */ jsx4(TooltipContent, { sideOffset: 8, children: tooltip })
+      /* @__PURE__ */ jsx4(
+        TooltipContent,
+        {
+          sideOffset: 8,
+          className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+          children: /* @__PURE__ */ jsx4("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: tooltip })
+        }
+      )
     ] });
   }
   return content;
@@ -4085,7 +4092,14 @@ function Select(props) {
   }
   return /* @__PURE__ */ jsxs5(Tooltip, { children: [
     /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: content }),
-    /* @__PURE__ */ jsx10(TooltipContent, { sideOffset: 8, children: tooltip })
+    /* @__PURE__ */ jsx10(
+      TooltipContent,
+      {
+        sideOffset: 8,
+        className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+        children: /* @__PURE__ */ jsx10("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: tooltip })
+      }
+    )
   ] });
 }
 
@@ -4997,126 +5011,6 @@ var EditorMenuBar = (props) => {
   );
 };
 
-// src/editor/components/html-menu/html-menu.tsx
-import { BubbleMenu as BubbleMenu2 } from "@tiptap/react";
-import { CodeXmlIcon, ViewIcon } from "lucide-react";
-import { useCallback as useCallback4 } from "react";
-import { sticky as sticky2 } from "tippy.js";
-
-// src/editor/components/html-menu/use-html-state.ts
-import { useEditorState as useEditorState2 } from "@tiptap/react";
-import deepEql2 from "fast-deep-equal";
-var useHtmlState = (editor) => {
-  const states = useEditorState2({
-    editor,
-    selector: (ctx) => {
-      var _a, _b;
-      return {
-        activeTab: ((_a = ctx.editor.getAttributes("htmlCodeBlock")) == null ? void 0 : _a.activeTab) || "code",
-        currentShowIfKey: ((_b = ctx.editor.getAttributes("htmlCodeBlock")) == null ? void 0 : _b.showIfKey) || ""
-      };
-    },
-    equalityFn: deepEql2
-  });
-  return states;
-};
-
-// src/editor/components/html-menu/html-menu.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-function HTMLBubbleMenu(props) {
-  const { appendTo, editor } = props;
-  if (!editor) {
-    return null;
-  }
-  const state = useHtmlState(editor);
-  const getReferenceClientRect = useCallback4(() => {
-    const renderContainer = getRenderContainer(editor, "htmlCodeBlock");
-    const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
-    return rect;
-  }, [editor]);
-  const bubbleMenuProps = __spreadProps(__spreadValues(__spreadValues({}, props), appendTo ? { appendTo: appendTo.current } : {}), {
-    shouldShow: ({ editor: editor2 }) => {
-      return editor2.isActive("htmlCodeBlock");
-    },
-    tippyOptions: {
-      offset: [0, 8],
-      popperOptions: {
-        modifiers: [{ name: "flip", enabled: false }]
-      },
-      getReferenceClientRect,
-      appendTo: () => appendTo == null ? void 0 : appendTo.current,
-      plugins: [sticky2],
-      sticky: "popper",
-      maxWidth: "auto"
-    },
-    pluginKey: "htmlCodeBlockBubbleMenu"
-  });
-  const { activeTab = "code" } = state;
-  return /* @__PURE__ */ jsx16(
-    BubbleMenu2,
-    __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__ */ jsxs8(TooltipProvider, { children: [
-        /* @__PURE__ */ jsxs8("div", { className: "mly:flex mly:items-center mly:h-7 mly:rounded-md mly:bg-soft-gray mly:px-0.5", children: [
-          /* @__PURE__ */ jsxs8(Tooltip, { children: [
-            /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
-              "button",
-              {
-                className: cn(
-                  "mly:flex mly:size-6 mly:shrink-0 mly:items-center mly:justify-center mly:rounded 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",
-                  activeTab === "code" && "mly:bg-white"
-                ),
-                disabled: activeTab === "code",
-                onClick: () => {
-                  var _a;
-                  (_a = editor == null ? void 0 : editor.commands) == null ? void 0 : _a.updateHtmlCodeBlock({
-                    activeTab: "code"
-                  });
-                },
-                children: /* @__PURE__ */ jsx16(CodeXmlIcon, { className: "mly:size-3 mly:shrink-0 mly:stroke-[2.5]" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx16(TooltipContent, { sideOffset: 8, children: "HTML Code" })
-          ] }),
-          /* @__PURE__ */ jsxs8(Tooltip, { children: [
-            /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
-              "button",
-              {
-                className: cn(
-                  "mly:flex mly:size-6 mly:shrink-0 mly:items-center mly:justify-center mly:rounded 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",
-                  activeTab === "preview" && "mly:bg-white"
-                ),
-                disabled: activeTab === "preview",
-                onClick: () => {
-                  var _a;
-                  (_a = editor == null ? void 0 : editor.commands) == null ? void 0 : _a.updateHtmlCodeBlock({
-                    activeTab: "preview"
-                  });
-                },
-                children: /* @__PURE__ */ jsx16(ViewIcon, { className: "mly:size-3 mly:shrink-0 mly:stroke-[2.5]" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx16(TooltipContent, { sideOffset: 8, children: "Preview" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx16(Divider, {}),
-        /* @__PURE__ */ jsx16(
-          ShowPopover,
-          {
-            showIfKey: state.currentShowIfKey,
-            onShowIfKeyValueChange: (value) => {
-              editor.commands.updateHtmlCodeBlock({
-                showIfKey: value
-              });
-            },
-            editor
-          }
-        )
-      ] })
-    })
-  );
-}
-
 // src/editor/nodes/logo/logo.ts
 import TiptapImage from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
@@ -5421,12 +5315,12 @@ var SectionExtension = Node3.create({
 
 // src/editor/nodes/logo/logo-view.tsx
 import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
-import { useCallback as useCallback7, useEffect as useEffect5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5 } from "react";
 import { useState as useState5 } from "react";
 
 // src/editor/nodes/image/image-view.tsx
 import {
-  useCallback as useCallback6,
+  useCallback as useCallback5,
   useEffect as useEffect4,
   useRef as useRef5,
   useState as useState4
@@ -5570,13 +5464,13 @@ function useImageUploadOptions(editor) {
 }
 
 // src/editor/utils/use-event.ts
-import { useCallback as useCallback5, useLayoutEffect, useRef as useRef4 } from "react";
+import { useCallback as useCallback4, useLayoutEffect, useRef as useRef4 } from "react";
 var useEvent = (handler) => {
   const handlerRef = useRef4(null);
   useLayoutEffect(() => {
     handlerRef.current = handler;
   }, [handler]);
-  return useCallback5((...args) => {
+  return useCallback4((...args) => {
     if (handlerRef.current === null) {
       throw new Error("Handler is not assigned");
     }
@@ -5599,7 +5493,7 @@ function getNewWidth(height, aspectRatio) {
 }
 
 // src/editor/nodes/image/image-view.tsx
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var MIN_WIDTH = 20;
 var IMAGE_MAX_WIDTH = 600;
 var IMAGE_MAX_HEIGHT = 400;
@@ -5668,12 +5562,12 @@ function ImageView(props) {
       window.addEventListener("mouseup", removeListeners);
     }
   );
-  const dragCornerButton = useCallback6(
+  const dragCornerButton = useCallback5(
     (direction) => {
       if (isPlaceholderImage) {
         return null;
       }
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx16(
         "div",
         {
           role: "button",
@@ -5726,7 +5620,7 @@ function ImageView(props) {
     const file = e.target.files[0];
     yield handleImageUpload(file);
   });
-  const handleImageUpload = useCallback6(
+  const handleImageUpload = useCallback5(
     (file) => __async(this, null, function* () {
       if (!isDroppable) {
         return;
@@ -5782,7 +5676,7 @@ function ImageView(props) {
       img.onerror = null;
     };
   }, [src]);
-  const handleDragOver = useCallback6(
+  const handleDragOver = useCallback5(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5793,7 +5687,7 @@ function ImageView(props) {
     },
     [onImageUpload]
   );
-  const handleDragLeave = useCallback6(
+  const handleDragLeave = useCallback5(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5804,7 +5698,7 @@ function ImageView(props) {
     },
     [onImageUpload]
   );
-  const handleDrop = useCallback6(
+  const handleDrop = useCallback5(
     (e) => __async(this, null, function* () {
       var _a2;
       if (!isDroppable) {
@@ -5829,7 +5723,7 @@ function ImageView(props) {
   const heightValue = height && height !== "auto" ? `${height}px` : void 0;
   const hasExplicitWidth = Boolean(widthValue || (resizingStyle == null ? void 0 : resizingStyle.width));
   const hasExplicitHeight = Boolean(heightValue || (resizingStyle == null ? void 0 : resizingStyle.height));
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     NodeViewWrapper,
     __spreadProps(__spreadValues({
       as: "div",
@@ -5858,7 +5752,7 @@ function ImageView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx17(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx16(
           ImageStatusLabel,
           {
             status: "idle",
@@ -5866,11 +5760,11 @@ function ImageView(props) {
             isDropZone: isDroppable
           }
         ),
-        !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(
+        !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(
           "input",
           {
             type: "file",
@@ -5880,8 +5774,8 @@ function ImageView(props) {
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__PURE__ */ jsx17(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx16(
             "img",
             __spreadProps(__spreadValues({}, attrs), {
               ref: imgRef,
@@ -5901,13 +5795,13 @@ function ImageView(props) {
               )
             })
           ),
-          selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ jsxs9(Fragment3, { children: [
+          selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ jsxs8(Fragment3, { children: [
             [
               { left: 0, top: 0, height: "100%", width: "1px" },
               { right: 0, top: 0, height: "100%", width: "1px" },
               { top: 0, left: 0, width: "100%", height: "1px" },
               { bottom: 0, left: 0, width: "100%", height: "1px" }
-            ].map((style, i) => /* @__PURE__ */ jsx17(
+            ].map((style, i) => /* @__PURE__ */ jsx16(
               "div",
               {
                 className: "mly:bg-rose-500",
@@ -5931,7 +5825,7 @@ function ImageStatusLabel(props) {
   const _a = props, { status, minHeight, className, style, isDropZone } = _a, rest = __objRest(_a, ["status", "minHeight", "className", "style", "isDropZone"]);
   const resolvedMinHeight = minHeight != null ? minHeight : isDropZone ? 36 : void 0;
   const resolvedPaddingY = isDropZone ? 8 : void 0;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: cn(
@@ -5949,25 +5843,25 @@ function ImageStatusLabel(props) {
         paddingBottom: resolvedPaddingY
       } : {}), style),
       children: [
-        status === "idle" && !isDropZone && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__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(ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx16("span", { children: "No image selected" })
         ] }),
-        status === "idle" && isDropZone && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__PURE__ */ jsx17(GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx17("span", { children: "Click or Drop image here" })
+        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" })
         ] }),
-        status === "loading" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__PURE__ */ jsx17(Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx17("span", { children: "Loading image..." })
+        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..." })
         ] }),
-        status === "error" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__PURE__ */ jsx17(Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx17("span", { children: "Error 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" })
         ] }),
-        status === "variable" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__PURE__ */ jsx17(BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ jsx17("span", { children: "Variable Image URL" })
+        status === "variable" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx16(BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ jsx16("span", { children: "Variable Image URL" })
         ] })
       ]
     })
@@ -5975,7 +5869,7 @@ function ImageStatusLabel(props) {
 }
 
 // src/editor/nodes/logo/logo-view.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function LogoView(props) {
   const { node, editor, updateAttributes: updateAttributes2 } = props;
   const [status, setStatus] = useState5("idle");
@@ -5997,7 +5891,7 @@ function LogoView(props) {
     const file = e.target.files[0];
     yield handleImageUpload(file);
   });
-  const handleImageUpload = useCallback7(
+  const handleImageUpload = useCallback6(
     (file) => __async(this, null, function* () {
       if (!isDroppable) {
         return;
@@ -6015,7 +5909,7 @@ function LogoView(props) {
     }),
     [onImageUpload, updateAttributes2]
   );
-  const handleDragOver = useCallback7(
+  const handleDragOver = useCallback6(
     (e) => {
       if (!isDroppable) {
         return;
@@ -6026,7 +5920,7 @@ function LogoView(props) {
     },
     [onImageUpload]
   );
-  const handleDragLeave = useCallback7(
+  const handleDragLeave = useCallback6(
     (e) => {
       if (!isDroppable) {
         return;
@@ -6037,7 +5931,7 @@ function LogoView(props) {
     },
     [onImageUpload]
   );
-  const handleDrop = useCallback7(
+  const handleDrop = useCallback6(
     (e) => __async(this, null, function* () {
       var _a;
       if (!isDroppable) {
@@ -6081,7 +5975,7 @@ function LogoView(props) {
     };
   }, [logoSrc]);
   const logoSize = logoSizes[size];
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     NodeViewWrapper2,
     __spreadProps(__spreadValues({
       as: "div",
@@ -6101,7 +5995,7 @@ function LogoView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx18(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ jsx17(
           ImageStatusLabel,
           {
             status: "idle",
@@ -6109,11 +6003,11 @@ function LogoView(props) {
             isDropZone: isDroppable
           }
         ),
-        !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(
+        !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(
           "input",
           {
             type: "file",
@@ -6123,7 +6017,7 @@ function LogoView(props) {
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsx18(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsx17(
           "img",
           {
             src: logoSrc,
@@ -6274,13 +6168,13 @@ var borderRadius = [
 ];
 
 // src/editor/components/image-menu/image-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu3 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu2 } from "@tiptap/react";
 import { ImageDown, LockIcon, LockOpenIcon } from "lucide-react";
-import { sticky as sticky3 } from "tippy.js";
+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 jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function AlignmentSwitch(props) {
   const { alignment: rawAlignment, onAlignmentChange } = props;
   const alignment = allowedLogoAlignment.includes(
@@ -6310,20 +6204,27 @@ function AlignmentSwitch(props) {
     }
   };
   const activeAlignment = alignments[alignment];
-  return /* @__PURE__ */ jsxs11(Popover, { children: [
-    /* @__PURE__ */ jsxs11(Tooltip, { children: [
-      /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs10(Popover, { children: [
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
+      /* @__PURE__ */ jsx18(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(
         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"
           ),
-          children: /* @__PURE__ */ jsx19(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
+          children: /* @__PURE__ */ jsx18(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
         }
       ) }),
-      /* @__PURE__ */ jsx19(TooltipContent, { sideOffset: 8, children: "Alignment" })
+      /* @__PURE__ */ jsx18(
+        TooltipContent,
+        {
+          sideOffset: 8,
+          className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+          children: /* @__PURE__ */ jsx18("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: "Alignment" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx18(
       PopoverContent,
       {
         className: "mly:flex mly:w-max mly:gap-0.5 mly:rounded-lg mly:p-0.5!",
@@ -6337,7 +6238,7 @@ function AlignmentSwitch(props) {
           e.preventDefault();
         },
         children: Object.entries(alignments).map(([key, value]) => {
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx18(
             BubbleMenuButton,
             {
               icon: value.icon,
@@ -6365,12 +6266,12 @@ import { FootprintsIcon as FootprintsIcon2, Heading1 as Heading12 } from "lucide
 
 // src/blocks/button.tsx
 import { MousePointer, ArrowUpRightSquare } from "lucide-react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var button = {
   title: "Button",
   description: "Add a call to action button to email.",
   searchTerms: ["link", "button", "cta"],
-  icon: /* @__PURE__ */ jsx20(MousePointer, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx19(MousePointer, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setButton().run();
   }
@@ -6379,7 +6280,7 @@ var linkCard = {
   title: "Link Card",
   description: "Add a link card to email.",
   searchTerms: ["link", "button", "image"],
-  icon: /* @__PURE__ */ jsx20(ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx19(ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLinkCard().run();
   },
@@ -6391,13 +6292,13 @@ var linkCard = {
 };
 
 // src/blocks/code.tsx
-import { CodeXmlIcon as CodeXmlIcon2 } from "lucide-react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { CodeXmlIcon } from "lucide-react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var htmlCodeBlock = {
   title: "Custom HTML",
   description: "Insert a custom HTML block",
   searchTerms: ["html", "code", "custom"],
-  icon: /* @__PURE__ */ jsx21(CodeXmlIcon2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx20(CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
   }
@@ -6406,12 +6307,12 @@ var htmlCodeBlock = {
 // src/blocks/image.tsx
 import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { ImageIcon } from "lucide-react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var image = {
   title: "Image",
   description: "Full width image",
   searchTerms: ["image"],
-  icon: /* @__PURE__ */ jsx22(ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx21(ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
   }
@@ -6420,7 +6321,7 @@ var logo = {
   title: "Logo",
   description: "Add your brand logo",
   searchTerms: ["image", "logo"],
-  icon: /* @__PURE__ */ jsx22(ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx21(ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
   }
@@ -6429,7 +6330,7 @@ var inlineImage = {
   title: "Inline Image",
   description: "Inline image",
   searchTerms: ["image", "inline"],
-  icon: /* @__PURE__ */ jsx22(ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx21(ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setInlineImage({
       src: "https://maily.to/brand/logo.png"
@@ -6459,12 +6360,12 @@ import {
   RectangleHorizontal,
   Minus
 } from "lucide-react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var columns = {
   title: "Columns",
   description: "Add columns to email.",
   searchTerms: ["layout", "columns"],
-  icon: /* @__PURE__ */ jsx23(ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
   }
@@ -6473,7 +6374,7 @@ var section = {
   title: "Section",
   description: "Add a section to email.",
   searchTerms: ["layout", "section"],
-  icon: /* @__PURE__ */ jsx23(RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSection().run();
   }
@@ -6482,7 +6383,7 @@ var repeat = {
   title: "Repeat",
   description: "Loop over an array of items.",
   searchTerms: ["repeat", "for", "loop"],
-  icon: /* @__PURE__ */ jsx23(Repeat2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(Repeat2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setRepeat().run();
   }
@@ -6491,7 +6392,7 @@ var spacer = {
   title: "Spacer",
   description: "Add space between blocks.",
   searchTerms: ["space", "gap", "divider"],
-  icon: /* @__PURE__ */ jsx23(MoveVertical, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(MoveVertical, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
   }
@@ -6500,7 +6401,7 @@ var divider = {
   title: "Divider",
   description: "Add a horizontal divider.",
   searchTerms: ["divider", "line"],
-  icon: /* @__PURE__ */ jsx23(Minus, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx22(Minus, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
@@ -6508,12 +6409,12 @@ var divider = {
 
 // src/blocks/list.tsx
 import { List, ListOrdered } from "lucide-react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var bulletList = {
   title: "Bullet List",
   description: "Create a simple bullet list.",
   searchTerms: ["unordered", "point"],
-  icon: /* @__PURE__ */ jsx24(List, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx23(List, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
@@ -6522,7 +6423,7 @@ var orderedList = {
   title: "Numbered List",
   description: "Create a list with numbering.",
   searchTerms: ["ordered"],
-  icon: /* @__PURE__ */ jsx24(ListOrdered, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx23(ListOrdered, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
@@ -6539,12 +6440,12 @@ import {
   FootprintsIcon,
   EraserIcon as EraserIcon2
 } from "lucide-react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var text = {
   title: "Text",
   description: "Just start typing with plain text.",
   searchTerms: ["p", "paragraph"],
-  icon: /* @__PURE__ */ jsx25(Text, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(Text, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
   }
@@ -6553,7 +6454,7 @@ var heading1 = {
   title: "Heading 1",
   description: "Big heading.",
   searchTerms: ["h1", "title", "big", "large"],
-  icon: /* @__PURE__ */ jsx25(Heading1, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(Heading1, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   }
@@ -6562,7 +6463,7 @@ var heading2 = {
   title: "Heading 2",
   description: "Medium heading.",
   searchTerms: ["h2", "subtitle", "medium"],
-  icon: /* @__PURE__ */ jsx25(Heading2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(Heading2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
   }
@@ -6571,7 +6472,7 @@ var heading3 = {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ jsx25(Heading3, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(Heading3, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
   }
@@ -6580,7 +6481,7 @@ var hardBreak = {
   title: "Hard Break",
   description: "Add a break between lines.",
   searchTerms: ["break", "line"],
-  icon: /* @__PURE__ */ jsx25(DivideIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(DivideIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHardBreak().run();
   }
@@ -6589,7 +6490,7 @@ var blockquote = {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ jsx25(TextQuote, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(TextQuote, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
@@ -6598,7 +6499,7 @@ var footer = {
   title: "Footer",
   description: "Add a footer text to email.",
   searchTerms: ["footer", "text"],
-  icon: /* @__PURE__ */ jsx25(FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setFooter().run();
   }
@@ -6607,16 +6508,16 @@ var clearLine = {
   title: "Clear Line",
   description: "Clear the current line.",
   searchTerms: ["clear", "line"],
-  icon: /* @__PURE__ */ jsx25(EraserIcon2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx24(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 jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 function LogoWithCoverImageIcon(props) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6626,7 +6527,7 @@ function LogoWithCoverImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "path",
           {
             fillRule: "evenodd",
@@ -6635,7 +6536,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "path",
           {
             fillRule: "evenodd",
@@ -6644,7 +6545,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "path",
           {
             fillRule: "evenodd",
@@ -6653,8 +6554,8 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx26("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ jsx26("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
-        /* @__PURE__ */ jsx26(
+        /* @__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(
           "rect",
           {
             x: "3",
@@ -6667,7 +6568,7 @@ function LogoWithCoverImageIcon(props) {
             mask: "url(#path-4-inside-1_1046_19527)"
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "rect",
           {
             x: "6.25",
@@ -6679,16 +6580,16 @@ function LogoWithCoverImageIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx26("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
+        /* @__PURE__ */ jsx25("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 jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 function LogoWithTextHorizonIcon(props) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs12(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6698,7 +6599,7 @@ function LogoWithTextHorizonIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           "path",
           {
             fillRule: "evenodd",
@@ -6707,7 +6608,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           "rect",
           {
             x: "6.25",
@@ -6719,8 +6620,8 @@ function LogoWithTextHorizonIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx27("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx26(
           "path",
           {
             fillRule: "evenodd",
@@ -6729,7 +6630,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           "path",
           {
             fillRule: "evenodd",
@@ -6744,9 +6645,9 @@ function LogoWithTextHorizonIcon(props) {
 }
 
 // src/editor/components/icons/logo-with-text-vertical.tsx
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 function LogoWithTextVerticalIcon(props) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6756,7 +6657,7 @@ function LogoWithTextVerticalIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           "path",
           {
             fillRule: "evenodd",
@@ -6765,7 +6666,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           "rect",
           {
             x: "4.25",
@@ -6777,8 +6678,8 @@ function LogoWithTextVerticalIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ jsx28("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx27(
           "path",
           {
             fillRule: "evenodd",
@@ -6787,7 +6688,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           "path",
           {
             fillRule: "evenodd",
@@ -6802,12 +6703,12 @@ function LogoWithTextVerticalIcon(props) {
 }
 
 // src/blocks/headers.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var headerLogoWithTextHorizontal = {
   title: "Logo with Text (Horizontal)",
   description: "Logo and a text horizontally",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ jsx29(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx28(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent({
       type: "columns",
@@ -6871,7 +6772,7 @@ var headerLogoWithTextVertical = {
   title: "Logo with Text (Vertical)",
   description: "Logo and a text vertically",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ jsx29(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx28(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent([
       {
@@ -6902,7 +6803,7 @@ var headerLogoWithCoverImage = {
   title: "Logo with Cover Image",
   description: "Logo and a cover image",
   searchTerms: ["logo", "cover", "image"],
-  icon: /* @__PURE__ */ jsx29(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx28(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
       year: "numeric",
@@ -6995,12 +6896,12 @@ import {
   LayoutTemplateIcon,
   RectangleHorizontalIcon
 } from "lucide-react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var footerCopyrightText = {
   title: "Footer Copyright",
   description: "Copyright text for the footer.",
   searchTerms: ["footer", "copyright"],
-  icon: /* @__PURE__ */ jsx30(CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx29(CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     editor.chain().focus().deleteRange(range).insertContent({
@@ -7020,7 +6921,7 @@ var footerCommunityFeedbackCta = {
   title: "Footer Community Feedback CTA",
   description: "Community feedback CTA for the footer.",
   searchTerms: ["footer", "community", "feedback", "cta"],
-  icon: /* @__PURE__ */ jsx30(RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx29(RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       {
@@ -7063,7 +6964,7 @@ var footerCompanySignature = {
   title: "Footer Company Signature",
   description: "Company signature for the footer.",
   searchTerms: ["footer", "company", "signature"],
-  icon: /* @__PURE__ */ jsx30(LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ jsx29(LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       { type: "horizontalRule" },
@@ -7217,7 +7118,7 @@ var footerCompanySignature = {
 };
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var DEFAULT_SLASH_COMMANDS = [
   {
     title: "Blocks",
@@ -7252,7 +7153,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Headers",
         description: "Add pre-designed headers block",
         searchTerms: ["header", "headers"],
-        icon: /* @__PURE__ */ jsx31(Heading12, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ jsx30(Heading12, { className: "mly:h-4 mly:w-4" }),
         preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
         commands: [
           headerLogoWithTextVertical,
@@ -7265,7 +7166,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Footers",
         description: "Add pre-designed footers block",
         searchTerms: ["footers"],
-        icon: /* @__PURE__ */ jsx31(FootprintsIcon2, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ jsx30(FootprintsIcon2, { className: "mly:h-4 mly:w-4" }),
         commands: [
           footerCopyrightText,
           footerCommunityFeedbackCta,
@@ -7278,7 +7179,7 @@ var DEFAULT_SLASH_COMMANDS = [
 ];
 
 // src/editor/provider.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
 var MailyContext = createContext({
   placeholderUrl: DEFAULT_PLACEHOLDER_URL,
@@ -7286,7 +7187,7 @@ var MailyContext = createContext({
 });
 function MailyProvider(props) {
   const _a = props, { children } = _a, defaultValues = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx32(MailyContext.Provider, { value: defaultValues, children });
+  return /* @__PURE__ */ jsx31(MailyContext.Provider, { value: defaultValues, children });
 }
 function useMailyContext() {
   const values = useContext(MailyContext);
@@ -7319,7 +7220,7 @@ import {
   useRef as useRef6,
   useState as useState6
 } from "react";
-import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var VariableSuggestionsPopover = forwardRef5((props, ref) => {
   const { items, onSelectItem } = props;
   const [selectedIndex, setSelectedIndex] = useState6(0);
@@ -7365,17 +7266,17 @@ var VariableSuggestionsPopover = forwardRef5((props, ref) => {
       onSelectItem(item);
     }
   }));
-  return /* @__PURE__ */ jsxs15("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__ */ jsxs15("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__ */ jsx33("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
-      /* @__PURE__ */ jsx33(VariableIcon, { children: /* @__PURE__ */ jsx33(Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+  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]" }) })
     ] }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx32(
       "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__ */ jsx33("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__ */ jsxs15(
+        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(
           "button",
           {
             ref: (el) => itemRefs.current[index] = el,
@@ -7385,27 +7286,27 @@ var VariableSuggestionsPopover = forwardRef5((props, ref) => {
               index === selectedIndex ? "mly:bg-soft-gray" : "mly:bg-white"
             ),
             children: [
-              /* @__PURE__ */ jsx33(Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
+              /* @__PURE__ */ jsx32(Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
               (item == null ? void 0 : item.label) || item.name
             ]
           },
           index
-        )) : /* @__PURE__ */ jsx33("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__ */ 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__ */ jsxs15("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__ */ jsxs15("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
-        /* @__PURE__ */ jsx33(VariableIcon, { children: /* @__PURE__ */ jsx33(ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ jsx33(VariableIcon, { children: /* @__PURE__ */ jsx33(ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ jsx33("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
+    /* @__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__ */ jsx33(VariableIcon, { children: /* @__PURE__ */ jsx33(CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+      /* @__PURE__ */ jsx32(VariableIcon, { children: /* @__PURE__ */ jsx32(CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] })
   ] });
 });
 function VariableIcon(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: cn(
@@ -7421,7 +7322,7 @@ function VariableIcon(props) {
 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 jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 function VariableView(props) {
   const { node, updateAttributes: updateAttributes2, editor } = props;
   const {
@@ -7436,19 +7337,19 @@ function VariableView(props) {
     const variableRender = (_b = (_a = getNodeOptions(editor, "variable")) == null ? void 0 : _a.renderVariable) != null ? _b : DEFAULT_RENDER_VARIABLE_FUNCTION;
     return variableRender;
   }, [editor]);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(
     NodeViewWrapper3,
     {
       className: "react-component mly:inline-block mly:leading-none",
       draggable: "false",
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs15(
         Popover,
         {
           onOpenChange: (open) => {
             editor.storage.variable.popover = open;
           },
           children: [
-            /* @__PURE__ */ jsx34(PopoverTrigger, { children: renderVariable({
+            /* @__PURE__ */ jsx33(PopoverTrigger, { children: renderVariable({
               variable: {
                 name: id,
                 required,
@@ -7459,7 +7360,7 @@ function VariableView(props) {
               editor,
               from: "content-variable"
             }) }),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx33(
               PopoverContent,
               {
                 align: "start",
@@ -7468,10 +7369,10 @@ function VariableView(props) {
                 sideOffset: 8,
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 onCloseAutoFocus: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ jsx34(TooltipProvider, { children: /* @__PURE__ */ jsxs16("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-                  /* @__PURE__ */ jsxs16("label", { className: "mly:relative", children: [
-                    /* @__PURE__ */ jsx34("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
-                    /* @__PURE__ */ jsx34(
+                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(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: id != null ? id : "",
@@ -7485,11 +7386,11 @@ function VariableView(props) {
                       })
                     )
                   ] }),
-                  !hideDefaultValue && /* @__PURE__ */ jsxs16(Fragment4, { children: [
-                    /* @__PURE__ */ jsx34(Divider, { className: "mly:mx-1.5" }),
-                    /* @__PURE__ */ jsxs16("label", { className: "mly:relative", children: [
-                      /* @__PURE__ */ jsx34("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
-                      /* @__PURE__ */ jsx34(
+                  !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(
                         "input",
                         __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                           value: fallback != null ? fallback : "",
@@ -7502,7 +7403,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__ */ jsx34("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ jsx34(Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
+                      /* @__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" }) })
                     ] })
                   ] })
                 ] }) })
@@ -7519,13 +7420,13 @@ var DefaultRenderVariable = (props) => {
   const { name, required, valid, label } = variable;
   const variableLabel = label || name;
   if (from === "button-variable") {
-    return /* @__PURE__ */ jsxs16("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__ */ jsx34(Braces2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-      /* @__PURE__ */ jsx34("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+    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 })
     ] });
   }
   if (from === "bubble-variable") {
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: cn(
@@ -7533,21 +7434,21 @@ var DefaultRenderVariable = (props) => {
           !valid && "mly:border-rose-400 mly:bg-rose-50 mly:text-rose-600 mly:hover:bg-rose-100"
         ),
         children: [
-          /* @__PURE__ */ jsx34(Braces2, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
-          /* @__PURE__ */ jsx34("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+          /* @__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 })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(
     "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__ */ jsx34(Braces2, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+        /* @__PURE__ */ jsx33(Braces2, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
         variableLabel,
-        required && !fallback && /* @__PURE__ */ jsx34(AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
+        required && !fallback && /* @__PURE__ */ jsx33(AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
       ]
     }
   );
@@ -7728,7 +7629,7 @@ var VariableExtension = Node4.create({
 });
 
 // src/editor/components/ui/link-input-popover.tsx
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 function LinkInputPopover(props) {
   var _a, _b;
   const {
@@ -7758,7 +7659,7 @@ function LinkInputPopover(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, variableTriggerCharacter, defaultValue, editor]);
-  const popoverButton = /* @__PURE__ */ jsx35(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
+  const popoverButton = /* @__PURE__ */ jsx34(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
     BaseButton,
     {
       variant: "ghost",
@@ -7766,10 +7667,10 @@ function LinkInputPopover(props) {
       type: "button",
       className: "mly:h-7! mly:w-7!",
       "data-state": !!defaultValue,
-      children: /* @__PURE__ */ jsx35(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
+      children: /* @__PURE__ */ jsx34(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
     }
   ) });
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     Popover,
     {
       open: isOpen,
@@ -7783,11 +7684,18 @@ function LinkInputPopover(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ jsxs17(Tooltip, { children: [
-          /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ jsx35(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ jsxs16(Tooltip, { children: [
+          /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ jsx34(
+            TooltipContent,
+            {
+              sideOffset: 8,
+              className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+              children: /* @__PURE__ */ jsx34("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: tooltip })
+            }
+          )
         ] }) : popoverButton,
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx34(
           PopoverContent,
           {
             align: "end",
@@ -7795,7 +7703,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__ */ jsx35(
+            children: /* @__PURE__ */ jsx34(
               "form",
               {
                 onSubmit: (e) => {
@@ -7807,8 +7715,8 @@ function LinkInputPopover(props) {
                   onValueChange == null ? void 0 : onValueChange(input.value);
                   setIsOpen(false);
                 },
-                children: /* @__PURE__ */ jsxs17("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
-                  !isEditing && /* @__PURE__ */ jsx35("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__ */ jsx35(
+                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(
                     "button",
                     {
                       onClick: () => {
@@ -7829,9 +7737,9 @@ function LinkInputPopover(props) {
                       })
                     }
                   ) }),
-                  isEditing && /* @__PURE__ */ jsxs17("div", { className: "mly:relative", children: [
-                    /* @__PURE__ */ jsx35("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ jsx35(LinkIcon2, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
-                    /* @__PURE__ */ jsx35(
+                  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(
                       InputAutocomplete,
                       {
                         editor,
@@ -7867,12 +7775,12 @@ function LinkInputPopover(props) {
 }
 
 // src/editor/components/image-menu/image-size.tsx
-import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 function ImageSize(props) {
   const { value, onValueChange, dimension } = props;
-  return /* @__PURE__ */ jsxs18("label", { className: "mly:relative mly:flex mly:items-center", children: [
-    /* @__PURE__ */ jsx36("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__ */ jsx36(
+  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",
@@ -7881,15 +7789,15 @@ function ImageSize(props) {
         onChange: (e) => onValueChange(e.target.value)
       })
     ),
-    /* @__PURE__ */ jsx36("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" })
+    /* @__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 useEditorState3 } from "@tiptap/react";
-import deepEql3 from "fast-deep-equal";
+import { useEditorState as useEditorState2 } from "@tiptap/react";
+import deepEql2 from "fast-deep-equal";
 var useImageState = (editor) => {
-  const states = useEditorState3({
+  const states = useEditorState2({
     editor,
     selector: ({ editor: editor2 }) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
@@ -7910,13 +7818,13 @@ var useImageState = (editor) => {
         currentShowIfKey: ((_o = editor2.getAttributes("image")) == null ? void 0 : _o.showIfKey) || ((_p = editor2.getAttributes("logo")) == null ? void 0 : _p.showIfKey) || ""
       };
     },
-    equalityFn: deepEql3
+    equalityFn: deepEql2
   });
   return states;
 };
 
 // src/editor/components/image-menu/image-bubble-menu.tsx
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+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;
@@ -7935,19 +7843,19 @@ function ImageBubbleMenu(props) {
       popperOptions: {
         modifiers: [{ name: "flip", enabled: false }]
       },
-      plugins: [sticky3],
+      plugins: [sticky2],
       sticky: "popper",
       maxWidth: "100%"
     }
   });
   const { lockAspectRatio } = state;
-  return /* @__PURE__ */ jsx37(
-    BubbleMenu3,
+  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__ */ jsxs19(TooltipProvider, { children: [
-        state.isLogoActive && state.imageSrc && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-          /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsxs18(TooltipProvider, { children: [
+        state.isLogoActive && state.imageSrc && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx36(
             Select,
             {
               label: "Size",
@@ -7962,10 +7870,10 @@ function ImageBubbleMenu(props) {
               }
             }
           ),
-          /* @__PURE__ */ jsx37(Divider, {})
+          /* @__PURE__ */ jsx36(Divider, {})
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs18("div", { className: "mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ jsx36(
             AlignmentSwitch,
             {
               alignment: state.alignment,
@@ -7979,7 +7887,7 @@ function ImageBubbleMenu(props) {
               }
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36(
             LinkInputPopover,
             {
               defaultValue: (_a = state == null ? void 0 : state.imageSrc) != null ? _a : "",
@@ -8002,7 +7910,7 @@ function ImageBubbleMenu(props) {
               isVariable: state.isSrcVariable
             }
           ),
-          state.isImageActive && /* @__PURE__ */ jsx37(
+          state.isImageActive && /* @__PURE__ */ jsx36(
             LinkInputPopover,
             {
               defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
@@ -8018,9 +7926,9 @@ function ImageBubbleMenu(props) {
             }
           )
         ] }),
-        state.isImageActive && state.imageSrc && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-          /* @__PURE__ */ jsx37(Divider, {}),
-          /* @__PURE__ */ jsx37(
+        state.isImageActive && state.imageSrc && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx36(Divider, {}),
+          /* @__PURE__ */ jsx36(
             Select,
             {
               label: "Border Radius",
@@ -8038,8 +7946,8 @@ function ImageBubbleMenu(props) {
               className: "mly:capitalize"
             }
           ),
-          /* @__PURE__ */ jsxs19("div", { className: "mly:flex mly:gap-x-0.5", children: [
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs18("div", { className: "mly:flex mly:gap-x-0.5", children: [
+            /* @__PURE__ */ jsx36(
               ImageSize,
               {
                 dimension: "width",
@@ -8059,7 +7967,7 @@ function ImageBubbleMenu(props) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx36(
               ImageSize,
               {
                 dimension: "height",
@@ -8079,7 +7987,7 @@ function ImageBubbleMenu(props) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx36(
               BubbleMenuButton,
               {
                 isActive: () => lockAspectRatio,
@@ -8104,8 +8012,8 @@ function ImageBubbleMenu(props) {
 }
 
 // src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu4 } from "@tiptap/react";
-import { sticky as sticky4 } from "tippy.js";
+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";
@@ -8222,10 +8130,10 @@ var InlineImageExtension = Node5.create({
 });
 
 // src/editor/components/inline-image-menu/use-inline-image-state.tsx
-import { useEditorState as useEditorState4 } from "@tiptap/react";
-import deepEql4 from "fast-deep-equal";
+import { useEditorState as useEditorState3 } from "@tiptap/react";
+import deepEql3 from "fast-deep-equal";
 var useInlineImageState = (editor) => {
-  const states = useEditorState4({
+  const states = useEditorState3({
     editor,
     selector: ({ editor: editor2 }) => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -8238,14 +8146,14 @@ var useInlineImageState = (editor) => {
         isExternalLinkVariable: (_h = (_g = editor2.getAttributes("inlineImage")) == null ? void 0 : _g.isExternalLinkVariable) != null ? _h : false
       };
     },
-    equalityFn: deepEql4
+    equalityFn: deepEql3
   });
   return states;
 };
 
 // src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
 import { ImageDownIcon } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 function InlineImageBubbleMenu(props) {
   var _a, _b;
   const { editor, appendTo } = props;
@@ -8264,17 +8172,17 @@ function InlineImageBubbleMenu(props) {
       popperOptions: {
         modifiers: [{ name: "flip", enabled: false }]
       },
-      plugins: [sticky4],
+      plugins: [sticky3],
       sticky: "popper",
       maxWidth: "100%"
     }
   });
-  return /* @__PURE__ */ jsx38(
-    BubbleMenu4,
+  return /* @__PURE__ */ jsx37(
+    BubbleMenu3,
     __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__ */ jsx38(TooltipProvider, { children: /* @__PURE__ */ jsxs20("div", { className: "mly:flex mly:gap-x-0.5", children: [
-        /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx37(TooltipProvider, { children: /* @__PURE__ */ jsxs19("div", { className: "mly:flex mly:gap-x-0.5", children: [
+        /* @__PURE__ */ jsx37(
           LinkInputPopover,
           {
             defaultValue: (_a = state == null ? void 0 : state.src) != null ? _a : "",
@@ -8290,7 +8198,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isSrcVariable
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx37(
           LinkInputPopover,
           {
             defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
@@ -8305,7 +8213,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isExternalLinkVariable
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx37(
           ImageSize,
           {
             dimension: "height",
@@ -8324,16 +8232,16 @@ function InlineImageBubbleMenu(props) {
 }
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu5, findChildren } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu4, findChildren } from "@tiptap/react";
 import { InfoIcon as InfoIcon2 } from "lucide-react";
-import { useCallback as useCallback8, useMemo as useMemo7, useRef as useRef8, useState as useState8 } from "react";
-import { sticky as sticky5 } from "tippy.js";
+import { useCallback as useCallback7, useMemo as useMemo7, useRef as useRef8, useState as useState8 } from "react";
+import { sticky as sticky4 } from "tippy.js";
 
 // src/editor/components/repeat-menu/use-repeat-state.ts
-import { useEditorState as useEditorState5 } from "@tiptap/react";
-import deepEql5 from "fast-deep-equal";
+import { useEditorState as useEditorState4 } from "@tiptap/react";
+import deepEql4 from "fast-deep-equal";
 var useRepeatState = (editor) => {
-  const states = useEditorState5({
+  const states = useEditorState4({
     editor,
     selector: (ctx) => {
       var _a, _b;
@@ -8343,20 +8251,20 @@ var useRepeatState = (editor) => {
         isSectionActive: ctx.editor.isActive("section")
       };
     },
-    equalityFn: deepEql5
+    equalityFn: deepEql4
   });
   return states;
 };
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 function RepeatBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
     return null;
   }
   const state = useRepeatState(editor);
-  const getReferenceClientRect = useCallback8(() => {
+  const getReferenceClientRect = useCallback7(() => {
     const renderContainer = getRenderContainer(editor, "repeat");
     const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
     return rect;
@@ -8381,7 +8289,7 @@ function RepeatBubbleMenu(props) {
       },
       getReferenceClientRect,
       appendTo: () => appendTo == null ? void 0 : appendTo.current,
-      plugins: [sticky5],
+      plugins: [sticky4],
       sticky: "popper",
       maxWidth: "auto"
     },
@@ -8401,21 +8309,21 @@ function RepeatBubbleMenu(props) {
     }).map((variable) => variable.name);
   }, [variables, eachKey, editor]);
   const isValidEachKey = eachKey;
-  return /* @__PURE__ */ jsx39(
-    BubbleMenu5,
+  return /* @__PURE__ */ jsx38(
+    BubbleMenu4,
     __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__ */ jsxs21(TooltipProvider, { children: [
-        /* @__PURE__ */ jsxs21("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
+      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__ */ jsxs21(Tooltip, { children: [
-            /* @__PURE__ */ jsx39(TooltipTrigger, { children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsxs20(Tooltip, { children: [
+            /* @__PURE__ */ jsx38(TooltipTrigger, { children: /* @__PURE__ */ jsx38(
               InfoIcon2,
               {
                 className: cn("mly:size-3 mly:stroke-[2.5] mly:text-gray-500")
               }
             ) }),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx38(
               TooltipContent,
               {
                 sideOffset: 14,
@@ -8426,7 +8334,7 @@ function RepeatBubbleMenu(props) {
             )
           ] })
         ] }),
-        !isUpdatingKey && /* @__PURE__ */ jsx39(
+        !isUpdatingKey && /* @__PURE__ */ jsx38(
           "button",
           {
             onClick: () => {
@@ -8447,7 +8355,7 @@ function RepeatBubbleMenu(props) {
             })
           }
         ),
-        isUpdatingKey && /* @__PURE__ */ jsx39(
+        isUpdatingKey && /* @__PURE__ */ jsx38(
           "form",
           {
             onSubmit: (e) => {
@@ -8459,7 +8367,7 @@ function RepeatBubbleMenu(props) {
                 setIsUpdatingKey(false);
               }
             },
-            children: /* @__PURE__ */ jsx39(
+            children: /* @__PURE__ */ jsx38(
               InputAutocomplete,
               {
                 editor,
@@ -8485,8 +8393,8 @@ function RepeatBubbleMenu(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsx39(Divider, {}),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx38(Divider, {}),
+        /* @__PURE__ */ jsx38(
           ShowPopover,
           {
             showIfKey: state.currentShowIfKey,
@@ -8504,16 +8412,16 @@ function RepeatBubbleMenu(props) {
 }
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu6, findChildren as findChildren2 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu5, findChildren as findChildren2 } from "@tiptap/react";
 import { ChevronUp, Trash as Trash3 } from "lucide-react";
-import { useCallback as useCallback9 } from "react";
-import { sticky as sticky6 } from "tippy.js";
+import { useCallback as useCallback8 } from "react";
+import { sticky as sticky5 } from "tippy.js";
 
 // src/editor/components/icons/border-color.tsx
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 function BorderColor(props) {
   const _a = props, { topBarClassName } = _a, rest = __objRest(_a, ["topBarClassName"]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "svg",
     __spreadProps(__spreadValues({
       width: 11,
@@ -8523,8 +8431,8 @@ function BorderColor(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx40("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx39(
           "path",
           {
             d: "M0.666504 9V6.33333C0.666504 3.38781 3.05432 1 5.99984 1H10.6665",
@@ -8538,9 +8446,9 @@ function BorderColor(props) {
 }
 
 // src/editor/components/icons/margin-icon.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function MarginIcon(props) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(
     "svg",
     __spreadProps(__spreadValues({
       width: 12,
@@ -8549,7 +8457,7 @@ function MarginIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx40(
         "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",
@@ -8563,9 +8471,9 @@ function MarginIcon(props) {
 }
 
 // src/editor/components/icons/padding-icon.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function PaddingIcon(props) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     "svg",
     __spreadProps(__spreadValues({
       width: 10,
@@ -8574,7 +8482,7 @@ function PaddingIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx41(
         "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",
@@ -8589,7 +8497,7 @@ function PaddingIcon(props) {
 
 // src/editor/components/ui/color-picker.tsx
 import { HexColorPicker, HexColorInput } from "react-colorful";
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 function ColorPicker(props) {
   const {
     color,
@@ -8607,14 +8515,14 @@ function ColorPicker(props) {
       onColorChange(color2);
     });
   };
-  const popoverButton = /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ jsx43(
+  const popoverButton = /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ jsx42(
     BaseButton,
     {
       variant: "ghost",
       className: "mly:h-7 mly:w-7 mly:shrink-0",
       size: "sm",
       type: "button",
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx42(
         "div",
         {
           className: cn(
@@ -8628,7 +8536,7 @@ function ColorPicker(props) {
       )
     }
   ) });
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     Popover,
     {
       onOpenChange: (open) => {
@@ -8637,17 +8545,24 @@ function ColorPicker(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ jsxs23(Tooltip, { children: [
-          /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ jsx43(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ jsxs22(Tooltip, { children: [
+          /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ jsx42(
+            TooltipContent,
+            {
+              sideOffset: 8,
+              className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+              children: /* @__PURE__ */ jsx42("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: tooltip })
+            }
+          )
         ] }) : popoverButton,
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx42(
           PopoverContent,
           {
             className: "mly:w-full mly:rounded-none mly:border-0 mly:bg-transparent! mly:p-0! mly:shadow-none mly:drop-shadow-md",
             sideOffset: 8,
-            children: /* @__PURE__ */ jsxs23("div", { className: "mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
-              /* @__PURE__ */ jsx43(
+            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(
                 HexColorPicker,
                 {
                   color,
@@ -8655,7 +8570,7 @@ function ColorPicker(props) {
                   className: "mly:flex mly:w-full! mly:flex-col mly:gap-4"
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx42(
                 HexColorInput,
                 {
                   alpha: true,
@@ -8665,10 +8580,10 @@ function ColorPicker(props) {
                   prefixed: true
                 }
               ),
-              suggestedColors.length > 0 && /* @__PURE__ */ jsxs23("div", { children: [
-                /* @__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(
+              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(
                   BaseButton,
                   {
                     variant: "ghost",
@@ -8676,7 +8591,7 @@ function ColorPicker(props) {
                     className: "!mly:size-7 mly:shrink-0",
                     type: "button",
                     onClick: () => handleColorChange(suggestedColor),
-                    children: /* @__PURE__ */ jsx43(
+                    children: /* @__PURE__ */ jsx42(
                       "div",
                       {
                         className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded",
@@ -8698,10 +8613,10 @@ function ColorPicker(props) {
 }
 
 // src/editor/components/section-menu/use-section-state.tsx
-import { useEditorState as useEditorState6 } from "@tiptap/react";
-import deepEql6 from "fast-deep-equal";
+import { useEditorState as useEditorState5 } from "@tiptap/react";
+import deepEql5 from "fast-deep-equal";
 var useSectionState = (editor) => {
-  const states = useEditorState6({
+  const states = useEditorState5({
     editor,
     selector: (ctx) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -8723,19 +8638,19 @@ var useSectionState = (editor) => {
         currentShowIfKey: ((_n = ctx.editor.getAttributes("section")) == null ? void 0 : _n.showIfKey) || ""
       };
     },
-    equalityFn: deepEql6
+    equalityFn: deepEql5
   });
   return states;
 };
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 function SectionBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
     return null;
   }
-  const getReferenceClientRect = useCallback9(() => {
+  const getReferenceClientRect = useCallback8(() => {
     const renderContainer = getRenderContainer(editor, "section");
     const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
     return rect;
@@ -8764,7 +8679,7 @@ function SectionBubbleMenu(props) {
       },
       getReferenceClientRect,
       appendTo: () => appendTo == null ? void 0 : appendTo.current,
-      plugins: [sticky6],
+      plugins: [sticky5],
       sticky: "popper",
       maxWidth: "auto"
     },
@@ -8776,12 +8691,12 @@ function SectionBubbleMenu(props) {
     { value: "6", label: "Smooth" },
     { value: "9999", label: "Round" }
   ];
-  return /* @__PURE__ */ jsx44(
-    BubbleMenu6,
+  return /* @__PURE__ */ jsx43(
+    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__ */ jsxs24(TooltipProvider, { children: [
-        /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsxs23(TooltipProvider, { children: [
+        /* @__PURE__ */ jsx43(
           AlignmentSwitch,
           {
             alignment: state.currentAlignment,
@@ -8793,9 +8708,9 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        /* @__PURE__ */ jsx44(Divider, {}),
-        /* @__PURE__ */ jsxs24("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(Divider, {}),
+        /* @__PURE__ */ jsxs23("div", { className: "mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ jsx43(
             Select,
             {
               label: "Border Radius",
@@ -8811,7 +8726,7 @@ function SectionBubbleMenu(props) {
               className: "mly:capitalize"
             }
           ),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx43(
             Select,
             {
               label: "Border Width",
@@ -8833,8 +8748,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx44(Divider, {}),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(Divider, {}),
+        /* @__PURE__ */ jsx43(
           Select,
           {
             icon: MarginIcon,
@@ -8862,8 +8777,8 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ jsx44(Divider, {}),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(Divider, {}),
+        /* @__PURE__ */ jsx43(
           Select,
           {
             icon: PaddingIcon,
@@ -8891,9 +8806,9 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ jsx44(Divider, {}),
-        /* @__PURE__ */ jsxs24("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(Divider, {}),
+        /* @__PURE__ */ jsxs23("div", { className: "mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ jsx43(
             ColorPicker,
             {
               color: state.currentBorderColor,
@@ -8904,14 +8819,14 @@ function SectionBubbleMenu(props) {
                 });
               },
               tooltip: "Border Color",
-              children: /* @__PURE__ */ jsx44(
+              children: /* @__PURE__ */ jsx43(
                 BaseButton,
                 {
                   variant: "ghost",
                   className: "mly:h-7 mly:w-7 mly:shrink-0",
                   size: "sm",
                   type: "button",
-                  children: /* @__PURE__ */ jsx44(
+                  children: /* @__PURE__ */ jsx43(
                     BorderColor,
                     {
                       className: "mly:size-3 mly:shrink-0",
@@ -8925,7 +8840,7 @@ function SectionBubbleMenu(props) {
               )
             }
           ),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx43(
             ColorPicker,
             {
               color: state.currentBackgroundColor,
@@ -8941,8 +8856,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx44(Divider, {}),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx43(Divider, {}),
+        /* @__PURE__ */ jsx43(
           BubbleMenuButton,
           {
             icon: Trash3,
@@ -8952,14 +8867,14 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        state.isColumnsActive && /* @__PURE__ */ jsxs24(Fragment6, { children: [
-          /* @__PURE__ */ jsx44(Divider, {}),
-          /* @__PURE__ */ jsxs24(Popover, { children: [
-            /* @__PURE__ */ jsxs24(PopoverTrigger, { className: "mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: [
+        state.isColumnsActive && /* @__PURE__ */ jsxs23(Fragment6, { children: [
+          /* @__PURE__ */ jsx43(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: [
               "Column",
-              /* @__PURE__ */ jsx44(ChevronUp, { className: "mly:h-3 mly:w-3" })
+              /* @__PURE__ */ jsx43(ChevronUp, { className: "mly:h-3 mly:w-3" })
             ] }),
-            /* @__PURE__ */ jsx44(
+            /* @__PURE__ */ jsx43(
               PopoverContent,
               {
                 className: "mly:w-max mly:rounded-lg mly:p-0.5!",
@@ -8972,7 +8887,7 @@ function SectionBubbleMenu(props) {
                 onCloseAutoFocus: (e) => {
                   e.preventDefault();
                 },
-                children: /* @__PURE__ */ jsx44(ColumnsBubbleMenuContent, { editor })
+                children: /* @__PURE__ */ jsx43(ColumnsBubbleMenuContent, { editor })
               }
             )
           ] })
@@ -8983,13 +8898,13 @@ function SectionBubbleMenu(props) {
 }
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu7 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu6 } from "@tiptap/react";
 
 // src/editor/components/spacer-menu/use-spacer-state.ts
-import { useEditorState as useEditorState7 } from "@tiptap/react";
-import deepEql7 from "fast-deep-equal";
+import { useEditorState as useEditorState6 } from "@tiptap/react";
+import deepEql6 from "fast-deep-equal";
 var useSpacerState = (editor) => {
-  const states = useEditorState7({
+  const states = useEditorState6({
     editor,
     selector: (ctx) => {
       var _a;
@@ -8997,14 +8912,14 @@ var useSpacerState = (editor) => {
         currentShowIfKey: ((_a = ctx.editor.getAttributes("spacer")) == null ? void 0 : _a.showIfKey) || ""
       };
     },
-    equalityFn: deepEql7
+    equalityFn: deepEql6
   });
   return states;
 };
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function SpacerBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -9036,11 +8951,11 @@ function SpacerBubbleMenu(props) {
     }
   });
   const state = useSpacerState(editor);
-  return /* @__PURE__ */ jsx45(
-    BubbleMenu7,
+  return /* @__PURE__ */ jsx44(
+    BubbleMenu6,
     __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__ */ jsx45(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx44(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ jsx44(
         BubbleMenuButton,
         __spreadValues({
           className: "!mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
@@ -9281,11 +9196,11 @@ import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
 
 // src/editor/components/input.tsx
 import * as React5 from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var Input = React5.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx45(
       "input",
       __spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
         type,
@@ -9303,11 +9218,11 @@ Input.displayName = "Input";
 
 // src/editor/components/textarea.tsx
 import * as React6 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var Textarea = React6.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx46(
       "textarea",
       __spreadValues({
         className: cn(
@@ -9323,18 +9238,18 @@ var Textarea = React6.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/editor/nodes/link-card.tsx
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx47, 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__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     NodeViewWrapper4,
     {
       className: `react-component ${props.selected && "ProseMirror-selectednode"}`,
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
-      children: /* @__PURE__ */ jsxs25(Popover, { open: props.selected, children: [
-        /* @__PURE__ */ jsx48(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsxs24(Popover, { open: props.selected, children: [
+        /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
           "div",
           {
             tabIndex: -1,
@@ -9343,8 +9258,8 @@ function LinkCardComponent(props) {
               const pos = getPos();
               editor.commands.setNodeSelection(pos);
             },
-            children: /* @__PURE__ */ jsxs25("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
-              image2 && /* @__PURE__ */ jsx48("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ jsx48(
+            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(
                 "img",
                 {
                   src: image2,
@@ -9353,23 +9268,23 @@ function LinkCardComponent(props) {
                   draggable: editor.isEditable
                 }
               ) }),
-              /* @__PURE__ */ jsx48("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ jsxs25("div", { className: cn("mly:flex mly:flex-col"), children: [
-                /* @__PURE__ */ jsxs25("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
-                  /* @__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 }),
+              /* @__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__ */ 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 }),
                   " ",
-                  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 })
+                  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 })
                 ] }),
-                /* @__PURE__ */ jsxs25("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
+                /* @__PURE__ */ jsxs24("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
                   description,
                   " ",
-                  linkTitle ? /* @__PURE__ */ jsx48("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
+                  linkTitle ? /* @__PURE__ */ jsx47("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
                 ] })
               ] }) })
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs24(
           PopoverContent,
           {
             align: "end",
@@ -9378,9 +9293,9 @@ function LinkCardComponent(props) {
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
             children: [
-              /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
-                /* @__PURE__ */ jsx48(
+              /* @__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(
                   Input,
                   {
                     placeholder: "Add Image",
@@ -9394,9 +9309,9 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
-                /* @__PURE__ */ jsx48(
+              /* @__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(
                   Input,
                   {
                     placeholder: "Add title",
@@ -9409,9 +9324,9 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
-                /* @__PURE__ */ jsx48(
+              /* @__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(
                   Textarea,
                   {
                     placeholder: "Add description here",
@@ -9424,10 +9339,10 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs25("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
-                /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
-                  /* @__PURE__ */ jsx48(
+              /* @__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(
                     Input,
                     {
                       placeholder: "Add link title here",
@@ -9440,9 +9355,9 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
-                  /* @__PURE__ */ jsx48(
+                /* @__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(
                     Input,
                     {
                       placeholder: "Add link here",
@@ -9456,10 +9371,10 @@ function LinkCardComponent(props) {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs25("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
-                /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
-                  /* @__PURE__ */ jsx48(
+              /* @__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(
                     Input,
                     {
                       placeholder: "Add badge text here",
@@ -9472,9 +9387,9 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs25("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ jsx48("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
-                  /* @__PURE__ */ jsx48(
+                /* @__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(
                     Input,
                     {
                       placeholder: "Add sub title here",
@@ -9577,7 +9492,7 @@ import { useMemo as useMemo10 } 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 jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 function ButtonLabelInput(props) {
   var _a, _b;
   const { value, onValueChange, isVariable, editor } = props;
@@ -9599,8 +9514,8 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ jsxs26("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs25("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
+    !isEditing && /* @__PURE__ */ jsx48(
       "button",
       {
         onClick: () => {
@@ -9621,7 +9536,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ jsx49(
+    isEditing && /* @__PURE__ */ jsx48(
       InputAutocomplete,
       {
         editor,
@@ -9648,7 +9563,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -9691,7 +9606,7 @@ function ButtonView(props) {
       ([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
     )) == null ? void 0 : _a[0];
   }, [paddingRight, paddingTop, sizes]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     NodeViewWrapper5,
     {
       draggable: editor.isEditable,
@@ -9700,8 +9615,8 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ jsxs27(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsxs26(Popover, { open: props.selected && editor.isEditable, children: [
+        /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx49("div", { children: /* @__PURE__ */ jsx49(
           "button",
           {
             className: cn(
@@ -9744,7 +9659,7 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx49(
           PopoverContent,
           {
             align: "end",
@@ -9753,8 +9668,8 @@ function ButtonView(props) {
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ jsx50(TooltipProvider, { children: /* @__PURE__ */ jsxs27("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-              /* @__PURE__ */ jsx50(
+            children: /* @__PURE__ */ jsx49(TooltipProvider, { children: /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+              /* @__PURE__ */ jsx49(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -9768,9 +9683,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ jsx50(Divider, {}),
-              /* @__PURE__ */ jsxs27("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ jsx50(
+              /* @__PURE__ */ jsx49(Divider, {}),
+              /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ jsx49(
                   Select,
                   {
                     label: "Border Radius",
@@ -9788,7 +9703,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ jsx50(
+                /* @__PURE__ */ jsx49(
                   Select,
                   {
                     label: "Style",
@@ -9806,7 +9721,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ jsx50(
+                /* @__PURE__ */ jsx49(
                   Select,
                   {
                     label: "Size",
@@ -9830,9 +9745,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx50(Divider, {}),
-              /* @__PURE__ */ jsxs27("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ jsx50(
+              /* @__PURE__ */ jsx49(Divider, {}),
+              /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ jsx49(
                   AlignmentSwitch,
                   {
                     alignment,
@@ -9843,7 +9758,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx50(
+                /* @__PURE__ */ jsx49(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -9859,9 +9774,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx50(Divider, {}),
-              /* @__PURE__ */ jsxs27("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ jsx50(
+              /* @__PURE__ */ jsx49(Divider, {}),
+              /* @__PURE__ */ jsxs26("div", { className: "mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ jsx49(
                   BackgroundColorPickerPopup,
                   {
                     variant,
@@ -9873,7 +9788,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx50(
+                /* @__PURE__ */ jsx49(
                   TextColorPickerPopup,
                   {
                     color: textColor || "transparent",
@@ -9894,20 +9809,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx49(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
           className: "mly:size-7",
-          children: /* @__PURE__ */ jsx50(
+          children: /* @__PURE__ */ jsx49(
             "div",
             {
               className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded-full mly:shadow",
@@ -9926,16 +9841,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ jsx50(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx49(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
       className: "mly:size-7",
-      children: /* @__PURE__ */ jsxs27("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-        /* @__PURE__ */ jsx50("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ jsx50(
+      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(
           "div",
           {
             className: "mly:h-[2px] mly:w-3 mly:shrink-0 mly:rounded-md mly:shadow",
@@ -10266,83 +10181,24 @@ import { createLowlight, common } from "lowlight";
 
 // src/editor/nodes/html/html-view.tsx
 import { NodeViewContent, NodeViewWrapper as NodeViewWrapper6 } from "@tiptap/react";
-import { useMemo as useMemo11 } from "react";
-import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function HTMLCodeBlockView(props) {
-  const { node, updateAttributes: updateAttributes2 } = props;
-  let { language, activeTab = "code" } = node.attrs;
-  activeTab || (activeTab = "code");
+  const { node } = props;
+  const { language } = node.attrs;
   const languageClass = language ? `language-${language}` : "";
-  const html2 = useMemo11(() => {
-    const text2 = node.content.content.reduce((acc, cur) => {
-      if (cur.type.name === "text") {
-        return acc + cur.text;
-      } else if (cur.type.name === "variable") {
-        const { id: variable, fallback } = (cur == null ? void 0 : cur.attrs) || {};
-        const formattedVariable = fallback ? `{{${variable},fallback=${fallback}}}` : `{{${variable}}}`;
-        return acc + formattedVariable;
-      }
-      return acc;
-    }, "");
-    const htmlParser = new DOMParser();
-    const htmlDoc = htmlParser.parseFromString(text2, "text/html");
-    const style = htmlDoc.querySelectorAll("style");
-    const body = htmlDoc.body;
-    const combinedStyle = Array.from(style).map((s) => s.innerHTML).join("\n");
-    return `<style>${combinedStyle}</style>${body.innerHTML}`;
-  }, [activeTab]);
-  const isEmpty = html2 === "";
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx50(
     NodeViewWrapper6,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
-      children: [
-        activeTab === "code" && /* @__PURE__ */ jsx51("pre", { className: "mly:my-0 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-2 mly:text-black", children: /* @__PURE__ */ jsx51(
-          NodeViewContent,
-          {
-            as: "code",
-            className: cn("is-editable", languageClass)
-          }
-        ) }),
-        activeTab === "preview" && /* @__PURE__ */ jsx51(
-          "div",
-          {
-            className: cn(
-              "mly:not-prose mly:rounded-lg mly:border mly:border-gray-200 mly:p-2",
-              isEmpty && "mly:min-h-[42px]"
-            ),
-            ref: (node2) => {
-              if (!node2 || (node2 == null ? void 0 : node2.shadowRoot)) {
-                return;
-              }
-              const shadow = node2.attachShadow({ mode: "open" });
-              const sheet = new CSSStyleSheet();
-              sheet.replaceSync(`
-              * { font-family: 'Inter', sans-serif; }
-              blockquote, h1, h2, h3, img, li, ol, p, ul {
-                margin-top: 0;
-                margin-bottom: 0;
-              }
-            `);
-              shadow.adoptedStyleSheets = [sheet];
-              const container = document.createElement("div");
-              container.innerHTML = html2;
-              shadow.appendChild(container);
-            },
-            contentEditable: false,
-            onClick: () => {
-              if (!isEmpty) {
-                return;
-              }
-              updateAttributes2({
-                activeTab: "code"
-              });
-            }
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx50("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ jsx50(
+        NodeViewContent,
+        {
+          as: "code",
+          className: cn("is-editable", languageClass)
+        }
+      ) })
     }
   );
 }
@@ -10486,10 +10342,10 @@ 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 jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 function RepeatView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs27(
     NodeViewWrapper7,
     {
       "data-type": "repeat",
@@ -10497,8 +10353,8 @@ function RepeatView(props) {
       "data-drag-handle": editor.isEditable,
       className: "mly:relative",
       children: [
-        /* @__PURE__ */ jsx52(NodeViewContent2, { className: "is-editable" }),
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsx51(NodeViewContent2, { className: "is-editable" }),
+        /* @__PURE__ */ jsxs27(
           "div",
           {
             role: "button",
@@ -10509,8 +10365,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__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" })
+              /* @__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" })
             ]
           }
         )
@@ -10755,7 +10611,7 @@ import { ReactRenderer } from "@tiptap/react";
 import {
   forwardRef as forwardRef8,
   Fragment as Fragment8,
-  useCallback as useCallback11,
+  useCallback as useCallback10,
   useEffect as useEffect8,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
@@ -10766,8 +10622,8 @@ import tippy2 from "tippy.js";
 
 // src/editor/extensions/slash-command/slash-command-item.tsx
 import { ChevronRightIcon } from "lucide-react";
-import { useCallback as useCallback10, useState as useState10, useRef as useRef10, useEffect as useEffect7 } from "react";
-import { Fragment as Fragment7, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
+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";
 function SlashCommandItem(props) {
   var _a;
   const {
@@ -10790,19 +10646,19 @@ function SlashCommandItem(props) {
   const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && (isHovered || isActive && !hoveredItemKey);
   const hasRenderFunction = typeof item.render === "function";
   const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
-  let value = /* @__PURE__ */ jsxs30(Fragment7, { children: [
-    /* @__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__ */ jsxs30("div", { className: "mly:grow", children: [
-      /* @__PURE__ */ jsx53("p", { className: "mly:font-medium", children: item.title }),
-      /* @__PURE__ */ jsx53("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
+  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__ */ 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 })
     ] }),
-    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]" }) })
+    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]" }) })
   ] });
   if (renderFunctionValue !== null && renderFunctionValue !== true) {
     value = renderFunctionValue;
   }
   const openTimerRef = useRef10(0);
-  const handleDelayedOpen = useCallback10(() => {
+  const handleDelayedOpen = useCallback9(() => {
     window.clearTimeout(openTimerRef.current);
     const delay = 200;
     openTimerRef.current = window.setTimeout(() => {
@@ -10827,8 +10683,8 @@ function SlashCommandItem(props) {
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs30(Tooltip, { open, children: [
-    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs28(Tooltip, { open, children: [
+    /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx52(
       "button",
       {
         className: cn(
@@ -10843,14 +10699,14 @@ function SlashCommandItem(props) {
         children: value
       }
     ) }),
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx52(
       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__ */ jsxs30(Fragment7, { children: [
-          /* @__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(
+        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(
             "img",
             {
               src: item == null ? void 0 : item.preview,
@@ -10858,7 +10714,7 @@ function SlashCommandItem(props) {
               className: "mly:absolute mly:inset-0 mly:h-full mly:w-full mly:object-cover"
             }
           ) }),
-          /* @__PURE__ */ jsx53("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
+          /* @__PURE__ */ jsx52("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
         ] })
       }
     )
@@ -10947,7 +10803,7 @@ function processCommand(options) {
 }
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx53, 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);
@@ -10956,7 +10812,7 @@ var CommandList = forwardRef8((props, ref) => {
   const prevQuery = useRef11("");
   const prevSelectedGroupIndex = useRef11(0);
   const prevSelectedCommandIndex = useRef11(0);
-  const selectItem = useCallback11(
+  const selectItem = useCallback10(
     (groupIndex, commandIndex) => {
       const item = groups[groupIndex].commands[commandIndex];
       if (!item) {
@@ -11085,15 +10941,15 @@ var CommandList = forwardRef8((props, ref) => {
   if (!groups || groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx54(TooltipProvider, { children: /* @__PURE__ */ jsxs31("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(
+  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(
       "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__ */ jsxs31(Fragment8, { children: [
-          /* @__PURE__ */ jsx54(
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs29(Fragment8, { children: [
+          /* @__PURE__ */ jsx53(
             "span",
             {
               className: cn(
@@ -11103,9 +10959,9 @@ var CommandList = forwardRef8((props, ref) => {
               children: group.title
             }
           ),
-          /* @__PURE__ */ jsx54("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ jsx53("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
             const itemKey = `${groupIndex}-${commandIndex}`;
-            return /* @__PURE__ */ jsx54(
+            return /* @__PURE__ */ jsx53(
               SlashCommandItem,
               {
                 item,
@@ -11125,16 +10981,16 @@ var CommandList = forwardRef8((props, ref) => {
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ jsx54("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ jsxs31("div", { className: "mly:flex mly:items-center", children: [
-      /* @__PURE__ */ jsxs31("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__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" }),
+    /* @__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__ */ 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" }),
         " ",
         "to navigate"
       ] }),
-      /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
-      /* @__PURE__ */ jsxs31("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ jsx54("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
+      /* @__PURE__ */ jsx53("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" }),
         " ",
         "to select"
       ] })
@@ -11214,7 +11070,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 jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var VariableList = forwardRef9((props, ref) => {
   var _a;
   const { items = [], editor } = props;
@@ -11243,7 +11099,7 @@ var VariableList = forwardRef9((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx54(
     VariableSuggestionPopoverComponent,
     {
       items,
@@ -11427,7 +11283,7 @@ var isCustomNodeSelected = (editor, node) => {
 };
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu8 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu7 } from "@tiptap/react";
 
 // src/editor/components/text-menu/text-bubble-content.tsx
 import {
@@ -11441,11 +11297,11 @@ import {
 } from "lucide-react";
 
 // src/editor/components/text-menu/use-text-menu-state.tsx
-import { useEditorState as useEditorState8 } from "@tiptap/react";
-import deepEql8 from "fast-deep-equal";
+import { useEditorState as useEditorState7 } from "@tiptap/react";
+import deepEql7 from "fast-deep-equal";
 var DEFAULT_TEXT_COLOR = "#374151";
 var useTextMenuState = (editor) => {
-  const states = useEditorState8({
+  const states = useEditorState7({
     editor,
     selector: (ctx) => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -11461,13 +11317,13 @@ var useTextMenuState = (editor) => {
         paragraphShowIfKey: ((_h = ctx.editor.getAttributes("paragraph")) == null ? void 0 : _h.showIfKey) || ""
       };
     },
-    equalityFn: deepEql8
+    equalityFn: deepEql7
   });
   return states;
 };
 
 // src/editor/components/text-menu/text-bubble-content.tsx
-import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 function TextBubbleContent(props) {
   var _a, _b, _c, _d;
   const { editor, showListMenu = true } = props;
@@ -11511,9 +11367,9 @@ function TextBubbleContent(props) {
       tooltip: "Code"
     }
   ];
-  return /* @__PURE__ */ jsxs32(Fragment9, { children: [
-    items.map((item, index) => /* @__PURE__ */ jsx56(BubbleMenuButton, __spreadValues({}, item), index)),
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    items.map((item, index) => /* @__PURE__ */ jsx55(BubbleMenuButton, __spreadValues({}, item), index)),
+    /* @__PURE__ */ jsx55(
       AlignmentSwitch,
       {
         alignment: state.textAlign,
@@ -11522,8 +11378,8 @@ function TextBubbleContent(props) {
         }
       }
     ),
-    !state.isListActive && showListMenu && /* @__PURE__ */ jsxs32(Fragment9, { children: [
-      /* @__PURE__ */ jsx56(
+    !state.isListActive && showListMenu && /* @__PURE__ */ jsxs30(Fragment9, { children: [
+      /* @__PURE__ */ jsx55(
         BubbleMenuButton,
         {
           icon: List2,
@@ -11533,7 +11389,7 @@ function TextBubbleContent(props) {
           tooltip: "Bullet List"
         }
       ),
-      /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsx55(
         BubbleMenuButton,
         {
           icon: ListOrdered2,
@@ -11544,7 +11400,7 @@ function TextBubbleContent(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx55(
       LinkInputPopover,
       {
         defaultValue: (_d = state == null ? void 0 : state.linkUrl) != null ? _d : "",
@@ -11560,8 +11416,8 @@ function TextBubbleContent(props) {
         isVariable: state.isUrlVariable
       }
     ),
-    /* @__PURE__ */ jsx56(Divider, {}),
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx55(Divider, {}),
+    /* @__PURE__ */ jsx55(
       ColorPicker,
       {
         color: state.currentTextColor,
@@ -11570,16 +11426,16 @@ function TextBubbleContent(props) {
         },
         tooltip: "Text Color",
         suggestedColors,
-        children: /* @__PURE__ */ jsx56(
+        children: /* @__PURE__ */ jsx55(
           BaseButton,
           {
             variant: "ghost",
             size: "sm",
             type: "button",
             className: "mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
-            children: /* @__PURE__ */ jsxs32("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-              /* @__PURE__ */ jsx56("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
-              /* @__PURE__ */ jsx56(
+            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(
                 "div",
                 {
                   className: "mly:h-[2px] mly:w-3",
@@ -11596,34 +11452,41 @@ function TextBubbleContent(props) {
 
 // src/editor/components/text-menu/turn-into-block.tsx
 import { ChevronDownIcon as ChevronDownIcon2, PilcrowIcon } from "lucide-react";
-import { useMemo as useMemo12 } from "react";
-import { jsx as jsx57, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useMemo as useMemo11 } from "react";
+import { jsx as jsx56, 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 = useMemo12(
+  const activeItem = useMemo11(
     () => options.find((option) => option.type === "option" && option.isActive()),
     [options]
   );
   const { icon: ActiveIcon = PilcrowIcon } = activeItem || {};
-  return /* @__PURE__ */ jsxs33(Popover, { children: [
-    /* @__PURE__ */ jsxs33(Tooltip, { children: [
-      /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs31(Popover, { children: [
+    /* @__PURE__ */ jsxs31(Tooltip, { children: [
+      /* @__PURE__ */ jsx56(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"
           ),
           children: [
-            /* @__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(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(TooltipContent, { sideOffset: 8, children: "Turn into" })
+      /* @__PURE__ */ jsx56(
+        TooltipContent,
+        {
+          sideOffset: 8,
+          className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+          children: /* @__PURE__ */ jsx56("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: "Turn into" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx56(
       PopoverContent,
       {
         align: "start",
@@ -11632,21 +11495,21 @@ function TurnIntoBlock(props) {
         className: "mly:flex mly:w-[160px] mly:flex-col mly:rounded-md mly:p-1",
         children: options.map((option, index) => {
           if (isOption(option)) {
-            return /* @__PURE__ */ jsxs33(
+            return /* @__PURE__ */ jsxs31(
               BaseButton,
               {
                 onClick: option.onClick,
                 variant: "ghost",
                 className: "mly:mb-0.5 mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2.5 mly:py-1 mly:!pl-3.5 mly:text-sm mly:font-normal mly:text-midnight-gray",
                 children: [
-                  /* @__PURE__ */ jsx57(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
+                  /* @__PURE__ */ jsx56(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
                   option.label
                 ]
               },
               option.id
             );
           } else if (isCategory(option)) {
-            return /* @__PURE__ */ jsx57(
+            return /* @__PURE__ */ jsx56(
               "label",
               {
                 className: cn(
@@ -11665,7 +11528,7 @@ function TurnIntoBlock(props) {
 }
 
 // src/editor/components/text-menu/use-turn-into-block-options.tsx
-import { useEditorState as useEditorState9 } from "@tiptap/react";
+import { useEditorState as useEditorState8 } from "@tiptap/react";
 import {
   Heading1Icon,
   Heading2Icon,
@@ -11675,7 +11538,7 @@ import {
   PilcrowIcon as PilcrowIcon2
 } from "lucide-react";
 function useTurnIntoBlockOptions(editor) {
-  return useEditorState9({
+  return useEditorState8({
     editor,
     selector: ({ editor: editor2 }) => [
       {
@@ -11747,7 +11610,7 @@ function useTurnIntoBlockOptions(editor) {
 }
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-import { jsx as jsx58, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 function TextBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11798,23 +11661,23 @@ function TextBubbleMenu(props) {
     }
   });
   const turnIntoBlockOptions = useTurnIntoBlockOptions(editor);
-  return /* @__PURE__ */ jsx58(
-    BubbleMenu8,
+  return /* @__PURE__ */ jsx57(
+    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__ */ jsxs34(TooltipProvider, { children: [
-        /* @__PURE__ */ jsx58(TurnIntoBlock, { options: turnIntoBlockOptions }),
-        /* @__PURE__ */ jsx58(Divider, { className: "mly:mx-0" }),
-        /* @__PURE__ */ jsx58(TextBubbleContent, { editor })
+      children: /* @__PURE__ */ jsxs32(TooltipProvider, { children: [
+        /* @__PURE__ */ jsx57(TurnIntoBlock, { options: turnIntoBlockOptions }),
+        /* @__PURE__ */ jsx57(Divider, { className: "mly:mx-0" }),
+        /* @__PURE__ */ jsx57(TextBubbleContent, { editor })
       ] })
     })
   );
 }
 
 // src/editor/components/variable-menu/variable-bubble-menu.tsx
-import { BubbleMenu as BubbleMenu9 } from "@tiptap/react";
-import { sticky as sticky7 } from "tippy.js";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { BubbleMenu as BubbleMenu8 } from "@tiptap/react";
+import { sticky as sticky6 } from "tippy.js";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function VariableBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11830,18 +11693,18 @@ function VariableBubbleMenu(props) {
       popperOptions: {
         modifiers: [{ name: "flip", enabled: false }]
       },
-      plugins: [sticky7],
+      plugins: [sticky6],
       sticky: "popper",
       maxWidth: "100%",
       appendTo: () => (appendTo == null ? void 0 : appendTo.current) || "parent",
       placement: "top-start"
     }
   });
-  return /* @__PURE__ */ jsx59(
-    BubbleMenu9,
+  return /* @__PURE__ */ jsx58(
+    BubbleMenu8,
     __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__ */ jsx59(TooltipProvider, { children: /* @__PURE__ */ jsx59(TextBubbleContent, { showListMenu: false, editor }) })
+      children: /* @__PURE__ */ jsx58(TooltipProvider, { children: /* @__PURE__ */ jsx58(TextBubbleContent, { showListMenu: false, editor }) })
     })
   );
 }
@@ -11927,8 +11790,8 @@ function replaceDeprecatedNode(json) {
 }
 
 // src/editor/index.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
-function Editor13(props) {
+import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+function Editor12(props) {
   const {
     config: {
       wrapClassName = "",
@@ -11951,7 +11814,7 @@ function Editor13(props) {
     scrollThreshold = 40,
     scrollMargin = 40
   } = props;
-  const formattedContent = useMemo13(() => {
+  const formattedContent = useMemo12(() => {
     if (contentJson) {
       const json = (contentJson == null ? void 0 : contentJson.type) === "doc" ? contentJson : {
         type: "doc",
@@ -12000,7 +11863,7 @@ function Editor13(props) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ jsx60(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsx59(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ jsxs33(
     "div",
     {
       id: "mly-editor",
@@ -12011,8 +11874,8 @@ function Editor13(props) {
       ),
       ref: menuContainerRef,
       children: [
-        hasMenuBar && /* @__PURE__ */ jsx60(EditorMenuBar, { config: props.config, editor }),
-        /* @__PURE__ */ jsxs35(
+        hasMenuBar && /* @__PURE__ */ jsx59(EditorMenuBar, { config: props.config, editor }),
+        /* @__PURE__ */ jsxs33(
           "div",
           {
             className: cn(
@@ -12020,17 +11883,16 @@ function Editor13(props) {
               bodyClassName
             ),
             children: [
-              /* @__PURE__ */ jsx60(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx60(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx60(SpacerBubbleMenu, { 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(HTMLBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ jsx60(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
+              /* @__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 })
             ]
           }
         )
@@ -12039,6 +11901,6 @@ function Editor13(props) {
   ) });
 }
 export {
-  Editor13 as Editor
+  Editor12 as Editor
 };
 //# sourceMappingURL=index.mjs.map