Support anchor links in page mentions

apps/client/public/locales/en-US/translation.json

@@ -390,5 +390,6 @@
   "Failed to share page": "Failed to share page",
   "Copy page": "Copy page",
   "Copy page to a different space.": "Copy page to a different space.",
-  "Page copied successfully": "Page copied successfully"
+  "Page copied successfully": "Page copied successfully",
+  "Anchor link copied": "Anchor link copied"
 }

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -3,7 +3,6 @@ import { uploadImageAction } from "@/features/editor/components/image/upload-ima
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
-import { Slice } from "@tiptap/pm/model";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
 
 export const handlePaste = (
@@ -34,7 +33,9 @@ export const handlePaste = (
       return false;
     }
 
-    createMentionAction(url, view, pos, creatorId);
+    const anchor = match[6]; // Extract anchor from the regex match
+    const urlWithoutAnchor = anchor ? url.substring(0, url.indexOf("#")) : url;
+    createMentionAction(urlWithoutAnchor, view, pos, creatorId, anchor);
     return true;
   }
 

apps/client/src/features/editor/components/heading/heading-view.tsx

@@ -21,19 +21,19 @@ export default function HeadingView({ node }: NodeViewProps) {
   const [showAnchorButton, setShowAnchorButton] = useState(false);
 
   const tag: ElementType = `h${node.attrs.level}` as ElementType;
-  const uid = node.attrs.uid;
+  const nodeId = node.attrs.nodeId;
 
   useEffect(() => {
-    if (uid) {
+    if (nodeId) {
       const text = node.textContent || "";
       const textSlug = generateSlug(text);
-      const combined = textSlug ? `${textSlug}-${uid}` : uid;
+      const combined = textSlug ? `${textSlug}-${nodeId}` : nodeId;
       setCombinedId(combined);
-      
+
       const baseUrl = window.location.href.split("#")[0];
       setUrl(`${baseUrl}#${combined}`);
     }
-  }, [uid, node.content]);
+  }, [nodeId, node.content]);
 
   return (
     <NodeViewWrapper
@@ -45,14 +45,10 @@ export default function HeadingView({ node }: NodeViewProps) {
     >
       <Flex gap="sm" justify="flex-start" align="center">
         <NodeViewContent as="span" />
-        {showAnchorButton && uid && combinedId && node.textContent && (
+        {showAnchorButton && nodeId && combinedId && node.textContent && (
           <CopyButton value={url} timeout={2000}>
             {({ copied, copy }) => (
-              <Tooltip
-                label={copied ? t("Copied") : t("Copy anchor link")}
-                withArrow
-                position="right"
-              >
+              <Tooltip disabled={!copied} label={t("Anchor link copied")} openDelay={300} withArrow position="bottom">
                 <ActionIcon
                   color={copied ? "teal" : "gray"}
                   variant="subtle"

apps/client/src/features/editor/components/link/internal-link-paste.ts

@@ -9,6 +9,7 @@ export type LinkFn = (
   view: EditorView,
   pos: number,
   creatorId: string,
+  anchor?: string,
 ) => void;
 
 export interface InternalLinkOptions {
@@ -18,7 +19,7 @@ export interface InternalLinkOptions {
 
 export const handleInternalLink =
   ({ validateFn, onResolveLink }: InternalLinkOptions): LinkFn =>
-  async (url: string, view, pos, creatorId) => {
+  async (url: string, view, pos, creatorId, anchor) => {
     const validated = validateFn(url, view);
     if (!validated) return;
 
@@ -35,6 +36,7 @@ export const handleInternalLink =
           entityId: page.id,
           slugId: page.slugId,
           creatorId: creatorId,
+          anchor: anchor,
         });
 
         if (!node) return;

apps/client/src/features/editor/components/mention/mention-view.tsx

@@ -11,7 +11,7 @@ import classes from "./mention.module.css";
 
 export default function MentionView(props: NodeViewProps) {
   const { node } = props;
-  const { label, entityType, entityId, slugId } = node.attrs;
+  const { label, entityType, entityId, slugId, anchor } = node.attrs;
   const { spaceSlug } = useParams();
   const { shareId } = useParams();
   const {
@@ -27,6 +27,7 @@ export default function MentionView(props: NodeViewProps) {
     shareId,
     pageSlugId: slugId,
     pageTitle: label,
+    anchor,
   });
 
   return (
@@ -42,7 +43,7 @@ export default function MentionView(props: NodeViewProps) {
           component={Link}
           fw={500}
           to={
-            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label)
+            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label, anchor)
           }
           underline="never"
           className={classes.pageMentionLink}

apps/client/src/features/editor/extensions/extensions.ts

@@ -77,7 +77,7 @@ import Heading from "@tiptap/extension-heading";
 import HeadingView from "../components/heading/heading-view";
 import { countWords } from "alfaaz";
 import UniqueID from '@tiptap/extension-unique-id';
-import { generateSlugId } from "../utils/nanoid";
+import { generateEditorNodeId } from "../utils/nanoid";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -229,8 +229,8 @@ export const mainExtensions = [
   }),
   UniqueID.configure({
     types: ['heading'],
-    attributeName: 'uid',
-    generateID: () => generateSlugId(),
+    attributeName: 'nodeId',
+    generateID: () => generateEditorNodeId(),
     filterTransaction: (transaction) => !isChangeOrigin(transaction),
   }),
 ] as any;

apps/client/src/features/editor/utils/nanoid.ts

@@ -2,4 +2,4 @@ import { customAlphabet } from "nanoid";
 
 const slugIdAlphabet =
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-export const generateSlugId = customAlphabet(slugIdAlphabet, 10);
+export const generateEditorNodeId = customAlphabet(slugIdAlphabet, 12);

apps/client/src/features/page/page.utils.ts

@@ -15,22 +15,29 @@ export const buildPageUrl = (
   spaceName: string,
   pageSlugId: string,
   pageTitle?: string,
+  anchor?: string,
 ): string => {
+  let url: string;
   if (spaceName === undefined) {
-    return `/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+    url = `/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  } else {
+    url = `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   }
-  return `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return anchor ? `${url}#${anchor}` : url;
 };
 
 export const buildSharedPageUrl = (opts: {
   shareId: string;
   pageSlugId: string;
   pageTitle?: string;
+  anchor?: string;
 }): string => {
-  const { shareId, pageSlugId, pageTitle } = opts;
+  const { shareId, pageSlugId, pageTitle, anchor } = opts;
+  let url: string;
   if (!shareId) {
-    return `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+    url = `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  } else {
+    url = `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   }
-
-  return `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return anchor ? `${url}#${anchor}` : url;
 };

apps/client/src/lib/constants.ts

@@ -1,4 +1,6 @@
 export const INTERNAL_LINK_REGEX =
-  /^(https?:\/\/)?([^\/]+)?(\/s\/([^\/]+)\/)?p\/([a-zA-Z0-9-]+)\/?$/;
+  /^(https?:\/\/)?([^\/]+)?(\/s\/([^\/]+)\/)?p\/([a-zA-Z0-9-]+)\/?(?:#(.*))?$/;
 
-export const FIVE_MINUTES = 5 * 60 * 1000;
+export const FIVE_MINUTES = 5 * 60 * 1000;
+//export const INTERNAL_LINK_REGEX =
+//   /^(https?:\/\/)?([^\/]+)?(\/s\/([^\/]+)\/)?p\/([a-zA-Z0-9-]+)\/?$/;