Allow rich text for Developer#bio (joemasilotti#638)

* add concern to handle Developer#bio rich text rendering

* use Developer#rich_text_bio in show page

* test Developers::RichText concern

* use custom renderer

* run check

* remove custom markdown renderer

* update test to ignore MD links and images

* updated CHANGELOG

* add Markdown supported text

* update doc link and changelog type

* add option for plaintext renderer

* use plain_text_bio in card component

* run check

* Line up comments with options; tweak CHANGELOG

* Disable highlighted markdown, it's too agressive

Co-authored-by: Joe Masilotti <[email protected]>

Author: rayhanw

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ## September
 
+* September 15 - Allow rich text for developer bios #638 @rayhanw
 * September 15 - Show "Featured" badge in search results #642
 * September 14 - Only ever send one Celebration Promotion email #617 @sarvaiyanidhi
 * September 13 - Impersonate users directly from `/admin/users` #627 @KarlHeitmann

app/components/developers/card_component.html.erb

@@ -22,7 +22,7 @@
       <% end %>
 
       <div class="mt-2 text-sm sm:text-base text-gray-700 space-y-4">
-        <p class="line-clamp-3 break-words"><%= strip_tags bio %></p>
+        <p class="line-clamp-3 break-words"><%= developer.plain_text_bio %></p>
       </div>
     </div>
   <% end %>

app/models/concerns/developers/rich_text.rb

@@ -0,0 +1,50 @@
+module Developers
+  module RichText
+    require "redcarpet/render_strip"
+
+    def rich_text_bio
+      @rich_text_bio ||= markdown.render(bio).strip
+    end
+
+    def plain_text_bio
+      @plain_text_bio ||= plain_text_markdown.render(bio).strip
+    end
+
+    private
+
+    # https://github.com/vmg/redcarpet#and-its-like-really-simple-to-use
+    MARKDOWN_OPTIONS = {
+      disable_indented_code_blocks: true,
+      fenced_code_blocks: true,
+      highlight: false,
+      strikethrough: true,
+      superscript: true,
+      underline: true
+    }.freeze
+
+    # https://github.com/vmg/redcarpet#darling-i-packed-you-a-couple-renderers-for-lunch
+    RENDER_OPTIONS = {
+      filter_html: true,
+      hard_wrap: true,
+      no_images: true,
+      no_links: true,
+      no_styles: true
+    }.freeze
+
+    def renderer
+      @renderer ||= Redcarpet::Render::HTML.new(RENDER_OPTIONS)
+    end
+
+    def markdown
+      @markdown ||= Redcarpet::Markdown.new(renderer, MARKDOWN_OPTIONS)
+    end
+
+    def plain_text_renderer
+      @plain_text_renderer ||= Redcarpet::Render::StripDown
+    end
+
+    def plain_text_markdown
+      @plain_text_markdown ||= Redcarpet::Markdown.new(plain_text_renderer, MARKDOWN_OPTIONS)
+    end
+  end
+end

app/models/developer.rb

@@ -2,6 +2,7 @@ class Developer < ApplicationRecord
   include Availability
   include Avatarable
   include Developers::Notifications
+  include Developers::RichText
   include HasSocialProfiles
   include PersonName
   include PgSearch::Model

app/views/developers/_form.html.erb

@@ -125,6 +125,8 @@
               <li class="mt-1"><%= t(".bio.examples.help") %></li>
               <li class="mt-1"><%= t(".bio.examples.unique") %></li>
             </ul>
+
+            <p class="mt-4 text-sm text-gray-500"><%= t(".bio.markdown") %></p>
           </div>
         </div>
 

app/views/developers/show.html.erb

@@ -36,7 +36,7 @@
               <div class="py-3 lg:pt-6 lg:pb-0">
                 <h2 class="sr-only"><%= t(".description") %></h2>
                 <div class="prose max-w-prose">
-                  <%= simple_format(strip_tags(@developer.bio)) %>
+                  <%== @developer.rich_text_bio %>
                 </div>
               </div>
             </div>

config/locales/en.yml

@@ -287,6 +287,7 @@ en:
           title: Example topics
           unique: Your unique skills that make you awesome
         help_text: Personally identifiable information will be removed.
+        markdown: Markdown is supported but links and images are removed.
         title: Bio
       creating: Creating...
       loading: Loading...

test/models/concerns/developers/rich_text_test.rb

@@ -0,0 +1,58 @@
+require "test_helper"
+
+class Developers::RichTextTest < ActiveSupport::TestCase
+  test "#rich_text_bio parses bio correctly" do
+    developer = developers(:one)
+    bio = <<~MD
+      # H1
+      This is _underlined_
+      `Inline code block`
+    MD
+    developer.update!(bio:)
+
+    assert_match(/<h1>H1<\/h1>/, developer.rich_text_bio)
+    assert_match "This is <u>underlined</u>", developer.rich_text_bio
+    assert_match "<code>Inline code block</code>", developer.rich_text_bio
+  end
+
+  test "#rich_text_bio disallows manually written HTML tags" do
+    developer = developers(:one)
+    bio = <<~MD
+      <h1>Hello world</h1>
+    MD
+    developer.update!(bio:)
+
+    assert_no_match(/<h1>Hello world<\/h1>/, developer.rich_text_bio)
+    assert_match(/<p>Hello world<\/p>/, developer.rich_text_bio)
+  end
+
+  test "#rich_text_bio ignores links" do
+    developer = developers(:one)
+    bio = <<~MD
+      [Text](https://example.com)
+    MD
+    developer.update!(bio:)
+
+    assert_equal developer.rich_text_bio, "<p>[Text](https://example.com)</p>"
+  end
+
+  test "#rich_text_bio ignores images" do
+    developer = developers(:one)
+    bio = <<~MD
+      ![Image](https://example.com)
+    MD
+    developer.update!(bio:)
+
+    assert_equal developer.rich_text_bio, "<p>![Image](https://example.com)</p>"
+  end
+
+  test "#plain_text_bio strips to plaintext" do
+    developer = developers(:one)
+    bio = <<~MD
+      **hi** _bye_
+    MD
+    developer.update!(bio:)
+
+    assert_equal developer.plain_text_bio, "hi bye"
+  end
+end