[basecamp/lexxy] ドキュメント構造の改善とUsageページの分離
変更の背景
Lexxyのドキュメントにおいて、Configuration(設定)ページに使い方(Usage)に関する情報が混在していたため、情報の整理と構造化が必要とされていました。この変更では、使い方に関するコンテンツを独立したページとして抽出し、各ページの役割を明確化しています。
主な変更内容
1. Usageページの新規作成
新しく docs/usage.md が追加され、Lexxyエディタの基本的な使い方がまとめられました。このページは、Railsでの使用方法とVanilla HTMLでの使用方法の両方をカバーしています。
Railsでの使用例:
<%= form_with model: @post do |form| %>
<%= form.rich_text_area :content %>
<% end %>
Vanilla HTMLでの使用例:
<lexxy-editor name="post[body]"...>...</lexxy-editor>
2. Configurationページの整理
Configurationページ(docs/configuration.md)からUsageに関する記述を削除し、設定オプションのみに焦点を当てた構成に変更されました。
削除された内容:
- Action Textフォームヘルパーの使用例
- <lexxy-editor> タグの基本的な使い方
改善された構成:
エディタオプションとグローバルオプションが明確に区別され、標準HTML属性のサポートについての説明が追加されました。
### Editor options
Editors support the following options, configurable using presets and element attributes:
- `toolbar`: Pass `false` to disable the floating text formatting toolbar.
- `multiLine`: Pass `false` to force single line editing.
- `richText`: Pass `false` to disable rich text editing.
Lexxy also supports standard HTML attributes:
- `placeholder`: Text displayed when the editor is empty.
- Form attributes: `name`, `value`, `required`, `disabled`, etc.
3. ナビゲーション順序の調整
ページの論理的な流れを改善するため、ナビゲーション順序が変更されました:
- Usageページ:
nav_order: 3(新規) - Configurationページ:
nav_order: 3→nav_order: 4(変更)
これにより、ユーザーは「使い方」を先に学んでから「設定」に進むという自然な流れでドキュメントを読むことができます。
技術的な意義
ElementInternals APIの明示化
変更後の文書では、Lexxyが ElementInternals APIを使用して標準的なフォームコントロールとして機能することが、より分かりやすく説明されています。これにより、開発者はLexxyが単なるカスタム要素ではなく、ブラウザネイティブなフォーム機能を完全にサポートしていることを理解できます。
ドキュメント設計のベストプラクティス
この変更は、技術ドキュメントにおける「関心の分離」の原則を実践しています:
- Usage: 「何ができるか」「どう使うか」
- Configuration: 「どうカスタマイズするか」
この構造により、初めてLexxyを使用する開発者は迷わず基本的な実装から始められ、必要に応じて詳細な設定オプションを参照できるようになりました。