<div contentEditable /> の闇

最近 WYSIWYG エディタに憧れて ContentEditable をいじって独自エディタを個人開発しています。 その際に色々苦労した点について備忘録としてブログにしたいと思います。

このコードの handleClick でしていること分かりますか？

import { MouseEvent, useState } from 'react';

export function Editor(): JSX.Element {
  const [content, setContent] = useState<string>('');
  console.log('content:', content);

  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
    if (!e.currentTarget.textContent) {
      e.currentTarget.innerHTML = '<p><br></p>';
    }
  };

  const handleInput = (event: React.FormEvent<HTMLDivElement>) => {
    const { textContent, innerHTML } = event.currentTarget;

    if (!textContent) {
      event.currentTarget.innerHTML = '';
    }
    setContent(innerHTML || '');
  };

  return <div contentEditable onClick={handleClick} onInput={handleInput} />;
}

textContent を見て何も入力されていない場合のみ、innerHTML に"

" のタグを追加しているいる処理ですがきっとこの処理を見た人はなんでこんなことするの？って思うかと思います。