feat(compose): 正文内嵌隐藏块并升级 Markdown 编辑器
去掉整帖可见性表单，改为 :::hide 按块脱敏；工具栏补齐代码块、链接/图片对话框与粘贴拖拽上传。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,23 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState, useCallback, useEffect, type ReactNode } from "react";
|
||||
import {
|
||||
useRef,
|
||||
useState,
|
||||
useCallback,
|
||||
useEffect,
|
||||
type ReactNode,
|
||||
type KeyboardEvent as ReactKeyboardEvent,
|
||||
} from "react";
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
Strikethrough,
|
||||
Code,
|
||||
Code2,
|
||||
Quote,
|
||||
List,
|
||||
ListOrdered,
|
||||
Heading2,
|
||||
Heading3,
|
||||
Link as LinkIcon,
|
||||
Image as ImageIcon,
|
||||
Table,
|
||||
Minus,
|
||||
Eye,
|
||||
Pencil,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Lock,
|
||||
ChevronDown,
|
||||
Upload,
|
||||
Link2,
|
||||
} from "lucide-react";
|
||||
import { apiUploadPostImage } from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
|
||||
import { SHIKI_LANG_IDS } from "@/components/markdown/shikiHighlighter";
|
||||
|
||||
type MarkdownEditorProps = {
|
||||
value: string;
|
||||
@@ -36,6 +54,10 @@ type WrapOpts = {
|
||||
linePrefix?: string;
|
||||
};
|
||||
|
||||
type PopoverKind = "link" | "imageUrl" | "code" | "hide" | "heading" | "image" | null;
|
||||
|
||||
const CODE_LANGS = ["plaintext", "aardio", ...SHIKI_LANG_IDS.filter((l) => l !== "plaintext")] as const;
|
||||
|
||||
function applyWrap(
|
||||
el: HTMLTextAreaElement,
|
||||
value: string,
|
||||
@@ -53,11 +75,7 @@ function applyWrap(
|
||||
);
|
||||
const inserted = lines.join("\n");
|
||||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||||
return {
|
||||
next,
|
||||
selStart: start,
|
||||
selEnd: start + inserted.length,
|
||||
};
|
||||
return { next, selStart: start, selEnd: start + inserted.length };
|
||||
}
|
||||
|
||||
const inner = selected || opts.placeholder || "";
|
||||
@@ -68,6 +86,15 @@ function applyWrap(
|
||||
return { next, selStart, selEnd };
|
||||
}
|
||||
|
||||
function isHttpUrl(raw: string): boolean {
|
||||
try {
|
||||
const u = new URL(raw.trim());
|
||||
return u.protocol === "http:" || u.protocol === "https:";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default function MarkdownEditor({
|
||||
value,
|
||||
onChange,
|
||||
@@ -79,16 +106,28 @@ export default function MarkdownEditor({
|
||||
}: MarkdownEditorProps) {
|
||||
const taRef = useRef<HTMLTextAreaElement>(null);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const toolbarRef = useRef<HTMLDivElement>(null);
|
||||
const [mode, setMode] = useState<"write" | "preview">("write");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const [popover, setPopover] = useState<PopoverKind>(null);
|
||||
const [linkText, setLinkText] = useState("");
|
||||
const [linkUrl, setLinkUrl] = useState("https://");
|
||||
const [imageUrl, setImageUrl] = useState("https://");
|
||||
const [imageAlt, setImageAlt] = useState("图片");
|
||||
const [codeQuery, setCodeQuery] = useState("");
|
||||
const [hidePoints, setHidePoints] = useState(10);
|
||||
const [hideStep, setHideStep] = useState<"menu" | "points">("menu");
|
||||
const savedSel = useRef<{ start: number; end: number } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!fullscreen) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
setFullscreen(false);
|
||||
if (popover) setPopover(null);
|
||||
else setFullscreen(false);
|
||||
}
|
||||
};
|
||||
const prev = document.body.style.overflow;
|
||||
@@ -98,7 +137,40 @@ export default function MarkdownEditor({
|
||||
document.body.style.overflow = prev;
|
||||
window.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [fullscreen]);
|
||||
}, [fullscreen, popover]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!popover) return;
|
||||
const onDoc = (e: MouseEvent) => {
|
||||
const t = e.target as Node;
|
||||
if (toolbarRef.current && !toolbarRef.current.contains(t)) {
|
||||
setPopover(null);
|
||||
}
|
||||
};
|
||||
const onEsc = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setPopover(null);
|
||||
};
|
||||
document.addEventListener("mousedown", onDoc);
|
||||
document.addEventListener("keydown", onEsc);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDoc);
|
||||
document.removeEventListener("keydown", onEsc);
|
||||
};
|
||||
}, [popover]);
|
||||
|
||||
const rememberSel = () => {
|
||||
const el = taRef.current;
|
||||
if (!el) return;
|
||||
savedSel.current = { start: el.selectionStart, end: el.selectionEnd };
|
||||
};
|
||||
|
||||
const restoreSel = () => {
|
||||
const el = taRef.current;
|
||||
const sel = savedSel.current;
|
||||
if (!el || !sel) return;
|
||||
el.focus();
|
||||
el.setSelectionRange(sel.start, sel.end);
|
||||
};
|
||||
|
||||
const runWrap = useCallback(
|
||||
(opts: WrapOpts) => {
|
||||
@@ -115,29 +187,35 @@ export default function MarkdownEditor({
|
||||
);
|
||||
|
||||
const insertAtCursor = useCallback(
|
||||
(text: string) => {
|
||||
(text: string, selectInner?: { offset: number; length: number }) => {
|
||||
const el = taRef.current;
|
||||
if (!el) {
|
||||
onChange(value + (value.endsWith("\n") || !value ? "" : "\n") + text);
|
||||
return;
|
||||
}
|
||||
const start = el.selectionStart;
|
||||
const end = el.selectionEnd;
|
||||
const start = savedSel.current?.start ?? el.selectionStart;
|
||||
const end = savedSel.current?.end ?? el.selectionEnd;
|
||||
const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
|
||||
const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
|
||||
const inserted = padBefore + text + padAfter;
|
||||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||||
onChange(next);
|
||||
const caret = start + inserted.length;
|
||||
requestAnimationFrame(() => {
|
||||
el.focus();
|
||||
el.setSelectionRange(caret, caret);
|
||||
if (selectInner) {
|
||||
const a = start + padBefore.length + selectInner.offset;
|
||||
el.setSelectionRange(a, a + selectInner.length);
|
||||
} else {
|
||||
const caret = start + inserted.length;
|
||||
el.setSelectionRange(caret, caret);
|
||||
}
|
||||
});
|
||||
savedSel.current = null;
|
||||
},
|
||||
[value, onChange]
|
||||
);
|
||||
|
||||
const handleImagePick = async (file: File | null) => {
|
||||
const uploadImageFile = async (file: File | null) => {
|
||||
if (!file || disabled) return;
|
||||
if (!/^image\/(jpeg|png|webp)$/i.test(file.type)) {
|
||||
toast("仅支持 JPEG / PNG / WebP", "error");
|
||||
@@ -166,82 +244,536 @@ export default function MarkdownEditor({
|
||||
}
|
||||
};
|
||||
|
||||
const tools: {
|
||||
key: string;
|
||||
const openPopover = (kind: PopoverKind) => {
|
||||
rememberSel();
|
||||
if (kind === "link") {
|
||||
const el = taRef.current;
|
||||
const selected = el ? value.slice(el.selectionStart, el.selectionEnd) : "";
|
||||
setLinkText(selected || "链接文字");
|
||||
setLinkUrl("https://");
|
||||
}
|
||||
if (kind === "imageUrl") {
|
||||
setImageUrl("https://");
|
||||
setImageAlt("图片");
|
||||
}
|
||||
if (kind === "code") setCodeQuery("");
|
||||
if (kind === "hide") {
|
||||
setHideStep("menu");
|
||||
setHidePoints(10);
|
||||
}
|
||||
setPopover((prev) => (prev === kind ? null : kind));
|
||||
};
|
||||
|
||||
const applyLink = () => {
|
||||
const url = linkUrl.trim();
|
||||
if (!isHttpUrl(url)) {
|
||||
toast("请输入有效的 http(s) 链接", "error");
|
||||
return;
|
||||
}
|
||||
const el = taRef.current;
|
||||
restoreSel();
|
||||
const start = el?.selectionStart ?? 0;
|
||||
const end = el?.selectionEnd ?? 0;
|
||||
const selected = value.slice(start, end);
|
||||
const label = (selected || linkText.trim() || url).trim() || url;
|
||||
const md = `[${label}](${url})`;
|
||||
const next = value.slice(0, start) + md + value.slice(end);
|
||||
onChange(next);
|
||||
requestAnimationFrame(() => {
|
||||
if (!el) return;
|
||||
el.focus();
|
||||
el.setSelectionRange(start + md.length, start + md.length);
|
||||
});
|
||||
setPopover(null);
|
||||
};
|
||||
|
||||
const applyImageUrl = () => {
|
||||
const url = imageUrl.trim();
|
||||
if (!isHttpUrl(url)) {
|
||||
toast("请输入有效的图片 URL（http/https）", "error");
|
||||
return;
|
||||
}
|
||||
const alt = imageAlt.trim() || "图片";
|
||||
insertAtCursor(``);
|
||||
setPopover(null);
|
||||
};
|
||||
|
||||
const insertCodeBlock = (lang: string) => {
|
||||
const el = taRef.current;
|
||||
restoreSel();
|
||||
const start = el?.selectionStart ?? 0;
|
||||
const end = el?.selectionEnd ?? 0;
|
||||
const selected = value.slice(start, end);
|
||||
const body = selected || "代码";
|
||||
const fence = "```" + lang + "\n" + body + "\n```";
|
||||
const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
|
||||
const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
|
||||
const inserted = padBefore + fence + padAfter;
|
||||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||||
onChange(next);
|
||||
requestAnimationFrame(() => {
|
||||
if (!el) return;
|
||||
el.focus();
|
||||
const bodyStart = start + padBefore.length + 3 + lang.length + 1;
|
||||
el.setSelectionRange(bodyStart, bodyStart + body.length);
|
||||
});
|
||||
setPopover(null);
|
||||
};
|
||||
|
||||
const insertHide = (kind: "login" | "reply" | "points", points?: number) => {
|
||||
restoreSel();
|
||||
const el = taRef.current;
|
||||
const start = el?.selectionStart ?? 0;
|
||||
const end = el?.selectionEnd ?? 0;
|
||||
const selected = value.slice(start, end);
|
||||
const body = selected || "在此填写隐藏内容";
|
||||
const open =
|
||||
kind === "points"
|
||||
? `:::hide points ${points || 10}`
|
||||
: `:::hide ${kind}`;
|
||||
const block = `${open}\n${body}\n:::`;
|
||||
const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
|
||||
const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
|
||||
const inserted = padBefore + block + padAfter;
|
||||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||||
onChange(next);
|
||||
requestAnimationFrame(() => {
|
||||
if (!el) return;
|
||||
el.focus();
|
||||
const bodyStart = start + padBefore.length + open.length + 1;
|
||||
el.setSelectionRange(bodyStart, bodyStart + body.length);
|
||||
});
|
||||
setPopover(null);
|
||||
};
|
||||
|
||||
const insertOrderedList = () => {
|
||||
const el = taRef.current;
|
||||
if (!el || disabled) return;
|
||||
const start = el.selectionStart;
|
||||
const end = el.selectionEnd;
|
||||
const selected = value.slice(start, end) || "列表项";
|
||||
const lines = selected.split("\n").map((l, i) => {
|
||||
if (/^\d+\.\s/.test(l)) return l;
|
||||
return `${i + 1}. ${l}`;
|
||||
});
|
||||
const inserted = lines.join("\n");
|
||||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||||
onChange(next);
|
||||
requestAnimationFrame(() => {
|
||||
el.focus();
|
||||
el.setSelectionRange(start, start + inserted.length);
|
||||
});
|
||||
};
|
||||
|
||||
const insertTable = () => {
|
||||
insertAtCursor(
|
||||
"| 列1 | 列2 | 列3 |\n| --- | --- | --- |\n| | | |\n| | | |"
|
||||
);
|
||||
};
|
||||
|
||||
const onTextareaKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onSubmitShortcut?.();
|
||||
return;
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "b") {
|
||||
e.preventDefault();
|
||||
runWrap({ before: "**", after: "**", placeholder: "粗体" });
|
||||
return;
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "i") {
|
||||
e.preventDefault();
|
||||
runWrap({ before: "*", after: "*", placeholder: "斜体" });
|
||||
return;
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "k") {
|
||||
e.preventDefault();
|
||||
openPopover("link");
|
||||
return;
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "c") {
|
||||
e.preventDefault();
|
||||
openPopover("code");
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const onPaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
|
||||
const items = e.clipboardData?.items;
|
||||
if (items) {
|
||||
for (const item of items) {
|
||||
if (item.type.startsWith("image/")) {
|
||||
e.preventDefault();
|
||||
const file = item.getAsFile();
|
||||
await uploadImageFile(file);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
const text = e.clipboardData?.getData("text/plain")?.trim() || "";
|
||||
if (text && isHttpUrl(text)) {
|
||||
const el = taRef.current;
|
||||
if (el && el.selectionStart !== el.selectionEnd) {
|
||||
e.preventDefault();
|
||||
const start = el.selectionStart;
|
||||
const end = el.selectionEnd;
|
||||
const selected = value.slice(start, end);
|
||||
const md = `[${selected}](${text})`;
|
||||
const next = value.slice(0, start) + md + value.slice(end);
|
||||
onChange(next);
|
||||
requestAnimationFrame(() => {
|
||||
el.focus();
|
||||
el.setSelectionRange(start + md.length, start + md.length);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const filteredLangs = CODE_LANGS.filter((l) =>
|
||||
l.toLowerCase().includes(codeQuery.trim().toLowerCase())
|
||||
);
|
||||
|
||||
const ToolBtn = ({
|
||||
label,
|
||||
icon,
|
||||
onClick,
|
||||
active,
|
||||
disabled: dis,
|
||||
}: {
|
||||
label: string;
|
||||
icon: ReactNode;
|
||||
onClick: () => void;
|
||||
}[] = [
|
||||
{
|
||||
key: "bold",
|
||||
label: "粗体",
|
||||
icon: <Bold size={15} />,
|
||||
onClick: () => runWrap({ before: "**", after: "**", placeholder: "粗体" }),
|
||||
},
|
||||
{
|
||||
key: "italic",
|
||||
label: "斜体",
|
||||
icon: <Italic size={15} />,
|
||||
onClick: () => runWrap({ before: "*", after: "*", placeholder: "斜体" }),
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
label: "行内代码",
|
||||
icon: <Code size={15} />,
|
||||
onClick: () => runWrap({ before: "`", after: "`", placeholder: "code" }),
|
||||
},
|
||||
{
|
||||
key: "quote",
|
||||
label: "引用",
|
||||
icon: <Quote size={15} />,
|
||||
onClick: () =>
|
||||
runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" }),
|
||||
},
|
||||
{
|
||||
key: "list",
|
||||
label: "列表",
|
||||
icon: <List size={15} />,
|
||||
onClick: () =>
|
||||
runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" }),
|
||||
},
|
||||
{
|
||||
key: "h2",
|
||||
label: "二级标题",
|
||||
icon: <Heading2 size={15} />,
|
||||
onClick: () => runWrap({ before: "## ", after: "", placeholder: "标题" }),
|
||||
},
|
||||
{
|
||||
key: "link",
|
||||
label: "链接",
|
||||
icon: <LinkIcon size={15} />,
|
||||
onClick: () =>
|
||||
runWrap({ before: "[", after: "](https://)", placeholder: "链接文字" }),
|
||||
},
|
||||
{
|
||||
key: "image",
|
||||
label: uploading ? "上传中…" : "插入图片",
|
||||
icon: <ImageIcon size={15} />,
|
||||
onClick: () => fileRef.current?.click(),
|
||||
},
|
||||
];
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
}) => (
|
||||
<button
|
||||
type="button"
|
||||
className={`j13-md-tool${active ? " is-active" : ""}`}
|
||||
data-tip={label}
|
||||
aria-label={label}
|
||||
disabled={disabled || dis}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
|
||||
const Sep = () => <span className="j13-md-sep" aria-hidden />;
|
||||
|
||||
return (
|
||||
<div className={`j13-md-editor${fullscreen ? " is-fullscreen" : ""}`}>
|
||||
<div className="j13-md-toolbar">
|
||||
<div className="flex items-center gap-0.5 flex-1 flex-wrap min-w-0">
|
||||
{tools.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
className="j13-md-tool"
|
||||
data-tip={t.label}
|
||||
aria-label={t.label}
|
||||
disabled={disabled || (t.key === "image" && uploading)}
|
||||
onClick={t.onClick}
|
||||
>
|
||||
{t.icon}
|
||||
</button>
|
||||
))}
|
||||
<div className="j13-md-toolbar" ref={toolbarRef}>
|
||||
<div className="j13-md-tool-groups flex items-center gap-0.5 flex-1 flex-wrap min-w-0">
|
||||
<ToolBtn
|
||||
label="粗体 Ctrl+B"
|
||||
icon={<Bold size={15} />}
|
||||
onClick={() => runWrap({ before: "**", after: "**", placeholder: "粗体" })}
|
||||
/>
|
||||
<ToolBtn
|
||||
label="斜体 Ctrl+I"
|
||||
icon={<Italic size={15} />}
|
||||
onClick={() => runWrap({ before: "*", after: "*", placeholder: "斜体" })}
|
||||
/>
|
||||
<ToolBtn
|
||||
label="删除线"
|
||||
icon={<Strikethrough size={15} />}
|
||||
onClick={() => runWrap({ before: "~~", after: "~~", placeholder: "删除线" })}
|
||||
/>
|
||||
<Sep />
|
||||
<div className="j13-md-popover-anchor relative">
|
||||
<ToolBtn
|
||||
label="标题"
|
||||
icon={
|
||||
<span className="inline-flex items-center gap-0.5">
|
||||
<Heading2 size={15} />
|
||||
<ChevronDown size={11} />
|
||||
</span>
|
||||
}
|
||||
active={popover === "heading"}
|
||||
onClick={() => openPopover("heading")}
|
||||
/>
|
||||
{popover === "heading" && (
|
||||
<div className="j13-md-popover" role="menu">
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
runWrap({ before: "## ", after: "", placeholder: "二级标题" });
|
||||
setPopover(null);
|
||||
}}
|
||||
>
|
||||
<Heading2 size={14} /> 二级标题
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
runWrap({ before: "### ", after: "", placeholder: "三级标题" });
|
||||
setPopover(null);
|
||||
}}
|
||||
>
|
||||
<Heading3 size={14} /> 三级标题
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Sep />
|
||||
<ToolBtn
|
||||
label="引用"
|
||||
icon={<Quote size={15} />}
|
||||
onClick={() =>
|
||||
runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" })
|
||||
}
|
||||
/>
|
||||
<ToolBtn
|
||||
label="无序列表"
|
||||
icon={<List size={15} />}
|
||||
onClick={() =>
|
||||
runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" })
|
||||
}
|
||||
/>
|
||||
<ToolBtn
|
||||
label="有序列表"
|
||||
icon={<ListOrdered size={15} />}
|
||||
onClick={insertOrderedList}
|
||||
/>
|
||||
<ToolBtn label="表格" icon={<Table size={15} />} onClick={insertTable} />
|
||||
<ToolBtn
|
||||
label="分割线"
|
||||
icon={<Minus size={15} />}
|
||||
onClick={() => insertAtCursor("---")}
|
||||
/>
|
||||
<Sep />
|
||||
<ToolBtn
|
||||
label="行内代码"
|
||||
icon={<Code size={15} />}
|
||||
onClick={() => runWrap({ before: "`", after: "`", placeholder: "code" })}
|
||||
/>
|
||||
<div className="j13-md-popover-anchor relative">
|
||||
<ToolBtn
|
||||
label="代码块 Ctrl+Shift+C"
|
||||
icon={<Code2 size={15} />}
|
||||
active={popover === "code"}
|
||||
onClick={() => openPopover("code")}
|
||||
/>
|
||||
{popover === "code" && (
|
||||
<div className="j13-md-popover j13-md-popover-wide" role="dialog" aria-label="选择语言">
|
||||
<input
|
||||
autoFocus
|
||||
className="j13-md-popover-input"
|
||||
placeholder="搜索语言…"
|
||||
value={codeQuery}
|
||||
onChange={(e) => setCodeQuery(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && filteredLangs[0]) {
|
||||
e.preventDefault();
|
||||
insertCodeBlock(filteredLangs[0]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="j13-md-popover-list">
|
||||
{filteredLangs.map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
type="button"
|
||||
onClick={() => insertCodeBlock(lang)}
|
||||
>
|
||||
{lang}
|
||||
</button>
|
||||
))}
|
||||
{filteredLangs.length === 0 && (
|
||||
<p className="meta px-2 py-3 text-center">无匹配语言</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Sep />
|
||||
<div className="j13-md-popover-anchor relative">
|
||||
<ToolBtn
|
||||
label="链接 Ctrl+K"
|
||||
icon={<LinkIcon size={15} />}
|
||||
active={popover === "link"}
|
||||
onClick={() => openPopover("link")}
|
||||
/>
|
||||
{popover === "link" && (
|
||||
<div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入链接">
|
||||
<label className="j13-md-field">
|
||||
<span>文字</span>
|
||||
<input
|
||||
value={linkText}
|
||||
onChange={(e) => setLinkText(e.target.value)}
|
||||
className="j13-md-popover-input"
|
||||
/>
|
||||
</label>
|
||||
<label className="j13-md-field">
|
||||
<span>URL</span>
|
||||
<input
|
||||
autoFocus
|
||||
value={linkUrl}
|
||||
onChange={(e) => setLinkUrl(e.target.value)}
|
||||
className="j13-md-popover-input"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
applyLink();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<div className="j13-md-popover-footer">
|
||||
<button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
|
||||
取消
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={applyLink}>
|
||||
插入
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="j13-md-popover-anchor relative">
|
||||
<ToolBtn
|
||||
label={uploading ? "上传中…" : "图片"}
|
||||
icon={<ImageIcon size={15} />}
|
||||
active={popover === "image" || popover === "imageUrl"}
|
||||
disabled={uploading}
|
||||
onClick={() => openPopover("image")}
|
||||
/>
|
||||
{popover === "image" && (
|
||||
<div className="j13-md-popover" role="menu">
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
disabled={uploading}
|
||||
onClick={() => {
|
||||
setPopover(null);
|
||||
fileRef.current?.click();
|
||||
}}
|
||||
>
|
||||
<Upload size={14} /> 上传图片
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => openPopover("imageUrl")}
|
||||
>
|
||||
<Link2 size={14} /> 图片地址
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{popover === "imageUrl" && (
|
||||
<div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入图片 URL">
|
||||
<label className="j13-md-field">
|
||||
<span>说明</span>
|
||||
<input
|
||||
value={imageAlt}
|
||||
onChange={(e) => setImageAlt(e.target.value)}
|
||||
className="j13-md-popover-input"
|
||||
/>
|
||||
</label>
|
||||
<label className="j13-md-field">
|
||||
<span>URL</span>
|
||||
<input
|
||||
autoFocus
|
||||
value={imageUrl}
|
||||
onChange={(e) => setImageUrl(e.target.value)}
|
||||
className="j13-md-popover-input"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
applyImageUrl();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<div className="j13-md-popover-footer">
|
||||
<button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
|
||||
取消
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={applyImageUrl}>
|
||||
插入
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Sep />
|
||||
<div className="j13-md-popover-anchor relative">
|
||||
<ToolBtn
|
||||
label="隐藏内容"
|
||||
icon={<Lock size={15} />}
|
||||
active={popover === "hide"}
|
||||
onClick={() => openPopover("hide")}
|
||||
/>
|
||||
{popover === "hide" && (
|
||||
<div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入隐藏内容">
|
||||
{hideStep === "menu" ? (
|
||||
<>
|
||||
<button type="button" className="j13-md-menu-item" onClick={() => insertHide("login")}>
|
||||
登录可见
|
||||
</button>
|
||||
<button type="button" className="j13-md-menu-item" onClick={() => insertHide("reply")}>
|
||||
回复可见
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="j13-md-menu-item"
|
||||
onClick={() => setHideStep("points")}
|
||||
>
|
||||
积分可见…
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<label className="j13-md-field">
|
||||
<span>所需积分</span>
|
||||
<input
|
||||
autoFocus
|
||||
type="number"
|
||||
min={1}
|
||||
max={100000}
|
||||
value={hidePoints}
|
||||
onChange={(e) => setHidePoints(Number(e.target.value) || 1)}
|
||||
className="j13-md-popover-input"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
if (hidePoints >= 1 && hidePoints <= 100000) {
|
||||
insertHide("points", hidePoints);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<div className="j13-md-popover-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
onClick={() => setHideStep("menu")}
|
||||
>
|
||||
返回
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => {
|
||||
if (hidePoints < 1 || hidePoints > 100000) {
|
||||
toast("积分须在 1–100000", "error");
|
||||
return;
|
||||
}
|
||||
insertHide("points", hidePoints);
|
||||
}}
|
||||
>
|
||||
插入
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div className="j13-md-mode" role="tablist" aria-label="编辑模式">
|
||||
@@ -281,26 +813,46 @@ export default function MarkdownEditor({
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImagePick(e.target.files?.[0] ?? null)}
|
||||
onChange={(e) => void uploadImageFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
|
||||
{mode === "write" ? (
|
||||
<textarea
|
||||
ref={taRef}
|
||||
id={id}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
rows={rows}
|
||||
placeholder={placeholder}
|
||||
className="j13-md-textarea"
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
onSubmitShortcut?.();
|
||||
}
|
||||
<div
|
||||
className={`j13-md-write-wrap${dragOver ? " is-dragover" : ""}`}
|
||||
onDragEnter={(e) => {
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer.types.includes("Files")) setDragOver(true);
|
||||
}}
|
||||
/>
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDragLeave={(e) => {
|
||||
if (e.currentTarget === e.target) setDragOver(false);
|
||||
}}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
const file = e.dataTransfer.files?.[0];
|
||||
if (file) void uploadImageFile(file);
|
||||
}}
|
||||
>
|
||||
{dragOver && (
|
||||
<div className="j13-md-drop-mask" aria-hidden>
|
||||
放开以上传图片
|
||||
</div>
|
||||
)}
|
||||
<textarea
|
||||
ref={taRef}
|
||||
id={id}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
rows={rows}
|
||||
placeholder={placeholder}
|
||||
className="j13-md-textarea"
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
onKeyDown={onTextareaKeyDown}
|
||||
onPaste={(e) => void onPaste(e)}
|
||||
onSelect={rememberSel}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="j13-md-preview">
|
||||
{value.trim() ? (
|
||||
@@ -312,7 +864,7 @@ export default function MarkdownEditor({
|
||||
)}
|
||||
|
||||
<div className="j13-md-foot">
|
||||
<span>Markdown · Ctrl/⌘ + Enter 提交</span>
|
||||
<span>支持粘贴/拖拽图片 · Markdown · Ctrl/⌘ + Enter 提交</span>
|
||||
<span className="tabular-nums">{value.length} 字</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user