Skip to content

[Feature] マークダウンソース表示トグル — テキスト選択でローテキスト表示に切り替え #57

@ktmage

Description

@ktmage

Description

AI の返答に含まれるマークダウンテキストの任意の範囲をドラッグ選択すると、選択に含まれるブロック(段落、リスト、見出しなど)がマークダウンのソーステキスト(ローテキスト)でのコードブロック表示に切り替わる機能。

ソース表示状態ではテキストをそのまま選択・コピーでき、閉じるボタン(×)で元のレンダリング表示に戻せる。

Motivation

現状、AI がマークダウン記法で出力した内容はレンダリングされて表示されるため、元のマークダウンソースをコピーしたい場合に「コードブロックで出して」と AI に再度指示する必要がある。これは手間がかかり、UX として不便。

テキストを選択するだけでソース表示に切り替わり、そのままコピーできる仕組みがあれば、この手間を解消できる。

Proposed Solution

技術アプローチ

  1. TextPartView のリファクタリング: marked.parse() による一枚の HTML 文字列ではなく、marked.lexer() でトークンリストを取得し、各ブロックトークンを独立した React コンポーネント(MarkdownBlock)で描画する
  2. 選択→切り替え: mouseup イベントで Selection API から選択範囲の DOM を取得し、各ブロック要素の data-token-index 属性から対応するトークンを特定。選択されたブロックだけ isRaw=true に切り替え
  3. ソース表示: isRaw=true のブロックは token.raw(元のマークダウンテキスト)を <pre><code> で表示
  4. 解除: ソース表示ブロックの右上に閉じるボタン(×)を表示。クリックで isRaw=false に戻す

動作仕様

  • 切り替え単位: マークダウンのブロック単位(段落、リスト、見出し、テーブルなど)。段落の途中まで選択しても段落全体が切り替わる
  • ソース表示の見た目: コードブロックスタイル(背景色 --vscode-textCodeBlock-background)
  • 複数範囲: 複数箇所を個別にソース表示可能。それぞれ独立して閉じられる
  • ストリーミング中: AI がまだ出力中のテキストパートではこの機能は使用不可

受け入れ条件

  • AI 返答のテキストをドラッグ選択すると、選択に含まれるブロックがソース表示(コードブロック風)に切り替わる
  • ソース表示状態のテキストを選択・コピーできる
  • 閉じるボタン(×)で元のレンダリング表示に戻せる
  • 複数箇所を個別にソース表示・解除できる
  • ストリーミング中のテキストパートでは切り替えが発生しない
  • 単体テスト・シナリオテストが追加されている

関連ドキュメント

  • 外部仕様書: .ktmage/project/external-spec/markdown-source-toggle.md
  • 調査メモ: .ktmage/project/agent/markdown-raw-toggle/research.md

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions