document.execCommand('removeFormat') failing on Chrome when trying to remove format set by-CodePudding

I'm adding a background to some selected text in a contenteditable element via document.execCommand('hiliteColor', false, '#d4ecff');.

If the selected text contains some formatting tags ( for instance), calling document.execCommand('removeFormat') on the selection does not remove all the formats. It's like the background colour is passed to the text formerly encompassed into .

I'm facing the issue on Chrome (version 100.0.4896.75 - 64 bits) as well as Brave (version 1.37.111 Chromium: 100.0.4896.79 - 64 bits). Everything seems to work as expected on Firefox.

Here's a demo and steps to reproduce: https://jsfiddle.net/L82ogcf5/

PS: I know that the use of document.execCommand() is no longer recommendended, so please do not point that out. It's irrelevant until the feature is really deprecated (we all know that is not going to happen anytime soon).

CodePudding user response：

first of all, .execCommand is decapitated, second, in chromium, the removeFormat function works in layers. It removed the background color because it was the first layer of formatting. It only removed the bold on the bold text because it was the first layer of formatting there. Try repeating the command 4 times for highlight, bold, italics, and underline. I presume that you are trying to create a text box with adjustable formatting?

Just for this example, a solution would be instead of clearformatting, do undo as your command.

Or, you could do execCommand again, set the highlight color to white or transparent or something.

CodePudding user response：

You're adding a hiliteColor! But then you want to Remove any format.
First the  tag will be removed, and only after a second click the hiliteColor will be removed.

What you want instead is:

// Remove hiliteColor, not other text formatting
btn2.onclick = () => document.execCommand("hiliteColor", false, "transparent");

Example:

const btn1 = document.querySelector("#btn1");
btn1.onclick = () => document.execCommand("hiliteColor", false, "red");

const btn2 = document.querySelector("#btn2");
btn1.onclick = () => document.execCommand("hiliteColor", false, "transparent");

#input {
  margin-top: 1rem;
  border: 1px solid;
}

Steps to reproduce:
<ol>
  <li>Select all the text inside #input</li>
  <li>Click on the button 1 - "add background colour"</li>
  <li>Click on the button 2 - "remove format</li>
  <li>Do you see a red background where the bold text was? Here's my bug</li>
</ol>
<button id="btn1">add background colour</button>
<button id="btn2">remove format</button>
<div id="input" contenteditable="true">
  I am a real
  <strong>nice test</strong> string
</div>

PS: this technology is sadly about to go dead (OK, maybe not so soon because the so many applications that at this date are driven on contenteditable and the execCommand). Just because, introduced by IE, and with the rise of competitor browsers they all disagreed on the specs and it slowly became an unhandleable beast... with no replacement currently in active development or written specs, AFAIK.