✍️ 02. ノートとエディタ (Notes & Editor)

快適な執筆体験を実現するコア機能。
FlashNote は、「見たまま直感的に書ける快適さ」と「Markdown による素早い打鍵感」を兼ね備えた最新鋭のリッチテキストエディタを搭載しています。

📑 本ガイドの目次

1. ノートの新規作成・編集・名前変更・削除
2. Markdown＆WYSIWYG（4つの表示ビュー）
3. 見出し・リスト・引用・コード・リンク
4. 画像の挿入と管理
5. 表・図表・LaTeX数式
6. 下書きとフォルダ管理

1. ノートの新規作成・編集・名前変更・削除

1.1 ライフサイクル管理

• 新規作成：サイドバー右上の + アイコンをクリック、または Ctrl/Cmd + N；
• ノートの編集：左側の一覧から任意のノートカードをクリックすると、瞬時にエディタへ読み込まれます；
• 名前の変更：エディタ上部のタイトル欄をクリックして書き換え、Enter で確定；
• 削除とゴミ箱：カード右上の ··· から「削除」を選択。「最近削除した項目」へ移動されるため、誤操作時も安全に復元可能です。

2. Markdown＆WYSIWYG（4つの表示ビュー）

FlashNote は創作段階に応じた 4つの表示モード (View Modes) をサポートしています：

1. ビジュアルモード (Visual)：所見即所得（WYSIWYG）。入力と同時にリッチなレイアウトで表示；
2. 2ペイン分割 (Split)：左側にリッチテキスト編集、右側にリアルタイムの Markdown ソースを並行表示；
3. Markdownソース (Source)：ピュアテキスト打ち込み用ビュー。記号の自動補完にも対応；
4. プレビュー (Preview)：読者視点の表示を再現し、リンクの動作や組版を確認可能。

3. 見出し・リスト・引用・コード・リンク

3.1 見出しと階層構造

• # 〜 ###### で見出し 1〜6 に対応；
• 見出しの折りたたみ機能と右側の目次ナビゲーションで長文も快適に執筆。

3.2 リストとタスクチェックボックス

• 箇条書きリスト：- または * + スペース；
• 番号付きリスト：1. + スペースで自動インクリメント；
• タスクリスト：[] + スペースでチェック可能なチェックボックスを挿入。

3.3 引用ブロックとハイパーリンク

• > + スペースで半透明の美しい引用枠を挿入；
• 範囲選択後に Ctrl/Cmd + K でリンクの追加・編集。

3.4 スマートコードブロックと構文ハイライト

エンジニアやテクニカルライター向けの本格設計：

• 素早い呼び出し：バッククォート3つ ``` を入力して Enter；
• 言語切り替え：右上のドロップダウン（TypeScript, Python, Rust, Go, SQL, Shell, HTML/CSS など多数対応）；
• ワンクリックコピー：右上のコピーアイコンでクリップボードへ即座に複製；
• 行番号選択防止：左側の行番号は CSS user-select: none により保護されているため、コード選択時に誤って行番号をコピーしません。

4. 画像の挿入と管理

オフラインでも安心の画像キャッシュ設計：

• 柔軟な挿入：スクリーンショットから直接 Ctrl/Cmd + V 貼り付け、ローカル画像のドラッグ＆ドロップ、ツールバーからの選択；
• 自動オフライン保存：Web上から貼り付けた画像は自動的にブラウザ内の IndexedDB へ保存され、外部サイトのリンク切れを防ぎます；
• 拡大ライトボックス：本文中の画像をダブルクリックすると全画面表示になり、ズームや回転が可能です。

5. 表・図表・LaTeX数式

5.1 ビジュアルテーブル

• 行・列の追加や削除、配置調整が直感的に行えるマトリクステーブル；
• LaTeX 記号の Unicode 変換：テーブル書き出し時に数学記号をキレイな Unicode 記号（\in $\rightarrow$ $\in$ など）へ自動変換。

5.2 KaTeX 数式

• インライン数式：$E=mc^2$ で囲む；
• ブロック数式：独立した行で $$ ... $$ を使用；
• 高速な KaTeX エンジンにより、微分積分、行列、ギリシャ文字などをリアルタイム組版。

5.3 インタラクティブ Mermaid 図表

コードブロックの言語を mermaid に指定することで、フローチャートやシーケンス図を描画：

• キャンバス操作：マウスホイールで 30%〜350% ズーム、ドラッグで移動；
• 構文エラー防止：誤字脱字による画面クラッシュを防ぐサニタイズ機構を搭載；
• SVG / PNG 書き出し：ワンクリックで高品質なベクター画像として出力可能。

6. 下書きとフォルダ管理

• 下書きフラグ：推敲中のメモに「下書き」マークを付与し、ブログ公開や同期対象から除外；
• 階層フォルダ：カテゴリ別（例：開発/フロントエンド、読書録）にフォルダを分類して整理。