? Information Required Success

User tests: Successful: Unsuccessful:

avatar Chrissi2812
Chrissi2812
14 Oct 2020

This is a follow up on #23242, but this time not using DOMDocument but just Regex.

With TinyMCE the content is correct (No wrapping tag arround <hr>) but with JCE for Example the output can be:
image
JCE tries to mitigate this issue client side and closes both <p> tags before and after the readmore. But I had to switch between Editor and Code twice. After that the code looks like this:
image

But sometimes the broken data still hits the database.. and the complete page layout will sometime get broken.

Summary of Changes

Changed the regex that splits the articeltext in introtext and fulltext.
It will remove the surrounding tags of the readmore tag because other wise the opening tag ends up in introtext and the closing tag in fulltext thus breaking the html structure of the site.

Testing Instructions

Create an Article with following markup (Could replace div with p):

<div>Das ist ein Test</div>
<div><hr id="system-readmore" /></div>
<div>Mehr Text</div>

Actual result BEFORE applying this Pull Request

Introtext:

<div>Das ist ein Test</div>
<div>

fulltext:

</div>
<div>Mehr Text</div>

Expected result AFTER applying this Pull Request

Introtext:

<div>Das ist ein Test</div>

fulltext:

<div>Mehr Text</div>

Documentation Changes Required

None

avatar Chrissi2812 Chrissi2812 - open - 14 Oct 2020
avatar Chrissi2812 Chrissi2812 - change - 14 Oct 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 14 Oct 2020
Category Libraries
avatar ReLater
ReLater - comment - 14 Oct 2020

Hm, I can't reproduce your find that JCE adds <p> or <div> around the <hr> block element when I insert a readmore. If that would be the case I would say that's a JCE issue.

When I have a <div>Hello.</div> or a list structure <ul><li>...</li></ul> and try to add a readmore inside then JCE creates:

<div>Hello.</div>
<hr id="system-readmore" />

or

<ul><li>...</li></ul>
<hr id="system-readmore" />
avatar ChrisHoefliger
ChrisHoefliger - comment - 17 Oct 2020

On applying this I get the following Error:
Class 'Joomla\CMS\Table\Observer\Tags' not found

avatar Chrissi2812
Chrissi2812 - comment - 26 Oct 2020

@ReLater It depends of the installed Version of the Editor, also you have to use the xtd-buttons (Bottom ones). We use multiple different Editors (pageBuilderCK with either JCE or TinyMCE) and some times the customer accidentically breaks his hole page just by inserting a readmore...

@ChrisHoefliger Can't explain why a simple change to the Regex which splits the articleText into 2 parts should cause a Class not Found error.

It was stated that something altering the content should sit in a Model instead of the Table\Content Class but even in Joomla 4 it still remains there. But that is out of scope for this simple change.


I should mention that Lists would still be broken:

<ul>
  <li>Test</li>
  <li><hr class="system-readmore" /></li>
  <li>Test</li>
</ul>

will result in
Intro:

<ul>
  <li>Test</li>

Fulltext:

  <li>Test</li>
</ul>

But the we now would not have a dangling empty list item in the Intro Text.

avatar ReLater
ReLater - comment - 26 Oct 2020

also you have to use the xtd-buttons (Bottom ones).

You didn't mention that. I deactivate all unnecessary xtd-plugins when using JCE.

It depends of the installed Version of the Editor

One should always use the current version ;-)

From my point of view this should be fixed inside the xtd-buttons and/or editor based instead of using too complicated PHP regexes. If JCE is clever enough, why not others.

But, as always, I don't have to decide that. Just a private opinion.

avatar Chrissi2812
Chrissi2812 - comment - 26 Oct 2020

The "fix" JCE uses is also not optimal, you end up with a <p>&nbsp;</p> before and after the readmore tag, which also can look weird sometimes (You can't even fix it with a simple css rule of p:empty {display:none;} because of the Space inside).

IMO: As the CMS is guessing where it breaks the content into the 2 parts it should do it reliable and not depend on Editor Workarounds.

avatar sandramay0905 sandramay0905 - test_item - 19 Apr 2021 - Tested successfully
avatar sandramay0905
sandramay0905 - comment - 19 Apr 2021

I have tested this item successfully on 80fb61a


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31087.

avatar MUX-ON-WINDOWS
MUX-ON-WINDOWS - comment - 8 Mar 2022

I have tested this item successfully on 80fb61a


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31087.

avatar MUX-ON-WINDOWS MUX-ON-WINDOWS - test_item - 8 Mar 2022 - Tested successfully
avatar richard67 richard67 - change - 16 Mar 2022
Labels Added: ? Information Required
Removed: ?
avatar richard67 richard67 - alter_testresult - 16 Mar 2022 - MUX-ON-WINDOWS: Tested successfully
avatar richard67
richard67 - comment - 16 Mar 2022

I've restored @MUX-ON-WINDOWS 's test result in the issue tracker so it's properly counted. The commit which invalidates the count was just a clean branch update. But the other, first test was almost 2 years ago, and the user has meanwhile left GitHub or has a new account, so I think we can't count that test.

So it needs a 2nd human tester.

avatar brianteeman
brianteeman - comment - 16 Mar 2022

I am struggling to understand this PR.
The only way I can create the wrapping div is by typing it in manually.
Using the readmore button never puts in wrapping divs

Before this PR if I try to insert the readmore inside a div it will produce the broken code as described.
After this PR it also produces the broken code as described

avatar Chrissi2812
Chrissi2812 - comment - 4 Apr 2022

Video showing how to reproduce bug using JCE (Version 2.9.10, Joomla 3.10.3)

First it will put the readmore inside a wrapping <p> tag and when switching between Code and Editor View it will "fix" the error by closing the tags with a &nbsp inside that would add extra whitespace later.
Both will result in the output to be what the user wanted. We noticed it just because a customer of us has broken his page multiple times because of this.

JCE_broken_readmore.mp4

What's happening when saving

This Example Code

<p>Hallo</p>
<p>
	<hr id="system-readmore" />
</p>
<p>Test</p>

will result in this DB Entry:
Before Fix

But after the fix, and resaving the same content:
After Fix

Important Notice

If you switch betwen Editor & Code image this fix wont work because JCEs "fix" will already have inserted the Empty Paragraphs before and after the Readmore.

avatar brianteeman
brianteeman - comment - 14 Jun 2022

The video demonstration shows an issue with jce. Not an issue with the joomla core editor. It is not reproducable with tinymce and should therefore be closed

avatar laoneo
laoneo - comment - 16 Jun 2022

I'm here with Brian. Did you report the issue to JCE? Because this change can have some undesired side effects.

avatar Chrissi2812 Chrissi2812 - change - 5 Jul 2022
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2022-07-05 07:45:50
Closed_By Chrissi2812
avatar Chrissi2812 Chrissi2812 - close - 5 Jul 2022

Add a Comment

Login with GitHub to post a comment