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>
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { NodeViewWrapper } from "@tiptap/react";
|
|
import type { NodeViewProps } from "@tiptap/react";
|
|
import { useIssueStore } from "@/features/issues/store";
|
|
import { StatusIcon } from "@/features/issues/components/status-icon";
|
|
|
|
export function MentionView({ node }: NodeViewProps) {
|
|
const { type, id, label } = node.attrs;
|
|
|
|
if (type === "issue") {
|
|
return (
|
|
<NodeViewWrapper as="span" className="inline">
|
|
<IssueMention issueId={id} fallbackLabel={label} />
|
|
</NodeViewWrapper>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<NodeViewWrapper as="span" className="inline">
|
|
<span className="mention">@{label ?? id}</span>
|
|
</NodeViewWrapper>
|
|
);
|
|
}
|
|
|
|
function IssueMention({
|
|
issueId,
|
|
fallbackLabel,
|
|
}: {
|
|
issueId: string;
|
|
fallbackLabel?: string;
|
|
}) {
|
|
const issue = useIssueStore((s) => s.issues.find((i) => i.id === issueId));
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
window.open(`/issues/${issueId}`, "_blank", "noopener,noreferrer");
|
|
};
|
|
|
|
if (!issue) {
|
|
return (
|
|
<a
|
|
href={`/issues/${issueId}`}
|
|
onClick={handleClick}
|
|
className="issue-mention text-primary font-medium cursor-pointer hover:underline"
|
|
>
|
|
{fallbackLabel ?? issueId.slice(0, 8)}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={`/issues/${issueId}`}
|
|
onClick={handleClick}
|
|
className="issue-mention inline-flex items-center align-middle gap-1.5 rounded-md border px-2 py-0.5 text-sm hover:bg-accent transition-colors cursor-pointer"
|
|
>
|
|
<StatusIcon status={issue.status} className="h-3.5 w-3.5" />
|
|
<span className="font-medium text-muted-foreground">{issue.identifier}</span>
|
|
<span className="text-foreground">{issue.title}</span>
|
|
</a>
|
|
);
|
|
}
|