diffをハイライト表示

na-trium-144 · na-trium-144 · commit fe7d0e83f7e2 · 2026-03-13T20:56:53.000+09:00
diff --git a/app/[lang]/[pageId]/markdown.tsx b/app/[lang]/[pageId]/markdown.tsx
@@ -8,14 +8,24 @@ import { JSX, ReactNode } from "react";
 import { langConstants, MarkdownLang } from "@my-code/runtime/languages";
 import { ReplTerminal } from "@/terminal/repl";
 import { StyledSyntaxHighlighter } from "./styledSyntaxHighlighter";
+import clsx from "clsx";
+import { remarkMultiHighlight, ReplacedRange } from "@/markdown/multiHighlight";
 
-export function StyledMarkdown({ content }: { content: string }) {
+export function StyledMarkdown(props: {
+  content: string;
+  replacedRange?: ReplacedRange[];
+}) {
   return (
     <Markdown
-      remarkPlugins={[remarkGfm, removeComments, remarkCjkFriendly]}
+      remarkPlugins={[
+        remarkGfm,
+        removeComments,
+        remarkCjkFriendly,
+        [remarkMultiHighlight, props.replacedRange],
+      ]}
       components={components}
     >
-      {content}
+      {props.content}
     </Markdown>
   );
 }
@@ -50,6 +60,17 @@ const components: Components = {
   code: ({ node, className, ref, style, ...props }) => (
     <CodeComponent {...{ node, className, ref, style, ...props }} />
   ),
+  ins: ({ node, className, ...props }) => (
+    <ins
+      className={clsx(
+        // classNameにチャットidが入っている。
+        // 選択しているチャットに対応するdiffのみ濃いハイライトにするなど (TODO)
+        className,
+        "underline decoration-dashed underline-offset-[0.2rem] decoration-secondary/50"
+      )}
+      {...props}
+    />
+  ),
 };
 
 export function Heading({
@@ -151,9 +172,7 @@ function CodeComponent({
     );
   } else {
     // inline
-    return (
-      <InlineCode>{String(props.children || "").replace(/\n$/, "")}</InlineCode>
-    );
+    return <InlineCode>{props.children}</InlineCode>;
   }
 }
 
diff --git a/app/[lang]/[pageId]/pageContent.tsx b/app/[lang]/[pageId]/pageContent.tsx
@@ -13,11 +13,12 @@ import {
   PageEntry,
   PagePath,
 } from "@/lib/docs";
+import { ReplacedRange } from "@/markdown/multiHighlight";
 
 /**
  * MarkdownSectionに追加で、動的な情報を持たせる
  */
-export type DynamicMarkdownSection = MarkdownSection & {
+export interface DynamicMarkdownSection extends MarkdownSection {
   /**
    * ユーザーが今そのセクションを読んでいるかどうか
    */
@@ -26,7 +27,8 @@ export type DynamicMarkdownSection = MarkdownSection & {
    * チャットの会話を元にAIが書き換えた後の内容
    */
   replacedContent: string;
-};
+  replacedRange: ReplacedRange[];
+}
 
 interface PageContentProps {
   splitMdContent: MarkdownSection[];
@@ -43,21 +45,53 @@ export function PageContent(props: PageContentProps) {
   const { chatHistories } = useChatHistoryContext();
 
   const initDynamicMdContent = useCallback(() => {
-    const newContent = splitMdContent.map((section) => ({
-      ...section,
-      inView: false,
-      replacedContent: section.rawContent,
-    }));
+    const newContent: DynamicMarkdownSection[] = splitMdContent.map(
+      (section) => ({
+        ...section,
+        inView: false,
+        replacedContent: section.rawContent,
+        replacedRange: [],
+      })
+    );
     const chatDiffs = chatHistories.map((chat) => chat.diff).flat();
     chatDiffs.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
     for (const diff of chatDiffs) {
       const targetSection = newContent.find((s) => s.id === diff.sectionId);
       if (targetSection) {
-        if (targetSection.replacedContent.includes(diff.search)) {
-          targetSection.replacedContent = targetSection.replacedContent.replace(
-            diff.search,
-            diff.replace
-          );
+        const startIndex = targetSection.replacedContent.indexOf(diff.search);
+        if (startIndex !== -1) {
+          const endIndex = startIndex + diff.search.length;
+          const replaceLen = diff.replace.length;
+          const diffLen = replaceLen - diff.search.length; // 文字列長の増減分
+
+          // 1. 文字列の置換
+          targetSection.replacedContent =
+            targetSection.replacedContent.slice(0, startIndex) +
+            diff.replace +
+            targetSection.replacedContent.slice(endIndex);
+
+          // 2. 既存のハイライト範囲のズレを補正（今回の置換箇所より後ろにあるものをシフト）
+          targetSection.replacedRange = targetSection.replacedRange.map((h) => {
+            if (h.start >= endIndex) {
+              // 完全に後ろにある場合は単純にシフト
+              return {
+                start: h.start + diffLen,
+                end: h.end + diffLen,
+                id: h.id,
+              };
+            }
+            if (h.end >= endIndex) {
+              return { start: h.start, end: h.end + diffLen, id: h.id };
+            }
+            return h;
+          });
+
+          // 3. 今回の置換箇所を新たなハイライト範囲として追加
+          targetSection.replacedRange.push({
+            start: startIndex,
+            end: startIndex + replaceLen,
+            id: diff.chatId,
+          });
         } else {
           // TODO: md5ハッシュを参照し過去バージョンのドキュメントへ適用を試みる
           console.error(
@@ -144,7 +178,10 @@ export function PageContent(props: PageContentProps) {
             }}
           >
             {/* ドキュメントのコンテンツ */}
-            <StyledMarkdown content={section.replacedContent} />
+            <StyledMarkdown
+              content={section.replacedContent}
+              replacedRange={section.replacedRange}
+            />
           </div>
           <div>
             {/* 右側に表示するチャット履歴欄 */}
diff --git a/app/markdown/multiHighlight.ts b/app/markdown/multiHighlight.ts
@@ -0,0 +1,92 @@
+import { visit } from "unist-util-visit";
+import type { Plugin } from "unified";
+import type { Root, PhrasingContent } from "mdast";
+
+export interface ReplacedRange {
+  start: number;
+  end: number;
+  id: string;
+}
+export const remarkMultiHighlight: Plugin<[ReplacedRange[]], Root> = (
+  replacedRange?: ReplacedRange[]
+) => {
+  return (tree) => {
+    visit(tree, "text", (node, index, parent) => {
+      const nodeStart = node.position?.start?.offset;
+      if (
+        nodeStart === undefined ||
+        index === undefined ||
+        parent === undefined
+      )
+        return;
+
+      const textLen = node.value.length;
+      const nodeEnd = nodeStart + textLen;
+
+      // 1. このテキストノードに被るハイライトが1つもなければスキップ (最適化)
+      if (!replacedRange) return;
+      const hasOverlap = replacedRange.some(
+        (hl) => hl.start < nodeEnd && hl.end > nodeStart
+      );
+      if (!hasOverlap) return;
+
+      // 2. テキストを分割するための「境界インデックス(相対位置)」を収集
+      let boundaries = [0, textLen]; // ノードの最初と最後は必ず入れる
+
+      replacedRange.forEach((hl) => {
+        const relStart = hl.start - nodeStart;
+        const relEnd = hl.end - nodeStart;
+
+        // ノードの途中にある境界だけを追加
+        if (relStart > 0 && relStart < textLen) boundaries.push(relStart);
+        if (relEnd > 0 && relEnd < textLen) boundaries.push(relEnd);
+      });
+
+      // 3. 境界インデックスの重複を排除し、昇順にソートする
+      boundaries = Array.from(new Set(boundaries)).sort((a, b) => a - b);
+
+      const newNodes: PhrasingContent[] = [];
+
+      // 4. 隣り合う境界ごとに区間(セグメント)を切り出す
+      for (let i = 0; i < boundaries.length - 1; i++) {
+        const startIdx = boundaries[i];
+        const endIdx = boundaries[i + 1];
+
+        const textValue = node.value.slice(startIdx, endIdx);
+        const absStart = nodeStart + startIdx;
+        const absEnd = nodeStart + endIdx;
+
+        // 5. この区間を完全に包含しているハイライトIDをすべて抽出
+        const activeIds = replacedRange
+          .filter((hl) => hl.start <= absStart && hl.end >= absEnd)
+          .map((hl) => hl.id);
+
+        if (activeIds.length > 0) {
+          // 該当するハイライトがある場合、クラス名を複数付与してカスタムノード化
+          const classNames = activeIds;
+
+          // カスタムタイプ('highlight')は標準のmdastに存在しないため、型アサーションでエラーを回避します
+          newNodes.push({
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            type: "highlight" as any,
+            data: {
+              hName: "ins",
+              // AST(hast)の仕様上、classNameは配列で渡すとスペース区切りで展開されます
+              hProperties: { className: classNames },
+            },
+            children: [{ type: "text", value: textValue }],
+          });
+        } else {
+          // どのハイライトにも含まれない場合は通常のテキスト
+          newNodes.push({ type: "text", value: textValue });
+        }
+      }
+
+      // 6. 元のテキストノードを分割したノード群に置き換える
+      parent.children.splice(index, 1, ...newNodes);
+
+      // 追加したノード分インデックスを進める
+      return index + newNodes.length;
+    });
+  };
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,13 +46,15 @@
     "remark-gfm": "^4.0.1",
     "remark-remove-comments": "^1.1.1",
     "swr": "^2.3.6",
+    "unist-util-visit": "^5.1.0",
     "zod": "^4.0.17"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@pyodide/webpack-plugin": "^1.4.0",
     "@tailwindcss/postcss": "^4",
     "@types/js-yaml": "^4.0.9",
+    "@types/mdast": "^4.0.4",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20",
     "@types/pako": "^2.0.4",
@@ -72,6 +74,7 @@
     "tailwindcss": "^4",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
+    "unified": "^11.0.5",
     "wrangler": "^4.27.0"
   }
 }
