[wp-trac] [WordPress Trac] #42531: Text is splitted into two paragraphs when switching editor tabs

WordPress Trac noreply at wordpress.org
Mon Nov 13 19:00:38 UTC 2017

#42531: Text is splitted into two paragraphs when switching editor tabs
 Reporter:  ocean90       |       Owner:  adamsilverstein
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  4.9
Component:  Editor        |     Version:  4.9
 Severity:  major         |  Resolution:
 Keywords:  needs-patch   |     Focuses:  javascript

Comment (by aduth):

 The issue appears to occur during the switch from Text to Visual mode,
 when parsing the textarea value, specifically here:


 With the changes introduced in r41783, a span with attribute `data-mce-
 type="bookmark"` is inserted into the textarea value when switching from
 Text to Visual modes, with intention of preserving the caret position.


 When parsing, TinyMCE considers three nodes: the text node before and
 after the span bookmark, and the span bookmark itself. With the logic of
 the DOMParser, it ends the first root block when encountering the span
 assigned a `data-mce-type`, thereby resulting in the creation of two root
 nodes (the two paragraphs from the report).

 In brief testing, omitting the behavior to add the `data-mce-type`
 attribute when creating the cursor marker resolves the issue of two
 paragraphs being created.

 diff --git src/wp-admin/js/editor.js src/wp-admin/js/editor.js
 index ed77d3c755..140b258b6f 100644
 --- src/wp-admin/js/editor.js
 +++ src/wp-admin/js/editor.js
 @@ -525,7 +525,7 @@ window.wp = window.wp || {};
                                 mode = htmlModeCursorStartPosition !==
 htmlModeCursorEndPosition ? 'range' : 'single',

                                 selectedText = null,
 -                               cursorMarkerSkeleton =
 getCursorMarkerSpan( $$, '' ).attr( 'data-mce-type','bookmark' );
 +                               cursorMarkerSkeleton =
 getCursorMarkerSpan( $$, '' );

                         if ( mode === 'range' ) {
                                 var markedText = textArea.value.slice(
 htmlModeCursorStartPosition, htmlModeCursorEndPosition ),

Ticket URL: <https://core.trac.wordpress.org/ticket/42531#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform

More information about the wp-trac mailing list