@daisychainapp/maily-to-core 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2961,22 +2961,158 @@ function Select(props) {
2961
2961
  // src/editor/nodes/button/button-view.tsx
2962
2962
  import { NodeViewWrapper as NodeViewWrapper3 } from "@tiptap/react";
2963
2963
 
2964
- // src/editor/nodes/button/button-label-input.tsx
2965
- import { useMemo as useMemo3 } from "react";
2966
- import { useState as useState4 } from "react";
2967
- import { useRef as useRef4 } from "react";
2964
+ // src/editor/components/show-popover.tsx
2965
+ import { Eye, InfoIcon } from "lucide-react";
2966
+ import { memo, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
2968
2967
  import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
2968
+ function _ShowPopover(props) {
2969
+ const { showIfKey = "", onShowIfKeyValueChange, editor } = props;
2970
+ const { variables = [], renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION } = useMailyContext();
2971
+ const [isUpdatingKey, setIsUpdatingKey] = useState4(false);
2972
+ const inputRef = useRef4(null);
2973
+ const autoCompleteOptions = useMemo3(() => {
2974
+ return processVariables(variables, {
2975
+ query: showIfKey || "",
2976
+ from: "bubble-variable",
2977
+ editor
2978
+ }).map((variable) => variable.name);
2979
+ }, [variables, showIfKey, editor]);
2980
+ const isValidWhenKey = showIfKey || autoCompleteOptions.includes(showIfKey);
2981
+ return /* @__PURE__ */ jsxs13(
2982
+ Popover,
2983
+ {
2984
+ onOpenChange: (open) => {
2985
+ if (open) {
2986
+ return;
2987
+ }
2988
+ setIsUpdatingKey(false);
2989
+ },
2990
+ children: [
2991
+ /* @__PURE__ */ jsxs13(Tooltip, { children: [
2992
+ /* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx29(
2993
+ PopoverTrigger,
2994
+ {
2995
+ className: cn(
2996
+ "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",
2997
+ showIfKey && "mly-bg-rose-100 mly-text-rose-800 data-[state=open]:mly-bg-rose-100 hover:mly-bg-rose-100"
2998
+ ),
2999
+ children: /* @__PURE__ */ jsx29(Eye, { className: "mly-h-3 mly-w-3 mly-stroke-[2.5]" })
3000
+ }
3001
+ ) }),
3002
+ /* @__PURE__ */ jsx29(TooltipContent, { sideOffset: 8, children: "Show block conditionally" })
3003
+ ] }),
3004
+ /* @__PURE__ */ jsxs13(
3005
+ PopoverContent,
3006
+ {
3007
+ className: "mly-flex mly-w-max mly-rounded-lg !mly-p-0.5",
3008
+ side: "top",
3009
+ sideOffset: 8,
3010
+ align: "end",
3011
+ onOpenAutoFocus: (e) => {
3012
+ e.preventDefault();
3013
+ },
3014
+ onCloseAutoFocus: (e) => {
3015
+ e.preventDefault();
3016
+ },
3017
+ children: [
3018
+ /* @__PURE__ */ jsxs13("div", { className: "mly-flex mly-items-center mly-gap-1.5 mly-px-1.5 mly-text-sm mly-leading-none", children: [
3019
+ "Show if",
3020
+ /* @__PURE__ */ jsxs13(Tooltip, { children: [
3021
+ /* @__PURE__ */ jsx29(TooltipTrigger, { children: /* @__PURE__ */ jsx29(
3022
+ InfoIcon,
3023
+ {
3024
+ className: cn("mly-size-3 mly-stroke-[2.5] mly-text-gray-500")
3025
+ }
3026
+ ) }),
3027
+ /* @__PURE__ */ jsx29(
3028
+ TooltipContent,
3029
+ {
3030
+ sideOffset: 14,
3031
+ className: "mly-max-w-[285px]",
3032
+ align: "start",
3033
+ children: "Show the block if the selected variable is true."
3034
+ }
3035
+ )
3036
+ ] })
3037
+ ] }),
3038
+ !isUpdatingKey && /* @__PURE__ */ jsx29(
3039
+ "button",
3040
+ {
3041
+ onClick: () => {
3042
+ setIsUpdatingKey(true);
3043
+ setTimeout(() => {
3044
+ var _a;
3045
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
3046
+ }, 0);
3047
+ },
3048
+ children: renderVariable({
3049
+ variable: {
3050
+ name: showIfKey,
3051
+ valid: !!isValidWhenKey
3052
+ },
3053
+ fallback: "",
3054
+ from: "bubble-variable",
3055
+ editor
3056
+ })
3057
+ }
3058
+ ),
3059
+ isUpdatingKey && /* @__PURE__ */ jsx29(
3060
+ "form",
3061
+ {
3062
+ onSubmit: (e) => {
3063
+ e.preventDefault();
3064
+ setIsUpdatingKey(false);
3065
+ },
3066
+ onKeyDown: (e) => {
3067
+ if (e.key === "Escape") {
3068
+ setIsUpdatingKey(false);
3069
+ }
3070
+ },
3071
+ children: /* @__PURE__ */ jsx29(
3072
+ InputAutocomplete,
3073
+ {
3074
+ value: showIfKey || "",
3075
+ onValueChange: (value) => {
3076
+ onShowIfKeyValueChange == null ? void 0 : onShowIfKeyValueChange(value);
3077
+ },
3078
+ onOutsideClick: () => {
3079
+ setIsUpdatingKey(false);
3080
+ },
3081
+ onSelectOption: (value) => {
3082
+ onShowIfKeyValueChange == null ? void 0 : onShowIfKeyValueChange(value);
3083
+ setIsUpdatingKey(false);
3084
+ },
3085
+ autoCompleteOptions,
3086
+ ref: inputRef
3087
+ }
3088
+ )
3089
+ }
3090
+ )
3091
+ ]
3092
+ }
3093
+ )
3094
+ ]
3095
+ }
3096
+ );
3097
+ }
3098
+ var ShowPopover = memo(_ShowPopover);
3099
+
3100
+ // src/editor/nodes/button/button-label-input.tsx
3101
+ import { useMemo as useMemo4 } from "react";
3102
+ import { useState as useState5 } from "react";
3103
+ import { useRef as useRef5 } from "react";
3104
+ import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
2969
3105
  function ButtonLabelInput(props) {
2970
3106
  const { value, onValueChange, isVariable, editor } = props;
2971
- const linkInputRef = useRef4(null);
2972
- const [isEditing, setIsEditing] = useState4(!isVariable);
3107
+ const linkInputRef = useRef5(null);
3108
+ const [isEditing, setIsEditing] = useState5(!isVariable);
2973
3109
  const {
2974
3110
  variables = [],
2975
3111
  variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
2976
3112
  renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
2977
3113
  placeholderUrl = DEFAULT_PLACEHOLDER_URL
2978
3114
  } = useMailyContext();
2979
- const autoCompleteOptions = useMemo3(() => {
3115
+ const autoCompleteOptions = useMemo4(() => {
2980
3116
  const withoutTrigger = value.replace(
2981
3117
  new RegExp(variableTriggerCharacter, "g"),
2982
3118
  ""
@@ -2987,8 +3123,8 @@ function ButtonLabelInput(props) {
2987
3123
  editor
2988
3124
  }).map((variable) => variable.name);
2989
3125
  }, [variables, value, editor]);
2990
- return /* @__PURE__ */ jsxs13("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
2991
- !isEditing && /* @__PURE__ */ jsx29(
3126
+ return /* @__PURE__ */ jsxs14("div", { className: "mly-isolate mly-flex mly-rounded-lg", children: [
3127
+ !isEditing && /* @__PURE__ */ jsx30(
2992
3128
  "button",
2993
3129
  {
2994
3130
  onClick: () => {
@@ -3009,7 +3145,7 @@ function ButtonLabelInput(props) {
3009
3145
  })
3010
3146
  }
3011
3147
  ),
3012
- isEditing && /* @__PURE__ */ jsx29(
3148
+ isEditing && /* @__PURE__ */ jsx30(
3013
3149
  InputAutocomplete,
3014
3150
  {
3015
3151
  value,
@@ -3035,8 +3171,8 @@ function ButtonLabelInput(props) {
3035
3171
  }
3036
3172
 
3037
3173
  // src/editor/nodes/button/button-view.tsx
3038
- import { useMemo as useMemo4 } from "react";
3039
- import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
3174
+ import { useMemo as useMemo5 } from "react";
3175
+ import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
3040
3176
  function ButtonView(props) {
3041
3177
  const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
3042
3178
  const {
@@ -3056,7 +3192,7 @@ function ButtonView(props) {
3056
3192
  paddingLeft
3057
3193
  } = node.attrs;
3058
3194
  const { renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION } = useMailyContext();
3059
- const sizes = useMemo4(
3195
+ const sizes = useMemo5(
3060
3196
  () => ({
3061
3197
  small: {
3062
3198
  paddingX: 24,
@@ -3073,13 +3209,13 @@ function ButtonView(props) {
3073
3209
  }),
3074
3210
  []
3075
3211
  );
3076
- const size = useMemo4(() => {
3212
+ const size = useMemo5(() => {
3077
3213
  var _a;
3078
3214
  return (_a = Object.entries(sizes).find(
3079
3215
  ([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
3080
3216
  )) == null ? void 0 : _a[0];
3081
3217
  }, [paddingRight, paddingTop, sizes]);
3082
- return /* @__PURE__ */ jsx30(
3218
+ return /* @__PURE__ */ jsx31(
3083
3219
  NodeViewWrapper3,
3084
3220
  {
3085
3221
  draggable: editor.isEditable,
@@ -3088,8 +3224,8 @@ function ButtonView(props) {
3088
3224
  style: {
3089
3225
  textAlign: alignment
3090
3226
  },
3091
- children: /* @__PURE__ */ jsxs14(Popover, { open: props.selected && editor.isEditable, children: [
3092
- /* @__PURE__ */ jsx30(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(
3227
+ children: /* @__PURE__ */ jsxs15(Popover, { open: props.selected && editor.isEditable, children: [
3228
+ /* @__PURE__ */ jsx31(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsx31(
3093
3229
  "button",
3094
3230
  {
3095
3231
  className: cn(
@@ -3132,7 +3268,7 @@ function ButtonView(props) {
3132
3268
  }) : text2
3133
3269
  }
3134
3270
  ) }) }),
3135
- /* @__PURE__ */ jsx30(
3271
+ /* @__PURE__ */ jsx31(
3136
3272
  PopoverContent,
3137
3273
  {
3138
3274
  align: "end",
@@ -3141,8 +3277,8 @@ function ButtonView(props) {
3141
3277
  sideOffset: 8,
3142
3278
  onOpenAutoFocus: (e) => e.preventDefault(),
3143
3279
  onCloseAutoFocus: (e) => e.preventDefault(),
3144
- children: /* @__PURE__ */ jsx30(TooltipProvider, { children: /* @__PURE__ */ jsxs14("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
3145
- /* @__PURE__ */ jsx30(
3280
+ children: /* @__PURE__ */ jsx31(TooltipProvider, { children: /* @__PURE__ */ jsxs15("div", { className: "mly-flex mly-items-stretch mly-text-midnight-gray", children: [
3281
+ /* @__PURE__ */ jsx31(
3146
3282
  ButtonLabelInput,
3147
3283
  {
3148
3284
  value: text2,
@@ -3156,9 +3292,9 @@ function ButtonView(props) {
3156
3292
  editor
3157
3293
  }
3158
3294
  ),
3159
- /* @__PURE__ */ jsx30(Divider, {}),
3160
- /* @__PURE__ */ jsxs14("div", { className: "mly-flex mly-space-x-0.5", children: [
3161
- /* @__PURE__ */ jsx30(
3295
+ /* @__PURE__ */ jsx31(Divider, {}),
3296
+ /* @__PURE__ */ jsxs15("div", { className: "mly-flex mly-space-x-0.5", children: [
3297
+ /* @__PURE__ */ jsx31(
3162
3298
  Select,
3163
3299
  {
3164
3300
  label: "Border Radius",
@@ -3176,7 +3312,7 @@ function ButtonView(props) {
3176
3312
  className: "mly-capitalize"
3177
3313
  }
3178
3314
  ),
3179
- /* @__PURE__ */ jsx30(
3315
+ /* @__PURE__ */ jsx31(
3180
3316
  Select,
3181
3317
  {
3182
3318
  label: "Style",
@@ -3194,7 +3330,7 @@ function ButtonView(props) {
3194
3330
  className: "mly-capitalize"
3195
3331
  }
3196
3332
  ),
3197
- /* @__PURE__ */ jsx30(
3333
+ /* @__PURE__ */ jsx31(
3198
3334
  Select,
3199
3335
  {
3200
3336
  label: "Size",
@@ -3217,9 +3353,9 @@ function ButtonView(props) {
3217
3353
  }
3218
3354
  )
3219
3355
  ] }),
3220
- /* @__PURE__ */ jsx30(Divider, {}),
3221
- /* @__PURE__ */ jsxs14("div", { className: "mly-flex mly-space-x-0.5", children: [
3222
- /* @__PURE__ */ jsx30(
3356
+ /* @__PURE__ */ jsx31(Divider, {}),
3357
+ /* @__PURE__ */ jsxs15("div", { className: "mly-flex mly-space-x-0.5", children: [
3358
+ /* @__PURE__ */ jsx31(
3223
3359
  AlignmentSwitch,
3224
3360
  {
3225
3361
  alignment,
@@ -3230,7 +3366,7 @@ function ButtonView(props) {
3230
3366
  }
3231
3367
  }
3232
3368
  ),
3233
- /* @__PURE__ */ jsx30(
3369
+ /* @__PURE__ */ jsx31(
3234
3370
  LinkInputPopover,
3235
3371
  {
3236
3372
  defaultValue: externalLink || "",
@@ -3246,9 +3382,9 @@ function ButtonView(props) {
3246
3382
  }
3247
3383
  )
3248
3384
  ] }),
3249
- /* @__PURE__ */ jsx30(Divider, {}),
3250
- /* @__PURE__ */ jsxs14("div", { className: "mly-flex mly-space-x-0.5", children: [
3251
- /* @__PURE__ */ jsx30(
3385
+ /* @__PURE__ */ jsx31(Divider, {}),
3386
+ /* @__PURE__ */ jsxs15("div", { className: "mly-flex mly-space-x-0.5", children: [
3387
+ /* @__PURE__ */ jsx31(
3252
3388
  BackgroundColorPickerPopup,
3253
3389
  {
3254
3390
  variant,
@@ -3260,7 +3396,7 @@ function ButtonView(props) {
3260
3396
  }
3261
3397
  }
3262
3398
  ),
3263
- /* @__PURE__ */ jsx30(
3399
+ /* @__PURE__ */ jsx31(
3264
3400
  TextColorPickerPopup,
3265
3401
  {
3266
3402
  color: textColor,
@@ -3271,7 +3407,20 @@ function ButtonView(props) {
3271
3407
  }
3272
3408
  }
3273
3409
  )
3274
- ] })
3410
+ ] }),
3411
+ /* @__PURE__ */ jsx31(Divider, {}),
3412
+ /* @__PURE__ */ jsx31(
3413
+ ShowPopover,
3414
+ {
3415
+ showIfKey,
3416
+ onShowIfKeyValueChange: (value) => {
3417
+ updateAttributes2({
3418
+ showIfKey: value
3419
+ });
3420
+ },
3421
+ editor
3422
+ }
3423
+ )
3275
3424
  ] }) })
3276
3425
  }
3277
3426
  )
@@ -3281,20 +3430,20 @@ function ButtonView(props) {
3281
3430
  }
3282
3431
  function BackgroundColorPickerPopup(props) {
3283
3432
  const { color, onChange, variant } = props;
3284
- return /* @__PURE__ */ jsx30(
3433
+ return /* @__PURE__ */ jsx31(
3285
3434
  ColorPicker,
3286
3435
  {
3287
3436
  color,
3288
3437
  onColorChange: onChange,
3289
3438
  tooltip: "Background Color",
3290
- children: /* @__PURE__ */ jsx30(
3439
+ children: /* @__PURE__ */ jsx31(
3291
3440
  BaseButton,
3292
3441
  {
3293
3442
  variant: "ghost",
3294
3443
  size: "sm",
3295
3444
  type: "button",
3296
3445
  className: "mly-size-7",
3297
- children: /* @__PURE__ */ jsx30(
3446
+ children: /* @__PURE__ */ jsx31(
3298
3447
  "div",
3299
3448
  {
3300
3449
  className: "mly-h-4 mly-w-4 mly-shrink-0 mly-rounded-full mly-shadow",
@@ -3313,16 +3462,16 @@ function BackgroundColorPickerPopup(props) {
3313
3462
  }
3314
3463
  function TextColorPickerPopup(props) {
3315
3464
  const { color, onChange } = props;
3316
- return /* @__PURE__ */ jsx30(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx30(
3465
+ return /* @__PURE__ */ jsx31(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ jsx31(
3317
3466
  BaseButton,
3318
3467
  {
3319
3468
  variant: "ghost",
3320
3469
  size: "sm",
3321
3470
  type: "button",
3322
3471
  className: "mly-size-7",
3323
- children: /* @__PURE__ */ jsxs14("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
3324
- /* @__PURE__ */ jsx30("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
3325
- /* @__PURE__ */ jsx30(
3472
+ children: /* @__PURE__ */ jsxs15("div", { className: "mly-flex mly-flex-col mly-items-center mly-justify-center mly-gap-[1px]", children: [
3473
+ /* @__PURE__ */ jsx31("span", { className: "mly-font-bolder mly-font-mono mly-text-xs mly-text-midnight-gray", children: "A" }),
3474
+ /* @__PURE__ */ jsx31(
3326
3475
  "div",
3327
3476
  {
3328
3477
  className: "mly-h-[2px] mly-w-3 mly-shrink-0 mly-rounded-md mly-shadow",
@@ -3575,12 +3724,12 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
3575
3724
  // src/editor/nodes/logo/logo-view.tsx
3576
3725
  import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
3577
3726
  import { useEffect as useEffect4 } from "react";
3578
- import { useState as useState6 } from "react";
3727
+ import { useState as useState7 } from "react";
3579
3728
 
3580
3729
  // src/editor/utils/use-event.ts
3581
- import { useCallback as useCallback2, useLayoutEffect, useRef as useRef5 } from "react";
3730
+ import { useCallback as useCallback2, useLayoutEffect, useRef as useRef6 } from "react";
3582
3731
  var useEvent = (handler) => {
3583
- const handlerRef = useRef5(null);
3732
+ const handlerRef = useRef6(null);
3584
3733
  useLayoutEffect(() => {
3585
3734
  handlerRef.current = handler;
3586
3735
  }, [handler]);
@@ -3595,16 +3744,16 @@ var useEvent = (handler) => {
3595
3744
  // src/editor/nodes/image/image-view.tsx
3596
3745
  import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
3597
3746
  import { Ban, BracesIcon as BracesIcon2, ImageOffIcon, Loader2 } from "lucide-react";
3598
- import { useEffect as useEffect3, useRef as useRef6, useState as useState5 } from "react";
3599
- import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
3747
+ import { useEffect as useEffect3, useRef as useRef7, useState as useState6 } from "react";
3748
+ import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
3600
3749
  var MIN_WIDTH = 20;
3601
3750
  var MAX_WIDTH = 600;
3602
3751
  function ImageView(props) {
3603
3752
  const { node, updateAttributes: updateAttributes2, selected, editor } = props;
3604
- const [status, setStatus] = useState5("idle");
3605
- const wrapperRef = useRef6(null);
3606
- const imgRef = useRef6(null);
3607
- const [resizingStyle, setResizingStyle] = useState5();
3753
+ const [status, setStatus] = useState6("idle");
3754
+ const wrapperRef = useRef7(null);
3755
+ const imgRef = useRef7(null);
3756
+ const [resizingStyle, setResizingStyle] = useState6();
3608
3757
  const handleMouseDown = useEvent(
3609
3758
  (event) => {
3610
3759
  const imageParent = document.querySelector(
@@ -3647,7 +3796,7 @@ function ImageView(props) {
3647
3796
  }
3648
3797
  );
3649
3798
  function dragCornerButton(direction) {
3650
- return /* @__PURE__ */ jsx31(
3799
+ return /* @__PURE__ */ jsx32(
3651
3800
  "div",
3652
3801
  {
3653
3802
  role: "button",
@@ -3712,7 +3861,7 @@ function ImageView(props) {
3712
3861
  img.onerror = null;
3713
3862
  };
3714
3863
  }, [src]);
3715
- return /* @__PURE__ */ jsxs15(
3864
+ return /* @__PURE__ */ jsxs16(
3716
3865
  NodeViewWrapper4,
3717
3866
  {
3718
3867
  as: "div",
@@ -3734,12 +3883,12 @@ function ImageView(props) {
3734
3883
  }[alignment] || {}),
3735
3884
  ref: wrapperRef,
3736
3885
  children: [
3737
- !hasImageSrc && /* @__PURE__ */ jsx31(ImageStatusLabel, { status: "idle", minHeight: height }),
3738
- hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx31(ImageStatusLabel, { status: "variable", minHeight: height }),
3739
- hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx31(ImageStatusLabel, { status: "loading", minHeight: height }),
3740
- hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx31(ImageStatusLabel, { status: "error", minHeight: height }),
3741
- hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsxs15(Fragment3, { children: [
3742
- /* @__PURE__ */ jsx31(
3886
+ !hasImageSrc && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "idle", minHeight: height }),
3887
+ hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "variable", minHeight: height }),
3888
+ hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "loading", minHeight: height }),
3889
+ hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "error", minHeight: height }),
3890
+ hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsxs16(Fragment3, { children: [
3891
+ /* @__PURE__ */ jsx32(
3743
3892
  "img",
3744
3893
  __spreadProps(__spreadValues({}, attrs), {
3745
3894
  ref: imgRef,
@@ -3750,13 +3899,13 @@ function ImageView(props) {
3750
3899
  draggable: editor.isEditable
3751
3900
  })
3752
3901
  ),
3753
- selected && editor.isEditable && /* @__PURE__ */ jsxs15(Fragment3, { children: [
3902
+ selected && editor.isEditable && /* @__PURE__ */ jsxs16(Fragment3, { children: [
3754
3903
  [
3755
3904
  { left: 0, top: 0, height: "100%", width: "1px" },
3756
3905
  { right: 0, top: 0, height: "100%", width: "1px" },
3757
3906
  { top: 0, left: 0, width: "100%", height: "1px" },
3758
3907
  { bottom: 0, left: 0, width: "100%", height: "1px" }
3759
- ].map((style, i) => /* @__PURE__ */ jsx31(
3908
+ ].map((style, i) => /* @__PURE__ */ jsx32(
3760
3909
  "div",
3761
3910
  {
3762
3911
  className: "mly-bg-rose-500",
@@ -3778,7 +3927,7 @@ function ImageView(props) {
3778
3927
  }
3779
3928
  function ImageStatusLabel(props) {
3780
3929
  const { status, minHeight } = props;
3781
- return /* @__PURE__ */ jsxs15(
3930
+ return /* @__PURE__ */ jsxs16(
3782
3931
  "div",
3783
3932
  {
3784
3933
  className: cn(
@@ -3792,21 +3941,21 @@ function ImageStatusLabel(props) {
3792
3941
  minHeight
3793
3942
  } : {}),
3794
3943
  children: [
3795
- status === "idle" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
3796
- /* @__PURE__ */ jsx31(ImageOffIcon, { className: "mly-size-4 mly-stroke-[2.5]" }),
3797
- /* @__PURE__ */ jsx31("span", { children: "No image selected" })
3944
+ status === "idle" && /* @__PURE__ */ jsxs16(Fragment3, { children: [
3945
+ /* @__PURE__ */ jsx32(ImageOffIcon, { className: "mly-size-4 mly-stroke-[2.5]" }),
3946
+ /* @__PURE__ */ jsx32("span", { children: "No image selected" })
3798
3947
  ] }),
3799
- status === "loading" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
3800
- /* @__PURE__ */ jsx31(Loader2, { className: "mly-size-4 mly-animate-spin mly-stroke-[2.5]" }),
3801
- /* @__PURE__ */ jsx31("span", { children: "Loading image..." })
3948
+ status === "loading" && /* @__PURE__ */ jsxs16(Fragment3, { children: [
3949
+ /* @__PURE__ */ jsx32(Loader2, { className: "mly-size-4 mly-animate-spin mly-stroke-[2.5]" }),
3950
+ /* @__PURE__ */ jsx32("span", { children: "Loading image..." })
3802
3951
  ] }),
3803
- status === "error" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
3804
- /* @__PURE__ */ jsx31(Ban, { className: "mly-size-4 mly-stroke-[2.5]" }),
3805
- /* @__PURE__ */ jsx31("span", { children: "Error loading image" })
3952
+ status === "error" && /* @__PURE__ */ jsxs16(Fragment3, { children: [
3953
+ /* @__PURE__ */ jsx32(Ban, { className: "mly-size-4 mly-stroke-[2.5]" }),
3954
+ /* @__PURE__ */ jsx32("span", { children: "Error loading image" })
3806
3955
  ] }),
3807
- status === "variable" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
3808
- /* @__PURE__ */ jsx31(BracesIcon2, { className: "mly-size-4 mly-stroke-[2.5]" }),
3809
- /* @__PURE__ */ jsx31("span", { children: "Variable Image URL" })
3956
+ status === "variable" && /* @__PURE__ */ jsxs16(Fragment3, { children: [
3957
+ /* @__PURE__ */ jsx32(BracesIcon2, { className: "mly-size-4 mly-stroke-[2.5]" }),
3958
+ /* @__PURE__ */ jsx32("span", { children: "Variable Image URL" })
3810
3959
  ] })
3811
3960
  ]
3812
3961
  }
@@ -3814,10 +3963,10 @@ function ImageStatusLabel(props) {
3814
3963
  }
3815
3964
 
3816
3965
  // src/editor/nodes/logo/logo-view.tsx
3817
- import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
3966
+ import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
3818
3967
  function LogoView(props) {
3819
3968
  const { node, editor } = props;
3820
- const [status, setStatus] = useState6("idle");
3969
+ const [status, setStatus] = useState7("idle");
3821
3970
  let {
3822
3971
  alignment = "center",
3823
3972
  src: logoSrc,
@@ -3845,7 +3994,7 @@ function LogoView(props) {
3845
3994
  };
3846
3995
  }, [logoSrc]);
3847
3996
  const logoSize = logoSizes[size];
3848
- return /* @__PURE__ */ jsxs16(
3997
+ return /* @__PURE__ */ jsxs17(
3849
3998
  NodeViewWrapper5,
3850
3999
  {
3851
4000
  as: "div",
@@ -3859,11 +4008,11 @@ function LogoView(props) {
3859
4008
  display: "block"
3860
4009
  },
3861
4010
  children: [
3862
- !hasImageSrc && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "idle", minHeight: logoSize }),
3863
- hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
3864
- hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
3865
- hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx32(ImageStatusLabel, { status: "error", minHeight: logoSize }),
3866
- hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsx32(
4011
+ !hasImageSrc && /* @__PURE__ */ jsx33(ImageStatusLabel, { status: "idle", minHeight: logoSize }),
4012
+ hasImageSrc && isSrcVariable && /* @__PURE__ */ jsx33(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
4013
+ hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ jsx33(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
4014
+ hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ jsx33(ImageStatusLabel, { status: "error", minHeight: logoSize }),
4015
+ hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ jsx33(
3867
4016
  "img",
3868
4017
  {
3869
4018
  src: logoSrc,
@@ -4165,10 +4314,10 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer5 } from "@tiptap/react";
4165
4314
  // src/editor/nodes/repeat/repeat-view.tsx
4166
4315
  import { NodeViewWrapper as NodeViewWrapper6, NodeViewContent } from "@tiptap/react";
4167
4316
  import { Repeat2 as Repeat22 } from "lucide-react";
4168
- import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
4317
+ import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
4169
4318
  function RepeatView(props) {
4170
4319
  const { editor, getPos } = props;
4171
- return /* @__PURE__ */ jsxs17(
4320
+ return /* @__PURE__ */ jsxs18(
4172
4321
  NodeViewWrapper6,
4173
4322
  {
4174
4323
  "data-type": "repeat",
@@ -4176,8 +4325,8 @@ function RepeatView(props) {
4176
4325
  "data-drag-handle": editor.isEditable,
4177
4326
  className: "mly-relative",
4178
4327
  children: [
4179
- /* @__PURE__ */ jsx33(NodeViewContent, { className: "is-editable" }),
4180
- /* @__PURE__ */ jsxs17(
4328
+ /* @__PURE__ */ jsx34(NodeViewContent, { className: "is-editable" }),
4329
+ /* @__PURE__ */ jsxs18(
4181
4330
  "div",
4182
4331
  {
4183
4332
  role: "button",
@@ -4188,8 +4337,8 @@ function RepeatView(props) {
4188
4337
  editor.commands.setNodeSelection(getPos());
4189
4338
  },
4190
4339
  children: [
4191
- /* @__PURE__ */ jsx33(Repeat22, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
4192
- /* @__PURE__ */ jsx33("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
4340
+ /* @__PURE__ */ jsx34(Repeat22, { className: "mly-size-3 mly-stroke-[2.5] mly-text-midnight-gray" }),
4341
+ /* @__PURE__ */ jsx34("div", { className: "mly-w-[1.5px] mly-grow mly-rounded-full mly-bg-rose-300" })
4193
4342
  ]
4194
4343
  }
4195
4344
  )
@@ -4420,16 +4569,16 @@ import {
4420
4569
  useEffect as useEffect5,
4421
4570
  useImperativeHandle as useImperativeHandle2,
4422
4571
  useLayoutEffect as useLayoutEffect2,
4423
- useRef as useRef7,
4424
- useState as useState7
4572
+ useRef as useRef8,
4573
+ useState as useState8
4425
4574
  } from "react";
4426
4575
  import tippy from "tippy.js";
4427
4576
  import { ChevronRightIcon } from "lucide-react";
4428
- import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
4577
+ import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
4429
4578
  var CommandList = forwardRef8(function CommandList2(props, ref) {
4430
4579
  const { items: groups, command, editor } = props;
4431
- const [selectedGroupIndex, setSelectedGroupIndex] = useState7(0);
4432
- const [selectedCommandIndex, setSelectedCommandIndex] = useState7(0);
4580
+ const [selectedGroupIndex, setSelectedGroupIndex] = useState8(0);
4581
+ const [selectedCommandIndex, setSelectedCommandIndex] = useState8(0);
4433
4582
  const selectItem = useCallback3(
4434
4583
  (groupIndex, commandIndex) => {
4435
4584
  const item = groups[groupIndex].commands[commandIndex];
@@ -4496,8 +4645,8 @@ var CommandList = forwardRef8(function CommandList2(props, ref) {
4496
4645
  setSelectedGroupIndex(0);
4497
4646
  setSelectedCommandIndex(0);
4498
4647
  }, [groups]);
4499
- const commandListContainer = useRef7(null);
4500
- const activeCommandRef = useRef7(null);
4648
+ const commandListContainer = useRef8(null);
4649
+ const activeCommandRef = useRef8(null);
4501
4650
  useLayoutEffect2(() => {
4502
4651
  const container = commandListContainer == null ? void 0 : commandListContainer.current;
4503
4652
  const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
@@ -4512,15 +4661,15 @@ var CommandList = forwardRef8(function CommandList2(props, ref) {
4512
4661
  commandListContainer,
4513
4662
  activeCommandRef
4514
4663
  ]);
4515
- return groups.length > 0 ? /* @__PURE__ */ jsx34(TooltipProvider, { children: /* @__PURE__ */ jsxs18("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: [
4516
- /* @__PURE__ */ jsx34(
4664
+ return groups.length > 0 ? /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsxs19("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: [
4665
+ /* @__PURE__ */ jsx35(
4517
4666
  "div",
4518
4667
  {
4519
4668
  id: "slash-command",
4520
4669
  ref: commandListContainer,
4521
4670
  className: "mly-no-scrollbar mly-h-auto mly-max-h-[330px] mly-overflow-y-auto mly-scroll-smooth",
4522
- children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
4523
- /* @__PURE__ */ jsx34(
4671
+ children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs19(Fragment4, { children: [
4672
+ /* @__PURE__ */ jsx35(
4524
4673
  "span",
4525
4674
  {
4526
4675
  className: cn(
@@ -4530,26 +4679,26 @@ var CommandList = forwardRef8(function CommandList2(props, ref) {
4530
4679
  children: group.title
4531
4680
  }
4532
4681
  ),
4533
- /* @__PURE__ */ jsx34("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
4682
+ /* @__PURE__ */ jsx35("div", { className: "mly-space-y-0.5 mly-p-1", children: group.commands.map((item, commandIndex) => {
4534
4683
  var _a;
4535
4684
  const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
4536
4685
  const isSubCommand = "commands" in item;
4537
4686
  const hasRenderFunction = typeof item.render === "function";
4538
4687
  const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
4539
- let value = /* @__PURE__ */ jsxs18(Fragment5, { children: [
4540
- /* @__PURE__ */ jsx34("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
4541
- /* @__PURE__ */ jsxs18("div", { className: "mly-grow", children: [
4542
- /* @__PURE__ */ jsx34("p", { className: "mly-font-medium", children: item.title }),
4543
- /* @__PURE__ */ jsx34("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
4688
+ let value = /* @__PURE__ */ jsxs19(Fragment5, { children: [
4689
+ /* @__PURE__ */ jsx35("div", { className: "mly-flex mly-h-6 mly-w-6 mly-shrink-0 mly-items-center mly-justify-center", children: item.icon }),
4690
+ /* @__PURE__ */ jsxs19("div", { className: "mly-grow", children: [
4691
+ /* @__PURE__ */ jsx35("p", { className: "mly-font-medium", children: item.title }),
4692
+ /* @__PURE__ */ jsx35("p", { className: "mly-text-xs mly-text-gray-400", children: item.description })
4544
4693
  ] }),
4545
- isSubCommand && /* @__PURE__ */ jsx34("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ jsx34(ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
4694
+ isSubCommand && /* @__PURE__ */ jsx35("span", { className: "mly-block mly-px-1 mly-text-gray-400", children: /* @__PURE__ */ jsx35(ChevronRightIcon, { className: "mly-size-3.5 mly-stroke-[2.5]" }) })
4546
4695
  ] });
4547
4696
  if (renderFunctionValue !== null && renderFunctionValue !== true) {
4548
4697
  value = renderFunctionValue;
4549
4698
  }
4550
4699
  const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && isActive;
4551
- return /* @__PURE__ */ jsxs18(Tooltip, { open: shouldOpenTooltip, children: [
4552
- /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
4700
+ return /* @__PURE__ */ jsxs19(Tooltip, { open: shouldOpenTooltip, children: [
4701
+ /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
4553
4702
  "button",
4554
4703
  {
4555
4704
  className: cn(
@@ -4562,14 +4711,14 @@ var CommandList = forwardRef8(function CommandList2(props, ref) {
4562
4711
  children: value
4563
4712
  }
4564
4713
  ) }),
4565
- /* @__PURE__ */ jsx34(
4714
+ /* @__PURE__ */ jsx35(
4566
4715
  TooltipContent,
4567
4716
  {
4568
4717
  side: "right",
4569
4718
  sideOffset: 10,
4570
4719
  className: "mly-w-52 mly-rounded-lg mly-border-none mly-p-1 mly-shadow",
4571
- children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ jsxs18(Fragment5, { children: [
4572
- /* @__PURE__ */ jsx34("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__ */ jsx34(
4720
+ children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
4721
+ /* @__PURE__ */ jsx35("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__ */ jsx35(
4573
4722
  "img",
4574
4723
  {
4575
4724
  src: item == null ? void 0 : item.preview,
@@ -4577,7 +4726,7 @@ var CommandList = forwardRef8(function CommandList2(props, ref) {
4577
4726
  className: "mly-absolute mly-inset-0 mly-h-full mly-w-full mly-object-cover"
4578
4727
  }
4579
4728
  ) }),
4580
- /* @__PURE__ */ jsx34("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
4729
+ /* @__PURE__ */ jsx35("p", { className: "mly-mt-2 mly-px-0.5 mly-text-gray-500", children: item.description })
4581
4730
  ] })
4582
4731
  }
4583
4732
  )
@@ -4586,16 +4735,16 @@ var CommandList = forwardRef8(function CommandList2(props, ref) {
4586
4735
  ] }, groupIndex))
4587
4736
  }
4588
4737
  ),
4589
- /* @__PURE__ */ jsx34("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ jsxs18("div", { className: "mly-flex mly-items-center", children: [
4590
- /* @__PURE__ */ jsxs18("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
4591
- /* @__PURE__ */ jsx34("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
4592
- /* @__PURE__ */ jsx34("kbd", { className: "mly-ml-1 mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2193" }),
4738
+ /* @__PURE__ */ jsx35("div", { className: "mly-border-t mly-border-gray-200 mly-px-1 mly-py-3 mly-pl-4", children: /* @__PURE__ */ jsxs19("div", { className: "mly-flex mly-items-center", children: [
4739
+ /* @__PURE__ */ jsxs19("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
4740
+ /* @__PURE__ */ jsx35("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2191" }),
4741
+ /* @__PURE__ */ jsx35("kbd", { className: "mly-ml-1 mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-2 mly-font-medium", children: "\u2193" }),
4593
4742
  " ",
4594
4743
  "to navigate"
4595
4744
  ] }),
4596
- /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
4597
- /* @__PURE__ */ jsxs18("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
4598
- /* @__PURE__ */ jsx34("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
4745
+ /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: "mly-select-none mly-px-1", children: "\xB7" }),
4746
+ /* @__PURE__ */ jsxs19("p", { className: "mly-text-center mly-text-xs mly-text-gray-400", children: [
4747
+ /* @__PURE__ */ jsx35("kbd", { className: "mly-rounded mly-border mly-border-gray-200 mly-p-1 mly-px-1.5 mly-font-medium", children: "Enter" }),
4599
4748
  " ",
4600
4749
  "to select"
4601
4750
  ] })
@@ -4893,12 +5042,12 @@ var VariableExtension = Node10.create({
4893
5042
 
4894
5043
  // src/editor/nodes/variable/variable-suggestions.tsx
4895
5044
  import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
4896
- import { useRef as useRef8, forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle3 } from "react";
5045
+ import { useRef as useRef9, forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle3 } from "react";
4897
5046
  import tippy2 from "tippy.js";
4898
- import { jsx as jsx35 } from "react/jsx-runtime";
5047
+ import { jsx as jsx36 } from "react/jsx-runtime";
4899
5048
  var VariableList = forwardRef9((props, ref) => {
4900
5049
  const { items = [] } = props;
4901
- const popoverRef = useRef8(null);
5050
+ const popoverRef = useRef9(null);
4902
5051
  useImperativeHandle3(ref, () => ({
4903
5052
  onKeyDown: ({ event }) => {
4904
5053
  if (!popoverRef.current) {
@@ -4922,7 +5071,7 @@ var VariableList = forwardRef9((props, ref) => {
4922
5071
  return false;
4923
5072
  }
4924
5073
  }));
4925
- return /* @__PURE__ */ jsx35(
5074
+ return /* @__PURE__ */ jsx36(
4926
5075
  VariablePopover,
4927
5076
  {
4928
5077
  items,