# 画面設計書 8-MarkdownPaneContent（Markdownビューア）

## 概要

本ドキュメントは、Windows Terminal のペイン内で Markdown ファイルを読み込み・レンダリングする MarkdownPaneContent の画面設計書である。Markdown のプレビュー表示とコードブロックの実行機能を提供する。

### 本画面の処理概要

**業務上の目的・背景**：MarkdownPaneContent は README やドキュメントファイルをターミナル内でプレビュー表示するための機能を提供する。コードブロックの実行機能により、ドキュメント内のコマンド例をそのままターミナルで実行できるため、チュートリアルやセットアップガイドの参照時に効率的な作業が可能となる。

**画面へのアクセス方法**：ペイン操作により Markdown ビューアが開かれた際にペイン内に表示される。

**主要な操作・処理内容**：
1. ファイルパス入力（FilePathInput）による Markdown ファイルの指定
2. ロードボタン（_loadTapped）によるファイル読み込み
3. 編集ボタン（_editTapped）による編集モード/プレビューモードの切替
4. 閉じるボタン（_closeTapped）によるペインの閉鎖
5. Markdown テキストのレンダリング表示（RenderedMarkdown）
6. コードブロック内コマンドのターミナルへの送信実行

**画面遷移**：
- 親：Pane（TerminalPage 内のペイン）

**権限による表示制御**：特になし

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 122 | マークダウンペイン | 主機能 | Markdownファイルの読み込み・レンダリング・コードブロック実行 |
| 34 | 入力の送信 | 補助機能 | コードブロック実行時にターミナルへテキストを送信 |

## 画面種別

コンテンツペイン / 表示・編集

## URL/ルーティング

該当なし

## 入出力項目

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|------|------|
| filePath | 入力 | hstring | Markdownファイルのパス（コンストラクタ引数） |
| Editing | 入力/出力 | bool | 編集モードフラグ |
| FileContents | 入力/出力 | hstring | ファイル内容（TwoWayバインディング） |
| DispatchActionRequested | 出力 | イベント | コードブロック実行時のアクション要求 |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| FilePathInput | Grid.Row=0, Column=0 | ファイルパス入力テキストボックス |
| LoadButton | Grid.Row=0, Column=1 | ファイル読み込みボタン（Glyph: E8E5 OpenFile） |
| EditButton | Grid.Row=0, Column=1 | 編集モード切替ボタン（Glyph: E932 Label） |
| CloseButton | Grid.Row=0, Column=1 | 閉じるボタン（Glyph: E8BB ChromeClose） |
| InProcContent | Grid.Row=1, Column=0 | インプロセスコンテンツ領域（Width=0、通常非表示） |
| _editor | Grid.Row=1, Column=1 | テキスト編集領域（Editing=true時に表示、Cascadia Code フォント） |
| RenderedMarkdown | Grid.Row=1, Column=1 | Markdown レンダリング表示領域（ScrollViewer内のStackPanel） |

## イベント仕様

### 1-ファイル読み込み（_loadTapped）

LoadButton をタップすると _loadTapped が呼び出され、FilePathInput のテキストからファイルパスを取得して _loadFile() でファイルを読み込む。読み込み後 _renderFileContents() でMarkdownを解析・レンダリングする。

### 2-編集モード切替（_editTapped）

EditButton をタップすると Editing プロパティが切り替わる。Editing=true の場合は _editor（TextBox）が表示され、RenderedMarkdown（ScrollViewer）が非表示になる。Editing=false に戻すと再度レンダリングが実行される。

### 3-閉じる（_closeTapped）

CloseButton をタップすると Close() が呼び出され、CloseRequested イベントが発火してペインが閉じられる。

### 4-コードブロック実行（_handleRunCommandRequest）

レンダリングされた Markdown のコードブロック内の実行ボタンがクリックされると _handleRunCommandRequest が呼び出され、DispatchActionRequested イベントを通じて SendInput アクションとしてターミナルにコマンドを送信する。

## データベース更新仕様

該当なし

## メッセージ仕様

該当なし

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| ファイルが見つからない | ファイル読み込み失敗時のエラー処理 |
| 不正なMarkdown構文 | レンダリング時に可能な範囲で表示 |

## 備考

- UserControl ベース
- IPaneContent インターフェースを実装し、ペインとして動作
- BasicPaneEvents からの汎用イベント（CloseRequested, BellRequested 等）を継承
- Dark/Light/HighContrast の3テーマに対応（PageBackground: #282828 / #F9F9F9）
- _editor は Cascadia Code フォント、AcceptsReturn=True で複数行編集対応
- FileContents は Mode=TwoWay でエディタとの双方向バインディング
- InProcContent は Width=0 で通常非表示（将来の拡張用と推測される）
- コードブロック実行時は PlayButton（再生アイコン）がホバー時に色変化する（PlayButtonHoveredColor）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MarkdownPaneContent.h | `src/cascadia/TerminalApp/MarkdownPaneContent.h` | IPaneContent 実装（25-45行目）。Editing/FileContents プロパティ（17-18行目）。DispatchActionRequested イベント（47行目） |

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MarkdownPaneContent.xaml | `src/cascadia/TerminalApp/MarkdownPaneContent.xaml` | 2行Gridレイアウト（41-44行目）。上部ツールバー（46-85行目）、下部コンテンツ領域（87-137行目） |

**主要処理フロー**:
1. **51-59行目**: FilePathInput - ファイルパス入力
2. **62-68行目**: LoadButton - ファイル読み込み
3. **69-76行目**: EditButton - 編集モード切替
4. **104-117行目**: _editor - テキスト編集領域
5. **119-133行目**: _scrollViewer/RenderedMarkdown - レンダリング表示

### プログラム呼び出し階層図

```
Pane
  └─ MarkdownPaneContent (IPaneContent)
       ├─ FilePathInput -> _loadTapped -> _loadFile()
       │                                   └─ _renderFileContents()
       │                                        ├─ _loadText()
       │                                        └─ _loadMarkdown()
       ├─ EditButton -> _editTapped -> Editing切替
       ├─ CloseButton -> _closeTapped -> Close()
       └─ CodeBlock実行 -> _handleRunCommandRequest
            └─ DispatchActionRequested (SendInput)
                 └─ TermControl に入力送信
```

### データフロー図

```
[入力]                    [処理]                    [出力]

ファイルパス ─────> _loadFile()             ──> FileContents
                     └─> ファイル読み込み

FileContents ────> _renderFileContents()   ──> RenderedMarkdown
                     ├─> _loadText()             (StackPanel 内に
                     └─> _loadMarkdown()          XAML要素を動的生成)

コードブロック実行 > _handleRunCommandRequest > DispatchActionRequested
                                                  └─> SendInput アクション
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MarkdownPaneContent.xaml | `src/cascadia/TerminalApp/MarkdownPaneContent.xaml` | テンプレート | XAML レイアウト定義 |
| MarkdownPaneContent.h | `src/cascadia/TerminalApp/MarkdownPaneContent.h` | ソース | クラス宣言 |
| MarkdownPaneContent.cpp | `src/cascadia/TerminalApp/MarkdownPaneContent.cpp` | ソース | 実装（ファイル読み込み・レンダリング） |
| BasicPaneEvents.h | `src/cascadia/TerminalApp/BasicPaneEvents.h` | ソース | ペイン共通イベント基底クラス |
