Improve switching between visual editor and html mode when text set immediately after more tag

[koopersmith]

By request from Matt. When switching from the visual editor to html mode, text immediately after the more tag will be set directly next to the comment. In this case, we should set the text on the next line.

[koopersmith]

Still exists. This one should be a quick fix.

[dwright]

if I understand correctly, basically, in html mode, <!--more--> should exist by itself on a line. attached a patch which accomplishes that.

[azaozz]

Seems we should be putting <!--more--> in a separate paragraph, that way the content above and below it will be formatted properly after we do the split.

This would also need a look at the back-end handling of <!--more-->.

[dwright]

Replying to azaozz:

Seems we should be putting <!--more--> in a separate paragraph, that way the content above and below it will be formatted properly after we do the split.

By 'separate paragraph', I assume you mean <p><!--more--></p>, however, when switching from Visual to HTML mode in the TinyMCE editor, the <p> tags are stripped, it appears the way a paragraph is then represented in HTML mode is when content is surrounded by a fully blank line above and a fully blank line below.

This would also need a look at the back-end handling of <!--more-->.

why? with the new patch, after saving a post, <!--more--> maintains the paragraph format

[dwright]

<!--more--> is surrounded by a fully blank line above and a fully blank line below, representing a paragraph

[SergeyBiryukov]

The patch has two closing </p> tags.

[dwright]

Replying to SergeyBiryukov:

The patch has two closing </p> tags.

the filtering that occurs when switching from visual to html mode, converts </p> to a newline and converts <p> to blank. As stated above if it is true that a paragraph in visual mode is denoted by a newline above and below, this achieves that result.

(admittedly, it's 'tricky' or hackish, but I didn't see a bug filed against that filtering behavior, so it seemed acceptable and not likely to change soon, if at all)

[SergeyBiryukov]

Replying to dwright:

the filtering that occurs when switching from visual to html mode, converts </p> to a newline and converts <p> to blank.

Ah, I see, thanks for the explanation. Seems it can be \n\n<!--more'+moretext+'-->\n\n as well?

[azaozz]

It seems unsafe to assume the <more> tag is always in a <p>. Inserting it wrapped in a paragraph would ensure tags above it are closed properly (the wrap creates new DOM node).

[dwright]

Replying to SergeyBiryukov:

Replying to dwright:

the filtering that occurs when switching from visual to html mode, converts </p> to a newline and converts <p> to blank.

Ah, I see, thanks for the explanation. Seems it can be \n\n<!--more'+moretext+'-->\n\n as well?

If I remember correctly any number of newlines is replaced with one newline. <br/> is stripped completely.

[dwright]

Replying to azaozz:

It seems unsafe to assume the <more> tag is always in a <p>. Inserting it wrapped in a paragraph would ensure tags above it are closed properly (the wrap creates new DOM node).

I changed the patch to wrap <!--more--> withing <p></p> (wrapped in a paragraph) based on your comments above. I guess I don't know what you mean by, "Inserting it wrapped in a paragraph", please elaborate

[azaozz]

Replying to dwright:

I meant that rather than replacing <more> with <p><more></p> on post-process (i.e. after the DOM has been serialized into a string of HTML code), we should insert it in a new paragraph when the "More" button in the visual editor is clicked. That way the editor creates a new DOM node for it which later is serialized properly.

The equivalent in the HTML editor would be to insert "\n\n<more>\n\n" as two line breaks are converted to a <p> by wpautop.

[SergeyBiryukov]

Replying to dwright:

If I remember correctly any number of newlines is replaced with one newline. <br/> is stripped completely.

Two or more empty lines are indeed replaced with one. However \n\n only creates one empty line, which is preserved (I've double-checked this).

It also seems that <!--more--> on its own line adds more whitespace in TinyMCE (see 16239.whitespace.png​). With 16239-2.patch​, it looks more compact.

[azaozz]

16239-3.patch inserts the <!--more--> tag always wrapped in a paragraph in both visual and HTML editors.

However in the visual editor the user may continue typing in the same paragraph which is undesirable, so there's an extra paragraph inserted after the tag and the cursor is placed there. Also added a check to make sure <!--more--> is always in a separate paragraph, so no tags are broken. Old posts will be checked when edited.

All this changes the behavior of the More button a little

[azaozz]

In 26941:

TinyMCE: improve handling of Read More and Nextpage tags. See #24067, fixes #16239.