ut.code(); LearnのremarkTermを実装し、キーワードのポップアップ・リンク

app/markdown/markdown.tsx

@@ -2,13 +2,12 @@ import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import removeComments from "remark-remove-comments";
 import remarkCjkFriendly from "remark-cjk-friendly";
-import {
-  MultiHighlightTag,
-  remarkMultiHighlight,
-} from "./multiHighlight";
+import { MultiHighlightTag, remarkMultiHighlight } from "./multiHighlight";
 import { Heading } from "./heading";
 import { AutoCodeBlock } from "./codeBlock";
 import { ReplacedRange } from "@/lib/docs";
+import remarkTerm from "./remarkTerm";
+import Term from "./term";
 
 export function StyledMarkdown(props: {
   content: string;
@@ -21,6 +20,7 @@ export function StyledMarkdown(props: {
         removeComments,
         remarkCjkFriendly,
         [remarkMultiHighlight, props.replacedRange],
+        remarkTerm,
       ]}
       components={components}
     >
@@ -58,4 +58,5 @@ const components: Components = {
   pre: ({ node, ...props }) => props.children,
   code: AutoCodeBlock,
   ins: MultiHighlightTag,
+  q: Term,
 };

app/markdown/remarkTerm.ts

@@ -0,0 +1,94 @@
+import type { Plugin } from "unified";
+import type { Nodes, PhrasingContent, Root, RootContent } from "mdast";
+import { phrasing } from "mdast-util-phrasing";
+
+/**
+ * `[[用語]]`を`<Term>用語</Term>`に変換するプラグイン。
+ * 
+ * https://github.com/ut-code/utcode-learn/blob/main/src/remark/remark-term.ts からコピペ
+ * Copyright (c) 2023 ut.code();
+ *
+ * @example
+ * // returns "<Term>**HTML**</Term>と<Term>CSS</Term>、そして<Term>JavaScript</Term>です。"
+ * String(
+ *   await remark()
+ *     .use(remarkMdx)
+ *     .use(remarkTerm)
+ *     .process("[[**HTML**]]と[[CSS]]、そして[[JavaScript]]です。"),
+ * );
+ */
+const remarkTerm: Plugin<[], Root> = () => (tree) => transform(tree);
+
+export default remarkTerm;
+
+function isParent(node: Nodes) {
+  return "children" in node;
+}
+
+function transform(node: Nodes) {
+  if (!isParent(node)) return;
+
+  for (const child of node.children) {
+    transform(child);
+  }
+
+  node.children = wrapDelimitedPhrasingContentsAsTerm(
+    node.children.flatMap((child) => isolateTermDelimiters(child))
+  );
+}
+
+function isolateTermDelimiters(node: RootContent): RootContent[] {
+  if (node.type !== "text") return [node];
+
+  return node.value
+    .split(/(\[\[|\]\])/)
+    .filter((segment) => segment !== "")
+    .map((segment) => ({
+      type: "text",
+      value: segment,
+    }));
+}
+
+function wrapDelimitedPhrasingContentsAsTerm(
+  children: RootContent[]
+): RootContent[] {
+  const result: RootContent[] = [];
+  const buffer: PhrasingContent[] = [];
+
+  for (const child of children) {
+    if (buffer.length === 0) {
+      if (child.type === "text" && child.value === "[[") {
+        buffer.push(child);
+        continue;
+      }
+      result.push(child);
+      continue;
+    }
+
+    if (child.type === "text" && child.value === "]]") {
+      // 修正ポイント：MDXノードの代わりに、hNameを持った汎用ノードを作成
+      result.push({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        type: "term" as any,
+        data: {
+          hName: "q",
+        },
+        children: buffer.slice(1),
+      });
+      buffer.length = 0;
+      continue;
+    }
+
+    if (phrasing(child)) {
+      buffer.push(child);
+      continue;
+    }
+
+    result.push(...buffer, child);
+    buffer.length = 0;
+  }
+
+  result.push(...buffer);
+
+  return result;
+}

app/markdown/term.tsx

@@ -0,0 +1,49 @@
+import { JSX } from "react";
+import { ExtraProps } from "react-markdown";
+import { onlyText } from "react-children-utilities";
+
+/**
+ * https://github.com/ut-code/utcode-learn/blob/main/src/components/Term/index.tsx をもとに独自実装
+ * Copyright (c) 2023 ut.code();
+ */
+export default function Term(props: JSX.IntrinsicElements["q"] & ExtraProps) {
+  // 動作確認用
+  return <>[{props.children} → term:{onlyText(props.children)}]</>;
+
+  // const term = props.id
+  //   ? terms.find((term) => term.id === props.id)
+  //   : terms.find(
+  //       (term) =>
+  //         term.name === onlyText(props.children) ||
+  //         term.aliases.includes(onlyText(props.children)),
+  //     );
+  // if (!term)
+  // throw new Error(
+  //   `${props.id ? props.id : onlyText(props.children)}という用語は定義されていません`,
+  // );
+
+  // const wrap = (content: JSX.Element) => {
+
+  //   return (
+  //     <Tippy
+  //       theme="material"
+  //       interactive={shouldLinkToReferencePage}
+  //       appendTo={window.document.body}
+  //       content={
+  //         <div className={styles.tooltipContent}>
+  //           <header className={styles.tooltipContentHeader}>{term.name}</header>
+  //           <div>{term.definition}</div>
+  //           {shouldLinkToReferencePage && (
+  //             <Link className={styles.tooltipLink} to={term.referencePage}>
+  //               <span>{referencePageTitle} へ</span>
+  //               <MdArrowForward size="1.2rem" />
+  //             </Link>
+  //           )}
+  //         </div>
+  //       }
+  //     >
+  //       {content}
+  //     </Tippy>
+  //   );
+  // };
+}

package.json

@@ -44,6 +44,7 @@
     "prismjs": "^1.30.0",
     "react": "^19",
     "react-ace": "^14.0.1",
+    "react-children-utilities": "^2.10.0",
     "react-dom": "^19",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",