TextEditor

id と label を渡します。書式ツール（太字・斜体・取り消し線・リンク・見出し・引用・コード・箇条書き・番号付きの箇条書き・ファイルを添える・元に戻す・やり直す）を並べ、その下に入力エリアを置きます。全体は複数行の入力欄（Textarea）と同じ1pxの灰色（#c1c1c1）の枠と角丸5pxで囲み、影は付けません。フォーカスがある間は青い縁と淡い青の輪で示します。入力エリアの文字は続けて読む文章の大きさ（14px）です。ツールバーはBasecamp 2の本文の上の書式ツールと同じく、面も罫線も持たずに入力エリアと同じ白の上に置き、左端を本文の書き始めにそろえます。書式ツールは控えめな Button と同じ平らな白・1pxの灰色の枠・下の1pxの影を持つボタンを、隙間なくつなげて間を1本の線にした一組です。tools で並べるツールを選び、"|" で区切りを入れます。区切りの前後は別の一組になり、8pxの間隔で分けます。

placement="bottom" にするとツールバーを入力エリアの下に置きます。actions に渡した送信・下書きの保存などの操作は、ツールバーの末尾に置きます。

このコンポーネントは見た目とツールバーだけを持ち、特定のエディターに依存しません。書式を付ける動きは利用側のエディターに任せます。editor に任意のリッチテキストのエディターが描く入力エリア（contenteditable の要素）を渡し、ツールのボタンの data-text-editor-tool（bold・italic・link・bullets など）を読んでエディターの操作を呼びます。現在適用中の書式のツールに data-active="true" を付けると、選んだ状態の共通の見た目（淡い青の縦の塗りに紺の縁と紺の文字）で示します。

editor を渡さなければ textarea を置きます。name・placeholder・value・disabled などの残りの属性は textarea に付き、class は外側の要素に付きます。textarea のままの時も、ツールを動かすのは利用側です（書式の記号を差し込むなど）。ツールを使わない時は tools={[]} にします。ツールも actions も無い時は、ツールバーを描きません。disabled はツールも押せなくし、入力エリアの面と枠はそのままにして文字だけを灰色にします。

ツールバーは ToolbarController を toolbar として登録して使います。書式を付ける動きのcontrollerは持ちません。送信する値は textarea の本文か、editor の側で用意した値です。JavaScriptが無い時は textarea に書いた文を送ります。