升级帖子编辑与 Feed 体验：TipTap 富文本、修订历史、排序与编辑时限。

将 Markdown 编辑器替换为 TipTap WYSIWYG，新增帖子修订记录与 diff 展示；首页支持最新/回复排序与本地缓存；后台可配置编辑时限与锁定帖子；侧边栏整合板块导航并优化 Feed 布局。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/ArticleEditor.tsx

@@ -1,16 +1,23 @@
 import {
-  useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo, type ReactNode,
+  useRef, useEffect, useImperativeHandle, forwardRef, useCallback, useState, type ReactNode,
 } from 'react';
+import { useEditor, EditorContent, type Editor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import Underline from '@tiptap/extension-underline';
+import DOMPurify from 'dompurify';
 import {
-  Bold, Italic, Strikethrough, Link, Code, Quote,
-  List, ListOrdered, Image, Eye, Pencil, Minus, LockKeyhole,
+  Bold, Italic, Strikethrough, Link as LinkIcon, Code, Quote,
+  List, ListOrdered, Image as ImageIcon, Minus, LockKeyhole,
 } from 'lucide-react';
-import { markdownToHtml, countWords } from '../utils/markdown';
-import { renderPostContentHtml } from '../utils/postContent';
+import { POST_CONTENT_PURIFY_CONFIG } from '../utils/postContent';
+import { countWords } from '../utils/markdown';
+import { MembersOnly } from './editor/MembersOnlyExtension';
 
 export interface ArticleEditorHandle {
   getHTML: () => string;
-  getMarkdown: () => string;
   isEmpty: () => boolean;
   focus: () => void;
 }
@@ -21,181 +28,206 @@ interface Props {
   placeholder?: string;
 }
 
-type ViewMode = 'edit' | 'preview' | 'split';
-
 interface ToolBtn {
   icon: ReactNode;
   title: string;
+  active?: boolean;
+  className?: string;
   action: () => void;
 }
 
-/** 去掉行首已有的 Markdown 块级前缀 */
-function stripLinePrefix(line: string): string {
-  return line
-    .replace(/^\r/, '')
-    .replace(/^#{1,6}\s*/, '')
-    .replace(/^>\s*/, '')
-    .replace(/^[-*+]\s*/, '')
-    .replace(/^\d+\.\s*/, '');
+/** 净化编辑器 HTML，保留 members-only 自定义标签 */
+function sanitizeHtml(html: string): string {
+  return DOMPurify.sanitize(html, POST_CONTENT_PURIFY_CONFIG);
+}
+
+/** 判断编辑器内容是否为空 */
+function isEditorEmpty(editor: Editor): boolean {
+  return editor.state.doc.textContent.trim().length === 0;
+}
+
+/** 标题循环：无标题 → H2 → H3 → … → H6 → 正文 */
+function cycleHeading(editor: Editor) {
+  for (let level = 2; level <= 6; level += 1) {
+    if (editor.isActive('heading', { level })) {
+      if (level === 6) {
+        editor.chain().focus().setParagraph().run();
+      } else {
+        editor.chain().focus().toggleHeading({ level: (level + 1) as 2 | 3 | 4 | 5 | 6 }).run();
+      }
+      return;
+    }
+  }
+  editor.chain().focus().toggleHeading({ level: 2 }).run();
 }
 
 const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEditor(
   { value, onChange, placeholder = '在此撰写正文…' },
   ref,
 ) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const selectionRef = useRef({ start: 0, end: 0 });
-  const [viewMode, setViewMode] = useState<ViewMode>('split');
-  const [previewHtml, setPreviewHtml] = useState('');
+  const isInternalUpdate = useRef(false);
+  const lastValueRef = useRef(value);
+  const [, setEditorTick] = useState(0);
 
-  useImperativeHandle(ref, () => ({
-    getHTML: () => markdownToHtml(value),
-    getMarkdown: () => value,
-    isEmpty: () => value.trim().length === 0,
-    focus: () => textareaRef.current?.focus(),
-  }));
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
+      }),
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        defaultProtocol: 'https',
+      }),
+      Image.configure({ inline: false, allowBase64: false }),
+      Placeholder.configure({ placeholder }),
+      MembersOnly,
+    ],
+    content: sanitizeHtml(value) || '',
+    onUpdate: ({ editor: ed }) => {
+      const html = sanitizeHtml(ed.getHTML());
+      isInternalUpdate.current = true;
+      lastValueRef.current = html;
+      onChange(html);
+    },
+    onSelectionUpdate: () => setEditorTick(t => t + 1),
+    onTransaction: () => setEditorTick(t => t + 1),
+    editorProps: {
+      attributes: {
+        class: 'article-prosemirror post-detail-content',
+        spellcheck: 'false',
+      },
+    },
+  });
 
-  const saveSelection = useCallback(() => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    selectionRef.current = { start: ta.selectionStart, end: ta.selectionEnd };
-  }, []);
-
-  const getSelection = useCallback(() => {
-    const ta = textareaRef.current;
-    if (ta && document.activeElement === ta) {
-      return { start: ta.selectionStart, end: ta.selectionEnd };
-    }
-    return selectionRef.current;
-  }, []);
-
-  const restoreSelection = useCallback((start: number, end = start) => {
-    requestAnimationFrame(() => {
-      const ta = textareaRef.current;
-      if (!ta) return;
-      ta.focus();
-      ta.setSelectionRange(start, end);
-      selectionRef.current = { start, end };
-    });
-  }, []);
-
-  // 实时预览，短 debounce 保证流畅
+  // 外部 value 变更时同步到编辑器（如加载已有帖子）
   useEffect(() => {
-    const t = setTimeout(() => setPreviewHtml(markdownToHtml(value)), 60);
-    return () => clearTimeout(t);
-  }, [value]);
-
-  // 编辑区随内容向下延伸，最小高度撑满视口剩余空间
-  const adjustTextareaHeight = useCallback(() => {
-    const ta = textareaRef.current;
-    if (!ta || viewMode === 'preview') return;
-    ta.style.height = '0px';
-    const contentHeight = ta.scrollHeight;
-    const top = ta.getBoundingClientRect().top;
-    const minHeight = Math.max(280, window.innerHeight - top - 56);
-    ta.style.height = `${Math.max(minHeight, contentHeight)}px`;
-  }, [viewMode]);
-
-  useEffect(() => {
-    adjustTextareaHeight();
-  }, [value, viewMode, adjustTextareaHeight]);
-
-  useEffect(() => {
-    const onResize = () => adjustTextareaHeight();
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
-  }, [adjustTextareaHeight]);
-
-  const insertAtCursor = useCallback((before: string, after = '', placeholderText = '') => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    const { start, end } = getSelection();
-    const selected = value.slice(start, end) || placeholderText;
-    const next = value.slice(0, start) + before + selected + after + value.slice(end);
-    onChange(next);
-    restoreSelection(start + before.length + selected.length);
-  }, [value, onChange, getSelection, restoreSelection]);
-
-  const wrapLine = useCallback((prefix: string) => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    const { start } = getSelection();
-    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
-    const lineEnd = value.indexOf('\n', start);
-    const end = lineEnd === -1 ? value.length : lineEnd;
-    const line = value.slice(lineStart, end);
-    const stripped = stripLinePrefix(line);
-    const next = value.slice(0, lineStart) + prefix + stripped + value.slice(end);
-    onChange(next);
-    restoreSelection(lineStart + prefix.length + stripped.length);
-  }, [value, onChange, getSelection, restoreSelection]);
-
-  /** 标题：无 → H2 → H3 → … → H6 → 取消 */
-  const toggleHeading = useCallback(() => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    const { start } = getSelection();
-    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
-    const lineEnd = value.indexOf('\n', start);
-    const end = lineEnd === -1 ? value.length : lineEnd;
-    const line = value.slice(lineStart, end);
-    const normalized = line.replace(/^\r/, '');
-    const match = normalized.match(/^(#{1,6})\s+(.*)$/);
-
-    let nextLine: string;
-    if (match) {
-      const level = match[1].length;
-      const text = match[2];
-      nextLine = level >= 6 ? text : `${'#'.repeat(level + 1)} ${text}`;
-    } else {
-      nextLine = `## ${stripLinePrefix(normalized)}`;
-    }
-
-    const next = value.slice(0, lineStart) + nextLine + value.slice(end);
-    onChange(next);
-    const cursor = lineStart + nextLine.length;
-    restoreSelection(cursor);
-  }, [value, onChange, getSelection, restoreSelection]);
-
-  /** 包裹为仅登录用户可见区块 */
-  const wrapMembersOnly = useCallback(() => {
-    const { start, end } = getSelection();
-    if (start !== end) {
-      const selected = value.slice(start, end);
-      const block = `\n:::members\n${selected}\n:::\n`;
-      const next = value.slice(0, start) + block + value.slice(end);
-      onChange(next);
-      restoreSelection(start + ':::members\n'.length + 1);
+    if (!editor) return;
+    if (isInternalUpdate.current) {
+      isInternalUpdate.current = false;
       return;
     }
-    insertAtCursor('\n:::members\n', '\n:::\n', '在此输入仅登录用户可见的内容…');
-  }, [value, onChange, getSelection, restoreSelection, insertAtCursor]);
+    const next = sanitizeHtml(value);
+    if (next === lastValueRef.current) return;
+    lastValueRef.current = next;
+    editor.commands.setContent(next || '', { emitUpdate: false });
+  }, [value, editor]);
 
-  const tools: ToolBtn[] = [
-    { icon: <strong>H</strong>, title: '标题（H2，再次点击升级）', action: toggleHeading },
-    { icon: <Bold size={15} />, title: '加粗', action: () => insertAtCursor('**', '**', '加粗') },
-    { icon: <Italic size={15} />, title: '斜体', action: () => insertAtCursor('*', '*', '斜体') },
-    { icon: <Strikethrough size={15} />, title: '删除线', action: () => insertAtCursor('~~', '~~', '删除') },
-    { icon: <Minus size={15} />, title: '分割线', action: () => insertAtCursor('\n\n---\n\n') },
-    { icon: <Quote size={15} />, title: '引用', action: () => wrapLine('> ') },
-    { icon: <List size={15} />, title: '无序列表', action: () => wrapLine('- ') },
-    { icon: <ListOrdered size={15} />, title: '有序列表', action: () => wrapLine('1. ') },
-    { icon: <Code size={15} />, title: '代码块', action: () => insertAtCursor('\n```\n', '\n```\n', 'code') },
-    { icon: <Link size={15} />, title: '链接', action: () => insertAtCursor('[', '](url)', '链接文字') },
-    { icon: <Image size={15} />, title: '图片', action: () => insertAtCursor('![', '](url)', '描述') },
-    { icon: <LockKeyhole size={15} />, title: '登录可见（选中文字后点击可包裹）', action: wrapMembersOnly },
-  ];
+  useImperativeHandle(ref, () => ({
+    getHTML: () => (editor ? sanitizeHtml(editor.getHTML()) : value),
+    isEmpty: () => (editor ? isEditorEmpty(editor) : !value.trim()),
+    focus: () => editor?.commands.focus(),
+  }), [editor, value]);
 
-  const displayPreviewHtml = useMemo(() => {
-    if (!value.trim()) {
-      return `<p class="article-preview-placeholder">${placeholder}</p>`;
+  const setLink = useCallback(() => {
+    if (!editor) return;
+    const prev = editor.getAttributes('link').href as string | undefined;
+    const url = window.prompt('链接地址', prev ?? 'https://');
+    if (url === null) return;
+    if (!url.trim()) {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run();
+      return;
     }
-    return renderPostContentHtml(previewHtml, true);
-  }, [value, previewHtml, placeholder]);
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url.trim() }).run();
+  }, [editor]);
 
-  const words = countWords(value);
-  const showEdit = viewMode === 'edit' || viewMode === 'split';
-  const showPreview = viewMode === 'preview' || viewMode === 'split';
+  const setImage = useCallback(() => {
+    if (!editor) return;
+    const url = window.prompt('图片地址');
+    if (!url?.trim()) return;
+    editor.chain().focus().setImage({ src: url.trim() }).run();
+  }, [editor]);
+
+  const wrapMembersOnly = useCallback(() => {
+    if (!editor) return;
+    const { from, to, empty } = editor.state.selection;
+    if (!empty && from !== to) {
+      editor.chain().focus().wrapMembersOnly().run();
+      return;
+    }
+    editor.chain().focus().insertMembersOnly().run();
+  }, [editor]);
+
+  const buildTools = useCallback((): ToolBtn[] => {
+    if (!editor) return [];
+    return [
+      {
+        icon: <strong>H</strong>,
+        title: '标题（H2，再次点击升级）',
+        active: editor.isActive('heading'),
+        action: () => cycleHeading(editor),
+      },
+      {
+        icon: <Bold size={15} />,
+        title: '加粗',
+        active: editor.isActive('bold'),
+        action: () => editor.chain().focus().toggleBold().run(),
+      },
+      {
+        icon: <Italic size={15} />,
+        title: '斜体',
+        active: editor.isActive('italic'),
+        action: () => editor.chain().focus().toggleItalic().run(),
+      },
+      {
+        icon: <Strikethrough size={15} />,
+        title: '删除线',
+        active: editor.isActive('strike'),
+        action: () => editor.chain().focus().toggleStrike().run(),
+      },
+      {
+        icon: <Minus size={15} />,
+        title: '分割线',
+        action: () => editor.chain().focus().setHorizontalRule().run(),
+      },
+      {
+        icon: <Quote size={15} />,
+        title: '引用',
+        active: editor.isActive('blockquote'),
+        action: () => editor.chain().focus().toggleBlockquote().run(),
+      },
+      {
+        icon: <List size={15} />,
+        title: '无序列表',
+        active: editor.isActive('bulletList'),
+        action: () => editor.chain().focus().toggleBulletList().run(),
+      },
+      {
+        icon: <ListOrdered size={15} />,
+        title: '有序列表',
+        active: editor.isActive('orderedList'),
+        action: () => editor.chain().focus().toggleOrderedList().run(),
+      },
+      {
+        icon: <Code size={15} />,
+        title: '代码块',
+        active: editor.isActive('codeBlock'),
+        action: () => editor.chain().focus().toggleCodeBlock().run(),
+      },
+      {
+        icon: <LinkIcon size={15} />,
+        title: '链接',
+        active: editor.isActive('link'),
+        action: setLink,
+      },
+      {
+        icon: <ImageIcon size={15} />,
+        title: '图片',
+        action: setImage,
+      },
+      {
+        icon: <LockKeyhole size={15} />,
+        title: '登录可见（选中文字后点击可包裹）',
+        active: editor.isActive('membersOnly'),
+        className: 'article-tool-btn--members',
+        action: wrapMembersOnly,
+      },
+    ];
+  }, [editor, setLink, setImage, wrapMembersOnly]);
+
+  const tools = buildTools();
+  const words = editor ? countWords(editor.getText()) : 0;
 
   return (
     <div className="article-editor">
@@ -205,7 +237,7 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
             <button
               key={i}
               type="button"
-              className={`article-tool-btn${i === tools.length - 1 ? ' article-tool-btn--members' : ''}`}
+              className={`article-tool-btn${t.active ? ' active' : ''}${t.className ? ` ${t.className}` : ''}`}
               title={t.title}
               onMouseDown={e => e.preventDefault()}
               onClick={t.action}
@@ -214,65 +246,15 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
             </button>
           ))}
         </div>
-        <div className="article-editor-modes">
-          <button
-            type="button"
-            className={`article-mode-btn${viewMode === 'edit' ? ' active' : ''}`}
-            onClick={() => setViewMode('edit')}
-            title="仅编辑"
-          >
-            <Pencil size={14} /> 编辑
-          </button>
-          <button
-            type="button"
-            className={`article-mode-btn${viewMode === 'split' ? ' active' : ''}`}
-            onClick={() => setViewMode('split')}
-            title="分栏预览"
-          >
-            分栏
-          </button>
-          <button
-            type="button"
-            className={`article-mode-btn${viewMode === 'preview' ? ' active' : ''}`}
-            onClick={() => setViewMode('preview')}
-            title="仅预览"
-          >
-            <Eye size={14} /> 预览
-          </button>
-        </div>
       </div>
 
-      <div className={`article-editor-panes article-editor-panes--${viewMode}`}>
-        {showEdit && (
-          <div className="article-pane article-pane--edit">
-            <textarea
-              ref={textareaRef}
-              className="article-textarea"
-              value={value}
-              onChange={e => onChange(e.target.value)}
-              onSelect={saveSelection}
-              onKeyUp={saveSelection}
-              onClick={saveSelection}
-              onFocus={saveSelection}
-              placeholder={placeholder}
-              spellCheck={false}
-            />
-          </div>
-        )}
-        {showPreview && (
-          <div className="article-pane article-pane--preview">
-            {viewMode === 'split' && <div className="article-pane-label">实时预览</div>}
-            <div
-              className={`article-preview post-detail-content${!value.trim() ? ' article-preview--empty' : ''}`}
-              dangerouslySetInnerHTML={{ __html: displayPreviewHtml }}
-            />
-          </div>
-        )}
+      <div className="article-editor-body">
+        <EditorContent editor={editor} className="article-editor-content" />
       </div>
 
       <div className="article-editor-status">
         <span>{words} 字</span>
-        <span>Markdown</span>
+        <span>富文本</span>
       </div>
     </div>
   );