279 lines
8.3 KiB
TypeScript
279 lines
8.3 KiB
TypeScript
import type { Editor } from "@tiptap/react";
|
|
import {
|
|
Bold,
|
|
Italic,
|
|
Underline,
|
|
Strikethrough,
|
|
Heading1,
|
|
Heading2,
|
|
Heading3,
|
|
List,
|
|
ListOrdered,
|
|
Quote,
|
|
Code,
|
|
Pilcrow,
|
|
Download,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { cn } from "@/lib/utils";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { CanvasModelSelector } from "../selectors/CanvasModelSelector";
|
|
import { downloadAIWritingDocx } from "../../api/writing-export";
|
|
|
|
interface ToolbarButtonProps {
|
|
onClick: () => void;
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
tooltip: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function ToolbarButton({ onClick, active, disabled, tooltip, children }: ToolbarButtonProps) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault(); // prevent editor losing focus
|
|
onClick();
|
|
}}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"inline-flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors",
|
|
"hover:bg-accent hover:text-accent-foreground",
|
|
"disabled:pointer-events-none disabled:opacity-40",
|
|
active && "bg-accent text-accent-foreground font-semibold",
|
|
)}
|
|
>
|
|
{children}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="text-xs">
|
|
{tooltip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
interface WritingToolbarProps {
|
|
editor: Editor | null;
|
|
/** 文档源（markdown），用于导出 Word；空字符串时下载按钮禁用 */
|
|
markdown?: string;
|
|
/** 文档标题，用作 .docx 文件名与封面 */
|
|
title?: string;
|
|
/** 历史回看等场景：仅保留导出，隐藏格式工具 */
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
export function WritingToolbar({ editor, markdown, title, readOnly = false }: WritingToolbarProps) {
|
|
const [exporting, setExporting] = useState(false);
|
|
|
|
if (!editor) return null;
|
|
|
|
const canExport = !exporting && !!markdown?.trim();
|
|
|
|
const handleExport = async () => {
|
|
if (!canExport) return;
|
|
setExporting(true);
|
|
try {
|
|
await downloadAIWritingDocx({
|
|
title,
|
|
draftMarkdown: markdown ?? "",
|
|
});
|
|
} catch (err) {
|
|
console.error("[writing-export] failed", err);
|
|
toast.error("导出 Word 失败,请稍后重试");
|
|
} finally {
|
|
setExporting(false);
|
|
}
|
|
};
|
|
|
|
if (readOnly) {
|
|
return (
|
|
<div className="flex items-center gap-2 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0">
|
|
<span className="text-xs text-muted-foreground">历史文稿（只读）</span>
|
|
<div className="ml-auto flex items-center gap-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
void handleExport();
|
|
}}
|
|
disabled={!canExport}
|
|
className={cn(
|
|
"inline-flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors",
|
|
"hover:bg-accent hover:text-accent-foreground",
|
|
"disabled:pointer-events-none disabled:opacity-40",
|
|
)}
|
|
>
|
|
{exporting ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<Download className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="text-xs">
|
|
导出 Word
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-0.5 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0 flex-wrap">
|
|
{/* Block type */}
|
|
<ToolbarButton
|
|
tooltip="正文"
|
|
active={editor.isActive("paragraph")}
|
|
onClick={() => editor.chain().focus().setParagraph().run()}
|
|
>
|
|
<Pilcrow className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="一级标题"
|
|
active={editor.isActive("heading", { level: 1 })}
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
|
>
|
|
<Heading1 className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="二级标题"
|
|
active={editor.isActive("heading", { level: 2 })}
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
|
>
|
|
<Heading2 className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="三级标题"
|
|
active={editor.isActive("heading", { level: 3 })}
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
|
>
|
|
<Heading3 className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-4" />
|
|
|
|
{/* Lists */}
|
|
<ToolbarButton
|
|
tooltip="无序列表"
|
|
active={editor.isActive("bulletList")}
|
|
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
|
>
|
|
<List className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="有序列表"
|
|
active={editor.isActive("orderedList")}
|
|
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
|
>
|
|
<ListOrdered className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-4" />
|
|
|
|
{/* Blocks */}
|
|
<ToolbarButton
|
|
tooltip="引用"
|
|
active={editor.isActive("blockquote")}
|
|
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
|
>
|
|
<Quote className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="代码块"
|
|
active={editor.isActive("codeBlock")}
|
|
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
|
>
|
|
<Code className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-4" />
|
|
|
|
{/* Inline marks */}
|
|
<ToolbarButton
|
|
tooltip="加粗 (Ctrl+B)"
|
|
active={editor.isActive("bold")}
|
|
onClick={() => editor.chain().focus().toggleBold().run()}
|
|
>
|
|
<Bold className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="斜体 (Ctrl+I)"
|
|
active={editor.isActive("italic")}
|
|
onClick={() => editor.chain().focus().toggleItalic().run()}
|
|
>
|
|
<Italic className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="下划线 (Ctrl+U)"
|
|
active={editor.isActive("underline")}
|
|
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
|
>
|
|
<Underline className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarButton
|
|
tooltip="删除线"
|
|
active={editor.isActive("strike")}
|
|
onClick={() => editor.chain().focus().toggleStrike().run()}
|
|
>
|
|
<Strikethrough className="h-3.5 w-3.5" />
|
|
</ToolbarButton>
|
|
|
|
{/* Right side: export + model selector */}
|
|
<div className="ml-auto flex items-center gap-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
handleExport();
|
|
}}
|
|
disabled={!canExport}
|
|
className={cn(
|
|
"inline-flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors",
|
|
"hover:bg-accent hover:text-accent-foreground",
|
|
"disabled:pointer-events-none disabled:opacity-40",
|
|
)}
|
|
>
|
|
{exporting ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<Download className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="text-xs">
|
|
导出 Word
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Separator orientation="vertical" className="mx-0.5 h-4" />
|
|
|
|
<CanvasModelSelector />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|