From 4dcf752ff92e6276c65d005b3659a99b2d37d916 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Fri, 3 Apr 2026 14:38:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20allow=20opening=20"int?=
 =?UTF-8?q?erlinks"=20with=20ctrl/command/middle=20mouse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Links to other pages created through the "@" shortcut are not actual
anchor (`<a>`) elements seemingly due to conflicts with lower-lvl
code, noticeably when drag&dropping the elements.

So those "links" are actually span and we must handle the
"link behavior" ourselves.

This adds more usual "link behavior" to thoses, allowing users to
ctrl+click, command+click, shift+click and middle-mouse click to
interact with the links and open them in a new tab or new window.

Signed-off-by: Emmanuel Pelletier <manu@habite.la>
---
 CHANGELOG.md                                  |  4 ++++
 .../InterlinkingLinkInlineContent.tsx         | 20 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9080e6b8..1e974991 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- 🚸(frontend) allow opening "@page" links with ctrl/command/middle-mouse click
+
 ## [v4.8.5] - 2026-04-03
 
 ### Added
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
index f07ac5fa..43ce265c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
@@ -124,10 +124,27 @@ export const LinkSelected = ({
 
   const { emoji, titleWithoutEmoji } = getEmojiAndTitle(title);
   const router = useRouter();
+  const href = `/docs/${docId}/`;
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.preventDefault();
-    void router.push(`/docs/${docId}/`);
+
+    // If ctrl or command is pressed, it opens a new tab. If shift is pressed, it opens a new window
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      window.open(href, '_blank');
+      return;
+    }
+    void router.push(href);
+  };
+
+  // This triggers on middle-mouse click
+  const handleAuxClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button !== 1) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    window.open(href, '_blank');
   };
 
   return (
@@ -135,6 +152,7 @@ export const LinkSelected = ({
       as="span"
       className="--docs--interlinking-link-inline-content"
       onClick={handleClick}
+      onAuxClick={handleAuxClick}
       draggable="false"
       $css={css`
         display: inline;