【JS応用】編集可能な div

編集可能なdiv要素：contenteditableの深淵と実装戦略

Webアプリケーションにおいて、リッチテキストエディタやインライン編集機能を構築する際、避けては通れない技術が「contenteditable属性」です。一見すると単純なHTML属性ですが、その挙動はブラウザごとに異なり、DOM操作の複雑さとアクセシビリティの課題が絡み合う、フロントエンドエンジニアにとって最も難易度が高い領域の一つです。本稿では、contenteditableを実務で安全かつ強力に扱うための設計手法を詳説します。

contenteditableの基本構造とブラウザの挙動

contenteditableは、HTML要素をユーザーが直接編集可能にする属性です。この属性を付与された要素は、ブラウザのレンダリングエンジンによって「編集モード」として認識され、キーボード入力やペースト操作がDOMツリーに直接反映されるようになります。

しかし、この「ブラウザに任せる」という仕様が最大の罠です。例えば、改行を入力した際、あるブラウザは`

`で括り、別のブラウザは`
`を挿入し、さらに別のブラウザは`

`タグを生成します。この「DOMの非決定性」こそが、contenteditableを扱う上での最大の障壁となります。

実務においては、この挙動を制御するために「Selection API」と「Range API」を駆使する必要があります。これらはカーソルの位置を特定し、プログラム的にテキストを挿入したり、装飾を施したりするための標準APIです。

SelectionとRangeによるカーソル制御の基礎

カーソル位置を制御することは、編集コンポーネントにおけるUIの要です。ユーザーがテキストを入力する際、現在の選択範囲（Selection）を取得し、その範囲（Range）に対して操作を加えるのが基本フローとなります。

以下のコードは、現在のカーソル位置に特定の文字列を挿入する基本的なユーティリティ関数です。


function insertTextAtCursor(text) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  range.deleteContents();
  
  const textNode = document.createTextNode(text);
  range.insertNode(textNode);

  // カーソルを挿入したテキストの末尾に移動
  range.setStartAfter(textNode);
  range.setEndAfter(textNode);
  selection.removeAllRanges();
  selection.addRange(range);
}

このコードのポイントは、`range.insertNode`でDOMを挿入した後、`selection.removeAllRanges()`と`addRange`を用いてカーソル位置を再定義している点です。これを怠ると、ブラウザはカーソルの位置をロストし、ユーザー体験が著しく低下します。

ペースト時のデータクレンジング：最重要タスク

contenteditableにおいて最もセキュリティと整合性を脅かすのが「コピー＆ペースト」です。外部サイトからコピーされたコンテンツには、意図しないスタイル属性、``タグのネスト、あるいは悪意のある`