✨(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

@@ -43,6 +43,7 @@ and this project adheres to
 - 🐛(frontend) fix attachment download filename #1447
 - 🐛(frontend) exclude h4-h6 headings from table of contents #1441
 - 🔒(frontend) prevent readers from changing callout emoji #1449
+- 🐛(frontend) preserve interlink style on drag-and-drop in editor #1460
 
 ## [3.7.0] - 2025-09-12
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -26,6 +26,7 @@ import {
   useUploadFile,
   useUploadStatus,
 } from '../hook';
+import { useInterlinkDropNormalizer } from '../hook/useInterlinkDropNormalizer';
 import { useEditorStore } from '../stores';
 import { cssEditor } from '../styles';
 import { DocsBlockNoteEditor } from '../types';
@@ -167,6 +168,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   useHeadings(editor);
   useShortcuts(editor);
   useUploadStatus(editor);
+  useInterlinkDropNormalizer(editor);
 
   useEffect(() => {
     setEditor(editor);

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useInterlinkDropNormalizer.ts

@@ -0,0 +1,168 @@
+import type {
+  Block as BNBlock,
+  PartialInlineContent as BNPartialInlineContent,
+} from '@blocknote/core';
+import { useEffect } from 'react';
+
+import { blockNoteSchema } from '../components/BlockNoteEditor';
+import type { DocsBlockNoteEditor } from '../types';
+
+type InlineElement = BNPartialInlineContent<
+  typeof blockNoteSchema.inlineContentSchema,
+  typeof blockNoteSchema.styleSchema
+>[number];
+
+type Change = {
+  source?: { type?: string };
+  block: BNBlock<
+    typeof blockNoteSchema.blockSchema,
+    typeof blockNoteSchema.inlineContentSchema,
+    typeof blockNoteSchema.styleSchema
+  >;
+};
+
+/** Check if a given href points to an internal Docs URL. */
+const isInternalDocUrl = (href: string): boolean =>
+  /^\/docs\/[^\s/?#]+/.test(href);
+
+/** Type guard — detects text inline content (plain text nodes). */
+const isTextInline = (val: unknown): val is { type: 'text'; text: string } =>
+  typeof val === 'object' &&
+  val !== null &&
+  'type' in val &&
+  (val as { type: string }).type === 'text' &&
+  'text' in val &&
+  typeof (val as { text: unknown }).text === 'string';
+
+/** Type guard, detects standard link inlines (that may need normalization). */
+const isLinkInline = (
+  val: unknown,
+): val is {
+  type: 'link';
+  href: string;
+  content: Array<{ type: 'text'; text: string }>;
+} =>
+  typeof val === 'object' &&
+  val !== null &&
+  'type' in val &&
+  (val as { type: string }).type === 'link' &&
+  'href' in val &&
+  typeof (val as { href: unknown }).href === 'string' &&
+  'content' in val &&
+  Array.isArray((val as { content: unknown }).content);
+
+/** Extracts the visible text from a link inline’s nested content. */
+const getLinkText = (content: unknown): string => {
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    return content
+      .filter(isTextInline)
+      .map((c) => c.text)
+      .join('');
+  }
+  return '';
+};
+
+/**
+ * Converts plain `<a>` links pointing to `/docs/:id`
+ * into `interlinkingLinkInline` objects, preserving title and docId.
+ */
+const convertInline = (
+  inline: InlineElement[],
+): { newInline: InlineElement[]; changed: boolean } => {
+  let changed = false;
+
+  const newInline = inline.map((ic) => {
+    if (isLinkInline(ic) && isInternalDocUrl(ic.href)) {
+      const match = ic.href.match(/^\/docs\/([^\s/?#]+)/);
+      const docId = match ? match[1] : '';
+      const title = getLinkText(ic.content);
+      changed = true;
+
+      return {
+        type: 'interlinkingLinkInline',
+        props: { url: ic.href, docId, title },
+      } as InlineElement;
+    }
+    return ic;
+  });
+
+  return { newInline, changed };
+};
+
+/**
+ * Recursively traverses a block tree to normalize internal links
+ * and collect updates for the affected blocks.
+ */
+const normalizeBlock = (
+  block: BNBlock<
+    typeof blockNoteSchema.blockSchema,
+    typeof blockNoteSchema.inlineContentSchema,
+    typeof blockNoteSchema.styleSchema
+  >,
+  updates: Array<{ id: string; content: InlineElement[] }>,
+): void => {
+  if (Array.isArray(block.content)) {
+    const { newInline, changed } = convertInline(
+      block.content as InlineElement[],
+    );
+    if (changed) {
+      updates.push({ id: block.id, content: newInline });
+    }
+  }
+
+  if (Array.isArray(block.children)) {
+    block.children.forEach((child) => normalizeBlock(child, updates));
+  }
+};
+
+/**
+ * Normalizes dropped interlinks in the BlockNote editor.
+ *
+ * When a user drags and drops a block containing an internal link (/docs/:id)
+ * into another column, BlockNote may convert it into a standard <a> link.
+ *
+ * This hook listens to `drop` events in the editor and restores the proper
+ * inline type `interlinkingLinkInline` (with url, docId, and title props).
+ *
+ * @param editor The active DocsBlockNoteEditor instance.
+ */
+export const useInterlinkDropNormalizer = (
+  editor: DocsBlockNoteEditor,
+): void => {
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    const unsubscribe = editor.onChange((ed, { getChanges }) => {
+      const changes = getChanges() as Change[];
+
+      const isRelevantChange = (type?: string) =>
+        type === 'drop' ||
+        type === 'paste' ||
+        type === 'insert' ||
+        type === undefined;
+
+      if (!changes.some((c) => isRelevantChange(c.source?.type))) {
+        return;
+      }
+
+      const updates: Array<{ id: string; content: InlineElement[] }> = [];
+
+      changes.forEach(({ block }) => {
+        normalizeBlock(block, updates);
+      });
+
+      updates.forEach(({ id, content }) => {
+        ed.updateBlock(id, { content });
+      });
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [editor]);
+};