🚸(frontend) allow opening "interlinks" with ctrl/command/middle mouse

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>

Author: manuhabitela

CHANGELOG.md

@@ -6,6 +6,8 @@ and this project adheres to
 
 ## [Unreleased]
 
+- 🚸(frontend) allow opening "@page" links with ctrl/command/middle-mouse click
+
 ### Added
 
 - 🔧(backend) settings CONVERSION_UPLOAD_ENABLED to control usage of docspec

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

@@ -124,17 +124,35 @@ 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 (
     <BoxButton
       as="span"
       className="--docs--interlinking-link-inline-content"
       onClick={handleClick}
+      onAuxClick={handleAuxClick}
       draggable="false"
       $css={css`
         display: inline;