contenteditable と日本語入力に向き合う

エディタフレームワーク（ProseMirror / Lexical など）を使わずに、
contenteditable で WYSIWYG エディタを作ったときの話です。

DOM から値を取り出そうとして span・br・div に追われ、Enter を止めたら IME の変換確定まで止めてしまい、isComposing で分けました。その後に contenteditable="plaintext-only" というすばらしい値を知りました。

フロントエンドカンファレンス東京 × Vue Fes Japan × JSConf JP コラボイベント（2026-10-07）

Transcript

1. contenteditableと ⽇本語⼊⼒に向き合う WYSIWYG エディタをつくったときの話 GMOペパボ株式会社 ロリポップ‧ムームードメイン事業部 エンジニア @taki フロントエンドカンファレンス東京×Vue Fes Japan✕JSConf JPコラボイベント 2026.10.07 1
2. ⾃⼰紹介 ロリポップ‧ムームードメイン事業部 taki 2025年 新卒⼊社 猫と星とお絵描きが好きなエンジニア 『LOLIPOP! AIホームページ』の開発をしています - Twitter : @taki73_cat - アイコンは『ジト⽬猫のハル』 グッズ作ったりイベント出展したりしています - 創作活動は良いぞ！ 2
3. 本⽇の題材 LOLIPOP! AIホームページ 3
4. 以前こういう話をしました https://speakerdeck.com/colorful12/bagu-o-naoshitara-useeffect-ga-kieta 4
5. 今回の題材 WYSIWYG エディタの実装 - What You See Is What You Get（⾒たままが得られる） - テキストを⾒た⽬そのままでその場で編集したい 5
6. 何を使えばできるか 主な選択肢は2つ 例：<h1>かんばん猫</h1> を編集可能にしたい <input> / <textarea> - h1 のまま編集可能に できない <h1>かんばん猫</h1> <input value="かんばん猫"> contenteditable - h1 のまま編集可能に できる <h1 contenteditable>かんばん猫</h1> 6
7. contenteditable を付けると何が起きるか ブラウザ内蔵の編集エンジンが動く Enter ユーザーがしたのは「改⾏を1つ⼊れた」だけ DOMにどんな要素が⼊るかは、ブラウザごとに違う 7
8. ⼀般的に取られる⼿法 エディタフレームワークを使う ブラウザが作る DOM と、本来欲しい値の差を埋める 1. 内部モデルを本来の値として持つ 2. DOM の変更を観測して内部モデルと⽐較する 3. ⾃分が出していない変更を戻す ProseMirror / Lexical / Tiptap / Slate など note は ProseMirror を使っている 『noteのエディタを新バージョンに完全移⾏しました』2023-01-19 8
9. 『LOLIPOP! AIホームページ』で選んだ⽅法 エディタフレームワーク、不採⽤！ 編集対象は1フィールド分のテキストで、リッチな表現は不要 → ブラウザが出すDOMを処理する必要がある 9
10. やってみたこと DOMを辿って改⾏を判定する エディタで⼊⼒した値をDOMから取り出すために childNodesをたどり、要素ごとに改⾏として扱うか判定 Chromeだけでも判定すべき要素が次々出てきた - テキストが <span> で包まれる - 末尾に <br> が⼊る - 最初の⾏が <div> で囲まれる → 読み取り側で網羅するのは⼤変 10
11. 解決策（1） 改⾏はブラウザに作らせない ブラウザに <div> や <br> を作らせない Enter の既定動作を⽌めて、改⾏⽂字を1つだけ⼊れる 11
12. Enterは改⾏だけじゃない 変換確定の Enter まで⽌めてしまった 「ねこ」→「猫」の変換を確定する Enter これも e.key === “Enter” なので改⾏が⼊ってしまう... こんなエディタ いかがですか？ ※gif動画 変換と同時に改⾏もされてしまう様⼦ 12
13. 解決策（2） 変換中はブラウザに任せる 変換中の Enter は改⾏ではなく確定操作 → isComposing が true のときは⽌めない ※ Safari では変換確定時に isComposing が false になるので別対応が必要 13
14. 解決策 - あとから分かったこと もっと適切な⽅法があった contenteditable = “plaintext-only” - 書式が⼊らない（<span> も <b> も） - ペーストもプレーンテキストになる - 改⾏は <div> ではなく \n で⼊る → 今⽇話した改⾏まわりは、これで書かずに済む 14
15. 結論 contenteditable は普通にある選択肢 その割にやることが多かった plaintext-only を使っても、これは残る - ⼀度⽂字を全消しすると、⼆度とクリックができない - ⾒出しのタグを変えると、中⾝が消える 15
16. おわり ご清聴ありがとうございました！ @taki73_cat 16