diff --git a/apps/client/src/features/editor/components/link/link-view.tsx b/apps/client/src/features/editor/components/link/link-view.tsx
index daa5bb5de..35f2bf562 100644
--- a/apps/client/src/features/editor/components/link/link-view.tsx
+++ b/apps/client/src/features/editor/components/link/link-view.tsx
@@ -224,6 +224,16 @@ export default function LinkView(props: MarkViewProps) {
const handleNavigate = useCallback(() => {
if (!href) return;
+ if (href.startsWith("#")) {
+ const anchor = href.slice(1);
+ const element =
+ document.querySelector(`[id="${anchor}"]`) ||
+ document.querySelector(`[data-id="${anchor}"]`);
+ element?.scrollIntoView({ behavior: "smooth", block: "start" });
+ navigate(`${location.pathname}#${anchor}`, { replace: true });
+ return;
+ }
+
if (isInternal) {
let targetPath = href;
let anchor = "";
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 561f3e0f8..521593f22 100644
--- a/apps/client/src/features/editor/components/mention/mention-view.tsx
+++ b/apps/client/src/features/editor/components/mention/mention-view.tsx
@@ -15,6 +15,7 @@ export default function MentionView(props: NodeViewProps) {
const { node } = props;
const { label, entityType, entityId, slugId, anchorId } = node.attrs;
const isPageMention = entityType === "page";
+ const hasTarget = isPageMention && !!slugId;
const { spaceSlug, pageSlug } = useParams();
const { shareId } = useParams();
const navigate = useNavigate();
@@ -63,7 +64,22 @@ export default function MentionView(props: NodeViewProps) {
)}
- {isPageMention && isShareRoute && (
+ {isPageMention && !hasTarget && (
+
+
+
+
+ {label}
+
+ )}
+
+ {hasTarget && isShareRoute && (
)}
- {isPageMention && !isShareRoute && isError && (
+ {hasTarget && !isShareRoute && isError && (
)}
- {isPageMention && !isShareRoute && !isError && (
+ {hasTarget && !isShareRoute && !isError && (