@daisychainapp/maily-to-core 0.3.6 → 0.4.1

package/dist/index.cjs

@@ -80,13 +80,13 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Editor: () => Editor13
+  Editor: () => Editor12
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/editor/index.tsx
-var import_react66 = require("@tiptap/react");
-var import_react67 = require("react");
+var import_react62 = require("@tiptap/react");
+var import_react63 = require("react");
 
 // src/editor/components/column-menu/columns-bubble-menu.tsx
 var import_react8 = require("@tiptap/react");
@@ -4079,16 +4079,16 @@ function Select(props) {
     placeholder
   } = props;
   const selectId = `mly${(0, import_react7.useId)()}`;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mly:relative", children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mly:relative mly:inline-flex mly:h-7 mly:items-center mly:overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: selectId, className: "mly:sr-only", children: label }),
-    Icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mly:pointer-events-none mly:absolute mly:inset-y-0 mly:left-2 mly:z-20 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: cn("mly:size-3", iconClassName) }) }),
+    Icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mly:pointer-events-none mly:absolute mly:left-2 mly:top-1/2 mly:z-20 mly:flex mly:h-7 mly:-translate-y-1/2 mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: cn("mly:size-3.5", iconClassName) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "select",
       {
         id: selectId,
         className: cn(
-          "mly-select-padding mly:flex mly:min-h-7 mly:max-w-max mly:appearance-none mly:items-center mly:rounded-md mly:bg-white mly:text-sm mly:text-midnight-gray mly:ring-offset-white mly:transition-colors mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2 mly:active:bg-soft-gray",
-          !!Icon && "mly:pl-7",
+          "mly-select-padding mly:flex mly:h-7 mly:max-w-max mly:appearance-none mly:items-center mly:rounded-md mly:bg-white mly:text-sm mly:leading-none mly:text-midnight-gray mly:ring-offset-white mly:transition-colors mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2 mly:active:bg-soft-gray",
+          !!Icon && "mly:pl-[25px]",
           className
         ),
         value: value || "",
@@ -4810,7 +4810,14 @@ function ContentMenu(props) {
               children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Plus, { className: "mly:size-3.5 mly:shrink-0" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipContent, { sideOffset: 8, children: "Add new node" })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            TooltipContent,
+            {
+              sideOffset: 8,
+              className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: "Add new node" })
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mly:relative mly:flex mly:flex-col", children: [
@@ -4830,7 +4837,14 @@ function ContentMenu(props) {
                   children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.GripVertical, { className: "mly:size-3.5 mly:shrink-0" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipContent, { sideOffset: 8, children: "Node actions" })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                TooltipContent,
+                {
+                  sideOffset: 8,
+                  className: "mly:border-gray-300 mly:bg-transparent mly:p-0 mly:text-gray-700 mly:shadow-sm",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mly:block mly:rounded-md mly:bg-soft-gray mly:!px-2 mly:!py-1.5", children: "Node actions" })
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverTrigger, { className: "mly:absolute mly:left-0 mly:top-0 mly:z-0 mly:h-5 mly:w-5" })
           ] }),
@@ -4840,14 +4854,14 @@ function ContentMenu(props) {
               align: "start",
               side: "bottom",
               sideOffset: 8,
-              className: "mly:flex mly:w-max mly:flex-col mly:rounded-md mly:p-1",
+              className: "mly:flex mly:w-max mly:flex-col mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:p-1 mly:shadow-md",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   BaseButton,
                   {
                     variant: "ghost",
                     onClick: duplicateNode,
-                    className: "mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:px-2 mly:py-1 mly:text-sm mly:font-normal",
+                    className: "mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2 mly:!py-1.5 mly:text-sm mly:font-normal mly:hover:bg-soft-gray",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Copy, { className: "mly:size-[15px] mly:shrink-0" }),
                       "Duplicate"
@@ -4859,7 +4873,7 @@ function ContentMenu(props) {
                   BaseButton,
                   {
                     onClick: deleteCurrentNode,
-                    className: "mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:bg-red-100 mly:px-2 mly:py-1 mly:text-sm mly:font-normal mly:text-red-600 mly:hover:bg-red-200 mly:focus:bg-red-200",
+                    className: "mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:bg-red-100 mly:!px-2 mly:!py-1.5 mly:text-sm mly:font-normal mly:text-red-600 mly:hover:bg-red-200 mly:focus:bg-red-200",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Trash2, { className: "mly:size-[15px] mly:shrink-0" }),
                       "Delete"
@@ -4993,129 +5007,9 @@ var EditorMenuBar = (props) => {
   );
 };
 
-// src/editor/components/html-menu/html-menu.tsx
-var import_react14 = require("@tiptap/react");
-var import_lucide_react9 = require("lucide-react");
-var import_react15 = require("react");
-var import_tippy3 = require("tippy.js");
-
-// src/editor/components/html-menu/use-html-state.ts
-var import_react13 = require("@tiptap/react");
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
-var useHtmlState = (editor) => {
-  const states = (0, import_react13.useEditorState)({
-    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: import_fast_deep_equal2.default
-  });
-  return states;
-};
-
-// src/editor/components/html-menu/html-menu.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function HTMLBubbleMenu(props) {
-  const { appendTo, editor } = props;
-  if (!editor) {
-    return null;
-  }
-  const state = useHtmlState(editor);
-  const getReferenceClientRect = (0, import_react15.useCallback)(() => {
-    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: [import_tippy3.sticky],
-      sticky: "popper",
-      maxWidth: "auto"
-    },
-    pluginKey: "htmlCodeBlockBubbleMenu"
-  });
-  const { activeTab = "code" } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react14.BubbleMenu,
-    __spreadProps(__spreadValues({}, bubbleMenuProps), {
-      className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mly:flex mly:items-center mly:h-7 mly:rounded-md mly:bg-soft-gray mly:px-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "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__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.CodeXmlIcon, { className: "mly:size-3 mly:shrink-0 mly:stroke-[2.5]" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { sideOffset: 8, children: "HTML Code" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "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__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ViewIcon, { className: "mly:size-3 mly:shrink-0 mly:stroke-[2.5]" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { sideOffset: 8, children: "Preview" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          ShowPopover,
-          {
-            showIfKey: state.currentShowIfKey,
-            onShowIfKeyValueChange: (value) => {
-              editor.commands.updateHtmlCodeBlock({
-                showIfKey: value
-              });
-            },
-            editor
-          }
-        )
-      ] })
-    })
-  );
-}
-
 // src/editor/nodes/logo/logo.ts
 var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
-var import_react23 = require("@tiptap/react");
+var import_react20 = require("@tiptap/react");
 
 // src/editor/nodes/section/section.ts
 var import_core5 = require("@tiptap/core");
@@ -5416,14 +5310,14 @@ var SectionExtension = import_core5.Node.create({
 });
 
 // src/editor/nodes/logo/logo-view.tsx
-var import_react20 = require("@tiptap/react");
-var import_react21 = require("react");
-var import_react22 = require("react");
+var import_react17 = require("@tiptap/react");
+var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/editor/nodes/image/image-view.tsx
-var import_react18 = require("react");
-var import_react19 = require("@tiptap/react");
-var import_lucide_react10 = require("lucide-react");
+var import_react15 = require("react");
+var import_react16 = require("@tiptap/react");
+var import_lucide_react9 = require("lucide-react");
 
 // src/editor/plugins/image-upload/image-upload-plugin.ts
 var import_state3 = require("@tiptap/pm/state");
@@ -5517,7 +5411,7 @@ function ImageUploadPlugin(options) {
 
 // src/editor/extensions/image-upload/image-upload.ts
 var import_core6 = require("@tiptap/core");
-var import_react16 = require("react");
+var import_react13 = require("react");
 var ImageUploadExtension = import_core6.Extension.create({
   name: "imageUpload",
   addOptions() {
@@ -5552,7 +5446,7 @@ var ImageUploadExtension = import_core6.Extension.create({
   }
 });
 function useImageUploadOptions(editor) {
-  return (0, import_react16.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     const node = editor.extensionManager.extensions.find(
       (extension) => extension.name === "imageUpload"
     );
@@ -5561,13 +5455,13 @@ function useImageUploadOptions(editor) {
 }
 
 // src/editor/utils/use-event.ts
-var import_react17 = require("react");
+var import_react14 = require("react");
 var useEvent = (handler) => {
-  const handlerRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useLayoutEffect)(() => {
+  const handlerRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useLayoutEffect)(() => {
     handlerRef.current = handler;
   }, [handler]);
-  return (0, import_react17.useCallback)((...args) => {
+  return (0, import_react14.useCallback)((...args) => {
     if (handlerRef.current === null) {
       throw new Error("Handler is not assigned");
     }
@@ -5590,19 +5484,19 @@ function getNewWidth(height, aspectRatio) {
 }
 
 // src/editor/nodes/image/image-view.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MIN_WIDTH = 20;
 var IMAGE_MAX_WIDTH = 600;
 var IMAGE_MAX_HEIGHT = 400;
 function ImageView(props) {
   const { node, updateAttributes: updateAttributes2, selected, editor } = props;
-  const [status, setStatus] = (0, import_react18.useState)("idle");
-  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react18.useState)(false);
+  const [status, setStatus] = (0, import_react15.useState)("idle");
+  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react15.useState)(false);
   const { onImageUpload, allowedMimeTypes = [] } = useImageUploadOptions(editor);
-  const wrapperRef = (0, import_react18.useRef)(null);
-  const imgRef = (0, import_react18.useRef)(null);
-  const [resizingStyle, setResizingStyle] = (0, import_react18.useState)();
-  const [isDraggingOver, setIsDraggingOver] = (0, import_react18.useState)(false);
+  const wrapperRef = (0, import_react15.useRef)(null);
+  const imgRef = (0, import_react15.useRef)(null);
+  const [resizingStyle, setResizingStyle] = (0, import_react15.useState)();
+  const [isDraggingOver, setIsDraggingOver] = (0, import_react15.useState)(false);
   const handleMouseDown = useEvent(
     (event) => {
       const imageParent = document.querySelector(
@@ -5659,12 +5553,12 @@ function ImageView(props) {
       window.addEventListener("mouseup", removeListeners);
     }
   );
-  const dragCornerButton = (0, import_react18.useCallback)(
+  const dragCornerButton = (0, import_react15.useCallback)(
     (direction) => {
       if (isPlaceholderImage) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           role: "button",
@@ -5717,7 +5611,7 @@ function ImageView(props) {
     const file = e.target.files[0];
     yield handleImageUpload(file);
   });
-  const handleImageUpload = (0, import_react18.useCallback)(
+  const handleImageUpload = (0, import_react15.useCallback)(
     (file) => __async(this, null, function* () {
       if (!isDroppable) {
         return;
@@ -5735,7 +5629,7 @@ function ImageView(props) {
     }),
     [onImageUpload, updateAttributes2]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     var _a2, _b, _c, _d;
     if (!src || isSrcVariable) {
       return;
@@ -5773,7 +5667,7 @@ function ImageView(props) {
       img.onerror = null;
     };
   }, [src]);
-  const handleDragOver = (0, import_react18.useCallback)(
+  const handleDragOver = (0, import_react15.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5784,7 +5678,7 @@ function ImageView(props) {
     },
     [onImageUpload]
   );
-  const handleDragLeave = (0, import_react18.useCallback)(
+  const handleDragLeave = (0, import_react15.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -5795,7 +5689,7 @@ function ImageView(props) {
     },
     [onImageUpload]
   );
-  const handleDrop = (0, import_react18.useCallback)(
+  const handleDrop = (0, import_react15.useCallback)(
     (e) => __async(this, null, function* () {
       var _a2;
       if (!isDroppable) {
@@ -5816,21 +5710,25 @@ function ImageView(props) {
     }),
     [handleImageUpload]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react19.NodeViewWrapper,
+  const widthValue = width && width !== "auto" ? `${width}px` : void 0;
+  const heightValue = height && height !== "auto" ? `${height}px` : void 0;
+  const hasExplicitWidth = Boolean(widthValue || (resizingStyle == null ? void 0 : resizingStyle.width));
+  const hasExplicitHeight = Boolean(heightValue || (resizingStyle == null ? void 0 : resizingStyle.height));
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_react16.NodeViewWrapper,
     __spreadProps(__spreadValues({
       as: "div",
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
       className: cn("mly-image-drop-zone", isDraggingOver && "mly-drag-over"),
       style: __spreadValues(__spreadProps(__spreadValues({}, hasImageSrc && status === "loaded" ? __spreadValues({
-        width: width ? `${width}px` : void 0,
-        height: height ? `${height}px` : void 0
+        width: widthValue,
+        height: heightValue
       }, resizingStyle) : {}), {
         overflow: "hidden",
         position: "relative",
         // Weird! Basically tiptap/prose wraps this in a span and the line height causes an annoying buffer.
-        lineHeight: "0px",
+        lineHeight: "normal",
         display: "block",
         maxWidth: "100%"
       }), {
@@ -5845,7 +5743,7 @@ function ImageView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           ImageStatusLabel,
           {
             status: "idle",
@@ -5853,32 +5751,34 @@ function ImageView(props) {
             isDropZone: isDroppable
           }
         ),
-        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
-        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
+        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             type: "file",
             accept: "image/*",
             onChange: handleFileChange,
-            className: "mly:absolute mly:inset-0 mly:opacity-0",
+            className: "mly:absolute mly:inset-0 mly:z-10 mly:h-full mly:w-full mly:cursor-pointer mly:appearance-none mly:bg-transparent mly:opacity-0 mly:text-transparent",
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "img",
             __spreadProps(__spreadValues({}, attrs), {
               ref: imgRef,
               style: __spreadProps(__spreadValues({}, resizingStyle), {
                 cursor: "default",
-                objectFit: "fill",
+                objectFit: "contain",
                 marginBottom: 0,
                 borderRadius: borderRadius2,
-                width: (resizingStyle == null ? void 0 : resizingStyle.width) ? `${resizingStyle.width}px` : width ? `${width}px` : "auto",
-                height: (resizingStyle == null ? void 0 : resizingStyle.height) ? `${resizingStyle.height}px` : height ? `${height}px` : "auto"
+                width: (resizingStyle == null ? void 0 : resizingStyle.width) ? `${resizingStyle.width}px` : widthValue != null ? widthValue : "100%",
+                height: (resizingStyle == null ? void 0 : resizingStyle.height) ? `${resizingStyle.height}px` : heightValue != null ? heightValue : "auto",
+                maxWidth: hasExplicitWidth ? void 0 : "100%",
+                maxHeight: hasExplicitHeight ? void 0 : "none"
               }),
               draggable: editor.isEditable,
               className: cn(
@@ -5886,13 +5786,13 @@ function ImageView(props) {
               )
             })
           ),
-          selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
             [
               { left: 0, top: 0, height: "100%", width: "1px" },
               { right: 0, top: 0, height: "100%", width: "1px" },
               { top: 0, left: 0, width: "100%", height: "1px" },
               { bottom: 0, left: 0, width: "100%", height: "1px" }
-            ].map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            ].map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "div",
               {
                 className: "mly:bg-rose-500",
@@ -5914,7 +5814,9 @@ function ImageView(props) {
 }
 function ImageStatusLabel(props) {
   const _a = props, { status, minHeight, className, style, isDropZone } = _a, rest = __objRest(_a, ["status", "minHeight", "className", "style", "isDropZone"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const resolvedMinHeight = minHeight != null ? minHeight : isDropZone ? 36 : void 0;
+  const resolvedPaddingY = isDropZone ? 8 : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: cn(
@@ -5925,29 +5827,32 @@ function ImageStatusLabel(props) {
         },
         className
       ),
-      style: __spreadValues(__spreadValues({}, minHeight ? {
-        minHeight
+      style: __spreadValues(__spreadValues(__spreadValues({}, resolvedMinHeight ? {
+        minHeight: resolvedMinHeight
+      } : {}), resolvedPaddingY ? {
+        paddingTop: resolvedPaddingY,
+        paddingBottom: resolvedPaddingY
       } : {}), style),
       children: [
-        status === "idle" && !isDropZone && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "No image selected" })
+        status === "idle" && !isDropZone && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "No image selected" })
         ] }),
-        status === "idle" && isDropZone && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Click or Drop image here" })
+        status === "idle" && isDropZone && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Click or Drop image here" })
         ] }),
-        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Loading image..." })
+        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Loading image..." })
         ] }),
-        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Error loading image" })
+        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Error loading image" })
         ] }),
-        status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Variable Image URL" })
+        status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Variable Image URL" })
         ] })
       ]
     })
@@ -5955,12 +5860,12 @@ function ImageStatusLabel(props) {
 }
 
 // src/editor/nodes/logo/logo-view.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function LogoView(props) {
   const { node, editor, updateAttributes: updateAttributes2 } = props;
-  const [status, setStatus] = (0, import_react22.useState)("idle");
-  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react22.useState)(false);
-  const [isDraggingOver, setIsDraggingOver] = (0, import_react22.useState)(false);
+  const [status, setStatus] = (0, import_react19.useState)("idle");
+  const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react19.useState)(false);
+  const [isDraggingOver, setIsDraggingOver] = (0, import_react19.useState)(false);
   const { onImageUpload, allowedMimeTypes = [] } = useImageUploadOptions(editor);
   let {
     alignment = "center",
@@ -5977,7 +5882,7 @@ function LogoView(props) {
     const file = e.target.files[0];
     yield handleImageUpload(file);
   });
-  const handleImageUpload = (0, import_react21.useCallback)(
+  const handleImageUpload = (0, import_react18.useCallback)(
     (file) => __async(this, null, function* () {
       if (!isDroppable) {
         return;
@@ -5995,7 +5900,7 @@ function LogoView(props) {
     }),
     [onImageUpload, updateAttributes2]
   );
-  const handleDragOver = (0, import_react21.useCallback)(
+  const handleDragOver = (0, import_react18.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -6006,7 +5911,7 @@ function LogoView(props) {
     },
     [onImageUpload]
   );
-  const handleDragLeave = (0, import_react21.useCallback)(
+  const handleDragLeave = (0, import_react18.useCallback)(
     (e) => {
       if (!isDroppable) {
         return;
@@ -6017,7 +5922,7 @@ function LogoView(props) {
     },
     [onImageUpload]
   );
-  const handleDrop = (0, import_react21.useCallback)(
+  const handleDrop = (0, import_react18.useCallback)(
     (e) => __async(this, null, function* () {
       var _a;
       if (!isDroppable) {
@@ -6038,7 +5943,7 @@ function LogoView(props) {
     }),
     [handleImageUpload]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     var _a, _b, _c, _d;
     if (!logoSrc) {
       return;
@@ -6061,8 +5966,8 @@ function LogoView(props) {
     };
   }, [logoSrc]);
   const logoSize = logoSizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react20.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react17.NodeViewWrapper,
     __spreadProps(__spreadValues({
       as: "div",
       draggable: editor.isEditable,
@@ -6081,7 +5986,7 @@ function LogoView(props) {
       onDrop: handleDrop
     } : {}), {
       children: [
-        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        !hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           ImageStatusLabel,
           {
             status: "idle",
@@ -6089,11 +5994,11 @@ function LogoView(props) {
             isDropZone: isDroppable
           }
         ),
-        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
-        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        !hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
+        isDroppable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             type: "file",
@@ -6103,7 +6008,7 @@ function LogoView(props) {
             multiple: false
           }
         ),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "img",
           {
             src: logoSrc,
@@ -6223,7 +6128,7 @@ var LogoExtension = import_extension_image.default.extend({
     ];
   },
   addNodeView() {
-    return (0, import_react23.ReactNodeViewRenderer)(LogoView, {
+    return (0, import_react20.ReactNodeViewRenderer)(LogoView, {
       className: "mly:relative"
     });
   }
@@ -6254,13 +6159,13 @@ var borderRadius = [
 ];
 
 // src/editor/components/image-menu/image-bubble-menu.tsx
-var import_react32 = require("@tiptap/react");
-var import_lucide_react23 = require("lucide-react");
-var import_tippy4 = require("tippy.js");
+var import_react29 = require("@tiptap/react");
+var import_lucide_react22 = require("lucide-react");
+var import_tippy3 = require("tippy.js");
 
 // src/editor/components/alignment-switch.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function AlignmentSwitch(props) {
   const { alignment: rawAlignment, onAlignmentChange } = props;
   const alignment = allowedLogoAlignment.includes(
@@ -6268,21 +6173,21 @@ function AlignmentSwitch(props) {
   ) ? rawAlignment : "left";
   const alignments = {
     left: {
-      icon: import_lucide_react11.AlignLeft,
+      icon: import_lucide_react10.AlignLeft,
       tooltip: "Align Left",
       onClick: () => {
         onAlignmentChange("left");
       }
     },
     center: {
-      icon: import_lucide_react11.AlignCenter,
+      icon: import_lucide_react10.AlignCenter,
       tooltip: "Align Center",
       onClick: () => {
         onAlignmentChange("center");
       }
     },
     right: {
-      icon: import_lucide_react11.AlignRight,
+      icon: import_lucide_react10.AlignRight,
       tooltip: "Align Right",
       onClick: () => {
         onAlignmentChange("right");
@@ -6290,20 +6195,20 @@ function AlignmentSwitch(props) {
     }
   };
   const activeAlignment = alignments[alignment];
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         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__ */ (0, import_jsx_runtime19.jsx)(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipContent, { sideOffset: 8, children: "Alignment" })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipContent, { sideOffset: 8, children: "Alignment" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       PopoverContent,
       {
         className: "mly:flex mly:w-max mly:gap-0.5 mly:rounded-lg mly:p-0.5!",
@@ -6317,7 +6222,7 @@ function AlignmentSwitch(props) {
           e.preventDefault();
         },
         children: Object.entries(alignments).map(([key, value]) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             BubbleMenuButton,
             {
               icon: value.icon,
@@ -6334,23 +6239,23 @@ function AlignmentSwitch(props) {
 }
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_lucide_react22 = require("lucide-react");
-var import_react29 = require("react");
+var import_lucide_react21 = require("lucide-react");
+var import_react26 = require("react");
 
 // src/editor/provider.tsx
-var import_react24 = require("react");
+var import_react21 = require("react");
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-var import_lucide_react19 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 
 // src/blocks/button.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var button = {
   title: "Button",
   description: "Add a call to action button to email.",
   searchTerms: ["link", "button", "cta"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.MousePointer, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.MousePointer, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setButton().run();
   }
@@ -6359,7 +6264,7 @@ var linkCard = {
   title: "Link Card",
   description: "Add a link card to email.",
   searchTerms: ["link", "button", "image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLinkCard().run();
   },
@@ -6371,13 +6276,13 @@ var linkCard = {
 };
 
 // src/blocks/code.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var htmlCodeBlock = {
   title: "Custom HTML",
   description: "Insert a custom HTML block",
   searchTerms: ["html", "code", "custom"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
   }
@@ -6385,13 +6290,13 @@ var htmlCodeBlock = {
 
 // src/blocks/image.tsx
 var import_state4 = require("@tiptap/pm/state");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var image = {
   title: "Image",
   description: "Full width image",
   searchTerms: ["image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
   }
@@ -6400,7 +6305,7 @@ var logo = {
   title: "Logo",
   description: "Add your brand logo",
   searchTerms: ["image", "logo"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
   }
@@ -6409,7 +6314,7 @@ var inlineImage = {
   title: "Inline Image",
   description: "Inline image",
   searchTerms: ["image", "inline"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setInlineImage({
       src: "https://maily.to/brand/logo.png"
@@ -6432,13 +6337,13 @@ var inlineImage = {
 };
 
 // src/blocks/layout.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var columns = {
   title: "Columns",
   description: "Add columns to email.",
   searchTerms: ["layout", "columns"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
   }
@@ -6447,7 +6352,7 @@ var section = {
   title: "Section",
   description: "Add a section to email.",
   searchTerms: ["layout", "section"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSection().run();
   }
@@ -6456,7 +6361,7 @@ var repeat = {
   title: "Repeat",
   description: "Loop over an array of items.",
   searchTerms: ["repeat", "for", "loop"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.Repeat2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Repeat2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setRepeat().run();
   }
@@ -6465,7 +6370,7 @@ var spacer = {
   title: "Spacer",
   description: "Add space between blocks.",
   searchTerms: ["space", "gap", "divider"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.MoveVertical, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.MoveVertical, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
   }
@@ -6474,20 +6379,20 @@ var divider = {
   title: "Divider",
   description: "Add a horizontal divider.",
   searchTerms: ["divider", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.Minus, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Minus, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 };
 
 // src/blocks/list.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var bulletList = {
   title: "Bullet List",
   description: "Create a simple bullet list.",
   searchTerms: ["unordered", "point"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.List, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.List, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
@@ -6496,20 +6401,20 @@ var orderedList = {
   title: "Numbered List",
   description: "Create a list with numbering.",
   searchTerms: ["ordered"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.ListOrdered, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.ListOrdered, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
 };
 
 // src/blocks/typography.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var text = {
   title: "Text",
   description: "Just start typing with plain text.",
   searchTerms: ["p", "paragraph"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.Text, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Text, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
   }
@@ -6518,7 +6423,7 @@ var heading1 = {
   title: "Heading 1",
   description: "Big heading.",
   searchTerms: ["h1", "title", "big", "large"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.Heading1, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading1, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   }
@@ -6527,7 +6432,7 @@ var heading2 = {
   title: "Heading 2",
   description: "Medium heading.",
   searchTerms: ["h2", "subtitle", "medium"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.Heading2, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading2, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
   }
@@ -6536,7 +6441,7 @@ var heading3 = {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.Heading3, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading3, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
   }
@@ -6545,7 +6450,7 @@ var hardBreak = {
   title: "Hard Break",
   description: "Add a break between lines.",
   searchTerms: ["break", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.DivideIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.DivideIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setHardBreak().run();
   }
@@ -6554,7 +6459,7 @@ var blockquote = {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.TextQuote, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.TextQuote, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
@@ -6563,7 +6468,7 @@ var footer = {
   title: "Footer",
   description: "Add a footer text to email.",
   searchTerms: ["footer", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).setFooter().run();
   }
@@ -6572,16 +6477,16 @@ var clearLine = {
   title: "Clear Line",
   description: "Clear the current line.",
   searchTerms: ["clear", "line"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react17.EraserIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.EraserIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().selectParentNode().deleteSelection().run();
   }
 };
 
 // src/editor/components/icons/logo-with-cover-image.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function LogoWithCoverImageIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6591,7 +6496,7 @@ function LogoWithCoverImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6600,7 +6505,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6609,7 +6514,7 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6618,8 +6523,8 @@ function LogoWithCoverImageIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "rect",
           {
             x: "3",
@@ -6632,7 +6537,7 @@ function LogoWithCoverImageIcon(props) {
             mask: "url(#path-4-inside-1_1046_19527)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "rect",
           {
             x: "6.25",
@@ -6644,16 +6549,16 @@ function LogoWithCoverImageIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
       ]
     })
   );
 }
 
 // src/editor/components/icons/logo-with-text-horizon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function LogoWithTextHorizonIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6663,7 +6568,7 @@ function LogoWithTextHorizonIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6672,7 +6577,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "rect",
           {
             x: "6.25",
@@ -6684,8 +6589,8 @@ function LogoWithTextHorizonIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6694,7 +6599,7 @@ function LogoWithTextHorizonIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6709,9 +6614,9 @@ function LogoWithTextHorizonIcon(props) {
 }
 
 // src/editor/components/icons/logo-with-text-vertical.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function LogoWithTextVerticalIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: "14",
@@ -6721,7 +6626,7 @@ function LogoWithTextVerticalIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6730,7 +6635,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "rect",
           {
             x: "4.25",
@@ -6742,8 +6647,8 @@ function LogoWithTextVerticalIcon(props) {
             strokeWidth: "0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6752,7 +6657,7 @@ function LogoWithTextVerticalIcon(props) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -6767,12 +6672,12 @@ function LogoWithTextVerticalIcon(props) {
 }
 
 // src/blocks/headers.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var headerLogoWithTextHorizontal = {
   title: "Logo with Text (Horizontal)",
   description: "Logo and a text horizontally",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent({
       type: "columns",
@@ -6836,7 +6741,7 @@ var headerLogoWithTextVertical = {
   title: "Logo with Text (Vertical)",
   description: "Logo and a text vertically",
   searchTerms: ["logo", "text"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().deleteRange(range).insertContent([
       {
@@ -6867,7 +6772,7 @@ var headerLogoWithCoverImage = {
   title: "Logo with Cover Image",
   description: "Logo and a cover image",
   searchTerms: ["logo", "cover", "image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
       year: "numeric",
@@ -6955,13 +6860,13 @@ var headerLogoWithCoverImage = {
 };
 
 // src/blocks/footers.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var footerCopyrightText = {
   title: "Footer Copyright",
   description: "Copyright text for the footer.",
   searchTerms: ["footer", "copyright"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     editor.chain().focus().deleteRange(range).insertContent({
@@ -6981,7 +6886,7 @@ var footerCommunityFeedbackCta = {
   title: "Footer Community Feedback CTA",
   description: "Community feedback CTA for the footer.",
   searchTerms: ["footer", "community", "feedback", "cta"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       {
@@ -7024,7 +6929,7 @@ var footerCompanySignature = {
   title: "Footer Company Signature",
   description: "Company signature for the footer.",
   searchTerms: ["footer", "company", "signature"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
   command: ({ editor, range }) => {
     editor.chain().focus().deleteRange(range).insertContent([
       { type: "horizontalRule" },
@@ -7178,7 +7083,7 @@ var footerCompanySignature = {
 };
 
 // src/editor/extensions/slash-command/default-slash-commands.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var DEFAULT_SLASH_COMMANDS = [
   {
     title: "Blocks",
@@ -7213,7 +7118,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Headers",
         description: "Add pre-designed headers block",
         searchTerms: ["header", "headers"],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react19.Heading1, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.Heading1, { className: "mly:h-4 mly:w-4" }),
         preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
         commands: [
           headerLogoWithTextVertical,
@@ -7226,7 +7131,7 @@ var DEFAULT_SLASH_COMMANDS = [
         title: "Footers",
         description: "Add pre-designed footers block",
         searchTerms: ["footers"],
-        icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react19.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
         commands: [
           footerCopyrightText,
           footerCommunityFeedbackCta,
@@ -7239,18 +7144,18 @@ var DEFAULT_SLASH_COMMANDS = [
 ];
 
 // src/editor/provider.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
-var MailyContext = (0, import_react24.createContext)({
+var MailyContext = (0, import_react21.createContext)({
   placeholderUrl: DEFAULT_PLACEHOLDER_URL,
   blocks: DEFAULT_SLASH_COMMANDS
 });
 function MailyProvider(props) {
   const _a = props, { children } = _a, defaultValues = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MailyContext.Provider, { value: defaultValues, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MailyContext.Provider, { value: defaultValues, children });
 }
 function useMailyContext() {
-  const values = (0, import_react24.useContext)(MailyContext);
+  const values = (0, import_react21.useContext)(MailyContext);
   if (!values) {
     throw new Error("Missing MailyContext.Provider in the component tree");
   }
@@ -7258,23 +7163,23 @@ function useMailyContext() {
 }
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_react30 = require("react");
+var import_react27 = require("react");
 
 // src/editor/nodes/variable/variable.ts
 var import_core7 = require("@tiptap/core");
 var import_state5 = require("@tiptap/pm/state");
-var import_react28 = require("@tiptap/react");
+var import_react25 = require("@tiptap/react");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
 
 // src/editor/nodes/variable/variable-suggestions-popover.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_react25 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) => {
+var import_lucide_react19 = require("lucide-react");
+var import_react22 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var VariableSuggestionsPopover = (0, import_react22.forwardRef)((props, ref) => {
   const { items, onSelectItem } = props;
-  const [selectedIndex, setSelectedIndex] = (0, import_react25.useState)(0);
-  const scrollContainerRef = (0, import_react25.useRef)(null);
-  const itemRefs = (0, import_react25.useRef)([]);
+  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
+  const scrollContainerRef = (0, import_react22.useRef)(null);
+  const itemRefs = (0, import_react22.useRef)([]);
   const scrollSelectedIntoView = (index) => {
     const container = scrollContainerRef.current;
     const selectedItem = itemRefs.current[index];
@@ -7290,17 +7195,17 @@ var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) =>
       container.scrollTop += itemRect.top - containerRect.top - padding;
     }
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setSelectedIndex(0);
     if (scrollContainerRef.current) {
       scrollContainerRef.current.scrollTop = 0;
     }
     itemRefs.current = items.map(() => null);
   }, [items]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     scrollSelectedIntoView(selectedIndex);
   }, [selectedIndex]);
-  (0, import_react25.useImperativeHandle)(ref, () => ({
+  (0, import_react22.useImperativeHandle)(ref, () => ({
     moveUp: () => {
       setSelectedIndex((selectedIndex + items.length - 1) % items.length);
     },
@@ -7315,17 +7220,17 @@ var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) =>
       onSelectItem(item);
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:z-50 mly:w-64 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-b mly:border-gray-200 mly:bg-soft-gray/40 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:z-50 mly:w-64 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-b mly:border-gray-200 mly:bg-soft-gray/40 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ref: scrollContainerRef,
         className: "mly:max-h-52 mly:overflow-y-auto mly:scrollbar-thin mly:scrollbar-track-transparent mly:scrollbar-thumb-gray-200",
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly:flex mly:w-fit mly:min-w-full mly:flex-col mly:gap-0.5 mly:p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mly:flex mly:w-fit mly:min-w-full mly:flex-col mly:gap-0.5 mly:p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "button",
           {
             ref: (el) => itemRefs.current[index] = el,
@@ -7335,27 +7240,27 @@ var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) =>
               index === selectedIndex ? "mly:bg-soft-gray" : "mly:bg-white"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
               (item == null ? void 0 : item.label) || item.name
             ]
           },
           index
-        )) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly:flex mly:h-7 mly:w-full mly:items-center mly:gap-2 mly:rounded-md mly:px-2 mly:py-1 mly:text-left mly:font-mono mly:text-[13px] mly:text-gray-900 mly:hover:bg-soft-gray", children: "No result" }) })
+        )) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mly:flex mly:h-7 mly:w-full mly:items-center mly:gap-2 mly:rounded-md mly:px-2 mly:py-1 mly:text-left mly:font-mono mly:text-[13px] mly:text-gray-900 mly:hover:bg-soft-gray", children: "No result" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-t mly:border-gray-200 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-t mly:border-gray-200 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
     ] })
   ] });
 });
 function VariableIcon(props) {
   const { className, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: cn(
@@ -7368,10 +7273,10 @@ function VariableIcon(props) {
 }
 
 // src/editor/nodes/variable/variable-view.tsx
-var import_react26 = require("@tiptap/react");
-var import_lucide_react21 = require("lucide-react");
-var import_react27 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react23 = require("@tiptap/react");
+var import_lucide_react20 = require("lucide-react");
+var import_react24 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function VariableView(props) {
   const { node, updateAttributes: updateAttributes2, editor } = props;
   const {
@@ -7381,24 +7286,24 @@ function VariableView(props) {
     hideDefaultValue = false,
     label
   } = node.attrs;
-  const renderVariable = (0, import_react27.useMemo)(() => {
+  const renderVariable = (0, import_react24.useMemo)(() => {
     var _a, _b;
     const variableRender = (_b = (_a = getNodeOptions(editor, "variable")) == null ? void 0 : _a.renderVariable) != null ? _b : DEFAULT_RENDER_VARIABLE_FUNCTION;
     return variableRender;
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_react26.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_react23.NodeViewWrapper,
     {
       className: "react-component mly:inline-block mly:leading-none",
       draggable: "false",
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         Popover,
         {
           onOpenChange: (open) => {
             editor.storage.variable.popover = open;
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverTrigger, { children: renderVariable({
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { children: renderVariable({
               variable: {
                 name: id,
                 required,
@@ -7409,7 +7314,7 @@ function VariableView(props) {
               editor,
               from: "content-variable"
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               PopoverContent,
               {
                 align: "start",
@@ -7418,10 +7323,10 @@ function VariableView(props) {
                 sideOffset: 8,
                 onOpenAutoFocus: (e) => e.preventDefault(),
                 onCloseAutoFocus: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "mly:relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "mly:relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                         value: id != null ? id : "",
@@ -7435,11 +7340,11 @@ function VariableView(props) {
                       })
                     )
                   ] }),
-                  !hideDefaultValue && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Divider, { className: "mly:mx-1.5" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "mly:relative", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  !hideDefaultValue && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, { className: "mly:mx-1.5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "mly:relative", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "input",
                         __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
                           value: fallback != null ? fallback : "",
@@ -7452,7 +7357,7 @@ function VariableView(props) {
                           className: "mly:h-7 mly:w-32 mly:rounded-md mly:bg-soft-gray mly:px-2 mly:pr-6 mly:text-sm mly:text-midnight-gray mly:focus:bg-soft-gray mly:focus:outline-none"
                         })
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
                     ] })
                   ] })
                 ] }) })
@@ -7469,13 +7374,13 @@ var DefaultRenderVariable = (props) => {
   const { name, required, valid, label } = variable;
   const variableLabel = label || name;
   if (from === "button-variable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:inline-grid mly:max-w-xs mly:grid-cols-[12px_1fr] mly:items-center mly:gap-1.5 mly:rounded-md mly:border mly:border-(--button-var-border-color) mly:px-2 mly:py-px mly:font-mono mly:text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:inline-grid mly:max-w-xs mly:grid-cols-[12px_1fr] mly:items-center mly:gap-1.5 mly:rounded-md mly:border mly:border-(--button-var-border-color) mly:px-2 mly:py-px mly:font-mono mly:text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
     ] });
   }
   if (from === "bubble-variable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         className: cn(
@@ -7483,21 +7388,21 @@ var DefaultRenderVariable = (props) => {
           !valid && "mly:border-rose-400 mly:bg-rose-50 mly:text-rose-600 mly:hover:bg-rose-100"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "span",
     {
       tabIndex: -1,
       className: "mly:inline-flex mly:items-center mly:gap-(--variable-icon-gap) mly:rounded-full mly:border mly:border-gray-200 mly:px-1.5 mly:py-0.5 mly:leading-none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.Braces, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
         variableLabel,
-        required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
+        required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
       ]
     }
   );
@@ -7670,7 +7575,7 @@ var VariableExtension = import_core7.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react28.ReactNodeViewRenderer)(VariableView, {
+    return (0, import_react25.ReactNodeViewRenderer)(VariableView, {
       className: "mly:relative mly:inline-block",
       as: "div"
     });
@@ -7678,26 +7583,26 @@ var VariableExtension = import_core7.Node.create({
 });
 
 // src/editor/components/ui/link-input-popover.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function LinkInputPopover(props) {
   var _a, _b;
   const {
     defaultValue = "",
     onValueChange,
     tooltip,
-    icon: Icon = import_lucide_react22.Link,
+    icon: Icon = import_lucide_react21.Link,
     editor,
     isVariable
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
-  const [isEditing, setIsEditing] = (0, import_react29.useState)(!isVariable);
-  const linkInputRef = (0, import_react29.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
+  const [isEditing, setIsEditing] = (0, import_react26.useState)(!isVariable);
+  const linkInputRef = (0, import_react26.useRef)(null);
   const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
   const options = useVariableOptions(editor);
   const renderVariable = options == null ? void 0 : options.renderVariable;
   const variables = options == null ? void 0 : options.variables;
   const variableTriggerCharacter = (_b = (_a = options == null ? void 0 : options.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
-  const autoCompleteOptions = (0, import_react30.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react27.useMemo)(() => {
     const withoutTrigger = defaultValue.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -7708,7 +7613,7 @@ function LinkInputPopover(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, variableTriggerCharacter, defaultValue, editor]);
-  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     BaseButton,
     {
       variant: "ghost",
@@ -7716,10 +7621,10 @@ function LinkInputPopover(props) {
       type: "button",
       className: "mly:h-7! mly:w-7!",
       "data-state": !!defaultValue,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     Popover,
     {
       open: isOpen,
@@ -7733,11 +7638,11 @@ function LinkInputPopover(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
         ] }) : popoverButton,
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           PopoverContent,
           {
             align: "end",
@@ -7745,7 +7650,7 @@ function LinkInputPopover(props) {
             className: "mly:w-max mly:rounded-none mly:border-none mly:bg-transparent mly:p-0! mly:shadow-none",
             sideOffset: 8,
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "form",
               {
                 onSubmit: (e) => {
@@ -7757,8 +7662,8 @@ function LinkInputPopover(props) {
                   onValueChange == null ? void 0 : onValueChange(input.value);
                   setIsOpen(false);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
-                  !isEditing && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly:flex mly:h-8 mly:items-center mly:rounded-lg mly:border mly:border-gray-300 mly:bg-white mly:px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
+                  !isEditing && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:flex mly:h-8 mly:items-center mly:rounded-lg mly:border mly:border-gray-300 mly:bg-white mly:px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "button",
                     {
                       onClick: () => {
@@ -7779,9 +7684,9 @@ function LinkInputPopover(props) {
                       })
                     }
                   ) }),
-                  isEditing && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly:relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react22.LinkIcon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  isEditing && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.LinkIcon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       InputAutocomplete,
                       {
                         editor,
@@ -7817,12 +7722,12 @@ function LinkInputPopover(props) {
 }
 
 // src/editor/components/image-menu/image-size.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ImageSize(props) {
   const { value, onValueChange, dimension } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "mly:relative mly:flex mly:items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:left-2 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: dimension === "width" ? "W" : "H" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "mly:relative mly:flex mly:items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:left-2 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: dimension === "width" ? "W" : "H" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
       __spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
         className: "hide-number-controls mly:h-auto mly:max-w-20 mly:appearance-none mly:border-0 mly:border-none mly:p-1 mly:px-[26px] mly:text-sm mly:uppercase mly:tabular-nums mly:outline-hidden mly:focus-visible:outline-hidden",
@@ -7831,15 +7736,15 @@ function ImageSize(props) {
         onChange: (e) => onValueChange(e.target.value)
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: "PX" })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: "PX" })
   ] });
 }
 
 // src/editor/components/image-menu/use-image-state.tsx
-var import_react31 = require("@tiptap/react");
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"), 1);
+var import_react28 = require("@tiptap/react");
+var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
 var useImageState = (editor) => {
-  const states = (0, import_react31.useEditorState)({
+  const states = (0, import_react28.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
@@ -7860,13 +7765,13 @@ var useImageState = (editor) => {
         currentShowIfKey: ((_o = editor2.getAttributes("image")) == null ? void 0 : _o.showIfKey) || ((_p = editor2.getAttributes("logo")) == null ? void 0 : _p.showIfKey) || ""
       };
     },
-    equalityFn: import_fast_deep_equal3.default
+    equalityFn: import_fast_deep_equal2.default
   });
   return states;
 };
 
 // src/editor/components/image-menu/image-bubble-menu.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function ImageBubbleMenu(props) {
   var _a, _b, _c, _d;
   const { editor, appendTo } = props;
@@ -7885,19 +7790,19 @@ function ImageBubbleMenu(props) {
       popperOptions: {
         modifiers: [{ name: "flip", enabled: false }]
       },
-      plugins: [import_tippy4.sticky],
+      plugins: [import_tippy3.sticky],
       sticky: "popper",
       maxWidth: "100%"
     }
   });
   const { lockAspectRatio } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_react32.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react29.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TooltipProvider, { children: [
-        state.isLogoActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(TooltipProvider, { children: [
+        state.isLogoActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Select,
             {
               label: "Size",
@@ -7912,10 +7817,10 @@ function ImageBubbleMenu(props) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Divider, {})
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             AlignmentSwitch,
             {
               alignment: state.alignment,
@@ -7929,7 +7834,7 @@ function ImageBubbleMenu(props) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             LinkInputPopover,
             {
               defaultValue: (_a = state == null ? void 0 : state.imageSrc) != null ? _a : "",
@@ -7947,12 +7852,12 @@ function ImageBubbleMenu(props) {
                 }
               },
               tooltip: "Source URL",
-              icon: import_lucide_react23.ImageDown,
+              icon: import_lucide_react22.ImageDown,
               editor,
               isVariable: state.isSrcVariable
             }
           ),
-          state.isImageActive && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          state.isImageActive && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             LinkInputPopover,
             {
               defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
@@ -7968,9 +7873,9 @@ function ImageBubbleMenu(props) {
             }
           )
         ] }),
-        state.isImageActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        state.isImageActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Select,
             {
               label: "Border Radius",
@@ -7988,8 +7893,8 @@ function ImageBubbleMenu(props) {
               className: "mly:capitalize"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               ImageSize,
               {
                 dimension: "width",
@@ -8009,7 +7914,7 @@ function ImageBubbleMenu(props) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               ImageSize,
               {
                 dimension: "height",
@@ -8029,7 +7934,7 @@ function ImageBubbleMenu(props) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               BubbleMenuButton,
               {
                 isActive: () => lockAspectRatio,
@@ -8042,7 +7947,7 @@ function ImageBubbleMenu(props) {
                     aspectRatio
                   }).run();
                 },
-                icon: lockAspectRatio ? import_lucide_react23.LockIcon : import_lucide_react23.LockOpenIcon,
+                icon: lockAspectRatio ? import_lucide_react22.LockIcon : import_lucide_react22.LockOpenIcon,
                 tooltip: "Lock Aspect Ratio"
               }
             )
@@ -8054,8 +7959,8 @@ function ImageBubbleMenu(props) {
 }
 
 // src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
-var import_react34 = require("@tiptap/react");
-var import_tippy5 = require("tippy.js");
+var import_react31 = require("@tiptap/react");
+var import_tippy4 = require("tippy.js");
 
 // src/editor/nodes/inline-image/inline-image.tsx
 var import_core8 = require("@tiptap/core");
@@ -8172,10 +8077,10 @@ var InlineImageExtension = import_core8.Node.create({
 });
 
 // src/editor/components/inline-image-menu/use-inline-image-state.tsx
-var import_react33 = require("@tiptap/react");
-var import_fast_deep_equal4 = __toESM(require("fast-deep-equal"), 1);
+var import_react30 = require("@tiptap/react");
+var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"), 1);
 var useInlineImageState = (editor) => {
-  const states = (0, import_react33.useEditorState)({
+  const states = (0, import_react30.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -8188,14 +8093,14 @@ var useInlineImageState = (editor) => {
         isExternalLinkVariable: (_h = (_g = editor2.getAttributes("inlineImage")) == null ? void 0 : _g.isExternalLinkVariable) != null ? _h : false
       };
     },
-    equalityFn: import_fast_deep_equal4.default
+    equalityFn: import_fast_deep_equal3.default
   });
   return states;
 };
 
 // src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
-var import_lucide_react24 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function InlineImageBubbleMenu(props) {
   var _a, _b;
   const { editor, appendTo } = props;
@@ -8214,17 +8119,17 @@ function InlineImageBubbleMenu(props) {
       popperOptions: {
         modifiers: [{ name: "flip", enabled: false }]
       },
-      plugins: [import_tippy5.sticky],
+      plugins: [import_tippy4.sticky],
       sticky: "popper",
       maxWidth: "100%"
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react34.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react31.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           LinkInputPopover,
           {
             defaultValue: (_a = state == null ? void 0 : state.src) != null ? _a : "",
@@ -8235,12 +8140,12 @@ function InlineImageBubbleMenu(props) {
               }).run();
             },
             tooltip: "Source URL",
-            icon: import_lucide_react24.ImageDownIcon,
+            icon: import_lucide_react23.ImageDownIcon,
             editor,
             isVariable: state.isSrcVariable
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           LinkInputPopover,
           {
             defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
@@ -8255,7 +8160,7 @@ function InlineImageBubbleMenu(props) {
             isVariable: state.isExternalLinkVariable
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           ImageSize,
           {
             dimension: "height",
@@ -8274,16 +8179,16 @@ function InlineImageBubbleMenu(props) {
 }
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-var import_react36 = require("@tiptap/react");
-var import_lucide_react25 = require("lucide-react");
-var import_react37 = require("react");
-var import_tippy6 = require("tippy.js");
+var import_react33 = require("@tiptap/react");
+var import_lucide_react24 = require("lucide-react");
+var import_react34 = require("react");
+var import_tippy5 = require("tippy.js");
 
 // src/editor/components/repeat-menu/use-repeat-state.ts
-var import_react35 = require("@tiptap/react");
-var import_fast_deep_equal5 = __toESM(require("fast-deep-equal"), 1);
+var import_react32 = require("@tiptap/react");
+var import_fast_deep_equal4 = __toESM(require("fast-deep-equal"), 1);
 var useRepeatState = (editor) => {
-  const states = (0, import_react35.useEditorState)({
+  const states = (0, import_react32.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b;
@@ -8293,20 +8198,20 @@ var useRepeatState = (editor) => {
         isSectionActive: ctx.editor.isActive("section")
       };
     },
-    equalityFn: import_fast_deep_equal5.default
+    equalityFn: import_fast_deep_equal4.default
   });
   return states;
 };
 
 // src/editor/components/repeat-menu/repeat-bubble-menu.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function RepeatBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
     return null;
   }
   const state = useRepeatState(editor);
-  const getReferenceClientRect = (0, import_react37.useCallback)(() => {
+  const getReferenceClientRect = (0, import_react34.useCallback)(() => {
     const renderContainer = getRenderContainer(editor, "repeat");
     const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
     return rect;
@@ -8315,7 +8220,7 @@ function RepeatBubbleMenu(props) {
     shouldShow: ({ editor: editor2 }) => {
       var _a;
       const activeForNode = getClosestNodeByName(editor2, "repeat");
-      const sectionNodeChildren = activeForNode ? (_a = (0, import_react36.findChildren)(activeForNode == null ? void 0 : activeForNode.node, (node) => {
+      const sectionNodeChildren = activeForNode ? (_a = (0, import_react33.findChildren)(activeForNode == null ? void 0 : activeForNode.node, (node) => {
         return node.type.name === "section";
       })) == null ? void 0 : _a[0] : null;
       const hasActiveSectionNodeChildren = sectionNodeChildren && editor2.isActive("section");
@@ -8331,7 +8236,7 @@ function RepeatBubbleMenu(props) {
       },
       getReferenceClientRect,
       appendTo: () => appendTo == null ? void 0 : appendTo.current,
-      plugins: [import_tippy6.sticky],
+      plugins: [import_tippy5.sticky],
       sticky: "popper",
       maxWidth: "auto"
     },
@@ -8340,10 +8245,10 @@ function RepeatBubbleMenu(props) {
   const opts = useVariableOptions(editor);
   const variables = opts == null ? void 0 : opts.variables;
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const inputRef = (0, import_react37.useRef)(null);
-  const [isUpdatingKey, setIsUpdatingKey] = (0, import_react37.useState)(false);
+  const inputRef = (0, import_react34.useRef)(null);
+  const [isUpdatingKey, setIsUpdatingKey] = (0, import_react34.useState)(false);
   const eachKey = (state == null ? void 0 : state.each) || "";
-  const autoCompleteOptions = (0, import_react37.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react34.useMemo)(() => {
     return processVariables(variables, {
       query: eachKey || "",
       editor,
@@ -8351,21 +8256,21 @@ function RepeatBubbleMenu(props) {
     }).map((variable) => variable.name);
   }, [variables, eachKey, editor]);
   const isValidEachKey = eachKey;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_react36.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react33.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
           "Repeat",
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              import_lucide_react25.InfoIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              import_lucide_react24.InfoIcon,
               {
                 className: cn("mly:size-3 mly:stroke-[2.5] mly:text-gray-500")
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               TooltipContent,
               {
                 sideOffset: 14,
@@ -8376,7 +8281,7 @@ function RepeatBubbleMenu(props) {
             )
           ] })
         ] }),
-        !isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        !isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "button",
           {
             onClick: () => {
@@ -8397,7 +8302,7 @@ function RepeatBubbleMenu(props) {
             })
           }
         ),
-        isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "form",
           {
             onSubmit: (e) => {
@@ -8409,7 +8314,7 @@ function RepeatBubbleMenu(props) {
                 setIsUpdatingKey(false);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               InputAutocomplete,
               {
                 editor,
@@ -8435,8 +8340,8 @@ function RepeatBubbleMenu(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           ShowPopover,
           {
             showIfKey: state.currentShowIfKey,
@@ -8454,16 +8359,16 @@ function RepeatBubbleMenu(props) {
 }
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-var import_react39 = require("@tiptap/react");
-var import_lucide_react26 = require("lucide-react");
-var import_react40 = require("react");
-var import_tippy7 = require("tippy.js");
+var import_react36 = require("@tiptap/react");
+var import_lucide_react25 = require("lucide-react");
+var import_react37 = require("react");
+var import_tippy6 = require("tippy.js");
 
 // src/editor/components/icons/border-color.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function BorderColor(props) {
   const _a = props, { topBarClassName } = _a, rest = __objRest(_a, ["topBarClassName"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       width: 11,
@@ -8473,8 +8378,8 @@ function BorderColor(props) {
       xmlns: "http://www.w3.org/2000/svg"
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "path",
           {
             d: "M0.666504 9V6.33333C0.666504 3.38781 3.05432 1 5.99984 1H10.6665",
@@ -8488,9 +8393,9 @@ function BorderColor(props) {
 }
 
 // src/editor/components/icons/margin-icon.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function MarginIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       width: 12,
@@ -8499,7 +8404,7 @@ function MarginIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "path",
         {
           d: "M10.5 10.499V1.49902M1.5 10.499V1.49902M4.5 5.99902C4.5 5.53308 4.5 5.30011 4.57612 5.11634C4.67761 4.87131 4.87229 4.67664 5.11732 4.57514C5.30109 4.49902 5.53406 4.49902 6 4.49902C6.46594 4.49902 6.69891 4.49902 6.88268 4.57514C7.12771 4.67664 7.32239 4.87131 7.42388 5.11634C7.5 5.30011 7.5 5.53308 7.5 5.99902C7.5 6.46496 7.5 6.69794 7.42388 6.88171C7.32239 7.12673 7.12771 7.32141 6.88268 7.4229C6.69891 7.49902 6.46594 7.49902 6 7.49902C5.53406 7.49902 5.30109 7.49902 5.11732 7.4229C4.87229 7.32141 4.67761 7.12673 4.57612 6.88171C4.5 6.69794 4.5 6.46496 4.5 5.99902Z",
@@ -8513,9 +8418,9 @@ function MarginIcon(props) {
 }
 
 // src/editor/components/icons/padding-icon.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function PaddingIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       width: 10,
@@ -8524,7 +8429,7 @@ function PaddingIcon(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "path",
         {
           d: "M9.50244 0.501526L9.10244 0.501526C8.54239 0.501526 8.26236 0.501526 8.04845 0.610519C7.86029 0.706392 7.70731 0.859373 7.61144 1.04754C7.50244 1.26145 7.50244 1.54147 7.50244 2.10153V7.90153C7.50244 8.46158 7.50244 8.74161 7.61144 8.95552C7.70731 9.14368 7.86029 9.29666 8.04845 9.39253C8.26236 9.50153 8.54239 9.50153 9.10244 9.50153H9.50244M0.502441 0.501527L0.902441 0.501527C1.46249 0.501527 1.74252 0.501527 1.95643 0.61052C2.14459 0.706393 2.29757 0.859374 2.39345 1.04754C2.50244 1.26145 2.50244 1.54147 2.50244 2.10153L2.50244 7.90153C2.50244 8.46158 2.50244 8.74161 2.39345 8.95552C2.29757 9.14368 2.14459 9.29666 1.95643 9.39253C1.74252 9.50153 1.46249 9.50153 0.902442 9.50153H0.502442M4.99994 7.99903V1.99903",
@@ -8539,7 +8444,7 @@ function PaddingIcon(props) {
 
 // src/editor/components/ui/color-picker.tsx
 var import_react_colorful = require("react-colorful");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function ColorPicker(props) {
   const {
     color,
@@ -8557,14 +8462,14 @@ function ColorPicker(props) {
       onColorChange(color2);
     });
   };
-  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     BaseButton,
     {
       variant: "ghost",
       className: "mly:h-7 mly:w-7 mly:shrink-0",
       size: "sm",
       type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "div",
         {
           className: cn(
@@ -8578,7 +8483,7 @@ function ColorPicker(props) {
       )
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Popover,
     {
       onOpenChange: (open) => {
@@ -8587,17 +8492,17 @@ function ColorPicker(props) {
         }
       },
       children: [
-        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
         ] }) : popoverButton,
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           PopoverContent,
           {
             className: "mly:w-full mly:rounded-none mly:border-0 mly:bg-transparent! mly:p-0! mly:shadow-none mly:drop-shadow-md",
             sideOffset: 8,
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 import_react_colorful.HexColorPicker,
                 {
                   color,
@@ -8605,7 +8510,7 @@ function ColorPicker(props) {
                   className: "mly:flex mly:w-full! mly:flex-col mly:gap-4"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 import_react_colorful.HexColorInput,
                 {
                   alpha: true,
@@ -8615,10 +8520,10 @@ function ColorPicker(props) {
                   prefixed: true
                 }
               ),
-              suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   BaseButton,
                   {
                     variant: "ghost",
@@ -8626,7 +8531,7 @@ function ColorPicker(props) {
                     className: "!mly:size-7 mly:shrink-0",
                     type: "button",
                     onClick: () => handleColorChange(suggestedColor),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       "div",
                       {
                         className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded",
@@ -8648,10 +8553,10 @@ function ColorPicker(props) {
 }
 
 // src/editor/components/section-menu/use-section-state.tsx
-var import_react38 = require("@tiptap/react");
-var import_fast_deep_equal6 = __toESM(require("fast-deep-equal"), 1);
+var import_react35 = require("@tiptap/react");
+var import_fast_deep_equal5 = __toESM(require("fast-deep-equal"), 1);
 var useSectionState = (editor) => {
-  const states = (0, import_react38.useEditorState)({
+  const states = (0, import_react35.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -8673,19 +8578,19 @@ var useSectionState = (editor) => {
         currentShowIfKey: ((_n = ctx.editor.getAttributes("section")) == null ? void 0 : _n.showIfKey) || ""
       };
     },
-    equalityFn: import_fast_deep_equal6.default
+    equalityFn: import_fast_deep_equal5.default
   });
   return states;
 };
 
 // src/editor/components/section-menu/section-bubble-menu.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function SectionBubbleMenu(props) {
   const { appendTo, editor } = props;
   if (!editor) {
     return null;
   }
-  const getReferenceClientRect = (0, import_react40.useCallback)(() => {
+  const getReferenceClientRect = (0, import_react37.useCallback)(() => {
     const renderContainer = getRenderContainer(editor, "section");
     const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
     return rect;
@@ -8694,10 +8599,10 @@ function SectionBubbleMenu(props) {
     shouldShow: ({ editor: editor2 }) => {
       var _a, _b;
       const activeSectionNode = getClosestNodeByName(editor2, "section");
-      const repeatNodeChildren = activeSectionNode ? (_a = (0, import_react39.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
+      const repeatNodeChildren = activeSectionNode ? (_a = (0, import_react36.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
         return node.type.name === "repeat";
       })) == null ? void 0 : _a[0] : null;
-      const inlineImageNodeChildren = activeSectionNode ? (_b = (0, import_react39.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
+      const inlineImageNodeChildren = activeSectionNode ? (_b = (0, import_react36.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
         return node.type.name === "inlineImage";
       })) == null ? void 0 : _b[0] : null;
       const hasActiveRepeatNodeChildren = repeatNodeChildren && editor2.isActive("repeat");
@@ -8714,7 +8619,7 @@ function SectionBubbleMenu(props) {
       },
       getReferenceClientRect,
       appendTo: () => appendTo == null ? void 0 : appendTo.current,
-      plugins: [import_tippy7.sticky],
+      plugins: [import_tippy6.sticky],
       sticky: "popper",
       maxWidth: "auto"
     },
@@ -8726,12 +8631,12 @@ function SectionBubbleMenu(props) {
     { value: "6", label: "Smooth" },
     { value: "9999", label: "Round" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_react39.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_react36.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(TooltipProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           AlignmentSwitch,
           {
             alignment: state.currentAlignment,
@@ -8743,9 +8648,9 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Select,
             {
               label: "Border Radius",
@@ -8761,7 +8666,7 @@ function SectionBubbleMenu(props) {
               className: "mly:capitalize"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Select,
             {
               label: "Border Width",
@@ -8783,8 +8688,8 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Select,
           {
             icon: MarginIcon,
@@ -8812,8 +8717,8 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Select,
           {
             icon: PaddingIcon,
@@ -8841,9 +8746,9 @@ function SectionBubbleMenu(props) {
             className: "mly:capitalize"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             ColorPicker,
             {
               color: state.currentBorderColor,
@@ -8854,14 +8759,14 @@ function SectionBubbleMenu(props) {
                 });
               },
               tooltip: "Border Color",
-              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 BaseButton,
                 {
                   variant: "ghost",
                   className: "mly:h-7 mly:w-7 mly:shrink-0",
                   size: "sm",
                   type: "button",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     BorderColor,
                     {
                       className: "mly:size-3 mly:shrink-0",
@@ -8875,7 +8780,7 @@ function SectionBubbleMenu(props) {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             ColorPicker,
             {
               color: state.currentBackgroundColor,
@@ -8891,25 +8796,25 @@ function SectionBubbleMenu(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           BubbleMenuButton,
           {
-            icon: import_lucide_react26.Trash,
+            icon: import_lucide_react25.Trash,
             tooltip: "Delete Section",
             command: () => {
               deleteNode(editor, "section");
             }
           }
         ),
-        state.isColumnsActive && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Popover, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PopoverTrigger, { className: "mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: [
+        state.isColumnsActive && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Popover, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PopoverTrigger, { className: "mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: [
               "Column",
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.ChevronUp, { className: "mly:h-3 mly:w-3" })
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.ChevronUp, { className: "mly:h-3 mly:w-3" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               PopoverContent,
               {
                 className: "mly:w-max mly:rounded-lg mly:p-0.5!",
@@ -8922,7 +8827,7 @@ function SectionBubbleMenu(props) {
                 onCloseAutoFocus: (e) => {
                   e.preventDefault();
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ColumnsBubbleMenuContent, { editor })
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ColumnsBubbleMenuContent, { editor })
               }
             )
           ] })
@@ -8933,13 +8838,13 @@ function SectionBubbleMenu(props) {
 }
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-var import_react42 = require("@tiptap/react");
+var import_react39 = require("@tiptap/react");
 
 // src/editor/components/spacer-menu/use-spacer-state.ts
-var import_react41 = require("@tiptap/react");
-var import_fast_deep_equal7 = __toESM(require("fast-deep-equal"), 1);
+var import_react38 = require("@tiptap/react");
+var import_fast_deep_equal6 = __toESM(require("fast-deep-equal"), 1);
 var useSpacerState = (editor) => {
-  const states = (0, import_react41.useEditorState)({
+  const states = (0, import_react38.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a;
@@ -8947,20 +8852,20 @@ var useSpacerState = (editor) => {
         currentShowIfKey: ((_a = ctx.editor.getAttributes("spacer")) == null ? void 0 : _a.showIfKey) || ""
       };
     },
-    equalityFn: import_fast_deep_equal7.default
+    equalityFn: import_fast_deep_equal6.default
   });
   return states;
 };
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-var import_react43 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function SpacerBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
     return null;
   }
-  const items = (0, import_react43.useMemo)(
+  const items = (0, import_react40.useMemo)(
     () => spacing.map((space) => {
       const { value: height, short: name } = space;
       return {
@@ -8986,11 +8891,11 @@ function SpacerBubbleMenu(props) {
     }
   });
   const state = useSpacerState(editor);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react42.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_react39.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         BubbleMenuButton,
         __spreadValues({
           className: "!mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
@@ -9224,18 +9129,18 @@ var Spacer = import_core12.Node.create({
 
 // src/editor/extensions/link-card.ts
 var import_core13 = require("@tiptap/core");
-var import_react45 = require("@tiptap/react");
+var import_react42 = require("@tiptap/react");
 
 // src/editor/nodes/link-card.tsx
-var import_react44 = require("@tiptap/react");
+var import_react41 = require("@tiptap/react");
 
 // src/editor/components/input.tsx
 var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Input = React5.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "input",
       __spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
         type,
@@ -9253,11 +9158,11 @@ Input.displayName = "Input";
 
 // src/editor/components/textarea.tsx
 var React6 = __toESM(require("react"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Textarea = React6.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "textarea",
       __spreadValues({
         className: cn(
@@ -9273,18 +9178,18 @@ var Textarea = React6.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/editor/nodes/link-card.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function LinkCardComponent(props) {
   const { title, description, link, linkTitle, image: image2, badgeText, subTitle } = props.node.attrs;
   const { getPos, editor } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_react44.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react41.NodeViewWrapper,
     {
       className: `react-component ${props.selected && "ProseMirror-selectednode"}`,
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Popover, { open: props.selected, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { open: props.selected, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "div",
           {
             tabIndex: -1,
@@ -9293,8 +9198,8 @@ function LinkCardComponent(props) {
               const pos = getPos();
               editor.commands.setNodeSelection(pos);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
-              image2 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
+              image2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                 "img",
                 {
                   src: image2,
@@ -9303,23 +9208,23 @@ function LinkCardComponent(props) {
                   draggable: editor.isEditable
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("mly:flex mly:flex-col"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
-                  badgeText && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "!mly:font-base mly:rounded-md mly:bg-yellow-200 mly:px-2 mly:py-1 mly:font-semibold mly:leading-none text-xs", children: badgeText }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("mly:flex mly:flex-col"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
+                  badgeText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "!mly:font-base mly:rounded-md mly:bg-yellow-200 mly:px-2 mly:py-1 mly:font-semibold mly:leading-none text-xs", children: badgeText }),
                   " ",
-                  subTitle && !badgeText && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "!mly:font-base mly:font-regular mly:rounded-md mly:leading-none mly:text-gray-400 text-xs", children: subTitle })
+                  subTitle && !badgeText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "!mly:font-base mly:font-regular mly:rounded-md mly:leading-none mly:text-gray-400 text-xs", children: subTitle })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
                   description,
                   " ",
-                  linkTitle ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
+                  linkTitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
                 ] })
               ] }) })
             ] })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
           PopoverContent,
           {
             align: "end",
@@ -9328,9 +9233,9 @@ function LinkCardComponent(props) {
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Input,
                   {
                     placeholder: "Add Image",
@@ -9344,9 +9249,9 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Input,
                   {
                     placeholder: "Add title",
@@ -9359,9 +9264,9 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Textarea,
                   {
                     placeholder: "Add description here",
@@ -9374,10 +9279,10 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     Input,
                     {
                       placeholder: "Add link title here",
@@ -9390,9 +9295,9 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     Input,
                     {
                       placeholder: "Add link here",
@@ -9406,10 +9311,10 @@ function LinkCardComponent(props) {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     Input,
                     {
                       placeholder: "Add badge text here",
@@ -9422,9 +9327,9 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     Input,
                     {
                       placeholder: "Add sub title here",
@@ -9511,7 +9416,7 @@ var LinkCardExtension = import_core13.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react45.ReactNodeViewRenderer)(LinkCardComponent, {
+    return (0, import_react42.ReactNodeViewRenderer)(LinkCardComponent, {
       className: "mly:relative"
     });
   }
@@ -9519,26 +9424,26 @@ var LinkCardExtension = import_core13.Node.create({
 
 // src/editor/nodes/button/button.tsx
 var import_core14 = require("@tiptap/core");
-var import_react49 = require("@tiptap/react");
+var import_react46 = require("@tiptap/react");
 
 // src/editor/nodes/button/button-view.tsx
-var import_react47 = require("@tiptap/react");
-var import_react48 = require("react");
+var import_react44 = require("@tiptap/react");
+var import_react45 = require("react");
 
 // src/editor/nodes/button/button-label-input.tsx
-var import_react46 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function ButtonLabelInput(props) {
   var _a, _b;
   const { value, onValueChange, isVariable, editor } = props;
-  const linkInputRef = (0, import_react46.useRef)(null);
-  const [isEditing, setIsEditing] = (0, import_react46.useState)(!isVariable);
+  const linkInputRef = (0, import_react43.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react43.useState)(!isVariable);
   const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
   const otps = useVariableOptions(editor);
   const variables = otps == null ? void 0 : otps.variables;
   const variableTriggerCharacter = (_b = (_a = otps == null ? void 0 : otps.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
   const renderVariable = otps == null ? void 0 : otps.renderVariable;
-  const autoCompleteOptions = (0, import_react46.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react43.useMemo)(() => {
     const withoutTrigger = value.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -9549,8 +9454,8 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "button",
       {
         onClick: () => {
@@ -9571,7 +9476,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       InputAutocomplete,
       {
         editor,
@@ -9598,7 +9503,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -9618,7 +9523,7 @@ function ButtonView(props) {
   } = node.attrs;
   const opts = useVariableOptions(editor);
   const renderVariable = opts == null ? void 0 : opts.renderVariable;
-  const sizes = (0, import_react48.useMemo)(
+  const sizes = (0, import_react45.useMemo)(
     () => ({
       small: {
         paddingX: 24,
@@ -9635,14 +9540,14 @@ function ButtonView(props) {
     }),
     []
   );
-  const size = (0, import_react48.useMemo)(() => {
+  const size = (0, import_react45.useMemo)(() => {
     var _a;
     return (_a = Object.entries(sizes).find(
       ([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
     )) == null ? void 0 : _a[0];
   }, [paddingRight, paddingTop, sizes]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_react47.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    import_react44.NodeViewWrapper,
     {
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
@@ -9650,8 +9555,8 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "button",
           {
             className: cn(
@@ -9694,7 +9599,7 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           PopoverContent,
           {
             align: "end",
@@ -9703,8 +9608,8 @@ function ButtonView(props) {
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -9718,9 +9623,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Select,
                   {
                     label: "Border Radius",
@@ -9738,7 +9643,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Select,
                   {
                     label: "Style",
@@ -9756,7 +9661,7 @@ function ButtonView(props) {
                     className: "mly:capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Select,
                   {
                     label: "Size",
@@ -9780,9 +9685,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   AlignmentSwitch,
                   {
                     alignment,
@@ -9793,7 +9698,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -9809,9 +9714,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   BackgroundColorPickerPopup,
                   {
                     variant,
@@ -9823,7 +9728,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   TextColorPickerPopup,
                   {
                     color: textColor || "transparent",
@@ -9844,20 +9749,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
           className: "mly:size-7",
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
               className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded-full mly:shadow",
@@ -9876,16 +9781,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
       className: "mly:size-7",
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "div",
           {
             className: "mly:h-[2px] mly:w-3 mly:shrink-0 mly:rounded-md mly:shadow",
@@ -10052,7 +9957,7 @@ var ButtonExtension = import_core14.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react49.ReactNodeViewRenderer)(ButtonView, {
+    return (0, import_react46.ReactNodeViewRenderer)(ButtonView, {
       contentDOMElementTag: "div",
       className: "mly:relative"
     });
@@ -10061,7 +9966,7 @@ var ButtonExtension = import_core14.Node.create({
 
 // src/editor/nodes/image/image.ts
 var import_extension_image2 = __toESM(require("@tiptap/extension-image"), 1);
-var import_react50 = require("@tiptap/react");
+var import_react47 = require("@tiptap/react");
 var DEFAULT_IMAGE_BORDER_RADIUS = 0;
 var ImageExtension = import_extension_image2.default.extend({
   addAttributes() {
@@ -10199,7 +10104,7 @@ var ImageExtension = import_extension_image2.default.extend({
     });
   },
   addNodeView() {
-    return (0, import_react50.ReactNodeViewRenderer)(ImageView, {
+    return (0, import_react47.ReactNodeViewRenderer)(ImageView, {
       className: "mly:relative"
     });
   }
@@ -10208,89 +10113,30 @@ var ImageExtension = import_extension_image2.default.extend({
 // src/editor/nodes/html/html.tsx
 var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
 var import_state7 = require("@tiptap/pm/state");
-var import_react60 = require("@tiptap/react");
+var import_react56 = require("@tiptap/react");
 var import_xml = __toESM(require("highlight.js/lib/languages/xml"), 1);
 var import_lowlight = require("lowlight");
 
 // src/editor/nodes/html/html-view.tsx
-var import_react51 = require("@tiptap/react");
-var import_react52 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react48 = require("@tiptap/react");
+var import_jsx_runtime50 = require("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 = (0, import_react52.useMemo)(() => {
-    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__ */ (0, import_jsx_runtime51.jsxs)(
-    import_react51.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    import_react48.NodeViewWrapper,
     {
       draggable: false,
       "data-drag-handle": false,
       "data-type": "htmlCodeBlock",
-      children: [
-        activeTab === "code" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("pre", { className: "mly:my-0 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-2 mly:text-black", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          import_react51.NodeViewContent,
-          {
-            as: "code",
-            className: cn("is-editable", languageClass)
-          }
-        ) }),
-        activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          "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__ */ (0, import_jsx_runtime50.jsx)("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_react48.NodeViewContent,
+        {
+          as: "code",
+          className: cn("is-editable", languageClass)
+        }
+      ) })
     }
   );
 }
@@ -10429,24 +10275,24 @@ var ParagraphExtension = import_extension_paragraph.default.extend({
 
 // src/editor/nodes/repeat/repeat.ts
 var import_core16 = require("@tiptap/core");
-var import_react54 = require("@tiptap/react");
+var import_react50 = require("@tiptap/react");
 
 // src/editor/nodes/repeat/repeat-view.tsx
-var import_react53 = require("@tiptap/react");
-var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react49 = require("@tiptap/react");
+var import_lucide_react26 = require("lucide-react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function RepeatView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-    import_react53.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    import_react49.NodeViewWrapper,
     {
       "data-type": "repeat",
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
       className: "mly:relative",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react53.NodeViewContent, { className: "is-editable" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react49.NodeViewContent, { className: "is-editable" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "div",
           {
             role: "button",
@@ -10457,8 +10303,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.Repeat2, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.Repeat2, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
             ]
           }
         )
@@ -10542,7 +10388,7 @@ var RepeatExtension = import_core16.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react54.ReactNodeViewRenderer)(RepeatView, {
+    return (0, import_react50.ReactNodeViewRenderer)(RepeatView, {
       contentDOMElementTag: "div",
       className: "mly:relative"
     });
@@ -10699,14 +10545,14 @@ var SlashCommandExtension = import_core18.Extension.create({
 });
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_react56 = require("@tiptap/react");
-var import_react57 = require("react");
-var import_tippy8 = __toESM(require("tippy.js"), 1);
+var import_react52 = require("@tiptap/react");
+var import_react53 = require("react");
+var import_tippy7 = __toESM(require("tippy.js"), 1);
 
 // src/editor/extensions/slash-command/slash-command-item.tsx
-var import_lucide_react28 = require("lucide-react");
-var import_react55 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_lucide_react27 = require("lucide-react");
+var import_react51 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function SlashCommandItem(props) {
   var _a;
   const {
@@ -10721,7 +10567,7 @@ function SlashCommandItem(props) {
     hoveredItemKey,
     onHover
   } = props;
-  const [open, setOpen] = (0, import_react55.useState)(false);
+  const [open, setOpen] = (0, import_react51.useState)(false);
   const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
   const itemKey = `${groupIndex}-${commandIndex}`;
   const isHovered = hoveredItemKey === itemKey;
@@ -10729,19 +10575,19 @@ function SlashCommandItem(props) {
   const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && (isHovered || isActive && !hoveredItemKey);
   const hasRenderFunction = typeof item.render === "function";
   const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
-  let value = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:grow", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "mly:font-medium", children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
+  let value = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "mly:grow", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:font-medium", children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
     ] }),
-    isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react28.ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
+    isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
   ] });
   if (renderFunctionValue !== null && renderFunctionValue !== true) {
     value = renderFunctionValue;
   }
-  const openTimerRef = (0, import_react55.useRef)(0);
-  const handleDelayedOpen = (0, import_react55.useCallback)(() => {
+  const openTimerRef = (0, import_react51.useRef)(0);
+  const handleDelayedOpen = (0, import_react51.useCallback)(() => {
     window.clearTimeout(openTimerRef.current);
     const delay = 200;
     openTimerRef.current = window.setTimeout(() => {
@@ -10749,7 +10595,7 @@ function SlashCommandItem(props) {
       openTimerRef.current = 0;
     }, delay);
   }, [setOpen]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (shouldOpenTooltip) {
       handleDelayedOpen();
     } else {
@@ -10758,7 +10604,7 @@ function SlashCommandItem(props) {
       setOpen(false);
     }
   }, [shouldOpenTooltip]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     return () => {
       if (openTimerRef.current) {
         window.clearTimeout(openTimerRef.current);
@@ -10766,8 +10612,8 @@ function SlashCommandItem(props) {
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Tooltip, { open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Tooltip, { open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "button",
       {
         className: cn(
@@ -10782,14 +10628,14 @@ function SlashCommandItem(props) {
         children: value
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       TooltipContent,
       {
         side: "right",
         sideOffset: 10,
         className: "mly:w-52 mly:rounded-lg mly:border-none mly:p-1 mly:shadow",
-        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("figure", { className: "mly:relative mly:aspect-[2.5] mly:w-full mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("figure", { className: "mly:relative mly:aspect-[2.5] mly:w-full mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "img",
             {
               src: item == null ? void 0 : item.preview,
@@ -10797,7 +10643,7 @@ function SlashCommandItem(props) {
               className: "mly:absolute mly:inset-0 mly:h-full mly:w-full mly:object-cover"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
         ] })
       }
     )
@@ -10886,16 +10732,16 @@ function processCommand(options) {
 }
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var CommandList = (0, import_react57.forwardRef)((props, ref) => {
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var CommandList = (0, import_react53.forwardRef)((props, ref) => {
   const { items: groups, command, editor, range, query } = props;
-  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react57.useState)(0);
-  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react57.useState)(0);
-  const [hoveredItemKey, setHoveredItemKey] = (0, import_react57.useState)(null);
-  const prevQuery = (0, import_react57.useRef)("");
-  const prevSelectedGroupIndex = (0, import_react57.useRef)(0);
-  const prevSelectedCommandIndex = (0, import_react57.useRef)(0);
-  const selectItem = (0, import_react57.useCallback)(
+  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react53.useState)(0);
+  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react53.useState)(0);
+  const [hoveredItemKey, setHoveredItemKey] = (0, import_react53.useState)(null);
+  const prevQuery = (0, import_react53.useRef)("");
+  const prevSelectedGroupIndex = (0, import_react53.useRef)(0);
+  const prevSelectedCommandIndex = (0, import_react53.useRef)(0);
+  const selectItem = (0, import_react53.useCallback)(
     (groupIndex, commandIndex) => {
       const item = groups[groupIndex].commands[commandIndex];
       if (!item) {
@@ -10905,7 +10751,7 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
     },
     [command]
   );
-  (0, import_react57.useImperativeHandle)(ref, () => ({
+  (0, import_react53.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       var _a, _b, _c, _d;
       const navigationKeys = [
@@ -10993,9 +10839,9 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
       }
     }
   }));
-  const commandListContainer = (0, import_react57.useRef)(null);
-  const activeCommandRef = (0, import_react57.useRef)(null);
-  (0, import_react57.useLayoutEffect)(() => {
+  const commandListContainer = (0, import_react53.useRef)(null);
+  const activeCommandRef = (0, import_react53.useRef)(null);
+  (0, import_react53.useLayoutEffect)(() => {
     const container = commandListContainer == null ? void 0 : commandListContainer.current;
     const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
     if (!container || !activeCommandContainer) {
@@ -11010,11 +10856,11 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
     commandListContainer,
     activeCommandRef
   ]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     setSelectedGroupIndex(0);
     setSelectedCommandIndex(0);
   }, [groups]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     return () => {
       prevQuery.current = "";
       prevSelectedGroupIndex.current = 0;
@@ -11024,15 +10870,15 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
   if (!groups || groups.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mly:z-50 mly:w-72 mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:z-50 mly:w-72 mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "div",
       {
         id: "slash-command",
         ref: commandListContainer,
         className: "mly:no-scrollbar mly:h-auto mly:max-h-[330px] mly:overflow-y-auto",
-        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react57.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react53.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "span",
             {
               className: cn(
@@ -11042,9 +10888,9 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
               children: group.title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
             const itemKey = `${groupIndex}-${commandIndex}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               SlashCommandItem,
               {
                 item,
@@ -11064,16 +10910,16 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mly:flex mly:items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("kbd", { className: "mly:ml-1 mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2193" }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:flex mly:items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:ml-1 mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2193" }),
         " ",
         "to navigate"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
         " ",
         "to select"
       ] })
@@ -11097,11 +10943,11 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react56.ReactRenderer(CommandList, {
+          component = new import_react52.ReactRenderer(CommandList, {
             props,
             editor: props.editor
           });
-          popup = (0, import_tippy8.default)("body", {
+          popup = (0, import_tippy7.default)("body", {
             getReferenceClientRect: props.clientRect,
             appendTo: () => document.body,
             content: component.element,
@@ -11150,16 +10996,16 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
 }
 
 // src/editor/nodes/variable/variable-suggestions.tsx
-var import_react58 = require("@tiptap/react");
-var import_react59 = require("react");
-var import_tippy9 = __toESM(require("tippy.js"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var VariableList = (0, import_react59.forwardRef)((props, ref) => {
+var import_react54 = require("@tiptap/react");
+var import_react55 = require("react");
+var import_tippy8 = __toESM(require("tippy.js"), 1);
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var VariableList = (0, import_react55.forwardRef)((props, ref) => {
   var _a;
   const { items = [], editor } = props;
-  const popoverRef = (0, import_react59.useRef)(null);
+  const popoverRef = (0, import_react55.useRef)(null);
   const VariableSuggestionPopoverComponent = (_a = useVariableOptions(editor)) == null ? void 0 : _a.variableSuggestionsPopover;
-  (0, import_react59.useImperativeHandle)(ref, () => ({
+  (0, import_react55.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (!popoverRef.current) {
         return false;
@@ -11182,7 +11028,7 @@ var VariableList = (0, import_react59.forwardRef)((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     VariableSuggestionPopoverComponent,
     {
       items,
@@ -11217,14 +11063,14 @@ function getVariableSuggestions(char = DEFAULT_VARIABLE_TRIGGER_CHAR) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react58.ReactRenderer(VariableList, {
+          component = new import_react54.ReactRenderer(VariableList, {
             props,
             editor: props.editor
           });
           if (!props.clientRect) {
             return;
           }
-          popup = (0, import_tippy9.default)("body", {
+          popup = (0, import_tippy8.default)("body", {
             getReferenceClientRect: props.clientRect,
             appendTo: () => document.body,
             content: component.element,
@@ -11291,7 +11137,7 @@ var HTMLCodeBlockExtension = import_extension_code_block_lowlight.default.extend
     });
   },
   addNodeView() {
-    return (0, import_react60.ReactNodeViewRenderer)(HTMLCodeBlockView, {
+    return (0, import_react56.ReactNodeViewRenderer)(HTMLCodeBlockView, {
       className: "mly:relative",
       attrs: ({ node }) => {
         var _a;
@@ -11366,17 +11212,17 @@ var isCustomNodeSelected = (editor, node) => {
 };
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-var import_react64 = require("@tiptap/react");
+var import_react60 = require("@tiptap/react");
 
 // src/editor/components/text-menu/text-bubble-content.tsx
-var import_lucide_react29 = require("lucide-react");
+var import_lucide_react28 = require("lucide-react");
 
 // src/editor/components/text-menu/use-text-menu-state.tsx
-var import_react61 = require("@tiptap/react");
-var import_fast_deep_equal8 = __toESM(require("fast-deep-equal"), 1);
+var import_react57 = require("@tiptap/react");
+var import_fast_deep_equal7 = __toESM(require("fast-deep-equal"), 1);
 var DEFAULT_TEXT_COLOR = "#374151";
 var useTextMenuState = (editor) => {
-  const states = (0, import_react61.useEditorState)({
+  const states = (0, import_react57.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -11392,13 +11238,13 @@ var useTextMenuState = (editor) => {
         paragraphShowIfKey: ((_h = ctx.editor.getAttributes("paragraph")) == null ? void 0 : _h.showIfKey) || ""
       };
     },
-    equalityFn: import_fast_deep_equal8.default
+    equalityFn: import_fast_deep_equal7.default
   });
   return states;
 };
 
 // src/editor/components/text-menu/text-bubble-content.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function TextBubbleContent(props) {
   var _a, _b, _c, _d;
   const { editor, showListMenu = true } = props;
@@ -11410,41 +11256,41 @@ function TextBubbleContent(props) {
       name: "bold",
       isActive: () => editor == null ? void 0 : editor.isActive("bold"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
-      icon: import_lucide_react29.BoldIcon,
+      icon: import_lucide_react28.BoldIcon,
       tooltip: "Bold"
     },
     {
       name: "italic",
       isActive: () => editor == null ? void 0 : editor.isActive("italic"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
-      icon: import_lucide_react29.ItalicIcon,
+      icon: import_lucide_react28.ItalicIcon,
       tooltip: "Italic"
     },
     {
       name: "underline",
       isActive: () => editor == null ? void 0 : editor.isActive("underline"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run(),
-      icon: import_lucide_react29.UnderlineIcon,
+      icon: import_lucide_react28.UnderlineIcon,
       tooltip: "Underline"
     },
     {
       name: "strike",
       isActive: () => editor == null ? void 0 : editor.isActive("strike"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run(),
-      icon: import_lucide_react29.StrikethroughIcon,
+      icon: import_lucide_react28.StrikethroughIcon,
       tooltip: "Strikethrough"
     },
     {
       name: "code",
       isActive: () => editor == null ? void 0 : editor.isActive("code"),
       command: () => editor == null ? void 0 : editor.chain().focus().toggleCode().run(),
-      icon: import_lucide_react29.CodeIcon,
+      icon: import_lucide_react28.CodeIcon,
       tooltip: "Code"
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BubbleMenuButton, __spreadValues({}, item), index)),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BubbleMenuButton, __spreadValues({}, item), index)),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       AlignmentSwitch,
       {
         alignment: state.textAlign,
@@ -11453,21 +11299,21 @@ function TextBubbleContent(props) {
         }
       }
     ),
-    !state.isListActive && showListMenu && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    !state.isListActive && showListMenu && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         BubbleMenuButton,
         {
-          icon: import_lucide_react29.List,
+          icon: import_lucide_react28.List,
           command: () => {
             editor.chain().focus().toggleBulletList().run();
           },
           tooltip: "Bullet List"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         BubbleMenuButton,
         {
-          icon: import_lucide_react29.ListOrdered,
+          icon: import_lucide_react28.ListOrdered,
           command: () => {
             editor.chain().focus().toggleOrderedList().run();
           },
@@ -11475,7 +11321,7 @@ function TextBubbleContent(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       LinkInputPopover,
       {
         defaultValue: (_d = state == null ? void 0 : state.linkUrl) != null ? _d : "",
@@ -11491,8 +11337,8 @@ function TextBubbleContent(props) {
         isVariable: state.isUrlVariable
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       ColorPicker,
       {
         color: state.currentTextColor,
@@ -11501,16 +11347,16 @@ function TextBubbleContent(props) {
         },
         tooltip: "Text Color",
         suggestedColors,
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           BaseButton,
           {
             variant: "ghost",
             size: "sm",
             type: "button",
             className: "mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 "div",
                 {
                   className: "mly:h-[2px] mly:w-3",
@@ -11526,35 +11372,35 @@ function TextBubbleContent(props) {
 }
 
 // src/editor/components/text-menu/turn-into-block.tsx
-var import_lucide_react30 = require("lucide-react");
-var import_react62 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_react58 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var isOption = (option) => option.type === "option";
 var isCategory = (option) => option.type === "category";
 function TurnIntoBlock(props) {
   const { options } = props;
-  const activeItem = (0, import_react62.useMemo)(
+  const activeItem = (0, import_react58.useMemo)(
     () => options.find((option) => option.type === "option" && option.isActive()),
     [options]
   );
-  const { icon: ActiveIcon = import_lucide_react30.PilcrowIcon } = activeItem || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  const { icon: ActiveIcon = import_lucide_react29.PilcrowIcon } = activeItem || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         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__ */ (0, import_jsx_runtime57.jsx)(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react30.ChevronDownIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react29.ChevronDownIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipContent, { sideOffset: 8, children: "Turn into" })
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipContent, { sideOffset: 8, children: "Turn into" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       PopoverContent,
       {
         align: "start",
@@ -11563,25 +11409,25 @@ 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__ */ (0, import_jsx_runtime57.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               BaseButton,
               {
                 onClick: option.onClick,
                 variant: "ghost",
-                className: "mly:mb-0.5 mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:px-2 mly:py-1 mly:text-sm mly:font-normal mly:text-midnight-gray",
+                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__ */ (0, import_jsx_runtime57.jsx)(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
                   option.label
                 ]
               },
               option.id
             );
           } else if (isCategory(option)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               "label",
               {
                 className: cn(
-                  "mly:px-2 mly:text-xs mly:font-medium mly:text-midnight-gray/60",
+                  "mly:!px-2.5 mly:!pl-3.5 mly:text-xs mly:font-medium mly:text-midnight-gray/60",
                   index === 0 ? "mly:mb-2 mly:mt-1" : "mly:my-2"
                 ),
                 children: option.label
@@ -11596,10 +11442,10 @@ function TurnIntoBlock(props) {
 }
 
 // src/editor/components/text-menu/use-turn-into-block-options.tsx
-var import_react63 = require("@tiptap/react");
-var import_lucide_react31 = require("lucide-react");
+var import_react59 = require("@tiptap/react");
+var import_lucide_react30 = require("lucide-react");
 function useTurnIntoBlockOptions(editor) {
-  return (0, import_react63.useEditorState)({
+  return (0, import_react59.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => [
       {
@@ -11608,7 +11454,7 @@ function useTurnIntoBlockOptions(editor) {
         id: "hierarchy"
       },
       {
-        icon: import_lucide_react31.PilcrowIcon,
+        icon: import_lucide_react30.PilcrowIcon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setParagraph().run(),
         id: "paragraph",
         disabled: () => !editor2.can().setParagraph(),
@@ -11617,7 +11463,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react31.Heading1Icon,
+        icon: import_lucide_react30.Heading1Icon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 1 }).run(),
         id: "heading1",
         disabled: () => !editor2.can().setHeading({ level: 1 }),
@@ -11626,7 +11472,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react31.Heading2Icon,
+        icon: import_lucide_react30.Heading2Icon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 2 }).run(),
         id: "heading2",
         disabled: () => !editor2.can().setHeading({ level: 2 }),
@@ -11635,7 +11481,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react31.Heading3Icon,
+        icon: import_lucide_react30.Heading3Icon,
         onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 3 }).run(),
         id: "heading3",
         disabled: () => !editor2.can().setHeading({ level: 3 }),
@@ -11649,7 +11495,7 @@ function useTurnIntoBlockOptions(editor) {
         id: "lists"
       },
       {
-        icon: import_lucide_react31.ListIcon,
+        icon: import_lucide_react30.ListIcon,
         onClick: () => editor2.chain().focus().toggleBulletList().run(),
         id: "bulletList",
         disabled: () => !editor2.can().toggleBulletList(),
@@ -11658,7 +11504,7 @@ function useTurnIntoBlockOptions(editor) {
         type: "option"
       },
       {
-        icon: import_lucide_react31.ListOrderedIcon,
+        icon: import_lucide_react30.ListOrderedIcon,
         onClick: () => editor2.chain().focus().toggleOrderedList().run(),
         id: "orderedList",
         disabled: () => !editor2.can().toggleOrderedList(),
@@ -11671,7 +11517,7 @@ function useTurnIntoBlockOptions(editor) {
 }
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function TextBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11722,23 +11568,23 @@ function TextBubbleMenu(props) {
     }
   });
   const turnIntoBlockOptions = useTurnIntoBlockOptions(editor);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react64.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    import_react60.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(TooltipProvider, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TurnIntoBlock, { options: turnIntoBlockOptions }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Divider, { className: "mly:mx-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TextBubbleContent, { editor })
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TurnIntoBlock, { options: turnIntoBlockOptions }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Divider, { className: "mly:mx-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TextBubbleContent, { editor })
       ] })
     })
   );
 }
 
 // src/editor/components/variable-menu/variable-bubble-menu.tsx
-var import_react65 = require("@tiptap/react");
-var import_tippy10 = require("tippy.js");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react61 = require("@tiptap/react");
+var import_tippy9 = require("tippy.js");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function VariableBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -11754,18 +11600,18 @@ function VariableBubbleMenu(props) {
       popperOptions: {
         modifiers: [{ name: "flip", enabled: false }]
       },
-      plugins: [import_tippy10.sticky],
+      plugins: [import_tippy9.sticky],
       sticky: "popper",
       maxWidth: "100%",
       appendTo: () => (appendTo == null ? void 0 : appendTo.current) || "parent",
       placement: "top-start"
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react65.BubbleMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react61.BubbleMenu,
     __spreadProps(__spreadValues({}, bubbleMenuProps), {
       className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-slate-200 mly:bg-white mly:p-0.5 mly:shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TextBubbleContent, { showListMenu: false, editor }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TextBubbleContent, { showListMenu: false, editor }) })
     })
   );
 }
@@ -11851,8 +11697,8 @@ function replaceDeprecatedNode(json) {
 }
 
 // src/editor/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
-function Editor13(props) {
+var import_jsx_runtime59 = require("react/jsx-runtime");
+function Editor12(props) {
   const {
     config: {
       wrapClassName = "",
@@ -11875,7 +11721,7 @@ function Editor13(props) {
     scrollThreshold = 40,
     scrollMargin = 40
   } = props;
-  const formattedContent = (0, import_react67.useMemo)(() => {
+  const formattedContent = (0, import_react63.useMemo)(() => {
     if (contentJson) {
       const json = (contentJson == null ? void 0 : contentJson.type) === "doc" ? contentJson : {
         type: "doc",
@@ -11896,8 +11742,8 @@ function Editor13(props) {
       };
     }
   }, [contentHtml, contentJson, replaceDeprecatedNode]);
-  const menuContainerRef = (0, import_react67.useRef)(null);
-  const editor = (0, import_react66.useEditor)({
+  const menuContainerRef = (0, import_react63.useRef)(null);
+  const editor = (0, import_react62.useEditor)({
     editorProps: {
       scrollThreshold,
       scrollMargin,
@@ -11924,7 +11770,7 @@ function Editor13(props) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       id: "mly-editor",
@@ -11935,8 +11781,8 @@ function Editor13(props) {
       ),
       ref: menuContainerRef,
       children: [
-        hasMenuBar && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EditorMenuBar, { config: props.config, editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        hasMenuBar && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(EditorMenuBar, { config: props.config, editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "div",
           {
             className: cn(
@@ -11944,17 +11790,16 @@ function Editor13(props) {
               bodyClassName
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react66.EditorContent, { editor }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
-              !hideContextMenu && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ContentMenu, { editor }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(HTMLBubbleMenu, { editor, appendTo: menuContainerRef }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react62.EditorContent, { editor }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
+              !hideContextMenu && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ContentMenu, { editor }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
             ]
           }
         )