@mawaru/sdk 0.39.0 → 0.40.0

package/views/_parts/Markdown.tsx

@@ -0,0 +1,472 @@
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from "react"
+import { linkify } from "./Linkify.js"
+
+// AI の下書き・調査レポートは Markdown で届く。生ソースのまま読ませると読み物として
+// 読めないので整形して出す。frontend は依存最小主義なのでレンダラは自前で持ち、
+// 実際に出る記法だけを見る：見出し / 箇条書き・番号付き / 引用 / コードブロック /
+// 水平線 / 表 / 段落と、インラインの強調・コード・リンク（素の URL を含む）。
+// 対応しない記法は素のテキストとしてそのまま出す＝壊さない
+
+/** 長文（＝Markdown として描く）か。入力欄の昇格判定と共通の基準 */
+export const isLongText = (value: string): boolean =>
+  value.includes("\n") || value.length > 80
+
+const bodyText: CSSProperties = {
+  fontSize: "var(--text-base)",
+  lineHeight: 1.9,
+  margin: 0,
+  overflowWrap: "anywhere",
+}
+
+const codeChip: CSSProperties = {
+  fontFamily: "var(--font-mono)",
+  fontSize: "0.9em",
+  background: "var(--surface-2)",
+  border: "var(--border-w) solid var(--border)",
+  borderRadius: "var(--radius-s)",
+  padding: "1px 5px",
+}
+
+// インライン：**太字** / `コード` / [リンク](url)。分割は捕捉グループ付きなので
+// 区切り自身も配列に残る（split の仕様）
+const inlineToken = /(`[^`\n]+`|\*\*[^*\n]+\*\*|\[[^\]\n]+\]\([^)\s]+\))/g
+
+const renderInline = (text: string, prefix = ""): ReactNode[] =>
+  text.split(inlineToken).map((token, i) => {
+    if (!token) return null
+    const key = `${prefix}${i}`
+    if (token.startsWith("`") && token.endsWith("`") && token.length > 2) {
+      return (
+        <code key={key} style={codeChip}>
+          {token.slice(1, -1)}
+        </code>
+      )
+    }
+    if (token.startsWith("**") && token.endsWith("**") && token.length > 4) {
+      return (
+        <strong
+          key={key}
+          style={{
+            fontWeight: "var(--weight-bold)" as CSSProperties["fontWeight"],
+          }}
+        >
+          {token.slice(2, -2)}
+        </strong>
+      )
+    }
+    const link = /^\[([^\]]+)\]\(([^)\s]+)\)$/.exec(token)
+    if (link) {
+      return (
+        <a key={key} href={link[2]} target="_blank" rel="noreferrer">
+          {link[1]}
+        </a>
+      )
+    }
+    // 素の URL もリンクにする
+    return <span key={key}>{linkify(token, `${key}-`)}</span>
+  })
+
+// 段落内の改行は改行として残す（日本語の下書きは1行1文で書かれることが多い）
+const renderLines = (lines: string[]): ReactNode[] =>
+  lines.flatMap((line, i) =>
+    i === 0
+      ? renderInline(line, "0-")
+      : [
+          // biome-ignore lint/suspicious/noArrayIndexKey: 表示専用（テキスト全体が置き換わる）
+          <br key={`br${i}`} />,
+          ...renderInline(line, `${i}-`),
+        ],
+  )
+
+type ListItem = { text: string; nested: boolean }
+
+export type TableAlign = "left" | "center" | "right" | null
+
+export type Block =
+  | { kind: "heading"; level: number; text: string }
+  | { kind: "list"; ordered: boolean; items: ListItem[] }
+  | { kind: "quote"; lines: string[] }
+  | { kind: "code"; lines: string[] }
+  | { kind: "rule" }
+  | { kind: "table"; align: TableAlign[]; header: string[]; rows: string[][] }
+  | { kind: "para"; lines: string[] }
+
+const headingOf = /^(#{1,6})\s+(.*)$/
+const bulletOf = /^(\s*)[-*+]\s+(.*)$/
+const orderedOf = /^(\s*)\d+[.)]\s+(.*)$/
+const quoteOf = /^>\s?(.*)$/
+const ruleOf = /^(-{3,}|\*{3,}|_{3,})\s*$/
+
+// 表（GFM）：`| a | b |` の行の直後に区切り行（`|---|:-:|--:|`）があれば表。
+// 外側の | は無くてもよい。セルの分割は `\|` でエスケープした | を除く
+const splitCells = (line: string): string[] => {
+  let body = line.trim()
+  if (body.startsWith("|")) body = body.slice(1)
+  if (body.endsWith("|") && !body.endsWith("\\|")) body = body.slice(0, -1)
+  return body
+    .split(/(?<!\\)\|/)
+    .map((cell) => cell.trim().replace(/\\\|/g, "|"))
+}
+
+const delimiterCellOf = /^:?-+:?$/
+
+const alignOf = (cell: string): TableAlign =>
+  cell.startsWith(":") && cell.endsWith(":")
+    ? "center"
+    : cell.endsWith(":")
+      ? "right"
+      : cell.startsWith(":")
+        ? "left"
+        : null
+
+const isTableStart = (lines: string[], i: number): boolean => {
+  const head = lines[i] ?? ""
+  const delimiter = lines[i + 1] ?? ""
+  if (!head.includes("|") || !delimiter.includes("-")) return false
+  const cells = splitCells(delimiter)
+  return (
+    cells.length > 0 &&
+    cells.every((cell) => delimiterCellOf.test(cell)) &&
+    cells.length === splitCells(head).length
+  )
+}
+
+// 表の本体行は空行か別ブロックの始まりまで（| を含まない行も1セルの行として受ける）
+const isBlockStart = (line: string): boolean =>
+  headingOf.test(line) ||
+  bulletOf.test(line) ||
+  orderedOf.test(line) ||
+  quoteOf.test(line) ||
+  ruleOf.test(line.trim()) ||
+  line.trimStart().startsWith("```")
+
+/** 行を読んでブロックに割る（描画から切り離してテストできるよう公開している） */
+export const parseBlocks = (source: string): Block[] => {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n")
+  const blocks: Block[] = []
+  let i = 0
+
+  while (i < lines.length) {
+    const line = lines[i] ?? ""
+
+    if (line.trim() === "") {
+      i += 1
+      continue
+    }
+
+    // コードブロック（閉じないまま終わっても、そこまでをコードとして出す）
+    if (line.trimStart().startsWith("```")) {
+      const body: string[] = []
+      i += 1
+      while (
+        i < lines.length &&
+        !(lines[i] ?? "").trimStart().startsWith("```")
+      ) {
+        body.push(lines[i] ?? "")
+        i += 1
+      }
+      // 閉じの ``` を飛ばす（閉じないまま終端に着いたときは何も飛ばさない）
+      i += 1
+      blocks.push({ kind: "code", lines: body })
+      continue
+    }
+
+    if (isTableStart(lines, i)) {
+      const header = splitCells(line)
+      const align = splitCells(lines[i + 1] ?? "").map(alignOf)
+      const rows: string[][] = []
+      i += 2
+      while (i < lines.length) {
+        const current = lines[i] ?? ""
+        if (current.trim() === "" || isBlockStart(current)) break
+        const cells = splitCells(current)
+        // 列数は見出しに揃える（足りなければ空セル、余れば捨てる）
+        rows.push(header.map((_, col) => cells[col] ?? ""))
+        i += 1
+      }
+      blocks.push({ kind: "table", align, header, rows })
+      continue
+    }
+
+    if (ruleOf.test(line.trim())) {
+      blocks.push({ kind: "rule" })
+      i += 1
+      continue
+    }
+
+    const heading = headingOf.exec(line)
+    if (heading) {
+      blocks.push({
+        kind: "heading",
+        level: (heading[1] ?? "#").length,
+        text: heading[2] ?? "",
+      })
+      i += 1
+      continue
+    }
+
+    const quote = quoteOf.exec(line)
+    if (quote) {
+      const body: string[] = []
+      while (i < lines.length) {
+        const next = quoteOf.exec(lines[i] ?? "")
+        if (!next) break
+        body.push(next[1] ?? "")
+        i += 1
+      }
+      blocks.push({ kind: "quote", lines: body })
+      continue
+    }
+
+    const bullet = bulletOf.exec(line)
+    const ordered = orderedOf.exec(line)
+    if (bullet || ordered) {
+      const isOrdered = ordered !== null && bullet === null
+      const items: ListItem[] = []
+      while (i < lines.length) {
+        const current = lines[i] ?? ""
+        const next = isOrdered
+          ? orderedOf.exec(current)
+          : bulletOf.exec(current)
+        if (!next) break
+        items.push({
+          text: next[2] ?? "",
+          // ネストは1段だけ表現する（2段以上は同じ深さに畳む）
+          nested: (next[1] ?? "").length >= 2,
+        })
+        i += 1
+      }
+      blocks.push({ kind: "list", ordered: isOrdered, items })
+      continue
+    }
+
+    // 段落：空行 or 他のブロックの始まりまで
+    const body: string[] = []
+    while (i < lines.length) {
+      const current = lines[i] ?? ""
+      if (
+        current.trim() === "" ||
+        isBlockStart(current) ||
+        isTableStart(lines, i)
+      ) {
+        break
+      }
+      body.push(current)
+      i += 1
+    }
+    blocks.push({ kind: "para", lines: body })
+  }
+
+  return blocks
+}
+
+const headingStyle = (level: number): CSSProperties => ({
+  margin: 0,
+  fontSize:
+    level <= 1
+      ? "var(--text-lg)"
+      : level === 2
+        ? "var(--text-md)"
+        : "var(--text-base)",
+  fontWeight: "var(--weight-bold)" as CSSProperties["fontWeight"],
+  lineHeight: "var(--leading-tight)",
+  ...(level <= 2
+    ? {
+        borderBottom: "var(--border-w) solid var(--border)",
+        paddingBottom: "var(--space-2)",
+      }
+    : { color: "var(--ink)" }),
+})
+
+const tableCell: CSSProperties = {
+  padding: "var(--space-1) var(--space-3)",
+  borderBottom: "var(--border-w) solid var(--border)",
+  verticalAlign: "top",
+  overflowWrap: "anywhere",
+}
+
+const Blocks = ({ blocks }: { blocks: Block[] }) => (
+  <>
+    {blocks.map((block, i) => {
+      // ブロックは位置で安定（テキスト全体が置き換わる表示専用リスト）
+      const key = `${block.kind}${i}`
+      switch (block.kind) {
+        case "heading": {
+          // 見出しレベルは Markdown の意味をそのまま持たせる（h1..h6）
+          const Tag = `h${Math.min(6, block.level)}` as "h1"
+          return (
+            <Tag key={key} style={headingStyle(block.level)}>
+              {renderInline(block.text)}
+            </Tag>
+          )
+        }
+        case "list": {
+          const Tag = block.ordered ? "ol" : "ul"
+          return (
+            <Tag
+              key={key}
+              style={{
+                ...bodyText,
+                paddingLeft: "var(--space-5)",
+                display: "grid",
+                gap: "var(--space-1)",
+              }}
+            >
+              {block.items.map((item, j) => (
+                <li
+                  // biome-ignore lint/suspicious/noArrayIndexKey: 表示専用
+                  key={j}
+                  style={item.nested ? { marginLeft: "var(--space-5)" } : {}}
+                >
+                  {renderInline(item.text)}
+                </li>
+              ))}
+            </Tag>
+          )
+        }
+        case "quote":
+          return (
+            <blockquote
+              key={key}
+              style={{
+                ...bodyText,
+                margin: 0,
+                paddingLeft: "var(--space-4)",
+                borderLeft: "var(--border-w-strong) solid var(--border-strong)",
+                color: "var(--muted)",
+              }}
+            >
+              {renderLines(block.lines)}
+            </blockquote>
+          )
+        case "code":
+          return (
+            <pre
+              key={key}
+              style={{
+                margin: 0,
+                padding: "var(--space-3) var(--space-4)",
+                background: "var(--surface-2)",
+                border: "var(--border-w) solid var(--border)",
+                borderRadius: "var(--radius-s)",
+                fontSize: "var(--text-sm)",
+                lineHeight: 1.7,
+                overflowX: "auto",
+              }}
+            >
+              {block.lines.join("\n")}
+            </pre>
+          )
+        case "rule":
+          return (
+            <hr
+              key={key}
+              style={{
+                margin: 0,
+                border: "none",
+                borderTop: "var(--border-w) solid var(--border)",
+              }}
+            />
+          )
+        case "table":
+          return (
+            <div key={key} style={{ overflowX: "auto" }}>
+              <table
+                style={{
+                  borderCollapse: "collapse",
+                  fontSize: "var(--text-sm)",
+                  lineHeight: 1.6,
+                  minWidth: "100%",
+                }}
+              >
+                <thead>
+                  <tr>
+                    {block.header.map((cell, col) => (
+                      <th
+                        // biome-ignore lint/suspicious/noArrayIndexKey: 表示専用
+                        key={col}
+                        style={{
+                          ...tableCell,
+                          textAlign: block.align[col] ?? "left",
+                          fontWeight:
+                            "var(--weight-bold)" as CSSProperties["fontWeight"],
+                          color: "var(--muted)",
+                          background: "var(--surface-2)",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {renderInline(cell)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {block.rows.map((row, r) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: 表示専用
+                    <tr key={r}>
+                      {row.map((cell, col) => (
+                        <td
+                          // biome-ignore lint/suspicious/noArrayIndexKey: 表示専用
+                          key={col}
+                          style={{
+                            ...tableCell,
+                            textAlign: block.align[col] ?? "left",
+                          }}
+                        >
+                          {renderInline(cell)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )
+        default:
+          return (
+            <p key={key} style={bodyText}>
+              {renderLines(block.lines)}
+            </p>
+          )
+      }
+    })}
+  </>
+)
+
+export const Markdown = ({ text }: { text: string }) => (
+  <div style={{ display: "grid", gap: "var(--space-4)" }}>
+    <Blocks blocks={parseBlocks(text)} />
+  </div>
+)
+
+// 一度縮めてから測らないと、削ったときに高さが戻らない
+const fitToContent = (el: HTMLTextAreaElement | null) => {
+  if (!el) return
+  el.style.height = "auto"
+  el.style.height = `${el.scrollHeight}px`
+}
+
+/**
+ * 内容の高さまで伸びる textarea（上限を超えたらその中でスクロール）。
+ * 返り値は ref にそのまま渡す。「編集」を押して後から現れる欄でも、
+ * 付いた瞬間に測るので初回から正しい高さで出る
+ */
+export const useAutoGrow = (
+  value: string,
+): ((el: HTMLTextAreaElement | null) => void) => {
+  const ref = useRef<HTMLTextAreaElement | null>(null)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value は測り直しの引き金（本文では読まない）
+  useLayoutEffect(() => {
+    fitToContent(ref.current)
+  }, [value])
+  return useCallback((el: HTMLTextAreaElement | null) => {
+    ref.current = el
+    fitToContent(el)
+  }, [])
+}