@underverse-ui/underverse 0.2.79 → 0.2.80
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/index.cjs +498 -226
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +488 -216
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -15306,9 +15306,9 @@ function useSmartLocale() {
|
|
|
15306
15306
|
}
|
|
15307
15307
|
|
|
15308
15308
|
// ../../components/ui/UEditor/UEditor.tsx
|
|
15309
|
-
var
|
|
15309
|
+
var import_react46 = require("react");
|
|
15310
15310
|
var import_next_intl6 = require("next-intl");
|
|
15311
|
-
var
|
|
15311
|
+
var import_react47 = require("@tiptap/react");
|
|
15312
15312
|
|
|
15313
15313
|
// ../../components/ui/UEditor/extensions.ts
|
|
15314
15314
|
var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
|
|
@@ -15330,7 +15330,6 @@ var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-co
|
|
|
15330
15330
|
var import_extension_history = __toESM(require("@tiptap/extension-history"), 1);
|
|
15331
15331
|
var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
|
|
15332
15332
|
var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
|
|
15333
|
-
var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
|
|
15334
15333
|
var import_extension_text_style = require("@tiptap/extension-text-style");
|
|
15335
15334
|
var import_extension_color = __toESM(require("@tiptap/extension-color"), 1);
|
|
15336
15335
|
var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"), 1);
|
|
@@ -18624,6 +18623,7 @@ function createKey(name) {
|
|
|
18624
18623
|
// ../../components/ui/UEditor/clipboard-images.ts
|
|
18625
18624
|
function getImageFiles(dataTransfer) {
|
|
18626
18625
|
if (!dataTransfer) return [];
|
|
18626
|
+
const itemFiles = [];
|
|
18627
18627
|
const byKey = /* @__PURE__ */ new Map();
|
|
18628
18628
|
for (const item of Array.from(dataTransfer.items ?? [])) {
|
|
18629
18629
|
if (item.kind !== "file") continue;
|
|
@@ -18632,6 +18632,8 @@ function getImageFiles(dataTransfer) {
|
|
|
18632
18632
|
if (!file) continue;
|
|
18633
18633
|
byKey.set(`${file.name}:${file.size}:${file.lastModified}`, file);
|
|
18634
18634
|
}
|
|
18635
|
+
itemFiles.push(...Array.from(byKey.values()));
|
|
18636
|
+
if (itemFiles.length > 0) return itemFiles;
|
|
18635
18637
|
for (const file of Array.from(dataTransfer.files ?? [])) {
|
|
18636
18638
|
if (!file.type.startsWith("image/")) continue;
|
|
18637
18639
|
byKey.set(`${file.name}:${file.size}:${file.lastModified}`, file);
|
|
@@ -18711,13 +18713,229 @@ var ClipboardImages = import_core2.Extension.create({
|
|
|
18711
18713
|
}
|
|
18712
18714
|
});
|
|
18713
18715
|
|
|
18716
|
+
// ../../components/ui/UEditor/resizable-image.tsx
|
|
18717
|
+
var import_react40 = require("react");
|
|
18718
|
+
var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
|
|
18719
|
+
var import_core3 = require("@tiptap/core");
|
|
18720
|
+
var import_react41 = require("@tiptap/react");
|
|
18721
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
18722
|
+
var MIN_IMAGE_SIZE_PX = 40;
|
|
18723
|
+
var AXIS_LOCK_THRESHOLD_PX = 4;
|
|
18724
|
+
function toNullableNumber(value) {
|
|
18725
|
+
if (typeof value === "number" && Number.isFinite(value)) return value;
|
|
18726
|
+
if (typeof value === "string") {
|
|
18727
|
+
const parsed = Number.parseInt(value, 10);
|
|
18728
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
18729
|
+
}
|
|
18730
|
+
return null;
|
|
18731
|
+
}
|
|
18732
|
+
function clamp4(value, min, max) {
|
|
18733
|
+
return Math.min(max, Math.max(min, value));
|
|
18734
|
+
}
|
|
18735
|
+
function ResizableImageNodeView(props) {
|
|
18736
|
+
const { node, selected, updateAttributes, editor, getPos } = props;
|
|
18737
|
+
const wrapperRef = (0, import_react40.useRef)(null);
|
|
18738
|
+
const imgRef = (0, import_react40.useRef)(null);
|
|
18739
|
+
const [isHovered, setIsHovered] = (0, import_react40.useState)(false);
|
|
18740
|
+
const [isResizing, setIsResizing] = (0, import_react40.useState)(false);
|
|
18741
|
+
const widthAttr = toNullableNumber(node.attrs["width"]);
|
|
18742
|
+
const heightAttr = toNullableNumber(node.attrs["height"]);
|
|
18743
|
+
const textAlign = String(node.attrs["textAlign"] ?? "");
|
|
18744
|
+
const dragStateRef = (0, import_react40.useRef)(null);
|
|
18745
|
+
(0, import_react40.useEffect)(() => {
|
|
18746
|
+
const img = imgRef.current;
|
|
18747
|
+
if (!img) return;
|
|
18748
|
+
img.style.width = widthAttr ? `${widthAttr}px` : "";
|
|
18749
|
+
img.style.height = heightAttr ? `${heightAttr}px` : "";
|
|
18750
|
+
}, [widthAttr, heightAttr]);
|
|
18751
|
+
const selectNode = () => {
|
|
18752
|
+
const pos = typeof getPos === "function" ? getPos() : null;
|
|
18753
|
+
if (typeof pos === "number") editor.commands.setNodeSelection(pos);
|
|
18754
|
+
};
|
|
18755
|
+
const onResizePointerDown = (event) => {
|
|
18756
|
+
event.preventDefault();
|
|
18757
|
+
event.stopPropagation();
|
|
18758
|
+
const img = imgRef.current;
|
|
18759
|
+
const wrapper = wrapperRef.current;
|
|
18760
|
+
if (!img || !wrapper) return;
|
|
18761
|
+
selectNode();
|
|
18762
|
+
const rect = img.getBoundingClientRect();
|
|
18763
|
+
const editorEl = wrapper.closest(".ProseMirror");
|
|
18764
|
+
const maxW = editorEl ? editorEl.getBoundingClientRect().width : Number.POSITIVE_INFINITY;
|
|
18765
|
+
const startW = Math.max(MIN_IMAGE_SIZE_PX, rect.width);
|
|
18766
|
+
const startH = Math.max(MIN_IMAGE_SIZE_PX, rect.height);
|
|
18767
|
+
const aspect = startH > 0 ? startW / startH : 1;
|
|
18768
|
+
dragStateRef.current = {
|
|
18769
|
+
pointerId: event.pointerId,
|
|
18770
|
+
startX: event.clientX,
|
|
18771
|
+
startY: event.clientY,
|
|
18772
|
+
startW,
|
|
18773
|
+
startH,
|
|
18774
|
+
lastW: startW,
|
|
18775
|
+
lastH: startH,
|
|
18776
|
+
axis: null,
|
|
18777
|
+
aspect,
|
|
18778
|
+
maxW: Math.max(MIN_IMAGE_SIZE_PX, maxW)
|
|
18779
|
+
};
|
|
18780
|
+
setIsResizing(true);
|
|
18781
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
18782
|
+
};
|
|
18783
|
+
const onResizePointerMove = (event) => {
|
|
18784
|
+
const drag = dragStateRef.current;
|
|
18785
|
+
const img = imgRef.current;
|
|
18786
|
+
if (!drag || !img) return;
|
|
18787
|
+
if (event.pointerId !== drag.pointerId) return;
|
|
18788
|
+
const dx = event.clientX - drag.startX;
|
|
18789
|
+
const dy = event.clientY - drag.startY;
|
|
18790
|
+
let nextW = drag.startW;
|
|
18791
|
+
let nextH = drag.startH;
|
|
18792
|
+
if (event.ctrlKey) {
|
|
18793
|
+
if (Math.abs(dx) >= Math.abs(dy)) {
|
|
18794
|
+
nextW = clamp4(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
|
|
18795
|
+
nextH = clamp4(nextW / drag.aspect, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
|
|
18796
|
+
} else {
|
|
18797
|
+
nextH = clamp4(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
|
|
18798
|
+
nextW = clamp4(nextH * drag.aspect, MIN_IMAGE_SIZE_PX, drag.maxW);
|
|
18799
|
+
}
|
|
18800
|
+
} else {
|
|
18801
|
+
if (!drag.axis && (Math.abs(dx) > AXIS_LOCK_THRESHOLD_PX || Math.abs(dy) > AXIS_LOCK_THRESHOLD_PX)) {
|
|
18802
|
+
drag.axis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
|
|
18803
|
+
}
|
|
18804
|
+
if (drag.axis === "x") nextW = clamp4(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
|
|
18805
|
+
if (drag.axis === "y") nextH = clamp4(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
|
|
18806
|
+
}
|
|
18807
|
+
drag.lastW = nextW;
|
|
18808
|
+
drag.lastH = nextH;
|
|
18809
|
+
img.style.width = `${Math.round(nextW)}px`;
|
|
18810
|
+
img.style.height = `${Math.round(nextH)}px`;
|
|
18811
|
+
};
|
|
18812
|
+
const finishResize = () => {
|
|
18813
|
+
const drag = dragStateRef.current;
|
|
18814
|
+
dragStateRef.current = null;
|
|
18815
|
+
setIsResizing(false);
|
|
18816
|
+
if (!drag) return;
|
|
18817
|
+
updateAttributes({
|
|
18818
|
+
width: Math.round(drag.lastW),
|
|
18819
|
+
height: Math.round(drag.lastH)
|
|
18820
|
+
});
|
|
18821
|
+
};
|
|
18822
|
+
const onResizePointerUp = (event) => {
|
|
18823
|
+
const drag = dragStateRef.current;
|
|
18824
|
+
if (!drag || event.pointerId !== drag.pointerId) return;
|
|
18825
|
+
event.preventDefault();
|
|
18826
|
+
event.stopPropagation();
|
|
18827
|
+
finishResize();
|
|
18828
|
+
};
|
|
18829
|
+
const onResizePointerCancel = (event) => {
|
|
18830
|
+
const drag = dragStateRef.current;
|
|
18831
|
+
if (!drag || event.pointerId !== drag.pointerId) return;
|
|
18832
|
+
event.preventDefault();
|
|
18833
|
+
event.stopPropagation();
|
|
18834
|
+
finishResize();
|
|
18835
|
+
};
|
|
18836
|
+
const showHandle = selected || isHovered || isResizing;
|
|
18837
|
+
const wrapperAlignClass = textAlign === "center" ? "mx-auto" : textAlign === "right" ? "ml-auto" : textAlign === "justify" ? "mx-auto" : "";
|
|
18838
|
+
const wrapperWidthClass = "w-fit";
|
|
18839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
18840
|
+
import_react41.NodeViewWrapper,
|
|
18841
|
+
{
|
|
18842
|
+
as: "div",
|
|
18843
|
+
ref: wrapperRef,
|
|
18844
|
+
className: ["relative block align-middle max-w-full my-4", wrapperWidthClass, wrapperAlignClass].filter(Boolean).join(" "),
|
|
18845
|
+
onMouseEnter: () => setIsHovered(true),
|
|
18846
|
+
onMouseLeave: () => setIsHovered(false),
|
|
18847
|
+
onClick: (e) => {
|
|
18848
|
+
e.stopPropagation();
|
|
18849
|
+
selectNode();
|
|
18850
|
+
},
|
|
18851
|
+
contentEditable: false,
|
|
18852
|
+
children: [
|
|
18853
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
18854
|
+
"img",
|
|
18855
|
+
{
|
|
18856
|
+
ref: imgRef,
|
|
18857
|
+
src: String(node.attrs["src"] ?? ""),
|
|
18858
|
+
alt: String(node.attrs["alt"] ?? ""),
|
|
18859
|
+
title: String(node.attrs["title"] ?? ""),
|
|
18860
|
+
draggable: "true",
|
|
18861
|
+
className: [
|
|
18862
|
+
"block rounded-lg max-w-full",
|
|
18863
|
+
selected ? "ring-2 ring-primary/60 ring-offset-2 ring-offset-background" : "",
|
|
18864
|
+
isResizing ? "select-none" : ""
|
|
18865
|
+
].join(" "),
|
|
18866
|
+
style: {
|
|
18867
|
+
width: widthAttr ? `${widthAttr}px` : void 0,
|
|
18868
|
+
height: heightAttr ? `${heightAttr}px` : void 0
|
|
18869
|
+
}
|
|
18870
|
+
}
|
|
18871
|
+
),
|
|
18872
|
+
showHandle && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
18873
|
+
"div",
|
|
18874
|
+
{
|
|
18875
|
+
"aria-hidden": "true",
|
|
18876
|
+
onPointerDown: onResizePointerDown,
|
|
18877
|
+
onPointerMove: onResizePointerMove,
|
|
18878
|
+
onPointerUp: onResizePointerUp,
|
|
18879
|
+
onPointerCancel: onResizePointerCancel,
|
|
18880
|
+
className: [
|
|
18881
|
+
"absolute -right-1 -bottom-1 h-3 w-3 rounded-sm",
|
|
18882
|
+
"bg-primary border border-background shadow-sm",
|
|
18883
|
+
"cursor-nwse-resize",
|
|
18884
|
+
"opacity-90 hover:opacity-100"
|
|
18885
|
+
].join(" ")
|
|
18886
|
+
}
|
|
18887
|
+
)
|
|
18888
|
+
]
|
|
18889
|
+
}
|
|
18890
|
+
);
|
|
18891
|
+
}
|
|
18892
|
+
var ResizableImage = import_extension_image.default.extend({
|
|
18893
|
+
addAttributes() {
|
|
18894
|
+
const parentAttrs = this.parent?.() ?? {};
|
|
18895
|
+
return {
|
|
18896
|
+
...parentAttrs,
|
|
18897
|
+
width: {
|
|
18898
|
+
default: null,
|
|
18899
|
+
parseHTML: (element) => {
|
|
18900
|
+
const raw = element.getAttribute("width") || element.style.width || "";
|
|
18901
|
+
const parsed = Number.parseInt(raw, 10);
|
|
18902
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
18903
|
+
},
|
|
18904
|
+
renderHTML: (attrs) => typeof attrs.width === "number" ? { width: attrs.width } : {}
|
|
18905
|
+
},
|
|
18906
|
+
height: {
|
|
18907
|
+
default: null,
|
|
18908
|
+
parseHTML: (element) => {
|
|
18909
|
+
const raw = element.getAttribute("height") || element.style.height || "";
|
|
18910
|
+
const parsed = Number.parseInt(raw, 10);
|
|
18911
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
18912
|
+
},
|
|
18913
|
+
renderHTML: (attrs) => typeof attrs.height === "number" ? { height: attrs.height } : {}
|
|
18914
|
+
}
|
|
18915
|
+
};
|
|
18916
|
+
},
|
|
18917
|
+
renderHTML({ HTMLAttributes: HTMLAttributes2 }) {
|
|
18918
|
+
return ["img", (0, import_core3.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes2)];
|
|
18919
|
+
},
|
|
18920
|
+
addNodeView() {
|
|
18921
|
+
return (0, import_react41.ReactNodeViewRenderer)(ResizableImageNodeView);
|
|
18922
|
+
}
|
|
18923
|
+
}).configure({
|
|
18924
|
+
allowBase64: true,
|
|
18925
|
+
HTMLAttributes: {
|
|
18926
|
+
class: "rounded-lg max-w-full my-4"
|
|
18927
|
+
}
|
|
18928
|
+
});
|
|
18929
|
+
var resizable_image_default = ResizableImage;
|
|
18930
|
+
|
|
18714
18931
|
// ../../components/ui/UEditor/extensions.ts
|
|
18715
18932
|
var lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
|
|
18716
18933
|
function buildUEditorExtensions({
|
|
18717
18934
|
placeholder,
|
|
18718
18935
|
maxCharacters,
|
|
18719
18936
|
uploadImage,
|
|
18720
|
-
imageInsertMode = "base64"
|
|
18937
|
+
imageInsertMode = "base64",
|
|
18938
|
+
editable = true
|
|
18721
18939
|
}) {
|
|
18722
18940
|
return [
|
|
18723
18941
|
import_extension_document.default,
|
|
@@ -18774,12 +18992,7 @@ function buildUEditorExtensions({
|
|
|
18774
18992
|
class: "text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer"
|
|
18775
18993
|
}
|
|
18776
18994
|
}),
|
|
18777
|
-
|
|
18778
|
-
allowBase64: true,
|
|
18779
|
-
HTMLAttributes: {
|
|
18780
|
-
class: "rounded-lg max-w-full h-auto my-4"
|
|
18781
|
-
}
|
|
18782
|
-
}),
|
|
18995
|
+
resizable_image_default,
|
|
18783
18996
|
ClipboardImages.configure({ upload: uploadImage, insertMode: imageInsertMode }),
|
|
18784
18997
|
import_extension_text_style.TextStyle,
|
|
18785
18998
|
import_extension_color.default,
|
|
@@ -18787,7 +19000,7 @@ function buildUEditorExtensions({
|
|
|
18787
19000
|
multicolor: true
|
|
18788
19001
|
}),
|
|
18789
19002
|
import_extension_text_align.default.configure({
|
|
18790
|
-
types: ["heading", "paragraph"]
|
|
19003
|
+
types: ["heading", "paragraph", "image"]
|
|
18791
19004
|
}),
|
|
18792
19005
|
import_extension_table.Table.configure({
|
|
18793
19006
|
resizable: true,
|
|
@@ -18821,18 +19034,18 @@ function buildUEditorExtensions({
|
|
|
18821
19034
|
}
|
|
18822
19035
|
|
|
18823
19036
|
// ../../components/ui/UEditor/toolbar.tsx
|
|
18824
|
-
var
|
|
19037
|
+
var import_react44 = __toESM(require("react"), 1);
|
|
18825
19038
|
var import_next_intl3 = require("next-intl");
|
|
18826
19039
|
var import_lucide_react36 = require("lucide-react");
|
|
18827
19040
|
|
|
18828
19041
|
// ../../components/ui/UEditor/colors.tsx
|
|
18829
|
-
var
|
|
19042
|
+
var import_react42 = require("react");
|
|
18830
19043
|
var import_next_intl = require("next-intl");
|
|
18831
19044
|
var import_lucide_react34 = require("lucide-react");
|
|
18832
|
-
var
|
|
19045
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
18833
19046
|
var useEditorColors = () => {
|
|
18834
19047
|
const t = (0, import_next_intl.useTranslations)("UEditor");
|
|
18835
|
-
const textColors = (0,
|
|
19048
|
+
const textColors = (0, import_react42.useMemo)(
|
|
18836
19049
|
() => [
|
|
18837
19050
|
{ name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
|
|
18838
19051
|
{ name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
|
|
@@ -18845,7 +19058,7 @@ var useEditorColors = () => {
|
|
|
18845
19058
|
],
|
|
18846
19059
|
[t]
|
|
18847
19060
|
);
|
|
18848
|
-
const highlightColors = (0,
|
|
19061
|
+
const highlightColors = (0, import_react42.useMemo)(
|
|
18849
19062
|
() => [
|
|
18850
19063
|
{ name: t("colors.default"), color: "", cssClass: "" },
|
|
18851
19064
|
{ name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
|
|
@@ -18866,9 +19079,9 @@ var EditorColorPalette = ({
|
|
|
18866
19079
|
currentColor,
|
|
18867
19080
|
onSelect,
|
|
18868
19081
|
label
|
|
18869
|
-
}) => /* @__PURE__ */ (0,
|
|
18870
|
-
/* @__PURE__ */ (0,
|
|
18871
|
-
/* @__PURE__ */ (0,
|
|
19082
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "p-2", children: [
|
|
19083
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
|
|
19084
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
18872
19085
|
"button",
|
|
18873
19086
|
{
|
|
18874
19087
|
type: "button",
|
|
@@ -18881,8 +19094,8 @@ var EditorColorPalette = ({
|
|
|
18881
19094
|
style: { backgroundColor: c.color || "transparent" },
|
|
18882
19095
|
title: c.name,
|
|
18883
19096
|
children: [
|
|
18884
|
-
c.color === "" && /* @__PURE__ */ (0,
|
|
18885
|
-
c.color === "inherit" && /* @__PURE__ */ (0,
|
|
19097
|
+
c.color === "" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react34.X, { className: "w-4 h-4 text-muted-foreground" }),
|
|
19098
|
+
c.color === "inherit" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-xs font-medium", children: "A" })
|
|
18886
19099
|
]
|
|
18887
19100
|
},
|
|
18888
19101
|
c.name
|
|
@@ -18890,30 +19103,36 @@ var EditorColorPalette = ({
|
|
|
18890
19103
|
] });
|
|
18891
19104
|
|
|
18892
19105
|
// ../../components/ui/UEditor/inputs.tsx
|
|
18893
|
-
var
|
|
19106
|
+
var import_react43 = require("react");
|
|
18894
19107
|
var import_next_intl2 = require("next-intl");
|
|
18895
19108
|
var import_lucide_react35 = require("lucide-react");
|
|
18896
|
-
var
|
|
19109
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
19110
|
+
function normalizeUrl(raw) {
|
|
19111
|
+
const url = raw.trim();
|
|
19112
|
+
if (!url) return "";
|
|
19113
|
+
if (url.startsWith("#") || url.startsWith("/")) return url;
|
|
19114
|
+
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) return url;
|
|
19115
|
+
return `https://${url}`;
|
|
19116
|
+
}
|
|
18897
19117
|
var LinkInput = ({
|
|
18898
19118
|
onSubmit,
|
|
18899
19119
|
onCancel,
|
|
18900
19120
|
initialUrl = ""
|
|
18901
19121
|
}) => {
|
|
18902
19122
|
const t = (0, import_next_intl2.useTranslations)("UEditor");
|
|
18903
|
-
const [url, setUrl] = (0,
|
|
18904
|
-
const inputRef = (0,
|
|
18905
|
-
(0,
|
|
19123
|
+
const [url, setUrl] = (0, import_react43.useState)(initialUrl);
|
|
19124
|
+
const inputRef = (0, import_react43.useRef)(null);
|
|
19125
|
+
(0, import_react43.useEffect)(() => {
|
|
18906
19126
|
inputRef.current?.focus();
|
|
18907
19127
|
inputRef.current?.select();
|
|
18908
19128
|
}, []);
|
|
18909
19129
|
const handleSubmit = (e) => {
|
|
18910
19130
|
e.preventDefault();
|
|
18911
|
-
|
|
18912
|
-
|
|
18913
|
-
}
|
|
19131
|
+
const normalized = normalizeUrl(url);
|
|
19132
|
+
if (normalized) onSubmit(normalized);
|
|
18914
19133
|
};
|
|
18915
|
-
return /* @__PURE__ */ (0,
|
|
18916
|
-
/* @__PURE__ */ (0,
|
|
19134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 p-2", children: [
|
|
19135
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18917
19136
|
"input",
|
|
18918
19137
|
{
|
|
18919
19138
|
ref: inputRef,
|
|
@@ -18924,16 +19143,16 @@ var LinkInput = ({
|
|
|
18924
19143
|
className: "flex-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
18925
19144
|
}
|
|
18926
19145
|
),
|
|
18927
|
-
/* @__PURE__ */ (0,
|
|
18928
|
-
/* @__PURE__ */ (0,
|
|
19146
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "submit", className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react35.Check, { className: "w-4 h-4" }) }),
|
|
19147
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react35.X, { className: "w-4 h-4" }) })
|
|
18929
19148
|
] });
|
|
18930
19149
|
};
|
|
18931
19150
|
var ImageInput = ({ onSubmit, onCancel }) => {
|
|
18932
19151
|
const t = (0, import_next_intl2.useTranslations)("UEditor");
|
|
18933
|
-
const [url, setUrl] = (0,
|
|
18934
|
-
const [alt, setAlt] = (0,
|
|
18935
|
-
const inputRef = (0,
|
|
18936
|
-
(0,
|
|
19152
|
+
const [url, setUrl] = (0, import_react43.useState)("");
|
|
19153
|
+
const [alt, setAlt] = (0, import_react43.useState)("");
|
|
19154
|
+
const inputRef = (0, import_react43.useRef)(null);
|
|
19155
|
+
(0, import_react43.useEffect)(() => {
|
|
18937
19156
|
inputRef.current?.focus();
|
|
18938
19157
|
}, []);
|
|
18939
19158
|
const handleSubmit = (e) => {
|
|
@@ -18942,10 +19161,10 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
18942
19161
|
onSubmit(url, alt);
|
|
18943
19162
|
}
|
|
18944
19163
|
};
|
|
18945
|
-
return /* @__PURE__ */ (0,
|
|
18946
|
-
/* @__PURE__ */ (0,
|
|
18947
|
-
/* @__PURE__ */ (0,
|
|
18948
|
-
/* @__PURE__ */ (0,
|
|
19164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("form", { onSubmit: handleSubmit, className: "p-3 space-y-3", children: [
|
|
19165
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
19166
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.urlLabel") }),
|
|
19167
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18949
19168
|
"input",
|
|
18950
19169
|
{
|
|
18951
19170
|
ref: inputRef,
|
|
@@ -18957,9 +19176,9 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
18957
19176
|
}
|
|
18958
19177
|
)
|
|
18959
19178
|
] }),
|
|
18960
|
-
/* @__PURE__ */ (0,
|
|
18961
|
-
/* @__PURE__ */ (0,
|
|
18962
|
-
/* @__PURE__ */ (0,
|
|
19179
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
19180
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.altLabel") }),
|
|
19181
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18963
19182
|
"input",
|
|
18964
19183
|
{
|
|
18965
19184
|
type: "text",
|
|
@@ -18970,8 +19189,8 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
18970
19189
|
}
|
|
18971
19190
|
)
|
|
18972
19191
|
] }),
|
|
18973
|
-
/* @__PURE__ */ (0,
|
|
18974
|
-
/* @__PURE__ */ (0,
|
|
19192
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex gap-2", children: [
|
|
19193
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18975
19194
|
"button",
|
|
18976
19195
|
{
|
|
18977
19196
|
type: "submit",
|
|
@@ -18980,13 +19199,13 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
18980
19199
|
children: t("imageInput.addBtn")
|
|
18981
19200
|
}
|
|
18982
19201
|
),
|
|
18983
|
-
/* @__PURE__ */ (0,
|
|
19202
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", onClick: onCancel, className: "px-4 py-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: t("imageInput.cancelBtn") })
|
|
18984
19203
|
] })
|
|
18985
19204
|
] });
|
|
18986
19205
|
};
|
|
18987
19206
|
|
|
18988
19207
|
// ../../components/ui/UEditor/toolbar.tsx
|
|
18989
|
-
var
|
|
19208
|
+
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
18990
19209
|
function fileToDataUrl2(file) {
|
|
18991
19210
|
return new Promise((resolve, reject) => {
|
|
18992
19211
|
const reader = new FileReader();
|
|
@@ -18995,13 +19214,16 @@ function fileToDataUrl2(file) {
|
|
|
18995
19214
|
reader.readAsDataURL(file);
|
|
18996
19215
|
});
|
|
18997
19216
|
}
|
|
18998
|
-
var ToolbarButton =
|
|
18999
|
-
const button = /* @__PURE__ */ (0,
|
|
19217
|
+
var ToolbarButton = import_react44.default.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
|
|
19218
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19000
19219
|
"button",
|
|
19001
19220
|
{
|
|
19002
19221
|
ref,
|
|
19003
19222
|
type: "button",
|
|
19004
|
-
onMouseDown: (e) =>
|
|
19223
|
+
onMouseDown: (e) => {
|
|
19224
|
+
onMouseDown?.(e);
|
|
19225
|
+
e.preventDefault();
|
|
19226
|
+
},
|
|
19005
19227
|
onClick,
|
|
19006
19228
|
disabled,
|
|
19007
19229
|
className: cn(
|
|
@@ -19016,12 +19238,12 @@ var ToolbarButton = import_react42.default.forwardRef(({ onClick, active, disabl
|
|
|
19016
19238
|
}
|
|
19017
19239
|
);
|
|
19018
19240
|
if (title) {
|
|
19019
|
-
return /* @__PURE__ */ (0,
|
|
19241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Tooltip, { content: title, placement: "top", delay: { open: 500, close: 0 }, children: button });
|
|
19020
19242
|
}
|
|
19021
19243
|
return button;
|
|
19022
19244
|
});
|
|
19023
19245
|
ToolbarButton.displayName = "ToolbarButton";
|
|
19024
|
-
var ToolbarDivider = () => /* @__PURE__ */ (0,
|
|
19246
|
+
var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" });
|
|
19025
19247
|
var EditorToolbar = ({
|
|
19026
19248
|
editor,
|
|
19027
19249
|
variant,
|
|
@@ -19030,10 +19252,10 @@ var EditorToolbar = ({
|
|
|
19030
19252
|
}) => {
|
|
19031
19253
|
const t = (0, import_next_intl3.useTranslations)("UEditor");
|
|
19032
19254
|
const { textColors, highlightColors } = useEditorColors();
|
|
19033
|
-
const [showImageInput, setShowImageInput] = (0,
|
|
19034
|
-
const fileInputRef = (0,
|
|
19035
|
-
const [isUploadingImage, setIsUploadingImage] = (0,
|
|
19036
|
-
const [imageUploadError, setImageUploadError] = (0,
|
|
19255
|
+
const [showImageInput, setShowImageInput] = (0, import_react44.useState)(false);
|
|
19256
|
+
const fileInputRef = (0, import_react44.useRef)(null);
|
|
19257
|
+
const [isUploadingImage, setIsUploadingImage] = (0, import_react44.useState)(false);
|
|
19258
|
+
const [imageUploadError, setImageUploadError] = (0, import_react44.useState)(null);
|
|
19037
19259
|
const insertImageFiles = async (files) => {
|
|
19038
19260
|
if (files.length === 0) return;
|
|
19039
19261
|
setIsUploadingImage(true);
|
|
@@ -19052,40 +19274,40 @@ var EditorToolbar = ({
|
|
|
19052
19274
|
setIsUploadingImage(false);
|
|
19053
19275
|
};
|
|
19054
19276
|
if (variant === "minimal") {
|
|
19055
|
-
return /* @__PURE__ */ (0,
|
|
19056
|
-
/* @__PURE__ */ (0,
|
|
19057
|
-
/* @__PURE__ */ (0,
|
|
19277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
|
|
19278
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Bold, { className: "w-4 h-4" }) }),
|
|
19279
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19058
19280
|
ToolbarButton,
|
|
19059
19281
|
{
|
|
19060
19282
|
onClick: () => editor.chain().focus().toggleItalic().run(),
|
|
19061
19283
|
active: editor.isActive("italic"),
|
|
19062
19284
|
title: t("toolbar.italic"),
|
|
19063
|
-
children: /* @__PURE__ */ (0,
|
|
19285
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Italic, { className: "w-4 h-4" })
|
|
19064
19286
|
}
|
|
19065
19287
|
),
|
|
19066
|
-
/* @__PURE__ */ (0,
|
|
19288
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19067
19289
|
ToolbarButton,
|
|
19068
19290
|
{
|
|
19069
19291
|
onClick: () => editor.chain().focus().toggleBulletList().run(),
|
|
19070
19292
|
active: editor.isActive("bulletList"),
|
|
19071
19293
|
title: t("toolbar.bulletList"),
|
|
19072
|
-
children: /* @__PURE__ */ (0,
|
|
19294
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.List, { className: "w-4 h-4" })
|
|
19073
19295
|
}
|
|
19074
19296
|
)
|
|
19075
19297
|
] });
|
|
19076
19298
|
}
|
|
19077
|
-
return /* @__PURE__ */ (0,
|
|
19078
|
-
/* @__PURE__ */ (0,
|
|
19299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b bg-linear-to-r from-muted/30 to-transparent", children: [
|
|
19300
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
19079
19301
|
DropdownMenu,
|
|
19080
19302
|
{
|
|
19081
|
-
trigger: /* @__PURE__ */ (0,
|
|
19303
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19082
19304
|
}, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
|
|
19083
|
-
/* @__PURE__ */ (0,
|
|
19084
|
-
/* @__PURE__ */ (0,
|
|
19305
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Type, { className: "w-4 h-4" }),
|
|
19306
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19085
19307
|
] }),
|
|
19086
19308
|
children: [
|
|
19087
|
-
/* @__PURE__ */ (0,
|
|
19088
|
-
/* @__PURE__ */ (0,
|
|
19309
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Type, label: t("toolbar.normal"), onClick: () => editor.chain().focus().setParagraph().run(), active: editor.isActive("paragraph") }),
|
|
19310
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19089
19311
|
DropdownMenuItem,
|
|
19090
19312
|
{
|
|
19091
19313
|
icon: import_lucide_react36.Heading1,
|
|
@@ -19095,7 +19317,7 @@ var EditorToolbar = ({
|
|
|
19095
19317
|
shortcut: "Ctrl+Alt+1"
|
|
19096
19318
|
}
|
|
19097
19319
|
),
|
|
19098
|
-
/* @__PURE__ */ (0,
|
|
19320
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19099
19321
|
DropdownMenuItem,
|
|
19100
19322
|
{
|
|
19101
19323
|
icon: import_lucide_react36.Heading2,
|
|
@@ -19105,7 +19327,7 @@ var EditorToolbar = ({
|
|
|
19105
19327
|
shortcut: "Ctrl+Alt+2"
|
|
19106
19328
|
}
|
|
19107
19329
|
),
|
|
19108
|
-
/* @__PURE__ */ (0,
|
|
19330
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19109
19331
|
DropdownMenuItem,
|
|
19110
19332
|
{
|
|
19111
19333
|
icon: import_lucide_react36.Heading3,
|
|
@@ -19118,46 +19340,46 @@ var EditorToolbar = ({
|
|
|
19118
19340
|
]
|
|
19119
19341
|
}
|
|
19120
19342
|
),
|
|
19121
|
-
/* @__PURE__ */ (0,
|
|
19122
|
-
/* @__PURE__ */ (0,
|
|
19123
|
-
/* @__PURE__ */ (0,
|
|
19343
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarDivider, {}),
|
|
19344
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Bold, { className: "w-4 h-4" }) }),
|
|
19345
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19124
19346
|
ToolbarButton,
|
|
19125
19347
|
{
|
|
19126
19348
|
onClick: () => editor.chain().focus().toggleItalic().run(),
|
|
19127
19349
|
active: editor.isActive("italic"),
|
|
19128
19350
|
title: t("toolbar.italic"),
|
|
19129
|
-
children: /* @__PURE__ */ (0,
|
|
19351
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Italic, { className: "w-4 h-4" })
|
|
19130
19352
|
}
|
|
19131
19353
|
),
|
|
19132
|
-
/* @__PURE__ */ (0,
|
|
19354
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19133
19355
|
ToolbarButton,
|
|
19134
19356
|
{
|
|
19135
19357
|
onClick: () => editor.chain().focus().toggleUnderline().run(),
|
|
19136
19358
|
active: editor.isActive("underline"),
|
|
19137
19359
|
title: t("toolbar.underline"),
|
|
19138
|
-
children: /* @__PURE__ */ (0,
|
|
19360
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Underline, { className: "w-4 h-4" })
|
|
19139
19361
|
}
|
|
19140
19362
|
),
|
|
19141
|
-
/* @__PURE__ */ (0,
|
|
19363
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19142
19364
|
ToolbarButton,
|
|
19143
19365
|
{
|
|
19144
19366
|
onClick: () => editor.chain().focus().toggleStrike().run(),
|
|
19145
19367
|
active: editor.isActive("strike"),
|
|
19146
19368
|
title: t("toolbar.strike"),
|
|
19147
|
-
children: /* @__PURE__ */ (0,
|
|
19369
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Strikethrough, { className: "w-4 h-4" })
|
|
19148
19370
|
}
|
|
19149
19371
|
),
|
|
19150
|
-
/* @__PURE__ */ (0,
|
|
19151
|
-
/* @__PURE__ */ (0,
|
|
19152
|
-
/* @__PURE__ */ (0,
|
|
19372
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Code, { className: "w-4 h-4" }) }),
|
|
19373
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarDivider, {}),
|
|
19374
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19153
19375
|
DropdownMenu,
|
|
19154
19376
|
{
|
|
19155
|
-
trigger: /* @__PURE__ */ (0,
|
|
19377
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19156
19378
|
}, title: t("colors.textColor"), children: [
|
|
19157
|
-
/* @__PURE__ */ (0,
|
|
19158
|
-
/* @__PURE__ */ (0,
|
|
19379
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Palette, { className: "w-4 h-4" }),
|
|
19380
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19159
19381
|
] }),
|
|
19160
|
-
children: /* @__PURE__ */ (0,
|
|
19382
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19161
19383
|
EditorColorPalette,
|
|
19162
19384
|
{
|
|
19163
19385
|
colors: textColors,
|
|
@@ -19174,15 +19396,15 @@ var EditorToolbar = ({
|
|
|
19174
19396
|
)
|
|
19175
19397
|
}
|
|
19176
19398
|
),
|
|
19177
|
-
/* @__PURE__ */ (0,
|
|
19399
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19178
19400
|
DropdownMenu,
|
|
19179
19401
|
{
|
|
19180
|
-
trigger: /* @__PURE__ */ (0,
|
|
19402
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19181
19403
|
}, active: editor.isActive("highlight"), title: t("colors.highlight"), children: [
|
|
19182
|
-
/* @__PURE__ */ (0,
|
|
19183
|
-
/* @__PURE__ */ (0,
|
|
19404
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Highlighter, { className: "w-4 h-4" }),
|
|
19405
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19184
19406
|
] }),
|
|
19185
|
-
children: /* @__PURE__ */ (0,
|
|
19407
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19186
19408
|
EditorColorPalette,
|
|
19187
19409
|
{
|
|
19188
19410
|
colors: highlightColors,
|
|
@@ -19199,17 +19421,17 @@ var EditorToolbar = ({
|
|
|
19199
19421
|
)
|
|
19200
19422
|
}
|
|
19201
19423
|
),
|
|
19202
|
-
/* @__PURE__ */ (0,
|
|
19203
|
-
/* @__PURE__ */ (0,
|
|
19424
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarDivider, {}),
|
|
19425
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
19204
19426
|
DropdownMenu,
|
|
19205
19427
|
{
|
|
19206
|
-
trigger: /* @__PURE__ */ (0,
|
|
19428
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19207
19429
|
}, title: t("toolbar.alignment"), children: [
|
|
19208
|
-
/* @__PURE__ */ (0,
|
|
19209
|
-
/* @__PURE__ */ (0,
|
|
19430
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.AlignLeft, { className: "w-4 h-4" }),
|
|
19431
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19210
19432
|
] }),
|
|
19211
19433
|
children: [
|
|
19212
|
-
/* @__PURE__ */ (0,
|
|
19434
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19213
19435
|
DropdownMenuItem,
|
|
19214
19436
|
{
|
|
19215
19437
|
icon: import_lucide_react36.AlignLeft,
|
|
@@ -19218,7 +19440,7 @@ var EditorToolbar = ({
|
|
|
19218
19440
|
active: editor.isActive({ textAlign: "left" })
|
|
19219
19441
|
}
|
|
19220
19442
|
),
|
|
19221
|
-
/* @__PURE__ */ (0,
|
|
19443
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19222
19444
|
DropdownMenuItem,
|
|
19223
19445
|
{
|
|
19224
19446
|
icon: import_lucide_react36.AlignCenter,
|
|
@@ -19227,7 +19449,7 @@ var EditorToolbar = ({
|
|
|
19227
19449
|
active: editor.isActive({ textAlign: "center" })
|
|
19228
19450
|
}
|
|
19229
19451
|
),
|
|
19230
|
-
/* @__PURE__ */ (0,
|
|
19452
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19231
19453
|
DropdownMenuItem,
|
|
19232
19454
|
{
|
|
19233
19455
|
icon: import_lucide_react36.AlignRight,
|
|
@@ -19236,7 +19458,7 @@ var EditorToolbar = ({
|
|
|
19236
19458
|
active: editor.isActive({ textAlign: "right" })
|
|
19237
19459
|
}
|
|
19238
19460
|
),
|
|
19239
|
-
/* @__PURE__ */ (0,
|
|
19461
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19240
19462
|
DropdownMenuItem,
|
|
19241
19463
|
{
|
|
19242
19464
|
icon: import_lucide_react36.AlignJustify,
|
|
@@ -19248,17 +19470,17 @@ var EditorToolbar = ({
|
|
|
19248
19470
|
]
|
|
19249
19471
|
}
|
|
19250
19472
|
),
|
|
19251
|
-
/* @__PURE__ */ (0,
|
|
19252
|
-
/* @__PURE__ */ (0,
|
|
19473
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarDivider, {}),
|
|
19474
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
19253
19475
|
DropdownMenu,
|
|
19254
19476
|
{
|
|
19255
|
-
trigger: /* @__PURE__ */ (0,
|
|
19477
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19256
19478
|
}, title: t("toolbar.bulletList"), children: [
|
|
19257
|
-
/* @__PURE__ */ (0,
|
|
19258
|
-
/* @__PURE__ */ (0,
|
|
19479
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.List, { className: "w-4 h-4" }),
|
|
19480
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19259
19481
|
] }),
|
|
19260
19482
|
children: [
|
|
19261
|
-
/* @__PURE__ */ (0,
|
|
19483
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19262
19484
|
DropdownMenuItem,
|
|
19263
19485
|
{
|
|
19264
19486
|
icon: import_lucide_react36.List,
|
|
@@ -19268,7 +19490,7 @@ var EditorToolbar = ({
|
|
|
19268
19490
|
shortcut: "Ctrl+Shift+8"
|
|
19269
19491
|
}
|
|
19270
19492
|
),
|
|
19271
|
-
/* @__PURE__ */ (0,
|
|
19493
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19272
19494
|
DropdownMenuItem,
|
|
19273
19495
|
{
|
|
19274
19496
|
icon: import_lucide_react36.ListOrdered,
|
|
@@ -19278,7 +19500,7 @@ var EditorToolbar = ({
|
|
|
19278
19500
|
shortcut: "Ctrl+Shift+7"
|
|
19279
19501
|
}
|
|
19280
19502
|
),
|
|
19281
|
-
/* @__PURE__ */ (0,
|
|
19503
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19282
19504
|
DropdownMenuItem,
|
|
19283
19505
|
{
|
|
19284
19506
|
icon: import_lucide_react36.ListTodo,
|
|
@@ -19291,16 +19513,16 @@ var EditorToolbar = ({
|
|
|
19291
19513
|
]
|
|
19292
19514
|
}
|
|
19293
19515
|
),
|
|
19294
|
-
/* @__PURE__ */ (0,
|
|
19516
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
19295
19517
|
DropdownMenu,
|
|
19296
19518
|
{
|
|
19297
|
-
trigger: /* @__PURE__ */ (0,
|
|
19519
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19298
19520
|
}, title: t("toolbar.quote"), children: [
|
|
19299
|
-
/* @__PURE__ */ (0,
|
|
19300
|
-
/* @__PURE__ */ (0,
|
|
19521
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Quote, { className: "w-4 h-4" }),
|
|
19522
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19301
19523
|
] }),
|
|
19302
19524
|
children: [
|
|
19303
|
-
/* @__PURE__ */ (0,
|
|
19525
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19304
19526
|
DropdownMenuItem,
|
|
19305
19527
|
{
|
|
19306
19528
|
icon: import_lucide_react36.Quote,
|
|
@@ -19310,7 +19532,7 @@ var EditorToolbar = ({
|
|
|
19310
19532
|
shortcut: "Ctrl+Shift+B"
|
|
19311
19533
|
}
|
|
19312
19534
|
),
|
|
19313
|
-
/* @__PURE__ */ (0,
|
|
19535
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19314
19536
|
DropdownMenuItem,
|
|
19315
19537
|
{
|
|
19316
19538
|
icon: import_lucide_react36.FileCode,
|
|
@@ -19323,15 +19545,15 @@ var EditorToolbar = ({
|
|
|
19323
19545
|
]
|
|
19324
19546
|
}
|
|
19325
19547
|
),
|
|
19326
|
-
/* @__PURE__ */ (0,
|
|
19548
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19327
19549
|
DropdownMenu,
|
|
19328
19550
|
{
|
|
19329
|
-
trigger: /* @__PURE__ */ (0,
|
|
19551
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19330
19552
|
}, title: t("toolbar.image"), children: [
|
|
19331
|
-
/* @__PURE__ */ (0,
|
|
19332
|
-
/* @__PURE__ */ (0,
|
|
19553
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Image, { className: "w-4 h-4" }),
|
|
19554
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19333
19555
|
] }),
|
|
19334
|
-
children: showImageInput ? /* @__PURE__ */ (0,
|
|
19556
|
+
children: showImageInput ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19335
19557
|
ImageInput,
|
|
19336
19558
|
{
|
|
19337
19559
|
onSubmit: (url, alt) => {
|
|
@@ -19340,9 +19562,9 @@ var EditorToolbar = ({
|
|
|
19340
19562
|
},
|
|
19341
19563
|
onCancel: () => setShowImageInput(false)
|
|
19342
19564
|
}
|
|
19343
|
-
) : /* @__PURE__ */ (0,
|
|
19344
|
-
/* @__PURE__ */ (0,
|
|
19345
|
-
/* @__PURE__ */ (0,
|
|
19565
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
19566
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Link, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) }),
|
|
19567
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19346
19568
|
DropdownMenuItem,
|
|
19347
19569
|
{
|
|
19348
19570
|
icon: import_lucide_react36.Upload,
|
|
@@ -19351,8 +19573,8 @@ var EditorToolbar = ({
|
|
|
19351
19573
|
onClick: () => fileInputRef.current?.click()
|
|
19352
19574
|
}
|
|
19353
19575
|
),
|
|
19354
|
-
imageUploadError && /* @__PURE__ */ (0,
|
|
19355
|
-
/* @__PURE__ */ (0,
|
|
19576
|
+
imageUploadError && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropdownMenuItem, { label: imageUploadError, disabled: true, destructive: true }),
|
|
19577
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19356
19578
|
"input",
|
|
19357
19579
|
{
|
|
19358
19580
|
ref: fileInputRef,
|
|
@@ -19370,18 +19592,18 @@ var EditorToolbar = ({
|
|
|
19370
19592
|
] })
|
|
19371
19593
|
}
|
|
19372
19594
|
),
|
|
19373
|
-
/* @__PURE__ */ (0,
|
|
19595
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
19374
19596
|
DropdownMenu,
|
|
19375
19597
|
{
|
|
19376
|
-
trigger: /* @__PURE__ */ (0,
|
|
19598
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ToolbarButton, { onClick: () => {
|
|
19377
19599
|
}, title: t("toolbar.table"), children: [
|
|
19378
|
-
/* @__PURE__ */ (0,
|
|
19379
|
-
/* @__PURE__ */ (0,
|
|
19600
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Table, { className: "w-4 h-4" }),
|
|
19601
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
|
|
19380
19602
|
] }),
|
|
19381
19603
|
children: [
|
|
19382
|
-
/* @__PURE__ */ (0,
|
|
19383
|
-
/* @__PURE__ */ (0,
|
|
19384
|
-
/* @__PURE__ */ (0,
|
|
19604
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Table, label: t("tableMenu.insert3x3"), onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }),
|
|
19605
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "my-1 border-t" }),
|
|
19606
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19385
19607
|
DropdownMenuItem,
|
|
19386
19608
|
{
|
|
19387
19609
|
icon: import_lucide_react36.ArrowDown,
|
|
@@ -19390,7 +19612,7 @@ var EditorToolbar = ({
|
|
|
19390
19612
|
disabled: !editor.can().addColumnBefore()
|
|
19391
19613
|
}
|
|
19392
19614
|
),
|
|
19393
|
-
/* @__PURE__ */ (0,
|
|
19615
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19394
19616
|
DropdownMenuItem,
|
|
19395
19617
|
{
|
|
19396
19618
|
icon: import_lucide_react36.ArrowDown,
|
|
@@ -19399,7 +19621,7 @@ var EditorToolbar = ({
|
|
|
19399
19621
|
disabled: !editor.can().addColumnAfter()
|
|
19400
19622
|
}
|
|
19401
19623
|
),
|
|
19402
|
-
/* @__PURE__ */ (0,
|
|
19624
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19403
19625
|
DropdownMenuItem,
|
|
19404
19626
|
{
|
|
19405
19627
|
icon: import_lucide_react36.ArrowRight,
|
|
@@ -19408,7 +19630,7 @@ var EditorToolbar = ({
|
|
|
19408
19630
|
disabled: !editor.can().addRowBefore()
|
|
19409
19631
|
}
|
|
19410
19632
|
),
|
|
19411
|
-
/* @__PURE__ */ (0,
|
|
19633
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19412
19634
|
DropdownMenuItem,
|
|
19413
19635
|
{
|
|
19414
19636
|
icon: import_lucide_react36.ArrowRight,
|
|
@@ -19417,8 +19639,8 @@ var EditorToolbar = ({
|
|
|
19417
19639
|
disabled: !editor.can().addRowAfter()
|
|
19418
19640
|
}
|
|
19419
19641
|
),
|
|
19420
|
-
/* @__PURE__ */ (0,
|
|
19421
|
-
/* @__PURE__ */ (0,
|
|
19642
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "my-1 border-t" }),
|
|
19643
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19422
19644
|
DropdownMenuItem,
|
|
19423
19645
|
{
|
|
19424
19646
|
icon: import_lucide_react36.Trash2,
|
|
@@ -19427,8 +19649,8 @@ var EditorToolbar = ({
|
|
|
19427
19649
|
disabled: !editor.can().deleteColumn()
|
|
19428
19650
|
}
|
|
19429
19651
|
),
|
|
19430
|
-
/* @__PURE__ */ (0,
|
|
19431
|
-
/* @__PURE__ */ (0,
|
|
19652
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Trash2, label: t("tableMenu.deleteRow"), onClick: () => editor.chain().focus().deleteRow().run(), disabled: !editor.can().deleteRow() }),
|
|
19653
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
19432
19654
|
DropdownMenuItem,
|
|
19433
19655
|
{
|
|
19434
19656
|
icon: import_lucide_react36.Trash2,
|
|
@@ -19440,26 +19662,26 @@ var EditorToolbar = ({
|
|
|
19440
19662
|
]
|
|
19441
19663
|
}
|
|
19442
19664
|
),
|
|
19443
|
-
/* @__PURE__ */ (0,
|
|
19444
|
-
/* @__PURE__ */ (0,
|
|
19445
|
-
/* @__PURE__ */ (0,
|
|
19446
|
-
/* @__PURE__ */ (0,
|
|
19447
|
-
/* @__PURE__ */ (0,
|
|
19448
|
-
/* @__PURE__ */ (0,
|
|
19665
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarDivider, {}),
|
|
19666
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleSubscript().run(), active: editor.isActive("subscript"), title: t("toolbar.subscript"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Subscript, { className: "w-4 h-4" }) }),
|
|
19667
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleSuperscript().run(), active: editor.isActive("superscript"), title: t("toolbar.superscript"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Superscript, { className: "w-4 h-4" }) }),
|
|
19668
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarDivider, {}),
|
|
19669
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Undo, { className: "w-4 h-4" }) }),
|
|
19670
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react36.Redo, { className: "w-4 h-4" }) })
|
|
19449
19671
|
] });
|
|
19450
19672
|
};
|
|
19451
19673
|
|
|
19452
19674
|
// ../../components/ui/UEditor/menus.tsx
|
|
19453
|
-
var
|
|
19675
|
+
var import_react45 = require("react");
|
|
19454
19676
|
var import_react_dom9 = require("react-dom");
|
|
19455
19677
|
var import_next_intl4 = require("next-intl");
|
|
19456
19678
|
var import_lucide_react37 = require("lucide-react");
|
|
19457
|
-
var
|
|
19679
|
+
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
19458
19680
|
var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
19459
19681
|
const t = (0, import_next_intl4.useTranslations)("UEditor");
|
|
19460
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
19461
|
-
const menuRef = (0,
|
|
19462
|
-
const allCommands = (0,
|
|
19682
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react45.useState)(0);
|
|
19683
|
+
const menuRef = (0, import_react45.useRef)(null);
|
|
19684
|
+
const allCommands = (0, import_react45.useMemo)(
|
|
19463
19685
|
() => [
|
|
19464
19686
|
{
|
|
19465
19687
|
icon: import_lucide_react37.Type,
|
|
@@ -19530,19 +19752,19 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
19530
19752
|
],
|
|
19531
19753
|
[editor, t]
|
|
19532
19754
|
);
|
|
19533
|
-
const commands = (0,
|
|
19755
|
+
const commands = (0, import_react45.useMemo)(() => {
|
|
19534
19756
|
if (!filterText) return allCommands;
|
|
19535
19757
|
const lowerFilter = filterText.toLowerCase();
|
|
19536
19758
|
return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
|
|
19537
19759
|
}, [allCommands, filterText]);
|
|
19538
|
-
(0,
|
|
19760
|
+
(0, import_react45.useEffect)(() => {
|
|
19539
19761
|
setSelectedIndex(0);
|
|
19540
19762
|
}, [filterText]);
|
|
19541
|
-
(0,
|
|
19763
|
+
(0, import_react45.useEffect)(() => {
|
|
19542
19764
|
const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
|
|
19543
19765
|
selectedElement?.scrollIntoView({ block: "nearest" });
|
|
19544
19766
|
}, [selectedIndex]);
|
|
19545
|
-
const selectCommand = (0,
|
|
19767
|
+
const selectCommand = (0, import_react45.useCallback)(
|
|
19546
19768
|
(index) => {
|
|
19547
19769
|
const command = commands[index];
|
|
19548
19770
|
if (command) {
|
|
@@ -19552,7 +19774,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
19552
19774
|
},
|
|
19553
19775
|
[commands, onClose]
|
|
19554
19776
|
);
|
|
19555
|
-
(0,
|
|
19777
|
+
(0, import_react45.useEffect)(() => {
|
|
19556
19778
|
const handleKeyDown = (e) => {
|
|
19557
19779
|
if (commands.length === 0) return;
|
|
19558
19780
|
if (e.key === "ArrowDown") {
|
|
@@ -19573,11 +19795,11 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
19573
19795
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
19574
19796
|
}, [commands, selectedIndex, selectCommand, onClose]);
|
|
19575
19797
|
if (commands.length === 0) {
|
|
19576
|
-
return /* @__PURE__ */ (0,
|
|
19798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
|
|
19577
19799
|
}
|
|
19578
|
-
return /* @__PURE__ */ (0,
|
|
19579
|
-
/* @__PURE__ */ (0,
|
|
19580
|
-
/* @__PURE__ */ (0,
|
|
19800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
|
|
19801
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
|
|
19802
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
19581
19803
|
"button",
|
|
19582
19804
|
{
|
|
19583
19805
|
type: "button",
|
|
@@ -19590,19 +19812,19 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
19590
19812
|
selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
|
|
19591
19813
|
),
|
|
19592
19814
|
children: [
|
|
19593
|
-
/* @__PURE__ */ (0,
|
|
19815
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19594
19816
|
"div",
|
|
19595
19817
|
{
|
|
19596
19818
|
className: cn(
|
|
19597
19819
|
"flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
|
|
19598
19820
|
selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
|
|
19599
19821
|
),
|
|
19600
|
-
children: /* @__PURE__ */ (0,
|
|
19822
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(cmd.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
|
|
19601
19823
|
}
|
|
19602
19824
|
),
|
|
19603
|
-
/* @__PURE__ */ (0,
|
|
19604
|
-
/* @__PURE__ */ (0,
|
|
19605
|
-
/* @__PURE__ */ (0,
|
|
19825
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "text-left", children: [
|
|
19826
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: cmd.label }),
|
|
19827
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "text-xs text-muted-foreground", children: cmd.description })
|
|
19606
19828
|
] })
|
|
19607
19829
|
]
|
|
19608
19830
|
},
|
|
@@ -19612,43 +19834,54 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
|
|
|
19612
19834
|
};
|
|
19613
19835
|
var FloatingMenuContent = ({ editor }) => {
|
|
19614
19836
|
const t = (0, import_next_intl4.useTranslations)("UEditor");
|
|
19615
|
-
const [showCommands, setShowCommands] = (0,
|
|
19837
|
+
const [showCommands, setShowCommands] = (0, import_react45.useState)(false);
|
|
19616
19838
|
if (showCommands) {
|
|
19617
|
-
return /* @__PURE__ */ (0,
|
|
19839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
|
|
19618
19840
|
}
|
|
19619
|
-
return /* @__PURE__ */ (0,
|
|
19841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
19620
19842
|
"button",
|
|
19621
19843
|
{
|
|
19622
19844
|
type: "button",
|
|
19623
19845
|
onClick: () => setShowCommands(true),
|
|
19624
19846
|
className: "flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-accent transition-all group",
|
|
19625
19847
|
children: [
|
|
19626
|
-
/* @__PURE__ */ (0,
|
|
19627
|
-
/* @__PURE__ */ (0,
|
|
19848
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
|
|
19849
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
|
|
19628
19850
|
]
|
|
19629
19851
|
}
|
|
19630
19852
|
);
|
|
19631
19853
|
};
|
|
19632
|
-
var BubbleMenuContent = ({
|
|
19854
|
+
var BubbleMenuContent = ({
|
|
19855
|
+
editor,
|
|
19856
|
+
onKeepOpenChange
|
|
19857
|
+
}) => {
|
|
19633
19858
|
const t = (0, import_next_intl4.useTranslations)("UEditor");
|
|
19634
19859
|
const { textColors, highlightColors } = useEditorColors();
|
|
19635
|
-
const [showLinkInput, setShowLinkInput] = (0,
|
|
19636
|
-
const [showEditorColorPalette, setShowEditorColorPalette] = (0,
|
|
19860
|
+
const [showLinkInput, setShowLinkInput] = (0, import_react45.useState)(false);
|
|
19861
|
+
const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react45.useState)(false);
|
|
19862
|
+
(0, import_react45.useEffect)(() => {
|
|
19863
|
+
onKeepOpenChange?.(showLinkInput);
|
|
19864
|
+
}, [onKeepOpenChange, showLinkInput]);
|
|
19637
19865
|
if (showLinkInput) {
|
|
19638
|
-
return /* @__PURE__ */ (0,
|
|
19866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19639
19867
|
LinkInput,
|
|
19640
19868
|
{
|
|
19641
19869
|
initialUrl: editor.getAttributes("link").href || "",
|
|
19642
19870
|
onSubmit: (url) => {
|
|
19643
19871
|
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
|
|
19872
|
+
setShowLinkInput(false);
|
|
19873
|
+
requestAnimationFrame(() => editor.commands.focus());
|
|
19644
19874
|
},
|
|
19645
|
-
onCancel: () =>
|
|
19875
|
+
onCancel: () => {
|
|
19876
|
+
setShowLinkInput(false);
|
|
19877
|
+
requestAnimationFrame(() => editor.commands.focus());
|
|
19878
|
+
}
|
|
19646
19879
|
}
|
|
19647
19880
|
);
|
|
19648
19881
|
}
|
|
19649
19882
|
if (showEditorColorPalette) {
|
|
19650
|
-
return /* @__PURE__ */ (0,
|
|
19651
|
-
/* @__PURE__ */ (0,
|
|
19883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "w-48", children: [
|
|
19884
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19652
19885
|
EditorColorPalette,
|
|
19653
19886
|
{
|
|
19654
19887
|
colors: textColors,
|
|
@@ -19663,8 +19896,8 @@ var BubbleMenuContent = ({ editor }) => {
|
|
|
19663
19896
|
label: t("colors.textColor")
|
|
19664
19897
|
}
|
|
19665
19898
|
),
|
|
19666
|
-
/* @__PURE__ */ (0,
|
|
19667
|
-
/* @__PURE__ */ (0,
|
|
19899
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "border-t my-1" }),
|
|
19900
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19668
19901
|
EditorColorPalette,
|
|
19669
19902
|
{
|
|
19670
19903
|
colors: highlightColors,
|
|
@@ -19679,7 +19912,7 @@ var BubbleMenuContent = ({ editor }) => {
|
|
|
19679
19912
|
label: t("colors.highlight")
|
|
19680
19913
|
}
|
|
19681
19914
|
),
|
|
19682
|
-
/* @__PURE__ */ (0,
|
|
19915
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "p-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19683
19916
|
"button",
|
|
19684
19917
|
{
|
|
19685
19918
|
type: "button",
|
|
@@ -19690,53 +19923,71 @@ var BubbleMenuContent = ({ editor }) => {
|
|
|
19690
19923
|
) })
|
|
19691
19924
|
] });
|
|
19692
19925
|
}
|
|
19693
|
-
return /* @__PURE__ */ (0,
|
|
19694
|
-
/* @__PURE__ */ (0,
|
|
19695
|
-
/* @__PURE__ */ (0,
|
|
19696
|
-
/* @__PURE__ */ (0,
|
|
19926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
|
|
19927
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Bold, { className: "w-4 h-4" }) }),
|
|
19928
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Italic, { className: "w-4 h-4" }) }),
|
|
19929
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19697
19930
|
ToolbarButton,
|
|
19698
19931
|
{
|
|
19699
19932
|
onClick: () => editor.chain().focus().toggleUnderline().run(),
|
|
19700
19933
|
active: editor.isActive("underline"),
|
|
19701
19934
|
title: t("toolbar.underline"),
|
|
19702
|
-
children: /* @__PURE__ */ (0,
|
|
19935
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Underline, { className: "w-4 h-4" })
|
|
19703
19936
|
}
|
|
19704
19937
|
),
|
|
19705
|
-
/* @__PURE__ */ (0,
|
|
19706
|
-
/* @__PURE__ */ (0,
|
|
19707
|
-
/* @__PURE__ */ (0,
|
|
19708
|
-
/* @__PURE__ */ (0,
|
|
19709
|
-
|
|
19710
|
-
|
|
19711
|
-
|
|
19938
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Strikethrough, { className: "w-4 h-4" }) }),
|
|
19939
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Code, { className: "w-4 h-4" }) }),
|
|
19940
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
|
|
19941
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19942
|
+
ToolbarButton,
|
|
19943
|
+
{
|
|
19944
|
+
onMouseDown: () => {
|
|
19945
|
+
onKeepOpenChange?.(true);
|
|
19946
|
+
},
|
|
19947
|
+
onClick: () => {
|
|
19948
|
+
setShowLinkInput(true);
|
|
19949
|
+
},
|
|
19950
|
+
active: editor.isActive("link"),
|
|
19951
|
+
title: t("toolbar.link"),
|
|
19952
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Link, { className: "w-4 h-4" })
|
|
19953
|
+
}
|
|
19954
|
+
),
|
|
19955
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Palette, { className: "w-4 h-4" }) }),
|
|
19956
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
|
|
19957
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19712
19958
|
ToolbarButton,
|
|
19713
19959
|
{
|
|
19714
19960
|
onClick: () => editor.chain().focus().toggleSubscript().run(),
|
|
19715
19961
|
active: editor.isActive("subscript"),
|
|
19716
19962
|
title: t("toolbar.subscript"),
|
|
19717
|
-
children: /* @__PURE__ */ (0,
|
|
19963
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Subscript, { className: "w-4 h-4" })
|
|
19718
19964
|
}
|
|
19719
19965
|
),
|
|
19720
|
-
/* @__PURE__ */ (0,
|
|
19966
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19721
19967
|
ToolbarButton,
|
|
19722
19968
|
{
|
|
19723
19969
|
onClick: () => editor.chain().focus().toggleSuperscript().run(),
|
|
19724
19970
|
active: editor.isActive("superscript"),
|
|
19725
19971
|
title: t("toolbar.superscript"),
|
|
19726
|
-
children: /* @__PURE__ */ (0,
|
|
19972
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react37.Superscript, { className: "w-4 h-4" })
|
|
19727
19973
|
}
|
|
19728
19974
|
)
|
|
19729
19975
|
] });
|
|
19730
19976
|
};
|
|
19731
19977
|
var CustomBubbleMenu = ({ editor }) => {
|
|
19732
|
-
const [isVisible, setIsVisible] = (0,
|
|
19733
|
-
const [position, setPosition] = (0,
|
|
19734
|
-
const menuRef = (0,
|
|
19735
|
-
(0,
|
|
19978
|
+
const [isVisible, setIsVisible] = (0, import_react45.useState)(false);
|
|
19979
|
+
const [position, setPosition] = (0, import_react45.useState)({ top: 0, left: 0 });
|
|
19980
|
+
const menuRef = (0, import_react45.useRef)(null);
|
|
19981
|
+
const keepOpenRef = (0, import_react45.useRef)(false);
|
|
19982
|
+
const setKeepOpen = (0, import_react45.useCallback)((next) => {
|
|
19983
|
+
keepOpenRef.current = next;
|
|
19984
|
+
if (next) setIsVisible(true);
|
|
19985
|
+
}, []);
|
|
19986
|
+
(0, import_react45.useEffect)(() => {
|
|
19736
19987
|
const updatePosition = () => {
|
|
19737
19988
|
const { state, view } = editor;
|
|
19738
19989
|
const { from, to, empty } = state.selection;
|
|
19739
|
-
if (empty || !view.hasFocus()) {
|
|
19990
|
+
if (!keepOpenRef.current && (empty || !view.hasFocus())) {
|
|
19740
19991
|
setIsVisible(false);
|
|
19741
19992
|
return;
|
|
19742
19993
|
}
|
|
@@ -19747,7 +19998,9 @@ var CustomBubbleMenu = ({ editor }) => {
|
|
|
19747
19998
|
setPosition({ top, left });
|
|
19748
19999
|
setIsVisible(true);
|
|
19749
20000
|
};
|
|
19750
|
-
const handleBlur = () =>
|
|
20001
|
+
const handleBlur = () => {
|
|
20002
|
+
if (!keepOpenRef.current) setIsVisible(false);
|
|
20003
|
+
};
|
|
19751
20004
|
editor.on("selectionUpdate", updatePosition);
|
|
19752
20005
|
editor.on("focus", updatePosition);
|
|
19753
20006
|
editor.on("blur", handleBlur);
|
|
@@ -19759,7 +20012,7 @@ var CustomBubbleMenu = ({ editor }) => {
|
|
|
19759
20012
|
}, [editor]);
|
|
19760
20013
|
if (!isVisible) return null;
|
|
19761
20014
|
return (0, import_react_dom9.createPortal)(
|
|
19762
|
-
/* @__PURE__ */ (0,
|
|
20015
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19763
20016
|
"div",
|
|
19764
20017
|
{
|
|
19765
20018
|
ref: menuRef,
|
|
@@ -19770,16 +20023,22 @@ var CustomBubbleMenu = ({ editor }) => {
|
|
|
19770
20023
|
transform: "translate(-50%, -100%)"
|
|
19771
20024
|
},
|
|
19772
20025
|
onMouseDown: (e) => e.preventDefault(),
|
|
19773
|
-
children: /* @__PURE__ */ (0,
|
|
20026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
20027
|
+
BubbleMenuContent,
|
|
20028
|
+
{
|
|
20029
|
+
editor,
|
|
20030
|
+
onKeepOpenChange: setKeepOpen
|
|
20031
|
+
}
|
|
20032
|
+
)
|
|
19774
20033
|
}
|
|
19775
20034
|
),
|
|
19776
20035
|
document.body
|
|
19777
20036
|
);
|
|
19778
20037
|
};
|
|
19779
20038
|
var CustomFloatingMenu = ({ editor }) => {
|
|
19780
|
-
const [isVisible, setIsVisible] = (0,
|
|
19781
|
-
const [position, setPosition] = (0,
|
|
19782
|
-
(0,
|
|
20039
|
+
const [isVisible, setIsVisible] = (0, import_react45.useState)(false);
|
|
20040
|
+
const [position, setPosition] = (0, import_react45.useState)({ top: 0, left: 0 });
|
|
20041
|
+
(0, import_react45.useEffect)(() => {
|
|
19783
20042
|
const updatePosition = () => {
|
|
19784
20043
|
const { state, view } = editor;
|
|
19785
20044
|
const { $from, empty } = state.selection;
|
|
@@ -19806,7 +20065,7 @@ var CustomFloatingMenu = ({ editor }) => {
|
|
|
19806
20065
|
}, [editor]);
|
|
19807
20066
|
if (!isVisible) return null;
|
|
19808
20067
|
return (0, import_react_dom9.createPortal)(
|
|
19809
|
-
/* @__PURE__ */ (0,
|
|
20068
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
19810
20069
|
"div",
|
|
19811
20070
|
{
|
|
19812
20071
|
className: "fixed z-50 rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
|
|
@@ -19816,7 +20075,7 @@ var CustomFloatingMenu = ({ editor }) => {
|
|
|
19816
20075
|
transform: "translate(-50%, -100%)"
|
|
19817
20076
|
},
|
|
19818
20077
|
onMouseDown: (e) => e.preventDefault(),
|
|
19819
|
-
children: /* @__PURE__ */ (0,
|
|
20078
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(FloatingMenuContent, { editor })
|
|
19820
20079
|
}
|
|
19821
20080
|
),
|
|
19822
20081
|
document.body
|
|
@@ -19825,25 +20084,25 @@ var CustomFloatingMenu = ({ editor }) => {
|
|
|
19825
20084
|
|
|
19826
20085
|
// ../../components/ui/UEditor/CharacterCount.tsx
|
|
19827
20086
|
var import_next_intl5 = require("next-intl");
|
|
19828
|
-
var
|
|
20087
|
+
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
19829
20088
|
var CharacterCountDisplay = ({ editor, maxCharacters }) => {
|
|
19830
20089
|
const t = (0, import_next_intl5.useTranslations)("UEditor");
|
|
19831
20090
|
const storage = editor.storage;
|
|
19832
20091
|
const characterCount = storage.characterCount?.characters?.() ?? 0;
|
|
19833
20092
|
const wordCount = storage.characterCount?.words?.() ?? 0;
|
|
19834
20093
|
const percentage = maxCharacters ? Math.round(characterCount / maxCharacters * 100) : 0;
|
|
19835
|
-
return /* @__PURE__ */ (0,
|
|
19836
|
-
/* @__PURE__ */ (0,
|
|
20094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-3 px-3 py-2 text-xs text-muted-foreground border-t bg-muted/20", children: [
|
|
20095
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { children: [
|
|
19837
20096
|
wordCount,
|
|
19838
20097
|
" ",
|
|
19839
20098
|
t("words")
|
|
19840
20099
|
] }),
|
|
19841
|
-
/* @__PURE__ */ (0,
|
|
20100
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { children: [
|
|
19842
20101
|
characterCount,
|
|
19843
20102
|
" ",
|
|
19844
20103
|
t("characters")
|
|
19845
20104
|
] }),
|
|
19846
|
-
maxCharacters && /* @__PURE__ */ (0,
|
|
20105
|
+
maxCharacters && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: cn(percentage > 90 && "text-destructive", percentage > 100 && "font-bold"), children: [
|
|
19847
20106
|
characterCount,
|
|
19848
20107
|
"/",
|
|
19849
20108
|
maxCharacters
|
|
@@ -19852,7 +20111,7 @@ var CharacterCountDisplay = ({ editor, maxCharacters }) => {
|
|
|
19852
20111
|
};
|
|
19853
20112
|
|
|
19854
20113
|
// ../../components/ui/UEditor/UEditor.tsx
|
|
19855
|
-
var
|
|
20114
|
+
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
19856
20115
|
var UEditor = ({
|
|
19857
20116
|
content = "",
|
|
19858
20117
|
onChange,
|
|
@@ -19875,11 +20134,11 @@ var UEditor = ({
|
|
|
19875
20134
|
}) => {
|
|
19876
20135
|
const t = (0, import_next_intl6.useTranslations)("UEditor");
|
|
19877
20136
|
const effectivePlaceholder = placeholder ?? t("placeholder");
|
|
19878
|
-
const extensions = (0,
|
|
19879
|
-
() => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode }),
|
|
19880
|
-
[effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode]
|
|
20137
|
+
const extensions = (0, import_react46.useMemo)(
|
|
20138
|
+
() => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable }),
|
|
20139
|
+
[effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable]
|
|
19881
20140
|
);
|
|
19882
|
-
const editor = (0,
|
|
20141
|
+
const editor = (0, import_react47.useEditor)({
|
|
19883
20142
|
immediatelyRender: false,
|
|
19884
20143
|
extensions,
|
|
19885
20144
|
content,
|
|
@@ -19893,6 +20152,19 @@ var UEditor = ({
|
|
|
19893
20152
|
event.stopPropagation();
|
|
19894
20153
|
}
|
|
19895
20154
|
return false;
|
|
20155
|
+
},
|
|
20156
|
+
click: (view, event) => {
|
|
20157
|
+
if (!(event instanceof MouseEvent)) return false;
|
|
20158
|
+
if (event.button !== 0) return false;
|
|
20159
|
+
const target = event.target;
|
|
20160
|
+
const anchor = target?.closest?.("a[href]");
|
|
20161
|
+
const href = anchor?.getAttribute("href") ?? "";
|
|
20162
|
+
if (!href) return false;
|
|
20163
|
+
if (!view.state.selection.empty) return false;
|
|
20164
|
+
event.preventDefault();
|
|
20165
|
+
event.stopPropagation();
|
|
20166
|
+
window.open(href, "_blank", "noopener,noreferrer");
|
|
20167
|
+
return true;
|
|
19896
20168
|
}
|
|
19897
20169
|
},
|
|
19898
20170
|
attributes: {
|
|
@@ -19971,7 +20243,7 @@ var UEditor = ({
|
|
|
19971
20243
|
onJsonChange?.(editor2.getJSON());
|
|
19972
20244
|
}
|
|
19973
20245
|
});
|
|
19974
|
-
(0,
|
|
20246
|
+
(0, import_react46.useEffect)(() => {
|
|
19975
20247
|
if (editor && content !== editor.getHTML()) {
|
|
19976
20248
|
if (editor.isEmpty && content) {
|
|
19977
20249
|
editor.commands.setContent(content);
|
|
@@ -19979,7 +20251,7 @@ var UEditor = ({
|
|
|
19979
20251
|
}
|
|
19980
20252
|
}, [content, editor]);
|
|
19981
20253
|
if (!editor) {
|
|
19982
|
-
return /* @__PURE__ */ (0,
|
|
20254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
19983
20255
|
"div",
|
|
19984
20256
|
{
|
|
19985
20257
|
className: cn("w-full rounded-lg border bg-background flex items-center justify-center text-muted-foreground", className),
|
|
@@ -19988,7 +20260,7 @@ var UEditor = ({
|
|
|
19988
20260
|
}
|
|
19989
20261
|
);
|
|
19990
20262
|
}
|
|
19991
|
-
return /* @__PURE__ */ (0,
|
|
20263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
19992
20264
|
"div",
|
|
19993
20265
|
{
|
|
19994
20266
|
className: cn(
|
|
@@ -20000,11 +20272,11 @@ var UEditor = ({
|
|
|
20000
20272
|
className
|
|
20001
20273
|
),
|
|
20002
20274
|
children: [
|
|
20003
|
-
editable && showToolbar && /* @__PURE__ */ (0,
|
|
20004
|
-
editable && showBubbleMenu && /* @__PURE__ */ (0,
|
|
20005
|
-
editable && showFloatingMenu && /* @__PURE__ */ (0,
|
|
20006
|
-
/* @__PURE__ */ (0,
|
|
20007
|
-
|
|
20275
|
+
editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(EditorToolbar, { editor, variant, uploadImage, imageInsertMode }),
|
|
20276
|
+
editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(CustomBubbleMenu, { editor }),
|
|
20277
|
+
editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(CustomFloatingMenu, { editor }),
|
|
20278
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
20279
|
+
import_react47.EditorContent,
|
|
20008
20280
|
{
|
|
20009
20281
|
editor,
|
|
20010
20282
|
className: "flex-1 overflow-y-auto",
|
|
@@ -20014,7 +20286,7 @@ var UEditor = ({
|
|
|
20014
20286
|
}
|
|
20015
20287
|
}
|
|
20016
20288
|
),
|
|
20017
|
-
showCharacterCount && /* @__PURE__ */ (0,
|
|
20289
|
+
showCharacterCount && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(CharacterCountDisplay, { editor, maxCharacters })
|
|
20018
20290
|
]
|
|
20019
20291
|
}
|
|
20020
20292
|
);
|