WordPress.org

Make WordPress Core

Opened 10 days ago

Closed 3 days ago

#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:

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 days ago.
45947.diff (1.3 KB) - added by iCaleb 4 days 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)

@jeremeylduvall
10 days ago

#1 @afercia
10 days ago

  • Component changed from General to Editor

#2 @iCaleb
4 days 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
4 days ago

  • Component changed from Editor to TinyMCE

#4 @iCaleb
4 days 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
4 days 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
4 days ago

  • Keywords has-patch needs-testing added

#6 @azaozz
3 days 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
3 days 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.