refactor(editor): unify editor into features/editor with single markdown pipeline

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>

apps/web/features/issues/components/comment-card.tsx

@@ -30,8 +30,7 @@ import { QuickEmojiPicker } from "@/components/common/quick-emoji-picker";
 import { cn } from "@/lib/utils";
 import { useActorName } from "@/features/workspace";
 import { timeAgo } from "@/shared/utils";
-import { RichTextEditor, type RichTextEditorRef } from "@/components/common/rich-text-editor";
-import { ReadonlyEditor } from "@/components/common/readonly-editor";
+import { ContentEditor, type ContentEditorRef, copyMarkdown } from "@/features/editor";
 import { FileUploadButton } from "@/components/common/file-upload-button";
 import { useFileUpload } from "@/shared/hooks/use-file-upload";
 import { ReplyInput } from "./reply-input";
@@ -112,7 +111,7 @@ function CommentRow({
 }) {
   const { getActorName } = useActorName();
   const [editing, setEditing] = useState(false);
-  const editEditorRef = useRef<RichTextEditorRef>(null);
+  const editEditorRef = useRef<ContentEditorRef>(null);
   const cancelledRef = useRef(false);
   const { uploadWithToast } = useFileUpload();
 
@@ -186,7 +185,7 @@ function CommentRow({
             />
             <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={() => {
-                navigator.clipboard.writeText(entry.content ?? "");
+                copyMarkdown(entry.content ?? "");
                 toast.success("Copied");
               }}>
                 <Copy className="h-3.5 w-3.5" />
@@ -223,7 +222,7 @@ function CommentRow({
           onKeyDown={(e) => { if (e.key === "Escape") cancelEdit(); }}
         >
           <div className="max-h-48 overflow-y-auto text-sm leading-relaxed">
-            <RichTextEditor
+            <ContentEditor
               ref={editEditorRef}
               defaultValue={entry.content ?? ""}
               placeholder="Edit comment..."
@@ -246,7 +245,7 @@ function CommentRow({
       ) : (
         <>
           <div className="mt-1.5 pl-8 text-sm leading-relaxed text-foreground/85">
-            <ReadonlyEditor content={entry.content ?? ""} />
+            <ContentEditor defaultValue={entry.content ?? ""} editable={false} />
           </div>
           {!isTemp && (
             <ReactionBar
@@ -282,7 +281,7 @@ function CommentCard({
   const { uploadWithToast } = useFileUpload();
   const [open, setOpen] = useState(true);
   const [editing, setEditing] = useState(false);
-  const editEditorRef = useRef<RichTextEditorRef>(null);
+  const editEditorRef = useRef<ContentEditorRef>(null);
   const cancelledRef = useRef(false);
 
   const isOwn = entry.actor_type === "member" && entry.actor_id === currentUserId;
@@ -387,7 +386,7 @@ function CommentCard({
                 />
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem onClick={() => {
-                    navigator.clipboard.writeText(entry.content ?? "");
+                    copyMarkdown(entry.content ?? "");
                     toast.success("Copied");
                   }}>
                     <Copy className="h-3.5 w-3.5" />
@@ -430,7 +429,7 @@ function CommentCard({
                 onKeyDown={(e) => { if (e.key === "Escape") cancelEdit(); }}
               >
                 <div className="max-h-48 overflow-y-auto text-sm leading-relaxed">
-                  <RichTextEditor
+                  <ContentEditor
                     ref={editEditorRef}
                     defaultValue={entry.content ?? ""}
                     placeholder="Edit comment..."
@@ -452,7 +451,7 @@ function CommentCard({
             ) : (
               <>
                 <div className="pl-10 text-sm leading-relaxed text-foreground/85">
-                  <ReadonlyEditor content={entry.content ?? ""} />
+                  <ContentEditor defaultValue={entry.content ?? ""} editable={false} />
                 </div>
                 {!isTemp && (
                   <ReactionBar

apps/web/features/issues/components/comment-input.tsx

@@ -3,7 +3,7 @@
 import { useRef, useState } from "react";
 import { ArrowUp, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { RichTextEditor, type RichTextEditorRef } from "@/components/common/rich-text-editor";
+import { ContentEditor, type ContentEditorRef } from "@/features/editor";
 import { FileUploadButton } from "@/components/common/file-upload-button";
 import { useFileUpload } from "@/shared/hooks/use-file-upload";
 
@@ -13,7 +13,7 @@ interface CommentInputProps {
 }
 
 function CommentInput({ issueId, onSubmit }: CommentInputProps) {
-  const editorRef = useRef<RichTextEditorRef>(null);
+  const editorRef = useRef<ContentEditorRef>(null);
   const [isEmpty, setIsEmpty] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const { uploadWithToast } = useFileUpload();
@@ -38,7 +38,7 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
   return (
     <div className="relative flex max-h-56 flex-col rounded-lg bg-card pb-8 ring-1 ring-border">
       <div className="flex-1 min-h-0 overflow-y-auto px-3 py-2">
-        <RichTextEditor
+        <ContentEditor
           ref={editorRef}
           placeholder="Leave a comment..."
           onUpdate={(md) => setIsEmpty(!md.trim())}

apps/web/features/issues/components/issue-detail.tsx

@@ -44,9 +44,9 @@ import {
   DropdownMenuSubContent,
 } from "@/components/ui/dropdown-menu";
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";
-import { RichTextEditor } from "@/components/common/rich-text-editor";
+import { ContentEditor, type ContentEditorRef } from "@/features/editor";
 import { FileUploadButton } from "@/components/common/file-upload-button";
-import { TitleEditor } from "@/components/common/title-editor";
+import { TitleEditor } from "@/features/editor";
 import {
   Tooltip,
   TooltipTrigger,
@@ -287,7 +287,7 @@ export function IssueDetail({ issueId, onDelete, defaultSidebarOpen = true, layo
     [issue, id],
   );
 
-  const descEditorRef = useRef<import("@/components/common/rich-text-editor").RichTextEditorRef>(null);
+  const descEditorRef = useRef<ContentEditorRef>(null);
   const handleDescriptionUpload = useCallback(
     (file: File) => uploadWithToast(file, { issueId: id }),
     [uploadWithToast, id],
@@ -641,7 +641,7 @@ export function IssueDetail({ issueId, onDelete, defaultSidebarOpen = true, layo
             }}
           />
 
-          <RichTextEditor
+          <ContentEditor
             ref={descEditorRef}
             key={id}
             defaultValue={issue.description || ""}

apps/web/features/issues/components/reply-input.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState, useEffect } from "react";
 import { ArrowUp, Loader2 } from "lucide-react";
-import { RichTextEditor, type RichTextEditorRef } from "@/components/common/rich-text-editor";
+import { ContentEditor, type ContentEditorRef } from "@/features/editor";
 import { FileUploadButton } from "@/components/common/file-upload-button";
 import { ActorAvatar } from "@/components/common/actor-avatar";
 import { useFileUpload } from "@/shared/hooks/use-file-upload";
@@ -33,7 +33,7 @@ function ReplyInput({
   onSubmit,
   size = "default",
 }: ReplyInputProps) {
-  const editorRef = useRef<RichTextEditorRef>(null);
+  const editorRef = useRef<ContentEditorRef>(null);
   const measureRef = useRef<HTMLDivElement>(null);
   const [isEmpty, setIsEmpty] = useState(true);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -87,7 +87,7 @@ function ReplyInput({
       >
         <div className="flex-1 min-h-0 overflow-y-auto pr-14">
           <div ref={measureRef}>
-            <RichTextEditor
+            <ContentEditor
               ref={editorRef}
               placeholder={placeholder}
               onUpdate={(md) => setIsEmpty(!md.trim())}