jiang13-bbs/frontend/components/MarkdownBodyClient.tsx

"use client";

import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { mergeMarkdownComponents } from "@/components/markdown/mergeComponents";
import { remarkInlineShortcodes } from "@/components/markdown/remarkInlineShortcodes";
import { splitContentSegments } from "@/lib/directiveBlocks";
import { expandDyEmojiShortcodes } from "@/lib/dyEmoji";
import type { HideKind } from "@/lib/hideBlocks";
import MdHideBlock from "@/components/markdown/MdHideBlock";
import MdTimeline from "@/components/markdown/MdTimeline";
import MdDetails from "@/components/markdown/MdDetails";
import MdVideo from "@/components/markdown/MdVideo";
import { MdEntriesView } from "@/components/markdown/MdEntries";

type MarkdownBodyClientProps = {
  content: string;
  className?: string;
  components?: Components;
  postId?: number;
  loginHref?: string;
  loggedIn?: boolean;
  /** 书级「全章节条目卡模式」：章节内容免写 [entries] 壳 */
  entriesAuto?: boolean;
  /** 按分段索引的条目标题锚点 id（与章内目录共享；阅读页传入，其他场景缺省） */
  entriesTitleIds?: (string[] | undefined)[];
};

/**
 * 客户端 Markdown（发帖预览 / 评论）：GFM + 隐藏块 / 时间线 / 条目卡预览。
 */
export default function MarkdownBodyClient({
  content,
  className = "prose-content",
  components,
  postId,
  loginHref,
  loggedIn = false,
  entriesAuto = false,
  entriesTitleIds,
}: MarkdownBodyClientProps) {
  const segs = splitContentSegments(expandDyEmojiShortcodes(content || ""), {
    entriesAuto,
  });
  const mdComponents = mergeMarkdownComponents(components);
  // 时间线/隐藏块正文不套外层 heading 覆盖，避免预览与正文目录 id 错位
  const nestedMd = mergeMarkdownComponents();

  return (
    <div className={className}>
      {segs.map((seg, i) => {
        if (seg.type === "md") {
          if (!seg.text.trim()) return null;
          return (
            <ReactMarkdown
              key={`md-${i}`}
              remarkPlugins={[remarkGfm, remarkInlineShortcodes]}
              components={mdComponents}
            >
              {seg.text}
            </ReactMarkdown>
          );
        }
        if (seg.type === "timeline") {
          return (
            <MdTimeline
              key={`tl-${i}`}
              items={seg.items}
              renderBody={(it) =>
                it.body.trim() ? (
                  <ReactMarkdown
                    remarkPlugins={[remarkGfm, remarkInlineShortcodes]}
                    components={nestedMd}
                  >
                    {expandDyEmojiShortcodes(it.body)}
                  </ReactMarkdown>
                ) : null
              }
            />
          );
        }
        if (seg.type === "entries") {
          return (
            <MdEntriesView
              key={`entries-${i}`}
              items={seg.items}
              titleIds={entriesTitleIds?.[i]}
              renderMd={(t) => (
                <ReactMarkdown
                  remarkPlugins={[remarkGfm, remarkInlineShortcodes]}
                  components={nestedMd}
                >
                  {expandDyEmojiShortcodes(t)}
                </ReactMarkdown>
              )}
            />
          );
        }
        if (seg.type === "details") {
          return (
            <MdDetails key={`details-${i}`} title={seg.title}>
              {seg.body.trim() ? (
                <ReactMarkdown
                  remarkPlugins={[remarkGfm, remarkInlineShortcodes]}
                  components={nestedMd}
                >
                  {expandDyEmojiShortcodes(seg.body)}
                </ReactMarkdown>
              ) : null}
            </MdDetails>
          );
        }
        if (seg.type === "video") {
          return <MdVideo key={`video-${i}`} provider={seg.provider} id={seg.id} />;
        }
        if (seg.type === "snippet") {
          // 客户端预览（发帖/评论草稿）无法 SSR 取数，渲染占位卡提示
          return (
            <div
              key={`snippet-${i}`}
              className="my-3 flex items-center gap-2 rounded-xl px-3 py-2.5 text-[13px]"
              style={{ border: "1px dashed var(--line-2)", color: "var(--ink-3)" }}
            >
              代码片段 #{seg.id}（发布后可见）
            </div>
          );
        }
        const kind = seg.kind as HideKind;
        if (seg.locked) {
          return (
            <MdHideBlock
              key={`hide-${i}`}
              kind={kind}
              points={seg.points}
              locked
              postId={postId}
              loginHref={loginHref}
              loggedIn={loggedIn}
            />
          );
        }
        return (
          <MdHideBlock key={`hide-${i}`} kind={kind} points={seg.points}>
            {seg.body.trim() ? (
              <ReactMarkdown
                remarkPlugins={[remarkGfm, remarkInlineShortcodes]}
                components={nestedMd}
              >
                {expandDyEmojiShortcodes(seg.body)}
              </ReactMarkdown>
            ) : null}
          </MdHideBlock>
        );
      })}
    </div>
  );
}