ProseMirrorで作るちょっとだけリッチなテキストエディタ | 株式会社ヌーラボ(Nulab inc.)

はじめに Backlogは昨年（2021年）メンション機能を導入しました。本文中に他のユーザーの名前を書くと、相手に通知が送られるというものです。それにともないこのメンション機能が使える箇所で使うテキスト編集コンポーネント（以下、エディタ）を作り直しました。 編集中のテキストに含まれるメンションを、見た目的にもデータ的にも通常のテキストとは異なるものとして扱えるようにするためです。 Backlogの以前のエディタはtextarea要素で実装されていました。textarea要素はプレーンなテキストしか扱えず、テキストの一部を太字にするとか背景色をつけるといった機能はありません。 ブラウザ上でテキストエディタを実装する手段には、textareaのほかにcontenteditable属性をtrueにした要素を使う選択肢もあります。この場合はHTMLの表現力が使えるのでメンションの表示をいい感じに