WordPress.org

Make WordPress Core

#45947 closed defect (bug) (fixed)

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

Reported by: jeremeylduvall Owned by: azaozz
Milestone: 5.1 Priority: normal
Severity: normal Version: 5.0.3
Component: TinyMCE Keywords: has-patch needs-testing
Focuses: Cc:
PR Number:

Description

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.


Attachments (2)

LazwOg.gif (2.7 MB) - added by jeremeylduvall 10 months ago.
45947.diff (1.3 KB) - added by iCaleb 10 months ago.
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.

Change History (9)

#1 @afercia
10 months ago

  • Component changed from General to Editor

#2 @iCaleb
10 months ago

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.

#3 @iCaleb
10 months ago

  • Component changed from Editor to TinyMCE

#4 @iCaleb
10 months ago

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
10 months ago

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.

#5 @iCaleb
10 months ago

  • Keywords has-patch needs-testing added

#6 @azaozz
10 months ago

  • Milestone changed from Awaiting Review to 5.1

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

#7 @azaozz
10 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.