From fe9de6c25b8c4798a30e3dc20992d710e4dd6864 Mon Sep 17 00:00:00 2001
From: Colton Padden <colton.padden@fastmail.com>
Date: Thu, 30 Dec 2021 12:52:58 -0500
Subject: [PATCH 1/2] support cmd/ctrl+click for internal techdoc links

Signed-off-by: Colton Padden <colton.padden@fastmail.com>
---
 .changeset/hot-lobsters-yell.md                   |  5 +++++
 plugins/techdocs/src/reader/components/Reader.tsx | 12 +++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/hot-lobsters-yell.md

diff --git a/.changeset/hot-lobsters-yell.md b/.changeset/hot-lobsters-yell.md
new file mode 100644
index 0000000000..1fdc923a82
--- /dev/null
+++ b/.changeset/hot-lobsters-yell.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Adds support for opening internal Techdocs links in a new tab with CTRL+Click or CMD+Click
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 264da9531a..b00a60d3d7 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -338,17 +338,23 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
         scrollIntoAnchor(),
         addLinkClickListener({
           baseUrl: window.location.origin,
-          onClick: (_: MouseEvent, url: string) => {
+          onClick: (event: MouseEvent, url: string) => {
+            // use `window.open` to open links in a new tab when CTRL or META keys are pressed
+            const navigateFn =
+              event.ctrlKey || event.metaKey
+                ? (u: string) => window.open(u, '_blank')
+                : navigate;
+
             const parsedUrl = new URL(url);
             // hash exists when anchor is clicked on secondary sidebar
             if (parsedUrl.hash) {
-              navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
+              navigateFn(`${parsedUrl.pathname}${parsedUrl.hash}`);
               // Scroll to hash if it's on the current page
               transformedElement
                 ?.querySelector(`#${parsedUrl.hash.slice(1)}`)
                 ?.scrollIntoView();
             } else {
-              navigate(parsedUrl.pathname);
+              navigateFn(parsedUrl.pathname);
               // Scroll to top of reader if primary sidebar link is clicked
               transformedElement
                 ?.querySelector('.md-content__inner')

From d6934ee733bc0954df92104702b73864bfa9b815 Mon Sep 17 00:00:00 2001
From: Colton Padden <colton.padden@fastmail.com>
Date: Mon, 3 Jan 2022 09:35:39 -0500
Subject: [PATCH 2/2] prevent scrolling when links are openened in a new tab

Signed-off-by: Colton Padden <colton.padden@fastmail.com>
---
 .../techdocs/src/reader/components/Reader.tsx | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index b00a60d3d7..293156f1fb 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -339,26 +339,31 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
         addLinkClickListener({
           baseUrl: window.location.origin,
           onClick: (event: MouseEvent, url: string) => {
-            // use `window.open` to open links in a new tab when CTRL or META keys are pressed
-            const navigateFn =
-              event.ctrlKey || event.metaKey
-                ? (u: string) => window.open(u, '_blank')
-                : navigate;
-
+            // detect if CTRL or META keys are pressed so that links can be opened in a new tab with `window.open`
+            const modifierActive = event.ctrlKey || event.metaKey;
             const parsedUrl = new URL(url);
+
             // hash exists when anchor is clicked on secondary sidebar
             if (parsedUrl.hash) {
-              navigateFn(`${parsedUrl.pathname}${parsedUrl.hash}`);
-              // Scroll to hash if it's on the current page
-              transformedElement
-                ?.querySelector(`#${parsedUrl.hash.slice(1)}`)
-                ?.scrollIntoView();
+              if (modifierActive) {
+                window.open(`${parsedUrl.pathname}${parsedUrl.hash}`, '_blank');
+              } else {
+                navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
+                // Scroll to hash if it's on the current page
+                transformedElement
+                  ?.querySelector(`#${parsedUrl.hash.slice(1)}`)
+                  ?.scrollIntoView();
+              }
             } else {
-              navigateFn(parsedUrl.pathname);
-              // Scroll to top of reader if primary sidebar link is clicked
-              transformedElement
-                ?.querySelector('.md-content__inner')
-                ?.scrollIntoView();
+              if (modifierActive) {
+                window.open(parsedUrl.pathname, '_blank');
+              } else {
+                navigate(parsedUrl.pathname);
+                // Scroll to top of reader if primary sidebar link is clicked
+                transformedElement
+                  ?.querySelector('.md-content__inner')
+                  ?.scrollIntoView();
+              }
             }
           },
         }),