fix link selector on mobile

* link markview - WIP

* WIP

* feat: refactor links

* cleanup

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

@@ -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",
@@ -693,5 +698,16 @@
   "Failed to update trash retention": "Failed to update trash retention",
   "Removed page restriction": "Removed page restriction",
   "Added page permission": "Added page permission",
-  "Removed page permission": "Removed page permission"
+  "Removed page permission": "Removed page permission",
+  "Verifying your email": "Verifying your email",
+  "Please wait...": "Please wait...",
+  "Verification failed. The link may have expired.": "Verification failed. The link may have expired.",
+  "Check your email": "Check your email",
+  "We sent a verification link to {{email}}.": "We sent a verification link to {{email}}.",
+  "We sent a verification link to your email.": "We sent a verification link to your email.",
+  "Click the link to verify your email and access your workspace.": "Click the link to verify your email and access your workspace.",
+  "Resend verification email": "Resend verification email",
+  "Verification email sent. Please check your inbox.": "Verification email sent. Please check your inbox.",
+  "Failed to resend verification email. Please try again.": "Failed to resend verification email. Please try again.",
+  "We've sent you an email with your associated workspaces.": "We've sent you an email with your associated workspaces."
 }

apps/client/src/App.tsx

@@ -38,6 +38,7 @@ import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
 import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
 import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
 import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
+import VerifyEmail from "@/ee/pages/verify-email.tsx";
 
 export default function App() {
   const { t } = useTranslation();
@@ -63,6 +64,7 @@ export default function App() {
           <>
             <Route path={"/create"} element={<CreateWorkspace />} />
             <Route path={"/select"} element={<CloudLogin />} />
+            <Route path={"/verify-email"} element={<VerifyEmail />} />
           </>
         )}
 

apps/client/src/components/ui/auto-tooltip-text.tsx

@@ -34,6 +34,7 @@ export function AutoTooltipText({
       disabled={!isTruncated || !label}
       multiline
       withArrow
+      withinPortal={false}
       {...tooltipProps}
     >
       <Text

apps/client/src/ee/cloud/service/cloud-service.ts

@@ -5,3 +5,15 @@ export async function getJoinedWorkspaces(): Promise<Partial<IWorkspace[]>> {
   const req = await api.post<Partial<IWorkspace[]>>("/workspace/joined");
   return req.data;
 }
+
+export async function findWorkspacesByEmail(email: string): Promise<void> {
+  await api.post("/workspace/find-by-email", { email });
+}
+
+export async function verifyEmail(data: { token: string }): Promise<void> {
+  await api.post("/workspace/verify-email", data);
+}
+
+export async function resendVerificationEmail(data: { email: string; sig: string }): Promise<void> {
+  await api.post("/workspace/resend-verification", data);
+}

apps/client/src/ee/components/cloud-login-form.tsx

@@ -20,14 +20,21 @@ import APP_ROUTE from "@/lib/app-route.ts";
 import { useTranslation } from "react-i18next";
 import JoinedWorkspaces from "@/ee/components/joined-workspaces.tsx";
 import { useJoinedWorkspacesQuery } from "@/ee/cloud/query/cloud-query.ts";
+import { findWorkspacesByEmail } from "@/ee/cloud/service/cloud-service.ts";
 
 const formSchema = z.object({
   hostname: z.string().min(1, { message: "subdomain is required" }),
 });
 
+const findWorkspaceSchema = z.object({
+  email: z.string().email({ message: "Please enter a valid email" }),
+});
+
 export function CloudLoginForm() {
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isFindLoading, setIsFindLoading] = useState<boolean>(false);
+  const [findEmailSent, setFindEmailSent] = useState<boolean>(false);
   const { data: joinedWorkspaces } = useJoinedWorkspacesQuery();
 
   const form = useForm<any>({
@@ -37,6 +44,13 @@ export function CloudLoginForm() {
     },
   });
 
+  const findForm = useForm<any>({
+    validate: zod4Resolver(findWorkspaceSchema),
+    initialValues: {
+      email: "",
+    },
+  });
+
   async function onSubmit(data: { hostname: string }) {
     setIsLoading(true);
 
@@ -54,6 +68,19 @@ export function CloudLoginForm() {
     setIsLoading(false);
   }
 
+  async function onFindSubmit(data: { email: string }) {
+    setIsFindLoading(true);
+
+    try {
+      await findWorkspacesByEmail(data.email);
+      setFindEmailSent(true);
+    } catch {
+      findForm.setFieldError("email", "An error occurred. Please try again.");
+    }
+
+    setIsFindLoading(false);
+  }
+
   return (
     <div>
       <Container size={420} className={classes.container}>
@@ -83,6 +110,38 @@ export function CloudLoginForm() {
               {t("Continue")}
             </Button>
           </form>
+
+          <Divider my="lg" label="or" labelPosition="center" />
+
+          {findEmailSent ? (
+            <Text ta="center" size="sm" c="dimmed">
+              {t("We've sent you an email with your associated workspaces.")}
+            </Text>
+          ) : (
+            <form onSubmit={findForm.onSubmit(onFindSubmit)}>
+              <Text fw={600} mb="xs">
+                {t("Find your workspaces")}
+              </Text>
+              <TextInput
+                type="email"
+                placeholder="name@company.com"
+                description={t(
+                  "We'll send a list of your workspaces to this email.",
+                )}
+                withErrorStyles={false}
+                {...findForm.getInputProps("email")}
+              />
+              <Button
+                type="submit"
+                fullWidth
+                mt="md"
+                variant="light"
+                loading={isFindLoading}
+              >
+                {t("Send")}
+              </Button>
+            </form>
+          )}
         </Box>
       </Container>
 

apps/client/src/ee/pages/verify-email.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { Container, Title, Text, Button, Box } from "@mantine/core";
+import classes from "../../features/auth/components/auth.module.css";
+import {
+  verifyEmail,
+  resendVerificationEmail,
+} from "@/ee/cloud/service/cloud-service.ts";
+import { notifications } from "@mantine/notifications";
+import APP_ROUTE from "@/lib/app-route.ts";
+import { useTranslation } from "react-i18next";
+
+export default function VerifyEmail() {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get("token");
+  const rawEmail = searchParams.get("email");
+  const email = rawEmail && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rawEmail) ? rawEmail : null;
+  const sig = searchParams.get("sig");
+  const [isResending, setIsResending] = useState(false);
+  const [resent, setResent] = useState(false);
+
+  useEffect(() => {
+    if (token) {
+      handleVerify(token);
+    }
+  }, [token]);
+
+  async function handleVerify(verifyToken: string) {
+    try {
+      await verifyEmail({ token: verifyToken });
+      navigate(APP_ROUTE.HOME);
+    } catch (err) {
+      notifications.show({
+        message: t("Verification failed. The link may have expired."),
+        color: "red",
+      });
+      navigate(APP_ROUTE.AUTH.LOGIN);
+    }
+  }
+
+  async function handleResend() {
+    if (!email || !sig) return;
+    setIsResending(true);
+
+    try {
+      await resendVerificationEmail({ email, sig });
+      setResent(true);
+    } catch {
+      notifications.show({
+        message: t("Failed to resend verification email. Please try again."),
+        color: "red",
+      });
+    }
+
+    setIsResending(false);
+  }
+
+  if (token) {
+    return (
+      <Container size={420} className={classes.container}>
+        <Box p="xl" className={classes.containerBox}>
+          <Title order={2} ta="center" fw={500} mb="md">
+            {t("Verifying your email")}
+          </Title>
+          <Text ta="center" c="dimmed">
+            {t("Please wait...")}
+          </Text>
+        </Box>
+      </Container>
+    );
+  }
+
+  return (
+    <Container size={420} className={classes.container}>
+      <Box p="xl" className={classes.containerBox}>
+        <Title order={2} ta="center" fw={500} mb="md">
+          {t("Check your email")}
+        </Title>
+        <Text ta="center" c="dimmed" mb="md">
+          {email
+            ? t("We sent a verification link to {{email}}.", { email })
+            : t("We sent a verification link to your email.")}
+        </Text>
+        <Text ta="center" size="sm" c="dimmed" mb="lg">
+          {t("Click the link to verify your email and access your workspace.")}
+        </Text>
+        {email && sig && !resent && (
+          <Button
+            fullWidth
+            variant="light"
+            onClick={handleResend}
+            loading={isResending}
+          >
+            {t("Resend verification email")}
+          </Button>
+        )}
+        {resent && (
+          <Text ta="center" size="sm" c="dimmed">
+            {t("Verification email sent. Please check your inbox.")}
+          </Text>
+        )}
+      </Box>
+    </Container>
+  );
+}

apps/client/src/features/auth/components/setup-workspace-form.tsx

@@ -22,11 +22,11 @@ import APP_ROUTE from "@/lib/app-route.ts";
 
 const formSchema = z.object({
   workspaceName: z.string().trim().max(50).optional(),
-  name: z.string().min(1).max(50),
+  name: z.string().min(1, { message: "Name is required" }).max(50),
   email: z
-    .email()
+    .email({ message: "Invalid email address" })
-    .min(1, { message: "email is required" }),
+    .min(1, { message: "Email is required" }),
-  password: z.string().min(8),
+  password: z.string().min(8, { message: "Password must be at least 8 characters" }),
 });
 type FormValues = z.infer<typeof formSchema>;
 

apps/client/src/features/auth/hooks/use-auth.ts

@@ -27,7 +27,7 @@ import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { RESET } from "jotai/utils";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
-import { exchangeTokenRedirectUrl } from "@/ee/utils.ts";
+import { exchangeTokenRedirectUrl, getHostnameUrl } from "@/ee/utils.ts";
 
 export default function useAuth() {
   const { t } = useTranslation();
@@ -52,9 +52,18 @@ export default function useAuth() {
       }
     } catch (err) {
       setIsLoading(false);
-      console.log(err);
+
+      const message = err.response?.data?.message;
+      if (isCloud() && message?.includes("verify your email")) {
+        const sig = err.response?.data?.emailSignature;
+        navigate(
+          `${APP_ROUTE.AUTH.VERIFY_EMAIL}?email=${encodeURIComponent(data.email)}${sig ? `&sig=${sig}` : ""}`,
+        );
+        return;
+      }
+
       notifications.show({
-        message: err.response?.data.message,
+        message,
         color: "red",
       });
     }
@@ -92,6 +101,17 @@ export default function useAuth() {
     try {
       if (isCloud()) {
         const res = await createWorkspace(data);
+
+        if (res?.requiresEmailVerification) {
+          const hostname = res?.workspace?.hostname;
+          if (hostname) {
+            window.location.href =
+              getHostnameUrl(hostname) +
+              `/verify-email?email=${encodeURIComponent(data.email)}&sig=${res.emailSignature}`;
+          }
+          return;
+        }
+
         const hostname = res?.workspace?.hostname;
         const exchangeToken = res?.exchangeToken;
         if (hostname && exchangeToken) {

apps/client/src/features/auth/services/auth-service.ts

@@ -51,3 +51,4 @@ export async function getCollabToken(): Promise<ICollabToken> {
   const req = await api.post<ICollabToken>("/auth/collab-token");
   return req.data;
 }
+

apps/client/src/features/comment/components/comment-actions.tsx

@@ -24,7 +24,12 @@ function CommentActions({
         </Button>
       )}
 
-      <Button size="compact-sm" loading={isLoading} onClick={onSave}>
+      <Button
+        size="compact-sm"
+        loading={isLoading}
+        onClick={onSave}
+        onMouseDown={(e) => e.preventDefault()}
+      >
         {t("Save")}
       </Button>
     </Group>

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -27,6 +27,9 @@ import { extractPageSlugId } from "@/lib";
 import { useTranslation } from "react-i18next";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
 import { IconArrowUp, IconMessageOff } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 
 function CommentListWithTabs() {
   const { t } = useTranslation();
@@ -345,6 +348,7 @@ const PageCommentInput = ({ onSave, isLoading }) => {
   const [content, setContent] = useState("");
   const { ref, focused } = useFocusWithin();
   const commentEditorRef = useRef(null);
+  const [currentUser] = useAtom(currentUserAtom);
 
   const handleSave = useCallback(() => {
     onSave(null, content);
@@ -363,19 +367,30 @@ const PageCommentInput = ({ onSave, isLoading }) => {
         position: "relative",
       }}
     >
-      <CommentEditor
+      <Group wrap="nowrap" align="flex-start" gap="xs">
-        ref={commentEditorRef}
+        <CustomAvatar
-        onUpdate={setContent}
+          size="sm"
-        onSave={handleSave}
+          avatarUrl={currentUser?.user?.avatarUrl}
-        editable={true}
+          name={currentUser?.user?.name}
-        placeholder={t("Add a comment...")}
+          style={{ flexShrink: 0, marginTop: 10 }}
-      />
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <CommentEditor
+            ref={commentEditorRef}
+            onUpdate={setContent}
+            onSave={handleSave}
+            editable={true}
+            placeholder={t("Add a comment...")}
+          />
+        </div>
+      </Group>
       {focused && (
         <ActionIcon
           variant="filled"
           radius="xl"
           size="sm"
           onClick={handleSave}
+          onMouseDown={(e) => e.preventDefault()}
           loading={isLoading}
           style={{ position: "absolute", right: 8, bottom: 30 }}
         >

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -1,7 +1,7 @@
 import { BubbleMenu, BubbleMenuProps } from "@tiptap/react/menus";
 import { isNodeSelection, useEditorState } from "@tiptap/react";
 import type { Editor } from "@tiptap/react";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import {
   IconBold,
   IconCode,
@@ -49,6 +49,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
+  const isLinkSelectorOpenRef = useRef(false);
 
   useEffect(() => {
     showCommentPopupRef.current = showCommentPopup;
@@ -125,6 +126,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
     shouldShow: ({ state, editor }) => {
+      if (isLinkSelectorOpenRef.current) {
+        return true;
+      }
+
       const { selection } = state;
       const { empty } = selection;
 
@@ -155,7 +160,14 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+  const [isLinkSelectorOpen, _setIsLinkSelectorOpen] = useState(false);
+  const setIsLinkSelectorOpen = useCallback((value: SetStateAction<boolean>) => {
+    _setIsLinkSelectorOpen((prev) => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      isLinkSelectorOpenRef.current = next;
+      return next;
+    });
+  }, []);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
 
   // Hide the bubble menu immediately when AI menu is shown

apps/client/src/features/editor/components/bubble-menu/link-selector.tsx

@@ -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>

apps/client/src/features/editor/components/link/link-editor-panel.tsx

@@ -1,36 +1,199 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Group, TextInput } from "@mantine/core";
+import {
-import { IconLink } from "@tabler/icons-react";
+  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,
   initialUrl,
+  onUnsetLink,
 }: LinkEditorPanelProps) => {
   const { t } = useTranslation();
-  const state = useLinkEditorState({
+  const { spaceSlug } = useParams();
-    onSetLink,
+  const { data: space } = useSpaceQuery(spaceSlug);
-    initialUrl,
+  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
-          <TextInput
+          leftSection={<IconLink size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />}
-            leftSection={<IconLink size={16} />}
+          classNames={{ input: classes.linkInput }}
-            variant="filled"
+          placeholder={t("Paste link or search pages")}
-            placeholder={t("Paste link")}
+          value={state.url}
-            value={state.url}
+          onChange={state.onChange}
-            onChange={state.onChange}
+          onKeyDown={handleKeyDown}
-          />
+          autoFocus
-          <Button p={"xs"} type="submit" disabled={!state.isValidUrl}>
+        />
-            {t("Save")}
-          </Button>
-        </Group>
       </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>
   );
 };

apps/client/src/features/editor/components/link/link-menu.tsx

@@ -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;

apps/client/src/features/editor/components/link/link-preview.tsx

@@ -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>
-    </>
-  );
-};

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

@@ -0,0 +1,583 @@
+import { MarkViewContent, MarkViewProps } from "@tiptap/react";
+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 { notifications } from "@mantine/notifications";
+import {
+  Divider,
+  Group,
+  Popover,
+  Text,
+  TextInput,
+  ActionIcon,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import classes from "./link.module.css";
+import { useTranslation } from "react-i18next";
+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";
+
+export const normalizeUrl = (url: string): string => {
+  if (!url) return url;
+  if (url.startsWith("/") || /^(\S+):(\/\/)?\S+$/.test(url)) return url;
+  return `https://${url}`;
+};
+
+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) {
+    if (internalAttr) return { isInternal: true, slugId: null, label: href };
+    return { isInternal: false, slugId: null, label: href };
+  }
+
+  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) {
+  const { mark, editor } = props;
+  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 [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 dropdownRef = useRef<HTMLDivElement>(null);
+  const isEditable = editor.isEditable;
+  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 linkMark = node.marks.find(
+        (m) => m.type.name === "link" && m.attrs.href === href,
+      );
+      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;
+      }
+
+      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 (popoverState === "edit") {
+      const text = wrapperRef.current?.querySelector("a")?.textContent || "";
+      setLinkTitle(text);
+      setLinkUrl(href);
+      pendingTitleRef.current = null;
+      requestAnimationFrame(() => titleInputRef.current?.focus());
+    }
+    if (popoverState === "closed") {
+      if (pendingTitleRef.current !== null) {
+        handleUpdateLinkTitle(pendingTitleRef.current);
+        pendingTitleRef.current = null;
+      }
+      setShowSearch(false);
+    }
+  }, [popoverState, href, isInternal, handleUpdateLinkTitle]);
+
+  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) {
+      let targetPath = href;
+      let anchor = "";
+
+      try {
+        const url = new URL(href);
+        targetPath = url.pathname;
+        anchor = url.hash.slice(1);
+      } catch {
+        if (href.includes("#")) {
+          [targetPath, anchor] = href.split("#");
+        }
+      }
+
+      if (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(`${location.pathname}#${anchor}`, { replace: true });
+            return;
+          }
+        }
+      }
+
+      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(
+        sanitizeUrl(normalizeUrl(href)),
+        "_blank",
+        "noopener,noreferrer",
+      );
+    }
+  }, [
+    href,
+    navigate,
+    location.pathname,
+    isInternal,
+    isShareRoute,
+    slugId,
+    shareId,
+    pageTitle,
+    pageSlug,
+  ]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isEditable) {
+        setPopoverState("preview");
+      } else {
+        handleNavigate();
+      }
+    },
+    [handleNavigate, isEditable],
+  );
+
+  const handleCopy = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const fullUrl = sanitizeUrl(
+        isInternal ? `${window.location.origin}${href}` : href,
+      );
+      copyToClipboard(fullUrl);
+      notifications.show({
+        message: t("Link copied"),
+      });
+      setPopoverState("closed");
+    },
+    [href, isInternal, t],
+  );
+
+  const handleRemoveLink = useCallback(() => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setPopoverState("closed");
+  }, [editor]);
+
+  const displayHref = sanitizeUrl(
+    isInternal
+      ? isShareRoute && slugId
+        ? buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle })
+        : href
+      : normalizeUrl(href),
+  );
+
+  const linkTitleInput = (
+    <>
+      <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>
+  );
+}

apps/client/src/features/editor/components/link/link.module.css

@@ -1,6 +1,102 @@
-.link {
+.linkWrapper {
-    color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
+  position: relative;
-    overflow: hidden;
+  display: inline;
-    text-overflow: ellipsis;
+}
-    white-space: nowrap;
+
+.linkInput {
+  border: 1.5px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: transparent;
+
+  &: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));
+  }
+}
+
+.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;
+}
+
+.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);
+    }
+  }
+}
+
+.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);
+    }
+  }
 }

apps/client/src/features/editor/components/link/types.ts

@@ -1,4 +1,5 @@
 export type LinkEditorPanelProps = {
   initialUrl?: string;
-  onSetLink: (url: string, openInNewTab?: boolean) => void;
+  onSetLink: (url: string, internal?: boolean) => void;
+  onUnsetLink?: () => void;
 };

apps/client/src/features/editor/components/link/use-link-editor-state.tsx

@@ -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,
   };
 };

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

@@ -86,8 +86,9 @@ import fortran from "highlight.js/lib/languages/fortran";
 import haskell from "highlight.js/lib/languages/haskell";
 import scala from "highlight.js/lib/languages/scala";
 import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion.ts";
-import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ReactNodeViewRenderer, ReactMarkViewRenderer } from "@tiptap/react";
 import MentionView from "@/features/editor/components/mention/mention-view.tsx";
+import LinkView from "@/features/editor/components/link/link-view.tsx";
 import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
 import EmojiCommand from "./emoji-command";
@@ -176,6 +177,10 @@ export const mainExtensions = [
   }),
   LinkExtension.configure({
     openOnClick: false,
+  }).extend({
+    addMarkView() {
+      return ReactMarkViewRenderer(LinkView);
+    },
   }),
   Superscript,
   SubScript,

apps/client/src/features/editor/hooks/use-editor-scroll.ts

@@ -42,7 +42,7 @@ export const useEditorScroll = ({
         return;
       }
 
-      const dom = editor.view.dom.querySelector(`[id="${targetId}"]`);
+      const dom = editor.view.dom.querySelector(`[id="${targetId}"], [data-id="${targetId}"]`);
       if (dom) {
         dom.scrollIntoView({ behavior: 'smooth', block: 'start' });
         resolve(true);

apps/client/src/features/editor/page-editor.tsx

@@ -50,7 +50,6 @@ import {
   handleFileDrop,
   handlePaste,
 } from "@/features/editor/components/common/editor-paste-handler.tsx";
-import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
 import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
 import DrawioMenu from "./components/drawio/drawio-menu";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
@@ -418,7 +417,6 @@ export default function PageEditor({
             <ExcalidrawMenu editor={editor} />
             <DrawioMenu editor={editor} />
             <ColumnsMenu editor={editor} />
-            <LinkMenu editor={editor} appendTo={menuContainerRef} />
           </div>
         )}
         {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}

apps/client/src/features/editor/styles/core.css

@@ -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;
   }

apps/client/src/features/search/queries/search-query.ts

@@ -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,
   });
 }
 

apps/client/src/features/workspace/services/workspace-service.ts

@@ -113,7 +113,7 @@ export async function getInvitationById(data: {
 
 export async function createWorkspace(
   data: ISetupWorkspace,
-): Promise<{ workspace: IWorkspace } & { exchangeToken: string }> {
+): Promise<{ workspace: IWorkspace; exchangeToken?: string; requiresEmailVerification?: boolean; emailSignature?: string }> {
   const req = await api.post("/workspace/create", data);
   return req.data;
 }

apps/client/src/lib/app-route.ts

@@ -12,6 +12,7 @@ const APP_ROUTE = {
     SELECT_WORKSPACE: "/select",
     MFA_CHALLENGE: "/login/mfa",
     MFA_SETUP_REQUIRED: "/login/mfa/setup",
+    VERIFY_EMAIL: "/verify-email",
   },
   SETTINGS: {
     ACCOUNT: {

apps/server/package.json

@@ -107,6 +107,7 @@
     "sanitize-filename-ts": "1.0.2",
     "socket.io": "^4.8.3",
     "stripe": "^17.5.0",
+    "tlds": "^1.261.0",
     "tmp-promise": "^3.0.3",
     "tseep": "^1.3.1",
     "typesense": "^2.1.0",

apps/server/src/common/validators/no-urls.validator.spec.ts

@@ -0,0 +1,142 @@
+import { containsDomain } from './no-urls.validator';
+
+// containsDomain returns true if value contains a domain-like pattern
+// The full NoUrls validator also checks for https:// URLs separately
+
+describe('containsDomain', () => {
+  describe('bare domains with real TLDs — should block', () => {
+    it.each([
+      'example.com',
+      'example.net',
+      'example.org',
+      'example.io',
+      'example.co',
+      'example.dev',
+      'example.app',
+      'example.me',
+      'example.info',
+      'example.tech',
+      'example.aero',
+      'example.cloud',
+      'example.museum',
+      'example.abc',
+      'example.uk',
+      'example.de',
+      'example.fr',
+      'example.ru',
+    ])('blocks "%s"', (value) => {
+      expect(containsDomain(value)).toBe(true);
+    });
+  });
+
+  describe('domains with paths — should block', () => {
+    it.each([
+      'example.com/reset',
+      'example.com/reset-password',
+      'click example.com/page',
+      'go to example.net/login',
+    ])('blocks "%s"', (value) => {
+      expect(containsDomain(value)).toBe(true);
+    });
+  });
+
+  describe('multi-part domains — should block', () => {
+    it.each([
+      'Foo.com.net',
+      'Foo.com.',
+      'Foo.mine.net',
+      'Foo.mine.ne',
+      'sub.example.com',
+      'login.example.co.uk',
+    ])('blocks "%s"', (value) => {
+      expect(containsDomain(value)).toBe(true);
+    });
+  });
+
+  describe('domain in sentence — should block', () => {
+    it.each([
+      'Reset your password at example.com',
+      'URGENT click example.com/reset',
+      'Visit example.org for details',
+      'go to mysite.io now',
+    ])('blocks "%s"', (value) => {
+      expect(containsDomain(value)).toBe(true);
+    });
+  });
+
+  describe('case insensitive — should block', () => {
+    it.each(['EXAMPLE.COM', 'Example.Com', 'example.COM'])('blocks "%s"', (value) => {
+      expect(containsDomain(value)).toBe(true);
+    });
+  });
+
+  describe('fake TLDs — should allow', () => {
+    it.each([
+      'Foo.mine',
+      'Foo.blarg',
+      'Foo.qqq',
+      'Foo.zz',
+      'Foo.abcd',
+      'Foo.abcde',
+      'Foo.abcdef',
+      'Foo.abcdefg',
+    ])('allows "%s"', (value) => {
+      expect(containsDomain(value)).toBe(false);
+    });
+  });
+
+  describe('too short suffix — should allow', () => {
+    it.each(['Foo.a', 'Foo.c', 'A.B'])('allows "%s"', (value) => {
+      expect(containsDomain(value)).toBe(false);
+    });
+  });
+
+  describe('multi-part with fake TLD — should allow', () => {
+    it.each(['Foo.mine.', 'Foo.mine.n'])('allows "%s"', (value) => {
+      expect(containsDomain(value)).toBe(false);
+    });
+  });
+
+  describe('emails — should allow', () => {
+    it.each([
+      'user@example.com',
+      'admin@company.org',
+      'test@sub.domain.co.uk',
+    ])('allows "%s"', (value) => {
+      expect(containsDomain(value)).toBe(false);
+    });
+  });
+
+  describe('normal names — should allow', () => {
+    it.each([
+      'John Smith',
+      'Dr. Smith',
+      'A. B. Charlie',
+      'John',
+      'Mary Jane',
+      "O'Brien",
+      'Jean-Pierre',
+      'José García',
+    ])('allows "%s"', (value) => {
+      expect(containsDomain(value)).toBe(false);
+    });
+  });
+
+  describe('IP addresses — should allow', () => {
+    it.each(['192.168.1.1', '10.0.0.1', '127.0.0.1'])(
+      'allows "%s"',
+      (value) => {
+        expect(containsDomain(value)).toBe(false);
+      },
+    );
+  });
+
+  describe('edge cases — should allow', () => {
+    it.each(['', ' ', '.', '..', 'hello', '.com', 'a.b'])(
+      'allows "%s"',
+      (value) => {
+        expect(containsDomain(value)).toBe(false);
+      },
+    );
+  });
+});

apps/server/src/common/validators/no-urls.validator.ts

@@ -0,0 +1,42 @@
+import { registerDecorator, ValidationOptions } from 'class-validator';
+import * as tlds from 'tlds';
+
+const URL_PATTERN = /https?:\/\//i;
+const tldSet = new Set(tlds.map((t) => t.toLowerCase()));
+
+export function containsDomain(value: string): boolean {
+  const tokens = value.split(/\s+/);
+  for (const token of tokens) {
+    if (token.includes('@')) continue;
+    const segments = token.split('.');
+    for (let i = 1; i < segments.length; i++) {
+      const suffix = segments[i].replace(/[^\w].*/g, '');
+      if (segments[i - 1] && suffix && tldSet.has(suffix.toLowerCase())) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+export function NoUrls(validationOptions?: ValidationOptions) {
+  return function (object: object, propertyName: string) {
+    registerDecorator({
+      name: 'noUrls',
+      target: object.constructor,
+      propertyName,
+      options: {
+        message: 'Must not contain URLs or domain names',
+        ...validationOptions,
+      },
+      validator: {
+        validate(value: unknown) {
+          if (typeof value !== 'string') return true;
+          if (URL_PATTERN.test(value)) return false;
+          if (containsDomain(value)) return false;
+          return true;
+        },
+      },
+    });
+  };
+}

apps/server/src/core/auth/auth.constants.ts

@@ -1,3 +1,4 @@
 export enum UserTokenType {
   FORGOT_PASSWORD = 'forgot-password',
+  EMAIL_VERIFICATION = 'email-verification',
 }

apps/server/src/core/auth/auth.util.ts

@@ -1,5 +1,37 @@
 import { BadRequestException } from '@nestjs/common';
 import { Workspace } from '@docmost/db/types/entity.types';
+import { createHmac } from 'node:crypto';
+
+export function computeEmailSignature(
+  email: string,
+  workspaceId: string,
+  appSecret: string,
+): string {
+  return createHmac('sha256', appSecret)
+    .update(`${email.toLowerCase()}:${workspaceId}`)
+    .digest('hex');
+}
+
+export function throwIfEmailNotVerified(opts: {
+  isCloud: boolean;
+  emailVerifiedAt: Date | null;
+  email: string;
+  workspaceId: string;
+  appSecret: string;
+}): void {
+  if (!opts.isCloud || opts.emailVerifiedAt) return;
+
+  const emailSignature = computeEmailSignature(
+    opts.email,
+    opts.workspaceId,
+    opts.appSecret,
+  );
+  throw new BadRequestException({
+    message:
+      'Please verify your email address. Check your inbox for the verification link.',
+    emailSignature,
+  });
+}
 
 export function validateSsoEnforcement(workspace: Workspace) {
   if (workspace.enforceSso) {

apps/server/src/core/auth/dto/create-admin-user.dto.ts

@@ -7,11 +7,13 @@ import {
 } from 'class-validator';
 import { CreateUserDto } from './create-user.dto';
 import { Transform, TransformFnParams } from 'class-transformer';
+import { NoUrls } from '../../../common/validators/no-urls.validator';
 
 export class CreateAdminUserDto extends CreateUserDto {
   @IsNotEmpty()
   @MinLength(1)
   @MaxLength(50)
+  @NoUrls()
   @Transform(({ value }: TransformFnParams) => value?.trim())
   name: string;
 

apps/server/src/core/auth/dto/create-user.dto.ts

@@ -7,12 +7,14 @@ import {
   MinLength,
 } from 'class-validator';
 import { Transform, TransformFnParams } from 'class-transformer';
+import { NoUrls } from '../../../common/validators/no-urls.validator';
 
 export class CreateUserDto {
   @IsOptional()
   @MinLength(1)
   @MaxLength(50)
   @IsString()
+  @NoUrls()
   @Transform(({ value }: TransformFnParams) => value?.trim())
   name: string;
 

apps/server/src/core/auth/services/auth.service.ts

@@ -17,6 +17,7 @@ import {
   isUserDisabled,
   nanoIdGen,
 } from '../../../common/helpers';
+import { throwIfEmailNotVerified } from '../auth.util';
 import { ChangePasswordDto } from '../dto/change-password.dto';
 import { MailService } from '../../../integrations/mail/mail.service';
 import ChangePasswordEmail from '@docmost/transactional/emails/change-password-email';
@@ -36,6 +37,7 @@ import {
   AUDIT_SERVICE,
   IAuditService,
 } from '../../../integrations/audit/audit.service';
+import { EnvironmentService } from '../../../integrations/environment/environment.service';
 
 @Injectable()
 export class AuthService {
@@ -46,6 +48,7 @@ export class AuthService {
     private userTokenRepo: UserTokenRepo,
     private mailService: MailService,
     private domainService: DomainService,
+    private environmentService: EnvironmentService,
     @InjectKysely() private readonly db: KyselyDB,
     @Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
   ) {}
@@ -69,6 +72,14 @@ export class AuthService {
       throw new UnauthorizedException(errorMessage);
     }
 
+    throwIfEmailNotVerified({
+      isCloud: this.environmentService.isCloud(),
+      emailVerifiedAt: user.emailVerifiedAt,
+      email: user.email,
+      workspaceId,
+      appSecret: this.environmentService.getAppSecret(),
+    });
+
     user.lastLoginAt = new Date();
     await this.userRepo.updateLastLogin(user.id, workspaceId);
 
@@ -247,6 +258,14 @@ export class AuthService {
       template: emailTemplate,
     });
 
+    if (this.environmentService.isCloud() && !user.emailVerifiedAt) {
+      await this.userRepo.updateUser(
+        { emailVerifiedAt: new Date() },
+        user.id,
+        workspace.id,
+      );
+    }
+
     // Check if user has MFA enabled or workspace enforces MFA
     const userHasMfa = user?.['mfa']?.isEnabled || false;
     const workspaceEnforcesMfa = workspace.enforceMfa || false;

apps/server/src/core/workspace/dto/invitation.dto.ts

@@ -12,6 +12,7 @@ import {
   MinLength,
 } from 'class-validator';
 import { UserRole } from '../../../common/helpers/types/permission';
+import { NoUrls } from '../../../common/validators/no-urls.validator';
 
 export class InviteUserDto {
   @IsArray()
@@ -44,6 +45,7 @@ export class AcceptInviteDto extends InvitationIdDto {
   @MinLength(2)
   @MaxLength(60)
   @IsString()
+  @NoUrls()
   name: string;
 
   @MinLength(8)

apps/server/src/core/workspace/services/workspace.service.ts

@@ -244,7 +244,7 @@ export class WorkspaceService {
         await this.billingQueue.add(
           QueueJob.WELCOME_EMAIL,
           { userId: user.id },
-          { delay: 60 * 1000 }, // 1m
+          { delay: 30 * 60 * 1000 }, // 30m
         );
       } catch (err) {
         this.logger.error(err);

apps/server/src/integrations/environment/environment.validation.ts

@@ -10,7 +10,7 @@ import {
   validateSync,
 } from 'class-validator';
 import { plainToInstance } from 'class-transformer';
-import { IsISO6391 } from '../../common/validator/is-iso6391';
+import { IsISO6391 } from '../../common/validators/is-iso6391';
 
 export class EnvironmentVariables {
   @IsNotEmpty()

apps/server/src/integrations/export/export.service.ts

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

apps/server/src/integrations/export/utils.ts

@@ -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;
           }
 

apps/server/src/integrations/import/services/file-import-task.service.ts

@@ -25,6 +25,7 @@ import {
   buildAttachmentCandidates,
   collectMarkdownAndHtmlFiles,
   encodeFilePath,
+  extractNotionPartialId,
   readDocmostMetadata,
   stripNotionID,
 } from '../utils/import.utils';
@@ -160,10 +161,17 @@ export class FileImportTaskService {
     fileTask: FileTask;
   }): Promise<void> {
     const { extractDir, fileTask } = opts;
+    const isNotion = fileTask.source === FileImportSource.Notion;
     const allFiles = await collectMarkdownAndHtmlFiles(extractDir);
     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) {
@@ -224,7 +232,17 @@ export class FileImportTaskService {
     }
 
     // For each folder with content, create a placeholder page if no corresponding .md or .html exists
-    foldersWithContent.forEach((folderPath) => {
+    // Process folders with partial UUIDs first so they claim their specific files
+    // before plain folders (without partial UUIDs) take whatever remains.
+    const sortedFolders = isNotion
+      ? [...foldersWithContent].sort((a, b) => {
+          const aHasPartial = extractNotionPartialId(path.basename(a)) ? 0 : 1;
+          const bHasPartial = extractNotionPartialId(path.basename(b)) ? 0 : 1;
+          return aHasPartial - bHasPartial;
+        })
+      : [...foldersWithContent];
+
+    sortedFolders.forEach((folderPath) => {
       if (
         skipRootFolder &&
         folderPath?.toLowerCase() === skipRootFolder?.toLowerCase()
@@ -237,18 +255,54 @@ export class FileImportTaskService {
 
       if (!pagesMap.has(mdPath) && !pagesMap.has(htmlPath)) {
         const folderName = path.basename(folderPath);
-        const encodedMdPath = encodeFilePath(mdPath);
+        const parentDir = path.dirname(folderPath);
-        const placeholderMetadata = docmostMetadata?.pages[encodedMdPath];
+
-        pagesMap.set(mdPath, {
+        // Notion no longer adds UUIDs to folder names, but still adds them to files.
-          id: v7(),
+        // For duplicate names, Notion adds a partial UUID "{first4}-{last4}" to the folder.
-          slugId: generateSlugId(),
+        let matched = false;
-          name: stripNotionID(folderName),
+        if (isNotion) {
-          content: '',
+          const partialId = extractNotionPartialId(folderName);
-          parentPageId: null,
+          const strippedFolderName = stripNotionID(folderName);
-          fileExtension: '.md',
+          const isSameDir = (fileDir: string) =>
-          filePath: mdPath,
+            fileDir === parentDir || (parentDir === '.' && !fileDir.includes('/'));
-          icon: placeholderMetadata?.icon ?? null,
+
-        });
+          for (const [filePath, page] of pagesMap.entries()) {
+            if (!isSameDir(path.dirname(filePath))) continue;
+            if (page.name !== strippedFolderName) continue;
+
+            if (partialId) {
+              // Match partial UUID against the full UUID in the filename
+              const fileBase = path.basename(filePath, path.extname(filePath));
+              const fullIdMatch = fileBase.match(/[a-f0-9]{32}$/i);
+              if (!fullIdMatch) continue;
+              const fullId = fullIdMatch[0].toLowerCase();
+              if (!fullId.startsWith(partialId.prefix) || !fullId.endsWith(partialId.suffix)) {
+                continue;
+              }
+            }
+
+            pagesMap.delete(filePath);
+            page.filePath = mdPath;
+            pagesMap.set(mdPath, page);
+            matched = true;
+            break;
+          }
+        }
+
+        if (!matched) {
+          const encodedMdPath = encodeFilePath(mdPath);
+          const placeholderMetadata = docmostMetadata?.pages[encodedMdPath];
+          pagesMap.set(mdPath, {
+            id: v7(),
+            slugId: generateSlugId(),
+            name: stripNotionID(folderName),
+            content: '',
+            parentPageId: null,
+            fileExtension: '.md',
+            filePath: mdPath,
+            icon: placeholderMetadata?.icon ?? null,
+          });
+        }
       }
     });
 
@@ -458,6 +512,7 @@ export class FileImportTaskService {
               creatorId: fileTask.creatorId,
               sourcePageId: page.id,
               workspaceId: fileTask.workspaceId,
+              spaceSlug: space?.slug,
             });
 
             const pmState = getProsemirrorContent(

apps/server/src/integrations/import/utils/import-formatter.ts

@@ -4,6 +4,8 @@ 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 +24,7 @@ export async function formatImportHtml(opts: {
   workspaceId: string;
   pageDir?: string;
   attachmentCandidates?: string[];
+  spaceSlug?: string;
 }): Promise<{
   html: string;
   backlinks: InsertableBacklink[];
@@ -61,6 +64,7 @@ export async function formatImportHtml(opts: {
     creatorId,
     sourcePageId,
     workspaceId,
+    opts.spaceSlug,
   );
 
   return {
@@ -316,6 +320,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 +344,37 @@ export async function rewriteInternalLinksToMentionHtml(
     );
     const meta = filePathToPageMetaMap.get(resolved);
     if (!meta) return;
-    const mentionId = v7();
+
-    const $mention = $('<span>')
+    const linkText = $a.text().trim();
-      .attr({
+    const titleMatch =
-        'data-type': 'mention',
+      linkText === meta.title ||
-        'data-id': mentionId,
+      linkText === meta.title?.trim();
-        'data-entity-type': 'page',
+
-        'data-entity-id': meta.id,
+    if (titleMatch) {
-        'data-label': meta.title,
+      const mentionId = v7();
-        'data-slug-id': meta.slugId,
+      const $mention = $('<span>')
-        'data-creator-id': creatorId,
+        .attr({
-      })
+          'data-type': 'mention',
-      .text(meta.title);
+          'data-id': mentionId,
-    $a.replaceWith($mention);
+          '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);
+    } else {
+      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 });
   });
 

apps/server/src/integrations/import/utils/import.utils.ts

@@ -81,7 +81,25 @@ export async function collectMarkdownAndHtmlFiles(
 export function stripNotionID(fileName: string): string {
   // Handle optional separator (space or dash) + 32 alphanumeric chars at end
   const notionIdPattern = /[ -]?[a-z0-9]{32}$/i;
-  return fileName.replace(notionIdPattern, '').trim();
+  // Handle partial UUID format used for duplicate names: "Name abcd-ef12"
+  const partialIdPattern = / [a-f0-9]{4}-[a-f0-9]{4}$/i;
+  return fileName
+    .replace(notionIdPattern, '')
+    .replace(partialIdPattern, '')
+    .trim();
+}
+
+/**
+ * Extract a partial Notion UUID suffix from a folder name.
+ * Notion adds "{first4}-{last4}" when multiple pages share the same title.
+ * e.g. "Cool 324d-35ab" → { prefix: "324d", suffix: "35ab" }
+ */
+export function extractNotionPartialId(
+  folderName: string,
+): { prefix: string; suffix: string } | null {
+  const match = folderName.match(/ ([a-f0-9]{4})-([a-f0-9]{4})$/i);
+  if (!match) return null;
+  return { prefix: match[1].toLowerCase(), suffix: match[2].toLowerCase() };
 }
 
 export function encodeFilePath(filePath: string): string {

apps/server/src/main.ts

@@ -67,6 +67,7 @@ async function bootstrap() {
         '/api/sso/google',
         '/api/workspace/create',
         '/api/workspace/joined',
+        '/api/workspace/find-by-email',
       ];
 
       if (

packages/editor-ext/src/lib/link.ts

@@ -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 [
       {

pnpm-lock.yaml

@@ -681,6 +681,9 @@ importers:
       stripe:
         specifier: ^17.5.0
         version: 17.5.0
+      tlds:
+        specifier: ^1.261.0
+        version: 1.261.0
       tmp-promise:
         specifier: ^3.0.3
         version: 3.0.3
@@ -9837,6 +9840,10 @@ packages:
   tiptap-extension-global-drag-handle@0.1.18:
     resolution: {integrity: sha512-jwFuy1K8DP3a4bFy76Hpc63w1Sil0B7uZ3mvhQomVvUFCU787Lg2FowNhn7NFzeyok761qY2VG+PZ/FDthWUdg==}
 
+  tlds@1.261.0:
+    resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==}
+    hasBin: true
+
   tldts-core@6.1.72:
     resolution: {integrity: sha512-FW3H9aCaGTJ8l8RVCR3EX8GxsxDbQXuwetwwgXA2chYdsX+NY1ytCBl61narjjehWmCw92tc1AxlcY3668CU8g==}
 
@@ -21145,6 +21152,8 @@ snapshots:
 
   tiptap-extension-global-drag-handle@0.1.18: {}
 
+  tlds@1.261.0: {}
+
   tldts-core@6.1.72: {}
 
   tldts@6.1.72: