Merge branch 'main' into base

apps/client/src/features/auth/components/auth-layout.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Group, Text } from "@mantine/core";
+import classes from "./auth.module.css";
+
+type AuthLayoutProps = {
+  children: React.ReactNode;
+};
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <>
+      <Group justify="center" gap={8} className={classes.logo}>
+        <img
+          src="/icons/favicon-32x32.png"
+          alt="Docmost"
+          width={22}
+          height={22}
+        />
+        <Text size="28px" fw={700} style={{ userSelect: "none" }}>
+          Docmost
+        </Text>
+      </Group>
+      {children}
+    </>
+  );
+}

apps/client/src/features/auth/components/auth.module.css

@@ -1,12 +1,20 @@
+.logo {
+    margin-top: 80px;
+
+    @media (max-width: $mantine-breakpoint-sm) {
+        margin-top: 30px;
+    }
+}
+
 .container {
     box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 45px 4px;
     border-radius: 4px;
     background: light-dark(var(--mantine-color-body), rgba(0, 0, 0, 0.1));
-    margin-top: 150px;
+    margin-top: 40px;
     margin-bottom: 20px;
 
     @media (max-width: $mantine-breakpoint-sm) {
-        margin-top: 50px;
+        margin-top: 20px;
         margin-bottom: 20px;
     }
 }

apps/client/src/features/auth/components/forgot-password-form.tsx

@@ -7,6 +7,7 @@ import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   email: z
@@ -35,6 +36,7 @@ export function ForgotPasswordForm() {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -69,5 +71,6 @@ export function ForgotPasswordForm() {
         </form>
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/invite-sign-up-form.tsx

@@ -19,6 +19,7 @@ import { useGetInvitationQuery } from "@/features/workspace/queries/workspace-qu
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
 import SsoLogin from "@/ee/components/sso-login.tsx";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   name: z.string().trim().min(1),
@@ -66,6 +67,7 @@ export function InviteSignUpForm() {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -111,5 +113,6 @@ export function InviteSignUpForm() {
         )}
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/login-form.tsx

@@ -21,6 +21,7 @@ import SsoLogin from "@/ee/components/sso-login.tsx";
 import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { Error404 } from "@/components/ui/error-404.tsx";
 import React from "react";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   email: z
@@ -62,52 +63,54 @@ export function LoginForm() {
   }
 
   return (
-    <Container size={420} className={classes.container}>
-      <Box p="xl" className={classes.containerBox}>
-        <Title order={2} ta="center" fw={500} mb="md">
-          {t("Login")}
-        </Title>
+    <AuthLayout>
+      <Container size={420} className={classes.container}>
+        <Box p="xl" className={classes.containerBox}>
+          <Title order={2} ta="center" fw={500} mb="md">
+            {t("Login")}
+          </Title>
 
-        <SsoLogin />
+          <SsoLogin />
 
-        {!data?.enforceSso && (
-          <>
-            <form onSubmit={form.onSubmit(onSubmit)}>
-              <TextInput
-                id="email"
-                type="email"
-                label={t("Email")}
-                placeholder="email@example.com"
-                variant="filled"
-                {...form.getInputProps("email")}
-              />
+          {!data?.enforceSso && (
+            <>
+              <form onSubmit={form.onSubmit(onSubmit)}>
+                <TextInput
+                  id="email"
+                  type="email"
+                  label={t("Email")}
+                  placeholder="email@example.com"
+                  variant="filled"
+                  {...form.getInputProps("email")}
+                />
 
-              <PasswordInput
-                label={t("Password")}
-                placeholder={t("Your password")}
-                variant="filled"
-                mt="md"
-                {...form.getInputProps("password")}
-              />
+                <PasswordInput
+                  label={t("Password")}
+                  placeholder={t("Your password")}
+                  variant="filled"
+                  mt="md"
+                  {...form.getInputProps("password")}
+                />
 
-              <Group justify="flex-end" mt="sm">
-                <Anchor
-                  to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
-                  component={Link}
-                  underline="never"
-                  size="sm"
-                >
-                  {t("Forgot your password?")}
-                </Anchor>
-              </Group>
+                <Group justify="flex-end" mt="sm">
+                  <Anchor
+                    to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
+                    component={Link}
+                    underline="never"
+                    size="sm"
+                  >
+                    {t("Forgot your password?")}
+                  </Anchor>
+                </Group>
 
-              <Button type="submit" fullWidth mt="md" loading={isLoading}>
-                {t("Sign In")}
-              </Button>
-            </form>
-          </>
-        )}
-      </Box>
-    </Container>
+                <Button type="submit" fullWidth mt="md" loading={isLoading}>
+                  {t("Sign In")}
+                </Button>
+              </form>
+            </>
+          )}
+        </Box>
+      </Container>
+    </AuthLayout>
   );
 }

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -6,6 +6,7 @@ import { Box, Button, Container, PasswordInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import { AuthLayout } from "./auth-layout.tsx";
 
 const formSchema = z.object({
   newPassword: z
@@ -38,6 +39,7 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
   }
 
   return (
+    <AuthLayout>
     <Container size={420} className={classes.container}>
       <Box p="xl" className={classes.containerBox}>
         <Title order={2} ta="center" fw={500} mb="md">
@@ -59,5 +61,6 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
         </form>
       </Box>
     </Container>
+    </AuthLayout>
   );
 }

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

@@ -19,14 +19,15 @@ import SsoCloudSignup from "@/ee/components/sso-cloud-signup.tsx";
 import { isCloud } from "@/lib/config.ts";
 import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
+import { AuthLayout } from "./auth-layout.tsx";
 
 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()
-    .min(1, { message: "email is required" }),
-  password: z.string().min(8),
+    .email({ message: "Invalid email address" })
+    .min(1, { message: "Email is required" }),
+  password: z.string().min(8, { message: "Password must be at least 8 characters" }),
 });
 type FormValues = z.infer<typeof formSchema>;
 
@@ -50,7 +51,7 @@ export function SetupWorkspaceForm() {
   }
 
   return (
-    <div>
+    <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
           <Title order={2} ta="center" fw={500} mb="md">
@@ -117,6 +118,6 @@ export function SetupWorkspaceForm() {
           </Anchor>
         </Text>
       )}
-    </div>
+    </AuthLayout>
   );
 }

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

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

apps/client/src/features/comment/atoms/comment-atom.ts

@@ -3,3 +3,15 @@ import { atom } from 'jotai';
 export const showCommentPopupAtom = atom<boolean>(false);
 export const activeCommentIdAtom = atom<string>('');
 export const draftCommentIdAtom = atom<string>('');
+
+// Read-only comment state
+export const showReadOnlyCommentPopupAtom = atom<boolean>(false);
+export type YjsSelection = {
+  anchor: any;
+  head: any;
+};
+export type ReadOnlyCommentData = {
+  yjsSelection: YjsSelection;
+  selectedText: string;
+};
+export const readOnlyCommentDataAtom = atom<ReadOnlyCommentData | null>(null);

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-dialog.tsx

@@ -6,6 +6,8 @@ import {
   activeCommentIdAtom,
   draftCommentIdAtom,
   showCommentPopupAtom,
+  showReadOnlyCommentPopupAtom,
+  readOnlyCommentDataAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentEditor from "@/features/comment/components/comment-editor";
 import CommentActions from "@/features/comment/components/comment-actions";
@@ -19,12 +21,15 @@ import { useTranslation } from "react-i18next";
 interface CommentDialogProps {
   editor: ReturnType<typeof useEditor>;
   pageId: string;
+  readOnly?: boolean;
 }
 
-function CommentDialog({ editor, pageId }: CommentDialogProps) {
+function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
   const { t } = useTranslation();
   const [comment, setComment] = useState("");
   const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [, setShowReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
+  const [readOnlyCommentData, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [draftCommentId, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const [currentUser] = useAtom(currentUserAtom);
@@ -34,11 +39,17 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     handleDialogClose();
   });
   const createCommentMutation = useCreateCommentMutation();
-  const { isPending } = createCommentMutation;
+  const isPending = createCommentMutation.isPending;
 
   const handleDialogClose = () => {
-    setShowCommentPopup(false);
-    editor.chain().focus().unsetCommentDecoration().run();
+    if (readOnly) {
+      setShowReadOnlyCommentPopup(false);
+      // @ts-ignore
+      setReadOnlyCommentData(null);
+    } else {
+      setShowCommentPopup(false);
+      editor.chain().focus().unsetCommentDecoration().run();
+    }
   };
 
   const getSelectedText = () => {
@@ -47,6 +58,11 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
   };
 
   const handleAddComment = async () => {
+    if (readOnly) {
+      await handleAddReadOnlyComment();
+      return;
+    }
+
     try {
       const selectedText = getSelectedText();
       const commentData = {
@@ -65,7 +81,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
         .run();
       setActiveCommentId(createdComment.id);
 
-      //unselect text to close bubble menu
       editor.commands.setTextSelection({ from: editor.view.state.selection.from, to: editor.view.state.selection.from });
 
       setAsideState({ tab: "comments", isAsideOpen: true });
@@ -85,6 +100,33 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     }
   };
 
+  const handleAddReadOnlyComment = async () => {
+    if (!readOnlyCommentData) return;
+
+    try {
+      const createdComment = await createCommentMutation.mutateAsync({
+        pageId,
+        content: JSON.stringify(comment),
+        selection: readOnlyCommentData.selectedText,
+        type: "inline",
+        yjsSelection: readOnlyCommentData.yjsSelection,
+      });
+
+      setActiveCommentId(createdComment.id);
+      setAsideState({ tab: "comments", isAsideOpen: true });
+
+      setTimeout(() => {
+        const selector = `div[data-comment-id="${createdComment.id}"]`;
+        const commentElement = document.querySelector(selector);
+        commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+      }, 400);
+    } finally {
+      setShowReadOnlyCommentPopup(false);
+      // @ts-ignore
+      setReadOnlyCommentData(null);
+    }
+  };
+
   const handleCommentEditorChange = (newContent: any) => {
     setComment(newContent);
   };

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -7,7 +7,8 @@ import CommentEditor from "@/features/comment/components/comment-editor";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
 import CommentActions from "@/features/comment/components/comment-actions";
 import CommentMenu from "@/features/comment/components/comment-menu";
-import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 import ResolveComment from "@/ee/comment/components/resolve-comment";
 import { useHover } from "@mantine/hooks";
 import {
@@ -44,7 +45,7 @@ function CommentListItem({
   const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
   const resolveCommentMutation = useResolveCommentMutation();
   const [currentUser] = useAtom(currentUserAtom);
-  const isCloudEE = useIsCloudEE();
+  const canResolve = useHasFeature(Feature.COMMENT_RESOLUTION);
   const createdAtAgo = useTimeAgo(comment.createdAt);
 
   useEffect(() => {
@@ -81,7 +82,7 @@ function CommentListItem({
   }
 
   async function handleResolveComment() {
-    if (!isCloudEE) return;
+    if (!canResolve) return;
     
     try {
       const isResolved = comment.resolvedAt != null;
@@ -137,7 +138,7 @@ function CommentListItem({
             </Text>
 
             <div style={{ visibility: hovered ? "visible" : "hidden" }}>
-              {!comment.parentCommentId && canComment && isCloudEE && (
+              {!comment.parentCommentId && canComment && canResolve && (
                 <ResolveComment
                   editor={editor}
                   commentId={comment.id}

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();
@@ -41,7 +44,9 @@ function CommentListWithTabs() {
   const [isLoading, setIsLoading] = useState(false);
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
-  const canComment = page?.permissions?.canEdit ?? false;
+  const canComment =
+    (page?.permissions?.canEdit ?? false) ||
+    (space?.settings?.comments?.allowViewerComments === true);
 
   // Separate active and resolved comments
   const { activeComments, resolvedComments } = useMemo(() => {
@@ -150,7 +155,7 @@ function CommentListWithTabs() {
         )}
       </Paper>
     ),
-    [comments, handleAddReply, isLoading, space?.membership?.role],
+    [comments, handleAddReply, isLoading, space?.membership?.role, canComment],
   );
 
   if (isCommentsLoading) {
@@ -345,6 +350,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 +369,30 @@ const PageCommentInput = ({ onSave, isLoading }) => {
         position: "relative",
       }}
     >
-      <CommentEditor
-        ref={commentEditorRef}
-        onUpdate={setContent}
-        onSave={handleSave}
-        editable={true}
-        placeholder={t("Add a comment...")}
-      />
+      <Group wrap="nowrap" align="flex-start" gap="xs">
+        <CustomAvatar
+          size="sm"
+          avatarUrl={currentUser?.user?.avatarUrl}
+          name={currentUser?.user?.name}
+          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/comment/components/comment-menu.tsx

@@ -1,8 +1,16 @@
 import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import { IconDots, IconEdit, IconTrash, IconCircleCheck, IconCircleCheckFilled } from "@tabler/icons-react";
+import {
+  IconDots,
+  IconEdit,
+  IconTrash,
+  IconCircleCheck,
+  IconCircleCheckFilled,
+} from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
-import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 
 type CommentMenuProps = {
   onEditComment: () => void;
@@ -13,16 +21,17 @@ type CommentMenuProps = {
   isParentComment?: boolean;
 };
 
-function CommentMenu({ 
-  onEditComment, 
-  onDeleteComment, 
+function CommentMenu({
+  onEditComment,
+  onDeleteComment,
   onResolveComment,
   canEdit = true,
   isResolved = false,
-  isParentComment = false
+  isParentComment = false,
 }: CommentMenuProps) {
   const { t } = useTranslation();
-  const isCloudEE = useIsCloudEE();
+  const canResolve = useHasFeature(Feature.COMMENT_RESOLUTION);
+  const upgradeLabel = useUpgradeLabel();
 
   //@ts-ignore
   const openDeleteModal = () =>
@@ -44,33 +53,34 @@ function CommentMenu({
 
       <Menu.Dropdown>
         {canEdit && (
-          <Menu.Item onClick={onEditComment} leftSection={<IconEdit size={14} />}>
+          <Menu.Item
+            onClick={onEditComment}
+            leftSection={<IconEdit size={14} />}
+          >
             {t("Edit comment")}
           </Menu.Item>
         )}
-        {isParentComment && (
-          isCloudEE ? (
-            <Menu.Item 
-              onClick={onResolveComment} 
+        {isParentComment &&
+          (canResolve ? (
+            <Menu.Item
+              onClick={onResolveComment}
               leftSection={
-                isResolved ? 
-                  <IconCircleCheckFilled size={14} /> : 
+                isResolved ? (
+                  <IconCircleCheckFilled size={14} />
+                ) : (
                   <IconCircleCheck size={14} />
+                )
               }
             >
               {isResolved ? t("Re-open comment") : t("Resolve comment")}
             </Menu.Item>
           ) : (
-            <Tooltip label={t("Available in enterprise edition")} position="left">
-              <Menu.Item 
-                disabled
-                leftSection={<IconCircleCheck size={14} />}
-              >
+            <Tooltip label={upgradeLabel} position="left" withinPortal={false}>
+              <Menu.Item disabled leftSection={<IconCircleCheck size={14} />}>
                 {t("Resolve comment")}
               </Menu.Item>
             </Tooltip>
-          )
-        )}
+          ))}
         <Menu.Item
           leftSection={<IconTrash size={14} />}
           onClick={openDeleteModal}

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

@@ -65,6 +65,11 @@ export function useCreateCommentMutation() {
       ) as InfiniteData<IPagination<IComment>> | undefined;
 
       if (cache && cache.pages.length > 0) {
+        const alreadyExists = cache.pages.some((page) =>
+          page.items.some((c) => c.id === newComment.id),
+        );
+        if (alreadyExists) return;
+
         const lastIdx = cache.pages.length - 1;
         queryClient.setQueryData(RQ_KEY(newComment.pageId), {
           ...cache,

apps/client/src/features/comment/types/comment.types.ts

@@ -17,6 +17,10 @@ export interface IComment {
   deletedAt?: Date;
   creator: IUser;
   resolvedBy?: IUser;
+  yjsSelection?: {
+    anchor: any;
+    head: any;
+  };
 }
 
 export interface ICommentData {

apps/client/src/features/editor/atoms/editor-atoms.ts

@@ -10,3 +10,5 @@ export const readOnlyEditorAtom = atom<Editor | null>(null);
 export const yjsConnectionStatusAtom = atom<string>("");
 
 export const showAiMenuAtom = atom(false);
+
+export const showLinkMenuAtom = atom(false);

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

@@ -1,17 +1,43 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { Group, Text, Paper, ActionIcon, Loader } from "@mantine/core";
+import { Group, Text, Paper, ActionIcon, Loader, Tooltip } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
-import { IconDownload, IconPaperclip } from "@tabler/icons-react";
+import { IconDownload, IconFileTypePdf, IconPaperclip } from "@tabler/icons-react";
 import { useHover } from "@mantine/hooks";
 import { formatBytes } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
 
 export default function AttachmentView(props: NodeViewProps) {
   const { t } = useTranslation();
-  const { node, selected } = props;
-  const { url, name, size } = node.attrs;
+  const { editor, node, getPos, selected } = props;
+  const { url, name, size, mime, attachmentId, placeholder } = node.attrs;
   const { hovered, ref } = useHover();
 
+  const isPdf = mime === "application/pdf" || name?.toLowerCase().endsWith(".pdf");
+
+  const handleEmbedAsPdf = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined || !url) return;
+
+    const nodeSize = node.nodeSize;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from: pos, to: pos + nodeSize },
+        {
+          type: "pdf",
+          attrs: {
+            src: url,
+            name,
+            attachmentId,
+            size,
+          },
+        },
+      )
+      .run();
+  }, [editor, getPos, node, url, name, attachmentId]);
+
   return (
     <NodeViewWrapper>
       <Paper withBorder p="4px" ref={ref} data-drag-handle>
@@ -23,14 +49,14 @@ export default function AttachmentView(props: NodeViewProps) {
           h={25}
         >
           <Group wrap="nowrap" gap="sm" style={{ minWidth: 0, flex: 1 }}>
-            {url ? (
-              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
-            ) : (
+            {!url && placeholder ? (
               <Loader size={20} style={{ flexShrink: 0 }} />
+            ) : (
+              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
             )}
 
             <Text component="span" size="md" truncate="end" style={{ minWidth: 0 }}>
-              {url ? name : t("Uploading {{name}}", { name })}
+              {!url && placeholder ? t("Uploading {{name}}", { name }) : name}
             </Text>
 
             <Text component="span" size="sm" c="dimmed" style={{ flexShrink: 0 }}>
@@ -39,11 +65,20 @@ export default function AttachmentView(props: NodeViewProps) {
           </Group>
 
           {url && (selected || hovered) && (
-            <a href={getFileUrl(url)} target="_blank">
-              <ActionIcon variant="default" aria-label="download file">
-                <IconDownload size={18} />
-              </ActionIcon>
-            </a>
+            <Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
+              {isPdf && editor.isEditable && (
+                <Tooltip label={t("Embed as PDF")} position="top" withinPortal={false}>
+                  <ActionIcon variant="default" aria-label={t("Embed as PDF")} onClick={handleEmbedAsPdf}>
+                    <IconFileTypePdf size={18} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+              <a href={getFileUrl(url)} target="_blank">
+                <ActionIcon variant="default" aria-label="download file">
+                  <IconDownload size={18} />
+                </ActionIcon>
+              </a>
+            </Group>
           )}
         </Group>
       </Paper>

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

@@ -0,0 +1,123 @@
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
+import { useCallback } from "react";
+import { Node as PMNode } from "@tiptap/pm/model";
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from "@/features/editor/components/table/types/types.ts";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+  IconDownload,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { getFileUrl } from "@/lib/config.ts";
+import classes from "../common/toolbar-menu.module.css";
+
+export function AudioMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const audioAttrs = ctx.editor.getAttributes("audio");
+
+      return {
+        isAudio: ctx.editor.isActive("audio"),
+        src: audioAttrs?.src || null,
+      };
+    },
+  });
+
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("audio") && editor.getAttributes("audio").src;
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "audio";
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
+    }
+
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor]);
+
+  const handleDownload = useCallback(() => {
+    if (!editorState?.src) return;
+    const url = getFileUrl(editorState.src);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "";
+    a.click();
+  }, [editorState?.src]);
+
+  const handleDelete = useCallback(() => {
+    editor.commands.deleteSelection();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`audio-menu`}
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Download")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDownload}
+            size="lg"
+            aria-label={t("Download")}
+            variant="subtle"
+          >
+            <IconDownload size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip position="top" label={t("Delete")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDelete}
+            size="lg"
+            aria-label={t("Delete")}
+            variant="subtle"
+          >
+            <IconTrash size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default AudioMenu;

apps/client/src/features/editor/components/audio/audio-view.module.css

@@ -0,0 +1,37 @@
+.audioWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeleton {
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
+
+.audio {
+  display: block;
+  width: 100%;
+  border-radius: 8px;
+}

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

@@ -0,0 +1,68 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Loader, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { getFileUrl } from "@/lib/config.ts";
+import { isInternalFileUrl } from "@docmost/editor-ext";
+import classes from "./audio-view.module.css";
+import { useTranslation } from "react-i18next";
+
+export default function AudioView(props: NodeViewProps) {
+  const { t } = useTranslation();
+  const { editor, node } = props;
+  const { src, placeholder } = node.attrs;
+
+  const safeSrc = useMemo(() => {
+    if (!src || !isInternalFileUrl(src)) return null;
+    return getFileUrl(src);
+  }, [src]);
+
+  const previewSrc = useMemo(() => {
+    editor.storage.shared.audioPreviews =
+      editor.storage.shared.audioPreviews || {};
+
+    if (placeholder?.id) {
+      return editor.storage.shared.audioPreviews[placeholder.id];
+    }
+
+    return null;
+  }, [placeholder, editor]);
+
+  return (
+    <NodeViewWrapper data-drag-handle>
+      <div className={`${classes.audioWrapper} ${!safeSrc && placeholder ? classes.skeleton : ''}`}>
+        {safeSrc && (
+          <audio
+            className={classes.audio}
+            preload="metadata"
+            controls
+            src={safeSrc}
+          />
+        )}
+        {!safeSrc && previewSrc && (
+          <Group pos="relative" w="100%">
+            <audio
+              className={classes.audio}
+              preload="metadata"
+              controls
+              src={previewSrc}
+            />
+            <Loader size={20} pos="absolute" top={6} right={6} />
+          </Group>
+        )}
+        {!safeSrc && !previewSrc && placeholder && (
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md" h={54}>
+            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Text component="span" size="sm" truncate="end">
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
+            </Text>
+          </Group>
+        )}
+        {!safeSrc && !previewSrc && !placeholder && (
+          <audio className={classes.audio} controls />
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}

apps/client/src/features/editor/components/audio/upload-audio-action.tsx

@@ -0,0 +1,36 @@
+import { handleAudioUpload } from "@docmost/editor-ext";
+import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+import { getFileUploadSizeLimit } from "@/lib/config.ts";
+import { formatBytes } from "@/lib";
+import i18n from "@/i18n.ts";
+
+export const uploadAudioAction = handleAudioUpload({
+  onUpload: async (file: File, pageId: string): Promise<any> => {
+    try {
+      return await uploadFile(file, pageId);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
+      throw err;
+    }
+  },
+  validateFn: (file) => {
+    if (!file.type.includes("audio/")) {
+      return false;
+    }
+
+    if (file.size > getFileUploadSizeLimit()) {
+      notifications.show({
+        color: "red",
+        message: i18n.t("File exceeds the {{limit}} attachment limit", {
+          limit: formatBytes(getFileUploadSizeLimit()),
+        }),
+      });
+      return false;
+    }
+    return true;
+  },
+});

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

@@ -26,7 +26,7 @@ import { v7 as uuid7 } from "uuid";
 import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
-import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
+import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
@@ -49,6 +49,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
+  const [showLinkMenu] = useAtom(showLinkMenuAtom);
+  const showLinkMenuRef = useRef(showLinkMenu);
 
   useEffect(() => {
     showCommentPopupRef.current = showCommentPopup;
@@ -58,6 +60,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     showAiMenuRef.current = showAiMenu;
   }, [showAiMenu]);
 
+  useEffect(() => {
+    showLinkMenuRef.current = showLinkMenu;
+  }, [showLinkMenu]);
+
   const editorState = useEditorState({
     editor: props.editor,
     selector: (ctx) => {
@@ -135,6 +141,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
         isNodeSelection(selection) ||
         isCellSelection(selection) ||
         showAiMenuRef.current ||
+        showLinkMenuRef.current ||
         showCommentPopupRef?.current
       ) {
         return false;
@@ -147,7 +154,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       onHide: () => {
         setIsNodeSelectorOpen(false);
         setIsTextAlignmentOpen(false);
-        setIsLinkSelectorOpen(false);
         setIsColorSelectorOpen(false);
       },
     },
@@ -155,11 +161,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
 
   // Hide the bubble menu immediately when AI menu is shown
-  if (showAiMenu) return;
+  if (showAiMenu || showLinkMenu) return;
 
   return (
     <BubbleMenu
@@ -189,7 +194,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsOpen={() => {
             setIsNodeSelectorOpen(!isNodeSelectorOpen);
             setIsTextAlignmentOpen(false);
-            setIsLinkSelectorOpen(false);
             setIsColorSelectorOpen(false);
           }}
         />
@@ -200,7 +204,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsOpen={() => {
             setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
             setIsNodeSelectorOpen(false);
-            setIsLinkSelectorOpen(false);
             setIsColorSelectorOpen(false);
           }}
         />
@@ -224,16 +227,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           ))}
         </ActionIcon.Group>
 
-        <LinkSelector
-          editor={props.editor}
-          isOpen={isLinkSelectorOpen}
-          setIsOpen={(value) => {
-            setIsLinkSelectorOpen(value);
-            setIsNodeSelectorOpen(false);
-            setIsTextAlignmentOpen(false);
-            setIsColorSelectorOpen(false);
-          }}
-        />
+        <LinkSelector />
 
         <ColorSelector
           editor={props.editor}
@@ -242,7 +236,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             setIsColorSelectorOpen(!isColorSelectorOpen);
             setIsNodeSelectorOpen(false);
             setIsTextAlignmentOpen(false);
-            setIsLinkSelectorOpen(false);
           }}
         />
 

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

@@ -1,66 +1,25 @@
-import { Dispatch, FC, SetStateAction, useCallback } from "react";
+import { FC } from "react";
 import { IconLink } from "@tabler/icons-react";
-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 { ActionIcon, Tooltip } from "@mantine/core";
+import { useSetAtom } from "jotai";
 import { useTranslation } from "react-i18next";
+import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
 
-interface LinkSelectorProps {
-  editor: ReturnType<typeof useEditor>;
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const LinkSelector: FC<LinkSelectorProps> = ({
-  editor,
-  isOpen,
-  setIsOpen,
-}) => {
+export const LinkSelector: FC = () => {
   const { t } = useTranslation();
-  const onLink = useCallback(
-    (url: string) => {
-      setIsOpen(false);
-      editor
-        .chain()
-        .focus()
-        .setLink({ href: url })
-        .command(({ tr }) => {
-          tr.setSelection(TextSelection.create(tr.doc, tr.selection.to));
-          return true;
-        })
-        .run();
-    },
-    [editor, setIsOpen],
-  );
+  const setShowLinkMenu = useSetAtom(showLinkMenuAtom);
 
   return (
-    <Popover
-      width={300}
-      opened={isOpen}
-      trapFocus
-      offset={{ mainAxis: 35, crossAxis: 0 }}
-      withArrow
-    >
-      <Popover.Target>
-        <Tooltip label={t("Add link")} withArrow>
-          <ActionIcon
-            variant="default"
-            size="lg"
-            radius="0"
-            style={{
-              border: "none",
-            }}
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <IconLink size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Popover.Target>
-
-      <Popover.Dropdown>
-        <LinkEditorPanel onSetLink={onLink} />
-      </Popover.Dropdown>
-    </Popover>
+    <Tooltip label={t("Add link")} withArrow>
+      <ActionIcon
+        variant="default"
+        size="lg"
+        radius="0"
+        style={{ border: "none" }}
+        onClick={() => setShowLinkMenu(true)}
+      >
+        <IconLink size={16} />
+      </ActionIcon>
+    </Tooltip>
   );
 };

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

@@ -0,0 +1,159 @@
+import type { Editor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { IconMessage } from "@tabler/icons-react";
+import classes from "./bubble-menu.module.css";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import {
+  showReadOnlyCommentPopupAtom,
+  readOnlyCommentDataAtom,
+} from "@/features/comment/atoms/comment-atom";
+import { useTranslation } from "react-i18next";
+import { getRelativeSelection, ySyncPluginKey } from "@tiptap/y-tiptap";
+
+type ReadonlyBubbleMenuProps = {
+  editor: Editor;
+};
+
+export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
+  const { t } = useTranslation();
+  const [showReadOnlyCommentPopup, setShowReadOnlyCommentPopup] = useAtom(
+    showReadOnlyCommentPopupAtom,
+  );
+  const [, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const isInteractingRef = useRef(false);
+
+  const updateMenuPosition = useCallback(() => {
+    if (isInteractingRef.current) return;
+
+    const pmSelection = editor.state.selection;
+    if (!(pmSelection instanceof TextSelection) || pmSelection.empty) {
+      setVisible(false);
+      return;
+    }
+
+    const selection = window.getSelection();
+    if (
+      !selection ||
+      selection.isCollapsed ||
+      selection.rangeCount === 0 ||
+      showReadOnlyCommentPopup
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const editorDom = editor.view.dom;
+    if (
+      !editorDom.contains(selection.anchorNode) ||
+      !editorDom.contains(selection.focusNode)
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    if (rect.width === 0) {
+      setVisible(false);
+      return;
+    }
+
+    const editorRect = editorDom
+      .closest(".editor-container")
+      ?.getBoundingClientRect();
+    if (!editorRect) {
+      setVisible(false);
+      return;
+    }
+
+    setPosition({
+      top: rect.top - editorRect.top - 44,
+      left: rect.left - editorRect.left + rect.width / 2,
+    });
+    setVisible(true);
+  }, [editor, showReadOnlyCommentPopup]);
+
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      updateMenuPosition();
+    };
+
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+    };
+  }, [updateMenuPosition]);
+
+  useEffect(() => {
+    if (showReadOnlyCommentPopup) {
+      setVisible(false);
+    }
+  }, [showReadOnlyCommentPopup]);
+
+  const handleCommentClick = () => {
+    if (!editor) return;
+
+    const view = editor.view;
+    const ystate = ySyncPluginKey.getState(view.state);
+
+    if (ystate?.binding) {
+      const selection = getRelativeSelection(ystate.binding, view.state);
+      const { from, to } = editor.state.selection;
+      const selectedText = editor.state.doc.textBetween(from, to);
+
+      // @ts-ignore
+      setReadOnlyCommentData({
+        yjsSelection: {
+          anchor: selection.anchor,
+          head: selection.head,
+        },
+        selectedText,
+      });
+
+      setShowReadOnlyCommentPopup(true);
+      setVisible(false);
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        transform: "translateX(-50%)",
+        zIndex: 199,
+      }}
+    >
+      <div className={classes.bubbleMenu}>
+        <Tooltip label={t("Comment")} withArrow withinPortal={false}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            radius="6px"
+            aria-label={t("Comment")}
+            style={{ border: "none" }}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              isInteractingRef.current = true;
+              handleCommentClick();
+              isInteractingRef.current = false;
+            }}
+          >
+            <IconMessage size={16} stroke={2} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

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

@@ -1,6 +1,7 @@
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
+import { uploadPdfAction } from "../pdf/upload-pdf-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
 import { Editor } from "@tiptap/core";
@@ -12,6 +13,8 @@ import {
 const ATTACHMENT_NODE_TYPES = [
   "image",
   "video",
+  "audio",
+  "pdf",
   "attachment",
   "excalidraw",
   "drawio",
@@ -63,6 +66,7 @@ export const handlePaste = (
       const pos = editor.state.selection.from;
       uploadImageAction(file, editor, pos, pageId);
       uploadVideoAction(file, editor, pos, pageId);
+      uploadPdfAction(file, editor, pos, pageId);
       uploadAttachmentAction(file, editor, pos, pageId);
     }
     return true;
@@ -229,6 +233,7 @@ export const handleFileDrop = (
 
       uploadImageAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
       uploadVideoAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
+      uploadPdfAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
       uploadAttachmentAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
     }
     return true;

apps/client/src/features/editor/components/common/node-resize-handles.ts

@@ -1,5 +1,5 @@
-import type { ResizableNodeViewDirection } from "@tiptap/core";
 import classes from "./node-resize.module.css";
+import { ResizableNodeViewDirection } from "@docmost/editor-ext";
 
 export function createResizeHandle(
   direction: ResizableNodeViewDirection,

apps/client/src/features/editor/components/common/resizable-wrapper.module.css

@@ -20,8 +20,8 @@
 
 .cornerHandle {
   position: absolute;
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   z-index: 2;
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -42,13 +42,13 @@
   }
 
   &::before {
-    width: 28px;
+    width: 20px;
     height: 3px;
   }
 
   &::after {
     width: 3px;
-    height: 28px;
+    height: 20px;
   }
 
   &:hover::before,

apps/client/src/features/editor/components/common/resizable-wrapper.tsx

@@ -74,6 +74,15 @@ export const ResizableWrapper: React.FC<ResizableWrapperProps> = ({
   const constraintsRef = useRef({ minWidth, maxWidth, minHeight, maxHeight });
   constraintsRef.current = { minWidth, maxWidth, minHeight, maxHeight };
 
+  useEffect(() => {
+    if (!dragRef.current && wrapperRef.current) {
+      widthRef.current = initialWidth;
+      heightRef.current = initialHeight;
+      wrapperRef.current.style.width = `${initialWidth}px`;
+      wrapperRef.current.style.height = `${initialHeight}px`;
+    }
+  }, [initialWidth, initialHeight]);
+
   const handleMouseMove = useRef((e: MouseEvent) => {
     const drag = dragRef.current;
     if (!drag || !wrapperRef.current) return;

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

@@ -1,6 +1,6 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import {
   EditorMenuProps,
@@ -8,7 +8,9 @@ import {
 } from "@/features/editor/components/table/types/types.ts";
 import {
   ActionIcon,
+  LoadingOverlay,
   Modal,
+  Text,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
@@ -29,10 +31,12 @@ import {
   DrawIoEmbed,
   DrawIoEmbedRef,
   EventExit,
+  EventExport,
   EventSave,
 } from "react-drawio";
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
+import { modals } from "@mantine/modals";
 import classes from "../common/toolbar-menu.module.css";
 
 export function DrawioMenu({ editor }: EditorMenuProps) {
@@ -41,6 +45,10 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
   const [initialXML, setInitialXML] = useState<string>("");
   const drawioRef = useRef<DrawIoEmbedRef>(null);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const editorState = useEditorState({
     editor,
@@ -131,33 +139,14 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     editor.commands.deleteSelection();
   }, [editor]);
 
-  const handleOpen = useCallback(async () => {
-    if (!editorState?.src) return;
+  const saveData = useCallback(async (svgXml: string) => {
+    if (isSavingRef.current) return;
+
+    isSavingRef.current = true;
+    setIsSaving(true);
 
     try {
-      const url = getFileUrl(editorState.src);
-      const request = await fetch(url, {
-        credentials: "include",
-        cache: "no-store",
-      });
-      const blob = await request.blob();
-
-      const reader = new FileReader();
-      reader.readAsDataURL(blob);
-      reader.onloadend = () => {
-        const base64data = (reader.result || "") as string;
-        setInitialXML(base64data);
-      };
-    } catch (err) {
-      console.error(err);
-    } finally {
-      open();
-    }
-  }, [editorState?.src, open]);
-
-  const handleSave = useCallback(
-    async (data: EventSave) => {
-      const svgString = decodeBase64ToSvgString(data.xml);
+      const svgString = decodeBase64ToSvgString(svgXml);
       const fileName = "diagram.drawio.svg";
       const drawioSVGFile = await svgStringToFile(svgString, fileName);
 
@@ -179,10 +168,88 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         attachmentId: attachment.id,
       });
 
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+      setIsSaving(false);
+    }
+  }, [editor, editorState?.attachmentId]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
       close();
-    },
-    [editor, editorState?.attachmentId, close],
-  );
+      return;
+    }
+
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
+    });
+  }, [close, t]);
+
+  const handleOpen = useCallback(async () => {
+    if (!editorState?.src) return;
+
+    setIsLoading(true);
+    try {
+      const url = getFileUrl(editorState.src);
+      const request = await fetch(url, {
+        credentials: "include",
+        cache: "no-store",
+      });
+      const blob = await request.blob();
+
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = (reader.result || "") as string;
+        setInitialXML(base64data);
+      };
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+      isDirtyRef.current = false;
+      open();
+    }
+  }, [editorState?.src, open]);
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
+        drawioRef.current.exportDiagram({ format: "xmlsvg" });
+      }
+    }, 60_000);
+
+    return () => clearInterval(interval);
+  }, [opened]);
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [opened, handleClose]);
 
   return (
     <>
@@ -247,6 +314,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Edit")}
               variant="subtle"
+              loading={isLoading}
             >
               <IconEdit size={18} />
             </ActionIcon>
@@ -276,15 +344,17 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         </div>
       </BaseBubbleMenu>
 
-      <Modal.Root opened={opened} onClose={close} fullScreen>
+      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
-          <Modal.Body>
+          <Modal.Body pos="relative">
+            <LoadingOverlay visible={isSaving} />
             <div style={{ height: "100vh" }}>
               <DrawIoEmbed
                 ref={drawioRef}
                 xml={initialXML}
                 baseUrl={getDrawioUrl()}
+                autosave
                 urlParameters={{
                   ui: computedColorScheme === "light" ? "kennedy" : "dark",
                   spin: true,
@@ -296,13 +366,19 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
                   if (data.parentEvent !== "save") {
                     return;
                   }
-                  handleSave(data);
+                  saveData(data.xml).then(() => close()).catch(() => {});
                 }}
                 onClose={(data: EventExit) => {
                   if (data.parentEvent) {
                     return;
                   }
-                  close();
+                  handleClose();
+                }}
+                onAutoSave={() => {
+                  isDirtyRef.current = true;
+                }}
+                onExport={(data: EventExport) => {
+                  saveData(data.data).catch(() => {});
                 }}
               />
             </div>

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

@@ -2,11 +2,12 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import {
   ActionIcon,
   Card,
+  LoadingOverlay,
   Modal,
   Text,
   useComputedColorScheme,
 } from "@mantine/core";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { useDisclosure } from "@mantine/hooks";
 import { getDrawioUrl } from "@/lib/config.ts";
@@ -14,6 +15,7 @@ import {
   DrawIoEmbed,
   DrawIoEmbedRef,
   EventExit,
+  EventExport,
   EventSave,
 } from "react-drawio";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
@@ -21,6 +23,7 @@ import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import { modals } from "@mantine/modals";
 
 export default function DrawioView(props: NodeViewProps) {
   const { t } = useTranslation();
@@ -30,50 +33,121 @@ export default function DrawioView(props: NodeViewProps) {
   const [initialXML, setInitialXML] = useState<string>("");
   const [opened, { open, close }] = useDisclosure(false);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   const handleOpen = async () => {
     if (!editor.isEditable) {
       return;
     }
+    isDirtyRef.current = false;
     open();
   };
 
-  const handleSave = async (data: EventSave) => {
-    const svgString = decodeBase64ToSvgString(data.xml);
-    const fileName = "diagram.drawio.svg";
-    const drawioSVGFile = await svgStringToFile(svgString, fileName);
+  const saveData = async (svgXml: string, updateSrc = true) => {
+    if (isSavingRef.current) return;
 
-    //@ts-ignore
-    const pageId = editor.storage?.pageId;
+    isSavingRef.current = true;
+    setIsSaving(true);
 
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(drawioSVGFile, pageId);
+    try {
+      const svgString = decodeBase64ToSvgString(svgXml);
+      const fileName = "diagram.drawio.svg";
+      const drawioSVGFile = await svgStringToFile(svgString, fileName);
+
+      //@ts-ignore
+      const pageId = editor.storage?.pageId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(drawioSVGFile, pageId);
+      }
+
+      if (updateSrc) {
+        updateAttributes({
+          src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+          title: attachment.fileName,
+          size: attachment.fileSize,
+          attachmentId: attachment.id,
+        });
+      } else {
+        updateAttributes({
+          attachmentId: attachment.id,
+        });
+      }
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+      setIsSaving(false);
+    }
+  };
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    updateAttributes({
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
     });
+  }, [close, t]);
 
-    close();
-  };
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
+        drawioRef.current.exportDiagram({ format: "xmlsvg" });
+      }
+    }, 30_000);
+
+    return () => clearInterval(interval);
+  }, [opened]);
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [opened, handleClose]);
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <Modal.Root opened={opened} onClose={close} fullScreen>
+      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
-          <Modal.Body>
+          <Modal.Body pos="relative">
+            <LoadingOverlay visible={isSaving} />
             <div style={{ height: "100vh" }}>
               <DrawIoEmbed
                 ref={drawioRef}
                 xml={initialXML}
                 baseUrl={getDrawioUrl()}
+                autosave
                 urlParameters={{
                   ui: computedColorScheme === "light" ? "kennedy" : "dark",
                   spin: true,
@@ -85,13 +159,19 @@ export default function DrawioView(props: NodeViewProps) {
                   if (data.parentEvent !== "save") {
                     return;
                   }
-                  handleSave(data);
+                  saveData(data.xml, true).then(() => close()).catch(() => {});
                 }}
                 onClose={(data: EventExit) => {
                   if (data.parentEvent) {
                     return;
                   }
-                  close();
+                  handleClose();
+                }}
+                onAutoSave={() => {
+                  isDirtyRef.current = true;
+                }}
+                onExport={(data: EventExport) => {
+                  saveData(data.data, false).catch(() => {});
                 }}
               />
             </div>

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

@@ -86,8 +86,8 @@ export default function EmbedView(props: NodeViewProps) {
       {embedUrl ? (
         <div className={classes.embedContainer}>
           <ResizableWrapper
-            initialWidth={nodeWidth || 640}
-            initialHeight={nodeHeight || 480}
+            initialWidth={nodeWidth || 800}
+            initialHeight={nodeHeight || 600}
             minWidth={200}
             maxWidth={1200}
             minHeight={200}
@@ -102,8 +102,9 @@ export default function EmbedView(props: NodeViewProps) {
             <iframe
               className={classes.embedIframe}
               src={sanitizeUrl(embedUrl)}
-              allow="encrypted-media"
-              sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+              allow="encrypted-media; clipboard-read; clipboard-write; picture-in-picture;"
+              loading="lazy"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
               allowFullScreen
               frameBorder="0"
             />

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

@@ -1,6 +1,6 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { lazy, Suspense, useCallback, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import {
   EditorMenuProps,
@@ -10,9 +10,11 @@ import {
   ActionIcon,
   Button,
   Group,
+  Text,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import { useDisclosure } from "@mantine/hooks";
 import clsx from "clsx";
 import {
@@ -52,6 +54,12 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   });
   const [excalidrawData, setExcalidrawData] = useState<any>(null);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const isInitialLoadRef = useRef(true);
+  const lastFingerprintRef = useRef("");
 
   const editorState = useEditorState({
     editor,
@@ -147,6 +155,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   const handleOpen = useCallback(async () => {
     if (!editorState?.src) return;
 
+    setIsLoading(true);
     try {
       const url = getFileUrl(editorState.src);
       const request = await fetch(url, {
@@ -160,57 +169,112 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     } catch (err) {
       console.error(err);
     } finally {
+      setIsLoading(false);
+      isDirtyRef.current = false;
+      isInitialLoadRef.current = true;
       open();
     }
   }, [editorState?.src, open]);
 
-  const handleSave = useCallback(async () => {
-    if (!excalidrawAPI) {
+  const saveData = useCallback(async () => {
+    if (!excalidrawAPI || isSavingRef.current) {
       return;
     }
 
-    const { exportToSvg } = await import("@excalidraw/excalidraw");
+    isSavingRef.current = true;
+    setIsSaving(true);
 
-    const svg = await exportToSvg({
-      elements: excalidrawAPI?.getSceneElements(),
-      appState: {
-        exportEmbedScene: true,
-        exportWithDarkMode: false,
-      },
-      files: excalidrawAPI?.getFiles(),
-    });
+    try {
+      const { exportToSvg } = await import("@excalidraw/excalidraw");
 
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svg);
+      const svg = await exportToSvg({
+        elements: excalidrawAPI?.getSceneElements(),
+        appState: {
+          exportEmbedScene: true,
+          exportWithDarkMode: false,
+        },
+        files: excalidrawAPI?.getFiles(),
+      });
 
-    svgString = svgString.replace(
-      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
-      "https://unpkg.com/@excalidraw/excalidraw@latest",
-    );
+      const serializer = new XMLSerializer();
+      let svgString = serializer.serializeToString(svg);
 
-    const fileName = "diagram.excalidraw.svg";
-    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
+      svgString = svgString.replace(
+        /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
+        "https://unpkg.com/@excalidraw/excalidraw@latest",
+      );
 
-    // @ts-ignore
-    const pageId = editor.storage?.pageId;
-    const attachmentId = editorState?.attachmentId;
+      const fileName = "diagram.excalidraw.svg";
+      const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
 
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(excalidrawSvgFile, pageId);
+      // @ts-ignore
+      const pageId = editor.storage?.pageId;
+      const attachmentId = editorState?.attachmentId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(excalidrawSvgFile, pageId);
+      }
+
+      editor.commands.updateAttributes("excalidraw", {
+        src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+        title: attachment.fileName,
+        size: attachment.fileSize,
+        attachmentId: attachment.id,
+      });
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+      setIsSaving(false);
+    }
+  }, [editor, excalidrawAPI, editorState?.attachmentId]);
+
+  const handleSaveAndExit = useCallback(async () => {
+    try {
+      await saveData();
+      close();
+    } catch {
+      // save failed, modal stays open
+    }
+  }, [saveData, close]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    editor.commands.updateAttributes("excalidraw", {
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
     });
+  }, [close, t]);
 
-    close();
-  }, [editor, excalidrawAPI, editorState?.attachmentId, close]);
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current) {
+        saveData().catch(() => {});
+      }
+    }, 60_000);
+
+    return () => clearInterval(interval);
+  }, [opened, saveData]);
 
   return (
     <>
@@ -281,6 +345,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               size="lg"
               aria-label={t("Edit")}
               variant="subtle"
+              loading={isLoading}
             >
               <IconEdit size={18} />
             </ActionIcon>
@@ -317,7 +382,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           zIndex: 200,
         }}
         isOpen={opened}
-        onRequestClose={close}
+        onRequestClose={handleClose}
         disableCloseOnBgClick={true}
         contentProps={{
           style: {
@@ -332,10 +397,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           bg="var(--mantine-color-body)"
           p="xs"
         >
-          <Button onClick={handleSave} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"} loading={isSaving}>
             {t("Save & Exit")}
           </Button>
-          <Button onClick={close} color="red" size={"compact-sm"}>
+          <Button onClick={handleClose} color="red" size={"compact-sm"}>
             {t("Exit")}
           </Button>
         </Group>
@@ -343,6 +408,18 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           <Suspense fallback={null}>
             <ExcalidrawComponent
               excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              onChange={(elements, _appState, files) => {
+                const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
+                if (isInitialLoadRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isInitialLoadRef.current = false;
+                  return;
+                }
+                if (fingerprint !== lastFingerprintRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isDirtyRef.current = true;
+                }
+              }}
               initialData={{
                 ...excalidrawData,
                 scrollToContent: true,

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

@@ -7,7 +7,14 @@ import {
   Text,
   useComputedColorScheme,
 } from "@mantine/core";
-import { lazy, Suspense, useState } from "react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { svgStringToFile } from "@/lib";
 import { useDisclosure } from "@mantine/hooks";
@@ -20,6 +27,7 @@ import { IconEdit } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
+import { modals } from "@mantine/modals";
 
 const ExcalidrawComponent = lazy(() =>
   import("@excalidraw/excalidraw").then((module) => ({
@@ -42,59 +50,125 @@ export default function ExcalidrawView(props: NodeViewProps) {
   const [opened, { open, close }] = useDisclosure(false);
   const computedColorScheme = useComputedColorScheme();
 
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const isInitialLoadRef = useRef(true);
+  const lastFingerprintRef = useRef("");
+
   const handleOpen = async () => {
     if (!editor.isEditable) {
       return;
     }
+    isDirtyRef.current = false;
+    isInitialLoadRef.current = true;
     open();
   };
 
-  const handleSave = async () => {
-    if (!excalidrawAPI) {
+  const saveData = useCallback(async (updateSrc = true) => {
+    if (!excalidrawAPI || isSavingRef.current) {
       return;
     }
 
-    const { exportToSvg } = await import("@excalidraw/excalidraw");
+    isSavingRef.current = true;
+    setIsSaving(true);
 
-    const svg = await exportToSvg({
-      elements: excalidrawAPI?.getSceneElements(),
-      appState: {
-        exportEmbedScene: true,
-        exportWithDarkMode: false,
-      },
-      files: excalidrawAPI?.getFiles(),
-    });
+    try {
+      const { exportToSvg } = await import("@excalidraw/excalidraw");
 
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svg);
+      const svg = await exportToSvg({
+        elements: excalidrawAPI?.getSceneElements(),
+        appState: {
+          exportEmbedScene: true,
+          exportWithDarkMode: false,
+        },
+        files: excalidrawAPI?.getFiles(),
+      });
 
-    svgString = svgString.replace(
-      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
-      "https://unpkg.com/@excalidraw/excalidraw@latest",
-    );
+      const serializer = new XMLSerializer();
+      let svgString = serializer.serializeToString(svg);
 
-    const fileName = "diagram.excalidraw.svg";
-    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
+      svgString = svgString.replace(
+        /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
+        "https://unpkg.com/@excalidraw/excalidraw@latest",
+      );
 
-    // @ts-ignore
-    const pageId = editor.storage?.pageId;
+      const fileName = "diagram.excalidraw.svg";
+      const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
 
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(excalidrawSvgFile, pageId);
+      // @ts-ignore
+      const pageId = editor.storage?.pageId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(excalidrawSvgFile, pageId);
+      }
+
+      if (updateSrc) {
+        updateAttributes({
+          src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+          title: attachment.fileName,
+          size: attachment.fileSize,
+          attachmentId: attachment.id,
+        });
+      } else {
+        updateAttributes({
+          attachmentId: attachment.id,
+        });
+      }
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+      setIsSaving(false);
+    }
+  }, [excalidrawAPI, editor, attachmentId, updateAttributes]);
+
+  const handleSaveAndExit = useCallback(async () => {
+    try {
+      await saveData();
+      close();
+    } catch {
+      /* empty */
+    }
+  }, [saveData, close]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    updateAttributes({
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
     });
+  }, [close, t]);
 
-    close();
-  };
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current) {
+        saveData(false).catch(() => {});
+      }
+    }, 30_000);
+
+    return () => clearInterval(interval);
+  }, [opened, saveData]);
 
   return (
     <NodeViewWrapper data-drag-handle>
@@ -105,7 +179,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
           zIndex: 200,
         }}
         isOpen={opened}
-        onRequestClose={close}
+        onRequestClose={handleClose}
         disableCloseOnBgClick={true}
         contentProps={{
           style: {
@@ -120,10 +194,10 @@ export default function ExcalidrawView(props: NodeViewProps) {
           bg="var(--mantine-color-body)"
           p="xs"
         >
-          <Button onClick={handleSave} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"} loading={isSaving}>
             {t("Save & Exit")}
           </Button>
-          <Button onClick={close} color="red" size={"compact-sm"}>
+          <Button onClick={handleClose} color="red" size={"compact-sm"}>
             {t("Exit")}
           </Button>
         </Group>
@@ -131,6 +205,18 @@ export default function ExcalidrawView(props: NodeViewProps) {
           <Suspense fallback={null}>
             <ExcalidrawComponent
               excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              onChange={(elements, _appState, files) => {
+                const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
+                if (isInitialLoadRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isInitialLoadRef.current = false;
+                  return;
+                }
+                if (fingerprint !== lastFingerprintRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isDirtyRef.current = true;
+                }
+              }}
               initialData={{
                 ...excalidrawData,
                 scrollToContent: true,

apps/client/src/features/editor/components/image/image-view.module.css

@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {

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

@@ -33,6 +33,7 @@ export default function ImageView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.imageWrapper,
+          !src && placeholder && classes.skeleton,
           alignClass,
         )}
         style={{
@@ -54,7 +55,7 @@ export default function ImageView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" bottom={6} right={6} />
           </Group>
         )}
-        {!src && !previewSrc && (
+        {!src && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">

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

@@ -1,36 +1,200 @@
-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,
   initialUrl,
+  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 : 3,
+    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}
-          />
-          <Button p={"xs"} type="submit" disabled={!state.isValidUrl}>
-            {t("Save")}
-          </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}
+          data-autofocus
+          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>
   );
 };

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

@@ -1,103 +1,114 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-import React, { useCallback, useState } from "react";
+import { FC, useCallback, useEffect, useRef } from "react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import type { Editor } from "@tiptap/react";
+import { useAtom } from "jotai";
+import { isTextSelected } from "@docmost/editor-ext";
+import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
+import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel";
+import { normalizeUrl } from "@/lib/utils";
 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";
+import { Paper } from "@mantine/core";
 
-export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
-  const [showEdit, setShowEdit] = useState(false);
+type EditorLinkMenuProps = {
+  editor: Editor;
+};
 
-  const shouldShow = useCallback(() => {
-    return editor.isActive("link");
-  }, [editor]);
+export const EditorLinkMenu: FC<EditorLinkMenuProps> = ({ editor }) => {
+  const [showLinkMenu, setShowLinkMenu] = useAtom(showLinkMenuAtom);
+  const showLinkMenuRef = useRef(showLinkMenu);
 
-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-      const link = ctx.editor.getAttributes("link");
-      return {
-        href: link.href,
-      };
-    },
-  });
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const handleEdit = useCallback(() => {
-    setShowEdit(true);
+  useEffect(() => {
+    showLinkMenuRef.current = showLinkMenu;
+    if (showLinkMenu) {
+      editor.commands.focus();
+    }
+  }, [showLinkMenu, editor]);
+
+  const focusInput = useCallback(() => {
+    requestAnimationFrame(() => {
+      containerRef.current
+        ?.querySelector<HTMLInputElement>("input")
+        ?.focus({ preventScroll: true });
+    });
   }, []);
 
   const onSetLink = useCallback(
-    (url: string) => {
+    (url: string, internal?: boolean) => {
       editor
         .chain()
         .focus()
-        .extendMarkRange("link")
-        .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;
         })
         .run();
-      setShowEdit(false);
+      setShowLinkMenu(false);
     },
-    [editor],
+    [editor, setShowLinkMenu],
   );
 
-  const onUnsetLink = useCallback(() => {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    setShowEdit(false);
-    return null;
-  }, [editor]);
+  useEffect(() => {
+    if (!showLinkMenu) return;
 
-  const onShowEdit = useCallback(() => {
-    setShowEdit(true);
-  }, []);
+    const dismiss = () => {
+      setShowLinkMenu(false);
+      editor.commands.focus();
+      editor.commands.setTextSelection(editor.state.selection.to);
+    };
 
-  const onHideEdit = useCallback(() => {
-    setShowEdit(false);
-  }, []);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        dismiss();
+      }
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        dismiss();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [showLinkMenu, setShowLinkMenu]);
+
+  if (!showLinkMenu) return null;
 
   return (
-    <BaseBubbleMenu
+    <BubbleMenu
       editor={editor}
-      pluginKey={`link-menu`}
-      updateDelay={0}
-      options={{
-        onHide: () => {
-          setShowEdit(false);
-        },
-        placement: "bottom",
-        offset: 5,
-        // zIndex: 101,
+      shouldShow={({ editor, state }) => {
+        const { empty } = state.selection;
+        return (
+          showLinkMenuRef.current &&
+          editor.isEditable &&
+          !empty &&
+          isTextSelected(editor)
+        );
       }}
-      shouldShow={shouldShow}
+      options={{
+        placement: "bottom",
+        offset: 8,
+        onShow: focusInput,
+        onHide: () => {
+          setShowLinkMenu(false);
+        },
+      }}
+      style={{ zIndex: 198, position: "relative" }}
     >
-      {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>
+      <Paper ref={containerRef} w={320} p="sm" shadow="md" radius={6} withBorder>
+        <LinkEditorPanel onSetLink={onSetLink} />
+      </Paper>
+    </BubbleMenu>
   );
-}
-
-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,578 @@
+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";
+import { normalizeUrl } from "@/lib/utils";
+
+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 {
-    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;
+}
+
+.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/components/mention/mention-list.tsx

@@ -62,7 +62,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     query: props.query,
     includeUsers: true,
     includePages: true,
-    spaceId: space.id,
+    spaceId: space?.id,
     limit: props.query ? 10 : 5,
     preload: true,
   });
@@ -294,6 +294,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
         w={popupWidth}
         scrollbars={"y"}
         scrollbarSize={6}
+        overscrollBehavior={"contain"}
         styles={{ content: { minWidth: 0 } }}
       >
         {renderItems?.map((item, index) => {

apps/client/src/features/editor/components/mention/mention-suggestion.ts

@@ -53,8 +53,8 @@ const mentionRenderItems = () => {
       const editorDom = props.editor?.view?.dom;
       const asideEl = editorDom?.closest(".mantine-AppShell-aside");
       const dialogEl = editorDom?.closest("[data-comment-dialog]");
-      const isInCommentContext = !!(asideEl || dialogEl);
-     // const isInCommentContext = !!asideEl;
+      const chatInput = editorDom?.closest("[data-chat-input]");
+      const isInCommentContext = !!(asideEl || dialogEl || chatInput);
 
       component = new ReactRenderer(MentionList, {
         props: { ...props, isInCommentContext },

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

@@ -3,6 +3,7 @@ import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
 import {
   buildPageUrl,
   buildSharedPageUrl,
@@ -13,17 +14,23 @@ import classes from "./mention.module.css";
 export default function MentionView(props: NodeViewProps) {
   const { node } = props;
   const { label, entityType, entityId, slugId, anchorId } = node.attrs;
+  const isPageMention = entityType === "page";
   const { spaceSlug, pageSlug } = useParams();
   const { shareId } = useParams();
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const isShareRoute = location.pathname.startsWith("/share");
+
   const {
     data: page,
     isLoading,
     isError,
-  } = usePageQuery({ pageId: entityType === "page" ? slugId : null });
+  } = usePageQuery({ pageId: isPageMention && !isShareRoute ? slugId : null });
 
-  const location = useLocation();
-  const isShareRoute = location.pathname.startsWith("/share");
+  const { data: sharedPage } = useSharePageQuery({
+    pageId: isPageMention && isShareRoute ? slugId : undefined,
+  });
 
   const currentPageSlugId = extractPageSlugId(pageSlug);
   const isSamePage = currentPageSlugId === slugId;
@@ -39,10 +46,12 @@ export default function MentionView(props: NodeViewProps) {
     }
   };
 
+  const sharePageTitle = sharedPage?.page?.title || label;
+
   const shareSlugUrl = buildSharedPageUrl({
     shareId,
     pageSlugId: slugId,
-    pageTitle: label,
+    pageTitle: sharePageTitle,
     anchorId,
   });
 
@@ -54,21 +63,59 @@ export default function MentionView(props: NodeViewProps) {
         </Text>
       )}
 
-      {entityType === "page" && isError && (
-        <Text component="span" c="dimmed" size="sm">
-          {label}
-        </Text>
-      )}
-
-      {entityType === "page" && !isError && (
+      {isPageMention && isShareRoute && (
         <Anchor
           component={Link}
           fw={500}
-          to={
-            isShareRoute
-              ? shareSlugUrl
-              : buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)
-          }
+          to={shareSlugUrl}
+          onClick={handleClick}
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            component="span"
+            size={18}
+            style={{ verticalAlign: "text-bottom" }}
+          >
+            <IconFileDescription size={18} />
+          </ActionIcon>
+          <span className={classes.pageMentionText}>
+            {sharePageTitle}
+          </span>
+        </Anchor>
+      )}
+
+      {isPageMention && !isShareRoute && isError && (
+        <Anchor
+          component={Link}
+          fw={500}
+          to={buildPageUrl(spaceSlug, slugId, label, anchorId)}
+          onClick={handleClick}
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            component="span"
+            size={18}
+            style={{ verticalAlign: "text-bottom" }}
+          >
+            <IconFileDescription size={18} />
+          </ActionIcon>
+          <span className={classes.pageMentionText}>
+            {label}
+          </span>
+        </Anchor>
+      )}
+
+      {isPageMention && !isShareRoute && !isError && (
+        <Anchor
+          component={Link}
+          fw={500}
+          to={buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)}
           onClick={handleClick}
           underline="never"
           className={classes.pageMentionLink}

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

@@ -0,0 +1,145 @@
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
+import { useCallback } from "react";
+import { Node as PMNode } from "@tiptap/pm/model";
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from "@/features/editor/components/table/types/types.ts";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+  IconPaperclip,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "../common/toolbar-menu.module.css";
+
+export function PdfMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const pdfAttrs = ctx.editor.getAttributes("pdf");
+
+      return {
+        isPdf: ctx.editor.isActive("pdf"),
+        src: pdfAttrs?.src || null,
+        name: pdfAttrs?.name || null,
+        attachmentId: pdfAttrs?.attachmentId || null,
+      };
+    },
+  });
+
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state || !editor.isActive("pdf")) {
+        return false;
+      }
+
+      const { selection } = state;
+      const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
+      if (!dom) return false;
+
+      return !!dom.querySelector("[data-pdf-error]");
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "pdf";
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
+    }
+
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor]);
+
+  const handleConvertToAttachment = useCallback(() => {
+    if (!editorState?.src) return;
+
+    const { selection } = editor.state;
+    const { from } = selection;
+    const node = editor.state.doc.nodeAt(from);
+    if (!node || node.type.name !== "pdf") return;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from, to: from + node.nodeSize },
+        {
+          type: "attachment",
+          attrs: {
+            url: node.attrs.src,
+            name: node.attrs.name,
+            attachmentId: node.attrs.attachmentId,
+            size: node.attrs.size,
+            mime: "application/pdf",
+          },
+        },
+      )
+      .run();
+  }, [editor, editorState]);
+
+  const handleDelete = useCallback(() => {
+    editor.commands.deleteSelection();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`pdf-menu`}
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Convert to attachment")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleConvertToAttachment}
+            size="lg"
+            aria-label={t("Convert to attachment")}
+            variant="subtle"
+          >
+            <IconPaperclip size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip position="top" label={t("Delete")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDelete}
+            size="lg"
+            aria-label={t("Delete")}
+            variant="subtle"
+          >
+            <IconTrash size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default PdfMenu;

apps/client/src/features/editor/components/pdf/pdf-view.module.css

@@ -0,0 +1,100 @@
+.pdfWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeleton {
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
+
+.pdfContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.pdfResizeWrapper {
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.pdfIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+}
+
+.hoverMenu {
+  position: absolute;
+  top: 56px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 6px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.hoverMenu::before {
+  content: "";
+  position: absolute;
+  inset: -12px;
+}
+
+.hoverMenu:hover {
+  opacity: 1;
+}
+
+.pdfResizeWrapper:hover .hoverMenu {
+  opacity: 1;
+}
+
+.pdfError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 32px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+  }
+}

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

@@ -0,0 +1,170 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, Group, Loader, Text, Tooltip } from "@mantine/core";
+import { useCallback, useMemo, useState } from "react";
+import { getFileUrl } from "@/lib/config.ts";
+import { ResizableWrapper } from "../common/resizable-wrapper";
+import clsx from "clsx";
+import classes from "./pdf-view.module.css";
+import { useTranslation } from "react-i18next";
+import { isInternalFileUrl } from "@docmost/editor-ext";
+import {
+  IconFileTypePdf,
+  IconPaperclip,
+  IconTrash,
+} from "@tabler/icons-react";
+
+export default function PdfView(props: NodeViewProps) {
+  const { t } = useTranslation();
+  const { editor, node, getPos, selected, updateAttributes } = props;
+  const { src, placeholder, width: nodeWidth, height: nodeHeight } = node.attrs;
+  const [hasError, setHasError] = useState(false);
+
+  const safeSrc = useMemo(() => {
+    if (!src || !isInternalFileUrl(src)) return null;
+    return getFileUrl(src);
+  }, [src]);
+
+  const handleSelect = useCallback(() => {
+    const pos = getPos();
+    if (pos !== undefined) {
+      editor.commands.setNodeSelection(pos);
+    }
+  }, [editor, getPos]);
+
+  const handleResize = useCallback(
+    (newWidth: number, newHeight: number) => {
+      updateAttributes({ width: newWidth, height: newHeight });
+    },
+    [updateAttributes],
+  );
+
+  const handleConvertToAttachment = useCallback(() => {
+    if (!src) return;
+    const pos = getPos();
+    if (pos === undefined) return;
+    const currentNode = editor.state.doc.nodeAt(pos);
+    if (!currentNode || currentNode.type.name !== "pdf") return;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from: pos, to: pos + currentNode.nodeSize },
+        {
+          type: "attachment",
+          attrs: {
+            url: currentNode.attrs.src,
+            name: currentNode.attrs.name,
+            attachmentId: currentNode.attrs.attachmentId,
+            size: currentNode.attrs.size,
+            mime: "application/pdf",
+          },
+        },
+      )
+      .run();
+  }, [editor, src, getPos]);
+
+  const handleDelete = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined) return;
+    editor.commands.setNodeSelection(pos);
+    editor.commands.deleteSelection();
+  }, [editor, getPos]);
+
+  if (!src || !safeSrc) {
+    return (
+      <NodeViewWrapper data-drag-handle>
+        <div className={`${classes.pdfWrapper} ${placeholder ? classes.skeleton : ''}`} style={{ height: placeholder ? 600 : undefined }}>
+          {placeholder && (
+            <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+              <Loader size={20} style={{ flexShrink: 0 }} />
+              <Text component="span" size="sm" truncate="end">
+                {placeholder?.name
+                  ? t("Uploading {{name}}", { name: placeholder.name })
+                  : t("Uploading file")}
+              </Text>
+            </Group>
+          )}
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <NodeViewWrapper data-drag-handle>
+        <div data-pdf-error className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })} onClick={handleSelect}>
+          <IconFileTypePdf size={32} stroke={1.5} />
+          <Text size="sm" c="dimmed">
+            {t("Failed to load PDF")}
+          </Text>
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper data-drag-handle className={classes.pdfNodeView}>
+      <div className={classes.pdfContainer}>
+        <ResizableWrapper
+          initialWidth={nodeWidth || 800}
+          initialHeight={nodeHeight || 600}
+          minWidth={200}
+          maxWidth={1200}
+          minHeight={200}
+          maxHeight={1200}
+          onResize={handleResize}
+          isEditable={editor.isEditable}
+          selected={selected}
+          className={clsx(classes.pdfResizeWrapper, {
+            "ProseMirror-selectednode": selected,
+          })}
+        >
+          <iframe
+            className={classes.pdfIframe}
+            src={safeSrc}
+            loading="lazy"
+            frameBorder="0"
+            onError={() => setHasError(true)}
+            onLoad={(e) => {
+              try {
+                const iframe = e.currentTarget;
+                const status = iframe.contentDocument?.querySelector("pre")?.textContent;
+                if (status && status.includes('"statusCode":404')) {
+                  setHasError(true);
+                }
+              } catch {
+                // cross-origin - can't inspect, assume OK
+              }
+            }}
+          />
+          {editor.isEditable && (
+            <div className={classes.hoverMenu}>
+              <Tooltip position="top" label={t("Convert to attachment")} withinPortal>
+                <ActionIcon
+                  size="sm"
+                  variant="filled"
+                  color="dark"
+                  onClick={handleConvertToAttachment}
+                  aria-label={t("Convert to attachment")}
+                >
+                  <IconPaperclip size={14} />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip position="top" label={t("Delete")} withinPortal>
+                <ActionIcon
+                  size="sm"
+                  variant="filled"
+                  color="dark"
+                  onClick={handleDelete}
+                  aria-label={t("Delete")}
+                >
+                  <IconTrash size={14} />
+                </ActionIcon>
+              </Tooltip>
+            </div>
+          )}
+        </ResizableWrapper>
+      </div>
+    </NodeViewWrapper>
+  );
+}

apps/client/src/features/editor/components/pdf/upload-pdf-action.tsx

@@ -0,0 +1,36 @@
+import { handlePdfUpload } from "@docmost/editor-ext";
+import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+import { getFileUploadSizeLimit } from "@/lib/config.ts";
+import { formatBytes } from "@/lib";
+import i18n from "@/i18n.ts";
+
+export const uploadPdfAction = handlePdfUpload({
+  onUpload: async (file: File, pageId: string): Promise<any> => {
+    try {
+      return await uploadFile(file, pageId);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
+      throw err;
+    }
+  },
+  validateFn: (file) => {
+    if (file.type !== "application/pdf") {
+      return false;
+    }
+
+    if (file.size > getFileUploadSizeLimit()) {
+      notifications.show({
+        color: "red",
+        message: i18n.t("File exceeds the {{limit}} attachment limit", {
+          limit: formatBytes(getFileUploadSizeLimit()),
+        }),
+      });
+      return false;
+    }
+    return true;
+  },
+});

apps/client/src/features/editor/components/slash-menu/command-list.tsx

@@ -87,7 +87,13 @@ const CommandList = ({
 
   return flatItems.length > 0 ? (
     <Paper id="slash-command" shadow="md" p="xs" withBorder>
-      <ScrollArea viewportRef={viewportRef} h={350} w={270} scrollbarSize={8}>
+      <ScrollArea
+        viewportRef={viewportRef}
+        h={350}
+        w={270}
+        scrollbarSize={8}
+        overscrollBehavior="contain"
+      >
         {Object.entries(items).map(([category, categoryItems]) => (
           <div key={category}>
             <Text c="dimmed" mb={4} fw={500} tt="capitalize">
@@ -103,10 +109,7 @@ const CommandList = ({
                 })}
               >
                 <Group>
-                  <ActionIcon
-                    variant="default"
-                    component="div"
-                  >
+                  <ActionIcon variant="default" component="div">
                     <item.icon size={18} />
                   </ActionIcon>
 

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -12,7 +12,9 @@ import {
   IconMath,
   IconMathFunction,
   IconMovie,
+  IconMusic,
   IconPaperclip,
+  IconFileTypePdf,
   IconPhoto,
   IconTable,
   IconTypography,
@@ -30,7 +32,9 @@ import {
 } from "@/features/editor/components/slash-menu/types";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action.tsx";
 import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action.tsx";
+import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action.tsx";
 import IconExcalidraw from "@/components/icons/icon-excalidraw";
 import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
@@ -161,7 +165,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Image",
       description: "Upload any image from your device.",
-      searchTerms: ["photo", "picture", "media"],
+      searchTerms: ["photo", "picture", "media", "file", "attachment"],
       icon: IconPhoto,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -194,7 +198,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Video",
       description: "Upload any video from your device.",
-      searchTerms: ["video", "mp4", "media"],
+      searchTerms: ["video", "mp4", "media", "file", "attachment"],
       icon: IconMovie,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -224,10 +228,74 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         input.click();
       },
     },
+    {
+      title: "Audio",
+      description: "Upload any audio from your device.",
+      searchTerms: ["audio", "music", "sound", "mp3", "media", "file", "attachment"],
+      icon: IconMusic,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        // @ts-ignore
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        // upload audio
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "audio/*";
+        input.multiple = true;
+        input.style.display = "none";
+        document.body.appendChild(input);
+        input.onchange = async () => {
+          if (input.files?.length) {
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadAudioAction(file, editor, pos, pageId);
+            }
+          }
+
+          input.remove();
+        };
+        input.click();
+      },
+    },
+    {
+      title: "Embed PDF",
+      description: "Upload and embed a PDF file.",
+      searchTerms: ["pdf", "document", "embed"],
+      icon: IconFileTypePdf,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        // @ts-ignore
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "application/pdf";
+        input.style.display = "none";
+        document.body.appendChild(input);
+        input.onchange = async () => {
+          if (input.files?.length) {
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadPdfAction(file, editor, pos, pageId);
+            }
+          }
+
+          input.remove();
+        };
+        input.click();
+      },
+    },
     {
       title: "File attachment",
       description: "Upload any file from your device.",
-      searchTerms: ["file", "attachment", "upload", "pdf", "csv", "zip"],
+      searchTerms: ["file", "attachment", "upload", "csv", "zip"],
       icon: IconPaperclip,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -351,7 +419,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run(),
     },
     {
-      title: "Draw.io (diagrams.net) ",
+      title: "Draw.io (diagrams.net)",
       description: "Insert and design Drawio diagrams",
       searchTerms: ["drawio", "diagrams", "charts", "uml", "whiteboard"],
       icon: IconDrawio,
@@ -359,7 +427,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         editor.chain().focus().deleteRange(range).setDrawio().run(),
     },
     {
-      title: "Excalidraw diagram",
+      title: "Excalidraw (Whiteboard)",
       description: "Draw and sketch excalidraw diagrams",
       searchTerms: ["diagrams", "draw", "sketch", "whiteboard"],
       icon: IconExcalidraw,
@@ -548,7 +616,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "YouTube",
       description: "Embed YouTube video",
-      searchTerms: ["youtube", "yt"],
+      searchTerms: ["youtube", "yt", "media", "video"],
       icon: YoutubeIcon,
       command: ({ editor, range }: CommandProps) => {
         editor
@@ -620,8 +688,10 @@ const CommandGroups: SlashMenuGroupedItemsType = {
 
 export const getSuggestionItems = ({
   query,
+  excludeItems,
 }: {
   query: string;
+  excludeItems?: Set<string>;
 }): SlashMenuGroupedItemsType => {
   const search = query.toLowerCase();
   const filteredGroups: SlashMenuGroupedItemsType = {};
@@ -638,6 +708,7 @@ export const getSuggestionItems = ({
 
   for (const [group, items] of Object.entries(CommandGroups)) {
     const filteredItems = items.filter((item) => {
+      if (excludeItems?.has(item.title)) return false;
       return (
         fuzzyMatch(search, item.title) ||
         item.description.toLowerCase().includes(search) ||
@@ -647,7 +718,11 @@ export const getSuggestionItems = ({
     });
 
     if (filteredItems.length) {
-      filteredGroups[group] = filteredItems;
+      filteredGroups[group] = filteredItems.sort((a, b) => {
+        const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
+        const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
+        return aTitle - bTitle;
+      });
     }
   }
 

apps/client/src/features/editor/components/slash-menu/render-items.ts

@@ -49,7 +49,7 @@ const renderItems = () => {
       getReferenceClientRect = props.clientRect;
 
       popup = document.createElement("div");
-      popup.style.zIndex = "9999";
+      popup.style.zIndex = "199";
       popup.style.position = "absolute";
       popup.style.top = "0";
       popup.style.left = "0";

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

@@ -25,9 +25,9 @@ export default function SubpagesView(props: NodeViewProps) {
   // Get subpages from shared tree if we're in a shared context
   const sharedSubpages = useSharedPageSubpages(currentPageId);
 
-  const { data, isLoading, error } = useGetSidebarPagesQuery({
-    pageId: currentPageId,
-  });
+  const { data, isLoading, error } = useGetSidebarPagesQuery(
+    shareId ? null : { pageId: currentPageId },
+  );
 
   const subpages = useMemo(() => {
     // If we're in a shared context, use the shared subpages

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

@@ -34,7 +34,7 @@ export const TableMenu = React.memo(
         if (isTextSelected(editor)) return false;
         return editor.isActive("table") && !isCellSelection(state.selection);
       },
-      [editor]
+      [editor],
     );
 
     const getReferencedVirtualElement = useCallback(() => {
@@ -121,7 +121,11 @@ export const TableMenu = React.memo(
         shouldShow={shouldShow}
       >
         <div className={classes.toolbar}>
-          <Tooltip position="top" label={t("Add left column")}>
+          <Tooltip
+            position="top"
+            label={t("Add left column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addColumnLeft}
               variant="subtle"
@@ -132,7 +136,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Add right column")}>
+          <Tooltip
+            position="top"
+            label={t("Add right column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addColumnRight}
               variant="subtle"
@@ -143,7 +151,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Delete column")}>
+          <Tooltip
+            position="top"
+            label={t("Delete column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={deleteColumn}
               variant="subtle"
@@ -156,7 +168,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Add row above")}>
+          <Tooltip
+            position="top"
+            label={t("Add row above")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addRowAbove}
               variant="subtle"
@@ -167,7 +183,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Add row below")}>
+          <Tooltip
+            position="top"
+            label={t("Add row below")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addRowBelow}
               variant="subtle"
@@ -178,7 +198,7 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Delete row")}>
+          <Tooltip position="top" label={t("Delete row")} withinPortal={false}>
             <ActionIcon
               onClick={deleteRow}
               variant="subtle"
@@ -191,7 +211,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Toggle header row")}>
+          <Tooltip
+            position="top"
+            label={t("Toggle header row")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={toggleHeaderRow}
               variant="subtle"
@@ -202,7 +226,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Toggle header column")}>
+          <Tooltip
+            position="top"
+            label={t("Toggle header column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={toggleHeaderColumn}
               variant="subtle"
@@ -215,7 +243,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Delete table")}>
+          <Tooltip
+            position="top"
+            label={t("Delete table")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={deleteTable}
               variant="subtle"
@@ -228,7 +260,7 @@ export const TableMenu = React.memo(
         </div>
       </BubbleMenu>
     );
-  }
+  },
 );
 
 export default TableMenu;

apps/client/src/features/editor/components/video/video-view.module.css

@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {
@@ -26,6 +29,7 @@
     }
   }
 }
+
 .video {
   display: block;
   width: 100%;

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

@@ -33,6 +33,7 @@ export default function VideoView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.videoWrapper,
+          !src && placeholder && classes.skeleton,
           alignClass,
         )}
         style={{
@@ -59,7 +60,7 @@ export default function VideoView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
         )}
-        {!src && !previewSrc && (
+        {!src && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">
@@ -69,6 +70,9 @@ export default function VideoView(props: NodeViewProps) {
             </Text>
           </Group>
         )}
+        {!src && !previewSrc && !placeholder && (
+          <video className={classes.video} controls />
+        )}
       </div>
     </NodeViewWrapper>
   );

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

@@ -0,0 +1,105 @@
+// https://github.com/NiclasDev63/tiptap-extension-auto-joiner - MIT
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { canJoin } from "@tiptap/pm/transform";
+import { getNodeType } from "@tiptap/react";
+import { NodeType } from "@tiptap/pm/model";
+import { Transaction } from "@tiptap/pm/state";
+
+// https://discuss.prosemirror.net/t/how-to-autojoin-all-the-time/2957/4
+// Adapted from prosemirror-commands wrapDispatchForJoin
+function autoJoin(
+  transactions: readonly Transaction[],
+  newTr: Transaction,
+  nodeTypes: NodeType[]
+) {
+  // Collect changed ranges across all transactions, mapping earlier ranges
+  // forward through later mappings so every position lands in newTr.doc space.
+  let ranges: number[] = [];
+  for (const tr of transactions) {
+    for (let i = 0; i < tr.mapping.maps.length; i++) {
+      let map = tr.mapping.maps[i];
+      if (!map) continue;
+      for (let j = 0; j < ranges.length; j++) ranges[j] = map.map(ranges[j]!);
+      map.forEach((_s, _e, from, to) => ranges.push(from, to));
+    }
+  }
+
+  // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+  // Resolve against newTr.doc — the same document we will join on.
+  let joinable: number[] = [];
+  for (let i = 0; i < ranges.length; i += 2) {
+    let from = ranges[i]!,
+      to = ranges[i + 1]!;
+    let $from = newTr.doc.resolve(from),
+      depth = $from.sharedDepth(to),
+      parent = $from.node(depth);
+    for (
+      let index = $from.indexAfter(depth), pos = $from.after(depth + 1);
+      pos <= to;
+      ++index
+    ) {
+      let after = parent.maybeChild(index);
+      if (!after) break;
+      if (index && joinable.indexOf(pos) == -1) {
+        let before = parent.child(index - 1);
+        if (before.type == after.type && nodeTypes.includes(before.type))
+          joinable.push(pos);
+      }
+      pos += after.nodeSize;
+    }
+  }
+
+  // Join the joinable points (reverse order to preserve earlier positions)
+  let joined = false;
+  joinable.sort((a, b) => a - b);
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(newTr.doc, joinable[i]!)) {
+      newTr.join(joinable[i]!);
+      joined = true;
+    }
+  }
+
+  return joined;
+}
+
+export interface AutoJoinerOptions {
+  elementsToJoin: string[];
+}
+
+const AutoJoiner = Extension.create<AutoJoinerOptions>({
+  name: "autoJoiner",
+
+  addOptions() {
+    return {
+      elementsToJoin: [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name);
+    const joinableNodes = [
+      this.editor.schema.nodes.bulletList,
+      this.editor.schema.nodes.orderedList,
+    ];
+    this.options.elementsToJoin.forEach((element) => {
+      const nodeTyp = getNodeType(element, this.editor.schema);
+      joinableNodes.push(nodeTyp);
+    });
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction(transactions, _, newState) {
+          let newTr = newState.tr;
+          if (autoJoin(transactions, newTr, joinableNodes as NodeType[])) {
+            return newTr;
+          }
+        },
+      }),
+    ];
+  },
+});
+
+export default AutoJoiner;

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

@@ -11,7 +11,9 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Youtube } from "@tiptap/extension-youtube";
-import SlashCommand from "@/features/editor/extensions/slash-command";
+import SlashCommand, { SlashCommandExtension as Command } from "@/features/editor/extensions/slash-command";
+import renderItems from "@/features/editor/components/slash-menu/render-items";
+import getSuggestionItems from "@/features/editor/components/slash-menu/menu-items";
 import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
 import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
 import { HocuspocusProvider } from "@hocuspocus/provider";
@@ -30,6 +32,7 @@ import {
   TiptapImage,
   Callout,
   TiptapVideo,
+  TiptapAudio,
   LinkExtension,
   Selection,
   Attachment,
@@ -37,6 +40,7 @@ import {
   Drawio,
   Excalidraw,
   Embed,
+  TiptapPdf,
   SearchAndReplace,
   Mention,
   TableDndExtension,
@@ -47,7 +51,7 @@ import {
   SharedStorage,
   Columns,
   Column,
-  Status
+  Status,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -68,11 +72,13 @@ import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
 import StatusView from "@/features/editor/components/status/status-view.tsx";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
+import AudioView from "@/features/editor/components/audio/audio-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
+import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
 import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
@@ -86,12 +92,14 @@ 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";
 import { countWords } from "alfaaz";
+import AutoJoiner from "@/features/editor/extensions/autojoiner.ts";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -136,6 +144,25 @@ export const mainExtensions = [
         }),
       ];
     },
+    addKeyboardShortcuts() {
+      return {
+        Enter: ({ editor }) => {
+          const { from, to } = editor.state.selection;
+          if (from !== to) return false;
+          if (!editor.isActive("code")) return false;
+
+          const $from = editor.state.doc.resolve(from);
+          const codeType = editor.state.schema.marks.code;
+          const nodeAfter = $from.nodeAfter;
+
+          if (nodeAfter && codeType.isInSet(nodeAfter.marks)) {
+            return false;
+          }
+
+          return editor.chain().unsetCode().splitBlock().run();
+        },
+      };
+    },
   }),
   SharedStorage,
   Heading,
@@ -176,6 +203,10 @@ export const mainExtensions = [
   }),
   LinkExtension.configure({
     openOnClick: false,
+  }).extend({
+    addMarkView() {
+      return ReactMarkViewRenderer(LinkView);
+    },
   }),
   Superscript,
   SubScript,
@@ -243,8 +274,8 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createImageHandle,
@@ -256,14 +287,17 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createResizeHandle,
       className: buildResizeClasses("node-video"),
     },
   }),
+  TiptapAudio.configure({
+    view: AudioView,
+  }),
   Callout.configure({
     view: CalloutView,
   }),
@@ -284,8 +318,8 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createResizeHandle,
@@ -297,8 +331,8 @@ export const mainExtensions = [
     resize: {
       enabled: true,
       directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
+      minWidth: 24,
+      minHeight: 16,
       alwaysPreserveAspectRatio: true,
       //@ts-ignore
       createCustomHandle: createResizeHandle,
@@ -308,6 +342,9 @@ export const mainExtensions = [
   Embed.configure({
     view: EmbedView,
   }),
+  TiptapPdf.configure({
+    view: PdfView,
+  }),
   Subpages.configure({
     view: SubpagesView,
   }),
@@ -338,10 +375,34 @@ export const mainExtensions = [
   }).configure(),
   Columns,
   Column,
+  AutoJoiner.configure({
+    elementsToJoin: [],
+  }),
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
 
+const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
+  "Image",
+  "Video",
+  "File attachment",
+  "Draw.io (diagrams.net)",
+  "Excalidraw diagram",
+]);
+
+const TemplateSlashCommand = Command.configure({
+  suggestion: {
+    items: ({ query }: { query: string }) =>
+      getSuggestionItems({ query, excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS }),
+    render: renderItems,
+  },
+});
+
+export const templateExtensions = [
+  ...mainExtensions.filter((ext: any) => ext !== SlashCommand),
+  TemplateSlashCommand,
+] as any;
+
 export const collabExtensions: CollabExtensions = (provider, user) => [
   Collaboration.configure({
     document: provider.document,

apps/client/src/features/editor/extensions/markdown-clipboard.ts

@@ -1,9 +1,9 @@
 // adapted from: https://github.com/aguingand/tiptap-markdown/blob/main/src/extensions/tiptap/clipboard.js - MIT
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { DOMParser } from "@tiptap/pm/model";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { DOMParser, DOMSerializer, Fragment, Slice } from "@tiptap/pm/model";
 import { find } from "linkifyjs";
-import { markdownToHtml } from "@docmost/editor-ext";
+import { markdownToHtml, htmlToMarkdown } from "@docmost/editor-ext";
 
 export const MarkdownClipboard = Extension.create({
   name: "markdownClipboard",
@@ -19,6 +19,27 @@ export const MarkdownClipboard = Extension.create({
       new Plugin({
         key: new PluginKey("markdownClipboard"),
         props: {
+          clipboardTextSerializer: (slice) => {
+            const listTypes = ["bulletList", "orderedList", "taskList"];
+            let topLevelCount = 0;
+            let hasList = false;
+            slice.content.forEach((node) => {
+              if (listTypes.includes(node.type.name)) {
+                hasList = true;
+                topLevelCount += node.childCount;
+              } else {
+                topLevelCount++;
+              }
+            });
+
+            if (!hasList || topLevelCount < 2) return null;
+
+            const div = document.createElement("div");
+            const serializer = DOMSerializer.fromSchema(this.editor.schema);
+            const fragment = serializer.serializeFragment(slice.content);
+            div.appendChild(fragment);
+            return htmlToMarkdown(div.innerHTML);
+          },
           handlePaste: (view, event, slice) => {
             if (!event.clipboardData) {
               return false;
@@ -29,49 +50,80 @@ export const MarkdownClipboard = Extension.create({
             }
 
             const text = event.clipboardData.getData("text/plain");
+            const html = event.clipboardData.getData("text/html");
             const vscode = event.clipboardData.getData("vscode-editor-data");
             const vscodeData = vscode ? JSON.parse(vscode) : undefined;
             const language = vscodeData?.mode;
 
-            if (language !== "markdown") {
+            const isVscodeMarkdown = language === "markdown";
+            const isPlainTextOnly = !html && !vscode && !!text;
+
+            if (!isVscodeMarkdown && !isPlainTextOnly) {
               return false;
             }
 
+            if (isPlainTextOnly) {
+              if ((view as any).input?.shiftKey || !this.options.transformPastedText) {
+                return false;
+              }
+
+              const link = find(text, {
+                defaultProtocol: "http",
+              }).find((item) => item.isLink && item.value === text);
+
+              if (link) {
+                return false;
+              }
+            }
+
             const { tr } = view.state;
             const { from, to } = view.state.selection;
 
-            const html = markdownToHtml(text);
+            const parsed = markdownToHtml(text.replace(/\n+$/, ""));
 
             const contentNodes = DOMParser.fromSchema(
               this.editor.schema,
-            ).parseSlice(elementFromString(html), {
+            ).parseSlice(elementFromString(parsed), {
               preserveWhitespace: true,
             });
 
             tr.replaceRange(from, to, contentNodes);
+            const insertEnd = tr.mapping.map(from, 1);
+            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(from, insertEnd - 2)), -1));
             tr.setMeta('paste', true)
             view.dispatch(tr);
             return true;
           },
-          clipboardTextParser: (text, context, plainText) => {
-            const link = find(text, {
-              defaultProtocol: "http",
-            }).find((item) => item.isLink && item.value === text);
+          // Strip trailing whitespace-only paragraphs from pasted content.
+          // Terminals (GNOME Terminal, etc.) often include trailing
+          // whitespace in their HTML clipboard data, which ProseMirror
+          // parses as an extra paragraph. Inside a list item this creates
+          // an orphan empty line that breaks the list structure.
+          transformPasted: (slice) => {
+            let { content, openStart, openEnd } = slice;
 
-            if (plainText || !this.options.transformPastedText || link) {
-              // don't parse plaintext link to allow link paste handler to work
-              // pasting with shift key prevents formatting
-              return null;
+            // Remove trailing paragraphs that contain only whitespace
+            while (content.childCount > 1) {
+              const lastChild = content.lastChild;
+              if (
+                lastChild?.type.name === "paragraph" &&
+                lastChild.textContent.trim() === ""
+              ) {
+                const children = [];
+                for (let i = 0; i < content.childCount - 1; i++) {
+                  children.push(content.child(i));
+                }
+                content = Fragment.from(children);
+              } else {
+                break;
+              }
             }
 
-            const parsed = markdownToHtml(text);
-            return DOMParser.fromSchema(this.editor.schema).parseSlice(
-              elementFromString(parsed),
-              {
-                preserveWhitespace: true,
-                context,
-              },
-            );
+            if (content !== slice.content) {
+              return new Slice(content, openStart, Math.max(openEnd, 1));
+            }
+
+            return slice;
           },
         },
       }),

apps/client/src/features/editor/extensions/slash-command.ts

@@ -47,4 +47,5 @@ const SlashCommand = Command.configure({
   },
 });
 
+export { Command as SlashCommandExtension };
 export default SlashCommand;

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

@@ -2,13 +2,31 @@ import classes from "@/features/editor/styles/editor.module.css";
 import React from "react";
 import { TitleEditor } from "@/features/editor/title-editor";
 import PageEditor from "@/features/editor/page-editor";
-import { Container } from "@mantine/core";
+import {
+  Container,
+  Divider,
+  Group,
+  Popover,
+  Stack,
+  Text,
+  UnstyledButton,
+} from "@mantine/core";
 import { useAtom } from "jotai";
 import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { PageVerificationBadge } from "@/ee/page-verification";
+import { useTranslation } from "react-i18next";
+import { IContributor } from "@/features/page/types/page.types.ts";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
 
+type PageCreator = {
+  id: string;
+  name: string;
+  avatarUrl: string;
+};
+
 export interface FullEditorProps {
   pageId: string;
   slugId: string;
@@ -16,6 +34,9 @@ export interface FullEditorProps {
   content: string;
   spaceSlug: string;
   editable: boolean;
+  creator?: PageCreator;
+  contributors?: IContributor[];
+  canComment?: boolean;
 }
 
 export function FullEditor({
@@ -25,6 +46,9 @@ export function FullEditor({
   content,
   spaceSlug,
   editable,
+  creator,
+  contributors,
+  canComment,
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
@@ -42,11 +66,106 @@ export function FullEditor({
         spaceSlug={spaceSlug}
         editable={editable}
       />
+      <PageByline
+        creator={creator}
+        contributors={contributors}
+        readOnly={!editable}
+      />
       <MemoizedPageEditor
         pageId={pageId}
         editable={editable}
         content={content}
+        canComment={canComment}
       />
     </Container>
   );
 }
+
+type PageBylineProps = {
+  creator?: PageCreator;
+  contributors?: IContributor[];
+  readOnly?: boolean;
+};
+
+function PageByline({
+  creator,
+  contributors,
+  readOnly,
+}: PageBylineProps) {
+  const { t } = useTranslation();
+
+  const otherContributors = (contributors ?? []).filter(
+    (c) => c.id !== creator?.id,
+  );
+
+  return (
+    <Group
+      gap="sm"
+      mb="md"
+      className="print-hide"
+      style={{ marginTop: "-0.5em", paddingLeft: "3rem" }}
+    >
+      {creator && (
+        <Popover position="bottom-start" shadow="md" width={280} withArrow>
+          <Popover.Target>
+            <UnstyledButton>
+              <Group gap={6}>
+                <CustomAvatar
+                  avatarUrl={creator.avatarUrl}
+                  name={creator.name}
+                  size={22}
+                />
+                <Text size="sm" c="dimmed">
+                  {t("By {{name}}", { name: creator.name })}
+                </Text>
+              </Group>
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <Stack gap="xs">
+              <Group gap="sm">
+                <CustomAvatar
+                  avatarUrl={creator.avatarUrl}
+                  name={creator.name}
+                  size={36}
+                />
+                <div>
+                  <Text size="sm" fw={500}>
+                    {creator.name}
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {otherContributors.length === 0
+                      ? t("Owner, no contributors")
+                      : t("Owner")}
+                  </Text>
+                </div>
+              </Group>
+
+              {otherContributors.length > 0 && (
+                <>
+                  <Divider />
+                  <Text size="xs" fw={500} c="dimmed" tt="uppercase">
+                    {t("Contributors")}
+                  </Text>
+                  <Stack gap={6}>
+                    {otherContributors.map((contributor) => (
+                      <Group gap="sm" key={contributor.id}>
+                        <CustomAvatar
+                          avatarUrl={contributor.avatarUrl}
+                          name={contributor.name}
+                          size={28}
+                        />
+                        <Text size="sm">{contributor.name}</Text>
+                      </Group>
+                    ))}
+                  </Stack>
+                </>
+              )}
+            </Stack>
+          </Popover.Dropdown>
+        </Popover>
+      )}
+      <PageVerificationBadge readOnly={readOnly} />
+    </Group>
+  );
+}

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

@@ -37,20 +37,22 @@ import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-
 import {
   activeCommentIdAtom,
   showCommentPopupAtom,
+  showReadOnlyCommentPopupAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentDialog from "@/features/comment/components/comment-dialog";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
+import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
+import PdfMenu from "@/features/editor/components/pdf/pdf-menu.tsx";
 import SubpagesMenu from "@/features/editor/components/subpages/subpages-menu.tsx";
 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";
@@ -67,18 +69,21 @@ import { jwtDecode } from "jwt-decode";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
 import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
+import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
 import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
 
 interface PageEditorProps {
   pageId: string;
   editable: boolean;
   content: any;
+  canComment?: boolean;
 }
 
 export default function PageEditor({
   pageId,
   editable,
   content,
+  canComment,
 }: PageEditorProps) {
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
@@ -93,6 +98,7 @@ export default function PageEditor({
   const [, setAsideState] = useAtom(asideStateAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [showReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
   const [isLocalSynced, setIsLocalSynced] = useState(false);
   const [isRemoteSynced, setIsRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
@@ -408,20 +414,27 @@ export default function PageEditor({
         {editor && editorIsEditable && (
           <div>
             <EditorAiMenu editor={editor} />
+            <EditorLinkMenu editor={editor} />
             <EditorBubbleMenu editor={editor} />
             <TableMenu editor={editor} />
             <TableCellMenu editor={editor} appendTo={menuContainerRef} />
             <ImageMenu editor={editor} />
             <VideoMenu editor={editor} />
+            <PdfMenu editor={editor} />
             <CalloutMenu editor={editor} />
             <SubpagesMenu editor={editor} />
             <ExcalidrawMenu editor={editor} />
             <DrawioMenu editor={editor} />
             <ColumnsMenu editor={editor} />
-            <LinkMenu editor={editor} appendTo={menuContainerRef} />
           </div>
         )}
+        {editor && !editorIsEditable && (editable || canComment) && providersRef.current && (
+          <ReadonlyBubbleMenu editor={editor} />
+        )}
         {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
+        {showReadOnlyCommentPopup && (
+          <CommentDialog editor={editor} pageId={pageId} readOnly />
+        )}
       </div>
       <div
         onClick={() => editor.commands.focus("end")}

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;
   }
@@ -133,10 +133,18 @@
     border-top: 1px solid #68cef8;
   }
 
+  &[contenteditable="false"] hr.ProseMirror-selectednode {
+    border-top: none;
+  }
+
   .ProseMirror-selectednode {
     outline: 2px solid #70cff8;
   }
 
+  &[contenteditable="false"] .ProseMirror-selectednode {
+    outline: none;
+  }
+
   & > .react-renderer {
     margin-top: var(--mantine-spacing-sm);
     margin-bottom: var(--mantine-spacing-sm);
@@ -223,13 +231,13 @@
 .ProseMirror > h4,
 .ProseMirror > h5,
 .ProseMirror > h6 {
-  
+
   > .link-btn {
     cursor: pointer;
     position: relative;
 
   }
-  
+
   > .link-btn > .link-btn-content {
     opacity: 0;
     position: absolute;
@@ -241,7 +249,7 @@
     justify-content: center;
     flex-direction: column;
   }
-  
+
   &:hover > .link-btn > .link-btn-content {
     opacity: 1;
   }

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

@@ -8,7 +8,7 @@
     }
   }
 
-  .node-image, .node-video, .node-excalidraw, .node-drawio {
+  .node-image, .node-video, .node-pdf, .node-excalidraw, .node-drawio {
     &.ProseMirror-selectednode {
       outline: none;
     }
@@ -37,5 +37,28 @@
     font-size: var(--mantine-font-size-md);
     line-height: var(--mantine-line-height-md);
   }
+
+  .media-pulse {
+    animation: media-pulse 1.2s ease-in-out infinite;
+
+    @mixin light {
+      background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+      background-size: 400% 400%;
+    }
+
+    @mixin dark {
+      background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+      background-size: 400% 400%;
+    }
+
+    @keyframes media-pulse {
+      0% {
+        background-position: 0% 0%;
+      }
+      100% {
+        background-position: -135% 0%;
+      }
+    }
+  }
 }
 

apps/client/src/features/favorite/components/star-button.tsx

@@ -0,0 +1,76 @@
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconStar, IconStarFilled } from "@tabler/icons-react";
+import {
+  useFavoriteIds,
+  useAddFavoriteMutation,
+  useRemoveFavoriteMutation,
+} from "../queries/favorite-query";
+import { FavoriteType } from "../types/favorite.types";
+import { ToggleFavoriteParams } from "../services/favorite-service";
+import { useTranslation } from "react-i18next";
+
+type StarButtonProps = {
+  type: FavoriteType;
+  pageId?: string;
+  spaceId?: string;
+  templateId?: string;
+  size?: number;
+};
+
+function getEntityId(props: StarButtonProps): string | undefined {
+  if (props.type === "page") return props.pageId;
+  if (props.type === "space") return props.spaceId;
+  if (props.type === "template") return props.templateId;
+  return undefined;
+}
+
+export default function StarButton(props: StarButtonProps) {
+  const { type, size = 18 } = props;
+  const { t } = useTranslation();
+  const favoriteIds = useFavoriteIds(type);
+  const addMutation = useAddFavoriteMutation();
+  const removeMutation = useRemoveFavoriteMutation();
+
+  const entityId = getEntityId(props);
+  const isFavorited = entityId ? favoriteIds.has(entityId) : false;
+  const isPending = addMutation.isPending || removeMutation.isPending;
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const params: ToggleFavoriteParams = {
+      type,
+      pageId: props.pageId,
+      spaceId: props.spaceId,
+      templateId: props.templateId,
+    };
+
+    if (isFavorited) {
+      removeMutation.mutate(params);
+    } else {
+      addMutation.mutate(params);
+    }
+  };
+
+  return (
+    <Tooltip
+      label={isFavorited ? t("Remove from favorites") : t("Add to favorites")}
+      openDelay={250}
+      withArrow
+    >
+      <ActionIcon
+        variant="subtle"
+        color={isFavorited ? "yellow" : "gray"}
+        onClick={handleToggle}
+        loading={isPending}
+      >
+        {isFavorited ? (
+          <IconStarFilled size={size} />
+        ) : (
+          <IconStar size={size} stroke={2} />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { useMemo } from "react";
+import {
+  useQuery,
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  addFavorite,
+  removeFavorite,
+  getFavorites,
+  getFavoriteIds,
+  ToggleFavoriteParams,
+} from "../services/favorite-service";
+import { FavoriteType } from "../types/favorite.types";
+
+export function useFavoritesQuery(type?: FavoriteType, spaceId?: string) {
+  return useInfiniteQuery({
+    queryKey: ["favorites", type, spaceId],
+    queryFn: ({ pageParam }) =>
+      getFavorites({ type, spaceId, cursor: pageParam, limit: 15 }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+    refetchOnMount: true,
+  });
+}
+
+export function useFavoriteIds(type: FavoriteType, spaceId?: string): Set<string> {
+  const { data } = useQuery({
+    queryKey: ["favorite-ids", type, spaceId],
+    queryFn: () => getFavoriteIds(type, spaceId),
+    refetchOnMount: true,
+  });
+
+  const items = data?.items;
+  return useMemo(() => new Set(items ?? []), [items]);
+}
+
+function getEntityId(variables: ToggleFavoriteParams): string | undefined {
+  if (variables.type === "page") return variables.pageId;
+  if (variables.type === "space") return variables.spaceId;
+  if (variables.type === "template") return variables.templateId;
+  return undefined;
+}
+
+export function useAddFavoriteMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<void, Error, ToggleFavoriteParams>({
+    mutationFn: (data) => addFavorite(data),
+    onSuccess: (_result, variables) => {
+      const entityId = getEntityId(variables);
+      if (entityId) {
+        queryClient.setQueriesData<{ items: string[]; meta: any }>(
+          { queryKey: ["favorite-ids", variables.type] },
+          (old) => {
+            if (!old) return old;
+            if (old.items.includes(entityId)) return old;
+            return { ...old, items: [...old.items, entityId] };
+          },
+        );
+      }
+      queryClient.invalidateQueries({
+        queryKey: ["favorites", variables.type],
+      });
+    },
+  });
+}
+
+export function useRemoveFavoriteMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<void, Error, ToggleFavoriteParams>({
+    mutationFn: (data) => removeFavorite(data),
+    onSuccess: (_result, variables) => {
+      const entityId = getEntityId(variables);
+      if (entityId) {
+        queryClient.setQueriesData<{ items: string[]; meta: any }>(
+          { queryKey: ["favorite-ids", variables.type] },
+          (old) => {
+            if (!old) return old;
+            return { ...old, items: old.items.filter((id) => id !== entityId) };
+          },
+        );
+      }
+      queryClient.invalidateQueries({
+        queryKey: ["favorites", variables.type],
+      });
+    },
+  });
+}

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

@@ -0,0 +1,37 @@
+import api from "@/lib/api-client";
+import { IPagination } from "@/lib/types.ts";
+import { IFavorite, FavoriteType } from "../types/favorite.types";
+
+export type ToggleFavoriteParams = {
+  type: FavoriteType;
+  pageId?: string;
+  spaceId?: string;
+  templateId?: string;
+};
+
+export async function addFavorite(
+  params: ToggleFavoriteParams,
+): Promise<void> {
+  await api.post("/favorites/add", params);
+}
+
+export async function removeFavorite(
+  params: ToggleFavoriteParams,
+): Promise<void> {
+  await api.post("/favorites/remove", params);
+}
+
+export async function getFavoriteIds(type: FavoriteType, spaceId?: string): Promise<IPagination<string>> {
+  const req = await api.post<IPagination<string>>("/favorites/ids", { type, spaceId });
+  return req.data;
+}
+
+export async function getFavorites(params?: {
+  type?: FavoriteType;
+  spaceId?: string;
+  limit?: number;
+  cursor?: string;
+}): Promise<IPagination<IFavorite>> {
+  const req = await api.post("/favorites", params);
+  return req.data;
+}

apps/client/src/features/favorite/types/favorite.types.ts

@@ -0,0 +1,32 @@
+export type FavoriteType = "page" | "space" | "template";
+
+export type IFavorite = {
+  id: string;
+  userId: string;
+  pageId: string | null;
+  spaceId: string | null;
+  templateId: string | null;
+  type: FavoriteType;
+  workspaceId: string;
+  createdAt: string;
+  page?: {
+    id: string;
+    slugId: string;
+    title: string;
+    icon: string | null;
+    spaceId: string;
+  };
+  space?: {
+    id: string;
+    name: string;
+    slug: string;
+    logo: string | null;
+  };
+  template?: {
+    id: string;
+    title: string;
+    description: string | null;
+    icon: string | null;
+    spaceId: string | null;
+  };
+};

apps/client/src/features/home/atoms/home-tab-atom.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const homeTabAtom = atomWithStorage<string>("home-tab", "recent");

apps/client/src/features/home/components/created-by-me.tsx

@@ -0,0 +1,126 @@
+import {
+  Text,
+  Group,
+  UnstyledButton,
+  Badge,
+  Table,
+  ActionIcon,
+  Button,
+} from "@mantine/core";
+import { Link } from "react-router-dom";
+import PageListSkeleton from "@/components/ui/page-list-skeleton";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { formattedDate } from "@/lib/time";
+import { useCreatedByQuery } from "@/features/page/queries/page-query";
+import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { EmptyState } from "@/components/ui/empty-state";
+import { getSpaceUrl } from "@/lib/config";
+import { useTranslation } from "react-i18next";
+import { getInitialsColor } from "@/lib/get-initials-color";
+
+type Props = {
+  spaceId?: string;
+};
+
+export default function CreatedByMe({ spaceId }: Props) {
+  const { t } = useTranslation();
+  const {
+    data,
+    isLoading,
+    isError,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useCreatedByQuery({ spaceId });
+
+  const pages = data?.pages.flatMap((p) => p.items) ?? [];
+
+  if (isLoading) {
+    return <PageListSkeleton />;
+  }
+
+  if (isError) {
+    return <Text>{t("Failed to fetch pages")}</Text>;
+  }
+
+  return pages.length > 0 ? (
+    <>
+      <Table.ScrollContainer minWidth={500}>
+        <Table highlightOnHover verticalSpacing="sm">
+          <Table.Tbody>
+            {pages.map((page) => (
+              <Table.Tr key={page.id}>
+                <Table.Td>
+                  <UnstyledButton
+                    component={Link}
+                    to={buildPageUrl(
+                      page?.space.slug,
+                      page.slugId,
+                      page.title,
+                    )}
+                  >
+                    <Group wrap="nowrap">
+                      {page.icon || (
+                        <ActionIcon
+                          variant="transparent"
+                          color="gray"
+                          size={18}
+                        >
+                          <IconFileDescription size={18} />
+                        </ActionIcon>
+                      )}
+                      <Text fw={500} size="md" lineClamp={1}>
+                        {page.title || t("Untitled")}
+                      </Text>
+                    </Group>
+                  </UnstyledButton>
+                </Table.Td>
+                {!spaceId && (
+                  <Table.Td>
+                    <Badge
+                      color={getInitialsColor(page?.space.name)}
+                      variant="light"
+                      component={Link}
+                      to={getSpaceUrl(page?.space.slug)}
+                      style={{ cursor: "pointer" }}
+                    >
+                      {page?.space.name}
+                    </Badge>
+                  </Table.Td>
+                )}
+                <Table.Td>
+                  <Text
+                    c="dimmed"
+                    style={{ whiteSpace: "nowrap" }}
+                    size="xs"
+                    fw={500}
+                  >
+                    {formattedDate(page.createdAt)}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+      {hasNextPage && (
+        <Button
+          variant="subtle"
+          fullWidth
+          mt="sm"
+          mb="xl"
+          onClick={() => fetchNextPage()}
+          loading={isFetchingNextPage}
+        >
+          {t("Load more")}
+        </Button>
+      )}
+    </>
+  ) : (
+    <EmptyState
+      icon={IconFiles}
+      title={t("No pages yet")}
+      description={t("Pages you create will show up here.")}
+    />
+  );
+}

apps/client/src/features/home/components/favorites-pages.tsx

@@ -0,0 +1,130 @@
+import {
+  Text,
+  Group,
+  UnstyledButton,
+  Badge,
+  Table,
+  ActionIcon,
+  Button,
+} from "@mantine/core";
+import { Link } from "react-router-dom";
+import PageListSkeleton from "@/components/ui/page-list-skeleton";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { formattedDate } from "@/lib/time";
+import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
+import { IconFileDescription, IconStar } from "@tabler/icons-react";
+import { EmptyState } from "@/components/ui/empty-state";
+import { getSpaceUrl } from "@/lib/config";
+import { useTranslation } from "react-i18next";
+import { getInitialsColor } from "@/lib/get-initials-color";
+
+interface Props {
+  spaceId?: string;
+}
+
+export default function FavoritesPages({ spaceId }: Props) {
+  const { t } = useTranslation();
+  const {
+    data,
+    isLoading,
+    isError,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useFavoritesQuery("page", spaceId);
+
+  const favorites = data?.pages.flatMap((p) => p.items) ?? [];
+
+  if (isLoading) {
+    return <PageListSkeleton />;
+  }
+
+  if (isError) {
+    return <Text>{t("Failed to fetch starred pages")}</Text>;
+  }
+
+  return favorites.length > 0 ? (
+    <>
+      <Table.ScrollContainer minWidth={500}>
+        <Table highlightOnHover verticalSpacing="sm">
+          <Table.Tbody>
+            {favorites.map((fav) =>
+              fav.page ? (
+                <Table.Tr key={fav.id}>
+                  <Table.Td>
+                    <UnstyledButton
+                      component={Link}
+                      to={buildPageUrl(
+                        fav.space?.slug,
+                        fav.page.slugId,
+                        fav.page.title,
+                      )}
+                    >
+                      <Group wrap="nowrap">
+                        {fav.page.icon || (
+                          <ActionIcon
+                            variant="transparent"
+                            color="gray"
+                            size={18}
+                          >
+                            <IconFileDescription size={18} />
+                          </ActionIcon>
+                        )}
+                        <Text fw={500} size="md" lineClamp={1}>
+                          {fav.page.title || t("Untitled")}
+                        </Text>
+                      </Group>
+                    </UnstyledButton>
+                  </Table.Td>
+                  {!spaceId && (
+                    <Table.Td>
+                      {fav.space && (
+                        <Badge
+                          color={getInitialsColor(fav.space.name)}
+                          variant="light"
+                          component={Link}
+                          to={getSpaceUrl(fav.space.slug)}
+                          style={{ cursor: "pointer" }}
+                        >
+                          {fav.space.name}
+                        </Badge>
+                      )}
+                    </Table.Td>
+                  )}
+                  <Table.Td>
+                    <Text
+                      c="dimmed"
+                      style={{ whiteSpace: "nowrap" }}
+                      size="xs"
+                      fw={500}
+                    >
+                      {formattedDate(new Date(fav.createdAt))}
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              ) : null,
+            )}
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+      {hasNextPage && (
+        <Button
+          variant="subtle"
+          fullWidth
+          mt="sm"
+          mb="xl"
+          onClick={() => fetchNextPage()}
+          loading={isFetchingNextPage}
+        >
+          {t("Load more")}
+        </Button>
+      )}
+    </>
+  ) : (
+    <EmptyState
+      icon={IconStar}
+      title={t("No favorites yet")}
+      description={t("Pages you star will show up here.")}
+    />
+  );
+}

apps/client/src/features/home/components/home-ai-prompt.module.css

@@ -0,0 +1,28 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md) var(--mantine-spacing-lg);
+}
+
+.heading {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  text-align: center;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  text-align: center;
+  margin-top: 6px;
+  margin-bottom: var(--mantine-spacing-lg);
+}
+
+.inputContainer {
+  width: 100%;
+  max-width: 640px;
+}

apps/client/src/features/home/components/home-ai-prompt.tsx

@@ -0,0 +1,60 @@
+import { useAtomValue } from "jotai";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import ChatInput from "@/ee/ai-chat/components/chat-input";
+import type {
+  ChatAttachment,
+  PageMention,
+} from "@/ee/ai-chat/types/ai-chat.types";
+import classes from "./home-ai-prompt.module.css";
+
+export type HomeAiPromptInitialState = {
+  initialContent: string;
+  initialMentions: PageMention[];
+  initialAttachments: ChatAttachment[];
+};
+
+export default function HomeAiPrompt() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const workspace = useAtomValue(workspaceAtom);
+
+  const aiChatEnabled = workspace?.settings?.ai?.chat === true;
+  if (!aiChatEnabled) return null;
+
+  const handleSend = (
+    content: string,
+    mentions: PageMention[],
+    attachments: ChatAttachment[],
+  ) => {
+    if (!content.trim() && attachments.length === 0) return;
+    const state: HomeAiPromptInitialState = {
+      initialContent: content,
+      initialMentions: mentions,
+      initialAttachments: attachments,
+    };
+    navigate("/ai", { state });
+  };
+
+  return (
+    <div className={classes.wrapper}>
+      <h1 className={classes.heading}>
+        {t("Welcome to {{name}}", { name: workspace?.name ?? "Docmost" })}
+      </h1>
+      <div className={classes.subtitle}>
+        {t("Ask anything or search your workspace")}
+      </div>
+
+      <div className={classes.inputContainer}>
+        <ChatInput
+          isStreaming={false}
+          onSend={handleSend}
+          onStop={() => {}}
+          placeholder={t("Ask anything... Use @ to mention pages")}
+          autofocus={false}
+        />
+      </div>
+    </div>
+  );
+}

apps/client/src/features/home/components/home-tabs.tsx

@@ -1,19 +1,40 @@
 import { Text, Tabs, Space } from "@mantine/core";
-import { IconClockHour3 } from "@tabler/icons-react";
-import RecentChanges from "@/components/common/recent-changes.tsx";
+import { IconClockHour3, IconStar, IconUser } from "@tabler/icons-react";
+import RecentChanges from "@/components/common/recent-changes";
+import FavoritesPages from "./favorites-pages";
+import CreatedByMe from "./created-by-me";
 import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { homeTabAtom } from "@/features/home/atoms/home-tab-atom";
 
 export default function HomeTabs() {
   const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useAtom(homeTabAtom);
 
   return (
-    <Tabs defaultValue="recent">
-      <Tabs.List>
+    <Tabs
+      color="dark"
+      value={activeTab}
+      onChange={(value) => {
+        if (value) setActiveTab(value);
+      }}
+    >
+      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
             {t("Recently updated")}
           </Text>
         </Tabs.Tab>
+        <Tabs.Tab value="favorites" leftSection={<IconStar size={18} />}>
+          <Text size="sm" fw={500}>
+            {t("Favorites")}
+          </Text>
+        </Tabs.Tab>
+        <Tabs.Tab value="created" leftSection={<IconUser size={18} />}>
+          <Text size="sm" fw={500}>
+            {t("Created by me")}
+          </Text>
+        </Tabs.Tab>
       </Tabs.List>
 
       <Space my="md" />
@@ -21,6 +42,12 @@ export default function HomeTabs() {
       <Tabs.Panel value="recent">
         <RecentChanges />
       </Tabs.Panel>
+      <Tabs.Panel value="favorites">
+        <FavoritesPages />
+      </Tabs.Panel>
+      <Tabs.Panel value="created">
+        <CreatedByMe />
+      </Tabs.Panel>
     </Tabs>
   );
 }

apps/client/src/features/notification/components/notification-item.tsx

@@ -6,14 +6,16 @@ import {
   UnstyledButton,
 } from "@mantine/core";
 import {
+  IconBell,
   IconCheck,
   IconFileDescription,
   IconPointFilled,
 } from "@tabler/icons-react";
+import { Avatar } from "@mantine/core";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { INotification } from "../types/notification.types";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { Trans, useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import { useState } from "react";
 import { useMarkReadMutation } from "../queries/notification-query";
 import { buildPageUrl } from "@/features/page/page.utils";
@@ -30,75 +32,101 @@ export function NotificationItem({
   onNavigate,
 }: NotificationItemProps) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const markRead = useMarkReadMutation();
   const [hovered, setHovered] = useState(false);
 
   const isUnread = !notification.readAt;
 
-  const getNotificationMessage = (): string => {
+  const getNotificationMessageKey = (): string => {
     switch (notification.type) {
       case "comment.user_mention":
-        return t("mentioned you in a comment");
+        return "<bold>{{name}}</bold> mentioned you in a comment";
       case "comment.created":
-        return t("commented on a page");
+        return "<bold>{{name}}</bold> commented on a page";
       case "comment.resolved":
-        return t("resolved a comment");
+        return "<bold>{{name}}</bold> resolved a comment";
       case "page.user_mention":
-        return t("mentioned you on a page");
+        return "<bold>{{name}}</bold> mentioned you on a page";
       case "page.permission_granted":
         return notification.data?.role === "writer"
-          ? t("gave you edit access to a page")
-          : t("gave you view access to a page");
+          ? "<bold>{{name}}</bold> gave you edit access to a page"
+          : "<bold>{{name}}</bold> gave you view access to a page";
+      case "page.updated":
+        return "<bold>{{name}}</bold> updated a page";
+      case "page.verified":
+        return "<bold>{{name}}</bold> verified a page";
+      case "page.approval_requested":
+        return "<bold>{{name}}</bold> submitted a page for your approval";
+      case "page.approval_rejected":
+        return "<bold>{{name}}</bold> returned a page for revision";
+      case "page.verification_expiring":
+        return "Page verification expires soon";
+      case "page.verification_expired":
+        return "Page verification has expired";
       default:
         return "";
     }
   };
 
-  const handleClick = () => {
-    if (notification.page && notification.space) {
-      if (isUnread) {
-        markRead.mutate([notification.id]);
-      }
-      navigate(
-        buildPageUrl(
+  const pageUrl =
+    notification.page && notification.space
+      ? buildPageUrl(
           notification.space.slug,
           notification.page.slugId,
           notification.page.title,
-        ),
-      );
-      onNavigate();
-    }
-  };
+        )
+      : undefined;
 
-  const handleMarkRead = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const markReadIfNeeded = () => {
     if (isUnread) {
       markRead.mutate([notification.id]);
     }
   };
 
+  const handleClick = () => {
+    markReadIfNeeded();
+    onNavigate();
+  };
+
+  const handleMarkRead = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    markReadIfNeeded();
+  };
+
   return (
     <UnstyledButton
+      component={Link}
+      to={pageUrl ?? ""}
       onClick={handleClick}
+      // auxclick fires for all non-primary buttons; guard to middle-click only (button 1)
+      // so that right-click (button 2, context menu) does not mark as read
+      onAuxClick={(e: React.MouseEvent) => e.button === 1 && markReadIfNeeded()}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       w="100%"
       className={classes.notificationItem}
     >
       <Group wrap="nowrap" align="flex-start" gap="sm">
-        <CustomAvatar
-          avatarUrl={notification.actor?.avatarUrl}
-          name={notification.actor?.name || "?"}
-          size="sm"
-        />
+        {notification.actor ? (
+          <CustomAvatar
+            avatarUrl={notification.actor.avatarUrl}
+            name={notification.actor.name}
+            size="sm"
+          />
+        ) : (
+          <Avatar size="sm" color="gray" radius="xl">
+            <IconBell size={14} />
+          </Avatar>
+        )}
 
         <div style={{ flex: 1, minWidth: 0 }}>
           <Text size="sm" lineClamp={2}>
-            <Text span fw={600}>
-              {notification.actor?.name}
-            </Text>{" "}
-            {getNotificationMessage()}
+            <Trans
+              i18nKey={getNotificationMessageKey()}
+              values={{ name: notification.actor?.name }}
+              components={{ bold: <Text span fw={600} /> }}
+            />
           </Text>
 
           {notification.page && (

apps/client/src/features/notification/components/notification-list.tsx

@@ -3,17 +3,23 @@ import { IconBellOff } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useEffect, useRef } from "react";
 import { NotificationItem } from "./notification-item";
-import { INotification, NotificationFilter } from "../types/notification.types";
+import {
+  INotification,
+  NotificationFilter,
+  NotificationTab,
+} from "../types/notification.types";
 import { groupNotificationsByTime } from "../notification.utils";
 import { useNotificationsQuery } from "../queries/notification-query";
 import classes from "../notification.module.css";
 
 type NotificationListProps = {
+  tab: NotificationTab;
   filter: NotificationFilter;
   onNavigate: () => void;
 };
 
 export function NotificationList({
+  tab,
   filter,
   onNavigate,
 }: NotificationListProps) {
@@ -24,7 +30,7 @@ export function NotificationList({
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-  } = useNotificationsQuery();
+  } = useNotificationsQuery(tab as string);
 
   const sentinelRef = useRef<HTMLDivElement>(null);
 

apps/client/src/features/notification/components/notification-popover.tsx

@@ -6,6 +6,7 @@ import {
   Menu,
   Popover,
   ScrollArea,
+  Tabs,
   Text,
   Tooltip,
 } from "@mantine/core";
@@ -18,15 +19,20 @@ import {
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { NotificationList } from "./notification-list";
-import { NotificationFilter } from "../types/notification.types";
+import {
+  NotificationFilter,
+  NotificationTab,
+} from "../types/notification.types";
 import {
   useMarkAllReadMutation,
   useUnreadCountQuery,
 } from "../queries/notification-query";
+import classes from "../notification.module.css";
 
 export function NotificationPopover() {
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
+  const [tab, setTab] = useState<NotificationTab>("direct");
   const [filter, setFilter] = useState<NotificationFilter>("all");
 
   const { data: unreadData } = useUnreadCountQuery();
@@ -125,13 +131,27 @@ export function NotificationPopover() {
           </Group>
         </Group>
 
+        <Tabs
+          value={tab}
+          onChange={(value) => setTab(value as NotificationTab)}
+          variant="default"
+          color="dark"
+        >
+          <Tabs.List px="md">
+            <Tabs.Tab value="direct">{t("Direct")}</Tabs.Tab>
+            <Tabs.Tab value="updates">{t("Updates")}</Tabs.Tab>
+          </Tabs.List>
+        </Tabs>
+
         <ScrollArea.Autosize
           mah={500}
           type="auto"
           offsetScrollbars
           scrollbarSize={6}
+          style={{ overscrollBehavior: "contain" }}
         >
           <NotificationList
+            tab={tab}
             filter={filter}
             onNavigate={() => setOpened(false)}
           />

apps/client/src/features/notification/notification.module.css

@@ -1,7 +1,9 @@
 .notificationItem {
+  display: block;
   padding: 8px 12px;
   border-radius: 4px;
   cursor: pointer;
+  user-select: none;
 }
 
 .notificationItem:hover {
@@ -11,3 +13,4 @@
 .divider {
   border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
+

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

@@ -15,10 +15,10 @@ import {
 export const NOTIFICATION_KEY = ["notifications"];
 export const UNREAD_COUNT_KEY = ["notifications", "unread-count"];
 
-export function useNotificationsQuery() {
+export function useNotificationsQuery(type?: string) {
   return useInfiniteQuery({
-    queryKey: NOTIFICATION_KEY,
-    queryFn: ({ pageParam }) => getNotifications({ cursor: pageParam }),
+    queryKey: [...NOTIFICATION_KEY, type],
+    queryFn: ({ pageParam }) => getNotifications({ cursor: pageParam, type }),
     initialPageParam: undefined as string | undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,

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

@@ -5,6 +5,7 @@ import { IPagination } from "@/lib/types";
 export async function getNotifications(params: {
   limit?: number;
   cursor?: string;
+  type?: string;
 }): Promise<IPagination<INotification>> {
   const req = await api.post<IPagination<INotification>>(
     "/notifications",

apps/client/src/features/notification/types/notification.types.ts

@@ -3,7 +3,13 @@ export type NotificationType =
   | "comment.created"
   | "comment.resolved"
   | "page.user_mention"
-  | "page.permission_granted";
+  | "page.permission_granted"
+  | "page.updated"
+  | "page.verification_expiring"
+  | "page.verification_expired"
+  | "page.verified"
+  | "page.approval_requested"
+  | "page.approval_rejected";
 
 export type INotification = {
   id: string;
@@ -38,3 +44,5 @@ export type INotification = {
 };
 
 export type NotificationFilter = "all" | "unread";
+
+export type NotificationTab = "direct" | "updates" | "all";

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -3,6 +3,8 @@ import {
   IconArrowRight,
   IconArrowsHorizontal,
   IconDots,
+  IconEye,
+  IconEyeOff,
   IconFileExport,
   IconHistory,
   IconLink,
@@ -10,6 +12,8 @@ import {
   IconMarkdown,
   IconMessage,
   IconPrinter,
+  IconStar,
+  IconStarFilled,
   IconTrash,
   IconWifiOff,
 } from "@tabler/icons-react";
@@ -40,6 +44,20 @@ import { PageStateSegmentedControl } from "@/features/user/components/page-state
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import { PageShareModal } from "@/ee/page-permission";
+import {
+  PageVerificationMenuItem,
+  PageVerificationModal,
+} from "@/ee/page-verification";
+import {
+  useFavoriteIds,
+  useAddFavoriteMutation,
+  useRemoveFavoriteMutation,
+} from "@/features/favorite/queries/favorite-query";
+import {
+  useWatchStatusQuery,
+  useWatchPageMutation,
+  useUnwatchPageMutation,
+} from "@/features/page/queries/watcher-query";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -121,8 +139,19 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     movePageModalOpened,
     { open: openMovePageModal, close: closeMoveSpaceModal },
   ] = useDisclosure(false);
+  const [
+    verificationOpened,
+    { open: openVerificationModal, close: closeVerificationModal },
+  ] = useDisclosure(false);
   const [pageEditor] = useAtom(pageEditorAtom);
   const pageUpdatedAt = useTimeAgo(page?.updatedAt);
+  const favoriteIds = useFavoriteIds("page", page?.spaceId);
+  const addFavoriteMutation = useAddFavoriteMutation();
+  const removeFavoriteMutation = useRemoveFavoriteMutation();
+  const isFavorited = page?.id ? favoriteIds.has(page.id) : false;
+  const { data: watchStatus } = useWatchStatusQuery(page?.id);
+  const watchPage = useWatchPageMutation();
+  const unwatchPage = useUnwatchPageMutation();
 
   const handleCopyLink = () => {
     const pageUrl =
@@ -155,6 +184,16 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
   };
 
+  const handleToggleFavorite = () => {
+    if (!page?.id) return;
+    const params = { type: "page" as const, pageId: page.id };
+    if (isFavorited) {
+      removeFavoriteMutation.mutate(params);
+    } else {
+      addFavoriteMutation.mutate(params);
+    }
+  };
+
   return (
     <>
       <Menu
@@ -185,6 +224,36 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
           >
             {t("Copy as Markdown")}
           </Menu.Item>
+
+          <Menu.Item
+            leftSection={
+              isFavorited ? (
+                <IconStarFilled size={16} color="var(--mantine-color-yellow-5)" />
+              ) : (
+                <IconStar size={16} />
+              )
+            }
+            onClick={handleToggleFavorite}
+          >
+            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
+          </Menu.Item>
+
+          {watchStatus?.watching ? (
+            <Menu.Item
+              leftSection={<IconEyeOff size={16} />}
+              onClick={() => unwatchPage.mutate(page.id)}
+            >
+              {t("Stop watching")}
+            </Menu.Item>
+          ) : (
+            <Menu.Item
+              leftSection={<IconEye size={16} />}
+              onClick={() => watchPage.mutate(page.id)}
+            >
+              {t("Watch page")}
+            </Menu.Item>
+          )}
+
           <Menu.Divider />
 
           <Menu.Item leftSection={<IconArrowsHorizontal size={16} />}>
@@ -200,6 +269,13 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             {t("Page history")}
           </Menu.Item>
 
+          {!readOnly && (
+            <PageVerificationMenuItem
+              pageId={page?.id}
+              onClick={openVerificationModal}
+            />
+          )}
+
           <Menu.Divider />
 
           {!readOnly && (
@@ -289,6 +365,12 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
         onClose={closeMoveSpaceModal}
         open={movePageModalOpened}
       />
+
+      <PageVerificationModal
+        pageId={page.id}
+        opened={verificationOpened}
+        onClose={closeVerificationModal}
+      />
     </>
   );
 }

apps/client/src/features/page/components/page-import-modal.tsx

@@ -28,9 +28,11 @@ import { IPage } from "@/features/page/types/page.types.ts";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ConfluenceIcon } from "@/components/icons/confluence-icon.tsx";
-import { getFileImportSizeLimit, isCloud } from "@/lib/config.ts";
+import { getFileImportSizeLimit } from "@/lib/config.ts";
 import { formatBytes } from "@/lib";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 import { getFileTaskById } from "@/features/file-task/services/file-task-service.ts";
 import { queryClient } from "@/main.tsx";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
@@ -82,7 +84,6 @@ interface ImportFormatSelection {
 function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
   const { t } = useTranslation();
   const [treeData, setTreeData] = useAtom(treeDataAtom);
-  const [workspace] = useAtom(workspaceAtom);
   const [fileTaskId, setFileTaskId] = useState<string | null>(null);
   const emit = useQueryEmit();
 
@@ -93,8 +94,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
   const confluenceFileRef = useRef<() => void>(null);
   const zipFileRef = useRef<() => void>(null);
 
-  const canUseConfluence = isCloud() || workspace?.hasLicenseKey;
-  const canUseDocx = isCloud() || workspace?.hasLicenseKey;
+  const canUseConfluence = useHasFeature(Feature.CONFLUENCE_IMPORT);
+  const canUseDocx = useHasFeature(Feature.DOCX_IMPORT);
+  const upgradeLabel = useUpgradeLabel();
 
   const handleZipUpload = async (selectedFile: File, source: string) => {
     if (!selectedFile) {
@@ -360,7 +362,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
         >
           {(props) => (
             <Tooltip
-              label={t("Available in enterprise edition")}
+              label={upgradeLabel}
               disabled={canUseDocx}
             >
               <Button
@@ -399,7 +401,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
         >
           {(props) => (
             <Tooltip
-              label={t("Available in enterprise edition")}
+              label={upgradeLabel}
               disabled={canUseConfluence}
             >
               <Button

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

@@ -17,6 +17,7 @@ import {
   movePage,
   getPageBreadcrumbs,
   getRecentChanges,
+  getCreatedByPages,
   getAllSidebarPages,
   getDeletedPages,
   restorePage,
@@ -110,15 +111,7 @@ export function useUpdatePageMutation() {
   return useMutation<IPage, Error, Partial<IPageInput>>({
     mutationFn: (data) => updatePage(data),
     onSuccess: (data) => {
-      updatePage(data);
-
-      invalidateOnUpdatePage(
-        data.spaceId,
-        data.parentPageId,
-        data.id,
-        data.title,
-        data.icon,
-      );
+      updatePageData(data);
     },
   });
 }
@@ -252,7 +245,7 @@ export function useGetSidebarPagesQuery(
   return useInfiniteQuery({
     queryKey: ["sidebar-pages", data],
     enabled: !!data?.pageId || !!data?.spaceId,
-    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam }),
+    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam, limit: 100 }),
     initialPageParam: undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta?.nextCursor ?? undefined,
@@ -263,7 +256,7 @@ export function useGetRootSidebarPagesQuery(data: SidebarPagesParams) {
   return useInfiniteQuery({
     queryKey: ["root-sidebar-pages", data.spaceId],
     queryFn: async ({ pageParam }) => {
-      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam });
+      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam, limit: 100 });
     },
     initialPageParam: undefined,
     getNextPageParam: (lastPage) =>
@@ -293,12 +286,26 @@ export async function fetchAllAncestorChildren(params: SidebarPagesParams) {
   return buildTree(allItems);
 }
 
-export function useRecentChangesQuery(
-  spaceId?: string,
-): UseQueryResult<IPagination<IPage>, Error> {
-  return useQuery({
+export function useRecentChangesQuery(spaceId?: string) {
+  return useInfiniteQuery({
     queryKey: ["recent-changes", spaceId],
-    queryFn: () => getRecentChanges(spaceId),
+    queryFn: ({ pageParam }) =>
+      getRecentChanges({ spaceId, cursor: pageParam, limit: 15 }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+    refetchOnMount: true,
+  });
+}
+
+export function useCreatedByQuery(params?: { userId?: string; spaceId?: string }) {
+  const { userId, spaceId } = params ?? {};
+  return useInfiniteQuery({
+    queryKey: ["pages-created-by-user", { userId, spaceId }],
+    queryFn: ({ pageParam }) => getCreatedByPages({ userId, spaceId, cursor: pageParam, limit: 15 }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
     refetchOnMount: true,
   });
 }

apps/client/src/features/page/queries/watcher-query.ts

@@ -0,0 +1,43 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  watchPage,
+  unwatchPage,
+  getWatchStatus,
+} from "@/features/page/services/watcher-service";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+
+const WATCHER_KEY = "watcher";
+
+export function useWatchStatusQuery(pageId: string) {
+  return useQuery({
+    queryKey: [WATCHER_KEY, pageId],
+    queryFn: () => getWatchStatus(pageId),
+    enabled: !!pageId,
+    staleTime: 60_000,
+  });
+}
+
+export function useWatchPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  return useMutation({
+    mutationFn: (pageId: string) => watchPage(pageId),
+    onSuccess: (_data, pageId) => {
+      queryClient.setQueryData([WATCHER_KEY, pageId], { watching: true });
+      notifications.show({ message: t("You are now watching this page") });
+    },
+  });
+}
+
+export function useUnwatchPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  return useMutation({
+    mutationFn: (pageId: string) => unwatchPage(pageId),
+    onSuccess: (_data, pageId) => {
+      queryClient.setQueryData([WATCHER_KEY, pageId], { watching: false });
+      notifications.show({ message: t("You are no longer watching this page") });
+    },
+  });
+}

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

@@ -77,7 +77,7 @@ export async function getAllSidebarPages(
   const pageParams: (string | undefined)[] = [];
 
   do {
-    const req = await api.post("/pages/sidebar-pages", { ...params, cursor });
+    const req = await api.post("/pages/sidebar-pages", { ...params, cursor, limit: 100 });
 
     const data: IPagination<IPage> = req.data;
     pages.push(data);
@@ -100,9 +100,16 @@ export async function getPageBreadcrumbs(
 }
 
 export async function getRecentChanges(
-  spaceId?: string,
+  params?: QueryParams & { spaceId?: string },
 ): Promise<IPagination<IPage>> {
-  const req = await api.post("/pages/recent", { spaceId });
+  const req = await api.post("/pages/recent", params);
+  return req.data;
+}
+
+export async function getCreatedByPages(
+  params?: QueryParams & { userId?: string; spaceId?: string },
+): Promise<IPagination<IPage>> {
+  const req = await api.post("/pages/created-by-user", params);
   return req.data;
 }
 

apps/client/src/features/page/services/watcher-service.ts

@@ -0,0 +1,16 @@
+import api from "@/lib/api-client";
+
+export async function watchPage(pageId: string): Promise<{ watching: boolean }> {
+  const req = await api.post<{ watching: boolean }>("/pages/watch", { pageId });
+  return req.data;
+}
+
+export async function unwatchPage(pageId: string): Promise<{ watching: boolean }> {
+  const req = await api.post<{ watching: boolean }>("/pages/unwatch", { pageId });
+  return req.data;
+}
+
+export async function getWatchStatus(pageId: string): Promise<{ watching: boolean }> {
+  const req = await api.post<{ watching: boolean }>("/pages/watch-status", { pageId });
+  return req.data;
+}

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -28,6 +28,8 @@ import {
   IconLink,
   IconPlus,
   IconPointFilled,
+  IconStar,
+  IconStarFilled,
   IconTrash,
 } from "@tabler/icons-react";
 import {
@@ -69,6 +71,7 @@ import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sideb
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import CopyPageModal from "../../components/copy-page-modal.tsx";
 import { duplicatePage } from "../../services/page-service.ts";
+import { useFavoriteIds, useAddFavoriteMutation, useRemoveFavoriteMutation } from "@/features/favorite/queries/favorite-query";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -506,6 +509,10 @@ function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
     copyPageModalOpened,
     { open: openCopyPageModal, close: closeCopySpaceModal },
   ] = useDisclosure(false);
+  const favoriteIds = useFavoriteIds("page", spaceId);
+  const addFavorite = useAddFavoriteMutation();
+  const removeFavorite = useRemoveFavoriteMutation();
+  const isFavorited = favoriteIds.has(node.data.id);
 
   const handleCopyLink = () => {
     const pageUrl =
@@ -608,6 +615,21 @@ function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
             {t("Copy link")}
           </Menu.Item>
 
+          <Menu.Item
+            leftSection={isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (isFavorited) {
+                removeFavorite.mutate({ type: "page", pageId: node.data.id });
+              } else {
+                addFavorite.mutate({ type: "page", pageId: node.data.id });
+              }
+            }}
+          >
+            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
+          </Menu.Item>
+
           <Menu.Item
             leftSection={<IconFileExport size={16} />}
             onClick={(e) => {

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

@@ -22,6 +22,7 @@ export interface IPage {
   creator: ICreator;
   lastUpdatedBy: ILastUpdatedBy;
   deletedBy: IDeletedBy;
+  contributors?: IContributor[];
   space: Partial<ISpace>;
   permissions?: {
     canEdit: boolean;
@@ -29,6 +30,12 @@ export interface IPage {
   };
 }
 
+export interface IContributor {
+  id: string;
+  name: string;
+  avatarUrl: string;
+}
+
 interface ICreator {
   id: string;
   name: string;
@@ -68,6 +75,7 @@ export interface SidebarPagesParams {
   spaceId?: string;
   pageId?: string;
   cursor?: string;
+  limit?: number;
 }
 
 export interface IPageInput {

apps/client/src/features/search/components/search-control.module.css

@@ -29,6 +29,8 @@
     border-radius: var(--mantine-radius-sm);
     border: 1px solid;
     font-weight: bold;
+    white-space: nowrap;
+    flex-shrink: 0;
 
     @mixin light {
         color: var(--mantine-color-gray-7);

apps/client/src/features/search/components/search-spotlight-filters.tsx

@@ -22,9 +22,9 @@ import {
 import { useTranslation } from "react-i18next";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import { useLicense } from "@/ee/hooks/use-license";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 import classes from "./search-spotlight-filters.module.css";
-import { isCloud } from "@/lib/config.ts";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
@@ -42,7 +42,7 @@ export function SearchSpotlightFilters({
   isAiMode = false,
 }: SearchSpotlightFiltersProps) {
   const { t } = useTranslation();
-  const { hasLicenseKey } = useLicense();
+  const hasAttachmentIndexing = useHasFeature(Feature.ATTACHMENT_INDEXING);
   const [selectedSpaceId, setSelectedSpaceId] = useState<string | null>(
     spaceId || null,
   );
@@ -87,7 +87,7 @@ export function SearchSpotlightFilters({
     {
       value: "attachment",
       label: t("Attachments"),
-      disabled: !isCloud() && !hasLicenseKey,
+      disabled: !hasAttachmentIndexing,
     },
   ];
 

apps/client/src/features/search/components/search-spotlight.tsx

@@ -11,15 +11,16 @@ import { useUnifiedSearch } from "../hooks/use-unified-search.ts";
 import { useAiSearch } from "../../../ee/ai/hooks/use-ai-search.ts";
 import { SearchResultItem } from "./search-result-item.tsx";
 import { AiSearchResult } from "../../../ee/ai/components/ai-search-result.tsx";
-import { useLicense } from "@/ee/hooks/use-license.tsx";
-import { isCloud } from "@/lib/config.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 
 interface SearchSpotlightProps {
   spaceId?: string;
 }
 export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
   const { t } = useTranslation();
-  const { hasLicenseKey } = useLicense();
+  const hasAiFeature = useHasFeature(Feature.AI);
+  const hasAttachmentIndexing = useHasFeature(Feature.ATTACHMENT_INDEXING);
   const [query, setQuery] = useState("");
   const [debouncedSearchQuery] = useDebouncedValue(query, 300);
   const [filters, setFilters] = useState<{
@@ -84,7 +85,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
 
   // Determine result type for rendering
   const isAttachmentSearch =
-    filters.contentType === "attachment" && (hasLicenseKey || isCloud());
+    filters.contentType === "attachment" && hasAttachmentIndexing;
 
   const resultItems = (searchResults || []).map((result) => (
     <SearchResultItem
@@ -134,7 +135,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
               }
             }}
           />
-          {isAiMode && hasLicenseKey && (
+          {isAiMode && hasAiFeature && (
             <Button
               size="xs"
               leftSection={<IconSparkles size={16} />}

apps/client/src/features/search/hooks/use-unified-search.ts

@@ -8,8 +8,8 @@ import {
   IPageSearch,
   IPageSearchParams,
 } from "@/features/search/types/search.types";
-import { useLicense } from "@/ee/hooks/use-license";
-import { isCloud } from "@/lib/config";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 
 export type UnifiedSearchResult = IPageSearch | IAttachmentSearch;
 
@@ -21,10 +21,10 @@ export function useUnifiedSearch(
   params: UseUnifiedSearchParams,
   enabled: boolean = true,
 ): UseQueryResult<UnifiedSearchResult[], Error> {
-  const { hasLicenseKey } = useLicense();
+  const hasAttachmentIndexing = useHasFeature(Feature.ATTACHMENT_INDEXING);
 
   const isAttachmentSearch =
-    params.contentType === "attachment" && (isCloud() || hasLicenseKey);
+    params.contentType === "attachment" && hasAttachmentIndexing;
   const searchType = isAttachmentSearch ? "attachment" : "page";
 
   return useQuery({

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/session/components/session-list.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import {
+  Button,
+  Divider,
+  Group,
+  Skeleton,
+  Stack,
+  Table,
+  Text,
+} from "@mantine/core";
+import { IconDevices } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  useGetSessionsQuery,
+  useRevokeSessionMutation,
+  useRevokeAllSessionsMutation,
+} from "@/features/session/queries/session-query";
+import { formattedDate } from "@/lib/time";
+
+const PAGE_SIZE = 5;
+
+export default function SessionList() {
+  const { t } = useTranslation();
+  const { data: sessions, isLoading } = useGetSessionsQuery();
+  const revokeSessionMutation = useRevokeSessionMutation();
+  const revokeAllSessionsMutation = useRevokeAllSessionsMutation();
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+
+  const otherSessions = sessions?.filter((s) => !s?.isCurrentDevice) ?? [];
+  const visibleSessions = sessions?.slice(0, visibleCount) ?? [];
+  const hasMore = sessions && visibleCount < sessions.length;
+
+  if (isLoading) {
+    return (
+      <Table verticalSpacing="md">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Device Name")}</Table.Th>
+            <Table.Th>{t("Last Active")}</Table.Th>
+            <Table.Th />
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {[1, 2, 3].map((i) => (
+            <Table.Tr key={i}>
+              <Table.Td>
+                <Group gap="xs">
+                  <Skeleton height={18} width={18} radius="sm" />
+                  <Skeleton height={14} width={140} radius="xs" />
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Skeleton height={14} width={120} radius="xs" />
+              </Table.Td>
+              <Table.Td>
+                <Skeleton height={30} width={70} radius="sm" />
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    );
+  }
+
+  return (
+    <Stack>
+      {otherSessions.length > 0 && (
+        <>
+          <div>
+            <Text fw={500}>{t("Log out of all devices")}</Text>
+            <Group justify="space-between" align="center" mt={4}>
+              <Text size="sm" c="dimmed">
+                {t(
+                  "Log out of all sessions except this device",
+                )}
+              </Text>
+              <Button
+                variant="outline"
+                color="red"
+                size="xs"
+                loading={revokeAllSessionsMutation.isPending}
+                onClick={() => revokeAllSessionsMutation.mutate()}
+              >
+                {t("Log out of all devices")}
+              </Button>
+            </Group>
+          </div>
+          <Divider />
+        </>
+      )}
+
+      <Table verticalSpacing="md">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Device Name")}</Table.Th>
+            <Table.Th>{t("Last Active")}</Table.Th>
+            {otherSessions.length > 0 && <Table.Th />}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {visibleSessions.map((session) => (
+            <Table.Tr key={session.id}>
+              <Table.Td>
+                <Group gap="xs">
+                  <IconDevices size={18} stroke={1.5} />
+                  <div>
+                    <Text size="sm">
+                      {session.deviceName || t("Unknown device")}
+                    </Text>
+                    {session?.isCurrentDevice && (
+                      <Text size="xs" c="blue">
+                        {t("This Device")}
+                      </Text>
+                    )}
+                  </div>
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Text size="sm">
+                  {session?.isCurrentDevice
+                    ? t("Now")
+                    : formattedDate(new Date(session.lastActiveAt))}
+                </Text>
+              </Table.Td>
+              {otherSessions.length > 0 && (
+                <Table.Td>
+                  {!session?.isCurrentDevice && (
+                    <Button
+                      variant="outline"
+                      size="xs"
+                      loading={revokeSessionMutation.isPending}
+                      onClick={() =>
+                        revokeSessionMutation.mutate({
+                          sessionId: session.id,
+                        })
+                      }
+                    >
+                      {t("Log out")}
+                    </Button>
+                  )}
+                </Table.Td>
+              )}
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+
+      {hasMore && (
+        <Button
+          variant="subtle"
+          size="xs"
+          onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
+        >
+          {t("Load more")}
+        </Button>
+      )}
+
+      {(!sessions || sessions.length === 0) && (
+        <Text size="sm" c="dimmed" ta="center">
+          {t("No active sessions")}
+        </Text>
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,55 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  getSessions,
+  revokeSession,
+  revokeAllSessions,
+} from "@/features/session/services/session-service";
+import { ISession } from "@/features/session/types/session.types";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+
+export function useGetSessionsQuery(): UseQueryResult<ISession[], Error> {
+  return useQuery({
+    queryKey: ["session-list"],
+    queryFn: () => getSessions(),
+  });
+}
+
+export function useRevokeSessionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, { sessionId: string }>({
+    mutationFn: (data) => revokeSession(data),
+    onSuccess: () => {
+      notifications.show({ message: t("Session revoked") });
+      queryClient.invalidateQueries({ queryKey: ["session-list"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
+export function useRevokeAllSessionsMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, void>({
+    mutationFn: () => revokeAllSessions(),
+    onSuccess: () => {
+      notifications.show({ message: t("All other sessions revoked") });
+      queryClient.invalidateQueries({ queryKey: ["session-list"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}

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

@@ -0,0 +1,17 @@
+import api from "@/lib/api-client";
+import { ISession } from "@/features/session/types/session.types";
+
+export async function getSessions(): Promise<ISession[]> {
+  const req = await api.post<{ sessions: ISession[] }>("/sessions");
+  return req.data.sessions;
+}
+
+export async function revokeSession(data: {
+  sessionId: string;
+}): Promise<void> {
+  await api.post("/sessions/revoke", data);
+}
+
+export async function revokeAllSessions(): Promise<void> {
+  await api.post("/sessions/revoke-all");
+}