Autolink emails and URLs at rendering time

app/helpers/html_helper.rb

@@ -0,0 +1,46 @@
+module HtmlHelper
+  def format_html(html)
+    fragment = Nokogiri::HTML.fragment(html)
+
+    auto_link(fragment)
+
+    fragment.to_html.html_safe
+  end
+
+  private
+    EXCLUDED_ELEMENTS = %w[ a figcaption pre code ]
+    EMAIL_REGEXP = /\b[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\b/
+    URL_REGEXP = URI::DEFAULT_PARSER.make_regexp(%w[http https])
+
+    def auto_link(fragment)
+      fragment.traverse do |node|
+        next unless auto_linkable_node?(node)
+
+        content = node.text
+        linked_content = content.dup
+
+        auto_link_urls(linked_content)
+        auto_link_emails(linked_content)
+
+        if linked_content != content
+          node.replace(Nokogiri::HTML.fragment(linked_content))
+        end
+      end
+    end
+
+    def auto_linkable_node?(node)
+      node.text? && node.ancestors.none? { |ancestor| EXCLUDED_ELEMENTS.include?(ancestor.name) }
+    end
+
+    def auto_link_urls(linked_content)
+      linked_content.gsub!(URL_REGEXP) do |match|
+        %(<a href="#{match}" rel="noreferrer">#{match}</a>)
+      end
+    end
+
+    def auto_link_emails(text)
+      text.gsub!(EMAIL_REGEXP) do |match|
+        %(<a href="mailto:#{match}">#{match}</a>)
+      end
+    end
+end

app/javascript/controllers/retarget_links_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.querySelectorAll("a").forEach(this.#retargetLink.bind(this))
+  }
+
+  #retargetLink(link) {
+    link.target = this.#targetsSameDomain(link) ? "_top" : "_blank"
+  }
+
+  #targetsSameDomain(link) {
+    return link.href.startsWith(window.location.origin)
+  }
+}

app/views/cards/comments/_comment.html.erb

@@ -28,7 +28,7 @@
           <% end %>
         </div>
 
-        <div class="comment__body rich-text-content txt-align-start" data-controller="syntax-highlight">
+        <div class="comment__body rich-text-content txt-align-start" data-controller="syntax-highlight retarget-links">
           <%= comment.body %>
         </div>
 

app/views/cards/container/_title.html.erb

@@ -4,7 +4,7 @@
       <h1 class="card__title flex align-start gap-half">
         <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link" %>
       </h1>
-      <div class="card__description rich-text-content margin-block-half rich-text-content" data-controller="syntax-highlight">
+      <div class="card__description rich-text-content margin-block-half rich-text-content" data-controller="syntax-highlight retarget-links">
         <%= card.description %>
       </div>
     </div>

app/views/layouts/action_text/contents/_content.html.erb

@@ -1,3 +1,3 @@
 <div class="action-text-content">
-  <%= yield -%>
+  <%= format_html yield -%>
 </div>

test/helpers/html_helper_test.rb

@@ -0,0 +1,35 @@
+require "test_helper"
+
+class HtmlHelperTest < ActionView::TestCase
+  test "converts URLs into anchor tags" do
+    assert_equal_html \
+      %(<p>Check this: <a href="https://example.com" rel="noreferrer">https://example.com</a></p>),
+      format_html("<p>Check this: https://example.com</p>")
+  end
+
+  test "respect existing links" do
+    assert_equal_html \
+      %(<p>Check this: <a href="https://example.com">https://example.com</a></p>),
+      format_html("<p>Check this: <a href=\"https://example.com\">https://example.com</a></p>")
+  end
+
+  test "converts email addresses into mailto links" do
+    assert_equal_html \
+      %(<p>Contact us at <a href="mailto:support@example.com">support@example.com</a></p>),
+      format_html("<p>Contact us at support@example.com</p>")
+  end
+
+  test "respect existing linked emails" do
+    assert_equal_html \
+      %(<p>Contact us at <a href="mailto:support@example.com">support@example.com</a></p>),
+      format_html(%(<p>Contact us at <a href="mailto:support@example.com">support@example.com</a></p>))
+  end
+
+  test "don't autolink content in excluded elements" do
+    %w[ figcaption pre code ].each do |element|
+      assert_equal_html \
+        "<#{element}>Check this: https://example.com</#{element}>",
+        format_html("<#{element}>Check this: https://example.com</#{element}>")
+    end
+  end
+end