pタグを跨いだテキストコピーは​ 改行が２つになる！？​

Transcript

1. pタグを跨いだテキストコピーは 改行が２つになる！？ 2026.07.27 #雑LT_study 1
2. 自己紹介 所属 サイボウズ株式会社 (26卒) コサキン @kosakin8710 --- 出身：札幌 最近の話：ご飯作るのが面倒で nosh を試す 開発領域：フロントエンド リッチテキストエディター触ってる 2
3. コピーと貼り付けをざっくり解説 • ブラウザやアプリで Cmd-C で、テキストをコピーするのは日常的だと思います！ • コピーはクリップボードへの書き込みをしている • text/plain, text/html, image/png など複数種類のデータを同時に持つことが可能 • 例えばブラウザでコピーすると、text/html と text/plain は最低限コピーされる • 貼り付け時はクリップボードから適切なデータ種類を選び、エディタへ挿入される • 例えば <textarea /> は text/plain を優先的にみる 3
4. divタグを跨ぐタイプの文章をコピペすると。。。 <textarea /> に貼り付ける Cmd-C 4
5. pタグを跨ぐタイプの文章をコピペすると。。。 <textarea /> に貼り付ける Cmd-C 謎の空行が出力される！！ 5
6. なんで？ • まずコピーアルゴリズムの仕様はなく、ブラウザによって実装が異なる • DOM をテキストに出力するアルゴリズムの一つとして、WHATWG が定める innerText がある • ここで p タグは改行２つであることが明記！！！！！！！ • Blink 実装だと、p タグは innerText の仕様に従うとコメントにある • ちなみにコピーアルゴリズム自体は innerText と異なる（？？？？） • 最終的なDOM とレイアウトのハイブリットアルゴリズムを採用している • Gecko ⇨ p タグは改行２つ出力、Webkit ⇨ マージンによって改行を判断 そもそもこの仕様 is 何？ ⇨ 段落 = 空行という慣習があり、margin: 1em 0; が UA のスタイルシートに記載 （ 上下 margin を消したのがややこしい要因。。？） 6
7. p タグの改行を一つにしたい ⇨ 辛い！！！！ • ブラウザ側は改行の数を変える API を用意していない • copy イベントをハックすると、text/html と text/plain の両方を自前実装する必要がある • innerText は見た目通りのテキストを出さない。<br /> や空タグなど、改行周りがややこしい • text/html はスタイルのインライン展開など複雑 • 全てを div にすれば幸せ（本当。。？） 7
8. ご清聴ありがとうございました 8