TextFormat

TextFormat インターフェイスは、EditContext のインスタンスに関連付けられた編集可能なテキスト領域内のある範囲のテキストに適用するべき特定の書式を表します。このテキストの書式は、ユーザーがテキストの変換に用いている インプットメソッドエディター (IME) からの要求です。

ウェブ上のデフォルトの編集可能な領域 (<textarea> 要素など) を使用しているときは、IME による変換はブラウザーとオペレーティングシステムが処理してくれます。たとえば、Windows 上の textarea で日本語の IME を使用しているときは、以下のテキストの書式が適用されることがあります。

• キーボードからテキストを入力しているときは、入力された文字には細い波状の下線がつきます。

  

• IME ウィンドウ内の候補リストからユーザーが提案を選択すると、テキストが置き換えられ、太い実線の下線がつきます。

  

EditContext API を用いて自分で独自の編集可能な領域を構築しているときは、IME による変換を自分で処理する必要があります。textformatupdate イベントにより、IME ウィンドウが変換中のテキストに適用しようとしている書式のリストが送られます。このイベントを監視し、それに従って編集可能な領域内に表示しているテキストの書式を更新するべきです。

<div id="editor" style="height:200px;background:#eee;"></div>

const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  // TextFormat のインスタンス群を取得します。
  const formats = e.getTextFormats();

  // TextFormat のインスタンス群を走査します。
  for (const format of formats) {
    console.log(
      `Applying a ${format.underlineThickness} ${format.underlineStyle} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});