From d7c06702e3c39dddc0f970a62ec608119cd1b622 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Mon, 2 Jun 2025 12:04:43 +0200
Subject: [PATCH] Add controller to retarget links

So that internal links can skip turbo frames, and external links
open in new pages
---
 .../controllers/retarget_links_controller.js      | 15 +++++++++++++++
 app/views/cards/comments/_comment.html.erb        |  2 +-
 app/views/cards/container/_title.html.erb         |  2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/controllers/retarget_links_controller.js

diff --git a/app/javascript/controllers/retarget_links_controller.js b/app/javascript/controllers/retarget_links_controller.js
new file mode 100644
index 000000000..f0187711e
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb
index a1e863bf9..b0eeaee14 100644
--- a/app/views/cards/comments/_comment.html.erb
+++ b/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>
 
diff --git a/app/views/cards/container/_title.html.erb b/app/views/cards/container/_title.html.erb
index 1767fd854..0a45685e9 100644
--- a/app/views/cards/container/_title.html.erb
+++ b/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>