Убрать автоматическое установление background-color для текста в Chrome

Question

Текст который добавляется по клику на кнопку имеет свой background-color. После удаления этого текста если начать печатать текст то background-color сохраняется. Это репродюсится только на Хроме. Причем можно заметить что span не тот который был добавлен при добавлении текста. Шаги чтобы воспроизвести проблему:

вставили текст нажав на кнопку "Add Text";
удаляем текст
печатаем новый текст

Как сделать так чтобы после удаления текста не появлялся background-color у текста который мы сами печатаем.

function onAddText() {
  const html = this.generateHtml('Text');
  textArea.focus();
  document.execCommand('insertHTML', false, html);
}
function onBold() {
  document.execCommand('bold');
  textArea.focus();
}

function generateHtml(value) {
  return `<span id="text">${value}</span>&#8203`;
}

document.addEventListener('keydown',($event) => {
    document.execCommand('removeFormat', false, null);
  });

#textArea {
  width: 400px;
  height: 100px;
  border: 1px solid #ccc;
}
#text {
  background-color: red;
  color: white;
}

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div contenteditable="true" id="textArea"></div>
    <button onclick="onAddText()">Add Text</button>
    <button onclick="onBold()">Bold</button>
    <script>
    </script>
  </body>
</html>

Answer 1

Не знаю, костыль ли это или валидное решение, но к диву с id="textArea" к событию onkeyup можно привязать функцию:

function foo() {
  document.execCommand('removeFormat', false, null);
}

В этом случае, всё, что набирается в блоке с клавиатуры, будет лишено инлайновых стилей.

Answer 2

Нашел решение проблемы в том что дал элементу display: inline-block; Спасибо Quazimorda что натолкнул на мысль)

БЛОГ НА HUSL

Убрать автоматическое установление background-color для текста в Chrome

Ответы (2 шт):