マークダウン関連のコードをapp/markdownに移動

Author: na-trium-144

app/[lang]/[pageId]/markdown.tsx

@@ -2,7 +2,7 @@
 
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { ChatForm } from "./chatForm";
-import { Heading, StyledMarkdown } from "./markdown";
+import { StyledMarkdown } from "@/markdown/markdown";
 import { useChatHistoryContext } from "./chatHistory";
 import { useSidebarMdContext } from "@/sidebar";
 import clsx from "clsx";
@@ -14,6 +14,7 @@ import {
   PagePath,
 } from "@/lib/docs";
 import { ReplacedRange } from "@/markdown/multiHighlight";
+import { Heading } from "@/markdown/heading";
 
 /**
  * MarkdownSectionに追加で、動的な情報を持たせる

app/[lang]/[pageId]/pageContent.tsx

@@ -0,0 +1,92 @@
+import { EditorComponent } from "@/terminal/editor";
+import { ExecFile } from "@/terminal/exec";
+import { ReplTerminal } from "@/terminal/repl";
+import { langConstants, MarkdownLang } from "@my-code/runtime/languages";
+import { JSX, ReactNode } from "react";
+import { ExtraProps } from "react-markdown";
+import { StyledSyntaxHighlighter } from "./styledSyntaxHighlighter";
+
+export function AutoCodeBlock({
+  node,
+  className,
+  ref,
+  style,
+  ...props
+}: JSX.IntrinsicElements["code"] & ExtraProps) {
+  const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
+    className || ""
+  );
+  if (match) {
+    const language = langConstants(match[1] as MarkdownLang | undefined);
+    if (match[2] === "-exec" && match[3]) {
+      /*
+      ```python-exec:main.py
+      hello, world!
+      ```
+      ↓
+      ---------------------------
+       [▶ 実行] `python main.py`
+        hello, world!
+      ---------------------------
+      */
+      if (language.runtime) {
+        return (
+          <ExecFile
+            language={language}
+            filenames={match[3].split(",")}
+            content={String(props.children || "").replace(/\n$/, "")}
+          />
+        );
+      }
+    } else if (match[2] === "-repl") {
+      // repl付きの言語指定
+      if (!match[3]) {
+        console.error(
+          `${match[1]}-repl without terminal id! content: ${String(props.children).slice(0, 20)}...`
+        );
+      }
+      if (language.runtime) {
+        return (
+          <ReplTerminal
+            terminalId={match[3]}
+            language={language}
+            initContent={String(props.children || "").replace(/\n$/, "")}
+          />
+        );
+      }
+    } else if (match[3]) {
+      // ファイル名指定がある場合、ファイルエディター
+      return (
+        <EditorComponent
+          language={language}
+          filename={match[3]}
+          readonly={match[2] === "-readonly"}
+          initContent={String(props.children || "").replace(/\n$/, "")}
+        />
+      );
+    }
+    return (
+      <StyledSyntaxHighlighter language={language}>
+        {String(props.children || "").replace(/\n$/, "")}
+      </StyledSyntaxHighlighter>
+    );
+  } else if (String(props.children).includes("\n")) {
+    // 言語指定なしコードブロック
+    return (
+      <StyledSyntaxHighlighter language={langConstants(undefined)}>
+        {String(props.children || "").replace(/\n$/, "")}
+      </StyledSyntaxHighlighter>
+    );
+  } else {
+    // inline
+    return <InlineCode>{props.children}</InlineCode>;
+  }
+}
+
+export function InlineCode({ children }: { children: ReactNode }) {
+  return (
+    <code className="bg-current/10 border border-current/20 px-1 py-0.5 mx-0.5 rounded-md">
+      {children}
+    </code>
+  );
+}

app/markdown/codeBlock.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+export function Heading({
+  level,
+  children,
+}: {
+  level: number;
+  children: ReactNode;
+}) {
+  switch (level) {
+    case 0:
+      return null;
+    case 1:
+      return <h1 className="text-2xl font-bold my-4">{children}</h1>;
+    case 2:
+      return <h2 className="text-xl font-bold mt-4 mb-3 ">{children}</h2>;
+    case 3:
+      return <h3 className="text-lg font-bold mt-4 mb-2">{children}</h3>;
+    case 4:
+      return <h4 className="text-base font-bold mt-3 mb-2">{children}</h4>;
+    case 5:
+      // TODO: これ以下は4との差がない (全体的に大きくする必要がある？)
+      return <h5 className="text-base font-bold mt-3 mb-2">{children}</h5>;
+    case 6:
+      return <h6 className="text-base font-bold mt-3 mb-2">{children}</h6>;
+  }
+}

app/markdown/heading.tsx

@@ -0,0 +1,61 @@
+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,
+  ReplacedRange,
+} from "./multiHighlight";
+import { Heading } from "./heading";
+import { AutoCodeBlock } from "./codeBlock";
+
+export function StyledMarkdown(props: {
+  content: string;
+  replacedRange?: ReplacedRange[];
+}) {
+  return (
+    <Markdown
+      remarkPlugins={[
+        remarkGfm,
+        removeComments,
+        remarkCjkFriendly,
+        [remarkMultiHighlight, props.replacedRange],
+      ]}
+      components={components}
+    >
+      {props.content}
+    </Markdown>
+  );
+}
+
+// TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
+const components: Components = {
+  h1: ({ children }) => <Heading level={1}>{children}</Heading>,
+  h2: ({ children }) => <Heading level={2}>{children}</Heading>,
+  h3: ({ children }) => <Heading level={3}>{children}</Heading>,
+  h4: ({ children }) => <Heading level={4}>{children}</Heading>,
+  h5: ({ children }) => <Heading level={5}>{children}</Heading>,
+  h6: ({ children }) => <Heading level={6}>{children}</Heading>,
+  p: ({ node, ...props }) => <p className="mx-2 my-2" {...props} />,
+  ul: ({ node, ...props }) => (
+    <ul className="list-disc list-outside ml-6 my-2" {...props} />
+  ),
+  ol: ({ node, ...props }) => (
+    <ol className="list-decimal list-outside ml-6 my-2" {...props} />
+  ),
+  li: ({ node, ...props }) => <li className="my-1" {...props} />,
+  a: ({ node, ...props }) => <a className="link link-info" {...props} />,
+  strong: ({ node, ...props }) => (
+    <strong className="text-primary" {...props} />
+  ),
+  table: ({ node, ...props }) => (
+    <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-box border border-current/20 shadow-sm">
+      <table className="table w-max" {...props} />
+    </div>
+  ),
+  hr: ({ node, ...props }) => <hr className="border-accent my-4" {...props} />,
+  pre: ({ node, ...props }) => props.children,
+  code: AutoCodeBlock,
+  ins: MultiHighlightTag,
+};