More tag breaks when switching from Text to Visual when cursor left in HTML

[jeremeylduvall]

Currently, in the classic WordPress editor, I'm hitting some issues with the "More" tag when flipping from Text to Visual.

For example:

1. Open a new post.
2. Flip to the Text editor and add some content.
3. Use the toolbar button to insert a Read More tag.
4. Place your cursor inside that tag. Click on the Visual editor.

The <!--more--> tag is translated to:

" class="wp-more-tag mce-wp-more" alt="" title="Read more..." data-mce-resize="false" data-mce-placeholder="1" />

As a result, the tag no longer works. In my testing, this only happens when the cursor is left inside the tag when changing from Text to Visual.

[iCaleb]

I can replicate consistently. This also occurs with the <!--nextpage--> tag.

It has to do with the content.replace() call here: ​https://github.com/WordPress/WordPress/blob/6ffafa5bc7124dd58a292720fea49465297f452c/wp-includes/js/tinymce/plugins/wordpress/plugin.js#L108

It also matters where your cursor is exactly. For example, if your cursor is between the p and the a in nextpage before you switch back to the visual editor, you end up with this in the content:

<!--nextp<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>age-->

And when it is in between the m and o in more:

<!--m<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>ore-->

A google search for "data-mce-type="bookmark" shows many other similar issues.

[iCaleb]

Possibly related https://core.trac.wordpress.org/ticket/42908

[iCaleb]

The above ticket pointed me in the right direction. The solution here it to move the cursor outside of the HTML comment when switching views. This is already done for HTML tags and shortcodes.

I've also found that this will help with those editing ex-gutenberg posts, as this bug could mess up a post very badly otherwise.

Testing is fairly straightforward. Create HTML comments, and place your cursor inside of them while switching between visual and text mode. Patch incoming, and props to @davidsword for the regex help :)

[iCaleb]

First pass at 45947. Update regex to also match HTML comments to allow the cursor to always be moved outside of them when switching views.

[azaozz]

The patch makes sense, HTML comments should be treated as tags when keeping cursor position. Lets get this in 5.1.

[azaozz]

In 44649:

TinyMCE: treat HTML comments same as tags when keeping cursor position. Fixes breaking the More and Nextpage tags when switching from Text to Visual.

Props iCaleb, jeremeylduvall.
Fixes #45947.