freefire
1d862a0dd3
- 新增媒体库：media_library/media_thumbs 服务（WebP 缩略图）、管理端 media 页面 - 移动端底部导航 MobileTabBar 替换 MobilePostBar - 旧数据导入增强与测试、路由与登录会话/板块侧边栏测试补强 - site-doc 组件精简（移除 Breadcrumb），文档新增迁移公告说明
1381 lines
49 KiB
TypeScript
1381 lines
49 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
useRef,
|
||
useState,
|
||
useCallback,
|
||
useEffect,
|
||
useDeferredValue,
|
||
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,
|
||
History,
|
||
Ellipsis,
|
||
} from "lucide-react";
|
||
import { apiSearchPosts, apiUploadPostImage, type PostListItem } from "@/lib/api";
|
||
import { toast } from "@/lib/toast";
|
||
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
|
||
import ImageInsertModal from "@/components/ImageInsertModal";
|
||
import TimelineEditor from "@/components/TimelineEditor";
|
||
import { resolveTimelineBlockForEdit } from "@/lib/directiveBlocks";
|
||
import { SHIKI_LANG_IDS } from "@/components/markdown/shikiHighlighter";
|
||
|
||
type MarkdownEditorProps = {
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
placeholder?: string;
|
||
rows?: number;
|
||
disabled?: boolean;
|
||
onSubmitShortcut?: () => void;
|
||
id?: string;
|
||
/** 挂载后聚焦 textarea（回复/编辑评论等） */
|
||
autoFocus?: boolean;
|
||
/** 正文插图体积上限（MB），缺省 5 */
|
||
imageMaxMB?: number;
|
||
/** 是否提供隐藏可见（[hide]） */
|
||
allowHide?: boolean;
|
||
/**
|
||
* 是否允许「回复可见」。
|
||
* 仅当 allowHide 为 true 时生效；不可评论的内容（如公告）应传 false，菜单项置灰。
|
||
*/
|
||
allowReplyHide?: boolean;
|
||
/** default=发帖完整工具栏；comment=评论紧凑栏，低频工具进「更多」 */
|
||
density?: "default" | "comment";
|
||
/** 输入框可访问名称（占位文案不能代替） */
|
||
ariaLabel?: string;
|
||
/** 底栏左侧提示；缺省按模式生成 */
|
||
hint?: string;
|
||
/** 评论模式快捷键文案，例如「发表」「回复」「保存」 */
|
||
shortcutName?: string;
|
||
/** 底栏右侧操作（发表 / 保存），纳入编辑器边框内 */
|
||
footer?: ReactNode;
|
||
/** 正文字符数上限；设置后计数器显示「已输入 / 上限」并限制输入 */
|
||
maxChars?: number;
|
||
/** 提交失败等原因，显示在编辑器内 */
|
||
error?: string;
|
||
onUploadingChange?: (uploading: boolean) => void;
|
||
};
|
||
|
||
type EditorMode = "write" | "preview";
|
||
|
||
type WrapOpts = {
|
||
before: string;
|
||
after?: string;
|
||
placeholder?: string;
|
||
linePrefix?: string;
|
||
};
|
||
|
||
type PopoverKind = "link" | "code" | "hide" | "heading" | "more" | null;
|
||
|
||
const CODE_LANGS = ["plaintext", "aardio", ...SHIKI_LANG_IDS.filter((l) => l !== "plaintext")] as const;
|
||
|
||
function applyWrap(
|
||
el: HTMLTextAreaElement,
|
||
value: string,
|
||
opts: WrapOpts
|
||
): { next: string; selStart: number; selEnd: number } {
|
||
const start = el.selectionStart;
|
||
const end = el.selectionEnd;
|
||
const selected = value.slice(start, end);
|
||
const after = opts.after ?? "";
|
||
|
||
if (opts.linePrefix) {
|
||
const block = selected || opts.placeholder || "列表项";
|
||
const lines = block.split("\n").map((l) =>
|
||
l.startsWith(opts.linePrefix!) ? l : `${opts.linePrefix}${l}`
|
||
);
|
||
const inserted = lines.join("\n");
|
||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||
return { next, selStart: start, selEnd: start + inserted.length };
|
||
}
|
||
|
||
const inner = selected || opts.placeholder || "";
|
||
const inserted = opts.before + inner + after;
|
||
const next = value.slice(0, start) + inserted + value.slice(end);
|
||
const selStart = start + opts.before.length;
|
||
const selEnd = selStart + inner.length;
|
||
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;
|
||
}
|
||
}
|
||
|
||
/** 链接弹窗允许的目标：http(s) 完整链接，或站内相对路径（如 /post/123） */
|
||
function isLinkTargetUrl(raw: string): boolean {
|
||
const u = raw.trim();
|
||
if (!u) return false;
|
||
if (isHttpUrl(u)) return true;
|
||
return u.startsWith("/") && !u.startsWith("//");
|
||
}
|
||
|
||
export default function MarkdownEditor({
|
||
value,
|
||
onChange,
|
||
placeholder,
|
||
rows = 16,
|
||
disabled,
|
||
onSubmitShortcut,
|
||
id,
|
||
autoFocus = false,
|
||
imageMaxMB = 5,
|
||
allowHide = false,
|
||
allowReplyHide = true,
|
||
density = "default",
|
||
ariaLabel,
|
||
hint,
|
||
shortcutName,
|
||
footer,
|
||
maxChars,
|
||
error,
|
||
onUploadingChange,
|
||
}: MarkdownEditorProps) {
|
||
const taRef = useRef<HTMLTextAreaElement>(null);
|
||
const fileRef = useRef<HTMLInputElement>(null);
|
||
const toolbarRef = useRef<HTMLDivElement>(null);
|
||
const [mode, setMode] = useState<EditorMode>("write");
|
||
const deferredValue = useDeferredValue(value);
|
||
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 [postQuery, setPostQuery] = useState("");
|
||
const [postResults, setPostResults] = useState<PostListItem[]>([]);
|
||
const [postLoading, setPostLoading] = useState(false);
|
||
const [linkAdvanced, setLinkAdvanced] = useState(false);
|
||
const [imageModalOpen, setImageModalOpen] = useState(false);
|
||
const [codeQuery, setCodeQuery] = useState("");
|
||
const [hidePoints, setHidePoints] = useState(10);
|
||
const [hidePassword, setHidePassword] = useState("");
|
||
const [hideStep, setHideStep] = useState<"menu" | "points" | "password">("menu");
|
||
const [toolNarrow, setToolNarrow] = useState(false);
|
||
const [uploadError, setUploadError] = useState("");
|
||
const [modKey, setModKey] = useState("Ctrl");
|
||
const retryFile = useRef<File | null>(null);
|
||
const moreBtnRef = useRef<HTMLButtonElement>(null);
|
||
const [timelineOpen, setTimelineOpen] = useState(false);
|
||
const [timelineBody, setTimelineBody] = useState("");
|
||
const [timelineRange, setTimelineRange] = useState<{ start: number; end: number } | null>(
|
||
null
|
||
);
|
||
const savedSel = useRef<{ start: number; end: number } | null>(null);
|
||
const fullscreenMounted = useRef(false);
|
||
const modeMounted = useRef(false);
|
||
const isComment = density === "comment";
|
||
|
||
useEffect(() => {
|
||
const ua = navigator.userAgent || "";
|
||
const platform = navigator.platform || "";
|
||
if (/Mac|iPhone|iPad|iPod/i.test(platform) || /Mac OS|iPhone|iPad/i.test(ua)) {
|
||
setModKey("⌘");
|
||
}
|
||
}, []);
|
||
|
||
const onUploadingChangeRef = useRef(onUploadingChange);
|
||
onUploadingChangeRef.current = onUploadingChange;
|
||
useEffect(() => {
|
||
onUploadingChangeRef.current?.(uploading);
|
||
}, [uploading]);
|
||
|
||
useEffect(() => {
|
||
if (!isComment) return;
|
||
const el = toolbarRef.current;
|
||
if (!el) return;
|
||
const apply = () => setToolNarrow(el.clientWidth < 520);
|
||
apply();
|
||
const ro = new ResizeObserver(apply);
|
||
ro.observe(el);
|
||
return () => ro.disconnect();
|
||
}, [isComment]);
|
||
|
||
useEffect(() => {
|
||
if (!isComment) return;
|
||
const el = taRef.current;
|
||
if (!el) return;
|
||
if (fullscreen || mode !== "write") {
|
||
el.style.height = "";
|
||
return;
|
||
}
|
||
const prev = el.scrollTop;
|
||
el.style.height = "auto";
|
||
const next = Math.min(Math.max(el.scrollHeight, 96), 320);
|
||
el.style.height = `${next}px`;
|
||
el.scrollTop = prev;
|
||
}, [value, isComment, fullscreen, mode]);
|
||
|
||
const rememberCaret = () => {
|
||
const el = taRef.current;
|
||
if (!el) return;
|
||
savedSel.current = { start: el.selectionStart, end: el.selectionEnd };
|
||
};
|
||
|
||
const toggleFullscreen = () => {
|
||
rememberCaret();
|
||
setFullscreen((v) => !v);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!fullscreenMounted.current) {
|
||
fullscreenMounted.current = true;
|
||
return;
|
||
}
|
||
if (mode !== "write") return;
|
||
const sel = savedSel.current;
|
||
const el = taRef.current;
|
||
if (!el || !sel) return;
|
||
// 进出全屏后把焦点和光标放回退出前的位置
|
||
const frame = requestAnimationFrame(() => {
|
||
el.focus();
|
||
const max = el.value.length;
|
||
el.setSelectionRange(Math.min(sel.start, max), Math.min(sel.end, max));
|
||
});
|
||
return () => cancelAnimationFrame(frame);
|
||
}, [fullscreen]);
|
||
|
||
useEffect(() => {
|
||
if (!modeMounted.current) {
|
||
modeMounted.current = true;
|
||
return;
|
||
}
|
||
if (mode !== "write") return;
|
||
const sel = savedSel.current;
|
||
const el = taRef.current;
|
||
if (!el || !sel) return;
|
||
const frame = requestAnimationFrame(() => {
|
||
el.focus();
|
||
const max = el.value.length;
|
||
el.setSelectionRange(Math.min(sel.start, max), Math.min(sel.end, max));
|
||
});
|
||
return () => cancelAnimationFrame(frame);
|
||
}, [mode]);
|
||
|
||
useEffect(() => {
|
||
if (!fullscreen) return;
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key === "Escape") {
|
||
e.preventDefault();
|
||
// 插图弹窗自管 ESC，不连退全屏
|
||
if (imageModalOpen) return;
|
||
if (popover) setPopover(null);
|
||
else {
|
||
rememberCaret();
|
||
setFullscreen(false);
|
||
}
|
||
}
|
||
};
|
||
const prev = document.body.style.overflow;
|
||
document.body.style.overflow = "hidden";
|
||
window.addEventListener("keydown", onKey);
|
||
return () => {
|
||
document.body.style.overflow = prev;
|
||
window.removeEventListener("keydown", onKey);
|
||
};
|
||
}, [fullscreen, popover, imageModalOpen]);
|
||
|
||
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") return;
|
||
e.preventDefault();
|
||
const kind = popover;
|
||
setPopover(null);
|
||
if (kind === "more") moreBtnRef.current?.focus();
|
||
};
|
||
document.addEventListener("mousedown", onDoc);
|
||
document.addEventListener("keydown", onEsc);
|
||
return () => {
|
||
document.removeEventListener("mousedown", onDoc);
|
||
document.removeEventListener("keydown", onEsc);
|
||
};
|
||
}, [popover]);
|
||
|
||
// 链接弹窗打开且展开高级选项时，搜索站内帖子（输入防抖；空关键词给最近发布）
|
||
useEffect(() => {
|
||
if (popover !== "link" || !linkAdvanced) return;
|
||
let cancelled = false;
|
||
const kw = postQuery.trim();
|
||
setPostLoading(true);
|
||
const t = setTimeout(() => {
|
||
void apiSearchPosts(kw, 8)
|
||
.then((res) => {
|
||
if (cancelled) return;
|
||
setPostResults(res.posts || []);
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setPostResults([]);
|
||
})
|
||
.finally(() => {
|
||
if (!cancelled) setPostLoading(false);
|
||
});
|
||
}, kw ? 250 : 0);
|
||
return () => {
|
||
cancelled = true;
|
||
clearTimeout(t);
|
||
};
|
||
}, [popover, postQuery, linkAdvanced]);
|
||
|
||
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) => {
|
||
const el = taRef.current;
|
||
if (!el || disabled) return;
|
||
if (document.activeElement !== el && savedSel.current) {
|
||
el.setSelectionRange(savedSel.current.start, savedSel.current.end);
|
||
}
|
||
const { next, selStart, selEnd } = applyWrap(el, value, opts);
|
||
onChange(next);
|
||
requestAnimationFrame(() => {
|
||
el.focus();
|
||
el.setSelectionRange(selStart, selEnd);
|
||
});
|
||
},
|
||
[value, onChange, disabled]
|
||
);
|
||
|
||
const insertAtCursor = useCallback(
|
||
(text: string, selectInner?: { offset: number; length: number }) => {
|
||
const el = taRef.current;
|
||
if (!el) {
|
||
onChange(value + (value.endsWith("\n") || !value ? "" : "\n") + text);
|
||
return;
|
||
}
|
||
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);
|
||
requestAnimationFrame(() => {
|
||
el.focus();
|
||
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 uploadImageFile = async (file: File | null) => {
|
||
if (!file || disabled) return;
|
||
retryFile.current = file;
|
||
setUploadError("");
|
||
if (!/^image\/(jpeg|png|webp|gif)$/i.test(file.type)) {
|
||
setUploadError("仅支持 JPEG / PNG / WebP / GIF");
|
||
toast("仅支持 JPEG / PNG / WebP / GIF", "error");
|
||
return;
|
||
}
|
||
const maxBytes = Math.max(1, imageMaxMB) * 1024 * 1024;
|
||
if (file.size > maxBytes) {
|
||
const msg = `图片不能超过 ${imageMaxMB}MB`;
|
||
setUploadError(msg);
|
||
toast(msg, "error");
|
||
return;
|
||
}
|
||
setUploading(true);
|
||
try {
|
||
const res = await apiUploadPostImage(file);
|
||
if (!res.url) {
|
||
const msg = res.error || "上传失败";
|
||
setUploadError(msg);
|
||
toast(msg, "error");
|
||
return;
|
||
}
|
||
const alt = file.name.replace(/\.[^.]+$/, "") || "图片";
|
||
insertAtCursor(``);
|
||
setMode("write");
|
||
setUploadError("");
|
||
retryFile.current = null;
|
||
setImageModalOpen(false);
|
||
toast("图片已插入", "ok");
|
||
} catch {
|
||
setUploadError("上传失败");
|
||
toast("上传失败", "error");
|
||
} finally {
|
||
setUploading(false);
|
||
if (fileRef.current) fileRef.current.value = "";
|
||
}
|
||
};
|
||
|
||
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://");
|
||
setPostQuery("");
|
||
setPostResults([]);
|
||
setLinkAdvanced(false);
|
||
}
|
||
if (kind === "code") setCodeQuery("");
|
||
if (kind === "hide") {
|
||
setHideStep("menu");
|
||
setHidePoints(10);
|
||
setHidePassword("");
|
||
}
|
||
setPopover((prev) => (prev === kind ? null : kind));
|
||
};
|
||
|
||
/** 选中站内帖子：回填 URL 与文字，用户可再编辑后点「插入」 */
|
||
const pickPostLink = (p: PostListItem) => {
|
||
setLinkUrl(`/post/${p.id}`);
|
||
setLinkText(p.title);
|
||
};
|
||
|
||
const applyLink = () => {
|
||
const url = linkUrl.trim();
|
||
if (!isLinkTargetUrl(url)) {
|
||
toast("请输入 http(s) 链接或站内路径（如 /post/123）", "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 openImageModal = () => {
|
||
rememberSel();
|
||
setImageModalOpen(true);
|
||
};
|
||
|
||
/** 链接 tab 提交：校验后在光标处插入，失败 toast 并留在弹窗 */
|
||
const insertImageUrl = (rawUrl: string, rawAlt: string) => {
|
||
const url = rawUrl.trim();
|
||
if (!isHttpUrl(url)) {
|
||
toast("请输入有效的图片 URL（http/https）", "error");
|
||
return;
|
||
}
|
||
const alt = rawAlt.trim() || "图片";
|
||
insertAtCursor(``);
|
||
setImageModalOpen(false);
|
||
};
|
||
|
||
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" | "password",
|
||
points?: number,
|
||
password?: string
|
||
) => {
|
||
if (!allowHide) return;
|
||
restoreSel();
|
||
const el = taRef.current;
|
||
const start = el?.selectionStart ?? 0;
|
||
const end = el?.selectionEnd ?? 0;
|
||
const selected = value.slice(start, end);
|
||
const body = selected || "在此填写隐藏内容";
|
||
let open = `[hide ${kind}]`;
|
||
if (kind === "points") {
|
||
open = `[hide points=${points || 10}]`;
|
||
} else if (kind === "password") {
|
||
open = `[hide password=${password || "password"}]`;
|
||
}
|
||
const block = `${open}\n${body}\n[/hide]`;
|
||
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 openTimelineEditor = () => {
|
||
rememberSel();
|
||
const el = taRef.current;
|
||
const cursor = el?.selectionStart ?? savedSel.current?.start ?? 0;
|
||
const found = resolveTimelineBlockForEdit(value, cursor);
|
||
if (found) {
|
||
setTimelineBody(found.body);
|
||
setTimelineRange({ start: found.start, end: found.end });
|
||
} else {
|
||
setTimelineBody("");
|
||
setTimelineRange(null);
|
||
}
|
||
setPopover(null);
|
||
setTimelineOpen(true);
|
||
};
|
||
|
||
const applyTimelineBlock = (block: string) => {
|
||
const el = taRef.current;
|
||
if (timelineRange) {
|
||
const next = value.slice(0, timelineRange.start) + block + value.slice(timelineRange.end);
|
||
onChange(next);
|
||
requestAnimationFrame(() => {
|
||
if (!el) return;
|
||
el.focus();
|
||
const pos = timelineRange.start + block.length;
|
||
el.setSelectionRange(pos, pos);
|
||
});
|
||
return;
|
||
}
|
||
restoreSel();
|
||
const start = el?.selectionStart ?? 0;
|
||
const end = el?.selectionEnd ?? start;
|
||
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 pos = start + inserted.length;
|
||
el.setSelectionRange(pos, pos);
|
||
});
|
||
};
|
||
|
||
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") {
|
||
// 输入法组字期间的 Enter 不是提交
|
||
if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;
|
||
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;
|
||
active?: boolean;
|
||
disabled?: boolean;
|
||
}) => (
|
||
<button
|
||
type="button"
|
||
className={`j13-md-tool${active ? " is-active" : ""}`}
|
||
data-tip={label}
|
||
aria-label={label}
|
||
disabled={disabled || dis}
|
||
onMouseDown={(e) => {
|
||
e.preventDefault();
|
||
rememberCaret();
|
||
}}
|
||
onClick={onClick}
|
||
>
|
||
{icon}
|
||
</button>
|
||
);
|
||
|
||
const Sep = () => <span className="j13-md-sep" aria-hidden />;
|
||
|
||
return (
|
||
<div className={`j13-md-editor${fullscreen ? " is-fullscreen" : ""}${isComment ? " is-comment" : ""}`}>
|
||
<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: "粗体" })}
|
||
/>
|
||
{!isComment && (
|
||
<ToolBtn
|
||
label="斜体 Ctrl+I"
|
||
icon={<Italic size={15} />}
|
||
onClick={() => runWrap({ before: "*", after: "*", placeholder: "斜体" })}
|
||
/>
|
||
)}
|
||
{!isComment && (
|
||
<ToolBtn
|
||
label="删除线"
|
||
icon={<Strikethrough size={15} />}
|
||
onClick={() => runWrap({ before: "~~", after: "~~", placeholder: "删除线" })}
|
||
/>
|
||
)}
|
||
{!isComment && <Sep />}
|
||
{!isComment && (
|
||
<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"
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onClick={() => {
|
||
runWrap({ before: "## ", after: "", placeholder: "二级标题" });
|
||
setPopover(null);
|
||
}}
|
||
>
|
||
<Heading2 size={14} /> 二级标题
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onClick={() => {
|
||
runWrap({ before: "### ", after: "", placeholder: "三级标题" });
|
||
setPopover(null);
|
||
}}
|
||
>
|
||
<Heading3 size={14} /> 三级标题
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
{(!isComment || !toolNarrow) && <Sep />}
|
||
{(!isComment || !toolNarrow) && (
|
||
<ToolBtn
|
||
label="引用"
|
||
icon={<Quote size={15} />}
|
||
onClick={() =>
|
||
runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" })
|
||
}
|
||
/>
|
||
)}
|
||
{(!isComment || !toolNarrow) && (
|
||
<ToolBtn
|
||
label="无序列表"
|
||
icon={<List size={15} />}
|
||
onClick={() =>
|
||
runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" })
|
||
}
|
||
/>
|
||
)}
|
||
{!isComment && (
|
||
<ToolBtn
|
||
label="有序列表"
|
||
icon={<ListOrdered size={15} />}
|
||
onClick={insertOrderedList}
|
||
/>
|
||
)}
|
||
{!isComment && <ToolBtn label="表格" icon={<Table size={15} />} onClick={insertTable} />}
|
||
{!isComment && (
|
||
<ToolBtn
|
||
label="分割线"
|
||
icon={<Minus size={15} />}
|
||
onClick={() => insertAtCursor("---")}
|
||
/>
|
||
)}
|
||
<Sep />
|
||
<ToolBtn
|
||
label="行内代码"
|
||
icon={<Code size={15} />}
|
||
onClick={() => runWrap({ before: "`", after: "`", placeholder: "code" })}
|
||
/>
|
||
{(!isComment || !toolNarrow) && (
|
||
<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"
|
||
placeholder="https://… 或 /post/123"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
applyLink();
|
||
}
|
||
}}
|
||
/>
|
||
</label>
|
||
<button
|
||
type="button"
|
||
className="j13-md-adv-toggle"
|
||
aria-expanded={linkAdvanced}
|
||
onClick={() => setLinkAdvanced((v) => !v)}
|
||
>
|
||
高级选项
|
||
<ChevronDown
|
||
size={12}
|
||
className={`transition-transform${linkAdvanced ? " rotate-180" : ""}`}
|
||
/>
|
||
</button>
|
||
{linkAdvanced && (
|
||
<div className="j13-md-link-search">
|
||
<input
|
||
className="j13-md-popover-input"
|
||
placeholder="搜索帖子…"
|
||
value={postQuery}
|
||
onChange={(e) => setPostQuery(e.target.value)}
|
||
/>
|
||
<div className="j13-md-popover-list">
|
||
{postLoading ? (
|
||
<p className="meta px-2 py-3 text-center">搜索中…</p>
|
||
) : postResults.length === 0 ? (
|
||
<p className="meta px-2 py-3 text-center">
|
||
{postQuery.trim() ? "无匹配帖子" : "暂无最近帖子"}
|
||
</p>
|
||
) : (
|
||
postResults.map((p) => (
|
||
<button
|
||
key={p.id}
|
||
type="button"
|
||
className="j13-md-post-row"
|
||
data-tip={p.title}
|
||
onClick={() => pickPostLink(p)}
|
||
>
|
||
<span className="truncate flex-1">{p.title}</span>
|
||
<span className="j13-md-post-tag">帖子</span>
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<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={imageModalOpen}
|
||
disabled={uploading}
|
||
onClick={openImageModal}
|
||
/>
|
||
</div>
|
||
{isComment && (
|
||
<div className="j13-md-popover-anchor relative">
|
||
<button
|
||
ref={moreBtnRef}
|
||
type="button"
|
||
className={`j13-md-tool${popover === "more" || (toolNarrow && popover === "code") ? " is-active" : ""}`}
|
||
data-tip="更多工具"
|
||
aria-label="更多工具"
|
||
aria-haspopup="menu"
|
||
aria-expanded={popover === "more"}
|
||
disabled={disabled}
|
||
onMouseDown={(e) => {
|
||
e.preventDefault();
|
||
rememberCaret();
|
||
}}
|
||
onClick={() => openPopover("more")}
|
||
>
|
||
<Ellipsis size={15} />
|
||
</button>
|
||
{popover === "more" && (
|
||
<div className="j13-md-popover" role="menu" aria-label="更多工具">
|
||
{toolNarrow && (
|
||
<>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" }); setPopover(null); }}>引用</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" }); setPopover(null); }}>无序列表</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("code")}>代码块</button>
|
||
</>
|
||
)}
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "*", after: "*", placeholder: "斜体" }); setPopover(null); }}>斜体</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "~~", after: "~~", placeholder: "删除线" }); setPopover(null); }}>删除线</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "## ", after: "", placeholder: "二级标题" }); setPopover(null); }}>二级标题</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "### ", after: "", placeholder: "三级标题" }); setPopover(null); }}>三级标题</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertOrderedList(); setPopover(null); }}>有序列表</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertTable(); setPopover(null); }}>表格</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertAtCursor("---"); setPopover(null); }}>分隔线</button>
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { setPopover(null); openTimelineEditor(); }}>时间线</button>
|
||
{toolNarrow && (
|
||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { setPopover(null); toggleFullscreen(); }}>{fullscreen ? "退出全屏" : "全屏写作"}</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
{toolNarrow && 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>
|
||
)}
|
||
{!isComment && <Sep />}
|
||
{!isComment && (
|
||
<ToolBtn
|
||
label="时间线"
|
||
icon={<History size={15} />}
|
||
onClick={openTimelineEditor}
|
||
/>
|
||
)}
|
||
{allowHide ? (
|
||
<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"
|
||
disabled={!allowReplyHide}
|
||
data-tip={allowReplyHide ? undefined : "当前内容不可评论，无法使用回复可见"}
|
||
aria-disabled={!allowReplyHide}
|
||
onClick={() => {
|
||
if (!allowReplyHide) return;
|
||
insertHide("reply");
|
||
}}
|
||
>
|
||
回复可见
|
||
{!allowReplyHide ? (
|
||
<span className="j13-md-menu-item-hint">不可用</span>
|
||
) : null}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="j13-md-menu-item"
|
||
onClick={() => setHideStep("points")}
|
||
>
|
||
积分可见…
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="j13-md-menu-item"
|
||
onClick={() => setHideStep("password")}
|
||
>
|
||
密码可见…
|
||
</button>
|
||
</>
|
||
) : hideStep === "points" ? (
|
||
<>
|
||
<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>
|
||
</>
|
||
) : (
|
||
<>
|
||
<label className="j13-md-field">
|
||
<span>查看密码（不含空格，1–64 字）</span>
|
||
<input
|
||
autoFocus
|
||
type="text"
|
||
value={hidePassword}
|
||
maxLength={64}
|
||
placeholder="例如：secret"
|
||
onChange={(e) => setHidePassword(e.target.value)}
|
||
className="j13-md-popover-input"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
const p = hidePassword.trim();
|
||
if (p && !/\s/.test(p)) {
|
||
insertHide("password", undefined, p);
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</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={() => {
|
||
const p = hidePassword.trim();
|
||
if (!p || /\s/.test(p) || p.length > 64) {
|
||
toast("密码须为 1–64 字符且不含空格", "error");
|
||
return;
|
||
}
|
||
insertHide("password", undefined, p);
|
||
}}
|
||
>
|
||
插入
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className="flex items-center gap-2 shrink-0">
|
||
<div className="j13-md-mode" role="tablist" aria-label="编辑模式">
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={mode === "write"}
|
||
className={mode === "write" ? "is-on" : ""}
|
||
onMouseDown={(e) => {
|
||
e.preventDefault();
|
||
rememberCaret();
|
||
}}
|
||
onClick={() => setMode("write")}
|
||
>
|
||
<Pencil size={12} /> 编写
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={mode === "preview"}
|
||
className={mode === "preview" ? "is-on" : ""}
|
||
onMouseDown={(e) => {
|
||
e.preventDefault();
|
||
rememberCaret();
|
||
}}
|
||
onClick={() => setMode("preview")}
|
||
>
|
||
<Eye size={12} /> 预览
|
||
</button>
|
||
</div>
|
||
{(!isComment || !toolNarrow) && (
|
||
<button
|
||
type="button"
|
||
className="j13-md-tool"
|
||
data-tip={fullscreen ? "退出全屏 (Esc)" : "全屏写作"}
|
||
aria-label={fullscreen ? "退出全屏" : "全屏写作"}
|
||
onMouseDown={(e) => {
|
||
e.preventDefault();
|
||
rememberCaret();
|
||
}}
|
||
onClick={toggleFullscreen}
|
||
>
|
||
{fullscreen ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<input
|
||
ref={fileRef}
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||
className="hidden"
|
||
onChange={(e) => void uploadImageFile(e.target.files?.[0] ?? null)}
|
||
/>
|
||
|
||
<div className={`j13-md-panes is-${mode}`}>
|
||
<div
|
||
className={`j13-md-write-wrap${dragOver ? " is-dragover" : ""}`}
|
||
hidden={mode === "preview"}
|
||
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={isComment ? 3 : rows}
|
||
maxLength={maxChars}
|
||
placeholder={placeholder}
|
||
aria-label={ariaLabel || placeholder || "正文"}
|
||
className="j13-md-textarea"
|
||
autoFocus={autoFocus}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
onKeyDown={onTextareaKeyDown}
|
||
onPaste={(e) => void onPaste(e)}
|
||
onSelect={rememberSel}
|
||
onBlur={rememberCaret}
|
||
/>
|
||
</div>
|
||
<div className="j13-md-preview" hidden={mode === "write"}>
|
||
<div className="j13-md-preview-label meta" aria-hidden>
|
||
预览
|
||
</div>
|
||
{deferredValue.trim() ? (
|
||
<MarkdownBodyClient content={deferredValue} />
|
||
) : (
|
||
<p className="meta text-center py-16">暂无内容可预览</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="j13-md-foot">
|
||
<span className="j13-md-foot-hint">
|
||
{hint ??
|
||
(isComment
|
||
? `支持 Markdown · ${modKey}+Enter ${shortcutName || "发表"}`
|
||
: "支持粘贴/拖拽图片 · Markdown · Ctrl/⌘ + Enter 提交")}
|
||
</span>
|
||
<span className="j13-md-foot-actions">
|
||
<span className="j13-md-count tabular-nums">
|
||
{maxChars != null ? `${value.length} / ${maxChars}` : `${value.length} 字`}
|
||
</span>
|
||
{footer}
|
||
</span>
|
||
</div>
|
||
{(uploading || uploadError) && (
|
||
<p className="j13-md-upload" role={uploadError ? "alert" : "status"}>
|
||
{uploading ? "图片上传中…" : uploadError}
|
||
{uploadError && !uploading ? (
|
||
<>
|
||
<button type="button" onClick={() => void uploadImageFile(retryFile.current)}>
|
||
重试
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setUploadError("");
|
||
retryFile.current = null;
|
||
}}
|
||
>
|
||
关闭
|
||
</button>
|
||
</>
|
||
) : null}
|
||
</p>
|
||
)}
|
||
{error ? (
|
||
<p className="j13-md-error" role="alert">
|
||
{error}
|
||
</p>
|
||
) : null}
|
||
|
||
<TimelineEditor
|
||
open={timelineOpen}
|
||
initialBody={timelineBody}
|
||
onClose={() => {
|
||
setTimelineOpen(false);
|
||
setTimelineRange(null);
|
||
setTimelineBody("");
|
||
}}
|
||
onInsert={applyTimelineBlock}
|
||
/>
|
||
|
||
<ImageInsertModal
|
||
open={imageModalOpen}
|
||
onClose={() => setImageModalOpen(false)}
|
||
uploading={uploading}
|
||
uploadError={uploadError}
|
||
onChooseFile={() => fileRef.current?.click()}
|
||
onDropFile={(file) => void uploadImageFile(file)}
|
||
onInsertUrl={insertImageUrl}
|
||
onPickMedia={(item) => insertAtCursor(``)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|