Set text background highlight color, then try Edit as HTML, block gives error

[andrea-calligaris]

Description

Setting the background color (using the highlight function), and then trying to edit the paragraph as HTML, gives the error:
This block has encountered an error and cannot be previewed
and the block is not recoverable, unless by copy pasting and removing the mark tag.
This does not happen with the foreground / actual text color.

Not the same problem of #36532

Step-by-step reproduction instructions

1. Create a new page/post or edit one.
2. Write a paragraph.
3. Try to do Edit as HTML. It does work.
4. Now go back to the normal visual.
5. Highlight all or part of the text with any background color.
6. Save the page or not, save and reload the page or not, doesn't matter.
7. Try again to do Edit as HTML (update: while the text cursor is inside the highlighted area). It says:
   This block has encountered an error and cannot be previewed
   and it's not recoverable.

Screenshots, screen recording, code snippet

<!-- wp:paragraph -->
<p><mark style="background-color:#f4ca16" class="has-inline-color">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</mark></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Another paragraph.</p>
<!-- /wp:paragraph -->

Environment info

Last version 5.9.2
Tried with no plugins.
Firefox 98.0.2, 64bit.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

I have tested this and I am able to replicate it. The issue also occurs with the latest version of Gutenberg.

I do want to note that the error only occurs when the cursor is placed inside of the highlighted text prior to clicking "Edit as HTML". If you place the cursor in unhighlighted text, you are able to edit the HTML as expected. See the gif below.

[andrea-calligaris]

@ndiego Thank you, nice to know there's a workaround. It also works if you highlight the entire paragraph but you put the cursor at the very end or the very start of it.

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[andrea-calligaris]

Still relevant.

[Thelmachido]

Hi @andrea-calligaris I wasn't able to reproduce this as shown in the video below:

Screen.Recording.2022-09-28.at.16.11.20.mov

Please feel free to re-open if the steps taken to reproduce are not correct.

WordPress 6.0.2
Gutenberg 14.1.1