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

[WordPress Trac]

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

 https://github.com/tinymce/tinymce/blob/7d7a8db05d55bd5078849c23a342993588ce9995/src/core/src/main/js/html/DomParser.js#L351-L352

 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.

 https://github.com/WordPress/wordpress-
 develop/blob/f7dabb40c1293cb6490d4fc16e6c2b14cfbbc0e8/src/wp-
 admin/js/editor.js#L528

 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