Specific HTML input breaks WYSIWYG usability

[Júlia Casamitjana]

Describe the bug

A <pre> element that contains a line break and is nested in a <li> element breaks the WYSIWYG editor usability.

To Reproduce

Steps to reproduce the behaviour:

1. Go to the editor's demo page
2. Include the contents from this code-block:

<ul><li>
<pre>
first line

second line
</pre>
</ul></li>

4. Click to WYSIWYG
5. See error: Click does not respond. Error message appears in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Qu (index.js:24150:20)
    at pre (index.js:24355:19)
    at htmlInline (index.js:24744:9)
    at o (index.js:24993:9)
    at e.convert (index.js:25016:7)
    at e.convertNode (index.js:25021:10)
    at e.toWysiwygModel (index.js:26076:18)
    at e.changeMode (index.js:27533:35)
    at index.js:23939:30
    at Array.forEach (<anonymous>)

and preview does not show expected output.

Expected behavior

The expected output in the preview should be the same generated by:

• first line
  
  second line
  

WYSIWYG button is clickable.

Screenshots

Desktop (please complete the following information):

• OS: macOS 14.4
• Browser Chrome
• Version 123.0.6312.107