フォーマット一括クリア機能の追加
フォーマットドロップダウンに「Clear formatting」ボタンが追加されました。選択範囲内のテキスト装飾・リンク・ブロックスタイルをまとめて除去できます。
背景
これまで lexxy エディタでは、太字・斜体・リンクといった書式を個別のボタンで一つずつ解除する必要がありました。コピー&ペーストで持ち込まれた複合的な書式や、複数の装飾が重なったテキストを素のパラグラフに戻すには、複数の操作を繰り返す必要がありました。本PRはその煩雑さを一操作で解決します。
技術的な変更
clearFormatting() メソッドが src/editor/contents.js に実装され、選択範囲に対して以下の順序でフォーマットを除去します：
- テキストノード単位のインライン書式（太字・斜体・下線・取り消し線）とスタイル（ハイライトなど）
- リンク
- ブロッククォートのアンラップ
- ブロックタイプのパラグラフへのリセット（コードブロック・リストを含む）
実装の核心は、Lexical の $forEachSelectedTextNode を使って各テキストノードに setFormat(0) と setStyle("") を適用する点です。format はビットフラグで管理されており、0 を渡すことで全フラグを一括クリアできます。
clearFormatting() {
const selection = $getSelection()
if (!$isRangeSelection(selection)) return
$forEachSelectedTextNode(node => {
node.setFormat(0)
node.setStyle("")
})
$toggleLink(null)
this.#topLevelElementsInSelection(selection).filter($isQuoteNode).forEach(node => this.#unwrap(node))
$setBlocksType(selection, () => $createParagraphNode())
}
ブロッククォートの除去には既存の #unwrap() ヘルパーを流用し、$setBlocksType でコードブロックやリストもパラグラフへ変換します。PR Descriptionで明記されている通り、テーブル自体の構造は維持し、内部のテキスト書式のみをクリアする仕様となっています。
UIレイヤーでは、src/elements/toolbar.js に区切り線（lexxy-editor__toolbar-separator）と「Clear formatting」ボタンが追加され、src/elements/toolbar_icons.js に消しゴム形のSVGアイコン（clearFormatting）が追加されました。コマンドの配線は src/editor/command_dispatcher.js の COMMANDS 配列への "clearFormatting" の追加と、対応する dispatchClearFormatting() メソッドの実装によって完結しています。
設計判断
インライン書式・リンク・ブロックスタイルの除去を単一メソッド内で順序立てて行う設計が採用されています。それぞれ異なるLexical APIを使う必要があるため（テキストノードへの直接操作、$toggleLink、$setBlocksType）、責務を一か所にまとめることで呼び出し側をシンプルに保っています。
PR Descriptionで明記されている通り、テーブルはクリア対象外とされており、テーブル内部のテキスト書式のみが除去されます。ブロック構造の変換と内部書式のクリアを明示的に区別することで、仕様の境界が明確に定義されています。
ブラウザテストは test/browser/tests/formatting/clear_formatting.test.js に独立したファイルとして追加され、太字・斜体・下線・取り消し線・リンク・カラーハイライトなど書式の種類ごとに個別のテストケースが用意されています。
まとめ
$forEachSelectedTextNode によるビットフラグのゼロクリアと既存ヘルパーの組み合わせにより、最小限のコード追加で多様な書式を一括除去できる機能が実現されました。各書式除去APIを正しい順序で呼ぶだけで完結する実装は、Lexicalの設計に沿ったシンプルな拡張といえます。