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 { 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";

type MarkdownBodyClientProps = {
  content: string;
  className?: string;
  components?: Components;
  postId?: number;
  loginHref?: string;
  loggedIn?: boolean;
};

/**
 * 客户端 Markdown（发帖预览 / 评论）：GFM + 隐藏块 / 时间线预览。
 */
export default function MarkdownBodyClient({
  content,
  className = "prose-content",
  components,
  postId,
  loginHref,
  loggedIn = false,
}: MarkdownBodyClientProps) {
  const segs = splitContentSegments(expandDyEmojiShortcodes(content || ""));
  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]} 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]} components={nestedMd}>
                    {expandDyEmojiShortcodes(it.body)}
                  </ReactMarkdown>
                ) : null
              }
            />
          );
        }
        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]} components={nestedMd}>
                {expandDyEmojiShortcodes(seg.body)}
              </ReactMarkdown>
            ) : null}
          </MdHideBlock>
        );
      })}
    </div>
  );
}