@daisychainapp/maily-to-core 0.1.2 → 0.2.8

package/dist/extensions/index.js

@@ -1197,7 +1197,7 @@ var ColumnsExtension = import_core9.Node.create({
 
 // src/editor/nodes/button/button.tsx
 var import_core10 = require("@tiptap/core");
-var import_react17 = require("@tiptap/react");
+var import_react18 = require("@tiptap/react");
 
 // src/editor/components/alignment-switch.tsx
 var import_lucide_react = require("lucide-react");
@@ -3011,24 +3011,160 @@ function Select(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-var import_react15 = require("@tiptap/react");
+var import_react16 = require("@tiptap/react");
 
-// src/editor/nodes/button/button-label-input.tsx
+// src/editor/components/show-popover.tsx
+var import_lucide_react15 = require("lucide-react");
 var import_react12 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function _ShowPopover(props) {
+  const { showIfKey = "", onShowIfKeyValueChange, editor } = props;
+  const { variables = [], renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION } = useMailyContext();
+  const [isUpdatingKey, setIsUpdatingKey] = (0, import_react12.useState)(false);
+  const inputRef = (0, import_react12.useRef)(null);
+  const autoCompleteOptions = (0, import_react12.useMemo)(() => {
+    return processVariables(variables, {
+      query: showIfKey || "",
+      from: "bubble-variable",
+      editor
+    }).map((variable) => variable.name);
+  }, [variables, showIfKey, editor]);
+  const isValidWhenKey = showIfKey || autoCompleteOptions.includes(showIfKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    Popover,
+    {
+      onOpenChange: (open) => {
+        if (open) {
+          return;
+        }
+        setIsUpdatingKey(false);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.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 data-[state=open]:mly-bg-soft-gray hover:mly-bg-soft-gray focus-visible:mly-relative focus-visible:mly-z-10 focus-visible:mly-outline-none focus-visible:mly-ring-2 focus-visible:mly-ring-gray-400 focus-visible:mly-ring-offset-2",
+                showIfKey && "mly-bg-rose-100 mly-text-rose-800 data-[state=open]:mly-bg-rose-100 hover:mly-bg-rose-100"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Eye, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5]" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { sideOffset: 8, children: "Show block conditionally" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          PopoverContent,
+          {
+            className: "mly-flex mly-w-max mly-rounded-lg !mly-p-0.5",
+            side: "top",
+            sideOffset: 8,
+            align: "end",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            onCloseAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mly-flex mly-items-center mly-gap-1.5 mly-px-1.5 mly-text-sm mly-leading-none", children: [
+                "Show if",
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    import_lucide_react15.InfoIcon,
+                    {
+                      className: cn("mly-size-3 mly-stroke-[2.5] mly-text-gray-500")
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    TooltipContent,
+                    {
+                      sideOffset: 14,
+                      className: "mly-max-w-[285px]",
+                      align: "start",
+                      children: "Show the block if the selected variable is true."
+                    }
+                  )
+                ] })
+              ] }),
+              !isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                "button",
+                {
+                  onClick: () => {
+                    setIsUpdatingKey(true);
+                    setTimeout(() => {
+                      var _a;
+                      (_a = inputRef.current) == null ? void 0 : _a.focus();
+                    }, 0);
+                  },
+                  children: renderVariable({
+                    variable: {
+                      name: showIfKey,
+                      valid: !!isValidWhenKey
+                    },
+                    fallback: "",
+                    from: "bubble-variable",
+                    editor
+                  })
+                }
+              ),
+              isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                "form",
+                {
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    setIsUpdatingKey(false);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                      setIsUpdatingKey(false);
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    InputAutocomplete,
+                    {
+                      value: showIfKey || "",
+                      onValueChange: (value) => {
+                        onShowIfKeyValueChange == null ? void 0 : onShowIfKeyValueChange(value);
+                      },
+                      onOutsideClick: () => {
+                        setIsUpdatingKey(false);
+                      },
+                      onSelectOption: (value) => {
+                        onShowIfKeyValueChange == null ? void 0 : onShowIfKeyValueChange(value);
+                        setIsUpdatingKey(false);
+                      },
+                      autoCompleteOptions,
+                      ref: inputRef
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ShowPopover = (0, import_react12.memo)(_ShowPopover);
+
+// src/editor/nodes/button/button-label-input.tsx
 var import_react13 = require("react");
 var import_react14 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ButtonLabelInput(props) {
   const { value, onValueChange, isVariable, editor } = props;
-  const linkInputRef = (0, import_react14.useRef)(null);
-  const [isEditing, setIsEditing] = (0, import_react13.useState)(!isVariable);
+  const linkInputRef = (0, import_react15.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react14.useState)(!isVariable);
   const {
     variables = [],
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
     renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
     placeholderUrl = DEFAULT_PLACEHOLDER_URL
   } = useMailyContext();
-  const autoCompleteOptions = (0, import_react12.useMemo)(() => {
+  const autoCompleteOptions = (0, import_react13.useMemo)(() => {
     const withoutTrigger = value.replace(
       new RegExp(variableTriggerCharacter, "g"),
       ""
@@ -3039,8 +3175,8 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "button",
       {
         onClick: () => {
@@ -3061,7 +3197,7 @@ function ButtonLabelInput(props) {
         })
       }
     ),
-    isEditing && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       InputAutocomplete,
       {
         value,
@@ -3087,8 +3223,8 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-var import_react16 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -3108,7 +3244,7 @@ function ButtonView(props) {
     paddingLeft
   } = node.attrs;
   const { renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION } = useMailyContext();
-  const sizes = (0, import_react16.useMemo)(
+  const sizes = (0, import_react17.useMemo)(
     () => ({
       small: {
         paddingX: 24,
@@ -3125,14 +3261,14 @@ function ButtonView(props) {
     }),
     []
   );
-  const size = (0, import_react16.useMemo)(() => {
+  const size = (0, import_react17.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_runtime30.jsx)(
-    import_react15.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react16.NodeViewWrapper,
     {
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
@@ -3140,8 +3276,8 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           {
             className: cn(
@@ -3184,7 +3320,7 @@ function ButtonView(props) {
             }) : text2
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           PopoverContent,
           {
             align: "end",
@@ -3193,8 +3329,8 @@ function ButtonView(props) {
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 ButtonLabelInput,
                 {
                   value: text2,
@@ -3208,9 +3344,9 @@ function ButtonView(props) {
                   editor
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   Select,
                   {
                     label: "Border Radius",
@@ -3228,7 +3364,7 @@ function ButtonView(props) {
                     className: "mly-capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   Select,
                   {
                     label: "Style",
@@ -3246,7 +3382,7 @@ function ButtonView(props) {
                     className: "mly-capitalize"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   Select,
                   {
                     label: "Size",
@@ -3269,9 +3405,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   AlignmentSwitch,
                   {
                     alignment,
@@ -3282,7 +3418,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   LinkInputPopover,
                   {
                     defaultValue: externalLink || "",
@@ -3298,9 +3434,9 @@ function ButtonView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-flex mly-space-x-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   BackgroundColorPickerPopup,
                   {
                     variant,
@@ -3312,7 +3448,7 @@ function ButtonView(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   TextColorPickerPopup,
                   {
                     color: textColor,
@@ -3323,7 +3459,20 @@ function ButtonView(props) {
                     }
                   }
                 )
-              ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                ShowPopover,
+                {
+                  showIfKey,
+                  onShowIfKeyValueChange: (value) => {
+                    updateAttributes2({
+                      showIfKey: value
+                    });
+                  },
+                  editor
+                }
+              )
             ] }) })
           }
         )
@@ -3333,20 +3482,20 @@ function ButtonView(props) {
 }
 function BackgroundColorPickerPopup(props) {
   const { color, onChange, variant } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     ColorPicker,
     {
       color,
       onColorChange: onChange,
       tooltip: "Background Color",
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         BaseButton,
         {
           variant: "ghost",
           size: "sm",
           type: "button",
           className: "mly-size-7",
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "div",
             {
               className: "mly-h-4 mly-w-4 mly-shrink-0 mly-rounded-full mly-shadow",
@@ -3365,16 +3514,16 @@ function BackgroundColorPickerPopup(props) {
 }
 function TextColorPickerPopup(props) {
   const { color, onChange } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     BaseButton,
     {
       variant: "ghost",
       size: "sm",
       type: "button",
       className: "mly-size-7",
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
             className: "mly-h-[2px] mly-w-3 mly-shrink-0 mly-rounded-md mly-shadow",
@@ -3613,7 +3762,7 @@ var ButtonExtension = import_core10.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react17.ReactNodeViewRenderer)(ButtonView, {
+    return (0, import_react18.ReactNodeViewRenderer)(ButtonView, {
       contentDOMElementTag: "div",
       className: "mly-relative"
     });
@@ -3622,21 +3771,21 @@ var ButtonExtension = import_core10.Node.create({
 
 // src/editor/nodes/logo/logo.ts
 var import_extension_image = __toESM(require("@tiptap/extension-image"));
-var import_react24 = require("@tiptap/react");
+var import_react25 = require("@tiptap/react");
 
 // src/editor/nodes/logo/logo-view.tsx
-var import_react21 = require("@tiptap/react");
-var import_react22 = require("react");
+var import_react22 = require("@tiptap/react");
 var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/editor/utils/use-event.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var useEvent = (handler) => {
-  const handlerRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useLayoutEffect)(() => {
+  const handlerRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useLayoutEffect)(() => {
     handlerRef.current = handler;
   }, [handler]);
-  return (0, import_react18.useCallback)((...args) => {
+  return (0, import_react19.useCallback)((...args) => {
     if (handlerRef.current === null) {
       throw new Error("Handler is not assigned");
     }
@@ -3645,18 +3794,18 @@ var useEvent = (handler) => {
 };
 
 // src/editor/nodes/image/image-view.tsx
-var import_react19 = require("@tiptap/react");
-var import_lucide_react15 = require("lucide-react");
-var import_react20 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react20 = require("@tiptap/react");
+var import_lucide_react16 = require("lucide-react");
+var import_react21 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var MIN_WIDTH = 20;
 var MAX_WIDTH = 600;
 function ImageView(props) {
   const { node, updateAttributes: updateAttributes2, selected, editor } = props;
-  const [status, setStatus] = (0, import_react20.useState)("idle");
-  const wrapperRef = (0, import_react20.useRef)(null);
-  const imgRef = (0, import_react20.useRef)(null);
-  const [resizingStyle, setResizingStyle] = (0, import_react20.useState)();
+  const [status, setStatus] = (0, import_react21.useState)("idle");
+  const wrapperRef = (0, import_react21.useRef)(null);
+  const imgRef = (0, import_react21.useRef)(null);
+  const [resizingStyle, setResizingStyle] = (0, import_react21.useState)();
   const handleMouseDown = useEvent(
     (event) => {
       const imageParent = document.querySelector(
@@ -3699,7 +3848,7 @@ function ImageView(props) {
     }
   );
   function dragCornerButton(direction) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         role: "button",
@@ -3730,7 +3879,7 @@ function ImageView(props) {
     "showIfKey"
   ]);
   const hasImageSrc = !!attrs.src;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!src) {
       return;
     }
@@ -3764,8 +3913,8 @@ function ImageView(props) {
       img.onerror = null;
     };
   }, [src]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    import_react19.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_react20.NodeViewWrapper,
     {
       as: "div",
       draggable: editor.isEditable,
@@ -3786,12 +3935,12 @@ function ImageView(props) {
       }[alignment] || {}),
       ref: wrapperRef,
       children: [
-        !hasImageSrc && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageStatusLabel, { status: "idle", minHeight: height }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        !hasImageSrc && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "idle", minHeight: height }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "img",
             __spreadProps(__spreadValues({}, attrs), {
               ref: imgRef,
@@ -3802,13 +3951,13 @@ function ImageView(props) {
               draggable: editor.isEditable
             })
           ),
-          selected && editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          selected && editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.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_runtime31.jsx)(
+            ].map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "div",
               {
                 className: "mly-bg-rose-500",
@@ -3830,7 +3979,7 @@ function ImageView(props) {
 }
 function ImageStatusLabel(props) {
   const { status, minHeight } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cn(
@@ -3844,21 +3993,21 @@ function ImageStatusLabel(props) {
         minHeight
       } : {}),
       children: [
-        status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.ImageOffIcon, { className: "mly-size-4 mly-stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "No image selected" })
+        status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ImageOffIcon, { className: "mly-size-4 mly-stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: "No image selected" })
         ] }),
-        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Loader2, { className: "mly-size-4 mly-animate-spin mly-stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Loading image..." })
+        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Loader2, { className: "mly-size-4 mly-animate-spin mly-stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: "Loading image..." })
         ] }),
-        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Ban, { className: "mly-size-4 mly-stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Error loading image" })
+        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Ban, { className: "mly-size-4 mly-stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: "Error loading image" })
         ] }),
-        status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.BracesIcon, { className: "mly-size-4 mly-stroke-[2.5]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Variable Image URL" })
+        status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.BracesIcon, { className: "mly-size-4 mly-stroke-[2.5]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: "Variable Image URL" })
         ] })
       ]
     }
@@ -3866,10 +4015,10 @@ function ImageStatusLabel(props) {
 }
 
 // src/editor/nodes/logo/logo-view.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function LogoView(props) {
   const { node, editor } = props;
-  const [status, setStatus] = (0, import_react23.useState)("idle");
+  const [status, setStatus] = (0, import_react24.useState)("idle");
   let {
     alignment = "center",
     src: logoSrc,
@@ -3877,7 +4026,7 @@ function LogoView(props) {
     size = "sm"
   } = node.attrs || {};
   const hasImageSrc = !!logoSrc;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!logoSrc) {
       return;
     }
@@ -3897,8 +4046,8 @@ function LogoView(props) {
     };
   }, [logoSrc]);
   const logoSize = logoSizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_react21.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    import_react22.NodeViewWrapper,
     {
       as: "div",
       draggable: editor.isEditable,
@@ -3911,11 +4060,11 @@ function LogoView(props) {
         display: "block"
       },
       children: [
-        !hasImageSrc && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "idle", minHeight: logoSize }),
-        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
-        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
-        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
-        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        !hasImageSrc && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImageStatusLabel, { status: "idle", minHeight: logoSize }),
+        hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
+        hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
+        hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
+        hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "img",
           {
             src: logoSrc,
@@ -4035,7 +4184,7 @@ var LogoExtension = import_extension_image.default.extend({
     ];
   },
   addNodeView() {
-    return (0, import_react24.ReactNodeViewRenderer)(LogoView, {
+    return (0, import_react25.ReactNodeViewRenderer)(LogoView, {
       className: "mly-relative"
     });
   }
@@ -4043,7 +4192,7 @@ var LogoExtension = import_extension_image.default.extend({
 
 // src/editor/nodes/image/image.ts
 var import_extension_image2 = __toESM(require("@tiptap/extension-image"));
-var import_react25 = require("@tiptap/react");
+var import_react26 = require("@tiptap/react");
 var ImageExtension = import_extension_image2.default.extend({
   addAttributes() {
     var _a;
@@ -4135,7 +4284,7 @@ var ImageExtension = import_extension_image2.default.extend({
     });
   },
   addNodeView() {
-    return (0, import_react25.ReactNodeViewRenderer)(ImageView, {
+    return (0, import_react26.ReactNodeViewRenderer)(ImageView, {
       className: "mly-relative"
     });
   }
@@ -4212,24 +4361,24 @@ var ParagraphExtension = import_extension_paragraph.default.extend({
 
 // src/editor/nodes/repeat/repeat.ts
 var import_core11 = require("@tiptap/core");
-var import_react27 = require("@tiptap/react");
+var import_react28 = require("@tiptap/react");
 
 // src/editor/nodes/repeat/repeat-view.tsx
-var import_react26 = require("@tiptap/react");
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react27 = require("@tiptap/react");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function RepeatView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_react26.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    import_react27.NodeViewWrapper,
     {
       "data-type": "repeat",
       draggable: editor.isEditable,
       "data-drag-handle": editor.isEditable,
       className: "mly-relative",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react26.NodeViewContent, { className: "is-editable" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react27.NodeViewContent, { className: "is-editable" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "div",
           {
             role: "button",
@@ -4240,8 +4389,8 @@ function RepeatView(props) {
               editor.commands.setNodeSelection(getPos());
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Repeat2, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.Repeat2, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
             ]
           }
         )
@@ -4325,7 +4474,7 @@ var RepeatExtension = import_core11.Node.create({
     };
   },
   addNodeView() {
-    return (0, import_react27.ReactNodeViewRenderer)(RepeatView, {
+    return (0, import_react28.ReactNodeViewRenderer)(RepeatView, {
       contentDOMElementTag: "div",
       className: "mly-relative"
     });
@@ -4464,16 +4613,16 @@ var SlashCommandExtension = import_core13.Extension.create({
 });
 
 // src/editor/extensions/slash-command/slash-command-view.tsx
-var import_react28 = require("@tiptap/react");
-var import_react29 = require("react");
+var import_react29 = require("@tiptap/react");
+var import_react30 = require("react");
 var import_tippy = __toESM(require("tippy.js"));
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, ref) {
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var CommandList = (0, import_react30.forwardRef)(function CommandList2(props, ref) {
   const { items: groups, command, editor } = props;
-  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react29.useState)(0);
-  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react29.useState)(0);
-  const selectItem = (0, import_react29.useCallback)(
+  const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react30.useState)(0);
+  const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react30.useState)(0);
+  const selectItem = (0, import_react30.useCallback)(
     (groupIndex, commandIndex) => {
       const item = groups[groupIndex].commands[commandIndex];
       if (!item) {
@@ -4483,7 +4632,7 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
     },
     [command]
   );
-  (0, import_react29.useImperativeHandle)(ref, () => ({
+  (0, import_react30.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       var _a, _b;
       const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
@@ -4535,13 +4684,13 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
       }
     }
   }));
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setSelectedGroupIndex(0);
     setSelectedCommandIndex(0);
   }, [groups]);
-  const commandListContainer = (0, import_react29.useRef)(null);
-  const activeCommandRef = (0, import_react29.useRef)(null);
-  (0, import_react29.useLayoutEffect)(() => {
+  const commandListContainer = (0, import_react30.useRef)(null);
+  const activeCommandRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useLayoutEffect)(() => {
     const container = commandListContainer == null ? void 0 : commandListContainer.current;
     const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
     if (!container || !activeCommandContainer) {
@@ -4555,15 +4704,15 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
     commandListContainer,
     activeCommandRef
   ]);
-  return groups.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)(
+  return groups.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)(
       "div",
       {
         id: "slash-command",
         ref: commandListContainer,
         className: "mly-no-scrollbar mly-h-auto mly-max-h-[330px] mly-overflow-y-auto mly-scroll-smooth",
-        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react29.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "span",
             {
               className: cn(
@@ -4573,26 +4722,26 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
               children: group.title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
             var _a;
             const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
             const isSubCommand = "commands" in item;
             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_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsxs)("div", { className: "mly-grow", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mly-font-medium", children: item.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
+            let value = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsxs)("div", { className: "mly-grow", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mly-font-medium", children: item.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
               ] }),
-              isSubCommand && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
+              isSubCommand && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react18.ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
             ] });
             if (renderFunctionValue !== null && renderFunctionValue !== true) {
               value = renderFunctionValue;
             }
             const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && isActive;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { open: shouldOpenTooltip, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { open: shouldOpenTooltip, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "button",
                 {
                   className: cn(
@@ -4605,14 +4754,14 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
                   children: value
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)(
+                  children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)(
                       "img",
                       {
                         src: item == null ? void 0 : item.preview,
@@ -4620,7 +4769,7 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
                         className: "mly-absolute mly-inset-0 mly-h-full mly-w-full mly-object-cover"
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
                   ] })
                 }
               )
@@ -4629,16 +4778,16 @@ var CommandList = (0, import_react29.forwardRef)(function CommandList2(props, re
         ] }, groupIndex))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly-flex mly-items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime35.jsx)("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mly-flex mly-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.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_runtime34.jsx)("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime35.jsx)("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.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"
       ] })
@@ -4727,7 +4876,7 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react28.ReactRenderer(CommandList, {
+          component = new import_react29.ReactRenderer(CommandList, {
             props,
             editor: props.editor
           });
@@ -4769,7 +4918,7 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
 // src/editor/nodes/variable/variable.ts
 var import_core14 = require("@tiptap/core");
 var import_state3 = require("@tiptap/pm/state");
-var import_react30 = require("@tiptap/react");
+var import_react31 = require("@tiptap/react");
 var import_suggestion2 = __toESM(require("@tiptap/suggestion"));
 var VariablePluginKey = new import_state3.PluginKey("variable");
 var VariableExtension = import_core14.Node.create({
@@ -4927,7 +5076,7 @@ var VariableExtension = import_core14.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react30.ReactNodeViewRenderer)(VariableView, {
+    return (0, import_react31.ReactNodeViewRenderer)(VariableView, {
       className: "mly-relative mly-inline-block",
       as: "div"
     });
@@ -4935,14 +5084,14 @@ var VariableExtension = import_core14.Node.create({
 });
 
 // src/editor/nodes/variable/variable-suggestions.tsx
-var import_react31 = require("@tiptap/react");
-var import_react32 = require("react");
+var import_react32 = require("@tiptap/react");
+var import_react33 = require("react");
 var import_tippy2 = __toESM(require("tippy.js"));
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var VariableList = (0, import_react32.forwardRef)((props, ref) => {
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var VariableList = (0, import_react33.forwardRef)((props, ref) => {
   const { items = [] } = props;
-  const popoverRef = (0, import_react32.useRef)(null);
-  (0, import_react32.useImperativeHandle)(ref, () => ({
+  const popoverRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useImperativeHandle)(ref, () => ({
     onKeyDown: ({ event }) => {
       if (!popoverRef.current) {
         return false;
@@ -4965,7 +5114,7 @@ var VariableList = (0, import_react32.forwardRef)((props, ref) => {
       return false;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     VariablePopover,
     {
       items,
@@ -4996,7 +5145,7 @@ function getVariableSuggestions(variables = DEFAULT_VARIABLES, char = DEFAULT_VA
       let popup = null;
       return {
         onStart: (props) => {
-          component = new import_react31.ReactRenderer(variableListComponent, {
+          component = new import_react32.ReactRenderer(variableListComponent, {
             props,
             editor: props.editor
           });