2026年 文書編集モーダルUI改善とチャンク分割確認
サマリー
- 文書編集モーダルUI: 保存・キャンセルボタンの視認性向上、Toast UI ツールバーアイコン非表示の修正、モーダル・エディタ枠のスタイル調整を行った。
- ツールバーアイコン:
.panel button に background を当てていたため Toast UI のスプライト(background-image)が消えていた。ツールバーアイコン用ボタンを :not(.toastui-editor-toolbar-icons):not([class*="toolbar-icons"]) で除外し、アイコンが表示されるようにした。
- チャンク分割: モーダル保存時も
add_item_text 経由で 800 文字固定長のチャンク分割が行われていることを確認。文・段落単位の分割にはなっていない。
UI 変更内容
| 対象 |
内容 |
| 保存・キャンセル |
.docs-edit-modal .setting-actions .secondary-btn および #docs-save-btn の背景・枠・色を調整し、ダークテーマで視認しやすくした。 |
| ツールバーアイコン |
styles.css の .panel button を「Toast UI ツールバーアイコン用」に当たらないよう除外。background ショートハンドで background-image が上書きされないようにした。 |
| 枠・モーダル |
.docs-edit-modal-box の border / border-radius / box-shadow、.docs-editor-container .toastui-editor-defaultUI の枠、設定アクション区切りの線を控えめに統一。 |
| 文書パネルツールバー |
「新規登録」「一覧更新」の .docs-toolbar .secondary-btn のスタイルを調整。 |
主な変更ファイル
| 種別 |
パス |
| スタイル |
src/frontend/styles.css(.panel button の除外、モーダル・エディタ・ボタンまわり) |
| E2E |
tests/e2e/specs/screenshot-docs-modal.spec.js(編集モーダル開いてスクショ保存)、docs-edit-drawing.spec.js(描画・ボタン表示の検証) |
| スクリプト |
package.json(test:e2e:screenshot 追加) |
チャンク分割の仕様(確認結果)
- 処理:
add_item_text(src/backend/src/mcp/tools/items.rs)で本文を chars.chunks(800) により 800 文字ごと に分割。
- モーダル保存: フロントの「保存」で
callMcp('add_item_text', { path, content }) が呼ばれ、上記と同じチャンク分割が適用される。
- 注意: 文の長さや段落には依存しておらず、固定長 800 文字で切りているだけ。文・段落単位にしたい場合は別ロジックの検討が必要。