WYSIWYG editor should not nest section headings within list items

[rolodato]

Describe the Bug

When editing a list using the WYSIWYG editor, trying to create a heading (h1, h2 etc) based on an existing list item will create a heading inside a list item, instead of ending or splitting the list and creating the heading outside the list.

For example, suppose you have this:

And you click the H3 button with your cursor positioned on the last element. This is the result:

The generated markup is technically valid HTML, but this goes against user expectations from widely known WYSIWYG editors. Microsoft Word, LibreOffice Writer and Notion all have the correct behavior.

Related to this - if you have accidentally created a heading in this way and want to remove the heading from the list, the only way to do it is having your cursor on the heading and clicking the list button in the editor. You cannot "erase the bullet point" to remove an element from a list. EDIT: You can use Shift+Tab to remove an element from a list, which is still a bit cryptic.

I have a not-so-technically-savvy customer that ran into this problem, and it's difficult explaining to them what they should do since they are so used to the behavior from Microsoft Word :)

To Reproduce

In a WYSIWYG text field, create a list (numbered lists or bullet points does not matter) like this:

1. Hello
2. I want this to be a header
3. Goodbye

Set your cursor anywhere on line 2 and click any heading button (H1, H2 etc)

Expected result

1. Hello

I want this to be a header

2. Goodbye

Note the markup here of the second list. This is the same as generated by Microsoft Word and LibreOffice Writer: ```

2. Goodbye

```

Actual result

1. Hello

2. I want this to be a header

3. Goodbye

Directus Version

v10.8.2

Hosting Strategy

Self-Hosted (Custom)

[rijkvanzanten]

I'm not sure this is something we can change as this is TinyMCEs behavior 🤔

[rolodato]

Understood - I've seen this even happens at TinyMCE Fiddle with the default settings. I would appreciate leaving this issue open so others can find it. I only noticed TinyMCE was being used for the WYSIWYG editor after researching this issue in a bit more detail.