Newer
Older
TelosDB / journals / 202603-013-文書編集モーダルUI改善とチャンク分割確認.md

2026年 文書編集モーダルUI改善とチャンク分割確認

サマリー

  • 文書編集モーダルUI: 保存・キャンセルボタンの視認性向上、Toast UI ツールバーアイコン非表示の修正、モーダル・エディタ枠のスタイル調整を行った。
  • ツールバーアイコン: .panel buttonbackground を当てていたため 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_textsrc/backend/src/mcp/tools/items.rs)で本文を chars.chunks(800) により 800 文字ごと に分割。
  • モーダル保存: フロントの「保存」で callMcp('add_item_text', { path, content }) が呼ばれ、上記と同じチャンク分割が適用される。
  • 注意: 文の長さや段落には依存しておらず、固定長 800 文字で切りているだけ。文・段落単位にしたい場合は別ロジックの検討が必要。