JS の contenteditable に関するトンデモ現象：改行時に自動挿入されるタグは CSS で変更できる？

contenteditable を true にすると、その領域はテキストエリアっぽくなります。この中で改行すると div が子要素として入ってきます。

※Chrome ではその div 内に br が入っている。

デフォルトでは div ですが、なんと contenteditable を設定しているところ（今はそこに editor というクラスがふられているとする）に

.editor p
  line-height: 1.6
  font-size: 16px
  padding: 4px 0

などと css を設定すると、自動挿入されるタグが div から p に変わります。これは2023年7月20日最新版の Chrome と Firefox で起きている現象です。

私の勘違いだったら本当に申し訳ありません。私の環境が複雑になっているせいかもしれない。こうした記事を書くときはもっと正確に検証しないといけないけど、時間がぜんぜんなくて…。

もっとわかりやすく言うとこんな感じ。

editor というクラス名のタグがある。このタグのなかにたくさんの子要素が挿入される。ユーザーがエンターキーを打つたびに、どんどん勝手に入っていく。これは div だけど、上のようにデザインを設定すると p タグになる。

今、私は contenteditable の周辺技術でちょっとつまっています。今回は自動挿入タグにふれたけど、もう一つ不思議な現象があって、一時間くらい発狂しそうになった。なにかっていうと、ファイルを contenteditable の領域にドロップしたとき、イベントがたくさん発生する現象。ドロップすればするほど、次のドロップイベントの回数が増える。かなり謎…。これの対処法は addEventListener に

{once: true}

をオプションで設定することで回避できる。これにたどり着くまでに、私の精神は崩壊しかけた。

contenteditable あたりのイベントはかなり丁寧にやらないといけなくて、テキストエリアというデフォルトのHTMLタグがいかに完成された作品であるかわかる。