DEV: use HTML5 version of loofah (#21522)

https://meta.discourse.org/t/markdown-preview-and-result-differ/263878

The result of this markdown had different results in the composer preview and the post. This is solved by updating Loofah to the latest version and using html5 fragments like our user had reported. While the change was only needed in cooked_post_processor.rb for this fix, other areas also had to be updated due to various side effects.
This commit is contained in:
Sam
2023-06-20 11:49:22 +10:00
committed by GitHub
parent a999deaab9
commit 9e241e82e9
15 changed files with 123 additions and 115 deletions

View File

@ -16,12 +16,10 @@ describe "chat bbcode quoting in posts" do
<div class="chat-transcript-username">
martin</div>
<div class="chat-transcript-datetime">
<span title="2022-01-25T05:40:39Z"></span>
</div>
<span title="2022-01-25T05:40:39Z"></span></div>
</div>
<div class="chat-transcript-messages">
<p>This is a chat message.</p>
</div>
<p>This is a chat message.</p></div>
</div>
COOKED
end
@ -34,19 +32,16 @@ describe "chat bbcode quoting in posts" do
expect(post.cooked.chomp).to eq(<<~COOKED.chomp)
<div class="chat-transcript" data-message-id="2321" data-username="martin" data-datetime="2022-01-25T05:40:39Z" data-channel-name="Cool Cats Club" data-channel-id="1234">
<div class="chat-transcript-meta">
Originally sent in <a href="/chat/c/-/1234">Cool Cats Club</a>
</div>
Originally sent in <a href="/chat/c/-/1234">Cool Cats Club</a></div>
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar"></div>
<div class="chat-transcript-username">
martin</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a>
</div>
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a></div>
</div>
<div class="chat-transcript-messages">
<p>This is a chat message.</p>
</div>
<p>This is a chat message.</p></div>
</div>
COOKED
end
@ -63,14 +58,11 @@ describe "chat bbcode quoting in posts" do
<div class="chat-transcript-username">
martin</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a>
</div>
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a></div>
<a class="chat-transcript-channel" href="/chat/c/-/1234">
#Cool Cats Club</a>
</div>
#Cool Cats Club</a></div>
<div class="chat-transcript-messages">
<p>This is a chat message.</p>
</div>
<p>This is a chat message.</p></div>
</div>
COOKED
end
@ -87,14 +79,11 @@ describe "chat bbcode quoting in posts" do
<div class="chat-transcript-username">
martin</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a>
</div>
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a></div>
<a class="chat-transcript-channel" href="/chat/c/-/1234">
#Cool Cats Club</a>
</div>
#Cool Cats Club</a></div>
<div class="chat-transcript-messages">
<p>This is a chat message.</p>
</div>
<p>This is a chat message.</p></div>
</div>
COOKED
end
@ -107,19 +96,16 @@ describe "chat bbcode quoting in posts" do
expect(post.cooked.chomp).to eq(<<~COOKED.chomp)
<div class="chat-transcript" data-message-id="2321" data-username="martin" data-datetime="2022-01-25T05:40:39Z" data-channel-name="Cool Cats Club" data-channel-id="1234">
<div class="chat-transcript-meta">
Originally sent in <a href="/chat/c/-/1234">Cool Cats Club</a>
</div>
Originally sent in <a href="/chat/c/-/1234">Cool Cats Club</a></div>
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar"></div>
<div class="chat-transcript-username">
martin</div>
<div class="chat-transcript-datetime">
<span title="2022-01-25T05:40:39Z"></span>
</div>
<span title="2022-01-25T05:40:39Z"></span></div>
</div>
<div class="chat-transcript-messages">
<p>This is a chat message.</p>
</div>
<p>This is a chat message.</p></div>
</div>
COOKED
end
@ -137,14 +123,11 @@ describe "chat bbcode quoting in posts" do
<div class="chat-transcript-username">
martin</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a>
</div>
<a href="/chat/c/-/1234/2321" title="2022-01-25T05:40:39Z"></a></div>
<a class="chat-transcript-channel" href="/chat/c/-/1234">
#Cool Cats Club</a>
</div>
#Cool Cats Club</a></div>
<div class="chat-transcript-messages">
<p>This is a chat message.</p>
<div class="chat-transcript-reactions">
<p>This is a chat message.</p><div class="chat-transcript-reactions">
<div class="chat-transcript-reaction">
<img width="20" height="20" src="/images/emoji/twitter/+1.png?v=12" title="+1" loading="lazy" alt="+1" class="emoji"> 1</div>
<div class="chat-transcript-reaction">
@ -237,35 +220,27 @@ martin</div>
<div class="chat-transcript" data-message-id="#{message1.id}" data-username="#{message1.user.username}" data-datetime="#{message1.created_at.iso8601}" data-channel-name="#{channel.name}" data-channel-id="#{channel.id}">
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar">
<img loading="lazy" alt="" width="24" height="24" src="//test.localhost#{post.user.avatar_template.gsub("{size}", "48")}" class="avatar">
</div>
<img loading="lazy" alt="" width="24" height="24" src="//test.localhost#{post.user.avatar_template.gsub("{size}", "48")}" class="avatar"></div>
<div class="chat-transcript-username">
#{message1.user.username}</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/#{channel.id}/#{message1.id}" title="#{message1.created_at.iso8601}"></a>
</div>
<a href="/chat/c/-/#{channel.id}/#{message1.id}" title="#{message1.created_at.iso8601}"></a></div>
<a class="chat-transcript-channel" href="/chat/c/-/#{channel.id}">
##{channel.name}</a>
</div>
##{channel.name}</a></div>
<div class="chat-transcript-messages">
<div class="chat-transcript" data-message-id="#{message2.id}" data-username="#{message2.user.username}" data-datetime="#{message2.created_at.iso8601}" data-channel-name="#{channel.name}" data-channel-id="#{channel.id}">
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar">
<img loading="lazy" alt="" width="24" height="24" src="//test.localhost#{post.user.avatar_template.gsub("{size}", "48")}" class="avatar">
</div>
<img loading="lazy" alt="" width="24" height="24" src="//test.localhost#{post.user.avatar_template.gsub("{size}", "48")}" class="avatar"></div>
<div class="chat-transcript-username">
#{message2.user.username}</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/#{channel.id}/#{message2.id}" title="#{message1.created_at.iso8601}"></a>
</div>
<a href="/chat/c/-/#{channel.id}/#{message2.id}" title="#{message1.created_at.iso8601}"></a></div>
<a class="chat-transcript-channel" href="/chat/c/-/#{channel.id}">
##{channel.name}</a>
</div>
##{channel.name}</a></div>
<div class="chat-transcript-messages">
<p>#{message2.message}</p>
</div>
</div>
</div>
<p>#{message2.message}</p></div>
</div></div>
</div>
COOKED
end

View File

@ -87,8 +87,7 @@ describe Chat::Message do
<aside class="quote no-group" data-username="#{post.user.username}" data-post="#{post.post_number}" data-topic="#{topic.id}">
<div class="title">
<div class="quote-controls"></div>
<img loading="lazy" alt="" width="24" height="24" src="#{avatar_src}" class="avatar"><a href="http://test.localhost/t/some-quotable-topic/#{topic.id}/#{post.post_number}">#{topic.title}</a>
</div>
<img loading="lazy" alt="" width="24" height="24" src="#{avatar_src}" class="avatar"><a href="http://test.localhost/t/some-quotable-topic/#{topic.id}/#{post.post_number}">#{topic.title}</a></div>
<blockquote>
<p>Mark me...this will go down in history.</p>
</blockquote>
@ -131,36 +130,29 @@ describe Chat::Message do
expect(cooked).to eq(<<~COOKED.chomp)
<div class="chat-transcript chat-transcript-chained" data-message-id="#{msg1.id}" data-username="chatbbcodeuser" data-datetime="#{msg1.created_at.iso8601}" data-channel-name="testchannel" data-channel-id="#{chat_channel.id}">
<div class="chat-transcript-meta">
Originally sent in <a href="/chat/c/-/#{chat_channel.id}">testchannel</a>
</div>
Originally sent in <a href="/chat/c/-/#{chat_channel.id}">testchannel</a></div>
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar">
<img loading="lazy" alt="" width="24" height="24" src="#{avatar_src}" class="avatar">
</div>
<img loading="lazy" alt="" width="24" height="24" src="#{avatar_src}" class="avatar"></div>
<div class="chat-transcript-username">
chatbbcodeuser</div>
<div class="chat-transcript-datetime">
<a href="/chat/c/-/#{chat_channel.id}/#{msg1.id}" title="#{msg1.created_at.iso8601}"></a>
</div>
<a href="/chat/c/-/#{chat_channel.id}/#{msg1.id}" title="#{msg1.created_at.iso8601}"></a></div>
</div>
<div class="chat-transcript-messages">
<p>this is the first message</p>
</div>
<p>this is the first message</p></div>
</div>
<div class="chat-transcript chat-transcript-chained" data-message-id="#{msg2.id}" data-username="otherbbcodeuser" data-datetime="#{msg2.created_at.iso8601}">
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar">
<img loading="lazy" alt="" width="24" height="24" src="#{avatar_src2}" class="avatar">
</div>
<img loading="lazy" alt="" width="24" height="24" src="#{avatar_src2}" class="avatar"></div>
<div class="chat-transcript-username">
otherbbcodeuser</div>
<div class="chat-transcript-datetime">
<span title="#{msg2.created_at.iso8601}"></span>
</div>
<span title="#{msg2.created_at.iso8601}"></span></div>
</div>
<div class="chat-transcript-messages">
<p>and another cool one</p>
</div>
<p>and another cool one</p></div>
</div>
COOKED
end