Update style for new reply email (#20861)

* update style for new reply email

* Truncate and sanitize comment

* rubocop

* fix links, fix stop send when no content
This commit is contained in:
Philip How 2024-04-19 13:56:16 +01:00 committed by GitHub
parent 6bd914e90e
commit 2129ae145b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 92 additions and 27 deletions

View file

@ -8,11 +8,20 @@ class NotifyMailer < ApplicationMailer
def new_reply_email
@comment = params[:comment]
sanitized_comment = ApplicationController.helpers.sanitize(@comment.processed_html,
scrubber: CommentEmailScrubber.new)
@truncated_comment = ApplicationController.helpers.truncate(sanitized_comment, length: 500, separator: " ",
omission: "...", escape: false)
@user = @comment.parent_user
return if RateLimitChecker.new.limit_by_email_recipient_address(@user.email)
@unsubscribe = generate_unsubscribe_token(@user.id, :email_comment_notifications)
# Don't send the email if there's no visible contents
# Placed here to allow the preview to continue to work
return if @truncated_comment.blank?
mail(to: @user.email,
subject: I18n.t("mailers.notify_mailer.new_reply", name: @comment.user.name, type: @comment.parent_type))
end

View file

@ -0,0 +1,17 @@
class CommentEmailScrubber < Rails::Html::PermitScrubber
def initialize
super
self.tags = MarkdownProcessor::AllowedTags::EMAIL_COMMENT
self.attributes = MarkdownProcessor::AllowedAttributes::EMAIL_COMMENT
end
def allowed_node?(node)
tags.include?(node.name) && node.children.present?
end
# The default behavior of PermitScrubber removes the <script> tags
# but keeps the contents and this is required to fix that
def skip_node?(node)
node.name == "script" || super
end
end

View file

@ -57,6 +57,8 @@ module MarkdownProcessor
SIDEBAR = %w[b br em i p strike strong u].freeze
BADGE_ACHIEVEMENT_CONTEXT_MESSAGE = %w[a b code em i strong u].freeze
EMAIL_COMMENT = %w[strong em a p span].freeze
end
# A container module for the allowed attributes in various rendering
@ -77,5 +79,7 @@ module MarkdownProcessor
MARKDOWN_PROCESSOR = %w[alt href src].freeze
BADGE_ACHIEVEMENT_CONTEXT_MESSAGE = %w[href name].freeze
EMAIL_COMMENT = %w[href].freeze
end
end

View file

@ -1,30 +1,65 @@
<head>
<style type="text/css">
img {
max-width:100%;
height:auto;
border:none
}
</style>
</head>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table style="width:100%;" cellpadding="0" cellspacing="0">
<!-- Header -->
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding: 25px 2px 35px; width: 50%">
<a href="<%= URL.url("/") %>">
<% if Settings::General.resized_logo.present? %>
<img width="50px" src="<%= optimized_image_url(URL.local_image(Settings::General.resized_logo), width: 50, fetch_format: "png")%>" alt="<%= community_name %>">
<% else %>
<span>
<%= community_name %>
</span>
<% end %>
</a>
</td>
<td align="right" bgcolor="#FFFFFF" style="padding: 25px 2px 35px; width:50%;">
<div width="50px" height="50px" style="width: 50px; height: 50px;">
<a href="<%= URL.user(@user) %>">
<img width="50px" height="50px" style="width: 50px; height: 50px;" src="<%= URL.local_image(@user.profile_image_url_for(length: 50)) %>">
</a>
</div>
</td>
</tr>
</table>
<h2 style="font-size:25px;"><%= link_to(@comment.user.name, user_url(@comment.user)) %> replied to you on <%= community_name %></h2>
<table>
<tr>
<td style='color:#c3c3c3;font-size:14px;padding-bottom:8px'>
<% unless @comment.is_root? %>
<%= truncate(strip_tags(@comment.parent_or_root_article.processed_html.html_safe), length: 80) %>
<% end %>
<table style="width:100%;" cellpadding="0" cellspacing="0">
<!-- Heading -->
<tr>
<td align="center" bgcolor="#FFFFFF" style="padding: 25px 2px 35px;">
<h1 style="margin: 0; font-size: 24px; color: #333;"> <%= @comment.user.name %> replied to you on <%= community_name %> </h1>
</td>
</tr>
<!-- Content -->
<tr>
<td>
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 30px"></td>
<td bgcolor="#F8F8F8" style="padding: 8px; text-align: left; color: #3a3c3d; font-size: 16px; border-radius: 8px;">
<h2 style="font-size:18px;color:rgb(107, 107, 107)">re: <em><%= @comment.commentable&.title || "Content No Longer Available" %></em></h2>
<%= @truncated_comment %>
</td>
<td style="width: 30px"></td>
</tr>
</table>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding: 16px 8px; text-align: center;">
<a style="background:<%= Settings::UserExperience.primary_brand_color_hex %>;color:white;padding:8px 30px;border-radius:6px;text-decoration:none;display:inline-block;margin-top:4px;font-size:20px" href='<%= comment_url(@comment) %>'>
View reply
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style='padding:20px;padding-bottom:30px;border-radius:3px;font-size:19px;background:#f4f4f4'>
<h2 style="font-size:22px;color:rgb(107, 107, 107)">re: <em><%= @comment.commentable&.title || "Content No Longer Available" %></em></h2>
<%= @comment.processed_html.html_safe %>
<a style="background:#3c7dc1;color:white;padding:5px 14px;border-radius:3px;text-decoration:none;display:inline-block;margin-top:4px;" href='<%= comment_url(@comment) %>'>View on <%= community_name %></a>&nbsp;
<% if @comment.commentable %>
<a style="background:#1f1f1f;color:white;padding:5px 14px;border-radius:3px;text-decoration:none;display:inline-block;margin-top:4px;" href='<%= app_url(@comment.commentable.path) %>'>Read original post</a>
<% end %>
</td>
</tr>
</table>
</table>