27e58d91af
Replace three divergent data paths (Marked HTML loading, regex post-processing saving, separate paste parsing) with one symmetric path through @tiptap/markdown. Key changes: - Create features/editor/ module with ContentEditor (unified edit+readonly) and TitleEditor, replacing components/common/ editor files - Load content via contentType: 'markdown' instead of markdownToHtml() hack - Save content via editor.getMarkdown() directly, no post-processing - Merge RichTextEditor + ReadonlyEditor into single ContentEditor with editable prop - Extract extensions into separate modules (mention, file-upload, markdown-paste, submit-shortcut, code-block-view) - Extract shared preprocessMentionShortcodes to components/markdown/mentions.ts - Add copyMarkdown utility for clipboard operations - Upgrade all @tiptap packages from 3.20.5 to 3.22.1 (lexer isolation fix, HTML entity roundtrip fix, table alignment support) - Delete markdownToHtml.ts, readonly-editor.tsx, and 10 old component files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
import type { RefObject } from "react";
|
|
import StarterKit from "@tiptap/starter-kit";
|
|
import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
|
|
import { common, createLowlight } from "lowlight";
|
|
import Placeholder from "@tiptap/extension-placeholder";
|
|
import Link from "@tiptap/extension-link";
|
|
import Typography from "@tiptap/extension-typography";
|
|
import Image from "@tiptap/extension-image";
|
|
import TableRow from "@tiptap/extension-table-row";
|
|
import TableHeader from "@tiptap/extension-table-header";
|
|
import TableCell from "@tiptap/extension-table-cell";
|
|
import { Table } from "@tiptap/extension-table";
|
|
import { Markdown } from "@tiptap/markdown";
|
|
import { ReactNodeViewRenderer } from "@tiptap/react";
|
|
import type { AnyExtension } from "@tiptap/core";
|
|
import type { UploadResult } from "@/shared/hooks/use-file-upload";
|
|
import { BaseMentionExtension } from "./mention-extension";
|
|
import { createMentionSuggestion } from "./mention-suggestion";
|
|
import { CodeBlockView } from "./code-block-view";
|
|
import { createMarkdownPasteExtension } from "./markdown-paste";
|
|
import { createSubmitExtension } from "./submit-shortcut";
|
|
import { createFileUploadExtension } from "./file-upload";
|
|
|
|
const lowlight = createLowlight(common);
|
|
|
|
const LinkEditable = Link.extend({ inclusive: false }).configure({
|
|
openOnClick: true,
|
|
autolink: true,
|
|
linkOnPaste: false,
|
|
HTMLAttributes: {
|
|
class: "text-primary hover:underline cursor-pointer",
|
|
},
|
|
});
|
|
|
|
const LinkReadonly = Link.configure({
|
|
openOnClick: false,
|
|
autolink: false,
|
|
HTMLAttributes: {
|
|
class: "text-primary hover:underline cursor-pointer",
|
|
},
|
|
});
|
|
|
|
const ImageExtension = Image.extend({
|
|
addAttributes() {
|
|
return {
|
|
...this.parent?.(),
|
|
uploading: {
|
|
default: false,
|
|
renderHTML: (attrs: Record<string, unknown>) =>
|
|
attrs.uploading ? { "data-uploading": "" } : {},
|
|
parseHTML: (el: HTMLElement) => el.hasAttribute("data-uploading"),
|
|
},
|
|
};
|
|
},
|
|
}).configure({
|
|
inline: false,
|
|
allowBase64: false,
|
|
HTMLAttributes: { style: "max-width: 100%; height: auto;" },
|
|
});
|
|
|
|
export interface EditorExtensionsOptions {
|
|
editable: boolean;
|
|
placeholder?: string;
|
|
onSubmitRef?: RefObject<(() => void) | undefined>;
|
|
onUploadFileRef?: RefObject<
|
|
((file: File) => Promise<UploadResult | null>) | undefined
|
|
>;
|
|
}
|
|
|
|
export function createEditorExtensions(
|
|
options: EditorExtensionsOptions,
|
|
): AnyExtension[] {
|
|
const { editable, placeholder: placeholderText } = options;
|
|
|
|
const extensions: AnyExtension[] = [
|
|
StarterKit.configure({
|
|
heading: { levels: [1, 2, 3] },
|
|
link: false,
|
|
codeBlock: false,
|
|
}),
|
|
CodeBlockLowlight.extend({
|
|
addNodeView() {
|
|
return ReactNodeViewRenderer(CodeBlockView);
|
|
},
|
|
}).configure({ lowlight }),
|
|
editable ? LinkEditable : LinkReadonly,
|
|
ImageExtension,
|
|
Table.configure({ resizable: false }),
|
|
TableRow,
|
|
TableHeader,
|
|
TableCell,
|
|
Markdown,
|
|
BaseMentionExtension.configure({
|
|
HTMLAttributes: { class: "mention" },
|
|
...(editable ? { suggestion: createMentionSuggestion() } : {}),
|
|
}),
|
|
];
|
|
|
|
if (editable) {
|
|
extensions.push(
|
|
Typography,
|
|
Placeholder.configure({ placeholder: placeholderText }),
|
|
createMarkdownPasteExtension(),
|
|
createSubmitExtension(() => options.onSubmitRef?.current?.()),
|
|
createFileUploadExtension(options.onUploadFileRef!),
|
|
);
|
|
}
|
|
|
|
return extensions;
|
|
}
|