✨(frontend) preserve interlink style on drag-and-drop in editor

adds hook to normalize dropped blocks and restore internal link format

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -46,6 +46,7 @@ and this project adheres to
 - 🐛(frontend) fix overlapping placeholders in multi-column layout #1455
 - 🐛(backend) filter invitation with case insensitive email
 - 🐛(frontend) reduce no access image size from 450 to 300 #1463
+- 🐛(frontend) preserve interlink style on drag-and-drop in editor #1460
 
 ## [3.7.0] - 2025-09-12
 

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -760,7 +760,7 @@ test.describe('Doc Editor', () => {
     // Wait for the interlink to be created and rendered
     const editor = page.locator('.ProseMirror.bn-editor');
 
-    const interlink = editor.getByRole('link', {
+    const interlink = editor.getByRole('button', {
       name: docChild2,
     });
 

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -472,7 +472,7 @@ test.describe('Doc Export', () => {
 
     // Search the interlinking link in the editor (not in the document tree)
     const editor = page.locator('.ProseMirror.bn-editor');
-    const interlink = editor.getByRole('link', {
+    const interlink = editor.getByRole('button', {
       name: randomDoc,
     });
 

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

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { createReactInlineContentSpec } from '@blocknote/react';
+import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { css } from 'styled-components';
 
-import { StyledLink, Text } from '@/components';
+import { BoxButton, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
 import { useDoc } from '@/docs/doc-management';
@@ -51,10 +52,16 @@ interface LinkSelectedProps {
 }
 const LinkSelected = ({ url, title }: LinkSelectedProps) => {
   const { colorsTokens } = useCunninghamTheme();
+  const router = useRouter();
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    router.push(url);
+  };
 
   return (
-    <StyledLink
-      href={url}
+    <BoxButton
+      onClick={handleClick}
       draggable="false"
       $css={css`
         display: inline;
@@ -75,6 +82,6 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
       <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
         {title}
       </Text>
-    </StyledLink>
+    </BoxButton>
   );
 };