Markdown preview and result differ

AI-generated summary

A user, rokejulianlockhart, reported an issue where the markdown preview and the actual post result differ on Discourse. Canapin was able to reproduce the issue and provided more details, including examples of code blocks and images that demonstrate the problem.

The issue seems to be related to the way Discourse handles inline elements, such as <strike>, <b>, and <i>, but not <strong> and <em>. Canapin also noted that the issue is not related to authorized tags or a markdown-it quirk.

Arkshine suggested that the issue might be related to the Nokogiri library, which is used by Discourse. sam and sam further investigated the issue and proposed a solution by upgrading to Loofah.html5_fragment, which would require Nokogiri >= 1.14.0 and Loofah >= 2.21.0.

However, sam later reported a security issue with the proposed solution and decided not to proceed with the upgrade. Finally, nat announced that the issue had been fixed with a pull request to Discourse.

Per Creating bug reports for Discourse on Meta

try.discourse.org

https://try.discourse.org/t/word1-word2-word3-word4/1430?u=rokejulianlockhart

discuss.kde.org

https://discuss.kde.org/t/difference-between-preview-and-actual-post/1245/2?u=rokejulianlockhart

1 Like

Hi @roke_julian_lockhart

I can repro it and the preview indeed differs from the post. :slight_smile:

The empty line below or above your tags plays a little role here but it’s not important. If you remove them, it will wrap the closest next and previous content, but not the whole content.

no empty lines Additionally, how come
import QtQuick
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts
import QtPositioning

and prepension of QQC2 before Action, Button, ApplicationWindow, and Frame doesn’t work, whereas

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtPositioning
import QtQuick.Controls 2.15 as QQC2

and addition of QQC2.Button (per [qml+pyqt6] Can't get native control appearance - #2 by carl - Help - KDE Discuss) does?
A new line


That said…
I thought the issue was because <strike>[1] was an inline element. I can repro it with other tags such as <b> or <i>, but not <strong>, <em>. So it’s not because it’s an inline-level element. Discourse allows wrapping blocks with inlines, from what I can see with <strong> or <em>.

<strong>
<strong>

Additionally, how come

```qml
import QtQuick
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts
import QtPositioning
```

and prepension of `QQC2` before `Action`, `Button`, `ApplicationWindow`, and `Frame` doesn't work, whereas

```qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtPositioning
import QtQuick.Controls 2.15 as QQC2
```

and addition of `QQC2.Button` (per https://discuss.kde.org/t/qml-pyqt6-cant-get-native-control-appearance/1240/2?u=rokejulianlockhart) does?
A new line

</strong>

It seems not to be related to authorized tags, since Discourse accepts all these tags (<strike>, <s>, <b>, <strong>, <i>, <em>…).

It seems not to be a markdown-it quirk either, since I can’t reproduce the issue in their demo.


  1. Note that <strike> is deprecated in favor of <s> . A detail that won’t change anything in this issue, but always good to know… I just learned it right now after all :smile: ↩︎

5 Likes

Took a quick look out of curiosity. It looks like an issue with the Nokogiri library. :thinking:

From what uses Discourse here:

Loofah.fragment uses Nokogiri’s HTML4 parser.

This could be fixed using Loofah.html5_fragment as long as Nokogiri >= 1.14.0 and Loofah >= 2.21.0. Discourse already uses Nokogiri::HTML5.fragment; that would make sense.

Note: Loofah 2.21.0 is not yet released; currently in RC1.

11 Likes

Fantastic debugging! Thanks
:folded_hands:

6 Likes

going to bookmark this for 30 days, hopefully then the new loofah is out and we can simply upgrade it.

2 Likes

I just tried the HTML5 version of loofah and we are hitting a security issue it seems:

https://github.com/discourse/discourse/pull/21522


  1) PrettyText provides safety for img bbcode
     Failure/Error: expect(cooked).to eq(html)
     
       expected: "<p><img src=\"http://aaa.com&lt;script&gt;alert(1);&lt;/script&gt;\" alt=\"\" role=\"presentation\"></p>"
            got: "<p><img src=\"http://aaa.com<script>alert(1);</script>\" alt=\"\" role=\"presentation\"></p>"
     
       (compared using ==)
     # ./spec/lib/pretty_text_spec.rb:2150:in `block (2 levels) in <main>'
     # ./spec/rails_helper.rb:358:in `block (2 levels) in <top (required)>'
     # /home/sam/.gem/ruby/3.2.1/gems/webmock-3.18.1/lib/webmock/rspec.rb:37:in `block (2 levels) in <top (required)>'

This one feels very risky to me… will raise…

3 Likes

Many thanks for your debugging! We’ve fixed this with:

https://github.com/discourse/discourse/pull/21522

as seen here:

Additionally, how come

import QtQuick
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts
import QtPositioning

and prepension of QQC2 before Action, Button, ApplicationWindow, and Frame doesn’t work, whereas

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtPositioning
import QtQuick.Controls 2.15 as QQC2

and addition of QQC2.Button (per [qml+pyqt6] Can't get native control appearance - #2 by carl - Help - KDE Discuss) does?

4 Likes

This topic was automatically closed after 2 days. New replies are no longer allowed.