switch to menu component

clear existing output
sanitize output
2026-05-07 22:53:08 +08:00 · 2026-02-06 21:32:42 -08:00 · 2026-02-06 18:06:11 -08:00 · 2026-02-06 17:56:28 -08:00 · 2026-02-06 17:55:01 -08:00 · 2026-02-06 12:14:33 -08:00
119 changed files with 4248 additions and 1666 deletions
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.24.1",
+  "version": "0.25.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -123,6 +123,8 @@
  "page": "Seite",
  "Page deleted successfully": "Seite erfolgreich gelöscht",
  "Page history": "Seitengeschichte",
+  "Select version": "Version auswählen",
+  "Highlight changes": "Änderungen hervorheben",
  "Page import is in progress. Please do not close this tab.": "Der Seitenimport läuft. Bitte schließen Sie diesen Tab nicht.",
  "Pages": "Seiten",
  "pages": "Seiten",
@@ -123,6 +123,8 @@
  "page": "page",
  "Page deleted successfully": "Page deleted successfully",
  "Page history": "Page history",
+  "Select version": "Select version",
+  "Highlight changes": "Highlight changes",
  "Page import is in progress. Please do not close this tab.": "Page import is in progress. Please do not close this tab.",
  "Pages": "Pages",
  "pages": "pages",
@@ -123,6 +123,8 @@
  "page": "página",
  "Page deleted successfully": "Página eliminada con éxito",
  "Page history": "Historial de la página",
+  "Select version": "Seleccionar versión",
+  "Highlight changes": "Resaltar cambios",
  "Page import is in progress. Please do not close this tab.": "La importación de la página está en curso. Por favor, no cierre esta pestaña.",
  "Pages": "Páginas",
  "pages": "páginas",
@@ -123,6 +123,8 @@
  "page": "page",
  "Page deleted successfully": "Page supprimée avec succès",
  "Page history": "Historique de la page",
+  "Select version": "Sélectionner la version",
+  "Highlight changes": "Mettre en évidence les changements",
  "Page import is in progress. Please do not close this tab.": "L'importation de la page est en cours. Veuillez ne pas fermer cet onglet.",
  "Pages": "Pages",
  "pages": "pages",
@@ -123,6 +123,8 @@
  "page": "pagina",
  "Page deleted successfully": "Pagina eliminata con successo",
  "Page history": "Cronologia della pagina",
+  "Select version": "Seleziona versione",
+  "Highlight changes": "Evidenzia modifiche",
  "Page import is in progress. Please do not close this tab.": "L'importazione della pagina è in corso. Si prega di non chiudere questa scheda.",
  "Pages": "Pagine",
  "pages": "pagine",
@@ -123,6 +123,8 @@
  "page": "ページ",
  "Page deleted successfully": "ページを削除しました",
  "Page history": "ページ履歴",
+  "Select version": "バージョンを選択",
+  "Highlight changes": "変更を強調表示",
  "Page import is in progress. Please do not close this tab.": "ページをインポート中です。このタブを閉じないでください",
  "Pages": "ページ",
  "pages": "ページ",
@@ -123,6 +123,8 @@
  "page": "페이지",
  "Page deleted successfully": "페이지 삭제 완료",
  "Page history": "페이지 기록",
+  "Select version": "버전 선택",
+  "Highlight changes": "변경 사항 강조",
  "Page import is in progress. Please do not close this tab.": "페이지 가져오기가 진행 중입니다. 이 탭을 닫지 마세요.",
  "Pages": "페이지",
  "pages": "페이지",
@@ -123,6 +123,8 @@
  "page": "pagina",
  "Page deleted successfully": "Pagina succesvol verwijderd",
  "Page history": "Pagina geschiedenis",
+  "Select version": "Selecteer versie",
+  "Highlight changes": "Wijzigingen markeren",
  "Page import is in progress. Please do not close this tab.": "Importeren van pagina's is bezig. Sluit dit tabblad niet.",
  "Pages": "Pagina's",
  "pages": "pagina's",
@@ -123,6 +123,8 @@
  "page": "página",
  "Page deleted successfully": "Página excluída com sucesso",
  "Page history": "Histórico da página",
+  "Select version": "Selecionar versão",
+  "Highlight changes": "Destacar alterações",
  "Page import is in progress. Please do not close this tab.": "A importação da página está em andamento. Por favor, não feche esta aba.",
  "Pages": "Páginas",
  "pages": "páginas",
@@ -123,6 +123,8 @@
  "page": "страница",
  "Page deleted successfully": "Страница успешно удалена",
  "Page history": "История страницы",
+  "Select version": "Выбрать версию",
+  "Highlight changes": "Выделить изменения",
  "Page import is in progress. Please do not close this tab.": "Импорт страницы в процессе. Пожалуйста, не закрывайте эту вкладку.",
  "Pages": "Страницы",
  "pages": "страницы",
@@ -123,6 +123,8 @@
  "page": "сторінка",
  "Page deleted successfully": "Сторінку успішно видалено",
  "Page history": "Історія сторінки",
+  "Select version": "Вибрати версію",
+  "Highlight changes": "Підсвітити зміни",
  "Page import is in progress. Please do not close this tab.": "Імпорт сторінки в процесі. Будь ласка, не закривайте цю вкладку.",
  "Pages": "Сторінки",
  "pages": "сторінки",
@@ -123,6 +123,8 @@
  "page": "个页面",
  "Page deleted successfully": "页面已成功删除",
  "Page history": "页面历史",
+  "Select version": "选择版本",
+  "Highlight changes": "突出显示更改",
  "Page import is in progress. Please do not close this tab.": "页面导入正在进行中。请不要关闭此标签页。",
  "Pages": "页面",
  "pages": "个页面",
@@ -2,17 +2,17 @@ import { Button, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";

 export interface PagePaginationProps {
-  currentPage: number;
  hasPrevPage: boolean;
  hasNextPage: boolean;
-  onPageChange: (newPage: number) => void;
+  onPrev: () => void;
+  onNext: () => void;
 }

 export default function Paginate({
-  currentPage,
  hasPrevPage,
  hasNextPage,
-  onPageChange,
+  onPrev,
+  onNext,
 }: PagePaginationProps) {
  const { t } = useTranslation();

@@ -25,7 +25,7 @@ export default function Paginate({
      <Button
        variant="default"
        size="compact-sm"
-        onClick={() => onPageChange(currentPage - 1)}
+        onClick={onPrev}
        disabled={!hasPrevPage}
      >
        {t("Prev")}
@@ -34,7 +34,7 @@ export default function Paginate({
      <Button
        variant="default"
        size="compact-sm"
-        onClick={() => onPageChange(currentPage + 1)}
+        onClick={onNext}
        disabled={!hasNextPage}
      >
        {t("Next")}
@@ -13,7 +13,7 @@ import { getShares } from "@/features/share/services/share-service.ts";
 import { getApiKeys } from "@/ee/api-key";

 export const prefetchWorkspaceMembers = () => {
-  const params = { limit: 100, page: 1, query: "" } as QueryParams;
+  const params: QueryParams = { limit: 100, query: "" };
  queryClient.prefetchQuery({
    queryKey: ["workspaceMembers", params],
    queryFn: () => getWorkspaceMembers(params),
@@ -22,15 +22,15 @@ export const prefetchWorkspaceMembers = () => {

 export const prefetchSpaces = () => {
  queryClient.prefetchQuery({
-    queryKey: ["spaces", { page: 1 }],
-    queryFn: () => getSpaces({ page: 1 }),
+    queryKey: ["spaces", {}],
+    queryFn: () => getSpaces({}),
  });
 };

 export const prefetchGroups = () => {
  queryClient.prefetchQuery({
-    queryKey: ["groups", { page: 1 }],
-    queryFn: () => getGroups({ page: 1 }),
+    queryKey: ["groups", {}],
+    queryFn: () => getGroups({}),
  });
 };

@@ -62,21 +62,21 @@ export const prefetchSsoProviders = () => {

 export const prefetchShares = () => {
  queryClient.prefetchQuery({
-    queryKey: ["share-list", { page: 1 }],
-    queryFn: () => getShares({ page: 1, limit: 100 }),
+    queryKey: ["share-list", {}],
+    queryFn: () => getShares({}),
  });
 };

 export const prefetchApiKeys = () => {
  queryClient.prefetchQuery({
-    queryKey: ["api-key-list", { page: 1 }],
-    queryFn: () => getApiKeys({ page: 1 }),
+    queryKey: ["api-key-list", {}],
+    queryFn: () => getApiKeys({}),
  });
 };

 export const prefetchApiKeyManagement = () => {
  queryClient.prefetchQuery({
-    queryKey: ["api-key-list", { page: 1 }],
-    queryFn: () => getApiKeys({ page: 1, adminView: true }),
+    queryKey: ["api-key-list", { adminView: true }],
+    queryFn: () => getApiKeys({ adminView: true }),
  });
 };
@@ -10,19 +10,19 @@ import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-moda
 import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
 import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
 import Paginate from "@/components/common/paginate";
-import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
 import { IApiKey } from "@/ee/api-key";

 export default function UserApiKeys() {
  const { t } = useTranslation();
-  const { page, setPage } = usePaginateAndSearch();
+  const { cursor, goNext, goPrev } = useCursorPaginate();
  const [createModalOpened, setCreateModalOpened] = useState(false);
  const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
  const [updateModalOpened, setUpdateModalOpened] = useState(false);
  const [revokeModalOpened, setRevokeModalOpened] = useState(false);
  const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
-  const { data, isLoading } = useGetApiKeysQuery({ page });
+  const { data, isLoading } = useGetApiKeysQuery({ cursor });

  const handleCreateSuccess = (response: IApiKey) => {
    setCreatedApiKey(response);
@@ -65,10 +65,10 @@ export default function UserApiKeys() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}

@@ -10,20 +10,20 @@ import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-moda
 import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
 import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
 import Paginate from "@/components/common/paginate";
-import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
 import { IApiKey } from "@/ee/api-key";
 import useUserRole from '@/hooks/use-user-role.tsx';

 export default function WorkspaceApiKeys() {
  const { t } = useTranslation();
-  const { page, setPage } = usePaginateAndSearch();
+  const { cursor, goNext, goPrev } = useCursorPaginate();
  const [createModalOpened, setCreateModalOpened] = useState(false);
  const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
  const [updateModalOpened, setUpdateModalOpened] = useState(false);
  const [revokeModalOpened, setRevokeModalOpened] = useState(false);
  const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
-  const { data, isLoading } = useGetApiKeysQuery({ page, adminView: true });
+  const { data, isLoading } = useGetApiKeysQuery({ cursor, adminView: true });
  const { isAdmin } = useUserRole();

  if (!isAdmin) {
@@ -76,10 +76,10 @@ export default function WorkspaceApiKeys() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}

@@ -43,7 +43,7 @@ export default function SsoProviderList() {
    return null;
  }

-  if (data?.length === 0) {
+  if (data?.items.length === 0) {
    return <Text c="dimmed">{t("No SSO providers found.")}</Text>;
  }

@@ -81,7 +81,7 @@ export default function SsoProviderList() {
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
-              {data
+              {data?.items
                .sort((a, b) => {
                  const enabledDiff = Number(b.isEnabled) - Number(a.isEnabled);
                  if (enabledDiff !== 0) return enabledDiff;
@@ -104,7 +104,11 @@ export default function SsoProviderList() {
                      </Group>
                    </Table.Td>
                    <Table.Td>
-                      <Badge color={"gray"} variant="light" style={{ whiteSpace: "nowrap" }}>
+                      <Badge
+                        color={"gray"}
+                        variant="light"
+                        style={{ whiteSpace: "nowrap" }}
+                      >
                        {provider.type.toUpperCase()}
                      </Badge>
                    </Table.Td>
@@ -134,41 +138,41 @@ export default function SsoProviderList() {
                    </Table.Td>
                    <Table.Td>
                      <Group gap="xs" wrap="nowrap">
-                      <ActionIcon
-                        variant="subtle"
-                        color="gray"
-                        onClick={() => handleEdit(provider)}
-                      >
-                        <IconPencil size={16} />
-                      </ActionIcon>
-                      <Menu
-                        transitionProps={{ transition: "pop" }}
-                        withArrow
-                        position="bottom-end"
-                        withinPortal
-                      >
-                        <Menu.Target>
-                          <ActionIcon variant="subtle" color="gray">
-                            <IconDots size={16} />
-                          </ActionIcon>
-                        </Menu.Target>
-                        <Menu.Dropdown>
-                          <Menu.Item
-                            onClick={() => handleEdit(provider)}
-                            leftSection={<IconPencil size={16} />}
-                          >
-                            {t("Edit")}
-                          </Menu.Item>
-                          <Menu.Item
-                            onClick={() => openDeleteModal(provider.id)}
-                            leftSection={<IconTrash size={16} />}
-                            color="red"
-                            disabled={provider.type === SSO_PROVIDER.GOOGLE}
-                          >
-                            {t("Delete")}
-                          </Menu.Item>
-                        </Menu.Dropdown>
-                      </Menu>
+                        <ActionIcon
+                          variant="subtle"
+                          color="gray"
+                          onClick={() => handleEdit(provider)}
+                        >
+                          <IconPencil size={16} />
+                        </ActionIcon>
+                        <Menu
+                          transitionProps={{ transition: "pop" }}
+                          withArrow
+                          position="bottom-end"
+                          withinPortal
+                        >
+                          <Menu.Target>
+                            <ActionIcon variant="subtle" color="gray">
+                              <IconDots size={16} />
+                            </ActionIcon>
+                          </Menu.Target>
+                          <Menu.Dropdown>
+                            <Menu.Item
+                              onClick={() => handleEdit(provider)}
+                              leftSection={<IconPencil size={16} />}
+                            >
+                              {t("Edit")}
+                            </Menu.Item>
+                            <Menu.Item
+                              onClick={() => openDeleteModal(provider.id)}
+                              leftSection={<IconTrash size={16} />}
+                              color="red"
+                              disabled={provider.type === SSO_PROVIDER.GOOGLE}
+                            >
+                              {t("Delete")}
+                            </Menu.Item>
+                          </Menu.Dropdown>
+                        </Menu>
                      </Group>
                    </Table.Td>
                  </Table.Tr>
@@ -13,8 +13,9 @@ import {
 } from "@/ee/security/services/security-service.ts";
 import { notifications } from "@mantine/notifications";
 import { IAuthProvider } from "@/ee/security/types/security.types.ts";
+import { IPagination } from "@/lib/types.ts";

-export function useGetSsoProviders(): UseQueryResult<IAuthProvider[], Error> {
+export function useGetSsoProviders(): UseQueryResult<IPagination<IAuthProvider>, Error> {
  return useQuery({
    queryKey: ["sso-providers"],
    queryFn: () => getSsoProviders(),
@@ -1,5 +1,6 @@
 import api from "@/lib/api-client.ts";
 import { IAuthProvider } from "@/ee/security/types/security.types.ts";
+import { IPagination } from "@/lib/types.ts";

 export async function getSsoProviderById(data: {
  providerId: string;
@@ -8,8 +9,8 @@ export async function getSsoProviderById(data: {
  return req.data;
 }

-export async function getSsoProviders(): Promise<IAuthProvider[]> {
-  const req = await api.post<IAuthProvider[]>("/sso/providers");
+export async function getSsoProviders(): Promise<IPagination<IAuthProvider>> {
+  const req = await api.post<IPagination<IAuthProvider>>("/sso/providers");
  return req.data;
 }

@@ -8,3 +8,5 @@ export const titleEditorAtom = atom<Editor | null>(null);
 export const readOnlyEditorAtom = atom<Editor | null>(null);

 export const yjsConnectionStatusAtom = atom<string>("");
+
+export const showAiMenuAtom = atom(false);
@@ -0,0 +1,22 @@
+.aiMenu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 2.25rem;
+}
+.menuItemSelected {
+  background-color: var(--mantine-color-gray-1);
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.resultPreviewWrapper {
+  *:first-child {
+    margin-top: 0;
+  }
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
@@ -0,0 +1,303 @@
+import { Editor } from "@tiptap/react";
+import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
+import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAtom } from "jotai";
+import { IconSend } from "@tabler/icons-react";
+import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query";
+import { AiAction } from "@/ee/ai/types/ai.types";
+import { CommandItem, commandItems, CommandSet } from "./command-items";
+import { CommandSelector } from "./command-selector";
+import { ResultPreview } from "./result-preview";
+import classes from "./ai-menu.module.css";
+import { marked } from "marked";
+
+interface EditorAiMenuProps {
+  editor: Editor | null;
+}
+
+const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
+  const aiGenerateStreamMutation = useAiGenerateStreamMutation();
+  const isSmBreakpoint = useMediaQuery("(max-width: 48em)");
+  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [prompt, setPrompt] = useState("");
+  const [output, setOutput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [activeCommandSet, setActiveCommandSet] = useState<CommandSet>("main");
+  const [lastAction, setLastAction] = useState<CommandItem | null>(null);
+  const [menuPlacement, setMenuPlacement] = useState<{
+    top: number;
+    left: number;
+    width: number;
+  }>({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+  const currentItems = useMemo(() => {
+    return commandItems[activeCommandSet].filter((item) => {
+      return item.name.toLowerCase().includes(prompt.toLowerCase());
+    });
+  }, [prompt, output, activeCommandSet]);
+  const updateMenuPlacement = useCallback(() => {
+    if (!editor || !showAiMenu) return;
+
+    const { view } = editor;
+    const { to } = editor.state.selection;
+    const editorRect = view.dom.getBoundingClientRect();
+    const cursorCoords = view.coordsAtPos(to);
+    const topOffset = 8;
+    const editorPadding = isSmBreakpoint ? 16 : 48;
+
+    setMenuPlacement({
+      top: cursorCoords.bottom + topOffset,
+      left: editorRect.left + editorPadding,
+      width: editorRect.width - editorPadding * 2,
+    });
+  }, [editor, showAiMenu, isSmBreakpoint]);
+  const resetMenu = useCallback(() => {
+    setPrompt("");
+    setOutput("");
+    setActiveCommandSet("main");
+    setLastAction(null);
+    aiGenerateStreamMutation.reset();
+  }, [aiGenerateStreamMutation.reset]);
+  const debouncedUpdateMenuPlacement = useDebouncedCallback(
+    updateMenuPlacement,
+    60,
+  );
+  const handleGenerate = useCallback(
+    (item?: CommandItem) => {
+      if (!editor || isLoading) return;
+
+      let command: CommandItem | null = item || null;
+
+      if (!command) {
+        if (!prompt) return;
+
+        command = {
+          id: "custom",
+          name: "Custom",
+          action: AiAction.CUSTOM,
+          prompt,
+        };
+      }
+
+      const { from, to } = editor.state.selection;
+      const content = editor.state.doc.textBetween(from, to);
+
+      setOutput("");
+      setIsLoading(true);
+      aiGenerateStreamMutation.mutate({
+        action: command.action,
+        prompt: command.prompt,
+        content,
+        onChunk: (chunk) => {
+          setOutput((output) => output + chunk.content);
+        },
+        onComplete: () => {
+          setIsLoading(false);
+          setActiveCommandSet("result");
+        },
+        onError: () => {
+          setIsLoading(false);
+          resetMenu();
+        },
+      });
+      setLastAction(command);
+    },
+    [
+      editor,
+      prompt,
+      isLoading,
+      aiGenerateStreamMutation.mutateAsync,
+      resetMenu,
+    ],
+  );
+  const handleCommand = useCallback(
+    (item?: CommandItem) => {
+      setPrompt("");
+
+      if (!item) {
+        return handleGenerate();
+      }
+      if (item.id === "back") {
+        return setActiveCommandSet("main");
+      }
+      if (item.id === "result-replace") {
+        const chain = editor.chain().focus();
+
+        if (lastAction.action === AiAction.CONTINUE_WRITING) {
+          chain.setTextSelection(editor.state.selection.to);
+        }
+
+        chain.insertContent(marked.parse(output)).run();
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-insert-below") {
+        editor
+          .chain()
+          .focus()
+          .setTextSelection(editor.state.selection.to)
+          .insertContent(marked.parse(output))
+          .run();
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-copy") {
+        navigator.clipboard.writeText(output);
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-discard") {
+        setOutput("");
+
+        return resetMenu();
+      }
+      if (item.id === "result-try-again" && lastAction) {
+        return handleGenerate(lastAction);
+      }
+      if (item.subCommandSet) {
+        return setActiveCommandSet(item.subCommandSet);
+      }
+
+      return handleGenerate(item);
+    },
+    [editor, output, lastAction, handleGenerate, resetMenu],
+  );
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const totalItems = currentItems.length;
+      const cycleSize = totalItems + 1;
+
+      if (event.key === "Escape") {
+        return setShowAiMenu(false);
+      }
+
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+
+        return setSelectedIndex((selectedIndex) => {
+          const direction = event.key === "ArrowDown" ? 1 : -1;
+          const newIndex = selectedIndex + direction;
+
+          if (newIndex < -1) return cycleSize - 1;
+          if (newIndex >= cycleSize) return 0;
+
+          return newIndex;
+        });
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        return handleCommand(currentItems[selectedIndex]);
+      }
+    },
+    [currentItems, selectedIndex],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleClose = () => setShowAiMenu(false);
+    const observer = new ResizeObserver(() => {
+      debouncedUpdateMenuPlacement();
+    });
+
+    updateMenuPlacement();
+    editor.on("focus", handleClose);
+    editor.on("blur", handleClose);
+    window.addEventListener("resize", debouncedUpdateMenuPlacement);
+    window.addEventListener("scroll", debouncedUpdateMenuPlacement, true);
+    observer.observe(editor.view.dom);
+
+    return () => {
+      editor.off("focus", handleClose);
+      editor.off("blur", handleClose);
+      window.removeEventListener("resize", debouncedUpdateMenuPlacement);
+      window.removeEventListener("scroll", debouncedUpdateMenuPlacement, true);
+      observer.disconnect();
+    };
+  }, [editor, updateMenuPlacement, debouncedUpdateMenuPlacement]);
+
+  useEffect(() => {
+    if (showAiMenu) {
+      resetMenu();
+    }
+  }, [showAiMenu, resetMenu]);
+  useEffect(() => {
+    // Focus input when menu opens or command set changes
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  }, [showAiMenu, isLoading, currentItems]);
+  useEffect(() => {
+    if (!currentItems.length) {
+      setSelectedIndex(-1);
+    }
+    setSelectedIndex(prompt || activeCommandSet !== "main" ? 0 : -1);
+  }, [prompt, activeCommandSet, currentItems]);
+
+  if (!showAiMenu) return null;
+
+  return createPortal(
+    <div
+      style={{
+        zIndex: 200,
+        position: "fixed",
+        top: menuPlacement.top,
+        left: menuPlacement.left,
+        width: menuPlacement.width,
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        className={classes.aiMenu}
+        style={{ pointerEvents: "auto" }}
+        tabIndex={0}
+        ref={containerRef}
+      >
+        <ResultPreview output={output} isLoading={isLoading} />
+        <CommandSelector
+          selectedIndex={selectedIndex}
+          isLoading={isLoading}
+          output={output}
+          currentItems={currentItems}
+          handleCommand={handleCommand}
+        >
+          <TextInput
+            ref={inputRef}
+            style={{ width: "100%" }}
+            placeholder="Ask AI..."
+            data-autofocus
+            value={prompt}
+            disabled={isLoading}
+            onChange={(e) => setPrompt(e.currentTarget.value)}
+            rightSection={
+              <Tooltip label="Ask AI">
+                <ActionIcon
+                  disabled={!prompt || isLoading}
+                  variant="transparent"
+                  onClick={() => handleGenerate()}
+                >
+                  <IconSend size={16} />
+                </ActionIcon>
+              </Tooltip>
+            }
+            onKeyDown={handleKeyDown}
+          />
+        </CommandSelector>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export { EditorAiMenu };
@@ -0,0 +1,164 @@
+import { AiAction } from "@/ee/ai/types/ai.types";
+import {
+  IconSparkles,
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconWriting,
+  IconHelp,
+  IconList,
+  IconMoodSmile,
+  IconLanguage,
+  IconTrash,
+  IconRefresh,
+  IconChevronLeft,
+  IconCheck,
+  IconArrowDownLeft,
+  IconCopy,
+  IconTextPlus,
+  IconAlignJustified,
+} from "@tabler/icons-react";
+
+interface CommandItem {
+  name: string;
+  id: string;
+  icon?: typeof IconSparkles;
+  action?: AiAction;
+  prompt?: string;
+  subCommandSet?: CommandSet;
+}
+
+type CommandSet = "main" | "tone" | "translate" | "result";
+
+const mainItems: CommandItem[] = [
+  {
+    id: "improve-writing",
+    name: "Improve writing",
+    icon: IconSparkles,
+    action: AiAction.IMPROVE_WRITING,
+  },
+  {
+    id: "fix-spelling-grammar",
+    name: "Fix spelling & grammar",
+    icon: IconCheck,
+    action: AiAction.FIX_SPELLING_GRAMMAR,
+  },
+  {
+    id: "make-longer",
+    name: "Make longer",
+    icon: IconTextPlus,
+    action: AiAction.MAKE_LONGER,
+  },
+  {
+    id: "make-shorter",
+    name: "Make shorter",
+    icon: IconAlignJustified,
+    action: AiAction.MAKE_SHORTER,
+  },
+  {
+    id: "continue-writing",
+    name: "Continue writing",
+    icon: IconWriting,
+    action: AiAction.CONTINUE_WRITING,
+  },
+  {
+    id: "explain",
+    name: "Explain",
+    icon: IconHelp,
+    action: AiAction.CUSTOM,
+    prompt: "Explain this text",
+  },
+  {
+    id: "summarize",
+    name: "Summarize",
+    icon: IconList,
+    action: AiAction.SUMMARIZE,
+  },
+  {
+    id: "change-tone",
+    name: "Change tone",
+    icon: IconMoodSmile,
+    subCommandSet: "tone",
+  },
+  {
+    id: "translate",
+    name: "Translate",
+    icon: IconLanguage,
+    subCommandSet: "translate",
+  },
+];
+const toneItems: CommandItem[] = [
+  {
+    id: "back",
+    name: "Back",
+    icon: IconChevronLeft,
+  },
+  {
+    id: "tone-professional",
+    name: "Professional",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Professional",
+  },
+  {
+    id: "tone-casual",
+    name: "Casual",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Casual",
+  },
+  {
+    id: "tone-friendly",
+    name: "Friendly",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Friendly",
+  },
+];
+const translateItems: CommandItem[] = [
+  {
+    id: "back",
+    name: "Back",
+    icon: IconChevronLeft,
+  },
+  {
+    id: "translate-english",
+    name: "English",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "English",
+  },
+  {
+    id: "translate-french",
+    name: "French",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "French",
+  },
+  {
+    id: "translate-german",
+    name: "German",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "German",
+  },
+];
+const resultItems: CommandItem[] = [
+  { id: "result-replace", name: "Replace", icon: IconCheck },
+  { id: "result-insert-below", name: "Insert below", icon: IconArrowDownLeft },
+  { id: "result-copy", name: "Copy", icon: IconCopy },
+  { id: "result-discard", name: "Discard", icon: IconTrash },
+  {
+    id: "result-try-again",
+    name: "Try again",
+    icon: IconRefresh,
+  },
+];
+const commandItems: Record<CommandSet, CommandItem[]> = {
+  main: mainItems,
+  tone: toneItems,
+  translate: translateItems,
+  result: resultItems,
+};
+
+export type { CommandItem, CommandSet };
+export { commandItems };
@@ -0,0 +1,71 @@
+import { Loader, Menu, ScrollArea } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import { CommandItem } from "./command-items";
+import classes from "./ai-menu.module.css";
+
+interface CommandSelectorProps {
+  selectedIndex: number;
+
+  isLoading: boolean;
+  output: string;
+  currentItems: CommandItem[];
+  children: ReactNode;
+  handleCommand(item: CommandItem): void;
+}
+
+const CommandSelector = ({
+  selectedIndex,
+  children,
+  isLoading,
+  output,
+  currentItems,
+  handleCommand,
+}: CommandSelectorProps) => {
+  return (
+    <Menu
+      opened={!isLoading && currentItems.length > 0}
+      position="bottom-start"
+      offset={4}
+      width={250}
+      trapFocus={false}
+      shadow="lg"
+    >
+      <Menu.Target>{children}</Menu.Target>
+      <Menu.Dropdown>
+        <ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
+          {currentItems.map((item, index) => {
+            const isSelected = selectedIndex === index;
+            const showLoader =
+              isLoading && output === "" && !item.subCommandSet;
+
+            return (
+              <Menu.Item
+                key={item.id}
+                className={isSelected ? classes.menuItemSelected : undefined}
+                leftSection={
+                  showLoader ? (
+                    <Loader size={14} />
+                  ) : item.icon ? (
+                    <item.icon size={16} />
+                  ) : undefined
+                }
+                rightSection={
+                  item.subCommandSet ? (
+                    <IconChevronRight size={14} />
+                  ) : undefined
+                }
+                onClick={() => handleCommand(item)}
+                disabled={isLoading}
+              >
+                {item.name}
+              </Menu.Item>
+            );
+          })}
+        </ScrollArea.Autosize>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
+
+export { CommandSelector };
@@ -0,0 +1,31 @@
+import { Loader, Paper, Text } from "@mantine/core";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { memo } from "react";
+import classes from "./ai-menu.module.css";
+
+interface ResultPreviewProps {
+  output: string;
+  isLoading: boolean;
+}
+const ResultPreview = memo(({ output, isLoading }: ResultPreviewProps) => {
+  if (!output && !isLoading) return;
+
+  const parsedOutput = `${marked.parse(output)}`;
+
+  return (
+    <Paper p="sm" mb={4} shadow="lg" withBorder>
+      <Text size="sm" component="div">
+        {parsedOutput && (
+          <div
+            className={classes.resultPreviewWrapper}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedOutput) }}
+          />
+        )}
+        {isLoading && <Loader size={12} ml="xs" display="inline-block" />}
+      </Text>
+    </Paper>
+  );
+});
+
+export { ResultPreview };
@@ -9,10 +9,11 @@ import {
  IconStrikethrough,
  IconUnderline,
  IconMessage,
+  IconSparkles,
 } from "@tabler/icons-react";
 import clsx from "clsx";
 import classes from "./bubble-menu.module.css";
-import { ActionIcon, rem, Tooltip } from "@mantine/core";
+import { ActionIcon, Button, rem, Tooltip } from "@mantine/core";
 import { ColorSelector } from "./color-selector";
 import { NodeSelector } from "./node-selector";
 import { TextAlignmentSelector } from "./text-alignment-selector";
@@ -25,6 +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";

 export interface BubbleMenuItem {
  name: string;
@@ -39,14 +41,20 @@ type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {

 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const { t } = useTranslation();
+  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
  const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
  const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
  const showCommentPopupRef = useRef(showCommentPopup);
+  const showAiMenuRef = useRef(showAiMenu);

  useEffect(() => {
    showCommentPopupRef.current = showCommentPopup;
  }, [showCommentPopup]);

+  useEffect(() => {
+    showAiMenuRef.current = showAiMenu;
+  }, [showAiMenu]);
+
  const editorState = useEditorState({
    editor: props.editor,
    selector: (ctx) => {
@@ -123,6 +131,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
        empty ||
        isNodeSelection(selection) ||
        isCellSelection(selection) ||
+        showAiMenuRef.current ||
        showCommentPopupRef?.current
      ) {
        return false;
@@ -146,9 +155,26 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);

+  // Hide the bubble menu immediately when AI menu is shown
+  if (showAiMenu) return;
+
  return (
-    <BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
+    <BubbleMenu
+      {...bubbleMenuProps}
+      style={{ zIndex: 200, position: "relative" }}
+    >
      <div className={classes.bubbleMenu}>
+        <Button
+          variant="default"
+          style={{ border: "none", height: "34px" }}
+          radius="0"
+          rightSection={<IconSparkles size={16} />}
+          onClick={() => {
+            setShowAiMenu(true);
+          }}
+        >
+          Ask AI
+        </Button>
        <NodeSelector
          editor={props.editor}
          isOpen={isNodeSelectorOpen}
@@ -66,6 +66,7 @@ import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
+import { EditorAiMenu } from "./components/ai-menu/ai-menu";

 interface PageEditorProps {
  pageId: string;
@@ -405,6 +406,7 @@ export default function PageEditor({

        {editor && editorIsEditable && (
          <div>
+            <EditorAiMenu editor={editor} />
            <EditorBubbleMenu editor={editor} />
            <TableMenu editor={editor} />
            <TableCellMenu editor={editor} appendTo={menuContainerRef} />
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { EditorProvider } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Document } from "@tiptap/extension-document";
-import { Heading, generateNodeId, UniqueID } from "@docmost/editor-ext";
+import { Heading, UniqueID } from "@docmost/editor-ext";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai";
@@ -8,7 +8,7 @@
  }

  .mantine-AppShell-main {
-    padding-top: 0 !important;
+    padding: 0 !important;
    min-height: auto !important;
  }

@@ -1,26 +1,25 @@
 import { Table, Group, Text, Anchor } from "@mantine/core";
 import { useGetGroupsQuery } from "@/features/group/queries/group-query";
-import { useState } from "react";
 import { Link } from "react-router-dom";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
 import { useTranslation } from "react-i18next";
 import { formatMemberCount } from "@/lib";
 import { IGroup } from "@/features/group/types/group.types.ts";
 import Paginate from "@/components/common/paginate.tsx";
 import { queryClient } from "@/main.tsx";
-import { getSpaces } from "@/features/space/services/space-service.ts";
 import { getGroupMembers } from "@/features/group/services/group-service.ts";
 import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";

 export default function GroupList() {
  const { t } = useTranslation();
-  const [page, setPage] = useState(1);
-  const { data, isLoading } = useGetGroupsQuery({ page });
+  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { data, isLoading } = useGetGroupsQuery({ cursor });

  const prefetchGroupMembers = (groupId: string) => {
    queryClient.prefetchQuery({
-      queryKey: ["groupMembers", groupId, { page: 1 }],
-      queryFn: () => getGroupMembers(groupId, { page: 1 }),
+      queryKey: ["groupMembers", groupId, {}],
+      queryFn: () => getGroupMembers(groupId, {}),
    });
  };

@@ -85,10 +84,10 @@ export default function GroupList() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}
    </>
@@ -4,7 +4,7 @@ import {
  useRemoveGroupMemberMutation,
 } from "@/features/group/queries/group-query";
 import { useParams } from "react-router-dom";
-import React, { useState } from "react";
+import React from "react";
 import { IconDots } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
@@ -12,12 +12,13 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 import { IUser } from "@/features/user/types/user.types.ts";
 import Paginate from "@/components/common/paginate.tsx";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";

 export default function GroupMembersList() {
  const { t } = useTranslation();
  const { groupId } = useParams();
-  const [page, setPage] = useState(1);
-  const { data, isLoading } = useGroupMembersQuery(groupId, { page });
+  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { data, isLoading } = useGroupMembersQuery(groupId, { cursor });
  const removeGroupMember = useRemoveGroupMemberMutation();
  const { isAdmin } = useUserRole();

@@ -107,10 +108,10 @@ export default function GroupMembersList() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}
    </>
@@ -1,4 +1,9 @@
 import { atom } from "jotai";

 export const historyAtoms = atom<boolean>(false);
-export const activeHistoryIdAtom = atom<string>('');
+export const activeHistoryIdAtom = atom<string>("");
+export const activeHistoryPrevIdAtom = atom<string>("");
+export const highlightChangesAtom = atom<boolean>(true);
+
+export type DiffCounts = { added: number; deleted: number; total: number };
+export const diffCountsAtom = atom<DiffCounts | null>(null);
@@ -0,0 +1,69 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 60px);
+  position: relative;
+  overflow: hidden;
+}
+
+.selectorWrapper {
+  padding: var(--mantine-spacing-sm);
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  flex-shrink: 0;
+}
+
+.selector {
+  width: 100%;
+  text-align: left;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  cursor: pointer;
+
+  &:hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+  }
+}
+
+.dropdown {
+  max-height: rem(300px);
+}
+
+.option {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+
+  &[data-combobox-selected] {
+    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+
+  &:hover {
+    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+}
+
+.editorArea {
+  flex: 1;
+  min-height: 0;
+}
+
+.editorContent {
+  padding: var(--mantine-spacing-md);
+  padding-bottom: rem(60px);
+}
+
+.actionButtons {
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  padding-bottom: rem(70px);
+  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  flex-shrink: 0;
+}
+
+.floatingBar {
+  position: fixed;
+  bottom: var(--mantine-spacing-md);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  white-space: nowrap;
+}
@@ -0,0 +1,79 @@
+.history {
+  display: block;
+  width: 100%;
+  padding: var(--mantine-spacing-md);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-2),
+      var(--mantine-color-dark-8)
+    );
+  }
+}
+
+.historyEditor {
+  :global(.ProseMirror) {
+    padding: 0 !important;
+  }
+
+  & :global(.history-diff-added) {
+    background: light-dark(#e1f3f2, #01654a) !important;
+    color: light-dark(#007b69, #cafff7) !important;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  & :global(.history-diff-deleted) {
+    text-decoration: line-through;
+    color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-4));
+    background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.1));
+    border-radius: rem(2px);
+    padding: 0 rem(2px);
+  }
+
+  & :global(.history-diff-node-added) {
+    outline: rem(2px) solid
+      light-dark(var(--mantine-color-teal-5), var(--mantine-color-teal-7));
+    outline-offset: rem(2px);
+    border-radius: rem(4px);
+  }
+
+  & :global(.history-diff-node-deleted) {
+    opacity: 0.5;
+    outline: rem(2px) dashed
+      light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
+    outline-offset: rem(4px);
+    border-radius: rem(4px);
+  }
+}
+
+.active {
+  background-color: light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-8)
+  );
+}
+
+.sidebar {
+  max-height: rem(700px);
+  width: rem(250px);
+  padding: var(--mantine-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  border-right: rem(1px) solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.sidebarFlex {
+  display: flex;
+}
+
+.sidebarMain {
+  flex: 1;
+}
+
+.sidebarRightSection {
+  flex: 1;
+  padding: rem(16px) rem(40px);
+}
@@ -1,36 +1,203 @@
 import "@/features/editor/styles/index.css";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Title } from "@mantine/core";
-import classes from "./history.module.css";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import historyClasses from "./css/history.module.css";
+import { recreateTransform } from "@docmost/editor-ext";
+import { DOMSerializer, Node } from "@tiptap/pm/model";
+import { ChangeSet, simplifyChanges } from "@tiptap/pm/changeset";
+import { useAtom } from "jotai";
+import {
+  diffCountsAtom,
+  highlightChangesAtom,
+} from "@/features/page-history/atoms/history-atoms";

 export interface HistoryEditorProps {
  title: string;
  content: any;
+  previousContent?: any;
 }

-export function HistoryEditor({ title, content }: HistoryEditorProps) {
+export function HistoryEditor({
+  title,
+  content,
+  previousContent,
+}: HistoryEditorProps) {
+  const [highlightChanges] = useAtom(highlightChangesAtom);
+  const [, setDiffCounts] = useAtom(diffCountsAtom);
+
  const editor = useEditor({
    extensions: mainExtensions,
    editable: false,
  });

  useEffect(() => {
-    if (editor && content) {
+    if (!editor || !content) return;
+
+    let decorationSet = DecorationSet.empty;
+    let addedCount = 0;
+    let deletedCount = 0;
+
+    if (previousContent) {
+      try {
+        const schema = editor.schema;
+        const oldContent = Node.fromJSON(schema, previousContent);
+        const newContent = Node.fromJSON(schema, content);
+
+        const tr = recreateTransform(oldContent, newContent, {
+          complexSteps: false,
+          wordDiffs: true,
+          simplifyDiff: true,
+        });
+
+        const changeSet = ChangeSet.create(oldContent).addSteps(
+          tr.doc,
+          tr.mapping.maps,
+          [],
+        );
+        const changes = simplifyChanges(changeSet.changes, newContent);
+
+        editor.commands.setContent(content);
+
+        const specialNodeTypes = new Set([
+          "image",
+          "attachment",
+          "video",
+          "excalidraw",
+          "drawio",
+          "mermaid",
+          "mathBlock",
+          "mathInline",
+          "table",
+          "details",
+          "callout",
+        ]);
+
+        const decorations: Decoration[] = [];
+        let changeIndex = 0;
+
+        for (const change of changes) {
+          if (change.toB > change.fromB) {
+            changeIndex++;
+            const currentIndex = changeIndex;
+            let foundSpecialNode: { node: Node; pos: number } | null = null;
+            newContent.nodesBetween(change.fromB, change.toB, (node, pos) => {
+              if (specialNodeTypes.has(node.type.name)) {
+                const nodeEnd = pos + node.nodeSize;
+                if (change.fromB <= pos && change.toB >= nodeEnd) {
+                  foundSpecialNode = { node, pos };
+                  return false;
+                }
+              }
+            });
+
+            if (foundSpecialNode) {
+              const nodeEnd =
+                foundSpecialNode.pos + foundSpecialNode.node.nodeSize;
+              decorations.push(
+                Decoration.node(foundSpecialNode.pos, nodeEnd, {
+                  class: "history-diff-node-added",
+                  "data-diff-index": String(currentIndex),
+                }),
+              );
+            } else {
+              decorations.push(
+                Decoration.inline(change.fromB, change.toB, {
+                  class: "history-diff-added",
+                  "data-diff-index": String(currentIndex),
+                }),
+              );
+            }
+            addedCount += 1;
+          }
+          if (change.toA > change.fromA) {
+            changeIndex++;
+            const currentIndex = changeIndex;
+            let foundDeletedNode: { node: Node; pos: number } | null = null;
+            oldContent.nodesBetween(change.fromA, change.toA, (node, pos) => {
+              if (specialNodeTypes.has(node.type.name)) {
+                const nodeEnd = pos + node.nodeSize;
+                if (change.fromA <= pos && change.toA >= nodeEnd) {
+                  foundDeletedNode = { node, pos };
+                  return false;
+                }
+              }
+            });
+
+            if (foundDeletedNode) {
+              decorations.push(
+                Decoration.widget(change.fromB, () => {
+                  const wrapper = document.createElement("div");
+                  wrapper.className = "history-diff-node-deleted";
+                  wrapper.setAttribute("data-diff-index", String(currentIndex));
+                  const serializer = DOMSerializer.fromSchema(schema);
+                  const dom = serializer.serializeNode(foundDeletedNode!.node);
+                  wrapper.appendChild(dom);
+                  return wrapper;
+                }),
+              );
+            } else {
+              const deletedText = oldContent.textBetween(
+                change.fromA,
+                change.toA,
+                "",
+              );
+              if (deletedText) {
+                decorations.push(
+                  Decoration.widget(change.fromB, () => {
+                    const span = document.createElement("span");
+                    span.className = "history-diff-deleted";
+                    span.setAttribute("data-diff-index", String(currentIndex));
+                    span.textContent = deletedText;
+                    return span;
+                  }),
+                );
+              }
+            }
+            deletedCount += 1;
+          }
+        }
+
+        decorationSet = DecorationSet.create(newContent, decorations);
+      } catch (e) {
+        console.error("History diff failed:", e);
+        editor.commands.setContent(content);
+      }
+    } else {
      editor.commands.setContent(content);
    }
-  }, [title, content, editor]);
+
+    const total = addedCount + deletedCount;
+    // @ts-ignore
+    setDiffCounts({ added: addedCount, deleted: deletedCount, total });
+
+    editor.setOptions({
+      editorProps: {
+        ...editor.options.editorProps,
+        decorations: () =>
+          highlightChanges ? decorationSet : DecorationSet.empty,
+      },
+    });
+  }, [
+    title,
+    content,
+    editor,
+    previousContent,
+    highlightChanges,
+    setDiffCounts,
+  ]);

  return (
-    <>
-      <div>
-        <Title order={1}>{title}</Title>
-
-        {editor && (
-          <EditorContent editor={editor} className={classes.historyEditor} />
-        )}
-      </div>
-    </>
+    <div>
+      <Title order={1}>{title}</Title>
+      {editor && (
+        <EditorContent
+          editor={editor}
+          className={historyClasses.historyEditor}
+        />
+      )}
+    </div>
  );
 }
@@ -1,20 +1,42 @@
 import { Text, Group, UnstyledButton } from "@mantine/core";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { formattedDate } from "@/lib/time";
-import classes from "./history.module.css";
+import classes from "./css/history.module.css";
 import clsx from "clsx";
+import { IPageHistory } from "@/features/page-history/types/page.types";
+import { memo, useCallback } from "react";

 interface HistoryItemProps {
-  historyItem: any;
-  onSelect: (id: string) => void;
+  historyItem: IPageHistory;
+  index: number;
+  onSelect: (id: string, index: number) => void;
+  onHover?: (id: string, index: number) => void;
+  onHoverEnd?: () => void;
  isActive: boolean;
 }

-function HistoryItem({ historyItem, onSelect, isActive }: HistoryItemProps) {
+const HistoryItem = memo(function HistoryItem({
+  historyItem,
+  index,
+  onSelect,
+  onHover,
+  onHoverEnd,
+  isActive,
+}: HistoryItemProps) {
+  const handleClick = useCallback(() => {
+    onSelect(historyItem.id, index);
+  }, [onSelect, historyItem.id, index]);
+
+  const handleMouseEnter = useCallback(() => {
+    onHover?.(historyItem.id, index);
+  }, [onHover, historyItem.id, index]);
+
  return (
    <UnstyledButton
      p="xs"
-      onClick={() => onSelect(historyItem.id)}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={onHoverEnd}
      className={clsx(classes.history, { [classes.active]: isActive })}
    >
      <Group wrap="nowrap">
@@ -27,11 +49,11 @@ function HistoryItem({ historyItem, onSelect, isActive }: HistoryItemProps) {
            <Group gap={4} wrap="nowrap">
              <CustomAvatar
                size="sm"
-                avatarUrl={historyItem.lastUpdatedBy.avatarUrl}
-                name={historyItem.lastUpdatedBy.name}
+                avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
+                name={historyItem.lastUpdatedBy?.name}
              />
              <Text size="sm" c="dimmed" lineClamp={1}>
-                {historyItem.lastUpdatedBy.name}
+                {historyItem.lastUpdatedBy?.name}
              </Text>
            </Group>
          </div>
@@ -39,6 +61,6 @@ function HistoryItem({ historyItem, onSelect, isActive }: HistoryItemProps) {
      </Group>
    </UnstyledButton>
  );
-}
+});

 export default HistoryItem;
@@ -1,29 +1,27 @@
 import {
  usePageHistoryListQuery,
-  usePageHistoryQuery,
+  prefetchPageHistory,
 } from "@/features/page-history/queries/page-history-query";
 import HistoryItem from "@/features/page-history/components/history-item";
 import {
  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
  historyAtoms,
 } from "@/features/page-history/atoms/history-atoms";
-import { useAtom } from "jotai";
-import { useCallback, useEffect } from "react";
-import { Button, ScrollArea, Group, Divider, Text } from "@mantine/core";
+import { useAtom, useSetAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
-  pageEditorAtom,
-  titleEditorAtom,
-} from "@/features/editor/atoms/editor-atoms";
-import { modals } from "@mantine/modals";
-import { notifications } from "@mantine/notifications";
+  Button,
+  ScrollArea,
+  Group,
+  Divider,
+  Loader,
+  Center,
+} from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
-import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
-import { useParams } from "react-router-dom";
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
+import { useHistoryRestore } from "@/features/page-history/hooks";
+
+const PREFETCH_DELAY_MS = 150;

 interface Props {
  pageId: string;
@@ -32,62 +30,89 @@ interface Props {
 function HistoryList({ pageId }: Props) {
  const { t } = useTranslation();
  const [activeHistoryId, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
+  const setActiveHistoryPrevId = useSetAtom(activeHistoryPrevIdAtom);
+  const setHistoryModalOpen = useSetAtom(historyAtoms);
+
  const {
-    data: pageHistoryList,
+    data: pageHistoryData,
    isLoading,
    isError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
  } = usePageHistoryListQuery(pageId);
-  const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);

-  const [mainEditor] = useAtom(pageEditorAtom);
-  const [mainEditorTitle] = useAtom(titleEditorAtom);
-  const [, setHistoryModalOpen] = useAtom(historyAtoms);
+  const historyItems = useMemo(
+    () => pageHistoryData?.pages.flatMap((page) => page.items) ?? [],
+    [pageHistoryData],
+  );

-  const { spaceSlug } = useParams();
-  const { data: space } = useSpaceQuery(spaceSlug);
-  const spaceRules = space?.membership?.permissions;
-  const spaceAbility = useSpaceAbility(spaceRules);
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+  const prefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  const confirmModal = () =>
-    modals.openConfirmModal({
-      title: t("Please confirm your action"),
-      children: (
-        <Text size="sm">
-          {t(
-            "Are you sure you want to restore this version? Any changes not versioned will be lost.",
-          )}
-        </Text>
-      ),
-      labels: { confirm: t("Confirm"), cancel: t("Cancel") },
-      onConfirm: handleRestore,
-    });
+  const { canRestore, confirmRestore } = useHistoryRestore();

-  const handleRestore = useCallback(() => {
-    if (activeHistoryData) {
-      mainEditorTitle
-        .chain()
-        .clearContent()
-        .setContent(activeHistoryData.title, { emitUpdate: true })
-        .run();
-      mainEditor
-        .chain()
-        .clearContent()
-        .setContent(activeHistoryData.content)
-        .run();
-      setHistoryModalOpen(false);
-      notifications.show({ message: t("Successfully restored") });
+  const clearPrefetchTimeout = useCallback(() => {
+    if (prefetchTimeoutRef.current) {
+      clearTimeout(prefetchTimeoutRef.current);
+      prefetchTimeoutRef.current = null;
    }
-  }, [activeHistoryData]);
+  }, []);
+
+  const handleHover = useCallback(
+    (historyId: string, index: number) => {
+      clearPrefetchTimeout();
+      prefetchTimeoutRef.current = setTimeout(() => {
+        prefetchPageHistory(historyId);
+        const prevId = historyItems[index + 1]?.id;
+        if (prevId) {
+          prefetchPageHistory(prevId);
+        }
+      }, PREFETCH_DELAY_MS);
+    },
+    [clearPrefetchTimeout, historyItems],
+  );

  useEffect(() => {
-    if (
-      pageHistoryList &&
-      pageHistoryList.items.length > 0 &&
-      !activeHistoryId
-    ) {
-      setActiveHistoryId(pageHistoryList.items[0].id);
+    return clearPrefetchTimeout;
+  }, [clearPrefetchTimeout]);
+
+  const handleSelect = useCallback(
+    (id: string, index: number) => {
+      setActiveHistoryId(id);
+      setActiveHistoryPrevId(historyItems[index + 1]?.id ?? "");
+    },
+    [historyItems, setActiveHistoryId, setActiveHistoryPrevId],
+  );
+
+  useEffect(() => {
+    if (historyItems.length > 0 && !activeHistoryId) {
+      setActiveHistoryId(historyItems[0].id);
+      setActiveHistoryPrevId(historyItems[1]?.id ?? "");
    }
-  }, [pageHistoryList]);
+  }, [
+    historyItems,
+    activeHistoryId,
+    setActiveHistoryId,
+    setActiveHistoryPrevId,
+  ]);
+
+  useEffect(() => {
+    const sentinel = loadMoreRef.current;
+    if (!sentinel || !hasNextPage) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);

  if (isLoading) {
    return <></>;
@@ -97,34 +122,36 @@ function HistoryList({ pageId }: Props) {
    return <div>{t("Error loading page history.")}</div>;
  }

-  if (!pageHistoryList || pageHistoryList.items.length === 0) {
+  if (historyItems.length === 0) {
    return <>{t("No page history saved yet.")}</>;
  }

  return (
    <div>
      <ScrollArea h={620} w="100%" type="scroll" scrollbarSize={5}>
-        {pageHistoryList &&
-          pageHistoryList.items.map((historyItem, index) => (
-            <HistoryItem
-              key={index}
-              historyItem={historyItem}
-              onSelect={setActiveHistoryId}
-              isActive={historyItem.id === activeHistoryId}
-            />
-          ))}
+        {historyItems.map((historyItem, index) => (
+          <HistoryItem
+            key={historyItem.id}
+            historyItem={historyItem}
+            index={index}
+            onSelect={handleSelect}
+            onHover={handleHover}
+            onHoverEnd={clearPrefetchTimeout}
+            isActive={historyItem.id === activeHistoryId}
+          />
+        ))}
+        {hasNextPage && <div ref={loadMoreRef} style={{ height: 1 }} />}
+        {isFetchingNextPage && (
+          <Center py="sm">
+            <Loader size="sm" />
+          </Center>
+        )}
      </ScrollArea>

-      {spaceAbility.cannot(
-        SpaceCaslAction.Manage,
-        SpaceCaslSubject.Page,
-      ) ? null : (
+      {canRestore && (
        <>
          <Divider />
          <Group p="xs" wrap="nowrap">
-            <Button size="compact-md" onClick={confirmModal}>
-              {t("Restore")}
-            </Button>
            <Button
              variant="default"
              size="compact-md"
@@ -132,6 +159,9 @@ function HistoryList({ pageId }: Props) {
            >
              {t("Cancel")}
            </Button>
+            <Button size="compact-md" onClick={confirmRestore}>
+              {t("Restore")}
+            </Button>
          </Group>
        </>
      )}
@@ -1,21 +1,45 @@
-import { ScrollArea } from "@mantine/core";
+import {
+  ActionIcon,
+  Group,
+  Paper,
+  ScrollArea,
+  Switch,
+  Text,
+} from "@mantine/core";
 import HistoryList from "@/features/page-history/components/history-list";
-import classes from "./history.module.css";
-import { useAtom } from "jotai";
-import { activeHistoryIdAtom } from "@/features/page-history/atoms/history-atoms";
+import classes from "./css/history.module.css";
+import { useAtom, useAtomValue } from "jotai";
+import {
+  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
+  diffCountsAtom,
+  highlightChangesAtom,
+} from "@/features/page-history/atoms/history-atoms";
 import HistoryView from "@/features/page-history/components/history-view";
-import { useEffect } from "react";
+import { useRef } from "react";
+import { IconChevronUp, IconChevronDown } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  useDiffNavigation,
+  useHistoryReset,
+} from "@/features/page-history/hooks";

 interface Props {
  pageId: string;
 }

 export default function HistoryModalBody({ pageId }: Props) {
-  const [activeHistoryId, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
+  const { t } = useTranslation();
+  const scrollViewportRef = useRef<HTMLDivElement>(null);

-  useEffect(() => {
-    setActiveHistoryId("");
-  }, [pageId]);
+  const activeHistoryId = useAtomValue(activeHistoryIdAtom);
+  const activeHistoryPrevId = useAtomValue(activeHistoryPrevIdAtom);
+  const [highlightChanges, setHighlightChanges] = useAtom(highlightChangesAtom);
+  const diffCounts = useAtomValue(diffCountsAtom);
+
+  useHistoryReset(pageId);
+  const { currentChangeIndex, handlePrevChange, handleNextChange } =
+    useDiffNavigation(scrollViewportRef);

  return (
    <div className={classes.sidebarFlex}>
@@ -25,11 +49,63 @@ export default function HistoryModalBody({ pageId }: Props) {
        </div>
      </nav>

-      <ScrollArea h="650" w="100%" scrollbarSize={5}>
-        <div className={classes.sidebarRightSection}>
-          {activeHistoryId && <HistoryView historyId={activeHistoryId} />}
-        </div>
-      </ScrollArea>
+      <div style={{ position: "relative", flex: 1 }}>
+        <ScrollArea
+          h={650}
+          w="100%"
+          scrollbarSize={5}
+          viewportRef={scrollViewportRef}
+        >
+          <div className={classes.sidebarRightSection}>
+            {activeHistoryId && <HistoryView />}
+          </div>
+        </ScrollArea>
+
+        {activeHistoryId && activeHistoryPrevId && (
+          <Paper
+            shadow="md"
+            radius="xl"
+            px="md"
+            py="xs"
+            style={{
+              position: "absolute",
+              bottom: 16,
+              left: "50%",
+              transform: "translateX(-50%)",
+            }}
+          >
+            <Group gap="md" wrap="nowrap">
+              <Switch
+                label={t("Highlight changes")}
+                checked={highlightChanges}
+                onChange={(e) => setHighlightChanges(e.currentTarget.checked)}
+                styles={{ label: { userSelect: "none", whiteSpace: "nowrap" } }}
+              />
+              {highlightChanges && diffCounts && diffCounts.total > 0 && (
+                <Group gap="xs" wrap="nowrap">
+                  <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+                    {currentChangeIndex} of {diffCounts.total}
+                  </Text>
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    onClick={handlePrevChange}
+                  >
+                    <IconChevronUp size={16} />
+                  </ActionIcon>
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    onClick={handleNextChange}
+                  >
+                    <IconChevronDown size={16} />
+                  </ActionIcon>
+                </Group>
+              )}
+            </Group>
+          </Paper>
+        )}
+      </div>
    </div>
  );
 }
@@ -0,0 +1,208 @@
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Select,
+  Switch,
+  Text,
+} from "@mantine/core";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import {
+  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
+  diffCountsAtom,
+  highlightChangesAtom,
+  historyAtoms,
+} from "@/features/page-history/atoms/history-atoms";
+import HistoryView from "@/features/page-history/components/history-view";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { usePageHistoryListQuery } from "@/features/page-history/queries/page-history-query";
+import { formattedDate } from "@/lib/time";
+import {
+  useDiffNavigation,
+  useHistoryReset,
+  useHistoryRestore,
+} from "@/features/page-history/hooks";
+import classes from "./css/history-mobile.module.css";
+
+interface Props {
+  pageId: string;
+  pageTitle?: string;
+}
+
+export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
+  const { t } = useTranslation();
+
+  const [activeHistoryId, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
+  const setActiveHistoryPrevId = useSetAtom(activeHistoryPrevIdAtom);
+  const [highlightChanges, setHighlightChanges] = useAtom(highlightChangesAtom);
+  const diffCounts = useAtomValue(diffCountsAtom);
+  const setHistoryModalOpen = useSetAtom(historyAtoms);
+
+  const scrollViewportRef = useRef<HTMLDivElement>(null);
+  const dropdownViewportRef = useRef<HTMLDivElement>(null);
+
+  const {
+    data: pageHistoryData,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = usePageHistoryListQuery(pageId);
+
+  const historyItems = useMemo(
+    () => pageHistoryData?.pages.flatMap((page) => page.items) ?? [],
+    [pageHistoryData],
+  );
+
+  const selectData = useMemo(
+    () =>
+      historyItems.map((item) => ({
+        value: item.id,
+        label: formattedDate(new Date(item.createdAt)),
+        userName: item.lastUpdatedBy?.name,
+      })),
+    [historyItems],
+  );
+
+  useHistoryReset(pageId);
+  const { canRestore, confirmRestore } = useHistoryRestore();
+  const { currentChangeIndex, handlePrevChange, handleNextChange } =
+    useDiffNavigation(scrollViewportRef);
+
+  useEffect(() => {
+    if (historyItems.length > 0 && !activeHistoryId) {
+      setActiveHistoryId(historyItems[0].id);
+      setActiveHistoryPrevId(historyItems[1]?.id ?? "");
+    }
+  }, [
+    historyItems,
+    activeHistoryId,
+    setActiveHistoryId,
+    setActiveHistoryPrevId,
+  ]);
+
+  const handleDropdownScroll = useCallback(() => {
+    const viewport = dropdownViewportRef.current;
+    if (!viewport || !hasNextPage || isFetchingNextPage) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = viewport;
+    const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50;
+
+    if (isNearBottom) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
+  const handleSelectVersion = useCallback(
+    (value: string | null) => {
+      if (!value) return;
+      const index = historyItems.findIndex((item) => item.id === value);
+      if (index >= 0) {
+        setActiveHistoryId(value);
+        setActiveHistoryPrevId(historyItems[index + 1]?.id ?? "");
+      }
+    },
+    [historyItems, setActiveHistoryId, setActiveHistoryPrevId],
+  );
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <Box className={classes.container}>
+      <Box className={classes.selectorWrapper}>
+        <Select
+          data={selectData}
+          value={activeHistoryId}
+          onChange={handleSelectVersion}
+          placeholder={t("Select version")}
+          checkIconPosition="right"
+          maxDropdownHeight={300}
+          renderOption={({ option, checked }) => (
+            <Group justify="space-between" wrap="nowrap" w="100%">
+              <div>
+                <Text size="sm">{option.label}</Text>
+                <Text size="xs" c="dimmed">
+                  {(option as { userName?: string }).userName}
+                </Text>
+              </div>
+              {checked && <IconCheck size={16} />}
+            </Group>
+          )}
+          comboboxProps={{ withinPortal: false }}
+          scrollAreaProps={{
+            viewportRef: dropdownViewportRef,
+            onScrollPositionChange: handleDropdownScroll,
+          }}
+        />
+      </Box>
+
+      <ScrollArea
+        className={classes.editorArea}
+        viewportRef={scrollViewportRef}
+        scrollbarSize={5}
+      >
+        <Box className={classes.editorContent}>
+          {activeHistoryId && <HistoryView />}
+        </Box>
+      </ScrollArea>
+
+      {canRestore && (
+        <Group className={classes.actionButtons} justify="flex-end" gap="sm">
+          <Button variant="default" onClick={() => setHistoryModalOpen(false)}>
+            {t("Cancel")}
+          </Button>
+          <Button onClick={confirmRestore}>{t("Restore")}</Button>
+        </Group>
+      )}
+
+      {activeHistoryId && (
+        <Paper
+          shadow="sm"
+          radius="xl"
+          px="md"
+          py="xs"
+          className={classes.floatingBar}
+        >
+          <Group gap="sm" wrap="nowrap">
+            <Switch
+              label={t("Highlight changes")}
+              checked={highlightChanges}
+              onChange={(e) => setHighlightChanges(e.currentTarget.checked)}
+              size="sm"
+              styles={{ label: { userSelect: "none", whiteSpace: "nowrap" } }}
+            />
+            {highlightChanges && diffCounts && diffCounts.total > 0 && (
+              <Group gap={4} wrap="nowrap">
+                <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+                  {currentChangeIndex} of {diffCounts.total}
+                </Text>
+                <ActionIcon
+                  variant="subtle"
+                  size="sm"
+                  onClick={handlePrevChange}
+                >
+                  <IconChevronUp size={16} />
+                </ActionIcon>
+                <ActionIcon
+                  variant="subtle"
+                  size="sm"
+                  onClick={handleNextChange}
+                >
+                  <IconChevronDown size={16} />
+                </ActionIcon>
+              </Group>
+            )}
+          </Group>
+        </Paper>
+      )}
+    </Box>
+  );
+}
@@ -2,21 +2,26 @@ import { Modal, Text } from "@mantine/core";
 import { useAtom } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms";
 import HistoryModalBody from "@/features/page-history/components/history-modal-body";
+import HistoryModalMobile from "@/features/page-history/components/history-modal-mobile";
 import { useTranslation } from "react-i18next";
+import { useMediaQuery } from "@mantine/hooks";

 interface Props {
  pageId: string;
+  pageTitle?: string;
 }
-export default function HistoryModal({ pageId }: Props) {
+
+export default function HistoryModal({ pageId, pageTitle }: Props) {
  const { t } = useTranslation();
  const [isModalOpen, setModalOpen] = useAtom(historyAtoms);
+  const isMobile = useMediaQuery("(max-width: 800px)");

-  return (
-    <>
+  if (isMobile) {
+    return (
      <Modal.Root
-        size={1200}
        opened={isModalOpen}
        onClose={() => setModalOpen(false)}
+        fullScreen
      >
        <Modal.Overlay />
        <Modal.Content style={{ overflow: "hidden" }}>
@@ -28,11 +33,37 @@ export default function HistoryModal({ pageId }: Props) {
            </Modal.Title>
            <Modal.CloseButton />
          </Modal.Header>
-          <Modal.Body>
-            <HistoryModalBody pageId={pageId} />
+          <Modal.Body
+            p={0}
+            style={{ height: "calc(100vh - 60px)", overflow: "hidden" }}
+          >
+            <HistoryModalMobile pageId={pageId} pageTitle={pageTitle} />
          </Modal.Body>
        </Modal.Content>
      </Modal.Root>
-    </>
+    );
+  }
+
+  return (
+    <Modal.Root
+      size={1400}
+      opened={isModalOpen}
+      onClose={() => setModalOpen(false)}
+    >
+      <Modal.Overlay />
+      <Modal.Content style={{ overflow: "hidden" }}>
+        <Modal.Header>
+          <Modal.Title>
+            <Text size="md" fw={500}>
+              {t("Page history")}
+            </Text>
+          </Modal.Title>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <HistoryModalBody pageId={pageId} />
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
  );
 }
@@ -1,29 +1,44 @@
 import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
 import { HistoryEditor } from "@/features/page-history/components/history-editor";
 import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import {
+  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
+} from "@/features/page-history/atoms/history-atoms";

-interface HistoryProps {
-  historyId: string;
-}
-
-function HistoryView({ historyId }: HistoryProps) {
+function HistoryView() {
  const { t } = useTranslation();
-  const { data, isLoading, isError } = usePageHistoryQuery(historyId);
+  const historyId = useAtomValue(activeHistoryIdAtom);
+  const prevHistoryId = useAtomValue(activeHistoryPrevIdAtom);

-  if (isLoading) {
+  const {
+    data,
+    isLoading: isLoadingCurrent,
+    isError: isErrorCurrent,
+  } = usePageHistoryQuery(historyId);
+  const {
+    data: prevData,
+    isLoading: isLoadingPrev,
+    isError: isErrorPrev,
+  } = usePageHistoryQuery(prevHistoryId);
+
+  if (isLoadingCurrent || isLoadingPrev) {
    return <></>;
  }

-  if (isError || !data) {
+  if (isErrorCurrent || !data) {
    return <div>{t("Error fetching page data.")}</div>;
  }

  return (
-    data && (
-      <div>
-        <HistoryEditor content={data.content} title={data.title} />
-      </div>
-    )
+    <div>
+      <HistoryEditor
+        content={data.content}
+        title={data.title}
+        previousContent={!isErrorPrev ? prevData?.content : undefined}
+      />
+    </div>
  );
 }

@@ -1,49 +0,0 @@
-.history {
-  display: block;
-  width: 100%;
-  padding: var(--mantine-spacing-md);
-  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-
-  @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-2),
-      var(--mantine-color-dark-8)
-    );
-  }
-}
-
-.historyEditor {
-  :global(.ProseMirror) {
-    padding: 0 !important;
-  }
-}
-
-.active {
-  background-color: light-dark(
-    var(--mantine-color-gray-2),
-    var(--mantine-color-dark-8)
-  );
-}
-
-.sidebar {
-  max-height: rem(700px);
-  width: rem(250px);
-  padding: var(--mantine-spacing-sm);
-  display: flex;
-  flex-direction: column;
-  border-right: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-}
-
-.sidebarFlex {
-  display: flex;
-}
-
-.sidebarMain {
-  flex: 1;
-}
-
-.sidebarRightSection {
-  flex: 1;
-  padding: rem(16px) rem(40px);
-}
@@ -0,0 +1,3 @@
+export { useDiffNavigation } from "./use-diff-navigation";
+export { useHistoryRestore } from "./use-history-restore";
+export { useHistoryReset } from "./use-history-reset";
@@ -0,0 +1,58 @@
+import { useAtomValue } from "jotai";
+import { RefObject, useCallback, useEffect, useState } from "react";
+import { diffCountsAtom } from "@/features/page-history/atoms/history-atoms";
+
+/**
+ * Manages navigation between diff changes in the history view.
+ * Provides prev/next handlers and auto-scrolls to the current change.
+ */
+export function useDiffNavigation(
+  scrollViewportRef: RefObject<HTMLDivElement>,
+) {
+  const diffCounts = useAtomValue(diffCountsAtom);
+  const [currentChangeIndex, setCurrentChangeIndex] = useState(0);
+
+  const scrollToChangeIndex = useCallback(
+    (index: number) => {
+      const viewport = scrollViewportRef.current;
+      if (!viewport || index < 1) return;
+
+      const element = viewport.querySelector(`[data-diff-index="${index}"]`);
+      if (element instanceof HTMLElement) {
+        const elementTop = element.offsetTop;
+        const viewportHeight = viewport.clientHeight;
+        const scrollTarget =
+          elementTop - viewportHeight / 2 + element.offsetHeight / 2;
+        viewport.scrollTo({ top: scrollTarget, behavior: "smooth" });
+      }
+    },
+    [scrollViewportRef],
+  );
+
+  useEffect(() => {
+    if (diffCounts && diffCounts.total > 0) {
+      setCurrentChangeIndex(1);
+      requestAnimationFrame(() => scrollToChangeIndex(1));
+    } else {
+      setCurrentChangeIndex(0);
+    }
+  }, [diffCounts, scrollToChangeIndex]);
+
+  const handlePrevChange = useCallback(() => {
+    if (!diffCounts || diffCounts.total === 0) return;
+    const newIndex =
+      currentChangeIndex <= 1 ? diffCounts.total : currentChangeIndex - 1;
+    setCurrentChangeIndex(newIndex);
+    scrollToChangeIndex(newIndex);
+  }, [diffCounts, currentChangeIndex, scrollToChangeIndex]);
+
+  const handleNextChange = useCallback(() => {
+    if (!diffCounts || diffCounts.total === 0) return;
+    const newIndex =
+      currentChangeIndex >= diffCounts.total ? 1 : currentChangeIndex + 1;
+    setCurrentChangeIndex(newIndex);
+    scrollToChangeIndex(newIndex);
+  }, [diffCounts, currentChangeIndex, scrollToChangeIndex]);
+
+  return { currentChangeIndex, handlePrevChange, handleNextChange };
+}
@@ -0,0 +1,24 @@
+import { useAtom } from "jotai";
+import { useEffect } from "react";
+import {
+  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
+  diffCountsAtom,
+} from "@/features/page-history/atoms/history-atoms";
+
+/**
+ * Resets history state when pageId changes.
+ * Clears active selection and diff counts.
+ */
+export function useHistoryReset(pageId: string) {
+  const [, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
+  const [, setActiveHistoryPrevId] = useAtom(activeHistoryPrevIdAtom);
+  const [, setDiffCounts] = useAtom(diffCountsAtom);
+
+  useEffect(() => {
+    setActiveHistoryId("");
+    setActiveHistoryPrevId("");
+    // @ts-ignore
+    setDiffCounts(null);
+  }, [pageId, setActiveHistoryId, setActiveHistoryPrevId, setDiffCounts]);
+}
@@ -0,0 +1,78 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { notifications } from "@mantine/notifications";
+import { useParams } from "react-router-dom";
+import {
+  activeHistoryIdAtom,
+  historyAtoms,
+} from "@/features/page-history/atoms/history-atoms";
+import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
+import {
+  pageEditorAtom,
+  titleEditorAtom,
+} from "@/features/editor/atoms/editor-atoms";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
+import { useSpaceQuery } from "@/features/space/queries/space-query";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type";
+
+export function useHistoryRestore() {
+  const { t } = useTranslation();
+
+  const activeHistoryId = useAtomValue(activeHistoryIdAtom);
+  const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);
+
+  const mainEditor = useAtomValue(pageEditorAtom);
+  const mainEditorTitle = useAtomValue(titleEditorAtom);
+  const setHistoryModalOpen = useSetAtom(historyAtoms);
+
+  const { spaceSlug } = useParams();
+  const { data: space } = useSpaceQuery(spaceSlug);
+  const spaceAbility = useSpaceAbility(space?.membership?.permissions);
+
+  const canRestore = spaceAbility.can(
+    SpaceCaslAction.Manage,
+    SpaceCaslSubject.Page,
+  );
+
+  const handleRestore = useCallback(() => {
+    if (!activeHistoryData) return;
+
+    mainEditorTitle
+      .chain()
+      .clearContent()
+      .setContent(activeHistoryData.title, { emitUpdate: true })
+      .run();
+
+    mainEditor
+      .chain()
+      .clearContent()
+      .setContent(activeHistoryData.content)
+      .run();
+
+    setHistoryModalOpen(false);
+    notifications.show({ message: t("Successfully restored") });
+  }, [activeHistoryData, mainEditor, mainEditorTitle, setHistoryModalOpen, t]);
+
+  const confirmRestore = useCallback(() => {
+    modals.openConfirmModal({
+      title: t("Please confirm your action"),
+      children: (
+        <Text size="sm">
+          {t(
+            "Are you sure you want to restore this version? Any changes not versioned will be lost.",
+          )}
+        </Text>
+      ),
+      labels: { confirm: t("Confirm"), cancel: t("Cancel") },
+      onConfirm: handleRestore,
+    });
+  }, [t, handleRestore]);
+
+  return { canRestore, confirmRestore };
+}
@@ -1,19 +1,38 @@
-import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import {
+  InfiniteData,
+  useInfiniteQuery,
+  UseInfiniteQueryResult,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
 import {
  getPageHistoryById,
  getPageHistoryList,
 } from "@/features/page-history/services/page-history-service";
 import { IPageHistory } from "@/features/page-history/types/page.types";
 import { IPagination } from "@/lib/types.ts";
+import { queryClient } from "@/main";
+
+const HISTORY_STALE_TIME = 60 * 60 * 1000;
+
+export function prefetchPageHistory(historyId: string) {
+  return queryClient.prefetchQuery({
+    queryKey: ["page-history", historyId],
+    queryFn: () => getPageHistoryById(historyId),
+    staleTime: HISTORY_STALE_TIME,
+  });
+}

 export function usePageHistoryListQuery(
  pageId: string,
-): UseQueryResult<IPagination<IPageHistory>, Error> {
-  return useQuery({
+): UseInfiniteQueryResult<InfiniteData<IPagination<IPageHistory>, unknown>> {
+  return useInfiniteQuery({
    queryKey: ["page-history-list", pageId],
-    queryFn: () => getPageHistoryList(pageId),
+    queryFn: ({ pageParam }) => getPageHistoryList(pageId, pageParam),
    enabled: !!pageId,
    gcTime: 0,
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) => lastPage.meta?.nextCursor ?? undefined,
  });
 }

@@ -24,6 +43,6 @@ export function usePageHistoryQuery(
    queryKey: ["page-history", historyId],
    queryFn: () => getPageHistoryById(historyId),
    enabled: !!historyId,
-    staleTime: 10 * 60 * 1000,
+    staleTime: HISTORY_STALE_TIME,
  });
 }
@@ -4,9 +4,11 @@ import { IPagination } from "@/lib/types.ts";

 export async function getPageHistoryList(
  pageId: string,
+  cursor?: string,
 ): Promise<IPagination<IPageHistory>> {
  const req = await api.post("/pages/history", {
    pageId,
+    cursor,
  });
  return req.data;
 }
@@ -172,6 +172,10 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
            queryKey: ["root-sidebar-pages", fileTask.spaceId],
          });

+          await queryClient.invalidateQueries({
+            queryKey: ["recent-changes", fileTask.spaceId],
+          });
+
          setTimeout(() => {
            emit({
              operation: "refetchRootTreeNodeEvent",
@@ -250,12 +250,10 @@ export function useGetSidebarPagesQuery(
  return useInfiniteQuery({
    queryKey: ["sidebar-pages", data],
    enabled: !!data?.pageId || !!data?.spaceId,
-    queryFn: ({ pageParam }) => getSidebarPages({ ...data, page: pageParam }),
-    initialPageParam: 1,
-    getPreviousPageParam: (firstPage) =>
-      firstPage.meta.hasPrevPage ? firstPage.meta.page - 1 : undefined,
+    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam }),
+    initialPageParam: undefined,
    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.page + 1 : undefined,
+      lastPage.meta?.nextCursor ?? undefined,
  });
 }

@@ -263,13 +261,11 @@ export function useGetRootSidebarPagesQuery(data: SidebarPagesParams) {
  return useInfiniteQuery({
    queryKey: ["root-sidebar-pages", data.spaceId],
    queryFn: async ({ pageParam }) => {
-      return getSidebarPages({ spaceId: data.spaceId, page: pageParam });
+      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam });
    },
-    initialPageParam: 1,
-    getPreviousPageParam: (firstPage) =>
-      firstPage.meta.hasPrevPage ? firstPage.meta.page - 1 : undefined,
+    initialPageParam: undefined,
    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.page + 1 : undefined,
+      lastPage.meta?.nextCursor ?? undefined,
  });
 }

@@ -72,22 +72,19 @@ export async function getSidebarPages(
 export async function getAllSidebarPages(
  params: SidebarPagesParams,
 ): Promise<InfiniteData<IPagination<IPage>, unknown>> {
-  let page = 1;
-  let hasNextPage = false;
+  let cursor: string | undefined = undefined;
  const pages: IPagination<IPage>[] = [];
-  const pageParams: number[] = [];
+  const pageParams: (string | undefined)[] = [];

  do {
-    const req = await api.post("/pages/sidebar-pages", { ...params, page: page });
+    const req = await api.post("/pages/sidebar-pages", { ...params, cursor });

    const data: IPagination<IPage> = req.data;
    pages.push(data);
-    pageParams.push(page);
+    pageParams.push(cursor);

-    hasNextPage = data.meta.hasNextPage;
-
-    page += 1;
-  } while (hasNextPage);
+    cursor = data.meta.nextCursor ?? undefined;
+  } while (cursor);

  return {
    pageParams,
@@ -30,15 +30,15 @@ import { useState } from "react";
 import TrashPageContentModal from "@/features/page/trash/components/trash-page-content-modal";
 import { UserInfo } from "@/components/common/user-info.tsx";
 import Paginate from "@/components/common/paginate.tsx";
-import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";

 export default function Trash() {
  const { t } = useTranslation();
  const { spaceSlug } = useParams();
-  const { page, setPage } = usePaginateAndSearch();
+  const { cursor, goNext, goPrev } = useCursorPaginate();
  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
  const { data: deletedPages, isLoading } = useDeletedPagesQuery(space?.id, {
-    page, limit: 50
+    cursor, limit: 50
  });
  const restorePageMutation = useRestorePageMutation();
  const deletePageMutation = useDeletePageMutation();
@@ -206,10 +206,10 @@ export default function Trash() {

        {deletedPages && deletedPages.items.length > 0 && (
          <Paginate
-            currentPage={page}
-            hasPrevPage={deletedPages.meta.hasPrevPage}
-            hasNextPage={deletedPages.meta.hasNextPage}
-            onPageChange={setPage}
+            hasPrevPage={deletedPages.meta?.hasPrevPage}
+            hasNextPage={deletedPages.meta?.hasNextPage}
+            onNext={() => goNext(deletedPages.meta?.nextCursor)}
+            onPrev={goPrev}
          />
        )}
      </Stack>
@@ -62,7 +62,7 @@ export interface ICopyPageToSpace {
 export interface SidebarPagesParams {
  spaceId?: string;
  pageId?: string;
-  page?: number; // pagination
+  cursor?: string;
 }

 export interface IPageInput {
@@ -18,7 +18,6 @@ import {
  IconFileDescription,
  IconSearch,
  IconCheck,
-  IconSparkles,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useDebouncedValue } from "@mantine/hooks";
@@ -26,7 +25,7 @@ import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import { useLicense } from "@/ee/hooks/use-license";
 import classes from "./search-spotlight-filters.module.css";
 import { isCloud } from "@/lib/config.ts";
-import { useAtom } from "jotai/index";
+import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";

 interface SearchSpotlightFiltersProps {
@@ -53,7 +52,6 @@ export function SearchSpotlightFilters({
  const [workspace] = useAtom(workspaceAtom);

  const { data: spacesData } = useGetSpacesQuery({
-    page: 1,
    limit: 100,
    query: debouncedSpaceQuery,
  });
@@ -265,7 +263,9 @@ export function SearchSpotlightFilters({
                contentType !== option.value &&
                handleFilterChange("contentType", option.value)
              }
-              disabled={option.disabled || (isAiMode && option.value === "attachment")}
+              disabled={
+                option.disabled || (isAiMode && option.value === "attachment")
+              }
            >
              <Group flex="1" gap="xs">
                <div>
@@ -275,11 +275,13 @@ export function SearchSpotlightFilters({
                      {t("Enterprise")}
                    </Badge>
                  )}
-                  {!option.disabled && isAiMode && option.value === "attachment" && (
-                    <Text size="xs" mt={4}>
-                      {t("Ask AI not available for attachments")}
-                    </Text>
-                  )}
+                  {!option.disabled &&
+                    isAiMode &&
+                    option.value === "attachment" && (
+                      <Text size="xs" mt={4}>
+                        {t("Ask AI not available for attachments")}
+                      </Text>
+                    )}
                </div>
                {contentType === option.value && <IconCheck size={20} />}
              </Group>
@@ -10,8 +10,8 @@ import {
 export async function searchPage(
  params: IPageSearchParams,
 ): Promise<IPageSearch[]> {
-  const req = await api.post<IPageSearch[]>("/search", params);
-  return req.data;
+  const req = await api.post<{ items: IPageSearch[] }>("/search", params);
+  return req.data.items;
 }

 export async function searchSuggestions(
@@ -24,13 +24,13 @@ export async function searchSuggestions(
 export async function searchShare(
  params: IPageSearchParams,
 ): Promise<IPageSearch[]> {
-  const req = await api.post<IPageSearch[]>("/search/share-search", params);
-  return req.data;
+  const req = await api.post<{ items: IPageSearch[] }>("/search/share-search", params);
+  return req.data.items;
 }

 export async function searchAttachments(
  params: IPageSearchParams,
 ): Promise<IAttachmentSearch[]> {
-  const req = await api.post<IAttachmentSearch[]>("/search-attachments", params);
-  return req.data;
+  const req = await api.post<{ items: IAttachmentSearch[] }>("/search-attachments", params);
+  return req.data.items;
 }
@@ -1,8 +1,9 @@
 import { Table, Group, Text, Anchor } from "@mantine/core";
-import React, { useState } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
 import { ISharedItem } from "@/features/share/types/share.types.ts";
 import { format } from "date-fns";
@@ -14,8 +15,8 @@ import classes from "./share.module.css";

 export default function ShareList() {
  const { t } = useTranslation();
-  const [page, setPage] = useState(1);
-  const { data, isLoading } = useGetSharesQuery({ page });
+  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { data, isLoading } = useGetSharesQuery({ cursor });

  return (
    <>
@@ -86,10 +87,10 @@ export default function ShareList() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}
    </>
@@ -33,7 +33,7 @@ export function useGetSharesQuery(
  params?: QueryParams,
 ): UseQueryResult<IPagination<ISharedItem>, Error> {
  return useQuery({
-    queryKey: ["share-list"],
+    queryKey: ["share-list", params],
    queryFn: () => getShares(params),
    placeholderData: keepPreviousData,
  });
@@ -6,6 +6,7 @@ import { ISpace } from "../types/space.types";
 import { useNavigate } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route";
 import { Trans, useTranslation } from "react-i18next";
+import { useState } from "react";

 interface DeleteSpaceModalProps {
  space: ISpace;
@@ -14,6 +15,7 @@ interface DeleteSpaceModalProps {
 export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
  const { t } = useTranslation();
  const [opened, { open, close }] = useDisclosure(false);
+  const [isDeleting, setIsDeleting] = useState(false);
  const deleteSpaceMutation = useDeleteSpaceMutation();
  const navigate = useNavigate();

@@ -35,12 +37,15 @@ export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
      return;
    }

+    setIsDeleting(true);
    try {
      // pass slug too so we can clear the local cache
      await deleteSpaceMutation.mutateAsync({ id: space.id, slug: space.slug });
      navigate(APP_ROUTE.HOME);
    } catch (error) {
      console.error("Failed to delete space", error);
+    } finally {
+      setIsDeleting(false);
    }
  };

@@ -79,7 +84,7 @@ export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
          <Button onClick={close} variant="default">
            {t("Cancel")}
          </Button>
-          <Button onClick={handleDelete} color="red">
+          <Button onClick={handleDelete} color="red" loading={isDeleting}>
            {t("Confirm")}
          </Button>
        </Group>
@@ -15,7 +15,7 @@ import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts

 export default function SpaceGrid() {
  const { t } = useTranslation();
-  const { data, isLoading } = useGetSpacesQuery({ page: 1, limit: 10 });
+  const { data, isLoading } = useGetSpacesQuery({ limit: 10 });

  const cards = data?.items.slice(0, 9).map((space, index) => (
    <Card
@@ -1,5 +1,6 @@
 import { Group, Table, Text } from "@mantine/core";
 import React, { useState } from "react";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
 import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
 import { useDisclosure } from "@mantine/hooks";
@@ -12,8 +13,8 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";

 export default function SpaceList() {
  const { t } = useTranslation();
-  const [page, setPage] = useState(1);
-  const { data, isLoading } = useGetSpacesQuery({ page });
+  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { data, isLoading } = useGetSpacesQuery({ cursor });
  const [opened, { open, close }] = useDisclosure(false);
  const [selectedSpaceId, setSelectedSpaceId] = useState<string>(null);

@@ -72,10 +73,10 @@ export default function SpaceList() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}

@@ -41,9 +41,9 @@ export default function SpaceMembersList({
  readOnly,
 }: SpaceMembersProps) {
  const { t } = useTranslation();
-  const { search, page, setPage, handleSearch } = usePaginateAndSearch();
+  const { search, cursor, goNext, goPrev, handleSearch } = usePaginateAndSearch();
  const { data, isLoading } = useSpaceMembersQuery(spaceId, {
-    page,
+    cursor,
    limit: 100,
    query: search,
  });
@@ -206,10 +206,10 @@ export default function SpaceMembersList({

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}
    </>
@@ -28,19 +28,19 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 interface AllSpacesListProps {
  spaces: any[];
  onSearch: (query: string) => void;
-  page: number;
  hasPrevPage?: boolean;
  hasNextPage?: boolean;
-  onPageChange: (page: number) => void;
+  onNext: () => void;
+  onPrev: () => void;
 }

 export default function AllSpacesList({
  spaces,
  onSearch,
-  page,
  hasPrevPage,
  hasNextPage,
-  onPageChange,
+  onNext,
+  onPrev,
 }: AllSpacesListProps) {
  const { t } = useTranslation();
  const [settingsOpened, { open: openSettings, close: closeSettings }] =
@@ -145,10 +145,10 @@ export default function AllSpacesList({

      {spaces.length > 0 && (
        <Paginate
-          currentPage={page}
          hasPrevPage={hasPrevPage}
          hasNextPage={hasNextPage}
-          onPageChange={onPageChange}
+          onNext={onNext}
+          onPrev={onPrev}
        />
      )}

@@ -1,6 +1,6 @@
 import { Group, Table, Avatar, Text, Alert } from "@mantine/core";
 import { useWorkspaceInvitationsQuery } from "@/features/workspace/queries/workspace-query.ts";
-import React, { useState } from "react";
+import React from "react";
 import { getUserRoleLabel } from "@/features/workspace/types/user-role-data.ts";
 import InviteActionMenu from "@/features/workspace/components/members/components/invite-action-menu.tsx";
 import { IconInfoCircle } from "@tabler/icons-react";
@@ -8,12 +8,13 @@ import { timeAgo } from "@/lib/time.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";

 export default function WorkspaceInvitesTable() {
  const { t } = useTranslation();
-  const [page, setPage] = useState(1);
+  const { cursor, goNext, goPrev } = useCursorPaginate();
  const { data, isLoading } = useWorkspaceInvitationsQuery({
-    page,
+    cursor,
    limit: 100,
  });
  const { isAdmin } = useUserRole();
@@ -65,10 +66,10 @@ export default function WorkspaceInvitesTable() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}
    </>
@@ -21,9 +21,9 @@ import MemberActionMenu from "@/features/workspace/components/members/components

 export default function WorkspaceMembersTable() {
  const { t } = useTranslation();
-  const { search, page, setPage, handleSearch } = usePaginateAndSearch();
+  const { search, cursor, goNext, goPrev, handleSearch } = usePaginateAndSearch();
  const { data, isLoading } = useWorkspaceMembersQuery({
-    page,
+    cursor,
    limit: 100,
    query: search,
  });
@@ -111,10 +111,10 @@ export default function WorkspaceMembersTable() {

      {data?.items.length > 0 && (
        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
        />
      )}
    </>
@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+
+export function useCursorPaginate() {
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([]);
+
+  const goNext = useCallback((nextCursor: string | null | undefined) => {
+    if (nextCursor) {
+      setCursorStack((prev) => [...prev, cursor]);
+      setCursor(nextCursor);
+    }
+  }, [cursor]);
+
+  const goPrev = useCallback(() => {
+    setCursorStack((prev) => {
+      const next = prev.slice(0, -1);
+      setCursor(prev[prev.length - 1]);
+      return next;
+    });
+  }, []);
+
+  const resetCursor = useCallback(() => {
+    setCursor(undefined);
+    setCursorStack([]);
+  }, []);
+
+  return { cursor, goNext, goPrev, resetCursor };
+}
@@ -2,16 +2,33 @@ import { useState, useRef, useCallback } from "react";

 export function usePaginateAndSearch(initialQuery: string = "") {
  const [search, setSearch] = useState(initialQuery);
-  const [page, setPage] = useState(1);
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([]);
  const prevSearchRef = useRef(search);

  const handleSearch = useCallback((newQuery: string) => {
    if (prevSearchRef.current !== newQuery) {
      prevSearchRef.current = newQuery;
      setSearch(newQuery);
-      setPage(1);
+      setCursor(undefined);
+      setCursorStack([]);
    }
  }, []);

-  return { search, page, setPage, handleSearch };
+  const goNext = useCallback((nextCursor: string | null | undefined) => {
+    if (nextCursor) {
+      setCursorStack((prev) => [...prev, cursor]);
+      setCursor(nextCursor);
+    }
+  }, [cursor]);
+
+  const goPrev = useCallback(() => {
+    setCursorStack((prev) => {
+      const next = prev.slice(0, -1);
+      setCursor(prev[prev.length - 1]);
+      return next;
+    });
+  }, []);
+
+  return { search, cursor, goNext, goPrev, handleSearch };
 }
@@ -1,6 +1,7 @@
 export interface QueryParams {
  query?: string;
-  page?: number;
+  cursor?: string;
+  beforeCursor?: string;
  limit?: number;
  adminView?: boolean;
 }
@@ -29,9 +30,10 @@ export interface ApiResponse<T> {

 export type IPaginationMeta = {
  limit: number;
-  page: number;
  hasNextPage: boolean;
  hasPrevPage: boolean;
+  nextCursor: string | null;
+  prevCursor: string | null;
 };
 export type IPagination<T> = {
  items: T[];
@@ -11,10 +11,10 @@ import useUserRole from "@/hooks/use-user-role";
 export default function Spaces() {
  const { t } = useTranslation();
  const { isAdmin } = useUserRole();
-  const { search, page, setPage, handleSearch } = usePaginateAndSearch();
+  const { search, cursor, goNext, goPrev, handleSearch } = usePaginateAndSearch();

  const { data, isLoading } = useGetSpacesQuery({
-    page,
+    cursor,
    limit: 30,
    query: search,
  });
@@ -41,10 +41,10 @@ export default function Spaces() {
          <AllSpacesList
            spaces={data?.items || []}
            onSearch={handleSearch}
-            page={page}
            hasPrevPage={data?.meta?.hasPrevPage}
            hasNextPage={data?.meta?.hasNextPage}
-            onPageChange={setPage}
+            onNext={() => goNext(data?.meta?.nextCursor)}
+            onPrev={goPrev}
          />
        </Box>
      </Container>
@@ -1,6 +1,6 @@
 {
  "name": "server",
-  "version": "0.24.1",
+  "version": "0.25.1",
  "description": "",
  "author": "",
  "private": true,
@@ -33,28 +33,28 @@
    "@ai-sdk/google": "^3.0.9",
    "@ai-sdk/openai": "^3.0.11",
    "@ai-sdk/openai-compatible": "^2.0.12",
-    "@aws-sdk/client-s3": "3.701.0",
-    "@aws-sdk/lib-storage": "3.701.0",
-    "@aws-sdk/s3-request-presigner": "3.701.0",
+    "@aws-sdk/client-s3": "3.982.0",
+    "@aws-sdk/lib-storage": "3.982.0",
+    "@aws-sdk/s3-request-presigner": "3.982.0",
    "@fastify/cookie": "^11.0.2",
-    "@fastify/multipart": "^9.3.0",
-    "@fastify/static": "^8.3.0",
-    "@langchain/core": "1.1.13",
+    "@fastify/multipart": "^9.4.0",
+    "@fastify/static": "^9.0.0",
+    "@langchain/core": "1.1.18",
    "@langchain/textsplitters": "1.0.1",
    "@nestjs-labs/nestjs-ioredis": "^11.0.4",
    "@nestjs/bullmq": "^11.0.4",
    "@nestjs/common": "^11.1.11",
    "@nestjs/config": "^4.0.2",
-    "@nestjs/core": "^11.1.11",
+    "@nestjs/core": "^11.1.13",
    "@nestjs/event-emitter": "^3.0.1",
    "@nestjs/jwt": "11.0.0",
    "@nestjs/mapped-types": "^2.1.0",
    "@nestjs/passport": "^11.0.5",
-    "@nestjs/platform-fastify": "^11.1.11",
-    "@nestjs/platform-socket.io": "^11.1.11",
+    "@nestjs/platform-fastify": "^11.1.13",
+    "@nestjs/platform-socket.io": "^11.1.13",
    "@nestjs/schedule": "^6.1.0",
    "@nestjs/terminus": "^11.0.0",
-    "@nestjs/websockets": "^11.1.11",
+    "@nestjs/websockets": "^11.1.13",
    "@node-saml/passport-saml": "^5.1.0",
    "@react-email/components": "0.0.28",
    "@react-email/render": "1.0.2",
@@ -41,7 +41,8 @@ import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
 // see: https://github.com/ueberdosis/tiptap/issues/5352
 // see:https://github.com/ueberdosis/tiptap/issues/4089
 //import { generateJSON } from '@tiptap/html';
-import { Node } from '@tiptap/pm/model';
+import { Node, Schema } from '@tiptap/pm/model';
+import { Logger } from '@nestjs/common';

 export const tiptapExtensions = [
  StarterKit.configure({
@@ -110,9 +111,53 @@ export function jsonToText(tiptapJson: JSONContent) {
 }

 export function jsonToNode(tiptapJson: JSONContent) {
-  return Node.fromJSON(getSchema(tiptapExtensions), tiptapJson);
+  const schema = getSchema(tiptapExtensions);
+  try {
+    return Node.fromJSON(schema, tiptapJson);
+  } catch (error) {
+    if (
+      error instanceof RangeError &&
+      error.message.includes('Unknown node type')
+    ) {
+      Logger.warn('Stripping unknown node types from document:', error.message);
+      const cleanedJson = stripUnknownNodes(tiptapJson, schema);
+      return Node.fromJSON(schema, cleanedJson);
+    }
+    throw error;
+  }
 }

 export function getPageId(documentName: string) {
  return documentName.split('.')[1];
 }
+
+function stripUnknownNodes(
+  json: JSONContent,
+  schema: Schema,
+): JSONContent | null {
+  if (!json || typeof json !== 'object') return json;
+
+  // Recursively clean children first, flattening any unwrapped content
+  if (json.content && Array.isArray(json.content)) {
+    const newContent: JSONContent[] = [];
+    for (const child of json.content) {
+      const cleaned = stripUnknownNodes(child, schema);
+      if (Array.isArray(cleaned)) {
+        newContent.push(...cleaned);
+      } else if (cleaned) {
+        newContent.push(cleaned);
+      }
+    }
+    json.content = newContent;
+  }
+
+  // Check if this node is unknown AFTER processing children
+  if (json.type && !schema.nodes[json.type]) {
+    // Unwrap: return cleaned children directly instead of wrapping
+    return (
+      json.content && json.content.length > 0 ? json.content : null
+    ) as any;
+  }
+
+  return json;
+}
@@ -79,6 +79,8 @@ export class RedisSyncExtension<TCE extends CustomEvents> implements Extension {
    this.customEvents = (customEvents as any) ?? ({} as any as CustomEvents);
    this.sub.subscribe(this.msgChannel, `${this.msgChannel}:${this.serverId}`);
    this.sub.on('messageBuffer', this.handleRedisMessage);
+    this.pub.on('error', () => {});
+    this.sub.on('error', () => {});
  }
  private getKey(documentName: string) {
    return `${this.lockPrefix}:${documentName}`;
@@ -3,6 +3,7 @@ import { OnEvent } from '@nestjs/event-emitter';
 import { PageHistoryRepo } from '@docmost/db/repos/page/page-history.repo';
 import { Page } from '@docmost/db/types/entity.types';
 import { isDeepStrictEqual } from 'node:util';
+import { EnvironmentService } from '../../integrations/environment/environment.service';

 export class UpdatedPageEvent {
  page: Page;
@@ -12,7 +13,10 @@ export class UpdatedPageEvent {
 export class HistoryListener {
  private readonly logger = new Logger(HistoryListener.name);

-  constructor(private readonly pageHistoryRepo: PageHistoryRepo) {}
+  constructor(
+    private readonly pageHistoryRepo: PageHistoryRepo,
+    private readonly environmentService: EnvironmentService,
+  ) {}

  @OnEvent('collab.page.updated')
  async handleCreatePageHistory(event: UpdatedPageEvent) {
@@ -20,13 +24,17 @@ export class HistoryListener {

    const pageCreationTime = new Date(page.createdAt).getTime();
    const currentTime = Date.now();
-    const FIVE_MINUTES = 5 * 60 * 1000;
+    const FIVE_MINUTES = this.environmentService.isDevelopment()
+      ? 60 * 1000
+      : 5 * 60 * 1000;

    if (currentTime - pageCreationTime < FIVE_MINUTES) {
      return;
    }

-    const lastHistory = await this.pageHistoryRepo.findPageLastHistory(page.id);
+    const lastHistory = await this.pageHistoryRepo.findPageLastHistory(page.id, {
+      includeContent: true,
+    });

    if (
      !lastHistory ||
@@ -19,7 +19,8 @@ async function bootstrap() {
      },
    }),
    {
-      bufferLogs: true,
+      logger: false,
+      bufferLogs: false,
    },
  );

@@ -36,7 +37,8 @@ async function bootstrap() {
  const logger = new Logger('CollabServer');

  const port = process.env.COLLAB_PORT || 3001;
-  await app.listen(port, '0.0.0.0', () => {
+  const host = process.env.HOST || '0.0.0.0';
+  await app.listen(port, host, () => {
    logger.log(`Listening on http://127.0.0.1:${port}`);
  });
 }
@@ -0,0 +1,16 @@
+export type ExportPageMetadata = {
+  pageId: string;
+  slugId: string;
+  icon: string | null;
+  position: string;
+  parentPath: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type ExportMetadata = {
+  exportedAt: string;
+  source: 'docmost';
+  version: string;
+  pages: Record<string, ExportPageMetadata>;
+};
@@ -9,16 +9,14 @@ import { UpdateCommentDto } from './dto/update-comment.dto';
 import { CommentRepo } from '@docmost/db/repos/comment/comment.repo';
 import { Comment, Page, User } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { PaginationResult } from '@docmost/db/pagination/pagination';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
-import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
+import { CursorPaginationResult } from '@docmost/db/pagination/cursor-pagination';

@Injectable()
 export class CommentService {
  constructor(
    private commentRepo: CommentRepo,
    private pageRepo: PageRepo,
-    private spaceMemberRepo: SpaceMemberRepo,
  ) {}

  async findById(commentId: string) {
@@ -68,14 +66,14 @@ export class CommentService {
  async findByPageId(
    pageId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<Comment>> {
+  ): Promise<CursorPaginationResult<Comment>> {
    const page = await this.pageRepo.findById(pageId);

    if (!page) {
      throw new BadRequestException('Page not found');
    }

-    return await this.commentRepo.findPageComments(pageId, pagination);
+    return this.commentRepo.findPageComments(pageId, pagination);
  }

  async update(
@@ -11,7 +11,7 @@ import { UpdateGroupDto } from '../dto/update-group.dto';
 import { KyselyTransaction } from '@docmost/db/types/kysely.types';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
 import { Group, InsertableGroup, User } from '@docmost/db/types/entity.types';
-import { PaginationResult } from '@docmost/db/pagination/pagination';
+import { CursorPaginationResult } from '@docmost/db/pagination/cursor-pagination';
 import { GroupUserService } from './group-user.service';

@Injectable()
@@ -132,12 +132,8 @@ export class GroupService {
  async getWorkspaceGroups(
    workspaceId: string,
    paginationOptions: PaginationOptions,
-  ): Promise<PaginationResult<Group>> {
-    const groups = await this.groupRepo.getGroupsPaginated(
-      workspaceId,
-      paginationOptions,
-    );
-    return groups;
+  ): Promise<CursorPaginationResult<Group>> {
+    return this.groupRepo.getGroupsPaginated(workspaceId, paginationOptions);
  }

  async deleteGroup(groupId: string, workspaceId: string): Promise<void> {
@@ -215,7 +215,6 @@ export class PageController {
    }
  }

-  // TODO: scope to workspaces
  @HttpCode(HttpStatus.OK)
  @Post('/history')
  async getPageHistory(
@@ -2,25 +2,25 @@ import { Injectable } from '@nestjs/common';
 import { PageHistoryRepo } from '@docmost/db/repos/page/page-history.repo';
 import { PageHistory } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { PaginationResult } from '@docmost/db/pagination/pagination';
+import { CursorPaginationResult } from '@docmost/db/pagination/cursor-pagination';

@Injectable()
 export class PageHistoryService {
  constructor(private pageHistoryRepo: PageHistoryRepo) {}

  async findById(historyId: string): Promise<PageHistory> {
-    return await this.pageHistoryRepo.findById(historyId);
+    return await this.pageHistoryRepo.findById(historyId, {
+      includeContent: true,
+    });
  }

  async findHistoryByPageId(
    pageId: string,
    paginationOptions: PaginationOptions,
-  ): Promise<PaginationResult<any>> {
-    const pageHistory = await this.pageHistoryRepo.findPageHistoryByPageId(
+  ): Promise<CursorPaginationResult<PageHistory>> {
+    return this.pageHistoryRepo.findPageHistoryByPageId(
      pageId,
      paginationOptions,
    );
-
-    return pageHistory;
  }
 }
@@ -10,9 +10,9 @@ import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { InsertablePage, Page, User } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
 import {
-  executeWithPagination,
-  PaginationResult,
-} from '@docmost/db/pagination/pagination';
+  CursorPaginationResult,
+  executeWithCursorPagination,
+} from '@docmost/db/pagination/cursor-pagination';
 import { InjectKysely } from 'nestjs-kysely';
 import { KyselyDB } from '@docmost/db/types/kysely.types';
 import { generateJitteredKeyBetween } from 'fractional-indexing-jittered';
@@ -180,7 +180,7 @@ export class PageService {
    spaceId: string,
    pagination: PaginationOptions,
    pageId?: string,
-  ): Promise<any> {
+  ): Promise<CursorPaginationResult<Partial<Page> & { hasChildren: boolean }>> {
    let query = this.db
      .selectFrom('pages')
      .select([
@@ -195,7 +195,6 @@ export class PageService {
        'deletedAt',
      ])
      .select((eb) => this.pageRepo.withHasChildren(eb))
-      .orderBy('position', (ob) => ob.collate('C').asc())
      .where('deletedAt', 'is', null)
      .where('spaceId', '=', spaceId);

@@ -205,12 +204,19 @@ export class PageService {
      query = query.where('parentPageId', 'is', null);
    }

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: 250,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        { expression: 'position', direction: 'asc', orderModifier: (ob) => ob.collate('C').asc() },
+        { expression: 'id', direction: 'asc' },
+      ],
+      parseCursor: (cursor) => ({
+        position: cursor.position,
+        id: cursor.id,
+      }),
    });
-
-    return result;
  }

  async movePageToSpace(rootPage: Page, spaceId: string) {
@@ -259,7 +265,7 @@ export class PageService {

        await this.aiQueue.add(QueueJob.PAGE_MOVED_TO_SPACE, {
          pageId: pageIds,
-          workspaceId: rootPage.workspaceId
+          workspaceId: rootPage.workspaceId,
        });
      }
    });
@@ -387,9 +393,14 @@ export class PageService {
          workspaceId: page.workspaceId,
          creatorId: authUser.id,
          lastUpdatedById: authUser.id,
-          parentPageId: page.id === rootPage.id
-            ? (isDuplicateInSameSpace ? rootPage.parentPageId : null)
-            : (page.parentPageId ? pageMap.get(page.parentPageId)?.newPageId : null),
+          parentPageId:
+            page.id === rootPage.id
+              ? isDuplicateInSameSpace
+                ? rootPage.parentPageId
+                : null
+              : page.parentPageId
+                ? pageMap.get(page.parentPageId)?.newPageId
+                : null,
        };
      }),
    );
@@ -569,22 +580,22 @@ export class PageService {
  async getRecentSpacePages(
    spaceId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<Page>> {
-    return await this.pageRepo.getRecentPagesInSpace(spaceId, pagination);
+  ): Promise<CursorPaginationResult<Page>> {
+    return this.pageRepo.getRecentPagesInSpace(spaceId, pagination);
  }

  async getRecentPages(
    userId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<Page>> {
-    return await this.pageRepo.getRecentPages(userId, pagination);
+  ): Promise<CursorPaginationResult<Page>> {
+    return this.pageRepo.getRecentPages(userId, pagination);
  }

  async getDeletedSpacePages(
    spaceId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<Page>> {
-    return await this.pageRepo.getDeletedPagesInSpace(spaceId, pagination);
+  ): Promise<CursorPaginationResult<Page>> {
+    return this.pageRepo.getDeletedPagesInSpace(spaceId, pagination);
  }

  async forceDelete(pageId: string, workspaceId: string): Promise<void> {
@@ -26,11 +26,11 @@ export class SearchService {
      userId?: string;
      workspaceId: string;
    },
-  ): Promise<SearchResponseDto[]> {
+  ): Promise<{ items: SearchResponseDto[] }> {
    const { query } = searchParams;

    if (query.length < 1) {
-      return;
+      return { items: [] };
    }
    const searchQuery = tsquery(query.trim() + '*');

@@ -62,7 +62,7 @@ export class SearchService {
      )
      .where('deletedAt', 'is', null)
      .orderBy('rank', 'desc')
-      .limit(searchParams.limit | 25)
+      .limit(searchParams.limit || 25)
      .offset(searchParams.offset || 0);

    if (!searchParams.shareId) {
@@ -86,7 +86,7 @@ export class SearchService {
      const shareId = searchParams.shareId;
      const share = await this.shareRepo.findById(shareId);
      if (!share || share.workspaceId !== opts.workspaceId) {
-        return [];
+        return { items: [] };
      }

      const pageIdsToSearch = [];
@@ -108,10 +108,10 @@ export class SearchService {
          .where('id', 'in', pageIdsToSearch)
          .where('workspaceId', '=', opts.workspaceId);
      } else {
-        return [];
+        return { items: [] };
      }
    } else {
-      return [];
+      return { items: [] };
    }

    //@ts-ignore
@@ -127,7 +127,7 @@ export class SearchService {
      return result;
    });

-    return searchResults;
+    return { items: searchResults };
  }

  async searchSuggestions(
@@ -13,7 +13,7 @@ import { SpaceRepo } from '@docmost/db/repos/space/space.repo';
 import { RemoveSpaceMemberDto } from '../dto/remove-space-member.dto';
 import { UpdateSpaceMemberRoleDto } from '../dto/update-space-member-role.dto';
 import { SpaceRole } from '../../../common/helpers/types/permission';
-import { PaginationResult } from '@docmost/db/pagination/pagination';
+import { CursorPaginationResult } from '@docmost/db/pagination/cursor-pagination';

@Injectable()
 export class SpaceMemberService {
@@ -68,18 +68,16 @@ export class SpaceMemberService {
    spaceId: string,
    workspaceId: string,
    pagination: PaginationOptions,
-  ) {
+  ): Promise<CursorPaginationResult<any>> {
    const space = await this.spaceRepo.findById(spaceId, workspaceId);
    if (!space) {
      throw new NotFoundException('Space not found');
    }

-    const members = await this.spaceMemberRepo.getSpaceMembersPaginated(
+    return await this.spaceMemberRepo.getSpaceMembersPaginated(
      spaceId,
      pagination,
    );
-
-    return members;
  }

  async addMembersToSpaceBatch(
@@ -276,7 +274,7 @@ export class SpaceMemberService {
  async getUserSpaces(
    userId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<Space>> {
-    return await this.spaceMemberRepo.getUserSpaces(userId, pagination);
+  ): Promise<CursorPaginationResult<Space>> {
+    return this.spaceMemberRepo.getUserSpaces(userId, pagination);
  }
 }
@@ -8,7 +8,6 @@ import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
 import { SpaceRepo } from '@docmost/db/repos/space/space.repo';
 import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
 import { Space, User } from '@docmost/db/types/entity.types';
-import { PaginationResult } from '@docmost/db/pagination/pagination';
 import { UpdateSpaceDto } from '../dto/update-space.dto';
 import { executeTx } from '@docmost/db/utils';
 import { InjectKysely } from 'nestjs-kysely';
@@ -17,6 +16,7 @@ import { SpaceRole } from '../../../common/helpers/types/permission';
 import { QueueJob, QueueName } from 'src/integrations/queue/constants';
 import { Queue } from 'bullmq';
 import { InjectQueue } from '@nestjs/bullmq';
+import { CursorPaginationResult } from '@docmost/db/pagination/cursor-pagination';

@Injectable()
 export class SpaceService {
@@ -130,13 +130,8 @@ export class SpaceService {
  async getWorkspaceSpaces(
    workspaceId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<Space>> {
-    const spaces = await this.spaceRepo.getSpacesInWorkspace(
-      workspaceId,
-      pagination,
-    );
-
-    return spaces;
+  ): Promise<CursorPaginationResult<Space>> {
+    return this.spaceRepo.getSpacesInWorkspace(workspaceId, pagination);
  }

  async deleteSpace(spaceId: string, workspaceId: string): Promise<void> {
@@ -23,7 +23,7 @@ import InvitationAcceptedEmail from '@docmost/transactional/emails/invitation-ac
 import { TokenService } from '../../auth/services/token.service';
 import { nanoIdGen } from '../../../common/helpers';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { DomainService } from 'src/integrations/environment/domain.service';
 import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
@@ -64,12 +64,13 @@ export class WorkspaceInvitationService {
      );
    }

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'asc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
-
-    return result;
  }

  async getInvitationById(invitationId: string, workspace: Workspace) {
@@ -19,7 +19,6 @@ import { User } from '@docmost/db/types/entity.types';
 import { GroupUserRepo } from '@docmost/db/repos/group/group-user.repo';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { PaginationResult } from '@docmost/db/pagination/pagination';
 import { UpdateWorkspaceUserRoleDto } from '../dto/update-workspace-user-role.dto';
 import { UserRepo } from '@docmost/db/repos/user/user.repo';
 import { EnvironmentService } from '../../../integrations/environment/environment.service';
@@ -28,12 +27,12 @@ import { jsonArrayFrom } from 'kysely/helpers/postgres';
 import { addDays } from 'date-fns';
 import { DISALLOWED_HOSTNAMES, WorkspaceStatus } from '../workspace.constants';
 import { v4 } from 'uuid';
-import { AttachmentType } from 'src/core/attachment/attachment.constants';
 import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
 import { Queue } from 'bullmq';
 import { generateRandomSuffixNumbers } from '../../../common/helpers';
 import { isPageEmbeddingsTableExists } from '@docmost/db/helpers/helpers';
+import { CursorPaginationResult } from '@docmost/db/pagination/cursor-pagination';

@Injectable()
 export class WorkspaceService {
@@ -376,13 +375,8 @@ export class WorkspaceService {
  async getWorkspaceUsers(
    workspaceId: string,
    pagination: PaginationOptions,
-  ): Promise<PaginationResult<User>> {
-    const users = await this.userRepo.getUsersPaginated(
-      workspaceId,
-      pagination,
-    );
-
-    return users;
+  ): Promise<CursorPaginationResult<User>> {
+    return this.userRepo.getUsersPaginated(workspaceId, pagination);
  }

  async updateWorkspaceUserRole(
@@ -0,0 +1,348 @@
+// adapted from https://github.com/charlie-hadden/kysely-paginate/blob/main/src/cursor.ts - MIT
+import {
+  OrderByDirection,
+  OrderByModifiers,
+  ReferenceExpression,
+  SelectQueryBuilder,
+  StringReference,
+} from 'kysely';
+
+type SortField<DB, TB extends keyof DB, O> =
+  | {
+      expression:
+        | (StringReference<DB, TB> & keyof O & string)
+        | (StringReference<DB, TB> & `${string}.${keyof O & string}`);
+      direction: OrderByDirection;
+      orderModifier?: OrderByModifiers;
+      key?: keyof O & string;
+    }
+  | {
+      expression: ReferenceExpression<DB, TB>;
+      direction: OrderByDirection;
+      orderModifier?: OrderByModifiers;
+      key: keyof O & string;
+    };
+
+type ExtractSortFieldKey<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends SortField<DB, TB, O>,
+> = T['key'] extends keyof O & string
+  ? T['key']
+  : T['expression'] extends keyof O & string
+    ? T['expression']
+    : T['expression'] extends `${string}.${infer K}`
+      ? K extends keyof O & string
+        ? K
+        : never
+      : never;
+
+type Fields<DB, TB extends keyof DB, O> = ReadonlyArray<
+  Readonly<SortField<DB, TB, O>>
+>;
+
+type FieldNames<DB, TB extends keyof DB, O, T extends Fields<DB, TB, O>> = {
+  [TIndex in keyof T]: ExtractSortFieldKey<DB, TB, O, T[TIndex]>;
+};
+
+type EncodeCursorValues<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+> = {
+  [TIndex in keyof T]: [
+    ExtractSortFieldKey<DB, TB, O, T[TIndex]>,
+    O[ExtractSortFieldKey<DB, TB, O, T[TIndex]>],
+  ];
+};
+
+export type CursorEncoder<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+> = (values: EncodeCursorValues<DB, TB, O, T>) => string;
+
+type DecodedCursor<DB, TB extends keyof DB, O, T extends Fields<DB, TB, O>> = {
+  [TField in ExtractSortFieldKey<DB, TB, O, T[number]>]: string;
+};
+
+export type CursorDecoder<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+> = (
+  cursor: string,
+  fields: FieldNames<DB, TB, O, T>,
+) => DecodedCursor<DB, TB, O, T>;
+
+type ParsedCursorValues<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+> = {
+  [TField in ExtractSortFieldKey<DB, TB, O, T[number]>]: O[TField];
+};
+
+export type CursorParser<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+> = (cursor: DecodedCursor<DB, TB, O, T>) => ParsedCursorValues<DB, TB, O, T>;
+
+type CursorPaginationResultRow<
+  TRow,
+  TCursorKey extends string | boolean | undefined,
+> = TRow & {
+  [K in TCursorKey extends undefined
+    ? never
+    : TCursorKey extends false
+      ? never
+      : TCursorKey extends true
+        ? '$cursor'
+        : TCursorKey]: string;
+};
+
+type CursorPaginationMeta = {
+  limit: number;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+  nextCursor: string | null;
+  prevCursor: string | null;
+};
+
+export type CursorPaginationResult<
+  TRow,
+  TCursorKey extends string | boolean | undefined = undefined,
+> = {
+  meta: CursorPaginationMeta;
+  items: CursorPaginationResultRow<TRow, TCursorKey>[];
+};
+
+export async function executeWithCursorPagination<
+  DB,
+  TB extends keyof DB,
+  O,
+  const TFields extends Fields<DB, TB, O>,
+  TCursorKey extends string | boolean | undefined = undefined,
+>(
+  qb: SelectQueryBuilder<DB, TB, O>,
+  opts: {
+    perPage: number;
+    cursor?: string;
+    beforeCursor?: string;
+    cursorPerRow?: TCursorKey;
+    fields: TFields;
+    encodeCursor?: CursorEncoder<DB, TB, O, TFields>;
+    decodeCursor?: CursorDecoder<DB, TB, O, TFields>;
+    parseCursor:
+      | CursorParser<DB, TB, O, TFields>
+      | { parse: CursorParser<DB, TB, O, TFields> };
+  },
+): Promise<CursorPaginationResult<O, TCursorKey>> {
+  const encodeCursor = opts.encodeCursor ?? defaultEncodeCursor;
+  const decodeCursor = opts.decodeCursor ?? defaultDecodeCursor;
+
+  const parseCursor =
+    typeof opts.parseCursor === 'function'
+      ? opts.parseCursor
+      : opts.parseCursor.parse;
+
+  const fields = opts.fields.map((field) => {
+    let key = field.key;
+
+    if (!key && typeof field.expression === 'string') {
+      const expressionParts = field.expression.split('.');
+
+      key = (expressionParts[1] ?? expressionParts[0]) as
+        | (keyof O & string)
+        | undefined;
+    }
+
+    if (!key) throw new Error('missing key');
+
+    return { ...field, key };
+  });
+
+  function generateCursor(row: O): string {
+    const cursorFieldValues = fields.map(({ key }) => [
+      key,
+      row[key],
+    ]) as EncodeCursorValues<DB, TB, O, TFields>;
+
+    return encodeCursor(cursorFieldValues);
+  }
+
+  const fieldNames = fields.map((field) => field.key) as FieldNames<
+    DB,
+    TB,
+    O,
+    TFields
+  >;
+
+  function applyCursor(
+    qb: SelectQueryBuilder<DB, TB, O>,
+    encoded: string,
+    defaultDirection: OrderByDirection,
+  ) {
+    const decoded = decodeCursor(encoded, fieldNames);
+    const cursor = parseCursor(decoded);
+
+    return qb.where(({ and, or, eb }) => {
+      let expression;
+
+      for (let i = fields.length - 1; i >= 0; --i) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const field = fields[i]!;
+
+        const comparison = field.direction === defaultDirection ? '>' : '<';
+        const value = cursor[field.key as keyof typeof cursor];
+
+        const conditions = [eb(field.expression, comparison, value)];
+
+        if (expression) {
+          conditions.push(and([eb(field.expression, '=', value), expression]));
+        }
+
+        expression = or(conditions);
+      }
+
+      if (!expression) {
+        throw new Error('Error building cursor expression');
+      }
+
+      return expression;
+    });
+  }
+
+  if (opts.cursor) qb = applyCursor(qb, opts.cursor, 'asc');
+  if (opts.beforeCursor) qb = applyCursor(qb, opts.beforeCursor, 'desc');
+
+  const reversed = !!opts.beforeCursor && !opts.cursor;
+
+  for (const { expression, direction, orderModifier } of fields) {
+    qb = qb.orderBy(
+      expression,
+      orderModifier ??
+        (reversed ? (direction === 'asc' ? 'desc' : 'asc') : direction),
+    );
+  }
+
+  const rows = await qb.limit(opts.perPage + 1).execute();
+
+  const hasNextPage = rows.length > opts.perPage;
+
+  // If we fetched an extra row to determine if we have a next page, that
+  // shouldn't be in the returned results
+  if (rows.length > opts.perPage) rows.pop();
+
+  if (reversed) rows.reverse();
+
+  const startRow = rows[0];
+  const endRow = rows[rows.length - 1];
+
+  const hasPrevPage = !!opts.cursor;
+  const prevCursor = hasPrevPage && startRow ? generateCursor(startRow) : null;
+  const nextCursor = hasNextPage && endRow ? generateCursor(endRow) : null;
+
+  return {
+    items: rows.map((row) => {
+      if (opts.cursorPerRow) {
+        const cursorKey =
+          typeof opts.cursorPerRow === 'string' ? opts.cursorPerRow : '$cursor';
+
+        (row as any)[cursorKey] = generateCursor(row);
+      }
+
+      return row as CursorPaginationResultRow<O, TCursorKey>;
+    }),
+    meta: {
+      limit: opts.perPage,
+      hasNextPage,
+      hasPrevPage,
+      nextCursor,
+      prevCursor,
+    },
+  };
+}
+
+export function defaultEncodeCursor<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+>(values: EncodeCursorValues<DB, TB, O, T>) {
+  const cursor = new URLSearchParams();
+
+  for (const [key, value] of values) {
+    switch (typeof value) {
+      case 'string':
+        cursor.set(key, value);
+        break;
+
+      case 'number':
+      case 'bigint':
+        cursor.set(key, value.toString(10));
+        break;
+
+      case 'object': {
+        if (value instanceof Date) {
+          cursor.set(key, value.toISOString());
+          break;
+        }
+      }
+
+      // eslint-disable-next-line no-fallthrough
+      default:
+        throw new Error(`Unable to encode '${key.toString()}'`);
+    }
+  }
+
+  return Buffer.from(cursor.toString(), 'utf8').toString('base64url');
+}
+
+export function defaultDecodeCursor<
+  DB,
+  TB extends keyof DB,
+  O,
+  T extends Fields<DB, TB, O>,
+>(
+  cursor: string,
+  fields: FieldNames<DB, TB, O, T>,
+): DecodedCursor<DB, TB, O, T> {
+  let parsed;
+
+  try {
+    parsed = [
+      ...new URLSearchParams(
+        Buffer.from(cursor, 'base64url').toString('utf8'),
+      ).entries(),
+    ];
+  } catch {
+    throw new Error('Unparsable cursor');
+  }
+
+  if (parsed.length !== fields.length) {
+    throw new Error('Unexpected number of fields');
+  }
+
+  for (let i = 0; i < fields.length; i++) {
+    const field = parsed[i];
+    const expectedName = fields[i];
+
+    if (!field) {
+      throw new Error('Unable to find field');
+    }
+
+    if (field[0] !== expectedName) {
+      throw new Error('Unexpected field name');
+    }
+  }
+
+  return Object.fromEntries(parsed) as DecodedCursor<DB, TB, O, T>;
+}
@@ -9,11 +9,6 @@ import {
 } from 'class-validator';

 export class PaginationOptions {
-  @IsOptional()
-  @IsNumber()
-  @Min(1)
-  page = 1;
-
  @IsOptional()
  @IsNumber()
  @IsPositive()
@@ -21,6 +16,14 @@ export class PaginationOptions {
  @Max(100)
  limit = 20;

+  @IsOptional()
+  @IsString()
+  cursor?: string;
+
+  @IsOptional()
+  @IsString()
+  beforeCursor?: string;
+
  @IsOptional()
  @IsString()
  query: string;
@@ -8,7 +8,7 @@ import {
  UpdatableComment,
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { ExpressionBuilder } from 'kysely';
 import { DB } from '@docmost/db/types/db';
 import { jsonObjectFrom } from 'kysely/helpers/postgres';
@@ -37,15 +37,15 @@ export class CommentRepo {
      .selectAll('comments')
      .select((eb) => this.withCreator(eb))
      .select((eb) => this.withResolvedBy(eb))
-      .where('pageId', '=', pageId)
-      .orderBy('createdAt', 'asc');
+      .where('pageId', '=', pageId);

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'asc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
-
-    return result;
  }

  async updateComment(
@@ -9,7 +9,7 @@ import { dbOrTx, executeTx } from '@docmost/db/utils';
 import { sql } from 'kysely';
 import { GroupUser, InsertableGroupUser } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '../../pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
 import { UserRepo } from '@docmost/db/repos/user/user.repo';

@@ -52,8 +52,7 @@ export class GroupUserRepo {
      .selectFrom('groupUsers')
      .innerJoin('users', 'users.id', 'groupUsers.userId')
      .selectAll('users')
-      .where('groupId', '=', groupId)
-      .orderBy('createdAt', 'asc');
+      .where('groupId', '=', groupId);

    if (pagination.query) {
      query = query.where((eb) =>
@@ -61,9 +60,12 @@ export class GroupUserRepo {
      );
    }

-    const result = await executeWithPagination(query, {
-      page: pagination.page,
+    const result = await executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'users.id', direction: 'asc', key: 'id' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });

    result.items.map((user) => {
@@ -10,8 +10,8 @@ import {
 import { ExpressionBuilder, sql } from 'kysely';
 import { PaginationOptions } from '../../pagination/pagination-options';
 import { DB } from '@docmost/db/types/db';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
 import { DefaultGroup } from '../../../core/group/dto/create-group.dto';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';

@Injectable()
 export class GroupRepo {
@@ -104,17 +104,19 @@ export class GroupRepo {
  }

  async getGroupsPaginated(workspaceId: string, pagination: PaginationOptions) {
-    let query = this.db
+    let baseQuery = this.db
      .selectFrom('groups')
      .selectAll('groups')
      .select((eb) => this.withMemberCount(eb))
-      .where('workspaceId', '=', workspaceId)
-      .orderBy('memberCount', 'desc')
-      .orderBy('createdAt', 'asc');
+      .where('workspaceId', '=', workspaceId);

    if (pagination.query) {
-      query = query.where((eb) =>
-        eb(sql`f_unaccent(name)`, 'ilike', sql`f_unaccent(${'%' + pagination.query + '%'})`).or(
+      baseQuery = baseQuery.where((eb) =>
+        eb(
+          sql`f_unaccent(name)`,
+          'ilike',
+          sql`f_unaccent(${'%' + pagination.query + '%'})`,
+        ).or(
          sql`f_unaccent(description)`,
          'ilike',
          sql`f_unaccent(${'%' + pagination.query + '%'})`,
@@ -122,12 +124,24 @@ export class GroupRepo {
      );
    }

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    const query = this.db.selectFrom(baseQuery.as('sub')).selectAll('sub');
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        {
+          expression: 'sub.memberCount',
+          direction: 'desc',
+          key: 'memberCount',
+        },
+        { expression: 'sub.id', direction: 'asc', key: 'id' },
+      ],
+      parseCursor: (cursor) => ({
+        memberCount: parseInt(cursor.memberCount, 10),
+        id: cursor.id,
+      }),
    });
-
-    return result;
  }

  withMemberCount(eb: ExpressionBuilder<DB, 'groups'>) {
@@ -8,7 +8,7 @@ import {
  PageHistory,
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { jsonObjectFrom } from 'kysely/helpers/postgres';
 import { ExpressionBuilder } from 'kysely';
 import { DB } from '@docmost/db/types/db';
@@ -17,15 +17,32 @@ import { DB } from '@docmost/db/types/db';
 export class PageHistoryRepo {
  constructor(@InjectKysely() private readonly db: KyselyDB) {}

+  private baseFields: Array<keyof PageHistory> = [
+    'id',
+    'pageId',
+    'slugId',
+    'title',
+    'icon',
+    'coverPhoto',
+    'lastUpdatedById',
+    'spaceId',
+    'workspaceId',
+    'createdAt',
+  ];
+
  async findById(
    pageHistoryId: string,
-    trx?: KyselyTransaction,
+    opts?: {
+      includeContent?: boolean;
+      trx?: KyselyTransaction;
+    },
  ): Promise<PageHistory> {
-    const db = dbOrTx(this.db, trx);
+    const db = dbOrTx(this.db, opts?.trx);

    return await db
      .selectFrom('pageHistory')
-      .selectAll()
+      .select(this.baseFields)
+      .$if(opts?.includeContent, (qb) => qb.select('content'))
      .select((eb) => this.withLastUpdatedBy(eb))
      .where('id', '=', pageHistoryId)
      .executeTakeFirst();
@@ -63,25 +80,32 @@ export class PageHistoryRepo {
  async findPageHistoryByPageId(pageId: string, pagination: PaginationOptions) {
    const query = this.db
      .selectFrom('pageHistory')
-      .selectAll()
+      .select(this.baseFields)
      .select((eb) => this.withLastUpdatedBy(eb))
-      .where('pageId', '=', pageId)
-      .orderBy('createdAt', 'desc');
+      .where('pageId', '=', pageId);

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'desc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
-
-    return result;
  }

-  async findPageLastHistory(pageId: string, trx?: KyselyTransaction) {
-    const db = dbOrTx(this.db, trx);
+  async findPageLastHistory(
+    pageId: string,
+    opts?: {
+      includeContent?: boolean;
+      trx?: KyselyTransaction;
+    },
+  ) {
+    const db = dbOrTx(this.db, opts?.trx);

    return await db
      .selectFrom('pageHistory')
-      .selectAll()
+      .select(this.baseFields)
+      .$if(opts?.includeContent, (qb) => qb.select('content'))
      .where('pageId', '=', pageId)
      .limit(1)
      .orderBy('createdAt', 'desc')
@@ -8,7 +8,7 @@ import {
  UpdatablePage,
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { validate as isValidUUID } from 'uuid';
 import { ExpressionBuilder, sql } from 'kysely';
 import { DB } from '@docmost/db/types/db';
@@ -281,15 +281,21 @@ export class PageRepo {
      .select(this.baseFields)
      .select((eb) => this.withSpace(eb))
      .where('spaceId', '=', spaceId)
-      .where('deletedAt', 'is', null)
-      .orderBy('updatedAt', 'desc');
+      .where('deletedAt', 'is', null);

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        { expression: 'updatedAt', direction: 'desc' },
+        { expression: 'id', direction: 'desc' },
+      ],
+      parseCursor: (cursor) => ({
+        updatedAt: new Date(cursor.updatedAt),
+        id: cursor.id,
+      }),
    });
-
-    return result;
  }

  async getRecentPages(userId: string, pagination: PaginationOptions) {
@@ -298,12 +304,20 @@ export class PageRepo {
      .select(this.baseFields)
      .select((eb) => this.withSpace(eb))
      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(userId))
-      .where('deletedAt', 'is', null)
-      .orderBy('updatedAt', 'desc');
+      .where('deletedAt', 'is', null);

-    return executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        { expression: 'updatedAt', direction: 'desc' },
+        { expression: 'id', direction: 'desc' },
+      ],
+      parseCursor: (cursor) => ({
+        updatedAt: new Date(cursor.updatedAt),
+        id: cursor.id,
+      }),
    });
  }

@@ -331,15 +345,21 @@ export class PageRepo {
            ),
          ),
        ]),
-      )
-      .orderBy('deletedAt', 'desc');
+      );

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        { expression: 'deletedAt', direction: 'desc' },
+        { expression: 'id', direction: 'desc' },
+      ],
+      parseCursor: (cursor) => ({
+        deletedAt: new Date(cursor.deletedAt),
+        id: cursor.id,
+      }),
    });
-
-    return result;
  }

  withSpace(eb: ExpressionBuilder<DB, 'pages'>) {
@@ -422,6 +442,8 @@ export class PageRepo {
            'parentPageId',
            'spaceId',
            'workspaceId',
+            'createdAt',
+            'updatedAt',
          ])
          .$if(opts?.includeContent, (qb) => qb.select('content'))
          .where('id', '=', parentPageId)
@@ -438,6 +460,8 @@ export class PageRepo {
                'p.parentPageId',
                'p.spaceId',
                'p.workspaceId',
+                'p.createdAt',
+                'p.updatedAt',
              ])
              .$if(opts?.includeContent, (qb) => qb.select('p.content'))
              .innerJoin('page_hierarchy as ph', 'p.parentPageId', 'ph.id')
@@ -8,7 +8,7 @@ import {
  UpdatableShare,
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { validate as isValidUUID } from 'uuid';
 import { ExpressionBuilder, sql } from 'kysely';
 import { DB } from '@docmost/db/types/db';
@@ -143,12 +143,20 @@ export class ShareRepo {
      .select((eb) => this.withPage(eb))
      .select((eb) => this.withSpace(eb, userId))
      .select((eb) => this.withCreator(eb))
-      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(userId))
-      .orderBy('updatedAt', 'desc');
+      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(userId));

-    return executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        { expression: 'updatedAt', direction: 'desc' },
+        { expression: 'id', direction: 'desc' },
+      ],
+      parseCursor: (cursor) => ({
+        updatedAt: new Date(cursor.updatedAt),
+        id: cursor.id,
+      }),
    });
  }

@@ -10,7 +10,7 @@ import {
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '../../pagination/pagination-options';
 import { MemberInfo, UserSpaceRole } from './types';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
 import { SpaceRepo } from '@docmost/db/repos/space/space.repo';

@@ -98,7 +98,7 @@ export class SpaceMemberRepo {
    spaceId: string,
    pagination: PaginationOptions,
  ) {
-    let query = this.db
+    let baseQuery = this.db
      .selectFrom('spaceMembers')
      .leftJoin('users', 'users.id', 'spaceMembers.userId')
      .leftJoin('groups', 'groups.id', 'spaceMembers.groupId')
@@ -114,12 +114,11 @@ export class SpaceMemberRepo {
        'spaceMembers.createdAt',
      ])
      .select((eb) => this.groupRepo.withMemberCount(eb))
-      .where('spaceId', '=', spaceId)
-      .orderBy((eb) => eb('groups.id', 'is not', null), 'desc')
-      .orderBy('spaceMembers.createdAt', 'asc');
+      .select(sql<number>`case when groups.id is not null then 1 else 0 end`.as('isGroup'))
+      .where('spaceId', '=', spaceId);

    if (pagination.query) {
-      query = query.where((eb) =>
+      baseQuery = baseQuery.where((eb) =>
        eb(
          sql`f_unaccent(users.name)`,
          'ilike',
@@ -138,9 +137,20 @@ export class SpaceMemberRepo {
      );
    }

-    const result = await executeWithPagination(query, {
-      page: pagination.page,
+    const query = this.db.selectFrom(baseQuery.as('sub')).selectAll('sub');
+
+    const result = await executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [
+        { expression: 'sub.isGroup', direction: 'desc', key: 'isGroup' },
+        { expression: 'sub.createdAt', direction: 'asc', key: 'createdAt' },
+      ],
+      parseCursor: (cursor) => ({
+        isGroup: parseInt(cursor.isGroup, 10),
+        createdAt: new Date(cursor.createdAt),
+      }),
    });

    let memberInfo: MemberInfo;
@@ -235,8 +245,7 @@ export class SpaceMemberRepo {
      .selectFrom('spaces')
      .selectAll()
      .select((eb) => [this.spaceRepo.withMemberCount(eb)])
-      .where('id', 'in', this.getUserSpaceIdsQuery(userId))
-      .orderBy('createdAt', 'asc');
+      .where('id', 'in', this.getUserSpaceIdsQuery(userId));

    if (pagination.query) {
      query = query.where((eb) =>
@@ -252,9 +261,12 @@ export class SpaceMemberRepo {
      );
    }

-    return executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'asc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
  }
 }
@@ -9,7 +9,7 @@ import {
 } from '@docmost/db/types/entity.types';
 import { ExpressionBuilder, sql } from 'kysely';
 import { PaginationOptions } from '../../pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { DB } from '@docmost/db/types/db';
 import { validate as isValidUUID } from 'uuid';
 import { EventEmitter2 } from '@nestjs/event-emitter';
@@ -110,8 +110,7 @@ export class SpaceRepo {
      .selectFrom('spaces')
      .selectAll('spaces')
      .select((eb) => [this.withMemberCount(eb)])
-      .where('workspaceId', '=', workspaceId)
-      .orderBy('createdAt', 'asc');
+      .where('workspaceId', '=', workspaceId);

    if (pagination.query) {
      query = query.where((eb) =>
@@ -127,12 +126,13 @@ export class SpaceRepo {
      );
    }

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'asc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
-
-    return result;
  }

  withMemberCount(eb: ExpressionBuilder<DB, 'spaces'>) {
@@ -10,7 +10,7 @@ import {
  User,
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '../../pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { ExpressionBuilder, sql } from 'kysely';
 import { jsonObjectFrom } from 'kysely/helpers/postgres';

@@ -145,8 +145,7 @@ export class UserRepo {
      .selectFrom('users')
      .select(this.baseFields)
      .where('workspaceId', '=', workspaceId)
-      .where('deletedAt', 'is', null)
-      .orderBy('createdAt', 'asc');
+      .where('deletedAt', 'is', null);

    if (pagination.query) {
      query = query.where((eb) =>
@@ -162,12 +161,13 @@ export class UserRepo {
      );
    }

-    const result = executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'asc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
-
-    return result;
  }

  async updatePreference(
@@ -20,11 +20,17 @@ import {
  replaceInternalLinks,
  updateAttachmentUrlsToLocalPaths,
 } from './utils';
+import {
+  ExportMetadata,
+  ExportPageMetadata,
+} from '../../common/helpers/types/export-metadata.types';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { Node } from '@tiptap/pm/model';
 import { EditorState } from '@tiptap/pm/state';
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 import slugify = require('@sindresorhus/slugify');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const packageJson = require('../../../package.json');
 import { EnvironmentService } from '../environment/environment.service';
 import {
  getAttachmentIds,
@@ -155,12 +161,17 @@ export class ExportService {
        'pages.id',
        'pages.slugId',
        'pages.title',
+        'pages.icon',
+        'pages.position',
        'pages.content',
        'pages.parentPageId',
        'pages.spaceId',
        'pages.workspaceId',
+        'pages.createdAt',
+        'pages.updatedAt',
      ])
      .where('spaceId', '=', spaceId)
+      .where('deletedAt', 'is', null)
      .execute();

    const tree = buildTree(pages as Page[]);
@@ -189,10 +200,12 @@ export class ExportService {
    includeAttachments: boolean,
  ): Promise<void> {
    const slugIdToPath: Record<string, string> = {};
+    const pageIdToFilePath: Record<string, string> = {};
+    const pagesMetadata: Record<string, ExportPageMetadata> = {};

    computeLocalPath(tree, format, null, '', slugIdToPath);

-    const stack: { folder: JSZip; parentPageId: string }[] = [
+    const stack: { folder: JSZip; parentPageId: string | null }[] = [
      { folder: zip, parentPageId: null },
    ];

@@ -232,12 +245,35 @@ export class ExportService {
          `${pageTitle}${getExportExtension(format)}`,
          pageExportContent,
        );
+
+        pageIdToFilePath[page.id] = currentPagePath;
+
+        const parentPath = parentPageId ? pageIdToFilePath[parentPageId] : null;
+        pagesMetadata[currentPagePath] = {
+          pageId: page.id,
+          slugId: page.slugId,
+          icon: page.icon ?? null,
+          position: page.position,
+          parentPath,
+          createdAt: page.createdAt?.toISOString() ?? new Date().toISOString(),
+          updatedAt: page.updatedAt?.toISOString() ?? new Date().toISOString(),
+        };
+
        if (childPages.length > 0) {
          const pageFolder = folder.folder(pageTitle);
          stack.push({ folder: pageFolder, parentPageId: page.id });
        }
      }
    }
+
+    const metadata: ExportMetadata = {
+      exportedAt: new Date().toISOString(),
+      source: 'docmost',
+      version: packageJson.version,
+      pages: pagesMetadata,
+    };
+
+    zip.file('docmost-metadata.json', JSON.stringify(metadata, null, 2));
  }

  async zipAttachments(prosemirrorJson: any, spaceId: string, zip: JSZip) {
@@ -15,4 +15,5 @@ export type ImportPageNode = {
  parentPageId: string | null;
  fileExtension: string;
  filePath: string;
+  icon?: string | null;
 };
@@ -27,7 +27,7 @@ import { AuthUser } from '../../common/decorators/auth-user.decorator';
 import { FileTaskIdDto } from './dto/file-task-dto';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
-import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';

@Controller('file-tasks')
 export class FileTaskController {
@@ -56,12 +56,14 @@ export class FileTaskController {
    const query = this.db
      .selectFrom('fileTasks')
      .selectAll()
-      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(user.id))
-      .orderBy('createdAt', 'desc');
+      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(user.id));

-    return executeWithPagination(query, {
-      page: pagination.page,
+    return executeWithCursorPagination(query, {
      perPage: pagination.limit,
+      cursor: pagination.cursor,
+      beforeCursor: pagination.beforeCursor,
+      fields: [{ expression: 'id', direction: 'desc' }],
+      parseCursor: (cursor) => ({ id: cursor.id }),
    });
  }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	3b218d31ed	switch to menu component	2026-02-06 21:32:42 -08:00
Philipinho	a27e683e06	clear existing output	2026-02-06 18:06:11 -08:00
Philipinho	37f349f040	sanitize output	2026-02-06 17:56:28 -08:00
Philipinho	7dcf5006d3	prebuild @editor-ext	2026-02-06 17:55:01 -08:00
Philipinho	4f20b43222	- Add insert below and copy option	2026-02-06 12:14:33 -08:00
Arek Nawo	06c81a4fed	feat(ee): AI menu	2026-02-06 15:16:37 +01:00
Philip Okugbe	5c3942c159	fix safari print (#1907 )	2026-02-04 08:26:03 -08:00
Philipinho	e0809e7104	v0.25.1	2026-02-04 07:10:13 -08:00
Philipinho	da6793ac87	downgrade tiptap version (fix menu)	2026-02-04 07:09:48 -08:00
Philip Okugbe	08e94eb3c1	update dependencies (#1902 )	2026-02-03 15:15:23 -08:00
Philipinho	5a14186f1c	fix global diff css	2026-02-03 13:47:56 -08:00
Philipinho	6a0bb8d4cb	v0.25.0	2026-02-03 13:18:03 -08:00
Philip Okugbe	fba9f4cb2b	New Crowdin updates (#1896 ) * New translations translation.json (Japanese) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (Japanese) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (Japanese) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian) * New translations translation.json (Japanese) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Ukrainian) * New translations translation.json (Chinese Simplified) * New translations translation.json (Portuguese, Brazilian)	2026-02-03 13:16:27 -08:00
Philipinho	d8f7c4a822	cleanup	2026-02-03 13:12:39 -08:00
Philipinho	202685b39f	fix translation	2026-02-03 13:09:56 -08:00
Philip Okugbe	fc4a428208	fix(deps): update dependencies (#1898 )	2026-02-03 13:04:00 -08:00
Philip Okugbe	5506eb194b	feat: page history diff (#1891 ) * Show actual history changes * V2 - WIP * feat: page history diff * fix: exclude content from history listing --------- Co-authored-by: Jason Norwood-Young <jason@10layer.com>	2026-02-03 11:55:20 -08:00
Philipinho	f32bb298e0	v0.25.0-beta.1	2026-01-30 23:09:01 +00:00
Pleasure1234	3178cad796	fix: handle empty replace term in search and replace functionality (#1562 ) - Fix 'Empty text nodes are not allowed' error when replace field is empty - Update both replace() and replaceAll() functions to check for empty replaceTerm	2026-01-30 22:37:22 +00:00
Philipinho	9d7f8c62c5	sync	2026-01-30 22:31:49 +00:00
Philip Okugbe	78b1c1a453	feat: switch to cursor pagination (#1884 ) * add cursor pagination function * support custom order modifier * refactor returned object * feat(db): migrate paginated endpoints to cursor-based pagination * sync * support hasPrevPage boolean * feat(client): migrate pagination from offset to cursor-based * support beforeCursor/prevCursor * wrap search results in items array for API consistency	2026-01-30 19:28:54 +00:00
Philip Okugbe	96ed98619f	feat: add IPv6 support via configurable HOST binding (#1885 )	2026-01-30 00:33:10 +00:00
Philip Okugbe	60501de992	fix: missing logs on `OnApplicationBootstrap` hook (#1882 ) * - fix: set default Nest logger and bufferLogs to false for pino compatibility - handle redis error event * fix collab server logging too	2026-01-29 09:25:23 +00:00
Philip Okugbe	74e915546b	feat: collab redis extension with server affinity (#1873 ) * feat(collab): better redis extension * move types to own file * debug logging * fix: graceful collab shutdown * rename default prefix * pass wsAdapter to gateway * expose event handler * unique collab serverId generation * uninstall @hocuspocus/extension-redis package * expose more functions * sync with latest * cleanup * fastify router options * cleanup type	2026-01-27 17:05:05 +00:00
Philipinho	3523600f40	add timestamps	2026-01-27 16:49:22 +00:00
Philip Okugbe	6ccb2bb872	feat(export): add metadata file to preserve page icons and ordering on import (#1877 ) * feat(export): add metadata file to preserve page icons and ordering on import - Export includes `docmost-metadata.json` - Import reads metadata to restore icons and sort siblings by original position * cleanup * bonus fixes * handle unknown prosemirror nodes * add docmost app version	2026-01-27 16:39:39 +00:00