From b239e911429f0b1dff38c1c0a8062c217763b970 Mon Sep 17 00:00:00 2001
From: Christophe Dervieux <christophe.dervieux@gmail.com>
Date: Fri, 3 Nov 2023 10:58:51 +0100
Subject: [PATCH] do the icon and external link processing before creating
 hover box with tippy

That way, links inside the hover box (e.g. citation links for DOI) would have the external icon
---
 news/changelog-1.4.md                         |  1 +
 .../formats/html/templates/quarto-html.ejs    | 82 +++++++++----------
 2 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/news/changelog-1.4.md b/news/changelog-1.4.md
index db43c3cad5..8030566bb6 100644
--- a/news/changelog-1.4.md
+++ b/news/changelog-1.4.md
@@ -38,6 +38,7 @@
 - ([#6833](https://github.com/quarto-dev/quarto-cli/issues/6833)): Handle partially-specified aspect ratio, width, and height attributes in `video` shortcode.
 - ([#7137](https://github.com/quarto-dev/quarto-cli/discussions/7137)): Automatically set `rel="noopener"` when setting a target on external links
 - ([#7187](https://github.com/quarto-dev/quarto-cli/issues/7187)): Add `html-table-processing: none` to document- and project-level metadata to disable HTML table processing. Add `{html-table-processing="none"}` to a fenced div to disable HTML table processing for the elements in that div. Add `html-table-processing: none` on knitr or jupyter cell to disable HTML table processing for the cell output content.
+- ([#7441](https://github.com/quarto-dev/quarto-cli/issues/7441)): Links in hover box (e.g. links to DOI when hover for citations is opt-in) are now correctly process for external and new window processing (when `link-external-icon: true` and `link-external-newwindow: true`).
 
 ## Appendix
 
diff --git a/src/resources/formats/html/templates/quarto-html.ejs b/src/resources/formats/html/templates/quarto-html.ejs
index 8728696ace..d9f6f80699 100644
--- a/src/resources/formats/html/templates/quarto-html.ejs
+++ b/src/resources/formats/html/templates/quarto-html.ejs
@@ -337,6 +337,47 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
 
   <% } %>
 
+  <% if (linkExternalIcon || linkExternalNewwindow) { %>
+    var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
+    var mailtoRegex = new RegExp(/^mailto:/);
+    <% if (linkExternalFilter && linkExternalFilter.match(/\\\\/)) { %>
+      <%- `var filterRegex = new RegExp(/${linkExternalFilter}/);` %>
+    <% } else if (linkExternalFilter) { %>
+      <%= `var filterRegex = new RegExp("${linkExternalFilter}");` %>
+    <% } else { %>
+      var filterRegex = new RegExp('/' + window.location.host + '/');
+    <% } %>
+    var isInternal = (href) => {
+        return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
+    }
+    // Inspect non-navigation links and adorn them if external
+ 	var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool)');
+    for (var i=0; i<links.length; i++) {
+      const link = links[i];
+      if (!isInternal(link.href)) {
+        <% if (linkExternalNewwindow) { %> 
+          // target, if specified
+          link.setAttribute("target", "_blank");
+          if (link.getAttribute("rel") === null) {
+            link.setAttribute("rel", "noopener");
+          }
+        <% } %>
+
+        
+        <% if (linkExternalIcon && typeof(linkExternalIcon) === 'string') { %> 
+          // external icon, if provided
+          var extIcon = window.document.createElement('i');
+          extIcon.classList.add('bi-<%=linkExternalIcon%>');
+          extIcon.classList.add('quarto-ext-icon');
+          link.parentNode.insertBefore(extIcon, link.nextSibling)
+        <% } else if (linkExternalIcon) { %>
+          // default icon
+          link.classList.add("external");
+        <% } %>
+      }
+    }
+  <% } %>
+
   <% if (tippy) { %>
   function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
     const config = {
@@ -784,47 +825,6 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
 
   <% } %>
 
-
-  <% if (linkExternalIcon || linkExternalNewwindow) { %>
-    var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
-    var mailtoRegex = new RegExp(/^mailto:/);
-    <% if (linkExternalFilter && linkExternalFilter.match(/\\\\/)) { %>
-      <%- `var filterRegex = new RegExp(/${linkExternalFilter}/);` %>
-    <% } else if (linkExternalFilter) { %>
-      <%= `var filterRegex = new RegExp("${linkExternalFilter}");` %>
-    <% } else { %>
-      var filterRegex = new RegExp('/' + window.location.host + '/');
-    <% } %>
-    var isInternal = (href) => {
-        return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
-    }
-    // Inspect non-navigation links and adorn them if external
- 	var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool)');
-    for (var i=0; i<links.length; i++) {
-      const link = links[i];
-      if (!isInternal(link.href)) {
-        <% if (linkExternalNewwindow) { %> 
-          // target, if specified
-          link.setAttribute("target", "_blank");
-          if (link.getAttribute("rel") === null) {
-            link.setAttribute("rel", "noopener");
-          }
-        <% } %>
-
-        
-        <% if (linkExternalIcon && typeof(linkExternalIcon) === 'string') { %> 
-          // external icon, if provided
-          var extIcon = window.document.createElement('i');
-          extIcon.classList.add('bi-<%=linkExternalIcon%>');
-          extIcon.classList.add('quarto-ext-icon');
-          link.parentNode.insertBefore(extIcon, link.nextSibling)
-        <% } else if (linkExternalIcon) { %>
-          // default icon
-          link.classList.add("external");
-        <% } %>
-      }
-    }
-  <% } %>
 });
 
 </script>