@daisychainapp/maily-to-core 0.0.22 → 0.0.24

package/dist/index.mjs

@@ -1203,10 +1203,12 @@ var DefaultRenderVariable = (props) => {
 
 // src/editor/provider.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
+var DEFAULT_PLACEHOLDER_URL = "maily.to/";
 var DEFAULT_VARIABLE_TRIGGER_CHAR = "@";
 var DEFAULT_VARIABLES = [];
 var DEFAULT_RENDER_VARIABLE_FUNCTION = DefaultRenderVariable;
 var MailyContext = createContext({
+  placeholderUrl: DEFAULT_PLACEHOLDER_URL,
   variableTriggerCharacter: DEFAULT_VARIABLE_TRIGGER_CHAR,
   variables: DEFAULT_VARIABLES,
   blocks: DEFAULT_SLASH_COMMANDS,
@@ -2639,7 +2641,8 @@ function LinkInputPopover(props) {
   const {
     variables = [],
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
-    renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION
+    renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
+    placeholderUrl = DEFAULT_PLACEHOLDER_URL
   } = useMailyContext();
   const autoCompleteOptions = useMemo5(() => {
     const withoutTrigger = defaultUrlWithoutProtocol.replace(
@@ -2759,7 +2762,7 @@ function LinkInputPopover(props) {
                     },
                     autoCompleteOptions,
                     ref: linkInputRef,
-                    placeholder: "maily.to/",
+                    placeholder: placeholderUrl,
                     className: "-mly-ms-px mly-block mly-h-8 mly-w-52 mly-rounded-lg mly-rounded-s-none mly-border mly-border-gray-300 mly-px-2 mly-py-1.5 mly-pr-6 mly-text-sm mly-shadow-sm mly-outline-none placeholder:mly-text-gray-400",
                     triggerChar: variableTriggerCharacter,
                     onSelectOption: (value) => {
@@ -3667,20 +3670,7 @@ function ImageBubbleMenu(props) {
               }
             )
           ] })
-        ] }),
-        /* @__PURE__ */ jsx30(Divider, {}),
-        /* @__PURE__ */ jsx30(
-          ShowPopover,
-          {
-            showIfKey: state.currentShowIfKey,
-            onShowIfKeyValueChange: (value) => {
-              editor == null ? void 0 : editor.chain().updateAttributes(state.isLogoActive ? "logo" : "image", {
-                showIfKey: value
-              }).run();
-            },
-            editor
-          }
-        )
+        ] })
       ] })
     })
   );
@@ -4129,19 +4119,6 @@ function SectionBubbleMenu(props) {
             }
           }
         ),
-        /* @__PURE__ */ jsx35(Divider, {}),
-        /* @__PURE__ */ jsx35(
-          ShowPopover,
-          {
-            showIfKey: state.currentShowIfKey,
-            onShowIfKeyValueChange: (value) => {
-              editor.commands.updateSection({
-                showIfKey: value
-              });
-            },
-            editor
-          }
-        ),
         state.isColumnsActive && /* @__PURE__ */ jsxs18(Fragment6, { children: [
           /* @__PURE__ */ jsx35(Divider, {}),
           /* @__PURE__ */ jsxs18(Popover, { children: [
@@ -4280,7 +4257,7 @@ var useSpacerState = (editor) => {
 };
 
 // src/editor/components/spacer-menu/spacer-bubble-menu.tsx
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function SpacerBubbleMenu(props) {
   const { editor, appendTo } = props;
   if (!editor) {
@@ -4305,28 +4282,15 @@ function SpacerBubbleMenu(props) {
     BubbleMenu5,
     __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__ */ jsxs19(TooltipProvider, { children: [
-        items.map((item, index) => /* @__PURE__ */ jsx36(
-          BubbleMenuButton,
-          __spreadValues({
-            className: "!mly-h-7 mly-w-7 mly-shrink-0 mly-p-0",
-            iconClassName: "mly-w-3 mly-h-3",
-            nameClassName: "mly-text-xs"
-          }, item),
-          index
-        )),
-        /* @__PURE__ */ jsx36(Divider, {}),
-        /* @__PURE__ */ jsx36(
-          ShowPopover,
-          {
-            showIfKey: state.currentShowIfKey,
-            onShowIfKeyValueChange: (value) => {
-              editor.commands.setSpacerShowIfKey(value);
-            },
-            editor
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsx36(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ jsx36(
+        BubbleMenuButton,
+        __spreadValues({
+          className: "!mly-h-7 mly-w-7 mly-shrink-0 mly-p-0",
+          iconClassName: "mly-w-3 mly-h-3",
+          nameClassName: "mly-text-xs"
+        }, item),
+        index
+      )) })
     })
   );
 }
@@ -4449,7 +4413,7 @@ var Textarea = React6.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/editor/nodes/link-card.tsx
-import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
 function LinkCardComponent(props) {
   const { title, description, link, linkTitle, image: image2, badgeText, subTitle } = props.node.attrs;
   const { getPos, editor } = props;
@@ -4459,7 +4423,7 @@ function LinkCardComponent(props) {
       className: `react-component ${props.selected && "ProseMirror-selectednode"}`,
       draggable: "true",
       "data-drag-handle": "",
-      children: /* @__PURE__ */ jsxs20(Popover, { open: props.selected, children: [
+      children: /* @__PURE__ */ jsxs19(Popover, { open: props.selected, children: [
         /* @__PURE__ */ jsx39(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(
           "div",
           {
@@ -4469,7 +4433,7 @@ function LinkCardComponent(props) {
               const pos = getPos();
               editor.commands.setNodeSelection(pos);
             },
-            children: /* @__PURE__ */ jsxs20("div", { className: "mly-no-prose mly-flex mly-flex-col mly-rounded-lg mly-border mly-border-gray-300", children: [
+            children: /* @__PURE__ */ jsxs19("div", { className: "mly-no-prose mly-flex mly-flex-col mly-rounded-lg mly-border mly-border-gray-300", children: [
               image2 && /* @__PURE__ */ jsx39("div", { className: "mly-relative mly-mb-1.5 mly-w-full mly-shrink-0", children: /* @__PURE__ */ jsx39(
                 "img",
                 {
@@ -4478,14 +4442,14 @@ function LinkCardComponent(props) {
                   className: "mly-no-prose !mly-mb-0 mly-h-full mly-w-full mly-rounded-t-lg"
                 }
               ) }),
-              /* @__PURE__ */ jsx39("div", { className: "mly-flex mly-items-stretch mly-p-3", children: /* @__PURE__ */ jsxs20("div", { className: cn("mly-flex mly-flex-col"), children: [
-                /* @__PURE__ */ jsxs20("div", { className: "!mly-mb-1.5 mly-flex mly-items-center mly-gap-1.5", children: [
+              /* @__PURE__ */ jsx39("div", { className: "mly-flex mly-items-stretch mly-p-3", children: /* @__PURE__ */ jsxs19("div", { className: cn("mly-flex mly-flex-col"), children: [
+                /* @__PURE__ */ jsxs19("div", { className: "!mly-mb-1.5 mly-flex mly-items-center mly-gap-1.5", children: [
                   /* @__PURE__ */ jsx39("h2", { className: "!mly-mb-0 !mly-text-lg mly-font-semibold", children: title }),
                   badgeText && /* @__PURE__ */ jsx39("span", { className: "!mly-font-base text-xs mly-rounded-md mly-bg-yellow-200 mly-px-2 mly-py-1 mly-font-semibold mly-leading-none", children: badgeText }),
                   " ",
                   subTitle && !badgeText && /* @__PURE__ */ jsx39("span", { className: "!mly-font-base text-xs mly-font-regular mly-rounded-md mly-leading-none mly-text-gray-400", children: subTitle })
                 ] }),
-                /* @__PURE__ */ jsxs20("p", { className: "!mly-my-0 !mly-text-base mly-text-gray-500", children: [
+                /* @__PURE__ */ jsxs19("p", { className: "!mly-my-0 !mly-text-base mly-text-gray-500", children: [
                   description,
                   " ",
                   linkTitle ? /* @__PURE__ */ jsx39("a", { href: link, className: "mly-font-semibold", children: linkTitle }) : null
@@ -4494,7 +4458,7 @@ function LinkCardComponent(props) {
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsxs19(
           PopoverContent,
           {
             align: "end",
@@ -4503,7 +4467,7 @@ function LinkCardComponent(props) {
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
             children: [
-              /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+              /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                 /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Image" }),
                 /* @__PURE__ */ jsx39(
                   Input,
@@ -4519,7 +4483,7 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+              /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                 /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Title" }),
                 /* @__PURE__ */ jsx39(
                   Input,
@@ -4534,7 +4498,7 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+              /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                 /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Description" }),
                 /* @__PURE__ */ jsx39(
                   Textarea,
@@ -4549,8 +4513,8 @@ function LinkCardComponent(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs20("div", { className: "mly-grid mly-grid-cols-2 mly-gap-2", children: [
-                /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+              /* @__PURE__ */ jsxs19("div", { className: "mly-grid mly-grid-cols-2 mly-gap-2", children: [
+                /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                   /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Link Title" }),
                   /* @__PURE__ */ jsx39(
                     Input,
@@ -4565,7 +4529,7 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+                /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                   /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Link" }),
                   /* @__PURE__ */ jsx39(
                     Input,
@@ -4581,8 +4545,8 @@ function LinkCardComponent(props) {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs20("div", { className: "mly-grid mly-grid-cols-2 mly-gap-2", children: [
-                /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+              /* @__PURE__ */ jsxs19("div", { className: "mly-grid mly-grid-cols-2 mly-gap-2", children: [
+                /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                   /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Badge Text" }),
                   /* @__PURE__ */ jsx39(
                     Input,
@@ -4597,7 +4561,7 @@ function LinkCardComponent(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs20("label", { className: "mly-w-full mly-space-y-1", children: [
+                /* @__PURE__ */ jsxs19("label", { className: "mly-w-full mly-space-y-1", children: [
                   /* @__PURE__ */ jsx39("span", { className: "mly-text-xs mly-font-normal mly-text-slate-400", children: "Sub Title" }),
                   /* @__PURE__ */ jsx39(
                     Input,
@@ -4703,7 +4667,7 @@ import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
 import { useMemo as useMemo6 } from "react";
 import { useState as useState10 } from "react";
 import { useRef as useRef9 } from "react";
-import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
 function ButtonLabelInput(props) {
   const { value, onValueChange, isVariable, editor } = props;
   const linkInputRef = useRef9(null);
@@ -4711,7 +4675,8 @@ function ButtonLabelInput(props) {
   const {
     variables = [],
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
-    renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION
+    renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
+    placeholderUrl = DEFAULT_PLACEHOLDER_URL
   } = useMailyContext();
   const autoCompleteOptions = useMemo6(() => {
     const withoutTrigger = value.replace(
@@ -4724,7 +4689,7 @@ function ButtonLabelInput(props) {
       editor
     }).map((variable) => variable.name);
   }, [variables, value, editor]);
-  return /* @__PURE__ */ jsxs21("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
     !isEditing && /* @__PURE__ */ jsx40(
       "button",
       {
@@ -4755,7 +4720,7 @@ function ButtonLabelInput(props) {
         },
         autoCompleteOptions,
         ref: linkInputRef,
-        placeholder: "maily.to/",
+        placeholder: placeholderUrl,
         className: "mly-h-7 mly-w-40 mly-rounded-md mly-px-2 mly-pr-6 mly-text-sm mly-text-midnight-gray hover:mly-bg-soft-gray focus:mly-bg-soft-gray focus:mly-outline-none",
         triggerChar: variableTriggerCharacter,
         onSelectOption: (value2) => {
@@ -4772,7 +4737,7 @@ function ButtonLabelInput(props) {
 }
 
 // src/editor/nodes/button/button-view.tsx
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 function ButtonView(props) {
   const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
   const {
@@ -4797,7 +4762,7 @@ function ButtonView(props) {
       style: {
         textAlign: alignment
       },
-      children: /* @__PURE__ */ jsxs22(Popover, { open: props.selected, children: [
+      children: /* @__PURE__ */ jsxs21(Popover, { open: props.selected, children: [
         /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(
           "button",
           {
@@ -4844,7 +4809,7 @@ function ButtonView(props) {
             sideOffset: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
             onCloseAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ jsx41(TooltipProvider, { children: /* @__PURE__ */ jsxs22("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
+            children: /* @__PURE__ */ jsx41(TooltipProvider, { children: /* @__PURE__ */ jsxs21("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
               /* @__PURE__ */ jsx41(
                 ButtonLabelInput,
                 {
@@ -4860,7 +4825,7 @@ function ButtonView(props) {
                 }
               ),
               /* @__PURE__ */ jsx41(Divider, {}),
-              /* @__PURE__ */ jsxs22("div", { className: "mly-flex mly-space-x-0.5", children: [
+              /* @__PURE__ */ jsxs21("div", { className: "mly-flex mly-space-x-0.5", children: [
                 /* @__PURE__ */ jsx41(
                   Select,
                   {
@@ -4899,7 +4864,7 @@ function ButtonView(props) {
                 )
               ] }),
               /* @__PURE__ */ jsx41(Divider, {}),
-              /* @__PURE__ */ jsxs22("div", { className: "mly-flex mly-space-x-0.5", children: [
+              /* @__PURE__ */ jsxs21("div", { className: "mly-flex mly-space-x-0.5", children: [
                 /* @__PURE__ */ jsx41(
                   AlignmentSwitch,
                   {
@@ -4928,7 +4893,7 @@ function ButtonView(props) {
                 )
               ] }),
               /* @__PURE__ */ jsx41(Divider, {}),
-              /* @__PURE__ */ jsxs22("div", { className: "mly-flex mly-space-x-0.5", children: [
+              /* @__PURE__ */ jsxs21("div", { className: "mly-flex mly-space-x-0.5", children: [
                 /* @__PURE__ */ jsx41(
                   BackgroundColorPickerPopup,
                   {
@@ -4952,20 +4917,7 @@ function ButtonView(props) {
                     }
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsx41(Divider, {}),
-              /* @__PURE__ */ jsx41(
-                ShowPopover,
-                {
-                  showIfKey,
-                  onShowIfKeyValueChange: (value) => {
-                    updateAttributes2({
-                      showIfKey: value
-                    });
-                  },
-                  editor
-                }
-              )
+              ] })
             ] }) })
           }
         )
@@ -5014,7 +4966,7 @@ function TextColorPickerPopup(props) {
       size: "sm",
       type: "button",
       className: "mly-size-7",
-      children: /* @__PURE__ */ jsxs22("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
+      children: /* @__PURE__ */ jsxs21("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
         /* @__PURE__ */ jsx41("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
         /* @__PURE__ */ jsx41(
           "div",
@@ -5597,10 +5549,10 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer6 } from "@tiptap/react";
 // src/editor/nodes/for/for-view.tsx
 import { NodeViewWrapper as NodeViewWrapper6, NodeViewContent } from "@tiptap/react";
 import { Repeat2 as Repeat22 } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 function ForView(props) {
   const { editor, getPos } = props;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     NodeViewWrapper6,
     {
       draggable: "true",
@@ -5609,7 +5561,7 @@ function ForView(props) {
       className: "mly-relative",
       children: [
         /* @__PURE__ */ jsx42(NodeViewContent, { className: "is-editable" }),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs22(
           "div",
           {
             role: "button",
@@ -5715,7 +5667,7 @@ var ForExtension = Node9.create({
 // src/editor/components/text-menu/turn-into-block.tsx
 import { ChevronDownIcon as ChevronDownIcon3, PilcrowIcon } from "lucide-react";
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 var isOption = (option) => option.type === "option";
 var isCategory = (option) => option.type === "category";
 function TurnIntoBlock(props) {
@@ -5725,9 +5677,9 @@ function TurnIntoBlock(props) {
     [options]
   );
   const { icon: ActiveIcon = PilcrowIcon } = activeItem || {};
-  return /* @__PURE__ */ jsxs24(Popover, { children: [
-    /* @__PURE__ */ jsxs24(Tooltip, { children: [
-      /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(Popover, { children: [
+    /* @__PURE__ */ jsxs23(Tooltip, { children: [
+      /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
         PopoverTrigger,
         {
           className: cn(
@@ -5750,7 +5702,7 @@ 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__ */ jsxs24(
+            return /* @__PURE__ */ jsxs23(
               BaseButton,
               {
                 onClick: option.onClick,
@@ -5877,7 +5829,7 @@ function useTurnIntoBlockOptions(editor) {
 }
 
 // src/editor/components/text-menu/text-bubble-menu.tsx
-import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function TextBubbleMenu(props) {
   var _a, _b, _c, _d;
   const { editor, appendTo } = props;
@@ -5973,7 +5925,7 @@ function TextBubbleMenu(props) {
     BubbleMenu6,
     __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__ */ jsxs25(TooltipProvider, { children: [
+      children: /* @__PURE__ */ jsxs24(TooltipProvider, { children: [
         /* @__PURE__ */ jsx44(TurnIntoBlock, { options: turnIntoBlockOptions }),
         /* @__PURE__ */ jsx44(Divider, { className: "mly-mx-0" }),
         items.map((item, index) => /* @__PURE__ */ jsx44(BubbleMenuButton, __spreadValues({}, item), index)),
@@ -5986,7 +5938,7 @@ function TextBubbleMenu(props) {
             }
           }
         ),
-        !state.isListActive && /* @__PURE__ */ jsxs25(Fragment7, { children: [
+        !state.isListActive && /* @__PURE__ */ jsxs24(Fragment7, { children: [
           /* @__PURE__ */ jsx44(
             BubbleMenuButton,
             {
@@ -6046,7 +5998,7 @@ function TextBubbleMenu(props) {
                 size: "sm",
                 type: "button",
                 className: "!mly-h-7 mly-w-7 mly-shrink-0 mly-p-0",
-                children: /* @__PURE__ */ jsxs25("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
+                children: /* @__PURE__ */ jsxs24("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
                   /* @__PURE__ */ jsx44("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-slate-700", children: "A" }),
                   /* @__PURE__ */ jsx44(
                     "div",
@@ -6289,7 +6241,7 @@ import {
   useState as useState12
 } from "react";
 import tippy3 from "tippy.js";
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 function CommandList(props) {
   const { items, command, editor } = props;
   const [selectedIndex, setSelectedIndex] = useState12(0);
@@ -6339,7 +6291,7 @@ function CommandList(props) {
       updateScrollView(container, item);
     }
   }, [selectedIndex]);
-  return items.length > 0 ? /* @__PURE__ */ jsxs26("div", { className: "mly-z-50 mly-w-72 mly-rounded-md mly-border mly-border-gray-200 mly-bg-white mly-shadow-md mly-transition-all", children: [
+  return items.length > 0 ? /* @__PURE__ */ jsxs25("div", { className: "mly-z-50 mly-w-72 mly-rounded-md mly-border mly-border-gray-200 mly-bg-white mly-shadow-md mly-transition-all", children: [
     /* @__PURE__ */ jsx46(
       "div",
       {
@@ -6347,7 +6299,7 @@ function CommandList(props) {
         ref: commandListContainer,
         className: "mly-no-scrollbar mly-h-auto mly-max-h-[330px] mly-overflow-y-auto mly-scroll-smooth mly-p-1",
         children: items.map((item, index) => {
-          return /* @__PURE__ */ jsxs26(
+          return /* @__PURE__ */ jsxs25(
             "button",
             {
               className: cn(
@@ -6358,7 +6310,7 @@ function CommandList(props) {
               type: "button",
               children: [
                 /* @__PURE__ */ jsx46("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
-                /* @__PURE__ */ jsxs26("div", { children: [
+                /* @__PURE__ */ jsxs25("div", { children: [
                   /* @__PURE__ */ jsx46("p", { className: "mly-font-medium", children: item.title }),
                   /* @__PURE__ */ jsx46("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
                 ] })
@@ -6369,15 +6321,15 @@ function CommandList(props) {
         })
       }
     ),
-    /* @__PURE__ */ jsx46("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ jsxs26("div", { className: "mly-flex mly-items-center", children: [
-      /* @__PURE__ */ jsxs26("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+    /* @__PURE__ */ jsx46("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ jsxs25("div", { className: "mly-flex mly-items-center", children: [
+      /* @__PURE__ */ jsxs25("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
         /* @__PURE__ */ jsx46("kbd", { className: "mly-rounded mly-border mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
         /* @__PURE__ */ jsx46("kbd", { className: "mly-ml-1 mly-rounded mly-border mly-p-1 mly-px-2 mly-font-medium", children: "\u2193" }),
         " ",
         "to navigate"
       ] }),
       /* @__PURE__ */ jsx46("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
-      /* @__PURE__ */ jsxs26("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
+      /* @__PURE__ */ jsxs25("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
         /* @__PURE__ */ jsx46("kbd", { className: "mly-rounded mly-border mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
         " ",
         "to select"
@@ -6565,7 +6517,7 @@ function extensions(props) {
 }
 
 // src/editor/index.tsx
-import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 function Editor9(props) {
   const {
     config: {
@@ -6585,7 +6537,8 @@ function Editor9(props) {
     variables = DEFAULT_VARIABLES,
     blocks = DEFAULT_SLASH_COMMANDS,
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
-    renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION
+    renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
+    placeholderUrl = DEFAULT_PLACEHOLDER_URL
   } = props;
   let formattedContent = null;
   if (contentJson) {
@@ -6652,14 +6605,15 @@ function Editor9(props) {
       blocks,
       variableTriggerCharacter,
       renderVariable,
-      children: /* @__PURE__ */ jsxs27(
+      placeholderUrl,
+      children: /* @__PURE__ */ jsxs26(
         "div",
         {
           className: cn("mly-editor mly-antialiased", wrapClassName),
           ref: menuContainerRef,
           children: [
             hasMenuBar && /* @__PURE__ */ jsx47(EditorMenuBar, { config: props.config, editor }),
-            /* @__PURE__ */ jsxs27(
+            /* @__PURE__ */ jsxs26(
               "div",
               {
                 className: cn(