Merge pull request #1860 from codidact/0valt/1857/markdown-in-titles

Allow Markdown in post titles

Author: Oaphi

app/assets/stylesheets/application.scss

@@ -308,5 +308,4 @@ kbd {
     left: 0.25em;
     right: 0.25em;
   };
-  vertical-align: text-bottom;
 }

app/assets/stylesheets/posts.scss

@@ -58,6 +58,10 @@ h1 .badge.is-tag.is-master-tag {
     width: 100%;
     overflow-wrap: break-word;
   }
+
+  del {
+    background-color: transparent;
+  }
 }
 
 .post-list--content {
@@ -145,6 +149,10 @@ h1 .badge.is-tag.is-master-tag {
     width: 100%;
   }
 
+  del {
+    background-color: transparent;
+  }
+
   @media screen and (min-width: $screen-md) {
     flex-direction: row;
 

app/helpers/application_helper.rb

@@ -114,12 +114,29 @@ def short_number_to_human(*args, **opts)
 
   ##
   # Render a markdown string to HTML with consistent options.
-  # @param markdown [String] The markdown string to render.
-  # @return [String] The rendered HTML string.
-  def render_markdown(markdown)
-    CommonMarker.render_doc(markdown,
-                            [:FOOTNOTES, :LIBERAL_HTML_TAG, :STRIKETHROUGH_DOUBLE_TILDE],
-                            [:table, :strikethrough, :autolink]).to_html(:UNSAFE)
+  # @param markdown [String] markdown string to render
+  # @option opts :footnotes [Boolean] render footnotes?
+  # @option opts :strikethrough [Boolean] render strikethrough?
+  # @option opts :tables [Boolean] render tables?
+  # @return [String] rendered HTML string
+  def render_markdown(markdown, **opts)
+    extensions = [:autolink]
+    options = [:LIBERAL_HTML_TAG]
+
+    unless opts[:footnotes] == false
+      options << :FOOTNOTES
+    end
+
+    unless opts[:strikethrough] == false
+      extensions << :strikethrough
+      options << :STRIKETHROUGH_DOUBLE_TILDE
+    end
+
+    unless opts[:tables] == false
+      extensions << :table
+    end
+
+    CommonMarker.render_doc(markdown, options, extensions).to_html(:UNSAFE)
   end
 
   ##

app/helpers/posts_helper.rb

@@ -8,6 +8,14 @@ def post_user_link(post, active: false)
     user_link(user, { host: post.community.host })
   end
 
+  # Renders title for a given post
+  # @param post [Post] post to render the title for
+  # @return [ActiveSupport::SafeBuffer] rendered title
+  def rendered_title(post)
+    raw_title = post.top_level? ? post.title : post.parent.title
+    sanitize(render_markdown(raw_title), scrubber: title_scrubber)
+  end
+
   ##
   # Get HTML for a field - should only be used in Markdown create/edit requests. Prioritises using the client-side
   # rendered HTML over rendering server-side.
@@ -76,6 +84,31 @@ def max_title_length(_category)
     [SiteSetting['MaxTitleLength'] || 255, 255].min
   end
 
+  class PostTitleScrubber < Rails::HTML::PermitScrubber
+    def initialize
+      super
+
+      attrs = []
+      tags = []
+
+      allowed_types = SiteSetting['AllowedPostTitleFormattingTypes'] || ['code', 'italic', 'keyboard']
+      tags.push('del', 'strike') if allowed_types.include?('strikethrough')
+      tags << 'code' if allowed_types.include?('code')
+      tags << 'kbd' if allowed_types.include?('keyboard')
+      tags << 'em' if allowed_types.include?('italic')
+      tags << 'strong' if allowed_types.include?('bold')
+      tags << 'sub' if allowed_types.include?('subscript')
+      tags << 'sup' if allowed_types.include?('superscript')
+
+      self.tags = tags
+      self.attributes = attrs
+    end
+
+    def skip_node?(node)
+      node.text?
+    end
+  end
+
   class PostScrubber < Rails::Html::PermitScrubber
     ALLOWED_ATTRS = %w[id class href title src height width alt rowspan colspan lang start dir].freeze
 
@@ -100,4 +133,10 @@ def skip_node?(node)
   def scrubber
     PostsHelper::PostScrubber.new
   end
+
+  # Get a post title scrubber instance
+  # @return [PostTitleScrubber]
+  def title_scrubber
+    PostsHelper::PostTitleScrubber.new
+  end
 end

app/helpers/site_settings_helper.rb

@@ -1,3 +1,9 @@
-# Provides helper methods for use by views under <tt>SiteSettingsController</tt>.
 module SiteSettingsHelper
+  # Renders description for a given site setting
+  # @param setting [SiteSetting] setting to render the description for
+  # @return [ActiveSupport::SafeBuffer] rendered description
+  def rendered_description(setting)
+    raw_description = setting.description || ''
+    sanitize(render_markdown(raw_description))
+  end
 end

app/models/post.rb

@@ -115,11 +115,6 @@ def tag_set
     parent.nil? ? category.tag_set : parent.category.tag_set
   end
 
-  # @return [Boolean]
-  def meta?
-    false
-  end
-
   # Used in the transfer of content from SE to reassign the owner of a post to the given user.
   # @param new_user [User]
   def reassign_user(new_user)
@@ -167,37 +162,6 @@ def body_plain
     ApplicationController.helpers.strip_markdown(body_markdown)
   end
 
-  # @return [Boolean] whether this post is a question
-  def question?
-    post_type_id == Question.post_type_id
-  end
-
-  # @return [Boolean] whether this post is an answer
-  def answer?
-    post_type_id == Answer.post_type_id
-  end
-
-  # @return [Boolean] whether this post is an article
-  def article?
-    post_type_id == Article.post_type_id
-  end
-
-  # @return [Boolean] whether the post can be closed
-  def closeable?
-    post_type.is_closeable
-  end
-
-  # Is the post deleted by the owner?
-  # @return [Boolean] check result
-  def deleted_by_owner?
-    deleted_by&.same_as?(user)
-  end
-
-  # @return [Boolean] whether there is a suggested edit pending for this post
-  def pending_suggested_edit?
-    SuggestedEdit.where(post_id: id, active: true).any?
-  end
-
   # @return [SuggestedEdit, Nil] the suggested edit pending for this post (if any)
   def pending_suggested_edit
     SuggestedEdit.where(post_id: id, active: true).last
@@ -216,29 +180,6 @@ def recalc_score
     clear_attribute_changes([:score])
   end
 
-  # Checks whether the post allows users to comment on it
-  # @return [Boolean] check result
-  def comments_allowed?
-    !locked? && !deleted && !comments_disabled
-  end
-
-  # The test here is for flags that are pending (no status). A spam flag
-  # could be marked helpful but the post wouldn't be deleted, and
-  # we don't necessarily want the post to be treated like it's a spam risk
-  # if that happens.
-  def spam_flag_pending?
-    flags.any? { |flag| flag.post_flag_type&.name == "it's spam" && !flag.status }
-  end
-
-  # Checks whether a given user can access the post at all
-  # @param user [User, Nil] user to check access for
-  # @return [Boolean] access check result
-  def can_access?(user)
-    (!deleted? || user&.post_privilege?('flag_curate', self)) &&
-      (!category.present? || !category.min_view_trust_level.present? ||
-        category.min_view_trust_level <= (user&.trust_level || 0))
-  end
-
   # Maps reaction types to number of reactions of that type
   # @return [Hash{ReactionType => Integer}]
   def reaction_list
@@ -257,19 +198,85 @@ def related_posts_for(user)
     end
   end
 
+  # predicates:
+
+  # Is the post an Answer?
+  # @return [Boolean] check result
+  def answer?
+    post_type_id == Answer.post_type_id
+  end
+
+  # Is the post an Article?
+  # @return [Boolean] check result
+  def article?
+    post_type_id == Article.post_type_id
+  end
+
+  # Can a given user access the post at all?
+  # @param user [User, Nil] user to check access for
+  # @return [Boolean] check result
+  def can_access?(user)
+    (!deleted? || user&.post_privilege?('flag_curate', self)) &&
+      (!category.present? || !category.min_view_trust_level.present? ||
+        category.min_view_trust_level <= (user&.trust_level || 0))
+  end
+
+  # Can the post be closed?
+  # @return [Boolean] check result
+  def closeable?
+    post_type.is_closeable
+  end
+
+  # Are comments allowed on the post?
+  # @return [Boolean] check result
+  def comments_allowed?
+    !locked? && !deleted && !comments_disabled
+  end
+
+  # Is the post deleted by the owner?
+  # @return [Boolean] check result
+  def deleted_by_owner?
+    deleted_by&.same_as?(user)
+  end
+
+  # Is a given user following the post?
+  # @param user [User] user to check
+  # @return [Boolean] check result
+  def followed_by?(user)
+    ThreadFollower.where(post: self, user: user).any?
+  end
+
+  # Does the post have any pending (not handled) spam flags?
+  # A spam flag could be marked helpful but the post wouldn't be deleted, and
+  # we don't want the post to be treated like it's spam risk if that happens.
+  # @return [Boolean] check result
+  def pending_spam_flag?
+    flags.any? { |flag| flag.post_flag_type&.name == "it's spam" && !flag.status }
+  end
+
+  # Does the post have a pending suggested edit?
+  # @return [Boolean] check result
+  def pending_suggested_edit?
+    SuggestedEdit.where(post_id: id, active: true).any?
+  end
+
   # Checks if the post has related posts (scoped for a given user)
   # @param user [User, nil] user to check access for
   # @return [Boolean] check result
   def related_posts_for?(user)
     related_posts_for(user).any?
   end
 
-  # Are new threads on this post followed by a given user?
-  # @param post [Post] post to check
-  # @param user [User] user to check
+  # Is the post a top level post?
   # @return [Boolean] check result
-  def followed_by?(user)
-    ThreadFollower.where(post: self, user: user).any?
+  def top_level?
+    post_type.is_top_level
+  end
+
+  # Is the post a Question?
+  # @return [Boolean] check result
+  def question?
+    post_type_id == Question.post_type_id
   end
 
   private

app/views/posts/_expanded.html.erb

@@ -19,17 +19,14 @@
 <% category ||= defined?(@category) && @category.id == post.category_id ? @category : post.category %>
 <% post_type ||= defined?(@post_type) && @post_type.id == post.post_type_id ? @post_type : post.post_type %>
 
-<% is_question = post.post_type_id == Question.post_type_id %>
-<% is_top_level = post.parent_id.nil? %>
-
-<div class="post <%= post.meta? ? 'is-meta' : '' %> <%= is_top_level ? '' : 'has-border-bottom-style-solid has-border-bottom-width-1 has-border-color-tertiary-100' %>"
-     id="<%= (is_question ? 'question-' : 'answer-') + post.id.to_s %>"
+<div class="post <%= 'has-border-bottom-style-solid has-border-bottom-width-1 has-border-color-tertiary-100' unless post.top_level? %>"
+     id="<%= (post.question? ? 'question-' : 'answer-') + post.id.to_s %>"
      data-post-id="<%= post.id %>"
      data-ckb-list-item data-ckb-item-type="post"
      data-ckb-post-id="<%= post.id %>">
-  <% if is_top_level %>
+  <% if post.top_level? %>
     <h1 class="post--title has-margin-top-0 has-padding-2">
-      <% title = post.title +
+      <% title = rendered_title(post) +
                  (post.closed && !post.duplicate_post ? " [closed]" : "") +
                  (post.duplicate_post ? " [duplicate]" : "") %>
       <a href="<%= generic_share_link(post) %>" class="post--title-text"><%= title %></a>
@@ -72,7 +69,7 @@
         <%= render('posts/notices/locked', post: post) %>
       <% end %>
 
-      <% if post.spam_flag_pending? && user_signed_in? %>
+      <% if post.pending_spam_flag? && user_signed_in? %>
         <%= render('posts/notices/flagged', post: post, user: current_user) %>
       <% end %>
 
@@ -82,7 +79,7 @@
 
       <div class="post--body">
         <% effective_post = raw(sanitize(post.body, scrubber: scrubber)) %>
-        <% if post.spam_flag_pending? && !user_signed_in? %>
+        <% if post.pending_spam_flag? && !user_signed_in? %>
           <%= sanitize(effective_post, attributes: %w()) %>
         <% else %>
           <%= effective_post %>
@@ -223,7 +220,7 @@
           <%= render 'posts/flags_modal', post: post, user: current_user %>
         <% end %>
 
-        <% if is_top_level && post.children.undeleted.length >= SiteSetting["TableOfContentsThreshold"] && SiteSetting["TableOfContentsThreshold"] != -1 %>
+        <% if post.top_level? && post.children.undeleted.length >= SiteSetting["TableOfContentsThreshold"] && SiteSetting["TableOfContentsThreshold"] != -1 %>
           <div class="toc has-margin-left-4" id="toc-toggle">
             <button class="toc--header"
                     data-toggle="#toc-toggle"

app/views/posts/_list.html.erb

@@ -26,9 +26,9 @@
         <% if @show_category_tag && post.post_type.has_category %>
           <span class="badge is-tag is-filled"><%= post.category.name %></span>
         <% end %>
-        <%= post.post_type.is_top_level ? post.title : post.parent.title %>
+        <%= rendered_title(post) %>
         <%= post.post_type.is_closeable && post.closed && !post.duplicate_post  ? "[closed]" : "" %>
-      <%= post.duplicate_post && post.post_type.is_closeable && post.closed ? "[duplicate]" : "" %>
+        <%= post.duplicate_post && post.post_type.is_closeable && post.closed ? "[duplicate]" : "" %>
       <% end %>
     </div>
     <% if (SiteSetting['PostBodyListTruncateLength'] || 0) > 0 %>

app/views/site_settings/index.html.erb

@@ -28,7 +28,7 @@
               </p>
               <h4 class="overflow-ellipsis"
                   title="<%= setting.name %>"><%= setting.name %></h4>
-              <div class="form-caption"><%= setting.description %></div>
+              <div class="form-caption"><%= rendered_description(setting) %></div>
             </td>
             <% nowrap = setting.boolean? || setting.numeric? %>
             <td class="site-setting--value js-setting-value<%= nowrap ? ' nowrap' : ' wrap-word' %>"

db/seeds/site_settings.yml

@@ -776,3 +776,19 @@
   community_id: ~
   description: >
     File types that users will be able to upload.
+
+- name: AllowedPostTitleFormattingTypes
+  value: code italic keyboard
+  options:
+    - bold
+    - code
+    - italic
+    - keyboard
+    - strikethrough
+    - subscript
+    - superscript
+  value_type: array
+  category: Display
+  description: >
+    Formatting types allowed in post titles.
+    By default, only <code>code</code>, <kbd>keyboard</kbd>, and <em>italic</em> are enabled.