feat(web): P66 — MarkdownView 폴딩/highlight/wikilink 확장

[hang-in]

Summary

사용자 보고 "마크다운 폴딩 제대로 안 됨" + syntax highlight / Obsidian wikilink 미지원. react-markdown v9 + remark-gfm 만 사용 중이던 MarkdownView 를 4 기능 확장.

변경

• deps 추가 (web/package.json): rehype-raw@7.0.0, rehype-highlight@7.0.2, highlight.js@11.11.1, remark-wiki-link@2.0.1
• web/src/components/MarkdownView.tsx:
  • rehypePlugins=[rehypeRaw, rehypeHighlight] → <details> raw HTML + 코드블록 syntax highlight
  • remarkPlugins 에 remark-wiki-link 추가 → [[Page]] → /wiki/Page_Name NavLink
  • components override: h2/h3 collapse toggle, a 커스텀 (wikilink/외부 분기)
  • 기존 p/li/code query 하이라이트 회귀 없음
• highlight.js/styles/github-dark.css import

한계 (서브에이전트 보고)

• heading collapse 는 MVP — nextElementSibling DOM 외부 조작이라 React 리렌더와 충돌 가능. 차후 fully React state 기반 재구현 권장.
• MarkdownView 청크 502KB (highlight.js 전 언어 번들) — 차후 lowlight 또는 언어 subset 도입.

Test plan

• pnpm typecheck
• pnpm build
• CI 통과
• (수동) <details> / 코드블록 / [[link]] 동작 확인

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request enhances the MarkdownView component by integrating rehype-raw for HTML support, rehype-highlight for syntax highlighting, and remark-wiki-link for Obsidian-style links, while also adding collapsible headings. Feedback highlights security concerns regarding XSS risks and a vulnerable dependency, alongside accessibility issues with the collapsible headings' lack of keyboard support. Additionally, reviewers advised against direct DOM manipulation, suggesting a more React-idiomatic state-based approach for element visibility.

[gemini-code-assist]

rehype-raw 플러그인은 마크다운 내의 HTML 태그를 그대로 렌더링하므로, 악의적인 스크립트가 포함된 마크다운이 입력될 경우 XSS(Cross-Site Scripting) 공격에 노출될 위험이 있습니다. content 데이터의 출처가 사용자 입력이거나 외부 API라면, rehype-sanitize를 함께 사용하여 허용된 태그와 속성만 렌더링하도록 제한하는 것이 안전합니다.

[gemini-code-assist]

@ungap/structured-clone@1.3.0 버전은 보안 취약점(CWE-502: Deserialization of Untrusted Data)으로 인해 deprecated 되었습니다. hast-util-raw 등에서 전파되는 전이 의존성으로 보이는데, 가능한 경우 1.3.1 이상의 버전으로 업데이트하는 것이 안전합니다.

[gemini-code-assist]

키보드 접근성 구현을 위해 KeyboardEvent 타입을 추가로 임포트해야 합니다.

Suggested change

	import {
	Fragment,
	type ReactNode,
	useMemo,
	useState,
	type MouseEvent,
	} from "react";
	import {
	Fragment,
	type ReactNode,
	useMemo,
	useState,
	type MouseEvent,
	type KeyboardEvent,
	} from "react";

[gemini-code-assist]

React 컴포넌트 내부에서 nextElementSibling과 style.display를 직접 조작하는 방식은 React의 선언적 렌더링 모델과 충돌할 수 있습니다. React가 리렌더링을 수행할 때 직접 수정한 DOM 상태가 무시되거나 초기화될 수 있으므로, 장기적으로는 마크다운 AST를 분석하여 상태 기반으로 형제 요소들의 가시성을 제어하는 구조로 개선하는 것을 권장합니다.

[gemini-code-assist]

role="button"과 tabIndex={0}을 설정하여 접근성을 고려했으나, 키보드 사용자(Enter 또는 Space 키)를 위한 onKeyDown 핸들러가 누락되었습니다. 마우스 클릭뿐만 아니라 키보드 입력으로도 폴딩 기능이 동작하도록 개선이 필요합니다.

  const marker = collapsed ? "▶" : "▼";
  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      onClick(e as unknown as MouseEvent<HTMLElement>);
    }
  };
  const props = {
    onClick,
    onKeyDown,
    "aria-expanded": !collapsed,
    role: "button",
    tabIndex: 0,
    style: { cursor: "pointer", userSelect: "none" as const },