@daisychainapp/maily-to-core 0.4.0 → 0.4.1
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.
- package/dist/extensions/index.cjs +12 -71
- package/dist/extensions/index.cjs.map +1 -1
- package/dist/extensions/index.mjs +11 -70
- package/dist/extensions/index.mjs.map +1 -1
- package/dist/index.cjs +657 -837
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +12 -19
- package/dist/index.css.map +1 -1
- package/dist/index.mjs +503 -683
- package/dist/index.mjs.map +1 -1
- package/package.json +10 -10
- package/LICENSE +0 -21
package/dist/index.cjs
CHANGED
|
@@ -80,13 +80,13 @@ var __async = (__this, __arguments, generator) => {
|
|
|
80
80
|
// src/index.ts
|
|
81
81
|
var src_exports = {};
|
|
82
82
|
__export(src_exports, {
|
|
83
|
-
Editor: () =>
|
|
83
|
+
Editor: () => Editor12
|
|
84
84
|
});
|
|
85
85
|
module.exports = __toCommonJS(src_exports);
|
|
86
86
|
|
|
87
87
|
// src/editor/index.tsx
|
|
88
|
-
var
|
|
89
|
-
var
|
|
88
|
+
var import_react62 = require("@tiptap/react");
|
|
89
|
+
var import_react63 = require("react");
|
|
90
90
|
|
|
91
91
|
// src/editor/components/column-menu/columns-bubble-menu.tsx
|
|
92
92
|
var import_react8 = require("@tiptap/react");
|
|
@@ -5007,129 +5007,9 @@ var EditorMenuBar = (props) => {
|
|
|
5007
5007
|
);
|
|
5008
5008
|
};
|
|
5009
5009
|
|
|
5010
|
-
// src/editor/components/html-menu/html-menu.tsx
|
|
5011
|
-
var import_react14 = require("@tiptap/react");
|
|
5012
|
-
var import_lucide_react9 = require("lucide-react");
|
|
5013
|
-
var import_react15 = require("react");
|
|
5014
|
-
var import_tippy3 = require("tippy.js");
|
|
5015
|
-
|
|
5016
|
-
// src/editor/components/html-menu/use-html-state.ts
|
|
5017
|
-
var import_react13 = require("@tiptap/react");
|
|
5018
|
-
var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
|
|
5019
|
-
var useHtmlState = (editor) => {
|
|
5020
|
-
const states = (0, import_react13.useEditorState)({
|
|
5021
|
-
editor,
|
|
5022
|
-
selector: (ctx) => {
|
|
5023
|
-
var _a, _b;
|
|
5024
|
-
return {
|
|
5025
|
-
activeTab: ((_a = ctx.editor.getAttributes("htmlCodeBlock")) == null ? void 0 : _a.activeTab) || "code",
|
|
5026
|
-
currentShowIfKey: ((_b = ctx.editor.getAttributes("htmlCodeBlock")) == null ? void 0 : _b.showIfKey) || ""
|
|
5027
|
-
};
|
|
5028
|
-
},
|
|
5029
|
-
equalityFn: import_fast_deep_equal2.default
|
|
5030
|
-
});
|
|
5031
|
-
return states;
|
|
5032
|
-
};
|
|
5033
|
-
|
|
5034
|
-
// src/editor/components/html-menu/html-menu.tsx
|
|
5035
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5036
|
-
function HTMLBubbleMenu(props) {
|
|
5037
|
-
const { appendTo, editor } = props;
|
|
5038
|
-
if (!editor) {
|
|
5039
|
-
return null;
|
|
5040
|
-
}
|
|
5041
|
-
const state = useHtmlState(editor);
|
|
5042
|
-
const getReferenceClientRect = (0, import_react15.useCallback)(() => {
|
|
5043
|
-
const renderContainer = getRenderContainer(editor, "htmlCodeBlock");
|
|
5044
|
-
const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
|
|
5045
|
-
return rect;
|
|
5046
|
-
}, [editor]);
|
|
5047
|
-
const bubbleMenuProps = __spreadProps(__spreadValues(__spreadValues({}, props), appendTo ? { appendTo: appendTo.current } : {}), {
|
|
5048
|
-
shouldShow: ({ editor: editor2 }) => {
|
|
5049
|
-
return editor2.isActive("htmlCodeBlock");
|
|
5050
|
-
},
|
|
5051
|
-
tippyOptions: {
|
|
5052
|
-
offset: [0, 8],
|
|
5053
|
-
popperOptions: {
|
|
5054
|
-
modifiers: [{ name: "flip", enabled: false }]
|
|
5055
|
-
},
|
|
5056
|
-
getReferenceClientRect,
|
|
5057
|
-
appendTo: () => appendTo == null ? void 0 : appendTo.current,
|
|
5058
|
-
plugins: [import_tippy3.sticky],
|
|
5059
|
-
sticky: "popper",
|
|
5060
|
-
maxWidth: "auto"
|
|
5061
|
-
},
|
|
5062
|
-
pluginKey: "htmlCodeBlockBubbleMenu"
|
|
5063
|
-
});
|
|
5064
|
-
const { activeTab = "code" } = state;
|
|
5065
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5066
|
-
import_react14.BubbleMenu,
|
|
5067
|
-
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
5068
|
-
className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
5069
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TooltipProvider, { children: [
|
|
5070
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mly:flex mly:items-center mly:h-7 mly:rounded-md mly:bg-soft-gray mly:px-0.5", children: [
|
|
5071
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
|
|
5072
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5073
|
-
"button",
|
|
5074
|
-
{
|
|
5075
|
-
className: cn(
|
|
5076
|
-
"mly:flex mly:size-6 mly:shrink-0 mly:items-center mly:justify-center mly:rounded mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2",
|
|
5077
|
-
activeTab === "code" && "mly:bg-white"
|
|
5078
|
-
),
|
|
5079
|
-
disabled: activeTab === "code",
|
|
5080
|
-
onClick: () => {
|
|
5081
|
-
var _a;
|
|
5082
|
-
(_a = editor == null ? void 0 : editor.commands) == null ? void 0 : _a.updateHtmlCodeBlock({
|
|
5083
|
-
activeTab: "code"
|
|
5084
|
-
});
|
|
5085
|
-
},
|
|
5086
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.CodeXmlIcon, { className: "mly:size-3 mly:shrink-0 mly:stroke-[2.5]" })
|
|
5087
|
-
}
|
|
5088
|
-
) }),
|
|
5089
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { sideOffset: 8, children: "HTML Code" })
|
|
5090
|
-
] }),
|
|
5091
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
|
|
5092
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5093
|
-
"button",
|
|
5094
|
-
{
|
|
5095
|
-
className: cn(
|
|
5096
|
-
"mly:flex mly:size-6 mly:shrink-0 mly:items-center mly:justify-center mly:rounded mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2",
|
|
5097
|
-
activeTab === "preview" && "mly:bg-white"
|
|
5098
|
-
),
|
|
5099
|
-
disabled: activeTab === "preview",
|
|
5100
|
-
onClick: () => {
|
|
5101
|
-
var _a;
|
|
5102
|
-
(_a = editor == null ? void 0 : editor.commands) == null ? void 0 : _a.updateHtmlCodeBlock({
|
|
5103
|
-
activeTab: "preview"
|
|
5104
|
-
});
|
|
5105
|
-
},
|
|
5106
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ViewIcon, { className: "mly:size-3 mly:shrink-0 mly:stroke-[2.5]" })
|
|
5107
|
-
}
|
|
5108
|
-
) }),
|
|
5109
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { sideOffset: 8, children: "Preview" })
|
|
5110
|
-
] })
|
|
5111
|
-
] }),
|
|
5112
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider, {}),
|
|
5113
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5114
|
-
ShowPopover,
|
|
5115
|
-
{
|
|
5116
|
-
showIfKey: state.currentShowIfKey,
|
|
5117
|
-
onShowIfKeyValueChange: (value) => {
|
|
5118
|
-
editor.commands.updateHtmlCodeBlock({
|
|
5119
|
-
showIfKey: value
|
|
5120
|
-
});
|
|
5121
|
-
},
|
|
5122
|
-
editor
|
|
5123
|
-
}
|
|
5124
|
-
)
|
|
5125
|
-
] })
|
|
5126
|
-
})
|
|
5127
|
-
);
|
|
5128
|
-
}
|
|
5129
|
-
|
|
5130
5010
|
// src/editor/nodes/logo/logo.ts
|
|
5131
5011
|
var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
|
|
5132
|
-
var
|
|
5012
|
+
var import_react20 = require("@tiptap/react");
|
|
5133
5013
|
|
|
5134
5014
|
// src/editor/nodes/section/section.ts
|
|
5135
5015
|
var import_core5 = require("@tiptap/core");
|
|
@@ -5430,14 +5310,14 @@ var SectionExtension = import_core5.Node.create({
|
|
|
5430
5310
|
});
|
|
5431
5311
|
|
|
5432
5312
|
// src/editor/nodes/logo/logo-view.tsx
|
|
5433
|
-
var
|
|
5434
|
-
var
|
|
5435
|
-
var
|
|
5313
|
+
var import_react17 = require("@tiptap/react");
|
|
5314
|
+
var import_react18 = require("react");
|
|
5315
|
+
var import_react19 = require("react");
|
|
5436
5316
|
|
|
5437
5317
|
// src/editor/nodes/image/image-view.tsx
|
|
5438
|
-
var
|
|
5439
|
-
var
|
|
5440
|
-
var
|
|
5318
|
+
var import_react15 = require("react");
|
|
5319
|
+
var import_react16 = require("@tiptap/react");
|
|
5320
|
+
var import_lucide_react9 = require("lucide-react");
|
|
5441
5321
|
|
|
5442
5322
|
// src/editor/plugins/image-upload/image-upload-plugin.ts
|
|
5443
5323
|
var import_state3 = require("@tiptap/pm/state");
|
|
@@ -5531,7 +5411,7 @@ function ImageUploadPlugin(options) {
|
|
|
5531
5411
|
|
|
5532
5412
|
// src/editor/extensions/image-upload/image-upload.ts
|
|
5533
5413
|
var import_core6 = require("@tiptap/core");
|
|
5534
|
-
var
|
|
5414
|
+
var import_react13 = require("react");
|
|
5535
5415
|
var ImageUploadExtension = import_core6.Extension.create({
|
|
5536
5416
|
name: "imageUpload",
|
|
5537
5417
|
addOptions() {
|
|
@@ -5566,7 +5446,7 @@ var ImageUploadExtension = import_core6.Extension.create({
|
|
|
5566
5446
|
}
|
|
5567
5447
|
});
|
|
5568
5448
|
function useImageUploadOptions(editor) {
|
|
5569
|
-
return (0,
|
|
5449
|
+
return (0, import_react13.useMemo)(() => {
|
|
5570
5450
|
const node = editor.extensionManager.extensions.find(
|
|
5571
5451
|
(extension) => extension.name === "imageUpload"
|
|
5572
5452
|
);
|
|
@@ -5575,13 +5455,13 @@ function useImageUploadOptions(editor) {
|
|
|
5575
5455
|
}
|
|
5576
5456
|
|
|
5577
5457
|
// src/editor/utils/use-event.ts
|
|
5578
|
-
var
|
|
5458
|
+
var import_react14 = require("react");
|
|
5579
5459
|
var useEvent = (handler) => {
|
|
5580
|
-
const handlerRef = (0,
|
|
5581
|
-
(0,
|
|
5460
|
+
const handlerRef = (0, import_react14.useRef)(null);
|
|
5461
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
5582
5462
|
handlerRef.current = handler;
|
|
5583
5463
|
}, [handler]);
|
|
5584
|
-
return (0,
|
|
5464
|
+
return (0, import_react14.useCallback)((...args) => {
|
|
5585
5465
|
if (handlerRef.current === null) {
|
|
5586
5466
|
throw new Error("Handler is not assigned");
|
|
5587
5467
|
}
|
|
@@ -5604,19 +5484,19 @@ function getNewWidth(height, aspectRatio) {
|
|
|
5604
5484
|
}
|
|
5605
5485
|
|
|
5606
5486
|
// src/editor/nodes/image/image-view.tsx
|
|
5607
|
-
var
|
|
5487
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5608
5488
|
var MIN_WIDTH = 20;
|
|
5609
5489
|
var IMAGE_MAX_WIDTH = 600;
|
|
5610
5490
|
var IMAGE_MAX_HEIGHT = 400;
|
|
5611
5491
|
function ImageView(props) {
|
|
5612
5492
|
const { node, updateAttributes: updateAttributes2, selected, editor } = props;
|
|
5613
|
-
const [status, setStatus] = (0,
|
|
5614
|
-
const [isPlaceholderImage, setIsPlaceholderImage] = (0,
|
|
5493
|
+
const [status, setStatus] = (0, import_react15.useState)("idle");
|
|
5494
|
+
const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react15.useState)(false);
|
|
5615
5495
|
const { onImageUpload, allowedMimeTypes = [] } = useImageUploadOptions(editor);
|
|
5616
|
-
const wrapperRef = (0,
|
|
5617
|
-
const imgRef = (0,
|
|
5618
|
-
const [resizingStyle, setResizingStyle] = (0,
|
|
5619
|
-
const [isDraggingOver, setIsDraggingOver] = (0,
|
|
5496
|
+
const wrapperRef = (0, import_react15.useRef)(null);
|
|
5497
|
+
const imgRef = (0, import_react15.useRef)(null);
|
|
5498
|
+
const [resizingStyle, setResizingStyle] = (0, import_react15.useState)();
|
|
5499
|
+
const [isDraggingOver, setIsDraggingOver] = (0, import_react15.useState)(false);
|
|
5620
5500
|
const handleMouseDown = useEvent(
|
|
5621
5501
|
(event) => {
|
|
5622
5502
|
const imageParent = document.querySelector(
|
|
@@ -5673,12 +5553,12 @@ function ImageView(props) {
|
|
|
5673
5553
|
window.addEventListener("mouseup", removeListeners);
|
|
5674
5554
|
}
|
|
5675
5555
|
);
|
|
5676
|
-
const dragCornerButton = (0,
|
|
5556
|
+
const dragCornerButton = (0, import_react15.useCallback)(
|
|
5677
5557
|
(direction) => {
|
|
5678
5558
|
if (isPlaceholderImage) {
|
|
5679
5559
|
return null;
|
|
5680
5560
|
}
|
|
5681
|
-
return /* @__PURE__ */ (0,
|
|
5561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5682
5562
|
"div",
|
|
5683
5563
|
{
|
|
5684
5564
|
role: "button",
|
|
@@ -5731,7 +5611,7 @@ function ImageView(props) {
|
|
|
5731
5611
|
const file = e.target.files[0];
|
|
5732
5612
|
yield handleImageUpload(file);
|
|
5733
5613
|
});
|
|
5734
|
-
const handleImageUpload = (0,
|
|
5614
|
+
const handleImageUpload = (0, import_react15.useCallback)(
|
|
5735
5615
|
(file) => __async(this, null, function* () {
|
|
5736
5616
|
if (!isDroppable) {
|
|
5737
5617
|
return;
|
|
@@ -5749,7 +5629,7 @@ function ImageView(props) {
|
|
|
5749
5629
|
}),
|
|
5750
5630
|
[onImageUpload, updateAttributes2]
|
|
5751
5631
|
);
|
|
5752
|
-
(0,
|
|
5632
|
+
(0, import_react15.useEffect)(() => {
|
|
5753
5633
|
var _a2, _b, _c, _d;
|
|
5754
5634
|
if (!src || isSrcVariable) {
|
|
5755
5635
|
return;
|
|
@@ -5787,7 +5667,7 @@ function ImageView(props) {
|
|
|
5787
5667
|
img.onerror = null;
|
|
5788
5668
|
};
|
|
5789
5669
|
}, [src]);
|
|
5790
|
-
const handleDragOver = (0,
|
|
5670
|
+
const handleDragOver = (0, import_react15.useCallback)(
|
|
5791
5671
|
(e) => {
|
|
5792
5672
|
if (!isDroppable) {
|
|
5793
5673
|
return;
|
|
@@ -5798,7 +5678,7 @@ function ImageView(props) {
|
|
|
5798
5678
|
},
|
|
5799
5679
|
[onImageUpload]
|
|
5800
5680
|
);
|
|
5801
|
-
const handleDragLeave = (0,
|
|
5681
|
+
const handleDragLeave = (0, import_react15.useCallback)(
|
|
5802
5682
|
(e) => {
|
|
5803
5683
|
if (!isDroppable) {
|
|
5804
5684
|
return;
|
|
@@ -5809,7 +5689,7 @@ function ImageView(props) {
|
|
|
5809
5689
|
},
|
|
5810
5690
|
[onImageUpload]
|
|
5811
5691
|
);
|
|
5812
|
-
const handleDrop = (0,
|
|
5692
|
+
const handleDrop = (0, import_react15.useCallback)(
|
|
5813
5693
|
(e) => __async(this, null, function* () {
|
|
5814
5694
|
var _a2;
|
|
5815
5695
|
if (!isDroppable) {
|
|
@@ -5834,8 +5714,8 @@ function ImageView(props) {
|
|
|
5834
5714
|
const heightValue = height && height !== "auto" ? `${height}px` : void 0;
|
|
5835
5715
|
const hasExplicitWidth = Boolean(widthValue || (resizingStyle == null ? void 0 : resizingStyle.width));
|
|
5836
5716
|
const hasExplicitHeight = Boolean(heightValue || (resizingStyle == null ? void 0 : resizingStyle.height));
|
|
5837
|
-
return /* @__PURE__ */ (0,
|
|
5838
|
-
|
|
5717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5718
|
+
import_react16.NodeViewWrapper,
|
|
5839
5719
|
__spreadProps(__spreadValues({
|
|
5840
5720
|
as: "div",
|
|
5841
5721
|
draggable: editor.isEditable,
|
|
@@ -5863,7 +5743,7 @@ function ImageView(props) {
|
|
|
5863
5743
|
onDrop: handleDrop
|
|
5864
5744
|
} : {}), {
|
|
5865
5745
|
children: [
|
|
5866
|
-
!hasImageSrc && status === "idle" && /* @__PURE__ */ (0,
|
|
5746
|
+
!hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5867
5747
|
ImageStatusLabel,
|
|
5868
5748
|
{
|
|
5869
5749
|
status: "idle",
|
|
@@ -5871,11 +5751,11 @@ function ImageView(props) {
|
|
|
5871
5751
|
isDropZone: isDroppable
|
|
5872
5752
|
}
|
|
5873
5753
|
),
|
|
5874
|
-
!hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
5875
|
-
hasImageSrc && isSrcVariable && /* @__PURE__ */ (0,
|
|
5876
|
-
hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
5877
|
-
hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
5878
|
-
isDroppable && /* @__PURE__ */ (0,
|
|
5754
|
+
!hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
|
|
5755
|
+
hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "variable", minHeight: height }),
|
|
5756
|
+
hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "loading", minHeight: height }),
|
|
5757
|
+
hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageStatusLabel, { status: "error", minHeight: height }),
|
|
5758
|
+
isDroppable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5879
5759
|
"input",
|
|
5880
5760
|
{
|
|
5881
5761
|
type: "file",
|
|
@@ -5885,8 +5765,8 @@ function ImageView(props) {
|
|
|
5885
5765
|
multiple: false
|
|
5886
5766
|
}
|
|
5887
5767
|
),
|
|
5888
|
-
hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
5889
|
-
/* @__PURE__ */ (0,
|
|
5768
|
+
hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5769
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5890
5770
|
"img",
|
|
5891
5771
|
__spreadProps(__spreadValues({}, attrs), {
|
|
5892
5772
|
ref: imgRef,
|
|
@@ -5906,13 +5786,13 @@ function ImageView(props) {
|
|
|
5906
5786
|
)
|
|
5907
5787
|
})
|
|
5908
5788
|
),
|
|
5909
|
-
selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ (0,
|
|
5789
|
+
selected && editor.isEditable && !isPlaceholderImage && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5910
5790
|
[
|
|
5911
5791
|
{ left: 0, top: 0, height: "100%", width: "1px" },
|
|
5912
5792
|
{ right: 0, top: 0, height: "100%", width: "1px" },
|
|
5913
5793
|
{ top: 0, left: 0, width: "100%", height: "1px" },
|
|
5914
5794
|
{ bottom: 0, left: 0, width: "100%", height: "1px" }
|
|
5915
|
-
].map((style, i) => /* @__PURE__ */ (0,
|
|
5795
|
+
].map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5916
5796
|
"div",
|
|
5917
5797
|
{
|
|
5918
5798
|
className: "mly:bg-rose-500",
|
|
@@ -5936,7 +5816,7 @@ function ImageStatusLabel(props) {
|
|
|
5936
5816
|
const _a = props, { status, minHeight, className, style, isDropZone } = _a, rest = __objRest(_a, ["status", "minHeight", "className", "style", "isDropZone"]);
|
|
5937
5817
|
const resolvedMinHeight = minHeight != null ? minHeight : isDropZone ? 36 : void 0;
|
|
5938
5818
|
const resolvedPaddingY = isDropZone ? 8 : void 0;
|
|
5939
|
-
return /* @__PURE__ */ (0,
|
|
5819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5940
5820
|
"div",
|
|
5941
5821
|
__spreadProps(__spreadValues({}, rest), {
|
|
5942
5822
|
className: cn(
|
|
@@ -5954,25 +5834,25 @@ function ImageStatusLabel(props) {
|
|
|
5954
5834
|
paddingBottom: resolvedPaddingY
|
|
5955
5835
|
} : {}), style),
|
|
5956
5836
|
children: [
|
|
5957
|
-
status === "idle" && !isDropZone && /* @__PURE__ */ (0,
|
|
5958
|
-
/* @__PURE__ */ (0,
|
|
5959
|
-
/* @__PURE__ */ (0,
|
|
5837
|
+
status === "idle" && !isDropZone && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5838
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ImageOffIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
|
|
5839
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "No image selected" })
|
|
5960
5840
|
] }),
|
|
5961
|
-
status === "idle" && isDropZone && /* @__PURE__ */ (0,
|
|
5962
|
-
/* @__PURE__ */ (0,
|
|
5963
|
-
/* @__PURE__ */ (0,
|
|
5841
|
+
status === "idle" && isDropZone && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5842
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.GrabIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
|
|
5843
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Click or Drop image here" })
|
|
5964
5844
|
] }),
|
|
5965
|
-
status === "loading" && /* @__PURE__ */ (0,
|
|
5966
|
-
/* @__PURE__ */ (0,
|
|
5967
|
-
/* @__PURE__ */ (0,
|
|
5845
|
+
status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5846
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Loader2, { className: "mly:size-4 mly:animate-spin mly:stroke-[2.5]" }),
|
|
5847
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Loading image..." })
|
|
5968
5848
|
] }),
|
|
5969
|
-
status === "error" && /* @__PURE__ */ (0,
|
|
5970
|
-
/* @__PURE__ */ (0,
|
|
5971
|
-
/* @__PURE__ */ (0,
|
|
5849
|
+
status === "error" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5850
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Ban, { className: "mly:size-4 mly:stroke-[2.5]" }),
|
|
5851
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Error loading image" })
|
|
5972
5852
|
] }),
|
|
5973
|
-
status === "variable" && /* @__PURE__ */ (0,
|
|
5974
|
-
/* @__PURE__ */ (0,
|
|
5975
|
-
/* @__PURE__ */ (0,
|
|
5853
|
+
status === "variable" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
5854
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.BracesIcon, { className: "mly:size-4 mly:stroke-[2.5]" }),
|
|
5855
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Variable Image URL" })
|
|
5976
5856
|
] })
|
|
5977
5857
|
]
|
|
5978
5858
|
})
|
|
@@ -5980,12 +5860,12 @@ function ImageStatusLabel(props) {
|
|
|
5980
5860
|
}
|
|
5981
5861
|
|
|
5982
5862
|
// src/editor/nodes/logo/logo-view.tsx
|
|
5983
|
-
var
|
|
5863
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
5984
5864
|
function LogoView(props) {
|
|
5985
5865
|
const { node, editor, updateAttributes: updateAttributes2 } = props;
|
|
5986
|
-
const [status, setStatus] = (0,
|
|
5987
|
-
const [isPlaceholderImage, setIsPlaceholderImage] = (0,
|
|
5988
|
-
const [isDraggingOver, setIsDraggingOver] = (0,
|
|
5866
|
+
const [status, setStatus] = (0, import_react19.useState)("idle");
|
|
5867
|
+
const [isPlaceholderImage, setIsPlaceholderImage] = (0, import_react19.useState)(false);
|
|
5868
|
+
const [isDraggingOver, setIsDraggingOver] = (0, import_react19.useState)(false);
|
|
5989
5869
|
const { onImageUpload, allowedMimeTypes = [] } = useImageUploadOptions(editor);
|
|
5990
5870
|
let {
|
|
5991
5871
|
alignment = "center",
|
|
@@ -6002,7 +5882,7 @@ function LogoView(props) {
|
|
|
6002
5882
|
const file = e.target.files[0];
|
|
6003
5883
|
yield handleImageUpload(file);
|
|
6004
5884
|
});
|
|
6005
|
-
const handleImageUpload = (0,
|
|
5885
|
+
const handleImageUpload = (0, import_react18.useCallback)(
|
|
6006
5886
|
(file) => __async(this, null, function* () {
|
|
6007
5887
|
if (!isDroppable) {
|
|
6008
5888
|
return;
|
|
@@ -6020,7 +5900,7 @@ function LogoView(props) {
|
|
|
6020
5900
|
}),
|
|
6021
5901
|
[onImageUpload, updateAttributes2]
|
|
6022
5902
|
);
|
|
6023
|
-
const handleDragOver = (0,
|
|
5903
|
+
const handleDragOver = (0, import_react18.useCallback)(
|
|
6024
5904
|
(e) => {
|
|
6025
5905
|
if (!isDroppable) {
|
|
6026
5906
|
return;
|
|
@@ -6031,7 +5911,7 @@ function LogoView(props) {
|
|
|
6031
5911
|
},
|
|
6032
5912
|
[onImageUpload]
|
|
6033
5913
|
);
|
|
6034
|
-
const handleDragLeave = (0,
|
|
5914
|
+
const handleDragLeave = (0, import_react18.useCallback)(
|
|
6035
5915
|
(e) => {
|
|
6036
5916
|
if (!isDroppable) {
|
|
6037
5917
|
return;
|
|
@@ -6042,7 +5922,7 @@ function LogoView(props) {
|
|
|
6042
5922
|
},
|
|
6043
5923
|
[onImageUpload]
|
|
6044
5924
|
);
|
|
6045
|
-
const handleDrop = (0,
|
|
5925
|
+
const handleDrop = (0, import_react18.useCallback)(
|
|
6046
5926
|
(e) => __async(this, null, function* () {
|
|
6047
5927
|
var _a;
|
|
6048
5928
|
if (!isDroppable) {
|
|
@@ -6063,7 +5943,7 @@ function LogoView(props) {
|
|
|
6063
5943
|
}),
|
|
6064
5944
|
[handleImageUpload]
|
|
6065
5945
|
);
|
|
6066
|
-
(0,
|
|
5946
|
+
(0, import_react18.useEffect)(() => {
|
|
6067
5947
|
var _a, _b, _c, _d;
|
|
6068
5948
|
if (!logoSrc) {
|
|
6069
5949
|
return;
|
|
@@ -6086,8 +5966,8 @@ function LogoView(props) {
|
|
|
6086
5966
|
};
|
|
6087
5967
|
}, [logoSrc]);
|
|
6088
5968
|
const logoSize = logoSizes[size];
|
|
6089
|
-
return /* @__PURE__ */ (0,
|
|
6090
|
-
|
|
5969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
5970
|
+
import_react17.NodeViewWrapper,
|
|
6091
5971
|
__spreadProps(__spreadValues({
|
|
6092
5972
|
as: "div",
|
|
6093
5973
|
draggable: editor.isEditable,
|
|
@@ -6106,7 +5986,7 @@ function LogoView(props) {
|
|
|
6106
5986
|
onDrop: handleDrop
|
|
6107
5987
|
} : {}), {
|
|
6108
5988
|
children: [
|
|
6109
|
-
!hasImageSrc && status === "idle" && /* @__PURE__ */ (0,
|
|
5989
|
+
!hasImageSrc && status === "idle" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
6110
5990
|
ImageStatusLabel,
|
|
6111
5991
|
{
|
|
6112
5992
|
status: "idle",
|
|
@@ -6114,11 +5994,11 @@ function LogoView(props) {
|
|
|
6114
5994
|
isDropZone: isDroppable
|
|
6115
5995
|
}
|
|
6116
5996
|
),
|
|
6117
|
-
!hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
6118
|
-
hasImageSrc && isSrcVariable && /* @__PURE__ */ (0,
|
|
6119
|
-
hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
6120
|
-
hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
6121
|
-
isDroppable && /* @__PURE__ */ (0,
|
|
5997
|
+
!hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
|
|
5998
|
+
hasImageSrc && isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "variable", minHeight: logoSize }),
|
|
5999
|
+
hasImageSrc && status === "loading" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "loading", minHeight: logoSize }),
|
|
6000
|
+
hasImageSrc && status === "error" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageStatusLabel, { status: "error", minHeight: logoSize }),
|
|
6001
|
+
isDroppable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
6122
6002
|
"input",
|
|
6123
6003
|
{
|
|
6124
6004
|
type: "file",
|
|
@@ -6128,7 +6008,7 @@ function LogoView(props) {
|
|
|
6128
6008
|
multiple: false
|
|
6129
6009
|
}
|
|
6130
6010
|
),
|
|
6131
|
-
hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0,
|
|
6011
|
+
hasImageSrc && status === "loaded" && !isSrcVariable && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
6132
6012
|
"img",
|
|
6133
6013
|
{
|
|
6134
6014
|
src: logoSrc,
|
|
@@ -6248,7 +6128,7 @@ var LogoExtension = import_extension_image.default.extend({
|
|
|
6248
6128
|
];
|
|
6249
6129
|
},
|
|
6250
6130
|
addNodeView() {
|
|
6251
|
-
return (0,
|
|
6131
|
+
return (0, import_react20.ReactNodeViewRenderer)(LogoView, {
|
|
6252
6132
|
className: "mly:relative"
|
|
6253
6133
|
});
|
|
6254
6134
|
}
|
|
@@ -6279,13 +6159,13 @@ var borderRadius = [
|
|
|
6279
6159
|
];
|
|
6280
6160
|
|
|
6281
6161
|
// src/editor/components/image-menu/image-bubble-menu.tsx
|
|
6282
|
-
var
|
|
6283
|
-
var
|
|
6284
|
-
var
|
|
6162
|
+
var import_react29 = require("@tiptap/react");
|
|
6163
|
+
var import_lucide_react22 = require("lucide-react");
|
|
6164
|
+
var import_tippy3 = require("tippy.js");
|
|
6285
6165
|
|
|
6286
6166
|
// src/editor/components/alignment-switch.tsx
|
|
6287
|
-
var
|
|
6288
|
-
var
|
|
6167
|
+
var import_lucide_react10 = require("lucide-react");
|
|
6168
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
6289
6169
|
function AlignmentSwitch(props) {
|
|
6290
6170
|
const { alignment: rawAlignment, onAlignmentChange } = props;
|
|
6291
6171
|
const alignment = allowedLogoAlignment.includes(
|
|
@@ -6293,21 +6173,21 @@ function AlignmentSwitch(props) {
|
|
|
6293
6173
|
) ? rawAlignment : "left";
|
|
6294
6174
|
const alignments = {
|
|
6295
6175
|
left: {
|
|
6296
|
-
icon:
|
|
6176
|
+
icon: import_lucide_react10.AlignLeft,
|
|
6297
6177
|
tooltip: "Align Left",
|
|
6298
6178
|
onClick: () => {
|
|
6299
6179
|
onAlignmentChange("left");
|
|
6300
6180
|
}
|
|
6301
6181
|
},
|
|
6302
6182
|
center: {
|
|
6303
|
-
icon:
|
|
6183
|
+
icon: import_lucide_react10.AlignCenter,
|
|
6304
6184
|
tooltip: "Align Center",
|
|
6305
6185
|
onClick: () => {
|
|
6306
6186
|
onAlignmentChange("center");
|
|
6307
6187
|
}
|
|
6308
6188
|
},
|
|
6309
6189
|
right: {
|
|
6310
|
-
icon:
|
|
6190
|
+
icon: import_lucide_react10.AlignRight,
|
|
6311
6191
|
tooltip: "Align Right",
|
|
6312
6192
|
onClick: () => {
|
|
6313
6193
|
onAlignmentChange("right");
|
|
@@ -6315,20 +6195,20 @@ function AlignmentSwitch(props) {
|
|
|
6315
6195
|
}
|
|
6316
6196
|
};
|
|
6317
6197
|
const activeAlignment = alignments[alignment];
|
|
6318
|
-
return /* @__PURE__ */ (0,
|
|
6319
|
-
/* @__PURE__ */ (0,
|
|
6320
|
-
/* @__PURE__ */ (0,
|
|
6198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover, { children: [
|
|
6199
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
|
|
6200
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
6321
6201
|
PopoverTrigger,
|
|
6322
6202
|
{
|
|
6323
6203
|
className: cn(
|
|
6324
6204
|
"mly:flex mly:size-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2"
|
|
6325
6205
|
),
|
|
6326
|
-
children: /* @__PURE__ */ (0,
|
|
6206
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(activeAlignment.icon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5]" })
|
|
6327
6207
|
}
|
|
6328
6208
|
) }),
|
|
6329
|
-
/* @__PURE__ */ (0,
|
|
6209
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipContent, { sideOffset: 8, children: "Alignment" })
|
|
6330
6210
|
] }),
|
|
6331
|
-
/* @__PURE__ */ (0,
|
|
6211
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
6332
6212
|
PopoverContent,
|
|
6333
6213
|
{
|
|
6334
6214
|
className: "mly:flex mly:w-max mly:gap-0.5 mly:rounded-lg mly:p-0.5!",
|
|
@@ -6342,7 +6222,7 @@ function AlignmentSwitch(props) {
|
|
|
6342
6222
|
e.preventDefault();
|
|
6343
6223
|
},
|
|
6344
6224
|
children: Object.entries(alignments).map(([key, value]) => {
|
|
6345
|
-
return /* @__PURE__ */ (0,
|
|
6225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
6346
6226
|
BubbleMenuButton,
|
|
6347
6227
|
{
|
|
6348
6228
|
icon: value.icon,
|
|
@@ -6359,23 +6239,23 @@ function AlignmentSwitch(props) {
|
|
|
6359
6239
|
}
|
|
6360
6240
|
|
|
6361
6241
|
// src/editor/components/ui/link-input-popover.tsx
|
|
6362
|
-
var
|
|
6363
|
-
var
|
|
6242
|
+
var import_lucide_react21 = require("lucide-react");
|
|
6243
|
+
var import_react26 = require("react");
|
|
6364
6244
|
|
|
6365
6245
|
// src/editor/provider.tsx
|
|
6366
|
-
var
|
|
6246
|
+
var import_react21 = require("react");
|
|
6367
6247
|
|
|
6368
6248
|
// src/editor/extensions/slash-command/default-slash-commands.tsx
|
|
6369
|
-
var
|
|
6249
|
+
var import_lucide_react18 = require("lucide-react");
|
|
6370
6250
|
|
|
6371
6251
|
// src/blocks/button.tsx
|
|
6372
|
-
var
|
|
6373
|
-
var
|
|
6252
|
+
var import_lucide_react11 = require("lucide-react");
|
|
6253
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
6374
6254
|
var button = {
|
|
6375
6255
|
title: "Button",
|
|
6376
6256
|
description: "Add a call to action button to email.",
|
|
6377
6257
|
searchTerms: ["link", "button", "cta"],
|
|
6378
|
-
icon: /* @__PURE__ */ (0,
|
|
6258
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.MousePointer, { className: "mly:h-4 mly:w-4" }),
|
|
6379
6259
|
command: ({ editor, range }) => {
|
|
6380
6260
|
editor.chain().focus().deleteRange(range).setButton().run();
|
|
6381
6261
|
}
|
|
@@ -6384,7 +6264,7 @@ var linkCard = {
|
|
|
6384
6264
|
title: "Link Card",
|
|
6385
6265
|
description: "Add a link card to email.",
|
|
6386
6266
|
searchTerms: ["link", "button", "image"],
|
|
6387
|
-
icon: /* @__PURE__ */ (0,
|
|
6267
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.ArrowUpRightSquare, { className: "mly:h-4 mly:w-4" }),
|
|
6388
6268
|
command: ({ editor, range }) => {
|
|
6389
6269
|
editor.chain().focus().deleteRange(range).setLinkCard().run();
|
|
6390
6270
|
},
|
|
@@ -6396,13 +6276,13 @@ var linkCard = {
|
|
|
6396
6276
|
};
|
|
6397
6277
|
|
|
6398
6278
|
// src/blocks/code.tsx
|
|
6399
|
-
var
|
|
6400
|
-
var
|
|
6279
|
+
var import_lucide_react12 = require("lucide-react");
|
|
6280
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
6401
6281
|
var htmlCodeBlock = {
|
|
6402
6282
|
title: "Custom HTML",
|
|
6403
6283
|
description: "Insert a custom HTML block",
|
|
6404
6284
|
searchTerms: ["html", "code", "custom"],
|
|
6405
|
-
icon: /* @__PURE__ */ (0,
|
|
6285
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.CodeXmlIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6406
6286
|
command: ({ editor, range }) => {
|
|
6407
6287
|
editor.chain().focus().deleteRange(range).setHtmlCodeBlock({ language: "html" }).run();
|
|
6408
6288
|
}
|
|
@@ -6410,13 +6290,13 @@ var htmlCodeBlock = {
|
|
|
6410
6290
|
|
|
6411
6291
|
// src/blocks/image.tsx
|
|
6412
6292
|
var import_state4 = require("@tiptap/pm/state");
|
|
6413
|
-
var
|
|
6414
|
-
var
|
|
6293
|
+
var import_lucide_react13 = require("lucide-react");
|
|
6294
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
6415
6295
|
var image = {
|
|
6416
6296
|
title: "Image",
|
|
6417
6297
|
description: "Full width image",
|
|
6418
6298
|
searchTerms: ["image"],
|
|
6419
|
-
icon: /* @__PURE__ */ (0,
|
|
6299
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6420
6300
|
command: ({ editor, range }) => {
|
|
6421
6301
|
editor.chain().focus().deleteRange(range).setImage({ src: "" }).run();
|
|
6422
6302
|
}
|
|
@@ -6425,7 +6305,7 @@ var logo = {
|
|
|
6425
6305
|
title: "Logo",
|
|
6426
6306
|
description: "Add your brand logo",
|
|
6427
6307
|
searchTerms: ["image", "logo"],
|
|
6428
|
-
icon: /* @__PURE__ */ (0,
|
|
6308
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6429
6309
|
command: ({ editor, range }) => {
|
|
6430
6310
|
editor.chain().focus().deleteRange(range).setLogoImage({ src: "" }).run();
|
|
6431
6311
|
}
|
|
@@ -6434,7 +6314,7 @@ var inlineImage = {
|
|
|
6434
6314
|
title: "Inline Image",
|
|
6435
6315
|
description: "Inline image",
|
|
6436
6316
|
searchTerms: ["image", "inline"],
|
|
6437
|
-
icon: /* @__PURE__ */ (0,
|
|
6317
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.ImageIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6438
6318
|
command: ({ editor, range }) => {
|
|
6439
6319
|
editor.chain().focus().deleteRange(range).setInlineImage({
|
|
6440
6320
|
src: "https://maily.to/brand/logo.png"
|
|
@@ -6457,13 +6337,13 @@ var inlineImage = {
|
|
|
6457
6337
|
};
|
|
6458
6338
|
|
|
6459
6339
|
// src/blocks/layout.tsx
|
|
6460
|
-
var
|
|
6461
|
-
var
|
|
6340
|
+
var import_lucide_react14 = require("lucide-react");
|
|
6341
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
6462
6342
|
var columns = {
|
|
6463
6343
|
title: "Columns",
|
|
6464
6344
|
description: "Add columns to email.",
|
|
6465
6345
|
searchTerms: ["layout", "columns"],
|
|
6466
|
-
icon: /* @__PURE__ */ (0,
|
|
6346
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ColumnsIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6467
6347
|
command: ({ editor, range }) => {
|
|
6468
6348
|
editor.chain().focus().deleteRange(range).setColumns().focus(editor.state.selection.head - 2).run();
|
|
6469
6349
|
}
|
|
@@ -6472,7 +6352,7 @@ var section = {
|
|
|
6472
6352
|
title: "Section",
|
|
6473
6353
|
description: "Add a section to email.",
|
|
6474
6354
|
searchTerms: ["layout", "section"],
|
|
6475
|
-
icon: /* @__PURE__ */ (0,
|
|
6355
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.RectangleHorizontal, { className: "mly:h-4 mly:w-4" }),
|
|
6476
6356
|
command: ({ editor, range }) => {
|
|
6477
6357
|
editor.chain().focus().deleteRange(range).setSection().run();
|
|
6478
6358
|
}
|
|
@@ -6481,7 +6361,7 @@ var repeat = {
|
|
|
6481
6361
|
title: "Repeat",
|
|
6482
6362
|
description: "Loop over an array of items.",
|
|
6483
6363
|
searchTerms: ["repeat", "for", "loop"],
|
|
6484
|
-
icon: /* @__PURE__ */ (0,
|
|
6364
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Repeat2, { className: "mly:h-4 mly:w-4" }),
|
|
6485
6365
|
command: ({ editor, range }) => {
|
|
6486
6366
|
editor.chain().focus().deleteRange(range).setRepeat().run();
|
|
6487
6367
|
}
|
|
@@ -6490,7 +6370,7 @@ var spacer = {
|
|
|
6490
6370
|
title: "Spacer",
|
|
6491
6371
|
description: "Add space between blocks.",
|
|
6492
6372
|
searchTerms: ["space", "gap", "divider"],
|
|
6493
|
-
icon: /* @__PURE__ */ (0,
|
|
6373
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.MoveVertical, { className: "mly:h-4 mly:w-4" }),
|
|
6494
6374
|
command: ({ editor, range }) => {
|
|
6495
6375
|
editor.chain().focus().deleteRange(range).setSpacer({ height: "sm" }).run();
|
|
6496
6376
|
}
|
|
@@ -6499,20 +6379,20 @@ var divider = {
|
|
|
6499
6379
|
title: "Divider",
|
|
6500
6380
|
description: "Add a horizontal divider.",
|
|
6501
6381
|
searchTerms: ["divider", "line"],
|
|
6502
|
-
icon: /* @__PURE__ */ (0,
|
|
6382
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Minus, { className: "mly:h-4 mly:w-4" }),
|
|
6503
6383
|
command: ({ editor, range }) => {
|
|
6504
6384
|
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
|
|
6505
6385
|
}
|
|
6506
6386
|
};
|
|
6507
6387
|
|
|
6508
6388
|
// src/blocks/list.tsx
|
|
6509
|
-
var
|
|
6510
|
-
var
|
|
6389
|
+
var import_lucide_react15 = require("lucide-react");
|
|
6390
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
6511
6391
|
var bulletList = {
|
|
6512
6392
|
title: "Bullet List",
|
|
6513
6393
|
description: "Create a simple bullet list.",
|
|
6514
6394
|
searchTerms: ["unordered", "point"],
|
|
6515
|
-
icon: /* @__PURE__ */ (0,
|
|
6395
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.List, { className: "mly:h-4 mly:w-4" }),
|
|
6516
6396
|
command: ({ editor, range }) => {
|
|
6517
6397
|
editor.chain().focus().deleteRange(range).toggleBulletList().run();
|
|
6518
6398
|
}
|
|
@@ -6521,20 +6401,20 @@ var orderedList = {
|
|
|
6521
6401
|
title: "Numbered List",
|
|
6522
6402
|
description: "Create a list with numbering.",
|
|
6523
6403
|
searchTerms: ["ordered"],
|
|
6524
|
-
icon: /* @__PURE__ */ (0,
|
|
6404
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.ListOrdered, { className: "mly:h-4 mly:w-4" }),
|
|
6525
6405
|
command: ({ editor, range }) => {
|
|
6526
6406
|
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
|
|
6527
6407
|
}
|
|
6528
6408
|
};
|
|
6529
6409
|
|
|
6530
6410
|
// src/blocks/typography.tsx
|
|
6531
|
-
var
|
|
6532
|
-
var
|
|
6411
|
+
var import_lucide_react16 = require("lucide-react");
|
|
6412
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
6533
6413
|
var text = {
|
|
6534
6414
|
title: "Text",
|
|
6535
6415
|
description: "Just start typing with plain text.",
|
|
6536
6416
|
searchTerms: ["p", "paragraph"],
|
|
6537
|
-
icon: /* @__PURE__ */ (0,
|
|
6417
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Text, { className: "mly:h-4 mly:w-4" }),
|
|
6538
6418
|
command: ({ editor, range }) => {
|
|
6539
6419
|
editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
|
|
6540
6420
|
}
|
|
@@ -6543,7 +6423,7 @@ var heading1 = {
|
|
|
6543
6423
|
title: "Heading 1",
|
|
6544
6424
|
description: "Big heading.",
|
|
6545
6425
|
searchTerms: ["h1", "title", "big", "large"],
|
|
6546
|
-
icon: /* @__PURE__ */ (0,
|
|
6426
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading1, { className: "mly:h-4 mly:w-4" }),
|
|
6547
6427
|
command: ({ editor, range }) => {
|
|
6548
6428
|
editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
|
|
6549
6429
|
}
|
|
@@ -6552,7 +6432,7 @@ var heading2 = {
|
|
|
6552
6432
|
title: "Heading 2",
|
|
6553
6433
|
description: "Medium heading.",
|
|
6554
6434
|
searchTerms: ["h2", "subtitle", "medium"],
|
|
6555
|
-
icon: /* @__PURE__ */ (0,
|
|
6435
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading2, { className: "mly:h-4 mly:w-4" }),
|
|
6556
6436
|
command: ({ editor, range }) => {
|
|
6557
6437
|
editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
|
|
6558
6438
|
}
|
|
@@ -6561,7 +6441,7 @@ var heading3 = {
|
|
|
6561
6441
|
title: "Heading 3",
|
|
6562
6442
|
description: "Small heading.",
|
|
6563
6443
|
searchTerms: ["h3", "subtitle", "small"],
|
|
6564
|
-
icon: /* @__PURE__ */ (0,
|
|
6444
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Heading3, { className: "mly:h-4 mly:w-4" }),
|
|
6565
6445
|
command: ({ editor, range }) => {
|
|
6566
6446
|
editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
|
|
6567
6447
|
}
|
|
@@ -6570,7 +6450,7 @@ var hardBreak = {
|
|
|
6570
6450
|
title: "Hard Break",
|
|
6571
6451
|
description: "Add a break between lines.",
|
|
6572
6452
|
searchTerms: ["break", "line"],
|
|
6573
|
-
icon: /* @__PURE__ */ (0,
|
|
6453
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.DivideIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6574
6454
|
command: ({ editor, range }) => {
|
|
6575
6455
|
editor.chain().focus().deleteRange(range).setHardBreak().run();
|
|
6576
6456
|
}
|
|
@@ -6579,7 +6459,7 @@ var blockquote = {
|
|
|
6579
6459
|
title: "Blockquote",
|
|
6580
6460
|
description: "Add blockquote.",
|
|
6581
6461
|
searchTerms: ["quote", "blockquote"],
|
|
6582
|
-
icon: /* @__PURE__ */ (0,
|
|
6462
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.TextQuote, { className: "mly:h-4 mly:w-4" }),
|
|
6583
6463
|
command: ({ editor, range }) => {
|
|
6584
6464
|
editor.chain().focus().deleteRange(range).toggleBlockquote().run();
|
|
6585
6465
|
}
|
|
@@ -6588,7 +6468,7 @@ var footer = {
|
|
|
6588
6468
|
title: "Footer",
|
|
6589
6469
|
description: "Add a footer text to email.",
|
|
6590
6470
|
searchTerms: ["footer", "text"],
|
|
6591
|
-
icon: /* @__PURE__ */ (0,
|
|
6471
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6592
6472
|
command: ({ editor, range }) => {
|
|
6593
6473
|
editor.chain().focus().deleteRange(range).setFooter().run();
|
|
6594
6474
|
}
|
|
@@ -6597,16 +6477,16 @@ var clearLine = {
|
|
|
6597
6477
|
title: "Clear Line",
|
|
6598
6478
|
description: "Clear the current line.",
|
|
6599
6479
|
searchTerms: ["clear", "line"],
|
|
6600
|
-
icon: /* @__PURE__ */ (0,
|
|
6480
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.EraserIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6601
6481
|
command: ({ editor, range }) => {
|
|
6602
6482
|
editor.chain().focus().selectParentNode().deleteSelection().run();
|
|
6603
6483
|
}
|
|
6604
6484
|
};
|
|
6605
6485
|
|
|
6606
6486
|
// src/editor/components/icons/logo-with-cover-image.tsx
|
|
6607
|
-
var
|
|
6487
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
6608
6488
|
function LogoWithCoverImageIcon(props) {
|
|
6609
|
-
return /* @__PURE__ */ (0,
|
|
6489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
6610
6490
|
"svg",
|
|
6611
6491
|
__spreadProps(__spreadValues({
|
|
6612
6492
|
width: "14",
|
|
@@ -6616,7 +6496,7 @@ function LogoWithCoverImageIcon(props) {
|
|
|
6616
6496
|
xmlns: "http://www.w3.org/2000/svg"
|
|
6617
6497
|
}, props), {
|
|
6618
6498
|
children: [
|
|
6619
|
-
/* @__PURE__ */ (0,
|
|
6499
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
6620
6500
|
"path",
|
|
6621
6501
|
{
|
|
6622
6502
|
fillRule: "evenodd",
|
|
@@ -6625,7 +6505,7 @@ function LogoWithCoverImageIcon(props) {
|
|
|
6625
6505
|
fill: "currentColor"
|
|
6626
6506
|
}
|
|
6627
6507
|
),
|
|
6628
|
-
/* @__PURE__ */ (0,
|
|
6508
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
6629
6509
|
"path",
|
|
6630
6510
|
{
|
|
6631
6511
|
fillRule: "evenodd",
|
|
@@ -6634,7 +6514,7 @@ function LogoWithCoverImageIcon(props) {
|
|
|
6634
6514
|
fill: "currentColor"
|
|
6635
6515
|
}
|
|
6636
6516
|
),
|
|
6637
|
-
/* @__PURE__ */ (0,
|
|
6517
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
6638
6518
|
"path",
|
|
6639
6519
|
{
|
|
6640
6520
|
fillRule: "evenodd",
|
|
@@ -6643,8 +6523,8 @@ function LogoWithCoverImageIcon(props) {
|
|
|
6643
6523
|
fill: "currentColor"
|
|
6644
6524
|
}
|
|
6645
6525
|
),
|
|
6646
|
-
/* @__PURE__ */ (0,
|
|
6647
|
-
/* @__PURE__ */ (0,
|
|
6526
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mask", { id: "path-4-inside-1_1046_19527", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "3", y: "4", width: "8", height: "3", rx: "0.5" }) }),
|
|
6527
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
6648
6528
|
"rect",
|
|
6649
6529
|
{
|
|
6650
6530
|
x: "3",
|
|
@@ -6657,7 +6537,7 @@ function LogoWithCoverImageIcon(props) {
|
|
|
6657
6537
|
mask: "url(#path-4-inside-1_1046_19527)"
|
|
6658
6538
|
}
|
|
6659
6539
|
),
|
|
6660
|
-
/* @__PURE__ */ (0,
|
|
6540
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
6661
6541
|
"rect",
|
|
6662
6542
|
{
|
|
6663
6543
|
x: "6.25",
|
|
@@ -6669,16 +6549,16 @@ function LogoWithCoverImageIcon(props) {
|
|
|
6669
6549
|
strokeWidth: "0.5"
|
|
6670
6550
|
}
|
|
6671
6551
|
),
|
|
6672
|
-
/* @__PURE__ */ (0,
|
|
6552
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "3", y: "8", width: "2", height: "1", rx: "0.5", fill: "currentColor" })
|
|
6673
6553
|
]
|
|
6674
6554
|
})
|
|
6675
6555
|
);
|
|
6676
6556
|
}
|
|
6677
6557
|
|
|
6678
6558
|
// src/editor/components/icons/logo-with-text-horizon.tsx
|
|
6679
|
-
var
|
|
6559
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
6680
6560
|
function LogoWithTextHorizonIcon(props) {
|
|
6681
|
-
return /* @__PURE__ */ (0,
|
|
6561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
6682
6562
|
"svg",
|
|
6683
6563
|
__spreadProps(__spreadValues({
|
|
6684
6564
|
width: "14",
|
|
@@ -6688,7 +6568,7 @@ function LogoWithTextHorizonIcon(props) {
|
|
|
6688
6568
|
xmlns: "http://www.w3.org/2000/svg"
|
|
6689
6569
|
}, props), {
|
|
6690
6570
|
children: [
|
|
6691
|
-
/* @__PURE__ */ (0,
|
|
6571
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
6692
6572
|
"path",
|
|
6693
6573
|
{
|
|
6694
6574
|
fillRule: "evenodd",
|
|
@@ -6697,7 +6577,7 @@ function LogoWithTextHorizonIcon(props) {
|
|
|
6697
6577
|
fill: "currentColor"
|
|
6698
6578
|
}
|
|
6699
6579
|
),
|
|
6700
|
-
/* @__PURE__ */ (0,
|
|
6580
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
6701
6581
|
"rect",
|
|
6702
6582
|
{
|
|
6703
6583
|
x: "6.25",
|
|
@@ -6709,8 +6589,8 @@ function LogoWithTextHorizonIcon(props) {
|
|
|
6709
6589
|
strokeWidth: "0.5"
|
|
6710
6590
|
}
|
|
6711
6591
|
),
|
|
6712
|
-
/* @__PURE__ */ (0,
|
|
6713
|
-
/* @__PURE__ */ (0,
|
|
6592
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "6.5", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
|
|
6593
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
6714
6594
|
"path",
|
|
6715
6595
|
{
|
|
6716
6596
|
fillRule: "evenodd",
|
|
@@ -6719,7 +6599,7 @@ function LogoWithTextHorizonIcon(props) {
|
|
|
6719
6599
|
fill: "currentColor"
|
|
6720
6600
|
}
|
|
6721
6601
|
),
|
|
6722
|
-
/* @__PURE__ */ (0,
|
|
6602
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
6723
6603
|
"path",
|
|
6724
6604
|
{
|
|
6725
6605
|
fillRule: "evenodd",
|
|
@@ -6734,9 +6614,9 @@ function LogoWithTextHorizonIcon(props) {
|
|
|
6734
6614
|
}
|
|
6735
6615
|
|
|
6736
6616
|
// src/editor/components/icons/logo-with-text-vertical.tsx
|
|
6737
|
-
var
|
|
6617
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
6738
6618
|
function LogoWithTextVerticalIcon(props) {
|
|
6739
|
-
return /* @__PURE__ */ (0,
|
|
6619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
6740
6620
|
"svg",
|
|
6741
6621
|
__spreadProps(__spreadValues({
|
|
6742
6622
|
width: "14",
|
|
@@ -6746,7 +6626,7 @@ function LogoWithTextVerticalIcon(props) {
|
|
|
6746
6626
|
xmlns: "http://www.w3.org/2000/svg"
|
|
6747
6627
|
}, props), {
|
|
6748
6628
|
children: [
|
|
6749
|
-
/* @__PURE__ */ (0,
|
|
6629
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
6750
6630
|
"path",
|
|
6751
6631
|
{
|
|
6752
6632
|
fillRule: "evenodd",
|
|
@@ -6755,7 +6635,7 @@ function LogoWithTextVerticalIcon(props) {
|
|
|
6755
6635
|
fill: "currentColor"
|
|
6756
6636
|
}
|
|
6757
6637
|
),
|
|
6758
|
-
/* @__PURE__ */ (0,
|
|
6638
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
6759
6639
|
"rect",
|
|
6760
6640
|
{
|
|
6761
6641
|
x: "4.25",
|
|
@@ -6767,8 +6647,8 @@ function LogoWithTextVerticalIcon(props) {
|
|
|
6767
6647
|
strokeWidth: "0.5"
|
|
6768
6648
|
}
|
|
6769
6649
|
),
|
|
6770
|
-
/* @__PURE__ */ (0,
|
|
6771
|
-
/* @__PURE__ */ (0,
|
|
6650
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "6", y: "6", width: "2", height: "1", rx: "0.5", fill: "currentColor" }),
|
|
6651
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
6772
6652
|
"path",
|
|
6773
6653
|
{
|
|
6774
6654
|
fillRule: "evenodd",
|
|
@@ -6777,7 +6657,7 @@ function LogoWithTextVerticalIcon(props) {
|
|
|
6777
6657
|
fill: "currentColor"
|
|
6778
6658
|
}
|
|
6779
6659
|
),
|
|
6780
|
-
/* @__PURE__ */ (0,
|
|
6660
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
6781
6661
|
"path",
|
|
6782
6662
|
{
|
|
6783
6663
|
fillRule: "evenodd",
|
|
@@ -6792,12 +6672,12 @@ function LogoWithTextVerticalIcon(props) {
|
|
|
6792
6672
|
}
|
|
6793
6673
|
|
|
6794
6674
|
// src/blocks/headers.tsx
|
|
6795
|
-
var
|
|
6675
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
6796
6676
|
var headerLogoWithTextHorizontal = {
|
|
6797
6677
|
title: "Logo with Text (Horizontal)",
|
|
6798
6678
|
description: "Logo and a text horizontally",
|
|
6799
6679
|
searchTerms: ["logo", "text"],
|
|
6800
|
-
icon: /* @__PURE__ */ (0,
|
|
6680
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithTextHorizonIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6801
6681
|
command: ({ editor, range }) => {
|
|
6802
6682
|
editor.chain().deleteRange(range).insertContent({
|
|
6803
6683
|
type: "columns",
|
|
@@ -6861,7 +6741,7 @@ var headerLogoWithTextVertical = {
|
|
|
6861
6741
|
title: "Logo with Text (Vertical)",
|
|
6862
6742
|
description: "Logo and a text vertically",
|
|
6863
6743
|
searchTerms: ["logo", "text"],
|
|
6864
|
-
icon: /* @__PURE__ */ (0,
|
|
6744
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithTextVerticalIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6865
6745
|
command: ({ editor, range }) => {
|
|
6866
6746
|
editor.chain().deleteRange(range).insertContent([
|
|
6867
6747
|
{
|
|
@@ -6892,7 +6772,7 @@ var headerLogoWithCoverImage = {
|
|
|
6892
6772
|
title: "Logo with Cover Image",
|
|
6893
6773
|
description: "Logo and a cover image",
|
|
6894
6774
|
searchTerms: ["logo", "cover", "image"],
|
|
6895
|
-
icon: /* @__PURE__ */ (0,
|
|
6775
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LogoWithCoverImageIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6896
6776
|
command: ({ editor, range }) => {
|
|
6897
6777
|
const todayFormatted = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
|
|
6898
6778
|
year: "numeric",
|
|
@@ -6980,13 +6860,13 @@ var headerLogoWithCoverImage = {
|
|
|
6980
6860
|
};
|
|
6981
6861
|
|
|
6982
6862
|
// src/blocks/footers.tsx
|
|
6983
|
-
var
|
|
6984
|
-
var
|
|
6863
|
+
var import_lucide_react17 = require("lucide-react");
|
|
6864
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
6985
6865
|
var footerCopyrightText = {
|
|
6986
6866
|
title: "Footer Copyright",
|
|
6987
6867
|
description: "Copyright text for the footer.",
|
|
6988
6868
|
searchTerms: ["footer", "copyright"],
|
|
6989
|
-
icon: /* @__PURE__ */ (0,
|
|
6869
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.CopyrightIcon, { className: "mly:h-4 mly:w-4" }),
|
|
6990
6870
|
command: ({ editor, range }) => {
|
|
6991
6871
|
const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
6992
6872
|
editor.chain().focus().deleteRange(range).insertContent({
|
|
@@ -7006,7 +6886,7 @@ var footerCommunityFeedbackCta = {
|
|
|
7006
6886
|
title: "Footer Community Feedback CTA",
|
|
7007
6887
|
description: "Community feedback CTA for the footer.",
|
|
7008
6888
|
searchTerms: ["footer", "community", "feedback", "cta"],
|
|
7009
|
-
icon: /* @__PURE__ */ (0,
|
|
6889
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.RectangleHorizontalIcon, { className: "mly:h-4 mly:w-4" }),
|
|
7010
6890
|
command: ({ editor, range }) => {
|
|
7011
6891
|
editor.chain().focus().deleteRange(range).insertContent([
|
|
7012
6892
|
{
|
|
@@ -7049,7 +6929,7 @@ var footerCompanySignature = {
|
|
|
7049
6929
|
title: "Footer Company Signature",
|
|
7050
6930
|
description: "Company signature for the footer.",
|
|
7051
6931
|
searchTerms: ["footer", "company", "signature"],
|
|
7052
|
-
icon: /* @__PURE__ */ (0,
|
|
6932
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.LayoutTemplateIcon, { className: "mly:h-4 mly:w-4" }),
|
|
7053
6933
|
command: ({ editor, range }) => {
|
|
7054
6934
|
editor.chain().focus().deleteRange(range).insertContent([
|
|
7055
6935
|
{ type: "horizontalRule" },
|
|
@@ -7203,7 +7083,7 @@ var footerCompanySignature = {
|
|
|
7203
7083
|
};
|
|
7204
7084
|
|
|
7205
7085
|
// src/editor/extensions/slash-command/default-slash-commands.tsx
|
|
7206
|
-
var
|
|
7086
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
7207
7087
|
var DEFAULT_SLASH_COMMANDS = [
|
|
7208
7088
|
{
|
|
7209
7089
|
title: "Blocks",
|
|
@@ -7238,7 +7118,7 @@ var DEFAULT_SLASH_COMMANDS = [
|
|
|
7238
7118
|
title: "Headers",
|
|
7239
7119
|
description: "Add pre-designed headers block",
|
|
7240
7120
|
searchTerms: ["header", "headers"],
|
|
7241
|
-
icon: /* @__PURE__ */ (0,
|
|
7121
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.Heading1, { className: "mly:h-4 mly:w-4" }),
|
|
7242
7122
|
preview: "https://cdn.usemaily.com/previews/header-preview-xyz.png",
|
|
7243
7123
|
commands: [
|
|
7244
7124
|
headerLogoWithTextVertical,
|
|
@@ -7251,7 +7131,7 @@ var DEFAULT_SLASH_COMMANDS = [
|
|
|
7251
7131
|
title: "Footers",
|
|
7252
7132
|
description: "Add pre-designed footers block",
|
|
7253
7133
|
searchTerms: ["footers"],
|
|
7254
|
-
icon: /* @__PURE__ */ (0,
|
|
7134
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.FootprintsIcon, { className: "mly:h-4 mly:w-4" }),
|
|
7255
7135
|
commands: [
|
|
7256
7136
|
footerCopyrightText,
|
|
7257
7137
|
footerCommunityFeedbackCta,
|
|
@@ -7264,18 +7144,18 @@ var DEFAULT_SLASH_COMMANDS = [
|
|
|
7264
7144
|
];
|
|
7265
7145
|
|
|
7266
7146
|
// src/editor/provider.tsx
|
|
7267
|
-
var
|
|
7147
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
7268
7148
|
var DEFAULT_PLACEHOLDER_URL = "https://maily.to/";
|
|
7269
|
-
var MailyContext = (0,
|
|
7149
|
+
var MailyContext = (0, import_react21.createContext)({
|
|
7270
7150
|
placeholderUrl: DEFAULT_PLACEHOLDER_URL,
|
|
7271
7151
|
blocks: DEFAULT_SLASH_COMMANDS
|
|
7272
7152
|
});
|
|
7273
7153
|
function MailyProvider(props) {
|
|
7274
7154
|
const _a = props, { children } = _a, defaultValues = __objRest(_a, ["children"]);
|
|
7275
|
-
return /* @__PURE__ */ (0,
|
|
7155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MailyContext.Provider, { value: defaultValues, children });
|
|
7276
7156
|
}
|
|
7277
7157
|
function useMailyContext() {
|
|
7278
|
-
const values = (0,
|
|
7158
|
+
const values = (0, import_react21.useContext)(MailyContext);
|
|
7279
7159
|
if (!values) {
|
|
7280
7160
|
throw new Error("Missing MailyContext.Provider in the component tree");
|
|
7281
7161
|
}
|
|
@@ -7283,23 +7163,23 @@ function useMailyContext() {
|
|
|
7283
7163
|
}
|
|
7284
7164
|
|
|
7285
7165
|
// src/editor/components/ui/link-input-popover.tsx
|
|
7286
|
-
var
|
|
7166
|
+
var import_react27 = require("react");
|
|
7287
7167
|
|
|
7288
7168
|
// src/editor/nodes/variable/variable.ts
|
|
7289
7169
|
var import_core7 = require("@tiptap/core");
|
|
7290
7170
|
var import_state5 = require("@tiptap/pm/state");
|
|
7291
|
-
var
|
|
7171
|
+
var import_react25 = require("@tiptap/react");
|
|
7292
7172
|
var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
|
|
7293
7173
|
|
|
7294
7174
|
// src/editor/nodes/variable/variable-suggestions-popover.tsx
|
|
7295
|
-
var
|
|
7296
|
-
var
|
|
7297
|
-
var
|
|
7298
|
-
var VariableSuggestionsPopover = (0,
|
|
7175
|
+
var import_lucide_react19 = require("lucide-react");
|
|
7176
|
+
var import_react22 = require("react");
|
|
7177
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
7178
|
+
var VariableSuggestionsPopover = (0, import_react22.forwardRef)((props, ref) => {
|
|
7299
7179
|
const { items, onSelectItem } = props;
|
|
7300
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
7301
|
-
const scrollContainerRef = (0,
|
|
7302
|
-
const itemRefs = (0,
|
|
7180
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
|
|
7181
|
+
const scrollContainerRef = (0, import_react22.useRef)(null);
|
|
7182
|
+
const itemRefs = (0, import_react22.useRef)([]);
|
|
7303
7183
|
const scrollSelectedIntoView = (index) => {
|
|
7304
7184
|
const container = scrollContainerRef.current;
|
|
7305
7185
|
const selectedItem = itemRefs.current[index];
|
|
@@ -7315,17 +7195,17 @@ var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) =>
|
|
|
7315
7195
|
container.scrollTop += itemRect.top - containerRect.top - padding;
|
|
7316
7196
|
}
|
|
7317
7197
|
};
|
|
7318
|
-
(0,
|
|
7198
|
+
(0, import_react22.useEffect)(() => {
|
|
7319
7199
|
setSelectedIndex(0);
|
|
7320
7200
|
if (scrollContainerRef.current) {
|
|
7321
7201
|
scrollContainerRef.current.scrollTop = 0;
|
|
7322
7202
|
}
|
|
7323
7203
|
itemRefs.current = items.map(() => null);
|
|
7324
7204
|
}, [items]);
|
|
7325
|
-
(0,
|
|
7205
|
+
(0, import_react22.useEffect)(() => {
|
|
7326
7206
|
scrollSelectedIntoView(selectedIndex);
|
|
7327
7207
|
}, [selectedIndex]);
|
|
7328
|
-
(0,
|
|
7208
|
+
(0, import_react22.useImperativeHandle)(ref, () => ({
|
|
7329
7209
|
moveUp: () => {
|
|
7330
7210
|
setSelectedIndex((selectedIndex + items.length - 1) % items.length);
|
|
7331
7211
|
},
|
|
@@ -7340,17 +7220,17 @@ var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) =>
|
|
|
7340
7220
|
onSelectItem(item);
|
|
7341
7221
|
}
|
|
7342
7222
|
}));
|
|
7343
|
-
return /* @__PURE__ */ (0,
|
|
7344
|
-
/* @__PURE__ */ (0,
|
|
7345
|
-
/* @__PURE__ */ (0,
|
|
7346
|
-
/* @__PURE__ */ (0,
|
|
7223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:z-50 mly:w-64 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
|
|
7224
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-b mly:border-gray-200 mly:bg-soft-gray/40 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
|
|
7225
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly:text-xs mly:uppercase", children: "Variables" }),
|
|
7226
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.Braces, { className: "mly:size-3 mly:stroke-[2.5]" }) })
|
|
7347
7227
|
] }),
|
|
7348
|
-
/* @__PURE__ */ (0,
|
|
7228
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
7349
7229
|
"div",
|
|
7350
7230
|
{
|
|
7351
7231
|
ref: scrollContainerRef,
|
|
7352
7232
|
className: "mly:max-h-52 mly:overflow-y-auto mly:scrollbar-thin mly:scrollbar-track-transparent mly:scrollbar-thumb-gray-200",
|
|
7353
|
-
children: /* @__PURE__ */ (0,
|
|
7233
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mly:flex mly:w-fit mly:min-w-full mly:flex-col mly:gap-0.5 mly:p-1", children: (items == null ? void 0 : items.length) ? items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
7354
7234
|
"button",
|
|
7355
7235
|
{
|
|
7356
7236
|
ref: (el) => itemRefs.current[index] = el,
|
|
@@ -7360,27 +7240,27 @@ var VariableSuggestionsPopover = (0, import_react25.forwardRef)((props, ref) =>
|
|
|
7360
7240
|
index === selectedIndex ? "mly:bg-soft-gray" : "mly:bg-white"
|
|
7361
7241
|
),
|
|
7362
7242
|
children: [
|
|
7363
|
-
/* @__PURE__ */ (0,
|
|
7243
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.Braces, { className: "mly:size-3 mly:stroke-[2.5] mly:text-rose-600" }),
|
|
7364
7244
|
(item == null ? void 0 : item.label) || item.name
|
|
7365
7245
|
]
|
|
7366
7246
|
},
|
|
7367
7247
|
index
|
|
7368
|
-
)) : /* @__PURE__ */ (0,
|
|
7248
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mly:flex mly:h-7 mly:w-full mly:items-center mly:gap-2 mly:rounded-md mly:px-2 mly:py-1 mly:text-left mly:font-mono mly:text-[13px] mly:text-gray-900 mly:hover:bg-soft-gray", children: "No result" }) })
|
|
7369
7249
|
}
|
|
7370
7250
|
),
|
|
7371
|
-
/* @__PURE__ */ (0,
|
|
7372
|
-
/* @__PURE__ */ (0,
|
|
7373
|
-
/* @__PURE__ */ (0,
|
|
7374
|
-
/* @__PURE__ */ (0,
|
|
7375
|
-
/* @__PURE__ */ (0,
|
|
7251
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:justify-between mly:gap-2 mly:border-t mly:border-gray-200 mly:px-1 mly:py-1.5 mly:text-gray-500", children: [
|
|
7252
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1", children: [
|
|
7253
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ArrowDownIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
|
|
7254
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ArrowUpIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) }),
|
|
7255
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mly:text-xs mly:text-gray-500", children: "Navigate" })
|
|
7376
7256
|
] }),
|
|
7377
|
-
/* @__PURE__ */ (0,
|
|
7257
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.CornerDownLeftIcon, { className: "mly:size-3 mly:stroke-[2.5]" }) })
|
|
7378
7258
|
] })
|
|
7379
7259
|
] });
|
|
7380
7260
|
});
|
|
7381
7261
|
function VariableIcon(props) {
|
|
7382
7262
|
const { className, children } = props;
|
|
7383
|
-
return /* @__PURE__ */ (0,
|
|
7263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
7384
7264
|
"div",
|
|
7385
7265
|
{
|
|
7386
7266
|
className: cn(
|
|
@@ -7393,10 +7273,10 @@ function VariableIcon(props) {
|
|
|
7393
7273
|
}
|
|
7394
7274
|
|
|
7395
7275
|
// src/editor/nodes/variable/variable-view.tsx
|
|
7396
|
-
var
|
|
7397
|
-
var
|
|
7398
|
-
var
|
|
7399
|
-
var
|
|
7276
|
+
var import_react23 = require("@tiptap/react");
|
|
7277
|
+
var import_lucide_react20 = require("lucide-react");
|
|
7278
|
+
var import_react24 = require("react");
|
|
7279
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
7400
7280
|
function VariableView(props) {
|
|
7401
7281
|
const { node, updateAttributes: updateAttributes2, editor } = props;
|
|
7402
7282
|
const {
|
|
@@ -7406,24 +7286,24 @@ function VariableView(props) {
|
|
|
7406
7286
|
hideDefaultValue = false,
|
|
7407
7287
|
label
|
|
7408
7288
|
} = node.attrs;
|
|
7409
|
-
const renderVariable = (0,
|
|
7289
|
+
const renderVariable = (0, import_react24.useMemo)(() => {
|
|
7410
7290
|
var _a, _b;
|
|
7411
7291
|
const variableRender = (_b = (_a = getNodeOptions(editor, "variable")) == null ? void 0 : _a.renderVariable) != null ? _b : DEFAULT_RENDER_VARIABLE_FUNCTION;
|
|
7412
7292
|
return variableRender;
|
|
7413
7293
|
}, [editor]);
|
|
7414
|
-
return /* @__PURE__ */ (0,
|
|
7415
|
-
|
|
7294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
7295
|
+
import_react23.NodeViewWrapper,
|
|
7416
7296
|
{
|
|
7417
7297
|
className: "react-component mly:inline-block mly:leading-none",
|
|
7418
7298
|
draggable: "false",
|
|
7419
|
-
children: /* @__PURE__ */ (0,
|
|
7299
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
7420
7300
|
Popover,
|
|
7421
7301
|
{
|
|
7422
7302
|
onOpenChange: (open) => {
|
|
7423
7303
|
editor.storage.variable.popover = open;
|
|
7424
7304
|
},
|
|
7425
7305
|
children: [
|
|
7426
|
-
/* @__PURE__ */ (0,
|
|
7306
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { children: renderVariable({
|
|
7427
7307
|
variable: {
|
|
7428
7308
|
name: id,
|
|
7429
7309
|
required,
|
|
@@ -7434,7 +7314,7 @@ function VariableView(props) {
|
|
|
7434
7314
|
editor,
|
|
7435
7315
|
from: "content-variable"
|
|
7436
7316
|
}) }),
|
|
7437
|
-
/* @__PURE__ */ (0,
|
|
7317
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
7438
7318
|
PopoverContent,
|
|
7439
7319
|
{
|
|
7440
7320
|
align: "start",
|
|
@@ -7443,10 +7323,10 @@ function VariableView(props) {
|
|
|
7443
7323
|
sideOffset: 8,
|
|
7444
7324
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
7445
7325
|
onCloseAutoFocus: (e) => e.preventDefault(),
|
|
7446
|
-
children: /* @__PURE__ */ (0,
|
|
7447
|
-
/* @__PURE__ */ (0,
|
|
7448
|
-
/* @__PURE__ */ (0,
|
|
7449
|
-
/* @__PURE__ */ (0,
|
|
7326
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
|
|
7327
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "mly:relative", children: [
|
|
7328
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:inline-block mly:px-2 mly:text-xs mly:text-midnight-gray", children: "Variable" }),
|
|
7329
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
7450
7330
|
"input",
|
|
7451
7331
|
__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
|
|
7452
7332
|
value: id != null ? id : "",
|
|
@@ -7460,11 +7340,11 @@ function VariableView(props) {
|
|
|
7460
7340
|
})
|
|
7461
7341
|
)
|
|
7462
7342
|
] }),
|
|
7463
|
-
!hideDefaultValue && /* @__PURE__ */ (0,
|
|
7464
|
-
/* @__PURE__ */ (0,
|
|
7465
|
-
/* @__PURE__ */ (0,
|
|
7466
|
-
/* @__PURE__ */ (0,
|
|
7467
|
-
/* @__PURE__ */ (0,
|
|
7343
|
+
!hideDefaultValue && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
7344
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, { className: "mly:mx-1.5" }),
|
|
7345
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "mly:relative", children: [
|
|
7346
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:inline-block mly:px-2 mly:pl-1 mly:text-xs mly:text-midnight-gray", children: "Default" }),
|
|
7347
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
7468
7348
|
"input",
|
|
7469
7349
|
__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
|
|
7470
7350
|
value: fallback != null ? fallback : "",
|
|
@@ -7477,7 +7357,7 @@ function VariableView(props) {
|
|
|
7477
7357
|
className: "mly:h-7 mly:w-32 mly:rounded-md mly:bg-soft-gray mly:px-2 mly:pr-6 mly:text-sm mly:text-midnight-gray mly:focus:bg-soft-gray mly:focus:outline-none"
|
|
7478
7358
|
})
|
|
7479
7359
|
),
|
|
7480
|
-
/* @__PURE__ */ (0,
|
|
7360
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Pencil, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) })
|
|
7481
7361
|
] })
|
|
7482
7362
|
] })
|
|
7483
7363
|
] }) })
|
|
@@ -7494,13 +7374,13 @@ var DefaultRenderVariable = (props) => {
|
|
|
7494
7374
|
const { name, required, valid, label } = variable;
|
|
7495
7375
|
const variableLabel = label || name;
|
|
7496
7376
|
if (from === "button-variable") {
|
|
7497
|
-
return /* @__PURE__ */ (0,
|
|
7498
|
-
/* @__PURE__ */ (0,
|
|
7499
|
-
/* @__PURE__ */ (0,
|
|
7377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mly:inline-grid mly:max-w-xs mly:grid-cols-[12px_1fr] mly:items-center mly:gap-1.5 mly:rounded-md mly:border mly:border-(--button-var-border-color) mly:px-2 mly:py-px mly:font-mono mly:text-xs", children: [
|
|
7378
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
|
|
7379
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
|
|
7500
7380
|
] });
|
|
7501
7381
|
}
|
|
7502
7382
|
if (from === "bubble-variable") {
|
|
7503
|
-
return /* @__PURE__ */ (0,
|
|
7383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
7504
7384
|
"div",
|
|
7505
7385
|
{
|
|
7506
7386
|
className: cn(
|
|
@@ -7508,21 +7388,21 @@ var DefaultRenderVariable = (props) => {
|
|
|
7508
7388
|
!valid && "mly:border-rose-400 mly:bg-rose-50 mly:text-rose-600 mly:hover:bg-rose-100"
|
|
7509
7389
|
),
|
|
7510
7390
|
children: [
|
|
7511
|
-
/* @__PURE__ */ (0,
|
|
7512
|
-
/* @__PURE__ */ (0,
|
|
7391
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
|
|
7392
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "mly:min-w-0 mly:truncate mly:text-left", children: variableLabel })
|
|
7513
7393
|
]
|
|
7514
7394
|
}
|
|
7515
7395
|
);
|
|
7516
7396
|
}
|
|
7517
|
-
return /* @__PURE__ */ (0,
|
|
7397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
7518
7398
|
"span",
|
|
7519
7399
|
{
|
|
7520
7400
|
tabIndex: -1,
|
|
7521
7401
|
className: "mly:inline-flex mly:items-center mly:gap-(--variable-icon-gap) mly:rounded-full mly:border mly:border-gray-200 mly:px-1.5 mly:py-0.5 mly:leading-none",
|
|
7522
7402
|
children: [
|
|
7523
|
-
/* @__PURE__ */ (0,
|
|
7403
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.Braces, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5] mly:text-rose-600" }),
|
|
7524
7404
|
variableLabel,
|
|
7525
|
-
required && !fallback && /* @__PURE__ */ (0,
|
|
7405
|
+
required && !fallback && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react20.AlertTriangle, { className: "mly:size-[var(--variable-icon-size)] mly:shrink-0 mly:stroke-[2.5]" })
|
|
7526
7406
|
]
|
|
7527
7407
|
}
|
|
7528
7408
|
);
|
|
@@ -7695,7 +7575,7 @@ var VariableExtension = import_core7.Node.create({
|
|
|
7695
7575
|
];
|
|
7696
7576
|
},
|
|
7697
7577
|
addNodeView() {
|
|
7698
|
-
return (0,
|
|
7578
|
+
return (0, import_react25.ReactNodeViewRenderer)(VariableView, {
|
|
7699
7579
|
className: "mly:relative mly:inline-block",
|
|
7700
7580
|
as: "div"
|
|
7701
7581
|
});
|
|
@@ -7703,26 +7583,26 @@ var VariableExtension = import_core7.Node.create({
|
|
|
7703
7583
|
});
|
|
7704
7584
|
|
|
7705
7585
|
// src/editor/components/ui/link-input-popover.tsx
|
|
7706
|
-
var
|
|
7586
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
7707
7587
|
function LinkInputPopover(props) {
|
|
7708
7588
|
var _a, _b;
|
|
7709
7589
|
const {
|
|
7710
7590
|
defaultValue = "",
|
|
7711
7591
|
onValueChange,
|
|
7712
7592
|
tooltip,
|
|
7713
|
-
icon: Icon =
|
|
7593
|
+
icon: Icon = import_lucide_react21.Link,
|
|
7714
7594
|
editor,
|
|
7715
7595
|
isVariable
|
|
7716
7596
|
} = props;
|
|
7717
|
-
const [isOpen, setIsOpen] = (0,
|
|
7718
|
-
const [isEditing, setIsEditing] = (0,
|
|
7719
|
-
const linkInputRef = (0,
|
|
7597
|
+
const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
|
|
7598
|
+
const [isEditing, setIsEditing] = (0, import_react26.useState)(!isVariable);
|
|
7599
|
+
const linkInputRef = (0, import_react26.useRef)(null);
|
|
7720
7600
|
const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
|
|
7721
7601
|
const options = useVariableOptions(editor);
|
|
7722
7602
|
const renderVariable = options == null ? void 0 : options.renderVariable;
|
|
7723
7603
|
const variables = options == null ? void 0 : options.variables;
|
|
7724
7604
|
const variableTriggerCharacter = (_b = (_a = options == null ? void 0 : options.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
|
|
7725
|
-
const autoCompleteOptions = (0,
|
|
7605
|
+
const autoCompleteOptions = (0, import_react27.useMemo)(() => {
|
|
7726
7606
|
const withoutTrigger = defaultValue.replace(
|
|
7727
7607
|
new RegExp(variableTriggerCharacter, "g"),
|
|
7728
7608
|
""
|
|
@@ -7733,7 +7613,7 @@ function LinkInputPopover(props) {
|
|
|
7733
7613
|
editor
|
|
7734
7614
|
}).map((variable) => variable.name);
|
|
7735
7615
|
}, [variables, variableTriggerCharacter, defaultValue, editor]);
|
|
7736
|
-
const popoverButton = /* @__PURE__ */ (0,
|
|
7616
|
+
const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7737
7617
|
BaseButton,
|
|
7738
7618
|
{
|
|
7739
7619
|
variant: "ghost",
|
|
@@ -7741,10 +7621,10 @@ function LinkInputPopover(props) {
|
|
|
7741
7621
|
type: "button",
|
|
7742
7622
|
className: "mly:h-7! mly:w-7!",
|
|
7743
7623
|
"data-state": !!defaultValue,
|
|
7744
|
-
children: /* @__PURE__ */ (0,
|
|
7624
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5] mly:text-midnight-gray" })
|
|
7745
7625
|
}
|
|
7746
7626
|
) });
|
|
7747
|
-
return /* @__PURE__ */ (0,
|
|
7627
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
7748
7628
|
Popover,
|
|
7749
7629
|
{
|
|
7750
7630
|
open: isOpen,
|
|
@@ -7758,11 +7638,11 @@ function LinkInputPopover(props) {
|
|
|
7758
7638
|
}
|
|
7759
7639
|
},
|
|
7760
7640
|
children: [
|
|
7761
|
-
tooltip ? /* @__PURE__ */ (0,
|
|
7762
|
-
/* @__PURE__ */ (0,
|
|
7763
|
-
/* @__PURE__ */ (0,
|
|
7641
|
+
tooltip ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tooltip, { children: [
|
|
7642
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
|
|
7643
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
|
|
7764
7644
|
] }) : popoverButton,
|
|
7765
|
-
/* @__PURE__ */ (0,
|
|
7645
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7766
7646
|
PopoverContent,
|
|
7767
7647
|
{
|
|
7768
7648
|
align: "end",
|
|
@@ -7770,7 +7650,7 @@ function LinkInputPopover(props) {
|
|
|
7770
7650
|
className: "mly:w-max mly:rounded-none mly:border-none mly:bg-transparent mly:p-0! mly:shadow-none",
|
|
7771
7651
|
sideOffset: 8,
|
|
7772
7652
|
onCloseAutoFocus: (e) => e.preventDefault(),
|
|
7773
|
-
children: /* @__PURE__ */ (0,
|
|
7653
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7774
7654
|
"form",
|
|
7775
7655
|
{
|
|
7776
7656
|
onSubmit: (e) => {
|
|
@@ -7782,8 +7662,8 @@ function LinkInputPopover(props) {
|
|
|
7782
7662
|
onValueChange == null ? void 0 : onValueChange(input.value);
|
|
7783
7663
|
setIsOpen(false);
|
|
7784
7664
|
},
|
|
7785
|
-
children: /* @__PURE__ */ (0,
|
|
7786
|
-
!isEditing && /* @__PURE__ */ (0,
|
|
7665
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:isolate mly:flex mly:rounded-lg", children: [
|
|
7666
|
+
!isEditing && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:flex mly:h-8 mly:items-center mly:rounded-lg mly:border mly:border-gray-300 mly:bg-white mly:px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7787
7667
|
"button",
|
|
7788
7668
|
{
|
|
7789
7669
|
onClick: () => {
|
|
@@ -7804,9 +7684,9 @@ function LinkInputPopover(props) {
|
|
|
7804
7684
|
})
|
|
7805
7685
|
}
|
|
7806
7686
|
) }),
|
|
7807
|
-
isEditing && /* @__PURE__ */ (0,
|
|
7808
|
-
/* @__PURE__ */ (0,
|
|
7809
|
-
/* @__PURE__ */ (0,
|
|
7687
|
+
isEditing && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mly:relative", children: [
|
|
7688
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mly:absolute mly:inset-y-0 mly:left-1.5 mly:z-10 mly:flex mly:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react21.LinkIcon, { className: "mly:h-3 mly:w-3 mly:stroke-[2.5] mly:text-midnight-gray" }) }),
|
|
7689
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7810
7690
|
InputAutocomplete,
|
|
7811
7691
|
{
|
|
7812
7692
|
editor,
|
|
@@ -7842,12 +7722,12 @@ function LinkInputPopover(props) {
|
|
|
7842
7722
|
}
|
|
7843
7723
|
|
|
7844
7724
|
// src/editor/components/image-menu/image-size.tsx
|
|
7845
|
-
var
|
|
7725
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
7846
7726
|
function ImageSize(props) {
|
|
7847
7727
|
const { value, onValueChange, dimension } = props;
|
|
7848
|
-
return /* @__PURE__ */ (0,
|
|
7849
|
-
/* @__PURE__ */ (0,
|
|
7850
|
-
/* @__PURE__ */ (0,
|
|
7728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "mly:relative mly:flex mly:items-center", children: [
|
|
7729
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:left-2 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: dimension === "width" ? "W" : "H" }),
|
|
7730
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
7851
7731
|
"input",
|
|
7852
7732
|
__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
|
|
7853
7733
|
className: "hide-number-controls mly:h-auto mly:max-w-20 mly:appearance-none mly:border-0 mly:border-none mly:p-1 mly:px-[26px] mly:text-sm mly:uppercase mly:tabular-nums mly:outline-hidden mly:focus-visible:outline-hidden",
|
|
@@ -7856,15 +7736,15 @@ function ImageSize(props) {
|
|
|
7856
7736
|
onChange: (e) => onValueChange(e.target.value)
|
|
7857
7737
|
})
|
|
7858
7738
|
),
|
|
7859
|
-
/* @__PURE__ */ (0,
|
|
7739
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mly:absolute mly:inset-y-0 mly:right-1 mly:flex mly:items-center mly:text-xs mly:leading-none mly:text-gray-400", children: "PX" })
|
|
7860
7740
|
] });
|
|
7861
7741
|
}
|
|
7862
7742
|
|
|
7863
7743
|
// src/editor/components/image-menu/use-image-state.tsx
|
|
7864
|
-
var
|
|
7865
|
-
var
|
|
7744
|
+
var import_react28 = require("@tiptap/react");
|
|
7745
|
+
var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"), 1);
|
|
7866
7746
|
var useImageState = (editor) => {
|
|
7867
|
-
const states = (0,
|
|
7747
|
+
const states = (0, import_react28.useEditorState)({
|
|
7868
7748
|
editor,
|
|
7869
7749
|
selector: ({ editor: editor2 }) => {
|
|
7870
7750
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
|
|
@@ -7885,13 +7765,13 @@ var useImageState = (editor) => {
|
|
|
7885
7765
|
currentShowIfKey: ((_o = editor2.getAttributes("image")) == null ? void 0 : _o.showIfKey) || ((_p = editor2.getAttributes("logo")) == null ? void 0 : _p.showIfKey) || ""
|
|
7886
7766
|
};
|
|
7887
7767
|
},
|
|
7888
|
-
equalityFn:
|
|
7768
|
+
equalityFn: import_fast_deep_equal2.default
|
|
7889
7769
|
});
|
|
7890
7770
|
return states;
|
|
7891
7771
|
};
|
|
7892
7772
|
|
|
7893
7773
|
// src/editor/components/image-menu/image-bubble-menu.tsx
|
|
7894
|
-
var
|
|
7774
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
7895
7775
|
function ImageBubbleMenu(props) {
|
|
7896
7776
|
var _a, _b, _c, _d;
|
|
7897
7777
|
const { editor, appendTo } = props;
|
|
@@ -7910,19 +7790,19 @@ function ImageBubbleMenu(props) {
|
|
|
7910
7790
|
popperOptions: {
|
|
7911
7791
|
modifiers: [{ name: "flip", enabled: false }]
|
|
7912
7792
|
},
|
|
7913
|
-
plugins: [
|
|
7793
|
+
plugins: [import_tippy3.sticky],
|
|
7914
7794
|
sticky: "popper",
|
|
7915
7795
|
maxWidth: "100%"
|
|
7916
7796
|
}
|
|
7917
7797
|
});
|
|
7918
7798
|
const { lockAspectRatio } = state;
|
|
7919
|
-
return /* @__PURE__ */ (0,
|
|
7920
|
-
|
|
7799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7800
|
+
import_react29.BubbleMenu,
|
|
7921
7801
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
7922
7802
|
className: "mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
7923
|
-
children: /* @__PURE__ */ (0,
|
|
7924
|
-
state.isLogoActive && state.imageSrc && /* @__PURE__ */ (0,
|
|
7925
|
-
/* @__PURE__ */ (0,
|
|
7803
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(TooltipProvider, { children: [
|
|
7804
|
+
state.isLogoActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
7805
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7926
7806
|
Select,
|
|
7927
7807
|
{
|
|
7928
7808
|
label: "Size",
|
|
@@ -7937,10 +7817,10 @@ function ImageBubbleMenu(props) {
|
|
|
7937
7817
|
}
|
|
7938
7818
|
}
|
|
7939
7819
|
),
|
|
7940
|
-
/* @__PURE__ */ (0,
|
|
7820
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {})
|
|
7941
7821
|
] }),
|
|
7942
|
-
/* @__PURE__ */ (0,
|
|
7943
|
-
/* @__PURE__ */ (0,
|
|
7822
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
7823
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7944
7824
|
AlignmentSwitch,
|
|
7945
7825
|
{
|
|
7946
7826
|
alignment: state.alignment,
|
|
@@ -7954,7 +7834,7 @@ function ImageBubbleMenu(props) {
|
|
|
7954
7834
|
}
|
|
7955
7835
|
}
|
|
7956
7836
|
),
|
|
7957
|
-
/* @__PURE__ */ (0,
|
|
7837
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7958
7838
|
LinkInputPopover,
|
|
7959
7839
|
{
|
|
7960
7840
|
defaultValue: (_a = state == null ? void 0 : state.imageSrc) != null ? _a : "",
|
|
@@ -7972,12 +7852,12 @@ function ImageBubbleMenu(props) {
|
|
|
7972
7852
|
}
|
|
7973
7853
|
},
|
|
7974
7854
|
tooltip: "Source URL",
|
|
7975
|
-
icon:
|
|
7855
|
+
icon: import_lucide_react22.ImageDown,
|
|
7976
7856
|
editor,
|
|
7977
7857
|
isVariable: state.isSrcVariable
|
|
7978
7858
|
}
|
|
7979
7859
|
),
|
|
7980
|
-
state.isImageActive && /* @__PURE__ */ (0,
|
|
7860
|
+
state.isImageActive && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7981
7861
|
LinkInputPopover,
|
|
7982
7862
|
{
|
|
7983
7863
|
defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
|
|
@@ -7993,9 +7873,9 @@ function ImageBubbleMenu(props) {
|
|
|
7993
7873
|
}
|
|
7994
7874
|
)
|
|
7995
7875
|
] }),
|
|
7996
|
-
state.isImageActive && state.imageSrc && /* @__PURE__ */ (0,
|
|
7997
|
-
/* @__PURE__ */ (0,
|
|
7998
|
-
/* @__PURE__ */ (0,
|
|
7876
|
+
state.isImageActive && state.imageSrc && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
7877
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {}),
|
|
7878
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
7999
7879
|
Select,
|
|
8000
7880
|
{
|
|
8001
7881
|
label: "Border Radius",
|
|
@@ -8013,8 +7893,8 @@ function ImageBubbleMenu(props) {
|
|
|
8013
7893
|
className: "mly:capitalize"
|
|
8014
7894
|
}
|
|
8015
7895
|
),
|
|
8016
|
-
/* @__PURE__ */ (0,
|
|
8017
|
-
/* @__PURE__ */ (0,
|
|
7896
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
7897
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
8018
7898
|
ImageSize,
|
|
8019
7899
|
{
|
|
8020
7900
|
dimension: "width",
|
|
@@ -8034,7 +7914,7 @@ function ImageBubbleMenu(props) {
|
|
|
8034
7914
|
}
|
|
8035
7915
|
}
|
|
8036
7916
|
),
|
|
8037
|
-
/* @__PURE__ */ (0,
|
|
7917
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
8038
7918
|
ImageSize,
|
|
8039
7919
|
{
|
|
8040
7920
|
dimension: "height",
|
|
@@ -8054,7 +7934,7 @@ function ImageBubbleMenu(props) {
|
|
|
8054
7934
|
}
|
|
8055
7935
|
}
|
|
8056
7936
|
),
|
|
8057
|
-
/* @__PURE__ */ (0,
|
|
7937
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
8058
7938
|
BubbleMenuButton,
|
|
8059
7939
|
{
|
|
8060
7940
|
isActive: () => lockAspectRatio,
|
|
@@ -8067,7 +7947,7 @@ function ImageBubbleMenu(props) {
|
|
|
8067
7947
|
aspectRatio
|
|
8068
7948
|
}).run();
|
|
8069
7949
|
},
|
|
8070
|
-
icon: lockAspectRatio ?
|
|
7950
|
+
icon: lockAspectRatio ? import_lucide_react22.LockIcon : import_lucide_react22.LockOpenIcon,
|
|
8071
7951
|
tooltip: "Lock Aspect Ratio"
|
|
8072
7952
|
}
|
|
8073
7953
|
)
|
|
@@ -8079,8 +7959,8 @@ function ImageBubbleMenu(props) {
|
|
|
8079
7959
|
}
|
|
8080
7960
|
|
|
8081
7961
|
// src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
|
|
8082
|
-
var
|
|
8083
|
-
var
|
|
7962
|
+
var import_react31 = require("@tiptap/react");
|
|
7963
|
+
var import_tippy4 = require("tippy.js");
|
|
8084
7964
|
|
|
8085
7965
|
// src/editor/nodes/inline-image/inline-image.tsx
|
|
8086
7966
|
var import_core8 = require("@tiptap/core");
|
|
@@ -8197,10 +8077,10 @@ var InlineImageExtension = import_core8.Node.create({
|
|
|
8197
8077
|
});
|
|
8198
8078
|
|
|
8199
8079
|
// src/editor/components/inline-image-menu/use-inline-image-state.tsx
|
|
8200
|
-
var
|
|
8201
|
-
var
|
|
8080
|
+
var import_react30 = require("@tiptap/react");
|
|
8081
|
+
var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"), 1);
|
|
8202
8082
|
var useInlineImageState = (editor) => {
|
|
8203
|
-
const states = (0,
|
|
8083
|
+
const states = (0, import_react30.useEditorState)({
|
|
8204
8084
|
editor,
|
|
8205
8085
|
selector: ({ editor: editor2 }) => {
|
|
8206
8086
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -8213,14 +8093,14 @@ var useInlineImageState = (editor) => {
|
|
|
8213
8093
|
isExternalLinkVariable: (_h = (_g = editor2.getAttributes("inlineImage")) == null ? void 0 : _g.isExternalLinkVariable) != null ? _h : false
|
|
8214
8094
|
};
|
|
8215
8095
|
},
|
|
8216
|
-
equalityFn:
|
|
8096
|
+
equalityFn: import_fast_deep_equal3.default
|
|
8217
8097
|
});
|
|
8218
8098
|
return states;
|
|
8219
8099
|
};
|
|
8220
8100
|
|
|
8221
8101
|
// src/editor/components/inline-image-menu/inline-image-bubble-menu.tsx
|
|
8222
|
-
var
|
|
8223
|
-
var
|
|
8102
|
+
var import_lucide_react23 = require("lucide-react");
|
|
8103
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
8224
8104
|
function InlineImageBubbleMenu(props) {
|
|
8225
8105
|
var _a, _b;
|
|
8226
8106
|
const { editor, appendTo } = props;
|
|
@@ -8239,17 +8119,17 @@ function InlineImageBubbleMenu(props) {
|
|
|
8239
8119
|
popperOptions: {
|
|
8240
8120
|
modifiers: [{ name: "flip", enabled: false }]
|
|
8241
8121
|
},
|
|
8242
|
-
plugins: [
|
|
8122
|
+
plugins: [import_tippy4.sticky],
|
|
8243
8123
|
sticky: "popper",
|
|
8244
8124
|
maxWidth: "100%"
|
|
8245
8125
|
}
|
|
8246
8126
|
});
|
|
8247
|
-
return /* @__PURE__ */ (0,
|
|
8248
|
-
|
|
8127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
8128
|
+
import_react31.BubbleMenu,
|
|
8249
8129
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
8250
8130
|
className: "mly:flex mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
8251
|
-
children: /* @__PURE__ */ (0,
|
|
8252
|
-
/* @__PURE__ */ (0,
|
|
8131
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
8132
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
8253
8133
|
LinkInputPopover,
|
|
8254
8134
|
{
|
|
8255
8135
|
defaultValue: (_a = state == null ? void 0 : state.src) != null ? _a : "",
|
|
@@ -8260,12 +8140,12 @@ function InlineImageBubbleMenu(props) {
|
|
|
8260
8140
|
}).run();
|
|
8261
8141
|
},
|
|
8262
8142
|
tooltip: "Source URL",
|
|
8263
|
-
icon:
|
|
8143
|
+
icon: import_lucide_react23.ImageDownIcon,
|
|
8264
8144
|
editor,
|
|
8265
8145
|
isVariable: state.isSrcVariable
|
|
8266
8146
|
}
|
|
8267
8147
|
),
|
|
8268
|
-
/* @__PURE__ */ (0,
|
|
8148
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
8269
8149
|
LinkInputPopover,
|
|
8270
8150
|
{
|
|
8271
8151
|
defaultValue: (_b = state == null ? void 0 : state.imageExternalLink) != null ? _b : "",
|
|
@@ -8280,7 +8160,7 @@ function InlineImageBubbleMenu(props) {
|
|
|
8280
8160
|
isVariable: state.isExternalLinkVariable
|
|
8281
8161
|
}
|
|
8282
8162
|
),
|
|
8283
|
-
/* @__PURE__ */ (0,
|
|
8163
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
8284
8164
|
ImageSize,
|
|
8285
8165
|
{
|
|
8286
8166
|
dimension: "height",
|
|
@@ -8299,16 +8179,16 @@ function InlineImageBubbleMenu(props) {
|
|
|
8299
8179
|
}
|
|
8300
8180
|
|
|
8301
8181
|
// src/editor/components/repeat-menu/repeat-bubble-menu.tsx
|
|
8302
|
-
var
|
|
8303
|
-
var
|
|
8304
|
-
var
|
|
8305
|
-
var
|
|
8182
|
+
var import_react33 = require("@tiptap/react");
|
|
8183
|
+
var import_lucide_react24 = require("lucide-react");
|
|
8184
|
+
var import_react34 = require("react");
|
|
8185
|
+
var import_tippy5 = require("tippy.js");
|
|
8306
8186
|
|
|
8307
8187
|
// src/editor/components/repeat-menu/use-repeat-state.ts
|
|
8308
|
-
var
|
|
8309
|
-
var
|
|
8188
|
+
var import_react32 = require("@tiptap/react");
|
|
8189
|
+
var import_fast_deep_equal4 = __toESM(require("fast-deep-equal"), 1);
|
|
8310
8190
|
var useRepeatState = (editor) => {
|
|
8311
|
-
const states = (0,
|
|
8191
|
+
const states = (0, import_react32.useEditorState)({
|
|
8312
8192
|
editor,
|
|
8313
8193
|
selector: (ctx) => {
|
|
8314
8194
|
var _a, _b;
|
|
@@ -8318,20 +8198,20 @@ var useRepeatState = (editor) => {
|
|
|
8318
8198
|
isSectionActive: ctx.editor.isActive("section")
|
|
8319
8199
|
};
|
|
8320
8200
|
},
|
|
8321
|
-
equalityFn:
|
|
8201
|
+
equalityFn: import_fast_deep_equal4.default
|
|
8322
8202
|
});
|
|
8323
8203
|
return states;
|
|
8324
8204
|
};
|
|
8325
8205
|
|
|
8326
8206
|
// src/editor/components/repeat-menu/repeat-bubble-menu.tsx
|
|
8327
|
-
var
|
|
8207
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
8328
8208
|
function RepeatBubbleMenu(props) {
|
|
8329
8209
|
const { appendTo, editor } = props;
|
|
8330
8210
|
if (!editor) {
|
|
8331
8211
|
return null;
|
|
8332
8212
|
}
|
|
8333
8213
|
const state = useRepeatState(editor);
|
|
8334
|
-
const getReferenceClientRect = (0,
|
|
8214
|
+
const getReferenceClientRect = (0, import_react34.useCallback)(() => {
|
|
8335
8215
|
const renderContainer = getRenderContainer(editor, "repeat");
|
|
8336
8216
|
const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
|
|
8337
8217
|
return rect;
|
|
@@ -8340,7 +8220,7 @@ function RepeatBubbleMenu(props) {
|
|
|
8340
8220
|
shouldShow: ({ editor: editor2 }) => {
|
|
8341
8221
|
var _a;
|
|
8342
8222
|
const activeForNode = getClosestNodeByName(editor2, "repeat");
|
|
8343
|
-
const sectionNodeChildren = activeForNode ? (_a = (0,
|
|
8223
|
+
const sectionNodeChildren = activeForNode ? (_a = (0, import_react33.findChildren)(activeForNode == null ? void 0 : activeForNode.node, (node) => {
|
|
8344
8224
|
return node.type.name === "section";
|
|
8345
8225
|
})) == null ? void 0 : _a[0] : null;
|
|
8346
8226
|
const hasActiveSectionNodeChildren = sectionNodeChildren && editor2.isActive("section");
|
|
@@ -8356,7 +8236,7 @@ function RepeatBubbleMenu(props) {
|
|
|
8356
8236
|
},
|
|
8357
8237
|
getReferenceClientRect,
|
|
8358
8238
|
appendTo: () => appendTo == null ? void 0 : appendTo.current,
|
|
8359
|
-
plugins: [
|
|
8239
|
+
plugins: [import_tippy5.sticky],
|
|
8360
8240
|
sticky: "popper",
|
|
8361
8241
|
maxWidth: "auto"
|
|
8362
8242
|
},
|
|
@@ -8365,10 +8245,10 @@ function RepeatBubbleMenu(props) {
|
|
|
8365
8245
|
const opts = useVariableOptions(editor);
|
|
8366
8246
|
const variables = opts == null ? void 0 : opts.variables;
|
|
8367
8247
|
const renderVariable = opts == null ? void 0 : opts.renderVariable;
|
|
8368
|
-
const inputRef = (0,
|
|
8369
|
-
const [isUpdatingKey, setIsUpdatingKey] = (0,
|
|
8248
|
+
const inputRef = (0, import_react34.useRef)(null);
|
|
8249
|
+
const [isUpdatingKey, setIsUpdatingKey] = (0, import_react34.useState)(false);
|
|
8370
8250
|
const eachKey = (state == null ? void 0 : state.each) || "";
|
|
8371
|
-
const autoCompleteOptions = (0,
|
|
8251
|
+
const autoCompleteOptions = (0, import_react34.useMemo)(() => {
|
|
8372
8252
|
return processVariables(variables, {
|
|
8373
8253
|
query: eachKey || "",
|
|
8374
8254
|
editor,
|
|
@@ -8376,21 +8256,21 @@ function RepeatBubbleMenu(props) {
|
|
|
8376
8256
|
}).map((variable) => variable.name);
|
|
8377
8257
|
}, [variables, eachKey, editor]);
|
|
8378
8258
|
const isValidEachKey = eachKey;
|
|
8379
|
-
return /* @__PURE__ */ (0,
|
|
8380
|
-
|
|
8259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8260
|
+
import_react33.BubbleMenu,
|
|
8381
8261
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
8382
8262
|
className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
8383
|
-
children: /* @__PURE__ */ (0,
|
|
8384
|
-
/* @__PURE__ */ (0,
|
|
8263
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipProvider, { children: [
|
|
8264
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mly:flex mly:items-center mly:gap-1.5 mly:px-1.5 mly:text-sm mly:leading-none", children: [
|
|
8385
8265
|
"Repeat",
|
|
8386
|
-
/* @__PURE__ */ (0,
|
|
8387
|
-
/* @__PURE__ */ (0,
|
|
8388
|
-
|
|
8266
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Tooltip, { children: [
|
|
8267
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8268
|
+
import_lucide_react24.InfoIcon,
|
|
8389
8269
|
{
|
|
8390
8270
|
className: cn("mly:size-3 mly:stroke-[2.5] mly:text-gray-500")
|
|
8391
8271
|
}
|
|
8392
8272
|
) }),
|
|
8393
|
-
/* @__PURE__ */ (0,
|
|
8273
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8394
8274
|
TooltipContent,
|
|
8395
8275
|
{
|
|
8396
8276
|
sideOffset: 14,
|
|
@@ -8401,7 +8281,7 @@ function RepeatBubbleMenu(props) {
|
|
|
8401
8281
|
)
|
|
8402
8282
|
] })
|
|
8403
8283
|
] }),
|
|
8404
|
-
!isUpdatingKey && /* @__PURE__ */ (0,
|
|
8284
|
+
!isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8405
8285
|
"button",
|
|
8406
8286
|
{
|
|
8407
8287
|
onClick: () => {
|
|
@@ -8422,7 +8302,7 @@ function RepeatBubbleMenu(props) {
|
|
|
8422
8302
|
})
|
|
8423
8303
|
}
|
|
8424
8304
|
),
|
|
8425
|
-
isUpdatingKey && /* @__PURE__ */ (0,
|
|
8305
|
+
isUpdatingKey && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8426
8306
|
"form",
|
|
8427
8307
|
{
|
|
8428
8308
|
onSubmit: (e) => {
|
|
@@ -8434,7 +8314,7 @@ function RepeatBubbleMenu(props) {
|
|
|
8434
8314
|
setIsUpdatingKey(false);
|
|
8435
8315
|
}
|
|
8436
8316
|
},
|
|
8437
|
-
children: /* @__PURE__ */ (0,
|
|
8317
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8438
8318
|
InputAutocomplete,
|
|
8439
8319
|
{
|
|
8440
8320
|
editor,
|
|
@@ -8460,8 +8340,8 @@ function RepeatBubbleMenu(props) {
|
|
|
8460
8340
|
)
|
|
8461
8341
|
}
|
|
8462
8342
|
),
|
|
8463
|
-
/* @__PURE__ */ (0,
|
|
8464
|
-
/* @__PURE__ */ (0,
|
|
8343
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Divider, {}),
|
|
8344
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8465
8345
|
ShowPopover,
|
|
8466
8346
|
{
|
|
8467
8347
|
showIfKey: state.currentShowIfKey,
|
|
@@ -8479,16 +8359,16 @@ function RepeatBubbleMenu(props) {
|
|
|
8479
8359
|
}
|
|
8480
8360
|
|
|
8481
8361
|
// src/editor/components/section-menu/section-bubble-menu.tsx
|
|
8482
|
-
var
|
|
8483
|
-
var
|
|
8484
|
-
var
|
|
8485
|
-
var
|
|
8362
|
+
var import_react36 = require("@tiptap/react");
|
|
8363
|
+
var import_lucide_react25 = require("lucide-react");
|
|
8364
|
+
var import_react37 = require("react");
|
|
8365
|
+
var import_tippy6 = require("tippy.js");
|
|
8486
8366
|
|
|
8487
8367
|
// src/editor/components/icons/border-color.tsx
|
|
8488
|
-
var
|
|
8368
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
8489
8369
|
function BorderColor(props) {
|
|
8490
8370
|
const _a = props, { topBarClassName } = _a, rest = __objRest(_a, ["topBarClassName"]);
|
|
8491
|
-
return /* @__PURE__ */ (0,
|
|
8371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
8492
8372
|
"svg",
|
|
8493
8373
|
__spreadProps(__spreadValues({
|
|
8494
8374
|
width: 11,
|
|
@@ -8498,8 +8378,8 @@ function BorderColor(props) {
|
|
|
8498
8378
|
xmlns: "http://www.w3.org/2000/svg"
|
|
8499
8379
|
}, rest), {
|
|
8500
8380
|
children: [
|
|
8501
|
-
/* @__PURE__ */ (0,
|
|
8502
|
-
/* @__PURE__ */ (0,
|
|
8381
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M0 11H10.6667", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
8382
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
8503
8383
|
"path",
|
|
8504
8384
|
{
|
|
8505
8385
|
d: "M0.666504 9V6.33333C0.666504 3.38781 3.05432 1 5.99984 1H10.6665",
|
|
@@ -8513,9 +8393,9 @@ function BorderColor(props) {
|
|
|
8513
8393
|
}
|
|
8514
8394
|
|
|
8515
8395
|
// src/editor/components/icons/margin-icon.tsx
|
|
8516
|
-
var
|
|
8396
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
8517
8397
|
function MarginIcon(props) {
|
|
8518
|
-
return /* @__PURE__ */ (0,
|
|
8398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8519
8399
|
"svg",
|
|
8520
8400
|
__spreadProps(__spreadValues({
|
|
8521
8401
|
width: 12,
|
|
@@ -8524,7 +8404,7 @@ function MarginIcon(props) {
|
|
|
8524
8404
|
fill: "none",
|
|
8525
8405
|
xmlns: "http://www.w3.org/2000/svg"
|
|
8526
8406
|
}, props), {
|
|
8527
|
-
children: /* @__PURE__ */ (0,
|
|
8407
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8528
8408
|
"path",
|
|
8529
8409
|
{
|
|
8530
8410
|
d: "M10.5 10.499V1.49902M1.5 10.499V1.49902M4.5 5.99902C4.5 5.53308 4.5 5.30011 4.57612 5.11634C4.67761 4.87131 4.87229 4.67664 5.11732 4.57514C5.30109 4.49902 5.53406 4.49902 6 4.49902C6.46594 4.49902 6.69891 4.49902 6.88268 4.57514C7.12771 4.67664 7.32239 4.87131 7.42388 5.11634C7.5 5.30011 7.5 5.53308 7.5 5.99902C7.5 6.46496 7.5 6.69794 7.42388 6.88171C7.32239 7.12673 7.12771 7.32141 6.88268 7.4229C6.69891 7.49902 6.46594 7.49902 6 7.49902C5.53406 7.49902 5.30109 7.49902 5.11732 7.4229C4.87229 7.32141 4.67761 7.12673 4.57612 6.88171C4.5 6.69794 4.5 6.46496 4.5 5.99902Z",
|
|
@@ -8538,9 +8418,9 @@ function MarginIcon(props) {
|
|
|
8538
8418
|
}
|
|
8539
8419
|
|
|
8540
8420
|
// src/editor/components/icons/padding-icon.tsx
|
|
8541
|
-
var
|
|
8421
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
8542
8422
|
function PaddingIcon(props) {
|
|
8543
|
-
return /* @__PURE__ */ (0,
|
|
8423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
8544
8424
|
"svg",
|
|
8545
8425
|
__spreadProps(__spreadValues({
|
|
8546
8426
|
width: 10,
|
|
@@ -8549,7 +8429,7 @@ function PaddingIcon(props) {
|
|
|
8549
8429
|
fill: "none",
|
|
8550
8430
|
xmlns: "http://www.w3.org/2000/svg"
|
|
8551
8431
|
}, props), {
|
|
8552
|
-
children: /* @__PURE__ */ (0,
|
|
8432
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
8553
8433
|
"path",
|
|
8554
8434
|
{
|
|
8555
8435
|
d: "M9.50244 0.501526L9.10244 0.501526C8.54239 0.501526 8.26236 0.501526 8.04845 0.610519C7.86029 0.706392 7.70731 0.859373 7.61144 1.04754C7.50244 1.26145 7.50244 1.54147 7.50244 2.10153V7.90153C7.50244 8.46158 7.50244 8.74161 7.61144 8.95552C7.70731 9.14368 7.86029 9.29666 8.04845 9.39253C8.26236 9.50153 8.54239 9.50153 9.10244 9.50153H9.50244M0.502441 0.501527L0.902441 0.501527C1.46249 0.501527 1.74252 0.501527 1.95643 0.61052C2.14459 0.706393 2.29757 0.859374 2.39345 1.04754C2.50244 1.26145 2.50244 1.54147 2.50244 2.10153L2.50244 7.90153C2.50244 8.46158 2.50244 8.74161 2.39345 8.95552C2.29757 9.14368 2.14459 9.29666 1.95643 9.39253C1.74252 9.50153 1.46249 9.50153 0.902442 9.50153H0.502442M4.99994 7.99903V1.99903",
|
|
@@ -8564,7 +8444,7 @@ function PaddingIcon(props) {
|
|
|
8564
8444
|
|
|
8565
8445
|
// src/editor/components/ui/color-picker.tsx
|
|
8566
8446
|
var import_react_colorful = require("react-colorful");
|
|
8567
|
-
var
|
|
8447
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
8568
8448
|
function ColorPicker(props) {
|
|
8569
8449
|
const {
|
|
8570
8450
|
color,
|
|
@@ -8582,14 +8462,14 @@ function ColorPicker(props) {
|
|
|
8582
8462
|
onColorChange(color2);
|
|
8583
8463
|
});
|
|
8584
8464
|
};
|
|
8585
|
-
const popoverButton = /* @__PURE__ */ (0,
|
|
8465
|
+
const popoverButton = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children: children || /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8586
8466
|
BaseButton,
|
|
8587
8467
|
{
|
|
8588
8468
|
variant: "ghost",
|
|
8589
8469
|
className: "mly:h-7 mly:w-7 mly:shrink-0",
|
|
8590
8470
|
size: "sm",
|
|
8591
8471
|
type: "button",
|
|
8592
|
-
children: /* @__PURE__ */ (0,
|
|
8472
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8593
8473
|
"div",
|
|
8594
8474
|
{
|
|
8595
8475
|
className: cn(
|
|
@@ -8603,7 +8483,7 @@ function ColorPicker(props) {
|
|
|
8603
8483
|
)
|
|
8604
8484
|
}
|
|
8605
8485
|
) });
|
|
8606
|
-
return /* @__PURE__ */ (0,
|
|
8486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
8607
8487
|
Popover,
|
|
8608
8488
|
{
|
|
8609
8489
|
onOpenChange: (open) => {
|
|
@@ -8612,17 +8492,17 @@ function ColorPicker(props) {
|
|
|
8612
8492
|
}
|
|
8613
8493
|
},
|
|
8614
8494
|
children: [
|
|
8615
|
-
tooltip ? /* @__PURE__ */ (0,
|
|
8616
|
-
/* @__PURE__ */ (0,
|
|
8617
|
-
/* @__PURE__ */ (0,
|
|
8495
|
+
tooltip ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
|
|
8496
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: popoverButton }),
|
|
8497
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { sideOffset: 8, children: tooltip })
|
|
8618
8498
|
] }) : popoverButton,
|
|
8619
|
-
/* @__PURE__ */ (0,
|
|
8499
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8620
8500
|
PopoverContent,
|
|
8621
8501
|
{
|
|
8622
8502
|
className: "mly:w-full mly:rounded-none mly:border-0 mly:bg-transparent! mly:p-0! mly:shadow-none mly:drop-shadow-md",
|
|
8623
8503
|
sideOffset: 8,
|
|
8624
|
-
children: /* @__PURE__ */ (0,
|
|
8625
|
-
/* @__PURE__ */ (0,
|
|
8504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mly:min-w-[260px] mly:rounded-xl mly:border mly:border-gray-200 mly:bg-white mly:p-4", children: [
|
|
8505
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8626
8506
|
import_react_colorful.HexColorPicker,
|
|
8627
8507
|
{
|
|
8628
8508
|
color,
|
|
@@ -8630,7 +8510,7 @@ function ColorPicker(props) {
|
|
|
8630
8510
|
className: "mly:flex mly:w-full! mly:flex-col mly:gap-4"
|
|
8631
8511
|
}
|
|
8632
8512
|
),
|
|
8633
|
-
/* @__PURE__ */ (0,
|
|
8513
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8634
8514
|
import_react_colorful.HexColorInput,
|
|
8635
8515
|
{
|
|
8636
8516
|
alpha: true,
|
|
@@ -8640,10 +8520,10 @@ function ColorPicker(props) {
|
|
|
8640
8520
|
prefixed: true
|
|
8641
8521
|
}
|
|
8642
8522
|
),
|
|
8643
|
-
suggestedColors.length > 0 && /* @__PURE__ */ (0,
|
|
8644
|
-
/* @__PURE__ */ (0,
|
|
8645
|
-
/* @__PURE__ */ (0,
|
|
8646
|
-
/* @__PURE__ */ (0,
|
|
8523
|
+
suggestedColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
|
|
8524
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "-mly:mx-4 mly:my-4 mly:h-px mly:bg-gray-200" }),
|
|
8525
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: "mly:text-xs mly:text-gray-500", children: "Recently used" }),
|
|
8526
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mly:mt-2 mly:flex mly:flex-wrap mly:gap-0.5", children: suggestedColors.map((suggestedColor) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8647
8527
|
BaseButton,
|
|
8648
8528
|
{
|
|
8649
8529
|
variant: "ghost",
|
|
@@ -8651,7 +8531,7 @@ function ColorPicker(props) {
|
|
|
8651
8531
|
className: "!mly:size-7 mly:shrink-0",
|
|
8652
8532
|
type: "button",
|
|
8653
8533
|
onClick: () => handleColorChange(suggestedColor),
|
|
8654
|
-
children: /* @__PURE__ */ (0,
|
|
8534
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
8655
8535
|
"div",
|
|
8656
8536
|
{
|
|
8657
8537
|
className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded",
|
|
@@ -8673,10 +8553,10 @@ function ColorPicker(props) {
|
|
|
8673
8553
|
}
|
|
8674
8554
|
|
|
8675
8555
|
// src/editor/components/section-menu/use-section-state.tsx
|
|
8676
|
-
var
|
|
8677
|
-
var
|
|
8556
|
+
var import_react35 = require("@tiptap/react");
|
|
8557
|
+
var import_fast_deep_equal5 = __toESM(require("fast-deep-equal"), 1);
|
|
8678
8558
|
var useSectionState = (editor) => {
|
|
8679
|
-
const states = (0,
|
|
8559
|
+
const states = (0, import_react35.useEditorState)({
|
|
8680
8560
|
editor,
|
|
8681
8561
|
selector: (ctx) => {
|
|
8682
8562
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
@@ -8698,19 +8578,19 @@ var useSectionState = (editor) => {
|
|
|
8698
8578
|
currentShowIfKey: ((_n = ctx.editor.getAttributes("section")) == null ? void 0 : _n.showIfKey) || ""
|
|
8699
8579
|
};
|
|
8700
8580
|
},
|
|
8701
|
-
equalityFn:
|
|
8581
|
+
equalityFn: import_fast_deep_equal5.default
|
|
8702
8582
|
});
|
|
8703
8583
|
return states;
|
|
8704
8584
|
};
|
|
8705
8585
|
|
|
8706
8586
|
// src/editor/components/section-menu/section-bubble-menu.tsx
|
|
8707
|
-
var
|
|
8587
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
8708
8588
|
function SectionBubbleMenu(props) {
|
|
8709
8589
|
const { appendTo, editor } = props;
|
|
8710
8590
|
if (!editor) {
|
|
8711
8591
|
return null;
|
|
8712
8592
|
}
|
|
8713
|
-
const getReferenceClientRect = (0,
|
|
8593
|
+
const getReferenceClientRect = (0, import_react37.useCallback)(() => {
|
|
8714
8594
|
const renderContainer = getRenderContainer(editor, "section");
|
|
8715
8595
|
const rect = (renderContainer == null ? void 0 : renderContainer.getBoundingClientRect()) || new DOMRect(-1e3, -1e3, 0, 0);
|
|
8716
8596
|
return rect;
|
|
@@ -8719,10 +8599,10 @@ function SectionBubbleMenu(props) {
|
|
|
8719
8599
|
shouldShow: ({ editor: editor2 }) => {
|
|
8720
8600
|
var _a, _b;
|
|
8721
8601
|
const activeSectionNode = getClosestNodeByName(editor2, "section");
|
|
8722
|
-
const repeatNodeChildren = activeSectionNode ? (_a = (0,
|
|
8602
|
+
const repeatNodeChildren = activeSectionNode ? (_a = (0, import_react36.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
|
|
8723
8603
|
return node.type.name === "repeat";
|
|
8724
8604
|
})) == null ? void 0 : _a[0] : null;
|
|
8725
|
-
const inlineImageNodeChildren = activeSectionNode ? (_b = (0,
|
|
8605
|
+
const inlineImageNodeChildren = activeSectionNode ? (_b = (0, import_react36.findChildren)(activeSectionNode == null ? void 0 : activeSectionNode.node, (node) => {
|
|
8726
8606
|
return node.type.name === "inlineImage";
|
|
8727
8607
|
})) == null ? void 0 : _b[0] : null;
|
|
8728
8608
|
const hasActiveRepeatNodeChildren = repeatNodeChildren && editor2.isActive("repeat");
|
|
@@ -8739,7 +8619,7 @@ function SectionBubbleMenu(props) {
|
|
|
8739
8619
|
},
|
|
8740
8620
|
getReferenceClientRect,
|
|
8741
8621
|
appendTo: () => appendTo == null ? void 0 : appendTo.current,
|
|
8742
|
-
plugins: [
|
|
8622
|
+
plugins: [import_tippy6.sticky],
|
|
8743
8623
|
sticky: "popper",
|
|
8744
8624
|
maxWidth: "auto"
|
|
8745
8625
|
},
|
|
@@ -8751,12 +8631,12 @@ function SectionBubbleMenu(props) {
|
|
|
8751
8631
|
{ value: "6", label: "Smooth" },
|
|
8752
8632
|
{ value: "9999", label: "Round" }
|
|
8753
8633
|
];
|
|
8754
|
-
return /* @__PURE__ */ (0,
|
|
8755
|
-
|
|
8634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8635
|
+
import_react36.BubbleMenu,
|
|
8756
8636
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
8757
8637
|
className: "mly:flex mly:items-stretch mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
8758
|
-
children: /* @__PURE__ */ (0,
|
|
8759
|
-
/* @__PURE__ */ (0,
|
|
8638
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(TooltipProvider, { children: [
|
|
8639
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8760
8640
|
AlignmentSwitch,
|
|
8761
8641
|
{
|
|
8762
8642
|
alignment: state.currentAlignment,
|
|
@@ -8768,9 +8648,9 @@ function SectionBubbleMenu(props) {
|
|
|
8768
8648
|
}
|
|
8769
8649
|
}
|
|
8770
8650
|
),
|
|
8771
|
-
/* @__PURE__ */ (0,
|
|
8772
|
-
/* @__PURE__ */ (0,
|
|
8773
|
-
/* @__PURE__ */ (0,
|
|
8651
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
|
|
8652
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
8653
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8774
8654
|
Select,
|
|
8775
8655
|
{
|
|
8776
8656
|
label: "Border Radius",
|
|
@@ -8786,7 +8666,7 @@ function SectionBubbleMenu(props) {
|
|
|
8786
8666
|
className: "mly:capitalize"
|
|
8787
8667
|
}
|
|
8788
8668
|
),
|
|
8789
|
-
/* @__PURE__ */ (0,
|
|
8669
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8790
8670
|
Select,
|
|
8791
8671
|
{
|
|
8792
8672
|
label: "Border Width",
|
|
@@ -8808,8 +8688,8 @@ function SectionBubbleMenu(props) {
|
|
|
8808
8688
|
}
|
|
8809
8689
|
)
|
|
8810
8690
|
] }),
|
|
8811
|
-
/* @__PURE__ */ (0,
|
|
8812
|
-
/* @__PURE__ */ (0,
|
|
8691
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
|
|
8692
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8813
8693
|
Select,
|
|
8814
8694
|
{
|
|
8815
8695
|
icon: MarginIcon,
|
|
@@ -8837,8 +8717,8 @@ function SectionBubbleMenu(props) {
|
|
|
8837
8717
|
className: "mly:capitalize"
|
|
8838
8718
|
}
|
|
8839
8719
|
),
|
|
8840
|
-
/* @__PURE__ */ (0,
|
|
8841
|
-
/* @__PURE__ */ (0,
|
|
8720
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
|
|
8721
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8842
8722
|
Select,
|
|
8843
8723
|
{
|
|
8844
8724
|
icon: PaddingIcon,
|
|
@@ -8866,9 +8746,9 @@ function SectionBubbleMenu(props) {
|
|
|
8866
8746
|
className: "mly:capitalize"
|
|
8867
8747
|
}
|
|
8868
8748
|
),
|
|
8869
|
-
/* @__PURE__ */ (0,
|
|
8870
|
-
/* @__PURE__ */ (0,
|
|
8871
|
-
/* @__PURE__ */ (0,
|
|
8749
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
|
|
8750
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
8751
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8872
8752
|
ColorPicker,
|
|
8873
8753
|
{
|
|
8874
8754
|
color: state.currentBorderColor,
|
|
@@ -8879,14 +8759,14 @@ function SectionBubbleMenu(props) {
|
|
|
8879
8759
|
});
|
|
8880
8760
|
},
|
|
8881
8761
|
tooltip: "Border Color",
|
|
8882
|
-
children: /* @__PURE__ */ (0,
|
|
8762
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8883
8763
|
BaseButton,
|
|
8884
8764
|
{
|
|
8885
8765
|
variant: "ghost",
|
|
8886
8766
|
className: "mly:h-7 mly:w-7 mly:shrink-0",
|
|
8887
8767
|
size: "sm",
|
|
8888
8768
|
type: "button",
|
|
8889
|
-
children: /* @__PURE__ */ (0,
|
|
8769
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8890
8770
|
BorderColor,
|
|
8891
8771
|
{
|
|
8892
8772
|
className: "mly:size-3 mly:shrink-0",
|
|
@@ -8900,7 +8780,7 @@ function SectionBubbleMenu(props) {
|
|
|
8900
8780
|
)
|
|
8901
8781
|
}
|
|
8902
8782
|
),
|
|
8903
|
-
/* @__PURE__ */ (0,
|
|
8783
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8904
8784
|
ColorPicker,
|
|
8905
8785
|
{
|
|
8906
8786
|
color: state.currentBackgroundColor,
|
|
@@ -8916,25 +8796,25 @@ function SectionBubbleMenu(props) {
|
|
|
8916
8796
|
}
|
|
8917
8797
|
)
|
|
8918
8798
|
] }),
|
|
8919
|
-
/* @__PURE__ */ (0,
|
|
8920
|
-
/* @__PURE__ */ (0,
|
|
8799
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
|
|
8800
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8921
8801
|
BubbleMenuButton,
|
|
8922
8802
|
{
|
|
8923
|
-
icon:
|
|
8803
|
+
icon: import_lucide_react25.Trash,
|
|
8924
8804
|
tooltip: "Delete Section",
|
|
8925
8805
|
command: () => {
|
|
8926
8806
|
deleteNode(editor, "section");
|
|
8927
8807
|
}
|
|
8928
8808
|
}
|
|
8929
8809
|
),
|
|
8930
|
-
state.isColumnsActive && /* @__PURE__ */ (0,
|
|
8931
|
-
/* @__PURE__ */ (0,
|
|
8932
|
-
/* @__PURE__ */ (0,
|
|
8933
|
-
/* @__PURE__ */ (0,
|
|
8810
|
+
state.isColumnsActive && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
|
|
8811
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Divider, {}),
|
|
8812
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Popover, { children: [
|
|
8813
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PopoverTrigger, { className: "mly:flex mly:items-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray", children: [
|
|
8934
8814
|
"Column",
|
|
8935
|
-
/* @__PURE__ */ (0,
|
|
8815
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.ChevronUp, { className: "mly:h-3 mly:w-3" })
|
|
8936
8816
|
] }),
|
|
8937
|
-
/* @__PURE__ */ (0,
|
|
8817
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
8938
8818
|
PopoverContent,
|
|
8939
8819
|
{
|
|
8940
8820
|
className: "mly:w-max mly:rounded-lg mly:p-0.5!",
|
|
@@ -8947,7 +8827,7 @@ function SectionBubbleMenu(props) {
|
|
|
8947
8827
|
onCloseAutoFocus: (e) => {
|
|
8948
8828
|
e.preventDefault();
|
|
8949
8829
|
},
|
|
8950
|
-
children: /* @__PURE__ */ (0,
|
|
8830
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ColumnsBubbleMenuContent, { editor })
|
|
8951
8831
|
}
|
|
8952
8832
|
)
|
|
8953
8833
|
] })
|
|
@@ -8958,13 +8838,13 @@ function SectionBubbleMenu(props) {
|
|
|
8958
8838
|
}
|
|
8959
8839
|
|
|
8960
8840
|
// src/editor/components/spacer-menu/spacer-bubble-menu.tsx
|
|
8961
|
-
var
|
|
8841
|
+
var import_react39 = require("@tiptap/react");
|
|
8962
8842
|
|
|
8963
8843
|
// src/editor/components/spacer-menu/use-spacer-state.ts
|
|
8964
|
-
var
|
|
8965
|
-
var
|
|
8844
|
+
var import_react38 = require("@tiptap/react");
|
|
8845
|
+
var import_fast_deep_equal6 = __toESM(require("fast-deep-equal"), 1);
|
|
8966
8846
|
var useSpacerState = (editor) => {
|
|
8967
|
-
const states = (0,
|
|
8847
|
+
const states = (0, import_react38.useEditorState)({
|
|
8968
8848
|
editor,
|
|
8969
8849
|
selector: (ctx) => {
|
|
8970
8850
|
var _a;
|
|
@@ -8972,20 +8852,20 @@ var useSpacerState = (editor) => {
|
|
|
8972
8852
|
currentShowIfKey: ((_a = ctx.editor.getAttributes("spacer")) == null ? void 0 : _a.showIfKey) || ""
|
|
8973
8853
|
};
|
|
8974
8854
|
},
|
|
8975
|
-
equalityFn:
|
|
8855
|
+
equalityFn: import_fast_deep_equal6.default
|
|
8976
8856
|
});
|
|
8977
8857
|
return states;
|
|
8978
8858
|
};
|
|
8979
8859
|
|
|
8980
8860
|
// src/editor/components/spacer-menu/spacer-bubble-menu.tsx
|
|
8981
|
-
var
|
|
8982
|
-
var
|
|
8861
|
+
var import_react40 = require("react");
|
|
8862
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
8983
8863
|
function SpacerBubbleMenu(props) {
|
|
8984
8864
|
const { editor, appendTo } = props;
|
|
8985
8865
|
if (!editor) {
|
|
8986
8866
|
return null;
|
|
8987
8867
|
}
|
|
8988
|
-
const items = (0,
|
|
8868
|
+
const items = (0, import_react40.useMemo)(
|
|
8989
8869
|
() => spacing.map((space) => {
|
|
8990
8870
|
const { value: height, short: name } = space;
|
|
8991
8871
|
return {
|
|
@@ -9011,11 +8891,11 @@ function SpacerBubbleMenu(props) {
|
|
|
9011
8891
|
}
|
|
9012
8892
|
});
|
|
9013
8893
|
const state = useSpacerState(editor);
|
|
9014
|
-
return /* @__PURE__ */ (0,
|
|
9015
|
-
|
|
8894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
8895
|
+
import_react39.BubbleMenu,
|
|
9016
8896
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
9017
8897
|
className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
9018
|
-
children: /* @__PURE__ */ (0,
|
|
8898
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipProvider, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9019
8899
|
BubbleMenuButton,
|
|
9020
8900
|
__spreadValues({
|
|
9021
8901
|
className: "!mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
|
|
@@ -9249,18 +9129,18 @@ var Spacer = import_core12.Node.create({
|
|
|
9249
9129
|
|
|
9250
9130
|
// src/editor/extensions/link-card.ts
|
|
9251
9131
|
var import_core13 = require("@tiptap/core");
|
|
9252
|
-
var
|
|
9132
|
+
var import_react42 = require("@tiptap/react");
|
|
9253
9133
|
|
|
9254
9134
|
// src/editor/nodes/link-card.tsx
|
|
9255
|
-
var
|
|
9135
|
+
var import_react41 = require("@tiptap/react");
|
|
9256
9136
|
|
|
9257
9137
|
// src/editor/components/input.tsx
|
|
9258
9138
|
var React5 = __toESM(require("react"), 1);
|
|
9259
|
-
var
|
|
9139
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
9260
9140
|
var Input = React5.forwardRef(
|
|
9261
9141
|
(_a, ref) => {
|
|
9262
9142
|
var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
|
|
9263
|
-
return /* @__PURE__ */ (0,
|
|
9143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
9264
9144
|
"input",
|
|
9265
9145
|
__spreadValues(__spreadProps(__spreadValues({}, AUTOCOMPLETE_PASSWORD_MANAGERS_OFF), {
|
|
9266
9146
|
type,
|
|
@@ -9278,11 +9158,11 @@ Input.displayName = "Input";
|
|
|
9278
9158
|
|
|
9279
9159
|
// src/editor/components/textarea.tsx
|
|
9280
9160
|
var React6 = __toESM(require("react"), 1);
|
|
9281
|
-
var
|
|
9161
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
9282
9162
|
var Textarea = React6.forwardRef(
|
|
9283
9163
|
(_a, ref) => {
|
|
9284
9164
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
9285
|
-
return /* @__PURE__ */ (0,
|
|
9165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
9286
9166
|
"textarea",
|
|
9287
9167
|
__spreadValues({
|
|
9288
9168
|
className: cn(
|
|
@@ -9298,18 +9178,18 @@ var Textarea = React6.forwardRef(
|
|
|
9298
9178
|
Textarea.displayName = "Textarea";
|
|
9299
9179
|
|
|
9300
9180
|
// src/editor/nodes/link-card.tsx
|
|
9301
|
-
var
|
|
9181
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
9302
9182
|
function LinkCardComponent(props) {
|
|
9303
9183
|
const { title, description, link, linkTitle, image: image2, badgeText, subTitle } = props.node.attrs;
|
|
9304
9184
|
const { getPos, editor } = props;
|
|
9305
|
-
return /* @__PURE__ */ (0,
|
|
9306
|
-
|
|
9185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9186
|
+
import_react41.NodeViewWrapper,
|
|
9307
9187
|
{
|
|
9308
9188
|
className: `react-component ${props.selected && "ProseMirror-selectednode"}`,
|
|
9309
9189
|
draggable: editor.isEditable,
|
|
9310
9190
|
"data-drag-handle": editor.isEditable,
|
|
9311
|
-
children: /* @__PURE__ */ (0,
|
|
9312
|
-
/* @__PURE__ */ (0,
|
|
9191
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { open: props.selected, children: [
|
|
9192
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9313
9193
|
"div",
|
|
9314
9194
|
{
|
|
9315
9195
|
tabIndex: -1,
|
|
@@ -9318,8 +9198,8 @@ function LinkCardComponent(props) {
|
|
|
9318
9198
|
const pos = getPos();
|
|
9319
9199
|
editor.commands.setNodeSelection(pos);
|
|
9320
9200
|
},
|
|
9321
|
-
children: /* @__PURE__ */ (0,
|
|
9322
|
-
image2 && /* @__PURE__ */ (0,
|
|
9201
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:no-prose mly:flex mly:flex-col mly:rounded-lg mly:border mly:border-gray-300", children: [
|
|
9202
|
+
image2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mly:relative mly:mb-1.5 mly:w-full mly:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9323
9203
|
"img",
|
|
9324
9204
|
{
|
|
9325
9205
|
src: image2,
|
|
@@ -9328,23 +9208,23 @@ function LinkCardComponent(props) {
|
|
|
9328
9208
|
draggable: editor.isEditable
|
|
9329
9209
|
}
|
|
9330
9210
|
) }),
|
|
9331
|
-
/* @__PURE__ */ (0,
|
|
9332
|
-
/* @__PURE__ */ (0,
|
|
9333
|
-
/* @__PURE__ */ (0,
|
|
9334
|
-
badgeText && /* @__PURE__ */ (0,
|
|
9211
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mly:flex mly:items-stretch mly:p-3", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("mly:flex mly:flex-col"), children: [
|
|
9212
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "!mly:mb-1.5 mly:flex mly:items-center mly:gap-1.5", children: [
|
|
9213
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { className: "!mly:mb-0 mly:text-lg! mly:font-semibold", children: title }),
|
|
9214
|
+
badgeText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "!mly:font-base mly:rounded-md mly:bg-yellow-200 mly:px-2 mly:py-1 mly:font-semibold mly:leading-none text-xs", children: badgeText }),
|
|
9335
9215
|
" ",
|
|
9336
|
-
subTitle && !badgeText && /* @__PURE__ */ (0,
|
|
9216
|
+
subTitle && !badgeText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "!mly:font-base mly:font-regular mly:rounded-md mly:leading-none mly:text-gray-400 text-xs", children: subTitle })
|
|
9337
9217
|
] }),
|
|
9338
|
-
/* @__PURE__ */ (0,
|
|
9218
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "!mly:my-0 mly:text-base! mly:text-gray-500", children: [
|
|
9339
9219
|
description,
|
|
9340
9220
|
" ",
|
|
9341
|
-
linkTitle ? /* @__PURE__ */ (0,
|
|
9221
|
+
linkTitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("a", { href: link, className: "mly:font-semibold", children: linkTitle }) : null
|
|
9342
9222
|
] })
|
|
9343
9223
|
] }) })
|
|
9344
9224
|
] })
|
|
9345
9225
|
}
|
|
9346
9226
|
) }),
|
|
9347
|
-
/* @__PURE__ */ (0,
|
|
9227
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
9348
9228
|
PopoverContent,
|
|
9349
9229
|
{
|
|
9350
9230
|
align: "end",
|
|
@@ -9353,9 +9233,9 @@ function LinkCardComponent(props) {
|
|
|
9353
9233
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
9354
9234
|
onCloseAutoFocus: (e) => e.preventDefault(),
|
|
9355
9235
|
children: [
|
|
9356
|
-
/* @__PURE__ */ (0,
|
|
9357
|
-
/* @__PURE__ */ (0,
|
|
9358
|
-
/* @__PURE__ */ (0,
|
|
9236
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9237
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Image" }),
|
|
9238
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9359
9239
|
Input,
|
|
9360
9240
|
{
|
|
9361
9241
|
placeholder: "Add Image",
|
|
@@ -9369,9 +9249,9 @@ function LinkCardComponent(props) {
|
|
|
9369
9249
|
}
|
|
9370
9250
|
)
|
|
9371
9251
|
] }),
|
|
9372
|
-
/* @__PURE__ */ (0,
|
|
9373
|
-
/* @__PURE__ */ (0,
|
|
9374
|
-
/* @__PURE__ */ (0,
|
|
9252
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9253
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Title" }),
|
|
9254
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9375
9255
|
Input,
|
|
9376
9256
|
{
|
|
9377
9257
|
placeholder: "Add title",
|
|
@@ -9384,9 +9264,9 @@ function LinkCardComponent(props) {
|
|
|
9384
9264
|
}
|
|
9385
9265
|
)
|
|
9386
9266
|
] }),
|
|
9387
|
-
/* @__PURE__ */ (0,
|
|
9388
|
-
/* @__PURE__ */ (0,
|
|
9389
|
-
/* @__PURE__ */ (0,
|
|
9267
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9268
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Description" }),
|
|
9269
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9390
9270
|
Textarea,
|
|
9391
9271
|
{
|
|
9392
9272
|
placeholder: "Add description here",
|
|
@@ -9399,10 +9279,10 @@ function LinkCardComponent(props) {
|
|
|
9399
9279
|
}
|
|
9400
9280
|
)
|
|
9401
9281
|
] }),
|
|
9402
|
-
/* @__PURE__ */ (0,
|
|
9403
|
-
/* @__PURE__ */ (0,
|
|
9404
|
-
/* @__PURE__ */ (0,
|
|
9405
|
-
/* @__PURE__ */ (0,
|
|
9282
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
|
|
9283
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9284
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link Title" }),
|
|
9285
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9406
9286
|
Input,
|
|
9407
9287
|
{
|
|
9408
9288
|
placeholder: "Add link title here",
|
|
@@ -9415,9 +9295,9 @@ function LinkCardComponent(props) {
|
|
|
9415
9295
|
}
|
|
9416
9296
|
)
|
|
9417
9297
|
] }),
|
|
9418
|
-
/* @__PURE__ */ (0,
|
|
9419
|
-
/* @__PURE__ */ (0,
|
|
9420
|
-
/* @__PURE__ */ (0,
|
|
9298
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9299
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Link" }),
|
|
9300
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9421
9301
|
Input,
|
|
9422
9302
|
{
|
|
9423
9303
|
placeholder: "Add link here",
|
|
@@ -9431,10 +9311,10 @@ function LinkCardComponent(props) {
|
|
|
9431
9311
|
)
|
|
9432
9312
|
] })
|
|
9433
9313
|
] }),
|
|
9434
|
-
/* @__PURE__ */ (0,
|
|
9435
|
-
/* @__PURE__ */ (0,
|
|
9436
|
-
/* @__PURE__ */ (0,
|
|
9437
|
-
/* @__PURE__ */ (0,
|
|
9314
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mly:grid mly:grid-cols-2 mly:gap-2", children: [
|
|
9315
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9316
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Badge Text" }),
|
|
9317
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9438
9318
|
Input,
|
|
9439
9319
|
{
|
|
9440
9320
|
placeholder: "Add badge text here",
|
|
@@ -9447,9 +9327,9 @@ function LinkCardComponent(props) {
|
|
|
9447
9327
|
}
|
|
9448
9328
|
)
|
|
9449
9329
|
] }),
|
|
9450
|
-
/* @__PURE__ */ (0,
|
|
9451
|
-
/* @__PURE__ */ (0,
|
|
9452
|
-
/* @__PURE__ */ (0,
|
|
9330
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "mly:w-full mly:space-y-1", children: [
|
|
9331
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mly:text-xs mly:font-normal mly:text-slate-400", children: "Sub Title" }),
|
|
9332
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9453
9333
|
Input,
|
|
9454
9334
|
{
|
|
9455
9335
|
placeholder: "Add sub title here",
|
|
@@ -9536,7 +9416,7 @@ var LinkCardExtension = import_core13.Node.create({
|
|
|
9536
9416
|
};
|
|
9537
9417
|
},
|
|
9538
9418
|
addNodeView() {
|
|
9539
|
-
return (0,
|
|
9419
|
+
return (0, import_react42.ReactNodeViewRenderer)(LinkCardComponent, {
|
|
9540
9420
|
className: "mly:relative"
|
|
9541
9421
|
});
|
|
9542
9422
|
}
|
|
@@ -9544,26 +9424,26 @@ var LinkCardExtension = import_core13.Node.create({
|
|
|
9544
9424
|
|
|
9545
9425
|
// src/editor/nodes/button/button.tsx
|
|
9546
9426
|
var import_core14 = require("@tiptap/core");
|
|
9547
|
-
var
|
|
9427
|
+
var import_react46 = require("@tiptap/react");
|
|
9548
9428
|
|
|
9549
9429
|
// src/editor/nodes/button/button-view.tsx
|
|
9550
|
-
var
|
|
9551
|
-
var
|
|
9430
|
+
var import_react44 = require("@tiptap/react");
|
|
9431
|
+
var import_react45 = require("react");
|
|
9552
9432
|
|
|
9553
9433
|
// src/editor/nodes/button/button-label-input.tsx
|
|
9554
|
-
var
|
|
9555
|
-
var
|
|
9434
|
+
var import_react43 = require("react");
|
|
9435
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
9556
9436
|
function ButtonLabelInput(props) {
|
|
9557
9437
|
var _a, _b;
|
|
9558
9438
|
const { value, onValueChange, isVariable, editor } = props;
|
|
9559
|
-
const linkInputRef = (0,
|
|
9560
|
-
const [isEditing, setIsEditing] = (0,
|
|
9439
|
+
const linkInputRef = (0, import_react43.useRef)(null);
|
|
9440
|
+
const [isEditing, setIsEditing] = (0, import_react43.useState)(!isVariable);
|
|
9561
9441
|
const { placeholderUrl = DEFAULT_PLACEHOLDER_URL } = useMailyContext();
|
|
9562
9442
|
const otps = useVariableOptions(editor);
|
|
9563
9443
|
const variables = otps == null ? void 0 : otps.variables;
|
|
9564
9444
|
const variableTriggerCharacter = (_b = (_a = otps == null ? void 0 : otps.suggestion) == null ? void 0 : _a.char) != null ? _b : DEFAULT_VARIABLE_TRIGGER_CHAR;
|
|
9565
9445
|
const renderVariable = otps == null ? void 0 : otps.renderVariable;
|
|
9566
|
-
const autoCompleteOptions = (0,
|
|
9446
|
+
const autoCompleteOptions = (0, import_react43.useMemo)(() => {
|
|
9567
9447
|
const withoutTrigger = value.replace(
|
|
9568
9448
|
new RegExp(variableTriggerCharacter, "g"),
|
|
9569
9449
|
""
|
|
@@ -9574,8 +9454,8 @@ function ButtonLabelInput(props) {
|
|
|
9574
9454
|
editor
|
|
9575
9455
|
}).map((variable) => variable.name);
|
|
9576
9456
|
}, [variables, value, editor]);
|
|
9577
|
-
return /* @__PURE__ */ (0,
|
|
9578
|
-
!isEditing && /* @__PURE__ */ (0,
|
|
9457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mly:isolate mly:flex mly:items-center mly:rounded-lg", children: [
|
|
9458
|
+
!isEditing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
9579
9459
|
"button",
|
|
9580
9460
|
{
|
|
9581
9461
|
onClick: () => {
|
|
@@ -9596,7 +9476,7 @@ function ButtonLabelInput(props) {
|
|
|
9596
9476
|
})
|
|
9597
9477
|
}
|
|
9598
9478
|
),
|
|
9599
|
-
isEditing && /* @__PURE__ */ (0,
|
|
9479
|
+
isEditing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
9600
9480
|
InputAutocomplete,
|
|
9601
9481
|
{
|
|
9602
9482
|
editor,
|
|
@@ -9623,7 +9503,7 @@ function ButtonLabelInput(props) {
|
|
|
9623
9503
|
}
|
|
9624
9504
|
|
|
9625
9505
|
// src/editor/nodes/button/button-view.tsx
|
|
9626
|
-
var
|
|
9506
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
9627
9507
|
function ButtonView(props) {
|
|
9628
9508
|
const { node, editor, getPos, updateAttributes: updateAttributes2 } = props;
|
|
9629
9509
|
const {
|
|
@@ -9643,7 +9523,7 @@ function ButtonView(props) {
|
|
|
9643
9523
|
} = node.attrs;
|
|
9644
9524
|
const opts = useVariableOptions(editor);
|
|
9645
9525
|
const renderVariable = opts == null ? void 0 : opts.renderVariable;
|
|
9646
|
-
const sizes = (0,
|
|
9526
|
+
const sizes = (0, import_react45.useMemo)(
|
|
9647
9527
|
() => ({
|
|
9648
9528
|
small: {
|
|
9649
9529
|
paddingX: 24,
|
|
@@ -9660,14 +9540,14 @@ function ButtonView(props) {
|
|
|
9660
9540
|
}),
|
|
9661
9541
|
[]
|
|
9662
9542
|
);
|
|
9663
|
-
const size = (0,
|
|
9543
|
+
const size = (0, import_react45.useMemo)(() => {
|
|
9664
9544
|
var _a;
|
|
9665
9545
|
return (_a = Object.entries(sizes).find(
|
|
9666
9546
|
([, { paddingX, paddingY }]) => paddingRight === paddingX && paddingTop === paddingY
|
|
9667
9547
|
)) == null ? void 0 : _a[0];
|
|
9668
9548
|
}, [paddingRight, paddingTop, sizes]);
|
|
9669
|
-
return /* @__PURE__ */ (0,
|
|
9670
|
-
|
|
9549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9550
|
+
import_react44.NodeViewWrapper,
|
|
9671
9551
|
{
|
|
9672
9552
|
draggable: editor.isEditable,
|
|
9673
9553
|
"data-drag-handle": editor.isEditable,
|
|
@@ -9675,8 +9555,8 @@ function ButtonView(props) {
|
|
|
9675
9555
|
style: {
|
|
9676
9556
|
textAlign: alignment
|
|
9677
9557
|
},
|
|
9678
|
-
children: /* @__PURE__ */ (0,
|
|
9679
|
-
/* @__PURE__ */ (0,
|
|
9558
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Popover, { open: props.selected && editor.isEditable, children: [
|
|
9559
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9680
9560
|
"button",
|
|
9681
9561
|
{
|
|
9682
9562
|
className: cn(
|
|
@@ -9719,7 +9599,7 @@ function ButtonView(props) {
|
|
|
9719
9599
|
}) : text2
|
|
9720
9600
|
}
|
|
9721
9601
|
) }) }),
|
|
9722
|
-
/* @__PURE__ */ (0,
|
|
9602
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9723
9603
|
PopoverContent,
|
|
9724
9604
|
{
|
|
9725
9605
|
align: "end",
|
|
@@ -9728,8 +9608,8 @@ function ButtonView(props) {
|
|
|
9728
9608
|
sideOffset: 8,
|
|
9729
9609
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
9730
9610
|
onCloseAutoFocus: (e) => e.preventDefault(),
|
|
9731
|
-
children: /* @__PURE__ */ (0,
|
|
9732
|
-
/* @__PURE__ */ (0,
|
|
9611
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:items-stretch mly:text-midnight-gray", children: [
|
|
9612
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9733
9613
|
ButtonLabelInput,
|
|
9734
9614
|
{
|
|
9735
9615
|
value: text2,
|
|
@@ -9743,9 +9623,9 @@ function ButtonView(props) {
|
|
|
9743
9623
|
editor
|
|
9744
9624
|
}
|
|
9745
9625
|
),
|
|
9746
|
-
/* @__PURE__ */ (0,
|
|
9747
|
-
/* @__PURE__ */ (0,
|
|
9748
|
-
/* @__PURE__ */ (0,
|
|
9626
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
|
|
9627
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
9628
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9749
9629
|
Select,
|
|
9750
9630
|
{
|
|
9751
9631
|
label: "Border Radius",
|
|
@@ -9763,7 +9643,7 @@ function ButtonView(props) {
|
|
|
9763
9643
|
className: "mly:capitalize"
|
|
9764
9644
|
}
|
|
9765
9645
|
),
|
|
9766
|
-
/* @__PURE__ */ (0,
|
|
9646
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9767
9647
|
Select,
|
|
9768
9648
|
{
|
|
9769
9649
|
label: "Style",
|
|
@@ -9781,7 +9661,7 @@ function ButtonView(props) {
|
|
|
9781
9661
|
className: "mly:capitalize"
|
|
9782
9662
|
}
|
|
9783
9663
|
),
|
|
9784
|
-
/* @__PURE__ */ (0,
|
|
9664
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9785
9665
|
Select,
|
|
9786
9666
|
{
|
|
9787
9667
|
label: "Size",
|
|
@@ -9805,9 +9685,9 @@ function ButtonView(props) {
|
|
|
9805
9685
|
}
|
|
9806
9686
|
)
|
|
9807
9687
|
] }),
|
|
9808
|
-
/* @__PURE__ */ (0,
|
|
9809
|
-
/* @__PURE__ */ (0,
|
|
9810
|
-
/* @__PURE__ */ (0,
|
|
9688
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
|
|
9689
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
9690
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9811
9691
|
AlignmentSwitch,
|
|
9812
9692
|
{
|
|
9813
9693
|
alignment,
|
|
@@ -9818,7 +9698,7 @@ function ButtonView(props) {
|
|
|
9818
9698
|
}
|
|
9819
9699
|
}
|
|
9820
9700
|
),
|
|
9821
|
-
/* @__PURE__ */ (0,
|
|
9701
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9822
9702
|
LinkInputPopover,
|
|
9823
9703
|
{
|
|
9824
9704
|
defaultValue: externalLink || "",
|
|
@@ -9834,9 +9714,9 @@ function ButtonView(props) {
|
|
|
9834
9714
|
}
|
|
9835
9715
|
)
|
|
9836
9716
|
] }),
|
|
9837
|
-
/* @__PURE__ */ (0,
|
|
9838
|
-
/* @__PURE__ */ (0,
|
|
9839
|
-
/* @__PURE__ */ (0,
|
|
9717
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, {}),
|
|
9718
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:gap-x-0.5", children: [
|
|
9719
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9840
9720
|
BackgroundColorPickerPopup,
|
|
9841
9721
|
{
|
|
9842
9722
|
variant,
|
|
@@ -9848,7 +9728,7 @@ function ButtonView(props) {
|
|
|
9848
9728
|
}
|
|
9849
9729
|
}
|
|
9850
9730
|
),
|
|
9851
|
-
/* @__PURE__ */ (0,
|
|
9731
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9852
9732
|
TextColorPickerPopup,
|
|
9853
9733
|
{
|
|
9854
9734
|
color: textColor || "transparent",
|
|
@@ -9869,20 +9749,20 @@ function ButtonView(props) {
|
|
|
9869
9749
|
}
|
|
9870
9750
|
function BackgroundColorPickerPopup(props) {
|
|
9871
9751
|
const { color, onChange, variant } = props;
|
|
9872
|
-
return /* @__PURE__ */ (0,
|
|
9752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9873
9753
|
ColorPicker,
|
|
9874
9754
|
{
|
|
9875
9755
|
color,
|
|
9876
9756
|
onColorChange: onChange,
|
|
9877
9757
|
tooltip: "Background Color",
|
|
9878
|
-
children: /* @__PURE__ */ (0,
|
|
9758
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9879
9759
|
BaseButton,
|
|
9880
9760
|
{
|
|
9881
9761
|
variant: "ghost",
|
|
9882
9762
|
size: "sm",
|
|
9883
9763
|
type: "button",
|
|
9884
9764
|
className: "mly:size-7",
|
|
9885
|
-
children: /* @__PURE__ */ (0,
|
|
9765
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9886
9766
|
"div",
|
|
9887
9767
|
{
|
|
9888
9768
|
className: "mly:h-4 mly:w-4 mly:shrink-0 mly:rounded-full mly:shadow",
|
|
@@ -9901,16 +9781,16 @@ function BackgroundColorPickerPopup(props) {
|
|
|
9901
9781
|
}
|
|
9902
9782
|
function TextColorPickerPopup(props) {
|
|
9903
9783
|
const { color, onChange } = props;
|
|
9904
|
-
return /* @__PURE__ */ (0,
|
|
9784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPicker, { color, onColorChange: onChange, tooltip: "Text Color", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9905
9785
|
BaseButton,
|
|
9906
9786
|
{
|
|
9907
9787
|
variant: "ghost",
|
|
9908
9788
|
size: "sm",
|
|
9909
9789
|
type: "button",
|
|
9910
9790
|
className: "mly:size-7",
|
|
9911
|
-
children: /* @__PURE__ */ (0,
|
|
9912
|
-
/* @__PURE__ */ (0,
|
|
9913
|
-
/* @__PURE__ */ (0,
|
|
9791
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
|
|
9792
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-midnight-gray", children: "A" }),
|
|
9793
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
9914
9794
|
"div",
|
|
9915
9795
|
{
|
|
9916
9796
|
className: "mly:h-[2px] mly:w-3 mly:shrink-0 mly:rounded-md mly:shadow",
|
|
@@ -10077,7 +9957,7 @@ var ButtonExtension = import_core14.Node.create({
|
|
|
10077
9957
|
};
|
|
10078
9958
|
},
|
|
10079
9959
|
addNodeView() {
|
|
10080
|
-
return (0,
|
|
9960
|
+
return (0, import_react46.ReactNodeViewRenderer)(ButtonView, {
|
|
10081
9961
|
contentDOMElementTag: "div",
|
|
10082
9962
|
className: "mly:relative"
|
|
10083
9963
|
});
|
|
@@ -10086,7 +9966,7 @@ var ButtonExtension = import_core14.Node.create({
|
|
|
10086
9966
|
|
|
10087
9967
|
// src/editor/nodes/image/image.ts
|
|
10088
9968
|
var import_extension_image2 = __toESM(require("@tiptap/extension-image"), 1);
|
|
10089
|
-
var
|
|
9969
|
+
var import_react47 = require("@tiptap/react");
|
|
10090
9970
|
var DEFAULT_IMAGE_BORDER_RADIUS = 0;
|
|
10091
9971
|
var ImageExtension = import_extension_image2.default.extend({
|
|
10092
9972
|
addAttributes() {
|
|
@@ -10224,7 +10104,7 @@ var ImageExtension = import_extension_image2.default.extend({
|
|
|
10224
10104
|
});
|
|
10225
10105
|
},
|
|
10226
10106
|
addNodeView() {
|
|
10227
|
-
return (0,
|
|
10107
|
+
return (0, import_react47.ReactNodeViewRenderer)(ImageView, {
|
|
10228
10108
|
className: "mly:relative"
|
|
10229
10109
|
});
|
|
10230
10110
|
}
|
|
@@ -10233,89 +10113,30 @@ var ImageExtension = import_extension_image2.default.extend({
|
|
|
10233
10113
|
// src/editor/nodes/html/html.tsx
|
|
10234
10114
|
var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
|
|
10235
10115
|
var import_state7 = require("@tiptap/pm/state");
|
|
10236
|
-
var
|
|
10116
|
+
var import_react56 = require("@tiptap/react");
|
|
10237
10117
|
var import_xml = __toESM(require("highlight.js/lib/languages/xml"), 1);
|
|
10238
10118
|
var import_lowlight = require("lowlight");
|
|
10239
10119
|
|
|
10240
10120
|
// src/editor/nodes/html/html-view.tsx
|
|
10241
|
-
var
|
|
10242
|
-
var
|
|
10243
|
-
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
10121
|
+
var import_react48 = require("@tiptap/react");
|
|
10122
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
10244
10123
|
function HTMLCodeBlockView(props) {
|
|
10245
|
-
const { node
|
|
10246
|
-
|
|
10247
|
-
activeTab || (activeTab = "code");
|
|
10124
|
+
const { node } = props;
|
|
10125
|
+
const { language } = node.attrs;
|
|
10248
10126
|
const languageClass = language ? `language-${language}` : "";
|
|
10249
|
-
|
|
10250
|
-
|
|
10251
|
-
if (cur.type.name === "text") {
|
|
10252
|
-
return acc + cur.text;
|
|
10253
|
-
} else if (cur.type.name === "variable") {
|
|
10254
|
-
const { id: variable, fallback } = (cur == null ? void 0 : cur.attrs) || {};
|
|
10255
|
-
const formattedVariable = fallback ? `{{${variable},fallback=${fallback}}}` : `{{${variable}}}`;
|
|
10256
|
-
return acc + formattedVariable;
|
|
10257
|
-
}
|
|
10258
|
-
return acc;
|
|
10259
|
-
}, "");
|
|
10260
|
-
const htmlParser = new DOMParser();
|
|
10261
|
-
const htmlDoc = htmlParser.parseFromString(text2, "text/html");
|
|
10262
|
-
const style = htmlDoc.querySelectorAll("style");
|
|
10263
|
-
const body = htmlDoc.body;
|
|
10264
|
-
const combinedStyle = Array.from(style).map((s) => s.innerHTML).join("\n");
|
|
10265
|
-
return `<style>${combinedStyle}</style>${body.innerHTML}`;
|
|
10266
|
-
}, [activeTab]);
|
|
10267
|
-
const isEmpty = html2 === "";
|
|
10268
|
-
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
10269
|
-
import_react51.NodeViewWrapper,
|
|
10127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
10128
|
+
import_react48.NodeViewWrapper,
|
|
10270
10129
|
{
|
|
10271
10130
|
draggable: false,
|
|
10272
10131
|
"data-drag-handle": false,
|
|
10273
10132
|
"data-type": "htmlCodeBlock",
|
|
10274
|
-
children:
|
|
10275
|
-
|
|
10276
|
-
|
|
10277
|
-
|
|
10278
|
-
|
|
10279
|
-
|
|
10280
|
-
|
|
10281
|
-
) }),
|
|
10282
|
-
activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
10283
|
-
"div",
|
|
10284
|
-
{
|
|
10285
|
-
className: cn(
|
|
10286
|
-
"mly:not-prose mly:rounded-lg mly:border mly:border-gray-200 mly:p-2",
|
|
10287
|
-
isEmpty && "mly:min-h-[42px]"
|
|
10288
|
-
),
|
|
10289
|
-
ref: (node2) => {
|
|
10290
|
-
if (!node2 || (node2 == null ? void 0 : node2.shadowRoot)) {
|
|
10291
|
-
return;
|
|
10292
|
-
}
|
|
10293
|
-
const shadow = node2.attachShadow({ mode: "open" });
|
|
10294
|
-
const sheet = new CSSStyleSheet();
|
|
10295
|
-
sheet.replaceSync(`
|
|
10296
|
-
* { font-family: 'Inter', sans-serif; }
|
|
10297
|
-
blockquote, h1, h2, h3, img, li, ol, p, ul {
|
|
10298
|
-
margin-top: 0;
|
|
10299
|
-
margin-bottom: 0;
|
|
10300
|
-
}
|
|
10301
|
-
`);
|
|
10302
|
-
shadow.adoptedStyleSheets = [sheet];
|
|
10303
|
-
const container = document.createElement("div");
|
|
10304
|
-
container.innerHTML = html2;
|
|
10305
|
-
shadow.appendChild(container);
|
|
10306
|
-
},
|
|
10307
|
-
contentEditable: false,
|
|
10308
|
-
onClick: () => {
|
|
10309
|
-
if (!isEmpty) {
|
|
10310
|
-
return;
|
|
10311
|
-
}
|
|
10312
|
-
updateAttributes2({
|
|
10313
|
-
activeTab: "code"
|
|
10314
|
-
});
|
|
10315
|
-
}
|
|
10316
|
-
}
|
|
10317
|
-
)
|
|
10318
|
-
]
|
|
10133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("pre", { className: "mly-html-code-pre", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
10134
|
+
import_react48.NodeViewContent,
|
|
10135
|
+
{
|
|
10136
|
+
as: "code",
|
|
10137
|
+
className: cn("is-editable", languageClass)
|
|
10138
|
+
}
|
|
10139
|
+
) })
|
|
10319
10140
|
}
|
|
10320
10141
|
);
|
|
10321
10142
|
}
|
|
@@ -10454,24 +10275,24 @@ var ParagraphExtension = import_extension_paragraph.default.extend({
|
|
|
10454
10275
|
|
|
10455
10276
|
// src/editor/nodes/repeat/repeat.ts
|
|
10456
10277
|
var import_core16 = require("@tiptap/core");
|
|
10457
|
-
var
|
|
10278
|
+
var import_react50 = require("@tiptap/react");
|
|
10458
10279
|
|
|
10459
10280
|
// src/editor/nodes/repeat/repeat-view.tsx
|
|
10460
|
-
var
|
|
10461
|
-
var
|
|
10462
|
-
var
|
|
10281
|
+
var import_react49 = require("@tiptap/react");
|
|
10282
|
+
var import_lucide_react26 = require("lucide-react");
|
|
10283
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
10463
10284
|
function RepeatView(props) {
|
|
10464
10285
|
const { editor, getPos } = props;
|
|
10465
|
-
return /* @__PURE__ */ (0,
|
|
10466
|
-
|
|
10286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
10287
|
+
import_react49.NodeViewWrapper,
|
|
10467
10288
|
{
|
|
10468
10289
|
"data-type": "repeat",
|
|
10469
10290
|
draggable: editor.isEditable,
|
|
10470
10291
|
"data-drag-handle": editor.isEditable,
|
|
10471
10292
|
className: "mly:relative",
|
|
10472
10293
|
children: [
|
|
10473
|
-
/* @__PURE__ */ (0,
|
|
10474
|
-
/* @__PURE__ */ (0,
|
|
10294
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react49.NodeViewContent, { className: "is-editable" }),
|
|
10295
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
10475
10296
|
"div",
|
|
10476
10297
|
{
|
|
10477
10298
|
role: "button",
|
|
@@ -10482,8 +10303,8 @@ function RepeatView(props) {
|
|
|
10482
10303
|
editor.commands.setNodeSelection(getPos());
|
|
10483
10304
|
},
|
|
10484
10305
|
children: [
|
|
10485
|
-
/* @__PURE__ */ (0,
|
|
10486
|
-
/* @__PURE__ */ (0,
|
|
10306
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.Repeat2, { className: "mly:size-3 mly:stroke-[2.5] mly:text-midnight-gray" }),
|
|
10307
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mly:w-[1.5px] mly:grow mly:rounded-full mly:bg-rose-300" })
|
|
10487
10308
|
]
|
|
10488
10309
|
}
|
|
10489
10310
|
)
|
|
@@ -10567,7 +10388,7 @@ var RepeatExtension = import_core16.Node.create({
|
|
|
10567
10388
|
};
|
|
10568
10389
|
},
|
|
10569
10390
|
addNodeView() {
|
|
10570
|
-
return (0,
|
|
10391
|
+
return (0, import_react50.ReactNodeViewRenderer)(RepeatView, {
|
|
10571
10392
|
contentDOMElementTag: "div",
|
|
10572
10393
|
className: "mly:relative"
|
|
10573
10394
|
});
|
|
@@ -10724,14 +10545,14 @@ var SlashCommandExtension = import_core18.Extension.create({
|
|
|
10724
10545
|
});
|
|
10725
10546
|
|
|
10726
10547
|
// src/editor/extensions/slash-command/slash-command-view.tsx
|
|
10727
|
-
var
|
|
10728
|
-
var
|
|
10729
|
-
var
|
|
10548
|
+
var import_react52 = require("@tiptap/react");
|
|
10549
|
+
var import_react53 = require("react");
|
|
10550
|
+
var import_tippy7 = __toESM(require("tippy.js"), 1);
|
|
10730
10551
|
|
|
10731
10552
|
// src/editor/extensions/slash-command/slash-command-item.tsx
|
|
10732
|
-
var
|
|
10733
|
-
var
|
|
10734
|
-
var
|
|
10553
|
+
var import_lucide_react27 = require("lucide-react");
|
|
10554
|
+
var import_react51 = require("react");
|
|
10555
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
10735
10556
|
function SlashCommandItem(props) {
|
|
10736
10557
|
var _a;
|
|
10737
10558
|
const {
|
|
@@ -10746,7 +10567,7 @@ function SlashCommandItem(props) {
|
|
|
10746
10567
|
hoveredItemKey,
|
|
10747
10568
|
onHover
|
|
10748
10569
|
} = props;
|
|
10749
|
-
const [open, setOpen] = (0,
|
|
10570
|
+
const [open, setOpen] = (0, import_react51.useState)(false);
|
|
10750
10571
|
const isActive = groupIndex === selectedGroupIndex && commandIndex === selectedCommandIndex;
|
|
10751
10572
|
const itemKey = `${groupIndex}-${commandIndex}`;
|
|
10752
10573
|
const isHovered = hoveredItemKey === itemKey;
|
|
@@ -10754,19 +10575,19 @@ function SlashCommandItem(props) {
|
|
|
10754
10575
|
const shouldOpenTooltip = !!(item == null ? void 0 : item.preview) && (isHovered || isActive && !hoveredItemKey);
|
|
10755
10576
|
const hasRenderFunction = typeof item.render === "function";
|
|
10756
10577
|
const renderFunctionValue = hasRenderFunction ? (_a = item.render) == null ? void 0 : _a.call(item, editor) : null;
|
|
10757
|
-
let value = /* @__PURE__ */ (0,
|
|
10758
|
-
/* @__PURE__ */ (0,
|
|
10759
|
-
/* @__PURE__ */ (0,
|
|
10760
|
-
/* @__PURE__ */ (0,
|
|
10761
|
-
/* @__PURE__ */ (0,
|
|
10578
|
+
let value = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
10579
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mly:flex mly:h-6 mly:w-6 mly:shrink-0 mly:items-center mly:justify-center", children: item.icon }),
|
|
10580
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "mly:grow", children: [
|
|
10581
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:font-medium", children: item.title }),
|
|
10582
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:text-xs mly:text-gray-400", children: item.description })
|
|
10762
10583
|
] }),
|
|
10763
|
-
isSubCommand2 && /* @__PURE__ */ (0,
|
|
10584
|
+
isSubCommand2 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "mly:block mly:px-1 mly:text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.ChevronRightIcon, { className: "mly:size-3.5 mly:stroke-[2.5]" }) })
|
|
10764
10585
|
] });
|
|
10765
10586
|
if (renderFunctionValue !== null && renderFunctionValue !== true) {
|
|
10766
10587
|
value = renderFunctionValue;
|
|
10767
10588
|
}
|
|
10768
|
-
const openTimerRef = (0,
|
|
10769
|
-
const handleDelayedOpen = (0,
|
|
10589
|
+
const openTimerRef = (0, import_react51.useRef)(0);
|
|
10590
|
+
const handleDelayedOpen = (0, import_react51.useCallback)(() => {
|
|
10770
10591
|
window.clearTimeout(openTimerRef.current);
|
|
10771
10592
|
const delay = 200;
|
|
10772
10593
|
openTimerRef.current = window.setTimeout(() => {
|
|
@@ -10774,7 +10595,7 @@ function SlashCommandItem(props) {
|
|
|
10774
10595
|
openTimerRef.current = 0;
|
|
10775
10596
|
}, delay);
|
|
10776
10597
|
}, [setOpen]);
|
|
10777
|
-
(0,
|
|
10598
|
+
(0, import_react51.useEffect)(() => {
|
|
10778
10599
|
if (shouldOpenTooltip) {
|
|
10779
10600
|
handleDelayedOpen();
|
|
10780
10601
|
} else {
|
|
@@ -10783,7 +10604,7 @@ function SlashCommandItem(props) {
|
|
|
10783
10604
|
setOpen(false);
|
|
10784
10605
|
}
|
|
10785
10606
|
}, [shouldOpenTooltip]);
|
|
10786
|
-
(0,
|
|
10607
|
+
(0, import_react51.useEffect)(() => {
|
|
10787
10608
|
return () => {
|
|
10788
10609
|
if (openTimerRef.current) {
|
|
10789
10610
|
window.clearTimeout(openTimerRef.current);
|
|
@@ -10791,8 +10612,8 @@ function SlashCommandItem(props) {
|
|
|
10791
10612
|
}
|
|
10792
10613
|
};
|
|
10793
10614
|
}, []);
|
|
10794
|
-
return /* @__PURE__ */ (0,
|
|
10795
|
-
/* @__PURE__ */ (0,
|
|
10615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Tooltip, { open, children: [
|
|
10616
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
10796
10617
|
"button",
|
|
10797
10618
|
{
|
|
10798
10619
|
className: cn(
|
|
@@ -10807,14 +10628,14 @@ function SlashCommandItem(props) {
|
|
|
10807
10628
|
children: value
|
|
10808
10629
|
}
|
|
10809
10630
|
) }),
|
|
10810
|
-
/* @__PURE__ */ (0,
|
|
10631
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
10811
10632
|
TooltipContent,
|
|
10812
10633
|
{
|
|
10813
10634
|
side: "right",
|
|
10814
10635
|
sideOffset: 10,
|
|
10815
10636
|
className: "mly:w-52 mly:rounded-lg mly:border-none mly:p-1 mly:shadow",
|
|
10816
|
-
children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0,
|
|
10817
|
-
/* @__PURE__ */ (0,
|
|
10637
|
+
children: typeof item.preview === "function" ? item == null ? void 0 : item.preview(editor) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
10638
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("figure", { className: "mly:relative mly:aspect-[2.5] mly:w-full mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
10818
10639
|
"img",
|
|
10819
10640
|
{
|
|
10820
10641
|
src: item == null ? void 0 : item.preview,
|
|
@@ -10822,7 +10643,7 @@ function SlashCommandItem(props) {
|
|
|
10822
10643
|
className: "mly:absolute mly:inset-0 mly:h-full mly:w-full mly:object-cover"
|
|
10823
10644
|
}
|
|
10824
10645
|
) }),
|
|
10825
|
-
/* @__PURE__ */ (0,
|
|
10646
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mly:mt-2 mly:px-0.5 mly:text-gray-500", children: item.description })
|
|
10826
10647
|
] })
|
|
10827
10648
|
}
|
|
10828
10649
|
)
|
|
@@ -10911,16 +10732,16 @@ function processCommand(options) {
|
|
|
10911
10732
|
}
|
|
10912
10733
|
|
|
10913
10734
|
// src/editor/extensions/slash-command/slash-command-view.tsx
|
|
10914
|
-
var
|
|
10915
|
-
var CommandList = (0,
|
|
10735
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
10736
|
+
var CommandList = (0, import_react53.forwardRef)((props, ref) => {
|
|
10916
10737
|
const { items: groups, command, editor, range, query } = props;
|
|
10917
|
-
const [selectedGroupIndex, setSelectedGroupIndex] = (0,
|
|
10918
|
-
const [selectedCommandIndex, setSelectedCommandIndex] = (0,
|
|
10919
|
-
const [hoveredItemKey, setHoveredItemKey] = (0,
|
|
10920
|
-
const prevQuery = (0,
|
|
10921
|
-
const prevSelectedGroupIndex = (0,
|
|
10922
|
-
const prevSelectedCommandIndex = (0,
|
|
10923
|
-
const selectItem = (0,
|
|
10738
|
+
const [selectedGroupIndex, setSelectedGroupIndex] = (0, import_react53.useState)(0);
|
|
10739
|
+
const [selectedCommandIndex, setSelectedCommandIndex] = (0, import_react53.useState)(0);
|
|
10740
|
+
const [hoveredItemKey, setHoveredItemKey] = (0, import_react53.useState)(null);
|
|
10741
|
+
const prevQuery = (0, import_react53.useRef)("");
|
|
10742
|
+
const prevSelectedGroupIndex = (0, import_react53.useRef)(0);
|
|
10743
|
+
const prevSelectedCommandIndex = (0, import_react53.useRef)(0);
|
|
10744
|
+
const selectItem = (0, import_react53.useCallback)(
|
|
10924
10745
|
(groupIndex, commandIndex) => {
|
|
10925
10746
|
const item = groups[groupIndex].commands[commandIndex];
|
|
10926
10747
|
if (!item) {
|
|
@@ -10930,7 +10751,7 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
|
|
|
10930
10751
|
},
|
|
10931
10752
|
[command]
|
|
10932
10753
|
);
|
|
10933
|
-
(0,
|
|
10754
|
+
(0, import_react53.useImperativeHandle)(ref, () => ({
|
|
10934
10755
|
onKeyDown: ({ event }) => {
|
|
10935
10756
|
var _a, _b, _c, _d;
|
|
10936
10757
|
const navigationKeys = [
|
|
@@ -11018,9 +10839,9 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
|
|
|
11018
10839
|
}
|
|
11019
10840
|
}
|
|
11020
10841
|
}));
|
|
11021
|
-
const commandListContainer = (0,
|
|
11022
|
-
const activeCommandRef = (0,
|
|
11023
|
-
(0,
|
|
10842
|
+
const commandListContainer = (0, import_react53.useRef)(null);
|
|
10843
|
+
const activeCommandRef = (0, import_react53.useRef)(null);
|
|
10844
|
+
(0, import_react53.useLayoutEffect)(() => {
|
|
11024
10845
|
const container = commandListContainer == null ? void 0 : commandListContainer.current;
|
|
11025
10846
|
const activeCommandContainer = activeCommandRef == null ? void 0 : activeCommandRef.current;
|
|
11026
10847
|
if (!container || !activeCommandContainer) {
|
|
@@ -11035,11 +10856,11 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
|
|
|
11035
10856
|
commandListContainer,
|
|
11036
10857
|
activeCommandRef
|
|
11037
10858
|
]);
|
|
11038
|
-
(0,
|
|
10859
|
+
(0, import_react53.useEffect)(() => {
|
|
11039
10860
|
setSelectedGroupIndex(0);
|
|
11040
10861
|
setSelectedCommandIndex(0);
|
|
11041
10862
|
}, [groups]);
|
|
11042
|
-
(0,
|
|
10863
|
+
(0, import_react53.useEffect)(() => {
|
|
11043
10864
|
return () => {
|
|
11044
10865
|
prevQuery.current = "";
|
|
11045
10866
|
prevSelectedGroupIndex.current = 0;
|
|
@@ -11049,15 +10870,15 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
|
|
|
11049
10870
|
if (!groups || groups.length === 0) {
|
|
11050
10871
|
return null;
|
|
11051
10872
|
}
|
|
11052
|
-
return /* @__PURE__ */ (0,
|
|
11053
|
-
/* @__PURE__ */ (0,
|
|
10873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:z-50 mly:w-72 mly:overflow-hidden mly:rounded-md mly:border mly:border-gray-200 mly:bg-white mly:shadow-md mly:transition-all", children: [
|
|
10874
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
11054
10875
|
"div",
|
|
11055
10876
|
{
|
|
11056
10877
|
id: "slash-command",
|
|
11057
10878
|
ref: commandListContainer,
|
|
11058
10879
|
className: "mly:no-scrollbar mly:h-auto mly:max-h-[330px] mly:overflow-y-auto",
|
|
11059
|
-
children: groups.map((group, groupIndex) => /* @__PURE__ */ (0,
|
|
11060
|
-
/* @__PURE__ */ (0,
|
|
10880
|
+
children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react53.Fragment, { children: [
|
|
10881
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
11061
10882
|
"span",
|
|
11062
10883
|
{
|
|
11063
10884
|
className: cn(
|
|
@@ -11067,9 +10888,9 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
|
|
|
11067
10888
|
children: group.title
|
|
11068
10889
|
}
|
|
11069
10890
|
),
|
|
11070
|
-
/* @__PURE__ */ (0,
|
|
10891
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:space-y-0.5 mly:p-1", children: group.commands.map((item, commandIndex) => {
|
|
11071
10892
|
const itemKey = `${groupIndex}-${commandIndex}`;
|
|
11072
|
-
return /* @__PURE__ */ (0,
|
|
10893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
11073
10894
|
SlashCommandItem,
|
|
11074
10895
|
{
|
|
11075
10896
|
item,
|
|
@@ -11089,16 +10910,16 @@ var CommandList = (0, import_react57.forwardRef)((props, ref) => {
|
|
|
11089
10910
|
] }, groupIndex))
|
|
11090
10911
|
}
|
|
11091
10912
|
),
|
|
11092
|
-
/* @__PURE__ */ (0,
|
|
11093
|
-
/* @__PURE__ */ (0,
|
|
11094
|
-
/* @__PURE__ */ (0,
|
|
11095
|
-
/* @__PURE__ */ (0,
|
|
10913
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mly:border-t mly:border-gray-200 mly:px-1 mly:py-3 mly:pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "mly:flex mly:items-center", children: [
|
|
10914
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
|
|
10915
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2191" }),
|
|
10916
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:ml-1 mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-2 mly:font-medium", children: "\u2193" }),
|
|
11096
10917
|
" ",
|
|
11097
10918
|
"to navigate"
|
|
11098
10919
|
] }),
|
|
11099
|
-
/* @__PURE__ */ (0,
|
|
11100
|
-
/* @__PURE__ */ (0,
|
|
11101
|
-
/* @__PURE__ */ (0,
|
|
10920
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", className: "mly:select-none mly:px-1", children: "\xB7" }),
|
|
10921
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "mly:text-center mly:text-xs mly:text-gray-400", children: [
|
|
10922
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("kbd", { className: "mly:rounded mly:border mly:border-gray-200 mly:p-1 mly:px-1.5 mly:font-medium", children: "Enter" }),
|
|
11102
10923
|
" ",
|
|
11103
10924
|
"to select"
|
|
11104
10925
|
] })
|
|
@@ -11122,11 +10943,11 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
|
|
|
11122
10943
|
let popup = null;
|
|
11123
10944
|
return {
|
|
11124
10945
|
onStart: (props) => {
|
|
11125
|
-
component = new
|
|
10946
|
+
component = new import_react52.ReactRenderer(CommandList, {
|
|
11126
10947
|
props,
|
|
11127
10948
|
editor: props.editor
|
|
11128
10949
|
});
|
|
11129
|
-
popup = (0,
|
|
10950
|
+
popup = (0, import_tippy7.default)("body", {
|
|
11130
10951
|
getReferenceClientRect: props.clientRect,
|
|
11131
10952
|
appendTo: () => document.body,
|
|
11132
10953
|
content: component.element,
|
|
@@ -11175,16 +10996,16 @@ function getSlashCommandSuggestions(groups = DEFAULT_SLASH_COMMANDS) {
|
|
|
11175
10996
|
}
|
|
11176
10997
|
|
|
11177
10998
|
// src/editor/nodes/variable/variable-suggestions.tsx
|
|
11178
|
-
var
|
|
11179
|
-
var
|
|
11180
|
-
var
|
|
11181
|
-
var
|
|
11182
|
-
var VariableList = (0,
|
|
10999
|
+
var import_react54 = require("@tiptap/react");
|
|
11000
|
+
var import_react55 = require("react");
|
|
11001
|
+
var import_tippy8 = __toESM(require("tippy.js"), 1);
|
|
11002
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
11003
|
+
var VariableList = (0, import_react55.forwardRef)((props, ref) => {
|
|
11183
11004
|
var _a;
|
|
11184
11005
|
const { items = [], editor } = props;
|
|
11185
|
-
const popoverRef = (0,
|
|
11006
|
+
const popoverRef = (0, import_react55.useRef)(null);
|
|
11186
11007
|
const VariableSuggestionPopoverComponent = (_a = useVariableOptions(editor)) == null ? void 0 : _a.variableSuggestionsPopover;
|
|
11187
|
-
(0,
|
|
11008
|
+
(0, import_react55.useImperativeHandle)(ref, () => ({
|
|
11188
11009
|
onKeyDown: ({ event }) => {
|
|
11189
11010
|
if (!popoverRef.current) {
|
|
11190
11011
|
return false;
|
|
@@ -11207,7 +11028,7 @@ var VariableList = (0, import_react59.forwardRef)((props, ref) => {
|
|
|
11207
11028
|
return false;
|
|
11208
11029
|
}
|
|
11209
11030
|
}));
|
|
11210
|
-
return /* @__PURE__ */ (0,
|
|
11031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
11211
11032
|
VariableSuggestionPopoverComponent,
|
|
11212
11033
|
{
|
|
11213
11034
|
items,
|
|
@@ -11242,14 +11063,14 @@ function getVariableSuggestions(char = DEFAULT_VARIABLE_TRIGGER_CHAR) {
|
|
|
11242
11063
|
let popup = null;
|
|
11243
11064
|
return {
|
|
11244
11065
|
onStart: (props) => {
|
|
11245
|
-
component = new
|
|
11066
|
+
component = new import_react54.ReactRenderer(VariableList, {
|
|
11246
11067
|
props,
|
|
11247
11068
|
editor: props.editor
|
|
11248
11069
|
});
|
|
11249
11070
|
if (!props.clientRect) {
|
|
11250
11071
|
return;
|
|
11251
11072
|
}
|
|
11252
|
-
popup = (0,
|
|
11073
|
+
popup = (0, import_tippy8.default)("body", {
|
|
11253
11074
|
getReferenceClientRect: props.clientRect,
|
|
11254
11075
|
appendTo: () => document.body,
|
|
11255
11076
|
content: component.element,
|
|
@@ -11316,7 +11137,7 @@ var HTMLCodeBlockExtension = import_extension_code_block_lowlight.default.extend
|
|
|
11316
11137
|
});
|
|
11317
11138
|
},
|
|
11318
11139
|
addNodeView() {
|
|
11319
|
-
return (0,
|
|
11140
|
+
return (0, import_react56.ReactNodeViewRenderer)(HTMLCodeBlockView, {
|
|
11320
11141
|
className: "mly:relative",
|
|
11321
11142
|
attrs: ({ node }) => {
|
|
11322
11143
|
var _a;
|
|
@@ -11391,17 +11212,17 @@ var isCustomNodeSelected = (editor, node) => {
|
|
|
11391
11212
|
};
|
|
11392
11213
|
|
|
11393
11214
|
// src/editor/components/text-menu/text-bubble-menu.tsx
|
|
11394
|
-
var
|
|
11215
|
+
var import_react60 = require("@tiptap/react");
|
|
11395
11216
|
|
|
11396
11217
|
// src/editor/components/text-menu/text-bubble-content.tsx
|
|
11397
|
-
var
|
|
11218
|
+
var import_lucide_react28 = require("lucide-react");
|
|
11398
11219
|
|
|
11399
11220
|
// src/editor/components/text-menu/use-text-menu-state.tsx
|
|
11400
|
-
var
|
|
11401
|
-
var
|
|
11221
|
+
var import_react57 = require("@tiptap/react");
|
|
11222
|
+
var import_fast_deep_equal7 = __toESM(require("fast-deep-equal"), 1);
|
|
11402
11223
|
var DEFAULT_TEXT_COLOR = "#374151";
|
|
11403
11224
|
var useTextMenuState = (editor) => {
|
|
11404
|
-
const states = (0,
|
|
11225
|
+
const states = (0, import_react57.useEditorState)({
|
|
11405
11226
|
editor,
|
|
11406
11227
|
selector: (ctx) => {
|
|
11407
11228
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -11417,13 +11238,13 @@ var useTextMenuState = (editor) => {
|
|
|
11417
11238
|
paragraphShowIfKey: ((_h = ctx.editor.getAttributes("paragraph")) == null ? void 0 : _h.showIfKey) || ""
|
|
11418
11239
|
};
|
|
11419
11240
|
},
|
|
11420
|
-
equalityFn:
|
|
11241
|
+
equalityFn: import_fast_deep_equal7.default
|
|
11421
11242
|
});
|
|
11422
11243
|
return states;
|
|
11423
11244
|
};
|
|
11424
11245
|
|
|
11425
11246
|
// src/editor/components/text-menu/text-bubble-content.tsx
|
|
11426
|
-
var
|
|
11247
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
11427
11248
|
function TextBubbleContent(props) {
|
|
11428
11249
|
var _a, _b, _c, _d;
|
|
11429
11250
|
const { editor, showListMenu = true } = props;
|
|
@@ -11435,41 +11256,41 @@ function TextBubbleContent(props) {
|
|
|
11435
11256
|
name: "bold",
|
|
11436
11257
|
isActive: () => editor == null ? void 0 : editor.isActive("bold"),
|
|
11437
11258
|
command: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
|
|
11438
|
-
icon:
|
|
11259
|
+
icon: import_lucide_react28.BoldIcon,
|
|
11439
11260
|
tooltip: "Bold"
|
|
11440
11261
|
},
|
|
11441
11262
|
{
|
|
11442
11263
|
name: "italic",
|
|
11443
11264
|
isActive: () => editor == null ? void 0 : editor.isActive("italic"),
|
|
11444
11265
|
command: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
|
|
11445
|
-
icon:
|
|
11266
|
+
icon: import_lucide_react28.ItalicIcon,
|
|
11446
11267
|
tooltip: "Italic"
|
|
11447
11268
|
},
|
|
11448
11269
|
{
|
|
11449
11270
|
name: "underline",
|
|
11450
11271
|
isActive: () => editor == null ? void 0 : editor.isActive("underline"),
|
|
11451
11272
|
command: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run(),
|
|
11452
|
-
icon:
|
|
11273
|
+
icon: import_lucide_react28.UnderlineIcon,
|
|
11453
11274
|
tooltip: "Underline"
|
|
11454
11275
|
},
|
|
11455
11276
|
{
|
|
11456
11277
|
name: "strike",
|
|
11457
11278
|
isActive: () => editor == null ? void 0 : editor.isActive("strike"),
|
|
11458
11279
|
command: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run(),
|
|
11459
|
-
icon:
|
|
11280
|
+
icon: import_lucide_react28.StrikethroughIcon,
|
|
11460
11281
|
tooltip: "Strikethrough"
|
|
11461
11282
|
},
|
|
11462
11283
|
{
|
|
11463
11284
|
name: "code",
|
|
11464
11285
|
isActive: () => editor == null ? void 0 : editor.isActive("code"),
|
|
11465
11286
|
command: () => editor == null ? void 0 : editor.chain().focus().toggleCode().run(),
|
|
11466
|
-
icon:
|
|
11287
|
+
icon: import_lucide_react28.CodeIcon,
|
|
11467
11288
|
tooltip: "Code"
|
|
11468
11289
|
}
|
|
11469
11290
|
];
|
|
11470
|
-
return /* @__PURE__ */ (0,
|
|
11471
|
-
items.map((item, index) => /* @__PURE__ */ (0,
|
|
11472
|
-
/* @__PURE__ */ (0,
|
|
11291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
|
|
11292
|
+
items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BubbleMenuButton, __spreadValues({}, item), index)),
|
|
11293
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11473
11294
|
AlignmentSwitch,
|
|
11474
11295
|
{
|
|
11475
11296
|
alignment: state.textAlign,
|
|
@@ -11478,21 +11299,21 @@ function TextBubbleContent(props) {
|
|
|
11478
11299
|
}
|
|
11479
11300
|
}
|
|
11480
11301
|
),
|
|
11481
|
-
!state.isListActive && showListMenu && /* @__PURE__ */ (0,
|
|
11482
|
-
/* @__PURE__ */ (0,
|
|
11302
|
+
!state.isListActive && showListMenu && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
|
|
11303
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11483
11304
|
BubbleMenuButton,
|
|
11484
11305
|
{
|
|
11485
|
-
icon:
|
|
11306
|
+
icon: import_lucide_react28.List,
|
|
11486
11307
|
command: () => {
|
|
11487
11308
|
editor.chain().focus().toggleBulletList().run();
|
|
11488
11309
|
},
|
|
11489
11310
|
tooltip: "Bullet List"
|
|
11490
11311
|
}
|
|
11491
11312
|
),
|
|
11492
|
-
/* @__PURE__ */ (0,
|
|
11313
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11493
11314
|
BubbleMenuButton,
|
|
11494
11315
|
{
|
|
11495
|
-
icon:
|
|
11316
|
+
icon: import_lucide_react28.ListOrdered,
|
|
11496
11317
|
command: () => {
|
|
11497
11318
|
editor.chain().focus().toggleOrderedList().run();
|
|
11498
11319
|
},
|
|
@@ -11500,7 +11321,7 @@ function TextBubbleContent(props) {
|
|
|
11500
11321
|
}
|
|
11501
11322
|
)
|
|
11502
11323
|
] }),
|
|
11503
|
-
/* @__PURE__ */ (0,
|
|
11324
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11504
11325
|
LinkInputPopover,
|
|
11505
11326
|
{
|
|
11506
11327
|
defaultValue: (_d = state == null ? void 0 : state.linkUrl) != null ? _d : "",
|
|
@@ -11516,8 +11337,8 @@ function TextBubbleContent(props) {
|
|
|
11516
11337
|
isVariable: state.isUrlVariable
|
|
11517
11338
|
}
|
|
11518
11339
|
),
|
|
11519
|
-
/* @__PURE__ */ (0,
|
|
11520
|
-
/* @__PURE__ */ (0,
|
|
11340
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Divider, {}),
|
|
11341
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11521
11342
|
ColorPicker,
|
|
11522
11343
|
{
|
|
11523
11344
|
color: state.currentTextColor,
|
|
@@ -11526,16 +11347,16 @@ function TextBubbleContent(props) {
|
|
|
11526
11347
|
},
|
|
11527
11348
|
tooltip: "Text Color",
|
|
11528
11349
|
suggestedColors,
|
|
11529
|
-
children: /* @__PURE__ */ (0,
|
|
11350
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11530
11351
|
BaseButton,
|
|
11531
11352
|
{
|
|
11532
11353
|
variant: "ghost",
|
|
11533
11354
|
size: "sm",
|
|
11534
11355
|
type: "button",
|
|
11535
11356
|
className: "mly:h-7 mly:w-7 mly:shrink-0 mly:p-0",
|
|
11536
|
-
children: /* @__PURE__ */ (0,
|
|
11537
|
-
/* @__PURE__ */ (0,
|
|
11538
|
-
/* @__PURE__ */ (0,
|
|
11357
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mly:flex mly:flex-col mly:items-center mly:justify-center mly:gap-px", children: [
|
|
11358
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "mly:font-bolder mly:font-mono mly:text-xs mly:text-slate-700", children: "A" }),
|
|
11359
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
11539
11360
|
"div",
|
|
11540
11361
|
{
|
|
11541
11362
|
className: "mly:h-[2px] mly:w-3",
|
|
@@ -11551,35 +11372,35 @@ function TextBubbleContent(props) {
|
|
|
11551
11372
|
}
|
|
11552
11373
|
|
|
11553
11374
|
// src/editor/components/text-menu/turn-into-block.tsx
|
|
11554
|
-
var
|
|
11555
|
-
var
|
|
11556
|
-
var
|
|
11375
|
+
var import_lucide_react29 = require("lucide-react");
|
|
11376
|
+
var import_react58 = require("react");
|
|
11377
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
11557
11378
|
var isOption = (option) => option.type === "option";
|
|
11558
11379
|
var isCategory = (option) => option.type === "category";
|
|
11559
11380
|
function TurnIntoBlock(props) {
|
|
11560
11381
|
const { options } = props;
|
|
11561
|
-
const activeItem = (0,
|
|
11382
|
+
const activeItem = (0, import_react58.useMemo)(
|
|
11562
11383
|
() => options.find((option) => option.type === "option" && option.isActive()),
|
|
11563
11384
|
[options]
|
|
11564
11385
|
);
|
|
11565
|
-
const { icon: ActiveIcon =
|
|
11566
|
-
return /* @__PURE__ */ (0,
|
|
11567
|
-
/* @__PURE__ */ (0,
|
|
11568
|
-
/* @__PURE__ */ (0,
|
|
11386
|
+
const { icon: ActiveIcon = import_lucide_react29.PilcrowIcon } = activeItem || {};
|
|
11387
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Popover, { children: [
|
|
11388
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Tooltip, { children: [
|
|
11389
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
11569
11390
|
PopoverTrigger,
|
|
11570
11391
|
{
|
|
11571
11392
|
className: cn(
|
|
11572
11393
|
"mly:flex mly:aspect-square mly:h-7 mly:items-center mly:justify-center mly:gap-1 mly:rounded-md mly:px-1.5 mly:text-sm mly:data-[state=open]:bg-soft-gray mly:hover:bg-soft-gray mly:focus-visible:relative mly:focus-visible:z-10 mly:focus-visible:outline-hidden mly:focus-visible:ring-2 mly:focus-visible:ring-gray-400 mly:focus-visible:ring-offset-2"
|
|
11573
11394
|
),
|
|
11574
11395
|
children: [
|
|
11575
|
-
/* @__PURE__ */ (0,
|
|
11576
|
-
/* @__PURE__ */ (0,
|
|
11396
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActiveIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" }),
|
|
11397
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react29.ChevronDownIcon, { className: "mly:h-3 mly:w-3 mly:shrink-0 mly:stroke-[2.5]" })
|
|
11577
11398
|
]
|
|
11578
11399
|
}
|
|
11579
11400
|
) }),
|
|
11580
|
-
/* @__PURE__ */ (0,
|
|
11401
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipContent, { sideOffset: 8, children: "Turn into" })
|
|
11581
11402
|
] }),
|
|
11582
|
-
/* @__PURE__ */ (0,
|
|
11403
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
11583
11404
|
PopoverContent,
|
|
11584
11405
|
{
|
|
11585
11406
|
align: "start",
|
|
@@ -11588,21 +11409,21 @@ function TurnIntoBlock(props) {
|
|
|
11588
11409
|
className: "mly:flex mly:w-[160px] mly:flex-col mly:rounded-md mly:p-1",
|
|
11589
11410
|
children: options.map((option, index) => {
|
|
11590
11411
|
if (isOption(option)) {
|
|
11591
|
-
return /* @__PURE__ */ (0,
|
|
11412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
11592
11413
|
BaseButton,
|
|
11593
11414
|
{
|
|
11594
11415
|
onClick: option.onClick,
|
|
11595
11416
|
variant: "ghost",
|
|
11596
11417
|
className: "mly:mb-0.5 mly:h-auto mly:justify-start mly:gap-2 mly:rounded! mly:!px-2.5 mly:py-1 mly:!pl-3.5 mly:text-sm mly:font-normal mly:text-midnight-gray",
|
|
11597
11418
|
children: [
|
|
11598
|
-
/* @__PURE__ */ (0,
|
|
11419
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(option.icon, { className: "mly:size-[15px] mly:shrink-0" }),
|
|
11599
11420
|
option.label
|
|
11600
11421
|
]
|
|
11601
11422
|
},
|
|
11602
11423
|
option.id
|
|
11603
11424
|
);
|
|
11604
11425
|
} else if (isCategory(option)) {
|
|
11605
|
-
return /* @__PURE__ */ (0,
|
|
11426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
11606
11427
|
"label",
|
|
11607
11428
|
{
|
|
11608
11429
|
className: cn(
|
|
@@ -11621,10 +11442,10 @@ function TurnIntoBlock(props) {
|
|
|
11621
11442
|
}
|
|
11622
11443
|
|
|
11623
11444
|
// src/editor/components/text-menu/use-turn-into-block-options.tsx
|
|
11624
|
-
var
|
|
11625
|
-
var
|
|
11445
|
+
var import_react59 = require("@tiptap/react");
|
|
11446
|
+
var import_lucide_react30 = require("lucide-react");
|
|
11626
11447
|
function useTurnIntoBlockOptions(editor) {
|
|
11627
|
-
return (0,
|
|
11448
|
+
return (0, import_react59.useEditorState)({
|
|
11628
11449
|
editor,
|
|
11629
11450
|
selector: ({ editor: editor2 }) => [
|
|
11630
11451
|
{
|
|
@@ -11633,7 +11454,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11633
11454
|
id: "hierarchy"
|
|
11634
11455
|
},
|
|
11635
11456
|
{
|
|
11636
|
-
icon:
|
|
11457
|
+
icon: import_lucide_react30.PilcrowIcon,
|
|
11637
11458
|
onClick: () => editor2.chain().focus().liftListItem("listItem").setParagraph().run(),
|
|
11638
11459
|
id: "paragraph",
|
|
11639
11460
|
disabled: () => !editor2.can().setParagraph(),
|
|
@@ -11642,7 +11463,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11642
11463
|
type: "option"
|
|
11643
11464
|
},
|
|
11644
11465
|
{
|
|
11645
|
-
icon:
|
|
11466
|
+
icon: import_lucide_react30.Heading1Icon,
|
|
11646
11467
|
onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 1 }).run(),
|
|
11647
11468
|
id: "heading1",
|
|
11648
11469
|
disabled: () => !editor2.can().setHeading({ level: 1 }),
|
|
@@ -11651,7 +11472,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11651
11472
|
type: "option"
|
|
11652
11473
|
},
|
|
11653
11474
|
{
|
|
11654
|
-
icon:
|
|
11475
|
+
icon: import_lucide_react30.Heading2Icon,
|
|
11655
11476
|
onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 2 }).run(),
|
|
11656
11477
|
id: "heading2",
|
|
11657
11478
|
disabled: () => !editor2.can().setHeading({ level: 2 }),
|
|
@@ -11660,7 +11481,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11660
11481
|
type: "option"
|
|
11661
11482
|
},
|
|
11662
11483
|
{
|
|
11663
|
-
icon:
|
|
11484
|
+
icon: import_lucide_react30.Heading3Icon,
|
|
11664
11485
|
onClick: () => editor2.chain().focus().liftListItem("listItem").setHeading({ level: 3 }).run(),
|
|
11665
11486
|
id: "heading3",
|
|
11666
11487
|
disabled: () => !editor2.can().setHeading({ level: 3 }),
|
|
@@ -11674,7 +11495,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11674
11495
|
id: "lists"
|
|
11675
11496
|
},
|
|
11676
11497
|
{
|
|
11677
|
-
icon:
|
|
11498
|
+
icon: import_lucide_react30.ListIcon,
|
|
11678
11499
|
onClick: () => editor2.chain().focus().toggleBulletList().run(),
|
|
11679
11500
|
id: "bulletList",
|
|
11680
11501
|
disabled: () => !editor2.can().toggleBulletList(),
|
|
@@ -11683,7 +11504,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11683
11504
|
type: "option"
|
|
11684
11505
|
},
|
|
11685
11506
|
{
|
|
11686
|
-
icon:
|
|
11507
|
+
icon: import_lucide_react30.ListOrderedIcon,
|
|
11687
11508
|
onClick: () => editor2.chain().focus().toggleOrderedList().run(),
|
|
11688
11509
|
id: "orderedList",
|
|
11689
11510
|
disabled: () => !editor2.can().toggleOrderedList(),
|
|
@@ -11696,7 +11517,7 @@ function useTurnIntoBlockOptions(editor) {
|
|
|
11696
11517
|
}
|
|
11697
11518
|
|
|
11698
11519
|
// src/editor/components/text-menu/text-bubble-menu.tsx
|
|
11699
|
-
var
|
|
11520
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
11700
11521
|
function TextBubbleMenu(props) {
|
|
11701
11522
|
const { editor, appendTo } = props;
|
|
11702
11523
|
if (!editor) {
|
|
@@ -11747,23 +11568,23 @@ function TextBubbleMenu(props) {
|
|
|
11747
11568
|
}
|
|
11748
11569
|
});
|
|
11749
11570
|
const turnIntoBlockOptions = useTurnIntoBlockOptions(editor);
|
|
11750
|
-
return /* @__PURE__ */ (0,
|
|
11751
|
-
|
|
11571
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
11572
|
+
import_react60.BubbleMenu,
|
|
11752
11573
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
11753
11574
|
className: "mly:flex mly:gap-0.5 mly:rounded-lg mly:border mly:border-gray-200 mly:bg-white mly:p-0.5 mly:shadow-md",
|
|
11754
|
-
children: /* @__PURE__ */ (0,
|
|
11755
|
-
/* @__PURE__ */ (0,
|
|
11756
|
-
/* @__PURE__ */ (0,
|
|
11757
|
-
/* @__PURE__ */ (0,
|
|
11575
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipProvider, { children: [
|
|
11576
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TurnIntoBlock, { options: turnIntoBlockOptions }),
|
|
11577
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Divider, { className: "mly:mx-0" }),
|
|
11578
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TextBubbleContent, { editor })
|
|
11758
11579
|
] })
|
|
11759
11580
|
})
|
|
11760
11581
|
);
|
|
11761
11582
|
}
|
|
11762
11583
|
|
|
11763
11584
|
// src/editor/components/variable-menu/variable-bubble-menu.tsx
|
|
11764
|
-
var
|
|
11765
|
-
var
|
|
11766
|
-
var
|
|
11585
|
+
var import_react61 = require("@tiptap/react");
|
|
11586
|
+
var import_tippy9 = require("tippy.js");
|
|
11587
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
11767
11588
|
function VariableBubbleMenu(props) {
|
|
11768
11589
|
const { editor, appendTo } = props;
|
|
11769
11590
|
if (!editor) {
|
|
@@ -11779,18 +11600,18 @@ function VariableBubbleMenu(props) {
|
|
|
11779
11600
|
popperOptions: {
|
|
11780
11601
|
modifiers: [{ name: "flip", enabled: false }]
|
|
11781
11602
|
},
|
|
11782
|
-
plugins: [
|
|
11603
|
+
plugins: [import_tippy9.sticky],
|
|
11783
11604
|
sticky: "popper",
|
|
11784
11605
|
maxWidth: "100%",
|
|
11785
11606
|
appendTo: () => (appendTo == null ? void 0 : appendTo.current) || "parent",
|
|
11786
11607
|
placement: "top-start"
|
|
11787
11608
|
}
|
|
11788
11609
|
});
|
|
11789
|
-
return /* @__PURE__ */ (0,
|
|
11790
|
-
|
|
11610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
11611
|
+
import_react61.BubbleMenu,
|
|
11791
11612
|
__spreadProps(__spreadValues({}, bubbleMenuProps), {
|
|
11792
11613
|
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",
|
|
11793
|
-
children: /* @__PURE__ */ (0,
|
|
11614
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TextBubbleContent, { showListMenu: false, editor }) })
|
|
11794
11615
|
})
|
|
11795
11616
|
);
|
|
11796
11617
|
}
|
|
@@ -11876,8 +11697,8 @@ function replaceDeprecatedNode(json) {
|
|
|
11876
11697
|
}
|
|
11877
11698
|
|
|
11878
11699
|
// src/editor/index.tsx
|
|
11879
|
-
var
|
|
11880
|
-
function
|
|
11700
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
11701
|
+
function Editor12(props) {
|
|
11881
11702
|
const {
|
|
11882
11703
|
config: {
|
|
11883
11704
|
wrapClassName = "",
|
|
@@ -11900,7 +11721,7 @@ function Editor13(props) {
|
|
|
11900
11721
|
scrollThreshold = 40,
|
|
11901
11722
|
scrollMargin = 40
|
|
11902
11723
|
} = props;
|
|
11903
|
-
const formattedContent = (0,
|
|
11724
|
+
const formattedContent = (0, import_react63.useMemo)(() => {
|
|
11904
11725
|
if (contentJson) {
|
|
11905
11726
|
const json = (contentJson == null ? void 0 : contentJson.type) === "doc" ? contentJson : {
|
|
11906
11727
|
type: "doc",
|
|
@@ -11921,8 +11742,8 @@ function Editor13(props) {
|
|
|
11921
11742
|
};
|
|
11922
11743
|
}
|
|
11923
11744
|
}, [contentHtml, contentJson, replaceDeprecatedNode]);
|
|
11924
|
-
const menuContainerRef = (0,
|
|
11925
|
-
const editor = (0,
|
|
11745
|
+
const menuContainerRef = (0, import_react63.useRef)(null);
|
|
11746
|
+
const editor = (0, import_react62.useEditor)({
|
|
11926
11747
|
editorProps: {
|
|
11927
11748
|
scrollThreshold,
|
|
11928
11749
|
scrollMargin,
|
|
@@ -11949,7 +11770,7 @@ function Editor13(props) {
|
|
|
11949
11770
|
if (!editor) {
|
|
11950
11771
|
return null;
|
|
11951
11772
|
}
|
|
11952
|
-
return /* @__PURE__ */ (0,
|
|
11773
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MailyProvider, { placeholderUrl, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
11953
11774
|
"div",
|
|
11954
11775
|
{
|
|
11955
11776
|
id: "mly-editor",
|
|
@@ -11960,8 +11781,8 @@ function Editor13(props) {
|
|
|
11960
11781
|
),
|
|
11961
11782
|
ref: menuContainerRef,
|
|
11962
11783
|
children: [
|
|
11963
|
-
hasMenuBar && /* @__PURE__ */ (0,
|
|
11964
|
-
/* @__PURE__ */ (0,
|
|
11784
|
+
hasMenuBar && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(EditorMenuBar, { config: props.config, editor }),
|
|
11785
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
11965
11786
|
"div",
|
|
11966
11787
|
{
|
|
11967
11788
|
className: cn(
|
|
@@ -11969,17 +11790,16 @@ function Editor13(props) {
|
|
|
11969
11790
|
bodyClassName
|
|
11970
11791
|
),
|
|
11971
11792
|
children: [
|
|
11972
|
-
/* @__PURE__ */ (0,
|
|
11973
|
-
/* @__PURE__ */ (0,
|
|
11974
|
-
/* @__PURE__ */ (0,
|
|
11975
|
-
/* @__PURE__ */ (0,
|
|
11976
|
-
/* @__PURE__ */ (0,
|
|
11977
|
-
/* @__PURE__ */ (0,
|
|
11978
|
-
!hideContextMenu && /* @__PURE__ */ (0,
|
|
11979
|
-
/* @__PURE__ */ (0,
|
|
11980
|
-
/* @__PURE__ */ (0,
|
|
11981
|
-
/* @__PURE__ */ (0,
|
|
11982
|
-
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
|
|
11793
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TextBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11794
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ImageBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11795
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SpacerBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11796
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react62.EditorContent, { editor }),
|
|
11797
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SectionBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11798
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ColumnsBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11799
|
+
!hideContextMenu && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ContentMenu, { editor }),
|
|
11800
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(VariableBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11801
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RepeatBubbleMenu, { editor, appendTo: menuContainerRef }),
|
|
11802
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InlineImageBubbleMenu, { editor, appendTo: menuContainerRef })
|
|
11983
11803
|
]
|
|
11984
11804
|
}
|
|
11985
11805
|
)
|