craftcms / redactor

Edit rich text content in Craft CMS using Redactor by Imperavi.
https://plugins.craftcms.com/redactor
MIT License
100 stars 48 forks source link

Using a custom 'formattingAdd' para style injects unwanted <p> and <br> tags #447

Closed MattAppleton closed 1 year ago

MattAppleton commented 1 year ago

Description

This bug affects custom Redactor <p> styles... Empty <p> and <br> tags that are NOT visible in Redactor html view somehow get injected into the code on the front-end page...

I found a sort of workaround using the retain inline styles settings in 'advanced' on the field in question (see screenshot at the bottom of this issue), but this will permit messy input in future! Not ideal when handing the site over to clients who will invariably paste in copy from all manner of sources!

Steps to reproduce

  1. Add a custom <p> style in a redactor .json config... in this case:
 "formattingAdd": {
    "Interview1": {
        "title": "Interview 1",
        "api": "module.block.format",
        "args": {
            "tag": "p",
            "class": "interview1",
            "type": "add",
            "style": {
                "padding-left": "10rem"   
            }
        }
    },
  1. Add text to a redactor field. In this example 'normal paragraphs come in fine
    <div class="prose pt-5 hidden md:block">
    <p><strong>Elsewhere in the FA Cup:</strong> In today’s other early kick-off, it’s scoreless at half-time in the match between League One side Walsall and their Premier League visitors Leicester City.</p>
    <p class="interview2" style="padding-right:10rem;"><strong>Elsewhere in the FA Cup:</strong> In today’s other early kick-off, it’s scoreless at half-time in the match between League One side Walsall and their Premier League visitors Leicester City.</p>
    </div>
  2. apply our custom formatting to two or more paragraphs. Seems to work OK with ONE paragraph but with two we end up with unwanted <p> and <br> tags... which do NOT show in the Redactor html view...
<div class="prose pt-5 hidden md:block">
<p></p>
<p style="padding-right:10rem;"><strong>Elsewhere in the FA Cup:</strong> In today’s other early kick-off, it’s scoreless at half-time in the match between League One side Walsall and their Premier League visitors Leicester City.</p>
<br>
<p style="padding-right:10rem;"><strong>Elsewhere in the FA Cup:</strong> In today’s other early kick-off, it’s scoreless at half-time in the match between League One side Walsall and their Premier League visitors Leicester City.</p><br><p style="padding-right:10rem;"><strong>Elsewhere in the FA Cup:</strong> In today’s other early kick-off, it’s scoreless at half-time in the match between League One side Walsall and their Premier League visitors Leicester City.</p>
<p></p>
</div> 

Additional info

Halite-screenshot 2023-01-28 at 13 43 28-2023-01-28
MattAppleton commented 1 year ago

Ah! Found the issue — we had some filters on our content that were being over-zealous...

{{thing.mainContent|nl2br|purify}}

The redactor para issue disappears if we revert to {{thing.mainContent}}