feat: refactor links

2026-05-07 06:23:06 +08:00 · 2026-03-15 16:45:47 +00:00
parent ac6001ab25
commit 9d18c36eb3
18 changed files with 816 additions and 570 deletions
@@ -289,6 +289,11 @@
  "Save & Exit": "Save & Exit",
  "Double-click to edit Excalidraw diagram": "Double-click to edit Excalidraw diagram",
  "Paste link": "Paste link",
+  "Paste link or search pages": "Paste link or search pages",
+  "Link to web page": "Link to web page",
+  "Recents": "Recents",
+  "Page or URL": "Page or URL",
+  "Link title": "Link title",
  "Edit link": "Edit link",
  "Remove link": "Remove link",
  "Add link": "Add link",
@@ -34,6 +34,7 @@ export function AutoTooltipText({
      disabled={!isTruncated || !label}
      multiline
      withArrow
+      withinPortal={false}
      {...tooltipProps}
    >
      <Text
@@ -4,6 +4,7 @@ import { ActionIcon, Popover, Tooltip } from "@mantine/core";
 import { useEditor } from "@tiptap/react";
 import { TextSelection } from "@tiptap/pm/state";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
+import { normalizeUrl } from "@/features/editor/components/link/link-view";
 import { useTranslation } from "react-i18next";

 interface LinkSelectorProps {
@@ -19,12 +20,12 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
 }) => {
  const { t } = useTranslation();
  const onLink = useCallback(
-    (url: string) => {
+    (url: string, internal?: boolean) => {
      setIsOpen(false);
      editor
        .chain()
        .focus()
-        .setLink({ href: url })
+        .setLink({ href: internal ? url : normalizeUrl(url), internal: !!internal } as any)
        .command(({ tr }) => {
          tr.setSelection(TextSelection.create(tr.doc, tr.selection.to));
          return true;
@@ -36,11 +37,12 @@ export const LinkSelector: FC<LinkSelectorProps> = ({

  return (
    <Popover
-      width={300}
+      width={320}
      opened={isOpen}
      trapFocus
      offset={{ mainAxis: 35, crossAxis: 0 }}
      withArrow
+      shadow="md"
    >
      <Popover.Target>
        <Tooltip label={t("Add link")} withArrow>
@@ -58,7 +60,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
        </Tooltip>
      </Popover.Target>

-      <Popover.Dropdown>
+      <Popover.Dropdown p="sm">
        <LinkEditorPanel onSetLink={onLink} />
      </Popover.Dropdown>
    </Popover>
@@ -1,9 +1,23 @@
-import React from "react";
-import { Button, Group, TextInput } from "@mantine/core";
-import { IconLink } from "@tabler/icons-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Group,
+  ScrollArea,
+  Text,
+  TextInput,
+  UnstyledButton,
+} from "@mantine/core";
+import { IconFileDescription, IconLink, IconWorld } from "@tabler/icons-react";
 import { useLinkEditorState } from "@/features/editor/components/link/use-link-editor-state.tsx";
 import { LinkEditorPanelProps } from "@/features/editor/components/link/types.ts";
 import { useTranslation } from "react-i18next";
+import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
+import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { useParams } from "react-router-dom";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { IPage } from "@/features/page/types/page.types.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
+import clsx from "clsx";
+import classes from "./link.module.css";

 export const LinkEditorPanel = ({
  onSetLink,
@@ -11,33 +25,175 @@ export const LinkEditorPanel = ({
  onUnsetLink,
 }: LinkEditorPanelProps) => {
  const { t } = useTranslation();
-  const state = useLinkEditorState({
-    onSetLink,
-    initialUrl,
+  const { spaceSlug } = useParams();
+  const { data: space } = useSpaceQuery(spaceSlug);
+  const state = useLinkEditorState({ onSetLink, initialUrl });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  const { data: suggestion } = useSearchSuggestionsQuery({
+    query: state.isSearchQuery ? state.url : "",
+    includeUsers: false,
+    includePages: true,
+    spaceId: space?.id,
+    limit: state.isSearchQuery ? 10 : 5,
+    preload: true,
  });

+  const pages: Partial<IPage>[] = suggestion?.pages ?? [];
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [pages.length]);
+
+  const selectPage = useCallback(
+    (page: Partial<IPage>) => {
+      const url = buildPageUrl(
+        page.space?.slug || spaceSlug,
+        page.slugId,
+        page.title,
+      );
+      onSetLink(url, true);
+    },
+    [onSetLink, spaceSlug],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const hasUrlItem = state.url.length > 0 && (state.isValidUrl || state.isSearchQuery);
+      const total = (hasUrlItem ? 1 : 0) + (state.isValidUrl ? 0 : pages.length);
+      if (total === 0) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, total - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (hasUrlItem && selectedIndex === 0) {
+          onSetLink(state.url, false);
+        } else {
+          const pageIndex = hasUrlItem ? selectedIndex - 1 : selectedIndex;
+          if (pageIndex >= 0 && pageIndex < pages.length) {
+            selectPage(pages[pageIndex]);
+          }
+        }
+      }
+    },
+    [pages, selectedIndex, selectPage, state.isValidUrl, state.isSearchQuery, state.url, onSetLink],
+  );
+
+  useEffect(() => {
+    viewportRef.current
+      ?.querySelector(`[data-item-index="${selectedIndex}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const showPages = pages.length > 0 && !state.isValidUrl;
+  const showUrlItem = state.url.length > 0 && (state.isValidUrl || state.isSearchQuery);
+  const showDropdown = showPages || showUrlItem;
+
  return (
    <div>
      <form onSubmit={state.handleSubmit}>
-        <Group gap="xs" style={{ flex: 1 }} wrap="nowrap">
-          <TextInput
-            leftSection={<IconLink size={16} />}
-            variant="filled"
-            placeholder={t("Paste link")}
-            value={state.url}
-            onChange={state.onChange}
-            style={{ flex: 1 }}
-          />
-          <Button p={"xs"} type="submit" disabled={!state.isValidUrl}>
-            {t("Save")}
-          </Button>
-          {onUnsetLink && (
-            <Button p={"xs"} variant="light" color="red" onClick={onUnsetLink}>
-              {t("Remove")}
-            </Button>
-          )}
-        </Group>
+        <TextInput
+          leftSection={<IconLink size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />}
+          classNames={{ input: classes.linkInput }}
+          placeholder={t("Paste link or search pages")}
+          value={state.url}
+          onChange={state.onChange}
+          onKeyDown={handleKeyDown}
+          autoFocus
+        />
      </form>
+
+      {showDropdown && (
+        <>
+          {!state.isSearchQuery && !state.isValidUrl && (
+            <Text c="dimmed" size="xs" fw={600} px="sm" pt={10} pb={4}>
+              {t("Recents")}
+            </Text>
+          )}
+
+          <ScrollArea.Autosize
+            viewportRef={viewportRef}
+            mah={300}
+            scrollbars="y"
+            scrollbarSize={6}
+            mt={state.url.length > 0 ? 8 : 0}
+            styles={{ content: { minWidth: 0 } }}
+          >
+            {showUrlItem && (
+              <UnstyledButton
+                data-item-index={0}
+                onClick={() => onSetLink(state.url, false)}
+                className={clsx(classes.searchItem, {
+                  [classes.selectedSearchItem]: selectedIndex === 0,
+                })}
+              >
+                <Group gap={10} wrap="nowrap" align="flex-start">
+                  <span className={classes.pageIcon}>
+                    <IconWorld size={18} stroke={1.5} />
+                  </span>
+
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm" fw={500} truncate lh={1.3}>
+                      {state.url}
+                    </Text>
+                    <Text size="xs" c="dimmed" lh={1.4}>
+                      {t("Link to web page")}
+                    </Text>
+                  </div>
+                </Group>
+              </UnstyledButton>
+            )}
+
+            {!state.isValidUrl && pages.map((page, index) => {
+              const itemIndex = showUrlItem ? index + 1 : index;
+              return (
+                <UnstyledButton
+                  data-item-index={itemIndex}
+                  key={page.id || index}
+                  onClick={() => selectPage(page)}
+                  className={clsx(classes.searchItem, {
+                    [classes.selectedSearchItem]: itemIndex === selectedIndex,
+                  })}
+                >
+                  <Group gap={10} wrap="nowrap" align="flex-start">
+                    <span className={classes.pageIcon}>
+                      {page.icon || <IconFileDescription size={18} stroke={1.5} />}
+                    </span>
+
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <AutoTooltipText size="sm" fw={500} truncate lh={1.3}>
+                        {page.title || t("Untitled")}
+                      </AutoTooltipText>
+                      {page.space?.name && (
+                        <AutoTooltipText size="xs" c="dimmed" truncate lh={1.4}>
+                          {page.space.name}
+                        </AutoTooltipText>
+                      )}
+                    </div>
+                  </Group>
+                </UnstyledButton>
+              );
+            })}
+          </ScrollArea.Autosize>
+        </>
+      )}
+
+      {onUnsetLink && (
+        <UnstyledButton
+          onClick={onUnsetLink}
+          className={classes.removeLink}
+        >
+          <Text size="sm" c="red">
+            {t("Remove link")}
+          </Text>
+        </UnstyledButton>
+      )}
    </div>
  );
 };
@@ -1,103 +0,0 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-import React, { useCallback, useState } from "react";
-import { TextSelection } from "@tiptap/pm/state";
-import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
-import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
-import { LinkPreviewPanel } from "@/features/editor/components/link/link-preview.tsx";
-import { Card } from "@mantine/core";
-import { useEditorState } from "@tiptap/react";
-
-export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
-  const [showEdit, setShowEdit] = useState(false);
-
-  const shouldShow = useCallback(() => {
-    return editor.isActive("link");
-  }, [editor]);
-
-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-      const link = ctx.editor.getAttributes("link");
-      return {
-        href: link.href,
-      };
-    },
-  });
-
-  const handleEdit = useCallback(() => {
-    setShowEdit(true);
-  }, []);
-
-  const onSetLink = useCallback(
-    (url: string) => {
-      editor
-        .chain()
-        .focus()
-        .extendMarkRange("link")
-        .setLink({ href: url })
-        .command(({ tr }) => {
-          tr.setSelection(TextSelection.create(tr.doc, tr.selection.to));
-          return true;
-        })
-        .run();
-      setShowEdit(false);
-    },
-    [editor],
-  );
-
-  const onUnsetLink = useCallback(() => {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    setShowEdit(false);
-    return null;
-  }, [editor]);
-
-  const onShowEdit = useCallback(() => {
-    setShowEdit(true);
-  }, []);
-
-  const onHideEdit = useCallback(() => {
-    setShowEdit(false);
-  }, []);
-
-  return (
-    <BaseBubbleMenu
-      editor={editor}
-      pluginKey={`link-menu`}
-      updateDelay={0}
-      options={{
-        onHide: () => {
-          setShowEdit(false);
-        },
-        placement: "bottom",
-        offset: 5,
-        // zIndex: 101,
-      }}
-      shouldShow={shouldShow}
-    >
-      {showEdit ? (
-        <Card
-          withBorder
-          radius="md"
-          padding="xs"
-          bg="var(--mantine-color-body)"
-        >
-          <LinkEditorPanel
-            initialUrl={editorState?.href}
-            onSetLink={onSetLink}
-          />
-        </Card>
-      ) : (
-        <LinkPreviewPanel
-          url={editorState?.href}
-          onClear={onUnsetLink}
-          onEdit={handleEdit}
-        />
-      )}
-    </BaseBubbleMenu>
-  );
-}
-
-export default LinkMenu;
@@ -1,60 +0,0 @@
-import {
-  Tooltip,
-  ActionIcon,
-  Card,
-  Divider,
-  Anchor,
-  Flex,
-} from "@mantine/core";
-import { IconLinkOff, IconPencil } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import classes from "./link.module.css";
-
-export type LinkPreviewPanelProps = {
-  url: string;
-  onEdit: () => void;
-  onClear: () => void;
-};
-
-export const LinkPreviewPanel = ({
-  onClear,
-  onEdit,
-  url,
-}: LinkPreviewPanelProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Card withBorder radius="md" padding="xs" bg="var(--mantine-color-body)">
-        <Flex align="center">
-          <Tooltip label={url}>
-            <Anchor
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={classes.link}
-            >
-              {url}
-            </Anchor>
-          </Tooltip>
-
-          <Flex align="center">
-            <Divider mx={4} orientation="vertical" />
-
-            <Tooltip label={t("Edit link")}>
-              <ActionIcon onClick={onEdit} variant="subtle" color="gray">
-                <IconPencil size={16} />
-              </ActionIcon>
-            </Tooltip>
-
-            <Tooltip label={t("Remove link")}>
-              <ActionIcon onClick={onClear} variant="subtle" color="red">
-                <IconLinkOff size={16} />
-              </ActionIcon>
-            </Tooltip>
-          </Flex>
-        </Flex>
-      </Card>
-    </>
-  );
-};
@@ -1,61 +1,63 @@
 import { MarkViewContent, MarkViewProps } from "@tiptap/react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import {
  IconFileDescription,
  IconCopy,
  IconExternalLink,
  IconLinkOff,
+  IconPencil,
+  IconWorld,
 } from "@tabler/icons-react";
 import { useState, useCallback, useRef, useEffect } from "react";
-import { useLongPress } from "@/features/editor/hooks/use-long-press";
 import { notifications } from "@mantine/notifications";
 import {
-  Card,
+  Divider,
  Group,
-  Button,
-  TextInput,
+  Popover,
  Text,
+  TextInput,
  ActionIcon,
-  Stack,
-  CloseButton,
  Tooltip,
+  UnstyledButton,
 } from "@mantine/core";
 import classes from "./link.module.css";
 import { useTranslation } from "react-i18next";
-import { createPortal } from "react-dom";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants";
+import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { extractPageSlugId } from "@/lib";
+import { sanitizeUrl, copyToClipboard } from "@docmost/editor-ext";

-const isTouchDevice = () => {
-  if (typeof window === "undefined") return false;
-  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+export const normalizeUrl = (url: string): string => {
+  if (!url) return url;
+  if (url.startsWith("/") || /^(\S+):(\/\/)?\S+$/.test(url)) return url;
+  return `https://${url}`;
 };

-const isInternalLink = (href: string): boolean => {
-  if (!href) return false;
-  const match = INTERNAL_LINK_REGEX.exec(href);
-  if (!match) return false;
-
-  return !(match[2] && match[2] !== window.location.host);
-};
-
-const extractLinkLabel = (href: string): string => {
-  if (!href) return "";
+const parseInternalLink = (
+  href: string,
+  internalAttr?: boolean,
+): { isInternal: boolean; slugId: string | null; label: string } => {
+  if (!href) return { isInternal: !!internalAttr, slugId: null, label: "" };

  const match = INTERNAL_LINK_REGEX.exec(href);
-  if (match) {
-    const slug = match[5];
-    // Extract page name from slug (remove the ID suffix)
-    const namePart = slug.split("-").slice(0, -1).join("-");
-    return namePart || slug;
+  if (!match) {
+    if (internalAttr) return { isInternal: true, slugId: null, label: href };
+    return { isInternal: false, slugId: null, label: href };
  }

-  // For external links, show domain
-  try {
-    const url = new URL(href);
-    return url.hostname.replace("www.", "");
-  } catch {
-    return href.slice(0, 30);
-  }
+  const isExternal = match[2] && match[2] !== window.location.host;
+  const slug = match[5];
+  const slugId = extractPageSlugId(slug);
+  const namePart = slug.split("-").slice(0, -1).join("-");
+
+  return {
+    isInternal: !isExternal,
+    slugId,
+    label: namePart || slug,
+  };
 };

 export default function LinkView(props: MarkViewProps) {
@@ -63,361 +65,519 @@ export default function LinkView(props: MarkViewProps) {
  const href = mark.attrs.href as string;
  const navigate = useNavigate();
  const location = useLocation();
+  const { shareId, pageSlug } = useParams();
  const { t } = useTranslation();
+  const isShareRoute = location.pathname.startsWith("/share");

-  const [isHovered, setIsHovered] = useState(false);
-  const [showEditPanel, setShowEditPanel] = useState(false);
-  const [editUrl, setEditUrl] = useState(href);
-  const [editTitle, setEditTitle] = useState("");
+  const [popoverState, setPopoverState] = useState<
+    "closed" | "preview" | "edit"
+  >("closed");
+  const [linkTitle, setLinkTitle] = useState("");
+  const [linkUrl, setLinkUrl] = useState("");
+  const [showSearch, setShowSearch] = useState(false);
+  const lastOpenState = useRef<"preview" | "edit">("preview");
  const wrapperRef = useRef<HTMLSpanElement>(null);
-  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isTouch = isTouchDevice();
+  const dropdownRef = useRef<HTMLDivElement>(null);
  const isEditable = editor.isEditable;
-  const isInternal = isInternalLink(href);
+  const {
+    isInternal,
+    slugId,
+    label: linkLabel,
+  } = parseInternalLink(href, mark.attrs.internal);
+
+  const isPopoverVisible = popoverState !== "closed";
+  const activeView = isPopoverVisible ? popoverState : lastOpenState.current;
+
+  const { data: linkedPage } = usePageQuery({
+    pageId: isPopoverVisible && slugId && !isShareRoute ? slugId : null,
+  });
+
+  const { data: sharedPageData } = useSharePageQuery({
+    pageId: isPopoverVisible && slugId && isShareRoute ? slugId : null,
+  });
+
+  const pageTitle = isShareRoute
+    ? sharedPageData?.page?.title
+    : linkedPage?.title;
+
+  const pendingTitleRef = useRef<string | null>(null);
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
+  const getLinkPos = useCallback((): number | null => {
+    if (!wrapperRef.current) return null;
+    try {
+      return editor.view.posAtDOM(wrapperRef.current, 0);
+    } catch {
+      return null;
+    }
+  }, [editor]);
+
+  const handleUpdateLinkTitle = useCallback(
+    (newTitle: string) => {
+      if (!newTitle) return;
+
+      const pos = getLinkPos();
+      if (pos === null) return;
+
+      const { state } = editor;
+      const resolved = state.doc.resolve(pos);
+      const node = resolved.nodeAfter;
+      if (!node?.isText) return;

-  const getLinkText = useCallback(() => {
-    const { state } = editor;
-    let text = "";
-    state.doc.descendants((node) => {
      const linkMark = node.marks.find(
        (m) => m.type.name === "link" && m.attrs.href === href,
      );
-      if (linkMark && node.isText) {
-        text = node.text || "";
-        return false;
+      if (!linkMark || node.text === newTitle) return;
+
+      const from = pos;
+      const to = pos + node.nodeSize;
+      const { tr } = state;
+      tr.insertText(newTitle, from, to);
+      tr.addMark(from, from + newTitle.length, linkMark);
+      editor.view.dispatch(tr);
+    },
+    [editor, href, getLinkPos],
+  );
+
+  const handleEditLink = useCallback(
+    (url: string, internal?: boolean) => {
+      const normalizedUrl = internal ? url : normalizeUrl(url);
+
+      const pos = getLinkPos();
+      if (pos === null) {
+        setPopoverState("closed");
+        return;
      }
-    });
-    return text;
-  }, [editor, href]);
+
+      const { state } = editor;
+      const resolved = state.doc.resolve(pos);
+      const node = resolved.nodeAfter;
+      if (!node?.isText) {
+        setPopoverState("closed");
+        return;
+      }
+
+      const linkMark = node.marks.find(
+        (m) => m.type.name === "link" && m.attrs.href === href,
+      );
+      if (linkMark) {
+        const from = pos;
+        const to = pos + node.nodeSize;
+        const { tr } = state;
+        tr.removeMark(from, to, linkMark.type);
+        tr.addMark(
+          from,
+          to,
+          linkMark.type.create({ href: normalizedUrl, internal: !!internal }),
+        );
+        editor.view.dispatch(tr);
+      }
+
+      setPopoverState("closed");
+    },
+    [editor, href, getLinkPos],
+  );

  useEffect(() => {
-    if (showEditPanel) {
-      setEditUrl(href);
-      setEditTitle(getLinkText());
+    if (popoverState === "edit") {
+      const text = wrapperRef.current?.querySelector("a")?.textContent || "";
+      setLinkTitle(text);
+      setLinkUrl(href);
+      pendingTitleRef.current = null;
+      requestAnimationFrame(() => titleInputRef.current?.focus());
    }
-  }, [showEditPanel, href, getLinkText]);
-
-  const handleMouseEnter = useCallback(() => {
-    if (showEditPanel) return;
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    if (popoverState === "closed") {
+      if (pendingTitleRef.current !== null) {
+        handleUpdateLinkTitle(pendingTitleRef.current);
+        pendingTitleRef.current = null;
+      }
+      setShowSearch(false);
    }
-    setIsHovered(true);
-  }, [showEditPanel]);
+  }, [popoverState, href, isInternal, handleUpdateLinkTitle]);

-  const handleMouseLeave = useCallback(() => {
-    if (showEditPanel) return;
-    hoverTimeoutRef.current = setTimeout(() => {
-      setIsHovered(false);
-    }, 200);
-  }, [showEditPanel]);
+  useEffect(() => {
+    if (popoverState !== "closed") {
+      lastOpenState.current = popoverState;
+    }
+  }, [popoverState]);
+
+  useEffect(() => {
+    if (!isPopoverVisible) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        wrapperRef.current?.contains(target) ||
+        dropdownRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setPopoverState("closed");
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setPopoverState("closed");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside, true);
+    document.addEventListener("keydown", handleEscape, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleEscape, true);
+    };
+  }, [isPopoverVisible]);

  const handleNavigate = useCallback(() => {
    if (!href) return;

    if (isInternal) {
-      // Get pathname for navigation (handle both relative and absolute URLs)
      let targetPath = href;
      let anchor = "";

      try {
        const url = new URL(href);
        targetPath = url.pathname;
-        anchor = url.hash.slice(1); // Remove the # prefix
+        anchor = url.hash.slice(1);
      } catch {
-        // Relative URL
        if (href.includes("#")) {
          [targetPath, anchor] = href.split("#");
        }
      }

-      // Handle anchor links on same page
      if (anchor) {
-        const currentPath = location.pathname;
-        if (!targetPath || targetPath === currentPath) {
-          const element = document.getElementById(anchor);
+        const currentPageSlugId = extractPageSlugId(pageSlug);
+        if (!slugId || currentPageSlugId === slugId) {
+          const element =
+            document.querySelector(`[id="${anchor}"]`) ||
+            document.querySelector(`[data-id="${anchor}"]`);
          if (element) {
            element.scrollIntoView({ behavior: "smooth", block: "start" });
-            navigate(`${currentPath}#${anchor}`, { replace: true });
+            navigate(`${location.pathname}#${anchor}`, { replace: true });
            return;
          }
        }
      }

-      navigate(anchor ? `${targetPath}#${anchor}` : targetPath);
+      if (isShareRoute && slugId) {
+        const sharedUrl = buildSharedPageUrl({
+          shareId,
+          pageSlugId: slugId,
+          pageTitle: pageTitle,
+          anchorId: anchor || undefined,
+        });
+        navigate(sharedUrl);
+      } else {
+        navigate(anchor ? `${targetPath}#${anchor}` : targetPath);
+      }
    } else {
-      window.open(href, "_blank", "noopener,noreferrer");
+      window.open(
+        sanitizeUrl(normalizeUrl(href)),
+        "_blank",
+        "noopener,noreferrer",
+      );
    }
-  }, [href, navigate, location.pathname, isInternal]);
+  }, [
+    href,
+    navigate,
+    location.pathname,
+    isInternal,
+    isShareRoute,
+    slugId,
+    shareId,
+    pageTitle,
+    pageSlug,
+  ]);

  const handleClick = useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();
-      if (!showEditPanel) {
+      if (isEditable) {
+        setPopoverState("preview");
+      } else {
        handleNavigate();
      }
    },
-    [handleNavigate, showEditPanel],
+    [handleNavigate, isEditable],
  );

-  const handleLongPress = useCallback(() => {
-    if (isEditable) {
-      setShowEditPanel(true);
-      setIsHovered(false);
-    }
-  }, [isEditable]);
-
-  const handleTapNavigate = useCallback(
-    (e: React.TouchEvent | React.MouseEvent) => {
-      e.preventDefault();
-      if (!showEditPanel) {
-        handleNavigate();
-      }
-    },
-    [handleNavigate, showEditPanel],
-  );
-
-  const longPressHandlers = useLongPress({
-    threshold: 500,
-    onLongPress: handleLongPress,
-    onClick: handleTapNavigate,
-  });
-
-  const handleOpenEdit = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setShowEditPanel(true);
-    setIsHovered(false);
-  }, []);
-
-  const handleCloseEdit = useCallback(() => {
-    setShowEditPanel(false);
-  }, []);
-
  const handleCopy = useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();

-      const fullUrl = isInternal ? `${window.location.origin}${href}` : href;
-      navigator.clipboard.writeText(fullUrl);
+      const fullUrl = sanitizeUrl(
+        isInternal ? `${window.location.origin}${href}` : href,
+      );
+      copyToClipboard(fullUrl);
      notifications.show({
-        message: t("Link copied to clipboard"),
-        color: "green",
-        autoClose: 2000,
+        message: t("Link copied"),
      });
+      setPopoverState("closed");
    },
    [href, isInternal, t],
  );

-  const handleSave = useCallback(() => {
-    const { state } = editor;
-    const { tr } = state;
-
-    let updated = false;
-    state.doc.descendants((node, pos) => {
-      if (updated) return false;
-
-      const linkMark = node.marks.find(
-        (m) => m.type.name === "link" && m.attrs.href === href,
-      );
-      if (linkMark && node.isText) {
-        const from = pos;
-        const to = pos + node.nodeSize;
-
-        if (editUrl !== href) {
-          tr.removeMark(from, to, linkMark.type);
-          tr.addMark(from, to, linkMark.type.create({ href: editUrl }));
-        }
-
-        const currentText = node.text || "";
-        if (editTitle && editTitle !== currentText) {
-          tr.replaceWith(
-            from,
-            to,
-            state.schema.text(editTitle, [
-              linkMark.type.create({ href: editUrl || href }),
-            ]),
-          );
-        }
-
-        updated = true;
-        return false;
-      }
-    });
-
-    if (updated) {
-      editor.view.dispatch(tr);
-    }
-
-    setShowEditPanel(false);
-  }, [editor, href, editUrl, editTitle]);
-
  const handleRemoveLink = useCallback(() => {
    editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    setShowEditPanel(false);
+    setPopoverState("closed");
  }, [editor]);

-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      // Stop all keyboard events from bubbling to TipTap editor
-      e.stopPropagation();
-
-      if (e.key === "Enter") {
-        e.preventDefault();
-        handleSave();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        handleCloseEdit();
-      }
-    },
-    [handleSave, handleCloseEdit],
+  const displayHref = sanitizeUrl(
+    isInternal
+      ? isShareRoute && slugId
+        ? buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle })
+        : href
+      : normalizeUrl(href),
  );

-  const interactionProps = isTouch
-    ? { ...longPressHandlers }
-    : {
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-      };
-
-  const linkLabel = extractLinkLabel(href);
-
-  return (
+  const linkTitleInput = (
    <>
-      <span
-        ref={wrapperRef}
-        className={classes.linkWrapper}
-        {...interactionProps}
-      >
-        <a
-          href={href}
-          className={classes.linkText}
-          onClick={(e) => e.preventDefault()}
-          target={isInternal ? undefined : "_blank"}
-          rel={isInternal ? undefined : "noopener noreferrer"}
-        >
-          <MarkViewContent />
-        </a>
-
-        {/* Hover Toolbar */}
-        {isEditable && !isTouch && isHovered && !showEditPanel && (
-          <span
-            contentEditable={false}
-            className={classes.linkToolbar}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <Card shadow="md" padding="xs" radius="md" withBorder>
-              <Group gap="xs" wrap="nowrap">
-                <Group
-                  gap={6}
-                  wrap="nowrap"
-                  style={{ cursor: "pointer", maxWidth: 180 }}
-                  onClick={handleNavigate}
-                >
-                  {isInternal ? (
-                    <IconFileDescription size={18} color="gray" />
-                  ) : (
-                    <IconExternalLink size={18} color="gray" />
-                  )}
-                  <Text size="sm" truncate fw={500}>
-                    {linkLabel}
-                  </Text>
-                </Group>
-
-                <Tooltip label={t("Copy link")} withArrow>
-                  <ActionIcon
-                    variant="subtle"
-                    color="gray"
-                    onClick={handleCopy}
-                  >
-                    <IconCopy size={18} />
-                  </ActionIcon>
-                </Tooltip>
-
-                <Tooltip label={t("Remove link")} withArrow>
-                  <ActionIcon
-                    variant="subtle"
-                    color="gray"
-                    onClick={handleRemoveLink}
-                  >
-                    <IconLinkOff size={18} />
-                  </ActionIcon>
-                </Tooltip>
-
-                <Button size="xs" variant="subtle" onClick={handleOpenEdit}>
-                  {t("Edit")}
-                </Button>
-              </Group>
-            </Card>
-          </span>
-        )}
-
-        {/* Edit Panel */}
-        {isEditable && showEditPanel && (
-          <>
-            {createPortal(
-              <div
-                className={classes.editPanelOverlay}
-                onClick={handleCloseEdit}
-              />,
-              document.body,
-            )}
-            <div
-              contentEditable={false}
-              className={classes.editPanel}
-              onClick={(e) => e.stopPropagation()}
-              onMouseDown={(e) => e.stopPropagation()}
-              onMouseUp={(e) => e.stopPropagation()}
-            >
-              <Card shadow="md" padding="md" radius="md" withBorder w={320}>
-                <Stack gap="md">
-                  <TextInput
-                    label={t("Search or paste a link")}
-                    placeholder="https://..."
-                    value={editUrl}
-                    onChange={(e) => setEditUrl(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    rightSection={
-                      editUrl && (
-                        <CloseButton size="sm" onClick={() => setEditUrl("")} />
-                      )
-                    }
-                    autoFocus
-                    withAsterisk
-                  />
-
-                  <TextInput
-                    label={t("Display text (optional)")}
-                    description={t("Give this link a title or description")}
-                    placeholder={t("Text to display")}
-                    value={editTitle}
-                    onChange={(e) => setEditTitle(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                  />
-
-                  <Group justify="flex-end" gap="xs">
-                    <Button
-                      variant="default"
-                      onClick={handleCloseEdit}
-                      size="sm"
-                    >
-                      {t("Cancel")}
-                    </Button>
-                    <Button onClick={handleSave} size="sm">
-                      {t("Save")}
-                    </Button>
-                  </Group>
-                </Stack>
-              </Card>
-            </div>
-          </>
-        )}
-      </span>
+      <Text size="xs" fw={600} c="dimmed" mt="sm" mb={4}>
+        {t("Link title")}
+      </Text>
+      <TextInput
+        ref={titleInputRef}
+        classNames={{ input: classes.linkInput }}
+        value={linkTitle}
+        onChange={(e) => {
+          const val = e.currentTarget.value;
+          setLinkTitle(val);
+          pendingTitleRef.current = val;
+          const anchor = wrapperRef.current?.querySelector("a");
+          if (anchor && val) {
+            const walker = document.createTreeWalker(
+              anchor,
+              NodeFilter.SHOW_TEXT,
+            );
+            const textNode = walker.nextNode();
+            if (textNode) {
+              const view = editor.view as any;
+              view.domObserver.stop();
+              textNode.nodeValue = val;
+              view.domObserver.start();
+            }
+          }
+        }}
+        onBlur={() => {
+          if (pendingTitleRef.current !== null) {
+            handleUpdateLinkTitle(pendingTitleRef.current);
+            pendingTitleRef.current = null;
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleUpdateLinkTitle(linkTitle);
+            pendingTitleRef.current = null;
+            setPopoverState("closed");
+          }
+        }}
+        size="sm"
+      />
    </>
  );
+
+  return (
+    <Popover
+      opened={isPopoverVisible}
+      width={activeView === "edit" ? 320 : undefined}
+      position="bottom"
+      withArrow
+      shadow="md"
+      trapFocus={false}
+      closeOnClickOutside={false}
+    >
+      <Popover.Target>
+        <span
+          ref={wrapperRef}
+          className={classes.linkWrapper}
+          onClick={handleClick}
+        >
+          <a
+            href={displayHref}
+            spellCheck={false}
+            onClick={(e) => e.preventDefault()}
+            target={isInternal ? undefined : "_blank"}
+            rel={isInternal ? undefined : "noopener noreferrer"}
+          >
+            <MarkViewContent />
+          </a>
+        </span>
+      </Popover.Target>
+
+      <Popover.Dropdown
+        ref={dropdownRef}
+        p={activeView === "edit" ? "sm" : 6}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {activeView === "edit" ? (
+          <>
+            <Text size="xs" fw={600} c="dimmed" mb={4}>
+              {t("Page or URL")}
+            </Text>
+
+            {isInternal ? (
+              !showSearch ? (
+                <>
+                  <UnstyledButton
+                    className={classes.linkChip}
+                    onClick={() => setShowSearch(true)}
+                  >
+                    <IconFileDescription
+                      size={16}
+                      stroke={1.5}
+                      color="var(--mantine-color-dimmed)"
+                      style={{ flexShrink: 0 }}
+                    />
+                    <Text size="sm" fw={500} truncate>
+                      {pageTitle || linkTitle}
+                    </Text>
+                  </UnstyledButton>
+
+                  {linkTitleInput}
+
+                  <Divider my="xs" />
+
+                  <UnstyledButton
+                    onClick={handleRemoveLink}
+                    className={classes.removeLink}
+                  >
+                    <Group gap={8}>
+                      <IconLinkOff size={16} stroke={1.5} />
+                      <Text size="sm">{t("Remove link")}</Text>
+                    </Group>
+                  </UnstyledButton>
+                </>
+              ) : (
+                <LinkEditorPanel
+                  onSetLink={handleEditLink}
+                  onUnsetLink={handleRemoveLink}
+                />
+              )
+            ) : (
+              <>
+                <TextInput
+                  leftSection={
+                    <IconWorld
+                      size={16}
+                      stroke={1.5}
+                      color="var(--mantine-color-dimmed)"
+                    />
+                  }
+                  classNames={{ input: classes.linkInput }}
+                  value={linkUrl}
+                  onChange={(e) => setLinkUrl(e.currentTarget.value)}
+                  onBlur={() => {
+                    if (linkUrl && linkUrl !== href) {
+                      handleEditLink(linkUrl, false);
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      if (linkUrl && linkUrl !== href) {
+                        handleEditLink(linkUrl, false);
+                      }
+                    }
+                  }}
+                  size="sm"
+                />
+
+                {linkTitleInput}
+
+                <Divider my="xs" />
+
+                <UnstyledButton
+                  onClick={handleRemoveLink}
+                  className={classes.removeLink}
+                >
+                  <Group gap={8}>
+                    <IconLinkOff size={16} stroke={1.5} />
+                    <Text size="sm">{t("Remove link")}</Text>
+                  </Group>
+                </UnstyledButton>
+              </>
+            )}
+          </>
+        ) : (
+          <Group gap={4} wrap="nowrap">
+            <Group
+              component="a"
+              //@ts-ignore
+              href={displayHref}
+              target={isInternal ? undefined : "_blank"}
+              rel={isInternal ? undefined : "noopener noreferrer"}
+              gap={6}
+              wrap="nowrap"
+              style={{
+                cursor: "pointer",
+                maxWidth: 250,
+                textDecoration: "none",
+                color: "inherit",
+                userSelect: "none",
+              }}
+              onClick={(e: React.MouseEvent) => {
+                e.preventDefault();
+                handleNavigate();
+              }}
+            >
+              {isInternal ? (
+                <IconFileDescription size={18} color="gray" />
+              ) : (
+                <IconExternalLink size={18} color="gray" />
+              )}
+              <Text size="sm" truncate fw={500}>
+                {isInternal ? pageTitle || linkLabel : href}
+              </Text>
+            </Group>
+
+            <Divider orientation="vertical" />
+
+            <Tooltip label={t("Edit link")} withArrow withinPortal={false}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setShowSearch(false);
+                  setPopoverState("edit");
+                }}
+              >
+                <IconPencil size={18} />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label={t("Copy link")} withArrow withinPortal={false}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleCopy(e);
+                }}
+              >
+                <IconCopy size={18} />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label={t("Remove link")} withArrow withinPortal={false}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleRemoveLink();
+                }}
+              >
+                <IconLinkOff size={18} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
 }
@@ -1,51 +1,102 @@
-.link {
-  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .linkWrapper {
  position: relative;
  display: inline;
 }

-.linkText {
-  color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
-  text-decoration: underline;
-  text-decoration-color: light-dark(
-    var(--mantine-color-blue-3),
-    var(--mantine-color-blue-7)
-  );
-  text-underline-offset: 2px;
-  cursor: pointer;
+.linkInput {
+  border: 1.5px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: transparent;

-  &:hover {
-    text-decoration-color: light-dark(
-      var(--mantine-color-blue-6),
-      var(--mantine-color-blue-4)
+  &:focus {
+    border-color: light-dark(
+      var(--mantine-color-blue-4),
+      var(--mantine-color-blue-6)
    );
+    box-shadow: 0 0 0 1px
+      light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-6));
  }
 }

-.linkToolbar {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
+.pageIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--mantine-color-dimmed);
+  font-size: 16px;
+  margin-top: 2px;
 }

-.editPanel {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 101;
+.searchItem {
+  width: 100%;
+  padding: 7px 4px;
+  color: var(--mantine-color-text);
+  border-radius: var(--mantine-radius-sm);
+
+  &:hover {
+    @mixin light {
+      background: var(--mantine-color-gray-1);
+    }
+
+    @mixin dark {
+      background: var(--mantine-color-gray-light);
+    }
+  }
 }

-.editPanelOverlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
+.selectedSearchItem {
+  @mixin light {
+    background: var(--mantine-color-gray-1);
+  }
+
+  @mixin dark {
+    background: var(--mantine-color-gray-light);
+  }
+}
+
+.linkChip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+
+  @mixin light {
+    background: var(--mantine-color-gray-1);
+  }
+
+  @mixin dark {
+    background: var(--mantine-color-dark-5);
+  }
+
+  &:hover {
+    @mixin light {
+      background: var(--mantine-color-gray-2);
+    }
+
+    @mixin dark {
+      background: var(--mantine-color-dark-4);
+    }
+  }
+}
+
+.removeLink {
+  width: 100%;
+  padding: 4px;
+  border-radius: var(--mantine-radius-sm);
+
+  &:hover {
+    @mixin light {
+      background: var(--mantine-color-gray-1);
+    }
+
+    @mixin dark {
+      background: var(--mantine-color-dark-5);
+    }
+  }
 }
@@ -1,5 +1,5 @@
 export type LinkEditorPanelProps = {
  initialUrl?: string;
-  onSetLink: (url: string, openInNewTab?: boolean) => void;
+  onSetLink: (url: string, internal?: boolean) => void;
  onUnsetLink?: () => void;
 };
@@ -13,11 +13,16 @@ export const useLinkEditorState = ({

  const isValidUrl = useMemo(() => /^(\S+):(\/\/)?\S+$/.test(url), [url]);

+  const isSearchQuery = useMemo(
+    () => url.length > 0 && !isValidUrl,
+    [url, isValidUrl],
+  );
+
  const handleSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      if (isValidUrl) {
-        onSetLink(url);
+        onSetLink(url, false);
      }
    },
    [url, isValidUrl, onSetLink],
@@ -29,5 +34,6 @@ export const useLinkEditorState = ({
    onChange,
    handleSubmit,
    isValidUrl,
+    isSearchQuery,
  };
 };
@@ -98,12 +98,12 @@
  a {
    color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
    @mixin light {
-      border-bottom: 0.05em solid var(--mantine-color-dark-0);
+      border-bottom: 0.07em solid var(--mantine-color-dark-0);
    }
    @mixin dark {
-      border-bottom: 0.05em solid var(--mantine-color-dark-2);
+      border-bottom: 0.07em solid var(--mantine-color-dark-2);
    }
-    /*font-weight: 500; */
+    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
@@ -223,13 +223,13 @@
 .ProseMirror > h4,
 .ProseMirror > h5,
 .ProseMirror > h6 {
-  
+
  > .link-btn {
    cursor: pointer;
    position: relative;

  }
-  
+
  > .link-btn > .link-btn-content {
    opacity: 0;
    position: absolute;
@@ -241,7 +241,7 @@
    justify-content: center;
    flex-direction: column;
  }
-  
+
  &:hover > .link-btn > .link-btn-content {
    opacity: 1;
  }
@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, UseQueryResult } from "@tanstack/react-query";
 import {
  searchAttachments,
  searchPage,
@@ -32,6 +32,7 @@ export function useSearchSuggestionsQuery(
    staleTime: 60 * 1000, // 1min
    queryFn: () => searchSuggestions(queryParams),
    enabled: preload || !!params.query,
+    placeholderData: keepPreviousData,
  });
 }

@@ -291,6 +291,7 @@ export class ExportService {
          prosemirrorJson,
          slugIdToPath,
          currentPagePath,
+          baseUrl,
        );

        if (includeAttachments) {
@@ -62,6 +62,7 @@ export function replaceInternalLinks(
  prosemirrorJson: any,
  slugIdToPath: Record<string, string>,
  currentPagePath: string,
+  baseUrl?: string,
 ) {
  const doc = jsonToNode(prosemirrorJson);

@@ -76,6 +77,10 @@ export function replaceInternalLinks(
          const localPath = slugIdToPath[slugId];

          if (!localPath) {
+            if (baseUrl && mark.attrs.href.startsWith('/')) {
+              //@ts-expect-error
+              mark.attrs.href = `${baseUrl}${mark.attrs.href}`;
+            }
            continue;
          }

@@ -164,6 +164,12 @@ export class FileImportTaskService {
    const attachmentCandidates = await buildAttachmentCandidates(extractDir);
    const docmostMetadata = await readDocmostMetadata(extractDir);

+    const space = await this.db
+      .selectFrom('spaces')
+      .select(['slug'])
+      .where('id', '=', fileTask.spaceId)
+      .executeTakeFirst();
+
    const pagesMap = new Map<string, ImportPageNode>();

    for (const absPath of allFiles) {
@@ -458,6 +464,7 @@ export class FileImportTaskService {
              creatorId: fileTask.creatorId,
              sourcePageId: page.id,
              workspaceId: fileTask.workspaceId,
+              spaceSlug: space?.slug,
            });

            const pmState = getProsemirrorContent(
@@ -1,9 +1,10 @@
 import { getEmbedUrlAndProvider } from '@docmost/editor-ext';
 import { Logger } from '@nestjs/common';
 import * as path from 'path';
-import { v7 } from 'uuid';
 import { InsertableBacklink } from '@docmost/db/types/entity.types';
 import { Cheerio, CheerioAPI, load } from 'cheerio';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+import slugify = require('@sindresorhus/slugify');

 // Check if text contains Unicode characters (for emojis/icons)
 function isUnicodeCharacter(text: string): boolean {
@@ -22,6 +23,7 @@ export async function formatImportHtml(opts: {
  workspaceId: string;
  pageDir?: string;
  attachmentCandidates?: string[];
+  spaceSlug?: string;
 }): Promise<{
  html: string;
  backlinks: InsertableBacklink[];
@@ -61,6 +63,7 @@ export async function formatImportHtml(opts: {
    creatorId,
    sourcePageId,
    workspaceId,
+    opts.spaceSlug,
  );

  return {
@@ -316,6 +319,7 @@ export async function rewriteInternalLinksToMentionHtml(
  creatorId: string,
  sourcePageId: string,
  workspaceId: string,
+  spaceSlug?: string,
 ): Promise<InsertableBacklink[]> {
  const normalize = (p: string) => p.replace(/\\/g, '/');
  const backlinks: InsertableBacklink[] = [];
@@ -339,19 +343,16 @@ export async function rewriteInternalLinksToMentionHtml(
    );
    const meta = filePathToPageMetaMap.get(resolved);
    if (!meta) return;
-    const mentionId = v7();
-    const $mention = $('<span>')
-      .attr({
-        'data-type': 'mention',
-        'data-id': mentionId,
-        'data-entity-type': 'page',
-        'data-entity-id': meta.id,
-        'data-label': meta.title,
-        'data-slug-id': meta.slugId,
-        'data-creator-id': creatorId,
-      })
-      .text(meta.title);
-    $a.replaceWith($mention);
+
+    const titleSlug = slugify(meta.title?.substring(0, 70) || 'untitled');
+    const pageSlug = `${titleSlug}-${meta.slugId}`;
+    const internalHref = spaceSlug
+      ? `/s/${spaceSlug}/p/${pageSlug}`
+      : `/p/${pageSlug}`;
+
+    $a.attr('href', internalHref);
+    $a.attr('data-internal', 'true');
+
    backlinks.push({ sourcePageId, targetPageId: meta.id, workspaceId });
  });

@@ -6,6 +6,19 @@ import { EditorView } from "@tiptap/pm/view";
 export const LinkExtension = TiptapLink.extend({
  inclusive: false,

+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      internal: {
+        default: false,
+        parseHTML: (element: HTMLElement) =>
+          element.getAttribute('data-internal') === 'true',
+        renderHTML: (attributes) =>
+          attributes.internal ? { 'data-internal': 'true' } : {},
+      },
+    };
+  },
+
  parseHTML() {
    return [
      {