From 13f529e06483067e9d20365da796eb19e070533b Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 13 Jan 2026 15:35:53 +0000
Subject: [PATCH] fix anchor scroll in same page (#1834)

---
 .../components/mention/mention-view.tsx       | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/editor/components/mention/mention-view.tsx b/apps/client/src/features/editor/components/mention/mention-view.tsx
index 1ba55380..22cb8be6 100644
--- a/apps/client/src/features/editor/components/mention/mention-view.tsx
+++ b/apps/client/src/features/editor/components/mention/mention-view.tsx
@@ -1,19 +1,21 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import {
   buildPageUrl,
   buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
+import { extractPageSlugId } from "@/lib";
 import classes from "./mention.module.css";
 
 export default function MentionView(props: NodeViewProps) {
   const { node } = props;
   const { label, entityType, entityId, slugId, anchorId } = node.attrs;
-  const { spaceSlug } = useParams();
+  const { spaceSlug, pageSlug } = useParams();
   const { shareId } = useParams();
+  const navigate = useNavigate();
   const {
     data: page,
     isLoading,
@@ -23,6 +25,20 @@ export default function MentionView(props: NodeViewProps) {
   const location = useLocation();
   const isShareRoute = location.pathname.startsWith("/share");
 
+  const currentPageSlugId = extractPageSlugId(pageSlug);
+  const isSamePage = currentPageSlugId === slugId;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isSamePage && anchorId) {
+      e.preventDefault();
+      const element = document.querySelector(`[id="${anchorId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+        navigate(`#${anchorId}`, { replace: true });
+      }
+    }
+  };
+
   const shareSlugUrl = buildSharedPageUrl({
     shareId,
     pageSlugId: slugId,
@@ -45,6 +61,7 @@ export default function MentionView(props: NodeViewProps) {
           to={
             isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label, anchorId)
           }
+          onClick={handleClick}
           underline="never"
           className={classes.pageMentionLink}
         >