feat: page break command

* feat: add heading extension with unique ID support and scroll functionality
* Added unique id for heading
* remove baseUrl heading storage
* move heading to extensions package
* WIP
* support anchors in mentions
* enhance scrolling functionality
* nodeId function
* fix nanoid import
* Bring unique-id extension local
* fixes
* fix internal link scroll in public pages
* add unique id server side
* rename mention anchor to anchorId
* capture first anchorId on paste

---------

Co-authored-by: Romik <40670677+RomikMakavana@users.noreply.github.com>

apps/client/package.json

@@ -27,7 +27,7 @@
     "@tanstack/react-query": "^5.80.6",
     "@tiptap/extension-character-count": "^2.10.3",
     "alfaaz": "^1.1.0",
-    "axios": "^1.9.0",
+    "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
     "file-saver": "^2.0.5",
@@ -57,7 +57,7 @@
     "socket.io-client": "^4.8.1",
     "tippy.js": "^6.3.7",
     "tiptap-extension-global-drag-handle": "^0.1.18",
-    "zod": "^3.25.56"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",
@@ -65,10 +65,10 @@
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/katex": "^0.16.7",
-    "@types/node": "22.10.0",
+    "@types/node": "22.19.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -81,6 +81,6 @@
     "prettier": "^3.4.1",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.17.0",
-    "vite": "^6.3.5"
+    "vite": "^7.2.4"
   }
 }

apps/client/public/locales/de-DE/translation.json

@@ -234,9 +234,7 @@
   "Anyone with this link can join this workspace.": "Jeder mit diesem Link kann dem Arbeitsbereich beitreten.",
   "Invite link": "Einladungslink",
   "Copy": "Kopieren",
-  "Copy to space": "In Raum kopieren",
   "Copied": "Kopiert",
-  "Duplicate": "Duplizieren",
   "Select a user": "Benutzer auswählen",
   "Select a group": "Gruppe auswählen",
   "Export all pages and attachments in this space.": "Alle Seiten und Anhänge in diesem Bereich exportieren.",

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

@@ -554,5 +554,20 @@
   "Select expiration date": "Select expiration date",
   "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
   "Update API key": "Update API key",
-  "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace"
+  "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace",
+  "AI settings": "AI settings",
+  "AI search": "AI search",
+  "AI Answer": "AI Answer",
+  "Ask AI": "Ask AI",
+  "AI is thinking...": "AI is thinking...",
+  "Ask a question...": "Ask a question...",
+  "AI-powered search (Ask AI)": "AI-powered search (Ask AI)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
+  "Toggle AI search": "Toggle AI search",
+  "Sources": "Sources",
+  "Ask AI not available for attachments": "Ask AI not available for attachments",
+  "No answer available": "No answer available",
+  "Background color": "Background color",
+  "Highlight color": "Highlight color",
+  "Remove color": "Remove color"
 }

apps/client/src/App.tsx

@@ -37,6 +37,7 @@ import { MfaSetupRequiredPage } from "@/ee/mfa/pages/mfa-setup-required-page";
 import SpaceTrash from "@/pages/space/space-trash.tsx";
 import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
 import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
+import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
 
 export default function App() {
   const { t } = useTranslation();
@@ -107,6 +108,7 @@ export default function App() {
             <Route path={"spaces"} element={<Spaces />} />
             <Route path={"sharing"} element={<Shares />} />
             <Route path={"security"} element={<Security />} />
+            <Route path={"ai"} element={<AiSettings />} />
             {!isCloud() && <Route path={"license"} element={<License />} />}
             {isCloud() && <Route path={"billing"} element={<Billing />} />}
           </Route>

apps/client/src/components/settings/settings-sidebar.tsx

@@ -12,13 +12,14 @@ import {
   IconLock,
   IconKey,
   IconWorld,
+  IconSparkles,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
-import { useAtom } from "jotai/index";
+import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import {
   prefetchApiKeyManagement,
@@ -109,6 +110,13 @@ const groupedData: DataGroup[] = [
         isAdmin: true,
         showDisabledInNonEE: true,
       },
+      {
+        label: "AI settings",
+        icon: IconSparkles,
+        path: "/settings/ai",
+        isAdmin: true,
+        isSelfhosted: true,
+      },
     ],
   },
   {

apps/client/src/ee/ai/components/ai-search-result.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo } from "react";
+import { Paper, Text, Group, Stack, Loader, Box } from "@mantine/core";
+import { IconSparkles, IconFileText } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { IAiSearchResponse } from "../services/ai-search-service.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { markdownToHtml } from "@docmost/editor-ext";
+import DOMPurify from "dompurify";
+import { useTranslation } from "react-i18next";
+
+interface AiSearchResultProps {
+  result?: IAiSearchResponse;
+  isLoading?: boolean;
+  streamingAnswer?: string;
+  streamingSources?: any[];
+}
+
+export function AiSearchResult({
+  result,
+  isLoading,
+  streamingAnswer = "",
+  streamingSources = [],
+}: AiSearchResultProps) {
+  const { t } = useTranslation();
+
+  // Use streaming data if available, otherwise fall back to result
+  const answer = streamingAnswer || result?.answer || "";
+  const sources =
+    streamingSources.length > 0 ? streamingSources : result?.sources || [];
+
+  // Deduplicate sources by pageId, keeping the one with highest similarity
+  const deduplicatedSources = useMemo(() => {
+    if (!sources || sources.length === 0) return [];
+
+    const pageMap = new Map();
+    sources.forEach((source) => {
+      const existing = pageMap.get(source.pageId);
+      if (!existing || source.similarity > existing.similarity) {
+        pageMap.set(source.pageId, source);
+      }
+    });
+
+    return Array.from(pageMap.values());
+  }, [sources]);
+
+  if (isLoading && !answer) {
+    return (
+      <Paper p="md" radius="md" withBorder>
+        <Group>
+          <Loader size="sm" />
+          <Text size="sm">{t("AI is thinking...")}</Text>
+        </Group>
+      </Paper>
+    );
+  }
+
+  if (!answer && !isLoading) {
+    return null;
+  }
+
+  return (
+    <Stack gap="md" p="md">
+      <Paper p="md" radius="md" withBorder>
+        <Group gap="xs" mb="sm">
+          <IconSparkles size={20} color="var(--mantine-color-blue-6)" />
+          <Text fw={600} size="sm">
+            {t("AI Answer")}
+          </Text>
+          {isLoading && <Loader size="xs" />}
+        </Group>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(markdownToHtml(answer) as string),
+          }}
+        />
+      </Paper>
+
+      {deduplicatedSources.length > 0 && (
+        <Stack gap="xs">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Sources")}
+          </Text>
+          {deduplicatedSources.map((source) => (
+            <Box
+              key={source.pageId}
+              component={Link}
+              to={buildPageUrl(source.spaceSlug, source.slugId, source.title)}
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+              }}
+            >
+              <Paper
+                p="xs"
+                radius="sm"
+                withBorder
+                style={{ cursor: "pointer" }}
+              >
+                <Group gap="xs">
+                  <IconFileText size={16} />
+                  <Text size="sm" truncate>
+                    {source.title}
+                  </Text>
+                </Group>
+              </Paper>
+            </Box>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+}

apps/client/src/ee/ai/components/enable-ai-search.tsx

@@ -0,0 +1,69 @@
+import { Group, Text, Switch, MantineSize, Title } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { isCloud } from "@/lib/config.ts";
+import useLicense from "@/ee/hooks/use-license.tsx";
+
+export default function EnableAiSearch() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="md">{t("AI-powered search (Ask AI)")}</Text>
+          <Text size="sm" c="dimmed">
+            {t(
+              "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
+            )}
+          </Text>
+        </div>
+
+        <AiSearchToggle />
+      </Group>
+    </>
+  );
+}
+
+interface AiSearchToggleProps {
+  size?: MantineSize;
+  label?: string;
+}
+export function AiSearchToggle({ size, label }: AiSearchToggleProps) {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.search);
+  const { hasLicenseKey } = useLicense();
+
+  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ aiSearch: value });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Switch
+      size={size}
+      label={label}
+      labelPosition="left"
+      defaultChecked={checked}
+      onChange={handleChange}
+      disabled={!hasAccess}
+      aria-label={t("Toggle AI search")}
+    />
+  );
+}

apps/client/src/ee/ai/hooks/use-ai-search.ts

@@ -0,0 +1,46 @@
+import { useMutation, UseMutationResult } from "@tanstack/react-query";
+import { useState, useCallback } from "react";
+import { askAi, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
+import { IPageSearchParams } from "@/features/search/types/search.types.ts";
+
+// @ts-ignore
+interface UseAiSearchResult extends UseMutationResult<IAiSearchResponse, Error, IPageSearchParams> {
+  streamingAnswer: string;
+  streamingSources: any[];
+  clearStreaming: () => void;
+}
+
+export function useAiSearch(): UseAiSearchResult {
+  const [streamingAnswer, setStreamingAnswer] = useState("");
+  const [streamingSources, setStreamingSources] = useState<any[]>([]);
+
+  const clearStreaming = useCallback(() => {
+    setStreamingAnswer("");
+    setStreamingSources([]);
+  }, []);
+
+  const mutation = useMutation({
+    mutationFn: async (params: IPageSearchParams & { contentType?: string }) => {
+      setStreamingAnswer("");
+      setStreamingSources([]);
+
+      const { contentType, ...apiParams } = params;
+
+      return await askAi(apiParams, (chunk) => {
+        if (chunk.content) {
+          setStreamingAnswer((prev) => prev + chunk.content);
+        }
+        if (chunk.sources) {
+          setStreamingSources(chunk.sources);
+        }
+      });
+    },
+  });
+
+  return {
+    ...mutation,
+    streamingAnswer,
+    streamingSources,
+    clearStreaming,
+  };
+}

apps/client/src/ee/ai/hooks/use-ai.ts

@@ -0,0 +1,61 @@
+import { useState, useCallback, useRef } from "react";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
+import { AiGenerateDto } from "@/ee/ai/types/ai.types.ts";
+
+export function useAiStream() {
+  const [content, setContent] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const mutation = useAiGenerateStreamMutation();
+
+  const startStream = useCallback(
+    async (data: AiGenerateDto) => {
+      setContent("");
+      setIsStreaming(true);
+
+      try {
+        const controller = await mutation.mutateAsync({
+          ...data,
+          onChunk: (chunk) => {
+            setContent((prev) => prev + chunk.content);
+          },
+          onError: (error) => {
+            console.error("AI stream error:", error);
+            setIsStreaming(false);
+          },
+          onComplete: () => {
+            setIsStreaming(false);
+          },
+        });
+
+        abortControllerRef.current = controller;
+      } catch (error) {
+        console.error("Failed to start stream:", error);
+        setIsStreaming(false);
+      }
+    },
+    [mutation]
+  );
+
+  const stopStream = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+    }
+  }, []);
+
+  const resetContent = useCallback(() => {
+    setContent("");
+  }, []);
+
+  return {
+    content,
+    isStreaming,
+    startStream,
+    stopStream,
+    resetContent,
+    isLoading: mutation.isPending,
+    error: mutation.error,
+  };
+}

apps/client/src/ee/ai/pages/ai-settings.tsx

@@ -0,0 +1,46 @@
+import { Helmet } from "react-helmet-async";
+import { getAppName, isCloud } from "@/lib/config.ts";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
+import React from "react";
+import useUserRole from "@/hooks/use-user-role.tsx";
+import { useTranslation } from "react-i18next";
+import useLicense from "@/ee/hooks/use-license.tsx";
+import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
+import { Alert } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+export default function AiSettings() {
+  const { t } = useTranslation();
+  const { isAdmin } = useUserRole();
+  const { hasLicenseKey } = useLicense();
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
+
+  return (
+    <>
+      <Helmet>
+        <title>AI - {getAppName()}</title>
+      </Helmet>
+      <SettingsTitle title={t("AI settings")} />
+
+      {!hasAccess && (
+        <Alert
+          icon={<IconInfoCircle />}
+          title={t("Enterprise feature")}
+          color="blue"
+          mb="lg"
+        >
+          {t(
+            "AI is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
+          )}
+        </Alert>
+      )}
+
+      <EnableAiSearch />
+    </>
+  );
+}

apps/client/src/ee/ai/queries/ai-query.ts

@@ -0,0 +1,44 @@
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  generateAiContent,
+  generateAiContentStream,
+} from "@/ee/ai/services/ai-service.ts";
+import {
+  AiConfigResponse,
+  AiContentResponse,
+  AiGenerateDto,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export function useAiGenerateMutation(): UseMutationResult<
+  AiContentResponse,
+  Error,
+  AiGenerateDto
+> {
+  return useMutation({
+    mutationFn: (data: AiGenerateDto) => generateAiContent(data),
+  });
+}
+
+interface StreamCallbacks {
+  onChunk: (chunk: AiStreamChunk) => void;
+  onError?: (error: AiStreamError) => void;
+  onComplete?: () => void;
+}
+
+export function useAiGenerateStreamMutation(): UseMutationResult<
+  AbortController,
+  Error,
+  AiGenerateDto & StreamCallbacks
+> {
+  return useMutation({
+    mutationFn: ({ onChunk, onError, onComplete, ...data }) =>
+      generateAiContentStream(data, onChunk, onError, onComplete),
+  });
+}

apps/client/src/ee/ai/services/ai-search-service.ts

@@ -0,0 +1,79 @@
+import api from "@/lib/api-client.ts";
+import { IPageSearchParams } from "@/features/search/types/search.types.ts";
+
+export interface IAiSearchResponse {
+  answer: string;
+  sources?: Array<{
+    pageId: string;
+    title: string;
+    slugId: string;
+    spaceSlug: string;
+    similarity: number;
+    distance: number;
+    chunkIndex: number;
+    excerpt: string;
+  }>;
+}
+
+export async function askAi(
+  params: IPageSearchParams,
+  onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
+): Promise<IAiSearchResponse> {
+  const response = await fetch("/api/ai/ask", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const reader = response.body?.getReader();
+  const decoder = new TextDecoder();
+
+  let answer = "";
+  let sources: any[] = [];
+
+  if (reader) {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const chunk = decoder.decode(value);
+      const lines = chunk.split("\n");
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          const data = line.slice(6);
+          if (data === "[DONE]") break;
+
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.error) {
+              throw new Error(parsed.error);
+            }
+            if (parsed.content) {
+              answer += parsed.content;
+              onChunk?.({ content: parsed.content });
+            }
+            if (parsed.sources) {
+              sources = parsed.sources;
+              onChunk?.({ sources: parsed.sources });
+            }
+          } catch (e) {
+            if (e instanceof Error) {
+              throw e;
+            }
+            // Skip invalid JSON
+          }
+        }
+      }
+    }
+  }
+
+  return { answer, sources };
+}

apps/client/src/ee/ai/services/ai-service.ts

@@ -0,0 +1,89 @@
+import api from "@/lib/api-client.ts";
+import {
+  AiGenerateDto,
+  AiContentResponse,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export async function generateAiContent(
+  data: AiGenerateDto,
+): Promise<AiContentResponse> {
+  const req = await api.post<AiContentResponse>("/ai/generate", data);
+  return req.data;
+}
+
+export async function generateAiContentStream(
+  data: AiGenerateDto,
+  onChunk: (chunk: AiStreamChunk) => void,
+  onError?: (error: AiStreamError) => void,
+  onComplete?: () => void,
+): Promise<AbortController> {
+  const abortController = new AbortController();
+  try {
+    const response = await fetch("/api/ai/generate/stream", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      signal: abortController.signal,
+      credentials: "include", // This ensures cookies are sent, matching axios withCredentials
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+
+    if (!reader) {
+      throw new Error("Response body is not readable");
+    }
+
+    const processStream = async () => {
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          const lines = chunk.split("\n");
+
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6);
+              if (data === "[DONE]") {
+                onComplete?.();
+                return;
+              }
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.error) {
+                  onError?.(parsed);
+                } else {
+                  onChunk(parsed);
+                }
+              } catch (e) {
+                // Ignore parse errors for incomplete chunks
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          onError?.({ error: error.message });
+        }
+      } finally {
+        reader.releaseLock();
+      }
+    };
+
+    processStream();
+  } catch (error) {
+    onError?.({ error: error.message });
+  }
+
+  return abortController;
+}

apps/client/src/ee/ai/types/ai.types.ts

@@ -0,0 +1,40 @@
+export enum AiAction {
+  IMPROVE_WRITING = "improve_writing",
+  FIX_SPELLING_GRAMMAR = "fix_spelling_grammar",
+  MAKE_SHORTER = "make_shorter",
+  MAKE_LONGER = "make_longer",
+  SIMPLIFY = "simplify",
+  CHANGE_TONE = "change_tone",
+  SUMMARIZE = "summarize",
+  CONTINUE_WRITING = "continue_writing",
+  TRANSLATE = "translate",
+  CUSTOM = "custom",
+}
+
+export interface AiGenerateDto {
+  action?: AiAction;
+  content: string;
+  prompt?: string;
+}
+
+export interface AiContentResponse {
+  content: string;
+  usage?: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+}
+
+export interface AiConfigResponse {
+  configured: boolean;
+  availableActions: AiAction[];
+}
+
+export interface AiStreamChunk {
+  content: string;
+}
+
+export interface AiStreamError {
+  error: string;
+}

apps/client/src/ee/licence/components/oss-details.tsx

@@ -11,7 +11,7 @@ export default function OssDetails() {
         withTableBorder
       >
         <Table.Caption>
-          To unlock enterprise features like SSO, MFA, Resolve comments, contact sales@docmost.com.
+          To unlock enterprise features like AI, SSO, MFA, Resolve comments, contact sales@docmost.com.
         </Table.Caption>
         <Table.Tbody>
           <Table.Tr>

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

@@ -144,16 +144,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       onHide: () => {
         setIsNodeSelectorOpen(false);
         setIsTextAlignmentOpen(false);
-        setIsColorSelectorOpen(false);
         setIsLinkSelectorOpen(false);
+        setIsColorSelectorOpen(false);
       },
     },
   };
 
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
-  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
 
   return (
     <BubbleMenu {...bubbleMenuProps}>
@@ -164,8 +164,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsOpen={() => {
             setIsNodeSelectorOpen(!isNodeSelectorOpen);
             setIsTextAlignmentOpen(false);
-            setIsColorSelectorOpen(false);
             setIsLinkSelectorOpen(false);
+            setIsColorSelectorOpen(false);
           }}
         />
 
@@ -175,8 +175,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsOpen={() => {
             setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
             setIsNodeSelectorOpen(false);
-            setIsColorSelectorOpen(false);
             setIsLinkSelectorOpen(false);
+            setIsColorSelectorOpen(false);
           }}
         />
 

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

@@ -1,5 +1,5 @@
-import { Dispatch, FC, SetStateAction } from "react";
+import React, { Dispatch, FC, SetStateAction } from "react";
-import { IconCheck, IconPalette } from "@tabler/icons-react";
+import { IconCheck, IconChevronDown, IconPalette } from "@tabler/icons-react";
 import {
   ActionIcon,
   Button,
@@ -8,6 +8,9 @@ import {
   ScrollArea,
   Text,
   Tooltip,
+  SimpleGrid,
+  Box,
+  Stack,
 } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
@@ -61,9 +64,12 @@ const TEXT_COLORS: BubbleColorMenuItem[] = [
     name: "Gray",
     color: "#A8A29E",
   },
+  {
+    name: "Brown",
+    color: "#92400E",
+  },
 ];
 
-// TODO: handle dark mode
 const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   {
     name: "Default",
@@ -71,35 +77,39 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   },
   {
     name: "Blue",
-    color: "#c1ecf9",
+    color: "#98d8f2",
   },
   {
     name: "Green",
-    color: "#acf79f",
+    color: "#7edb6c",
   },
   {
     name: "Purple",
-    color: "#f6f3f8",
+    color: "#e0d6ed",
   },
   {
     name: "Red",
-    color: "#fdebeb",
+    color: "#ffc6c2",
   },
   {
     name: "Yellow",
-    color: "#fbf4a2",
+    color: "#faf594",
   },
   {
     name: "Orange",
-    color: "#faebdd",
+    color: "#f5c8a9",
   },
   {
     name: "Pink",
-    color: "#faf1f5",
+    color: "#f5cfe0",
   },
   {
     name: "Gray",
-    color: "#f1f1ef",
+    color: "#dfdfd7",
+  },
+  {
+    name: "Brown",
+    color: "#d7c4b7",
   },
 ];
 
@@ -112,17 +122,21 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
 
   const editorState = useEditorState({
     editor,
-    selector: ctx => {
+    selector: (ctx) => {
       if (!ctx.editor) {
         return null;
       }
 
       const activeColors: Record<string, boolean> = {};
       TEXT_COLORS.forEach(({ color }) => {
-        activeColors[`text_${color}`] = ctx.editor.isActive("textStyle", { color });
+        activeColors[`text_${color}`] = ctx.editor.isActive("textStyle", {
+          color,
+        });
       });
       HIGHLIGHT_COLORS.forEach(({ color }) => {
-        activeColors[`highlight_${color}`] = ctx.editor.isActive("highlight", { color });
+        activeColors[`highlight_${color}`] = ctx.editor.isActive("highlight", {
+          color,
+        });
       });
 
       return activeColors;
@@ -133,67 +147,152 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
     return null;
   }
 
-  const activeColorItem = TEXT_COLORS.find(({ color }) =>
+  const activeColorItem = TEXT_COLORS.find(
-    editorState[`text_${color}`]
+    ({ color }) => editorState[`text_${color}`],
   );
 
-  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
+  const activeHighlightItem = HIGHLIGHT_COLORS.find(
-    editorState[`highlight_${color}`]
+    ({ color }) => editorState[`highlight_${color}`],
   );
 
   return (
-    <Popover width={200} opened={isOpen} withArrow>
+    <Popover width={220} opened={isOpen} withArrow>
       <Popover.Target>
         <Tooltip label={t("Text color")} withArrow>
-          <ActionIcon
+          <Button
             variant="default"
-            size="lg"
             radius="0"
-            style={{
+            rightSection={<IconChevronDown size={16} />}
-              border: "none",
-              color: activeColorItem?.color,
-            }}
             onClick={() => setIsOpen(!isOpen)}
+            data-text-color={activeColorItem?.color || ""}
+            data-highlight-color={activeHighlightItem?.color || ""}
+            className="color-selector-trigger"
+            style={{
+              height: "34px",
+              border: "none",
+              fontWeight: 500,
+              fontSize: rem(16),
+              paddingLeft: rem(8),
+              paddingRight: rem(4),
+            }}
           >
-            <IconPalette size={16} stroke={2} />
+            A
-          </ActionIcon>
+          </Button>
         </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>
-        {/* make mah responsive */}
         <ScrollArea.Autosize type="scroll" mah="400">
-          <Text span c="dimmed" tt="uppercase" inherit>
+          <Stack gap="md">
-            {t("Color")}
+            <Box>
-          </Text>
+              <Text size="sm" fw={600} mb="xs">
+                {t("Text color")}
+              </Text>
+              <SimpleGrid cols={5} spacing="xs">
+                {TEXT_COLORS.map(({ name, color }, index) => (
+                  <Tooltip key={index} label={t(name)} withArrow>
+                    <Box
+                      onClick={() => {
+                        if (name === "Default") {
+                          editor.commands.unsetColor();
+                        } else {
+                          editor
+                            .chain()
+                            .focus()
+                            .setColor(color || "")
+                            .run();
+                        }
+                        setIsOpen(false);
+                      }}
+                      style={{
+                        width: rem(28),
+                        height: rem(28),
+                        borderRadius: rem(6),
+                        border: editorState[`text_${color}`]
+                          ? "2px solid var(--mantine-color-gray-8)"
+                          : "1px solid var(--mantine-color-gray-4)",
+                        cursor: "pointer",
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: rem(16),
+                        fontWeight: 600,
+                        color: color || "var(--mantine-color-gray-8)",
+                      }}
+                    >
+                      A
+                    </Box>
+                  </Tooltip>
+                ))}
+              </SimpleGrid>
+            </Box>
 
-          <Button.Group orientation="vertical">
+            <Box>
-            {TEXT_COLORS.map(({ name, color }, index) => (
+              <Text size="sm" fw={600} mb="xs">
-              <Button
+                {t("Highlight color")}
-                key={index}
+              </Text>
-                variant="default"
+              <SimpleGrid cols={5} spacing="xs">
-                leftSection={<span style={{ color }}>A</span>}
+                {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
-                justify="left"
+                  <Tooltip key={index} label={t(name)} withArrow>
-                fullWidth
+                    <Box
-                rightSection={
+                      onClick={() => {
-                  editorState[`text_${color}`] && (
+                        if (name === "Default") {
-                    <IconCheck style={{ width: rem(16) }} />
+                          editor.commands.unsetHighlight();
-                  )
+                        } else {
-                }
+                          editor
-                onClick={() => {
+                            .chain()
-                  if (name === "Default") {
+                            .focus()
-                    editor.commands.unsetColor();
+                            .toggleMark("highlight", {
-                  } else {
+                              color: color || "",
-                    editor.chain().focus().setColor(color || "").run();
+                              colorName: name.toLowerCase() || "",
-                  }
+                            })
-                  setIsOpen(false);
+                            .run();
-                }}
+                        }
-                style={{ border: "none" }}
+                        setIsOpen(false);
-              >
+                      }}
-                {t(name)}
+                      style={{
-              </Button>
+                        width: rem(28),
-            ))}
+                        height: rem(28),
-          </Button.Group>
+                        borderRadius: rem(4),
+                        backgroundColor: color || "var(--mantine-color-gray-2)",
+                        border: "1px solid var(--mantine-color-gray-4)",
+                        cursor: "pointer",
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: rem(16),
+                        fontWeight: 600,
+                        color: "var(--mantine-color-gray-8)",
+                      }}
+                    >
+                      {editorState[`highlight_${color}`] ? (
+                        <IconCheck
+                          size={16}
+                          color="var(--mantine-color-green-7)"
+                        />
+                      ) : (
+                        "A"
+                      )}
+                    </Box>
+                  </Tooltip>
+                ))}
+              </SimpleGrid>
+            </Box>
+
+            <Button
+              variant="default"
+              fullWidth
+              onClick={() => {
+                editor.commands.unsetColor();
+                editor.commands.unsetHighlight();
+                setIsOpen(false);
+              }}
+            >
+              {t("Remove color")}
+            </Button>
+          </Stack>
         </ScrollArea.Autosize>
       </Popover.Dropdown>
     </Popover>

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

@@ -34,7 +34,9 @@ export const handlePaste = (
       return false;
     }
 
-    createMentionAction(url, view, pos, creatorId);
+    const anchorId = match[6] ? match[6].split('#')[0] : undefined;
+    const urlWithoutAnchor = anchorId ? url.substring(0, url.indexOf("#")) : url;
+    createMentionAction(urlWithoutAnchor, view, pos, creatorId, anchorId);
     return true;
   }
 

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

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

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

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

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

@@ -20,6 +20,7 @@ import {
   IconCalendar,
   IconAppWindow,
   IconSitemap,
+  IconPageBreak,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -153,6 +154,19 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
     },
+    {
+      title: "Page break",
+      description: "Insert page break",
+      searchTerms: ["page break", "hr"],
+      icon: IconPageBreak,
+      command: ({ editor, range }: CommandProps) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent('<hr data-type="pagebreak" /><p></p>')
+          .run(),
+    },
     {
       title: "Image",
       description: "Upload any image from your device.",

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

@@ -1,17 +1,20 @@
 import { StarterKit } from "@tiptap/starter-kit";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { TextAlign } from "@tiptap/extension-text-align";
+import { CharacterCount } from "@tiptap/extension-character-count";
 import { TaskList } from "@tiptap/extension-task-list";
+import { ListKeymap } from "@tiptap/extension-list-keymap";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { Underline } from "@tiptap/extension-underline";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
-import { Highlight } from "@tiptap/extension-highlight";
 import { Typography } from "@tiptap/extension-typography";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
+import GlobalDragHandle from "tiptap-extension-global-drag-handle";
+import { Youtube } from "@tiptap/extension-youtube";
 import SlashCommand from "@/features/editor/extensions/slash-command";
-import { Collaboration } from "@tiptap/extension-collaboration";
+import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
 import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import {
@@ -40,6 +43,10 @@ import {
   Mention,
   Subpages,
   TableDndExtension,
+  Heading,
+  Highlight,
+  UniqueID,
+  HorizontalRule,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -48,11 +55,8 @@ import {
 import { IUser } from "@/features/user/types/user.types.ts";
 import MathInlineView from "@/features/editor/components/math/math-inline.tsx";
 import MathBlockView from "@/features/editor/components/math/math-block.tsx";
-import GlobalDragHandle from "tiptap-extension-global-drag-handle";
-import { Youtube } from "@tiptap/extension-youtube";
 import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
-import { common, createLowlight } from "lowlight";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
@@ -60,6 +64,7 @@ import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
+import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
 import powershell from "highlight.js/lib/languages/powershell";
 import abap from "highlightjs-sap-abap";
@@ -76,7 +81,6 @@ import MentionView from "@/features/editor/components/mention/mention-view.tsx";
 import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
 import EmojiCommand from "./emoji-command";
-import { CharacterCount } from "@tiptap/extension-character-count";
 import { countWords } from "alfaaz";
 
 const lowlight = createLowlight(common);
@@ -93,6 +97,7 @@ lowlight.register("scala", scala);
 
 export const mainExtensions = [
   StarterKit.configure({
+    heading: false,
     history: false,
     dropcursor: {
       width: 3,
@@ -104,6 +109,13 @@ export const mainExtensions = [
         spellcheck: false,
       },
     },
+    horizontalRule: false,
+  }),
+  HorizontalRule,
+  Heading,
+  UniqueID.configure({
+    types: ["heading", "paragraph"],
+    filterTransaction: (transaction) => !isChangeOrigin(transaction),
   }),
   Placeholder.configure({
     placeholder: ({ node }) => {
@@ -125,6 +137,7 @@ export const mainExtensions = [
   TaskItem.configure({
     nested: true,
   }),
+  ListKeymap,
   Underline,
   LinkExtension.configure({
     openOnClick: false,
@@ -228,17 +241,17 @@ export const mainExtensions = [
   SearchAndReplace.extend({
     addKeyboardShortcuts() {
       return {
-        'Mod-f': () => {
+        "Mod-f": () => {
           const event = new CustomEvent("openFindDialogFromEditor", {});
           document.dispatchEvent(event);
           return true;
         },
-        'Escape': () => {
+        Escape: () => {
           const event = new CustomEvent("closeFindDialogFromEditor", {});
           document.dispatchEvent(event);
           return true;
         },
-      }
+      };
     },
   }).configure(),
 ] as any;

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

@@ -0,0 +1,58 @@
+import { Editor } from "@tiptap/react";
+import { useCallback, useEffect, useState } from "react";
+
+function waitForState(checkFn: () => boolean): Promise<void> {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (checkFn()) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 800);
+  });
+}
+
+export const useEditorScroll = ({
+  canScroll,
+  initialScrollTo,
+}: {
+  canScroll: () => boolean;
+  initialScrollTo?: string;
+}) => {
+  const [scrollTo, setScrollTo] = useState<string>(initialScrollTo || "");
+
+  useEffect(() => {
+    if (!initialScrollTo) {
+      setScrollTo(window.location.hash ? window.location.hash.slice(1) : "");
+    }
+  }, [initialScrollTo]);
+
+  const handleScrollTo = useCallback(async (editor: Editor, _scrollTo: string | null = null, tryCount: number = 0) => {
+    await waitForState(() => canScroll());
+    return new Promise((resolve) => {
+      const MAX_TRY_COUNT = 10;
+      if (tryCount >= MAX_TRY_COUNT) {
+        resolve(false);
+        return;
+      }
+
+      const targetId = _scrollTo || scrollTo;
+      if (!targetId) {
+        resolve(false);
+        return;
+      }
+
+      const dom = editor.view.dom.querySelector(`[id="${targetId}"]`);
+      if (dom) {
+        dom.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        resolve(true);
+      } else {
+        setTimeout(async () => {
+          resolve(await handleScrollTo(editor, targetId, tryCount + 1));
+        }, 200);
+      }
+    });
+  }, [scrollTo, canScroll]);
+
+  return { scrollTo, handleScrollTo };
+};

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

@@ -1,5 +1,5 @@
 import "@/features/editor/styles/index.css";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
 import {
@@ -56,6 +56,7 @@ import { FIVE_MINUTES } from "@/lib/constants.ts";
 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";
 
 interface PageEditorProps {
   pageId: string;
@@ -68,7 +69,16 @@ export default function PageEditor({
   editable,
   content,
 }: PageEditorProps) {
+
+  
   const collaborationURL = useCollaborationUrl();
+  const isComponentMounted = useRef(false);
+  const editorCreated = useRef(false);
+
+  useEffect(() => {
+    isComponentMounted.current = true;
+  }, []);
+  
   const [currentUser] = useAtom(currentUserAtom);
   const [, setEditor] = useAtom(pageEditorAtom);
   const [, setAsideState] = useAtom(asideStateAtom);
@@ -94,7 +104,9 @@ export default function PageEditor({
   const slugId = extractPageSlugId(pageSlug);
   const userPageEditMode =
     currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-
+  
+    const canScroll = useCallback(() => isComponentMounted.current && editorCreated.current, [isComponentMounted, editorCreated]);
+  const { handleScrollTo } = useEditorScroll({ canScroll });
   // Providers only created once per pageId
   const providersRef = useRef<{
     local: IndexeddbPersistence;
@@ -264,6 +276,8 @@ export default function PageEditor({
           // @ts-ignore
           setEditor(editor);
           editor.storage.pageId = pageId;
+          handleScrollTo(editor);
+          editorCreated.current = true;
         }
       },
       onUpdate({ editor }) {

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

@@ -1,13 +1,14 @@
 import "@/features/editor/styles/index.css";
-import React, { useMemo } from "react";
+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 } from "@tiptap/extension-heading";
+import { Heading, generateNodeId, UniqueID } from "@docmost/editor-ext";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai";
 import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { useEditorScroll } from "./hooks/use-editor-scroll";
 
 interface PageEditorProps {
   title: string;
@@ -21,9 +22,34 @@ export default function ReadonlyPageEditor({
   pageId,
 }: PageEditorProps) {
   const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
+  const isComponentMounted = useRef(false);
+  const editorCreated = useRef(false);
+
+  const canScroll = useCallback(
+    () => isComponentMounted.current && editorCreated.current,
+    [isComponentMounted, editorCreated],
+  );
+  const initialScrollTo = window.location.hash
+    ? window.location.hash.slice(1)
+    : "";
+  const { handleScrollTo } = useEditorScroll({ canScroll, initialScrollTo });
+
+  useEffect(() => {
+    isComponentMounted.current = true;
+  }, []);
 
   const extensions = useMemo(() => {
-    return [...mainExtensions];
+    const filteredExtensions = mainExtensions.filter(
+      (ext) => ext.name !== "uniqueID",
+    );
+
+    return [
+      ...filteredExtensions,
+      UniqueID.configure({
+        types: ["heading", "paragraph"],
+        updateDocument: false,
+      }),
+    ];
   }, []);
 
   const titleExtensions = [
@@ -59,6 +85,9 @@ export default function ReadonlyPageEditor({
             }
             // @ts-ignore
             setReadOnlyEditor(editor);
+
+            handleScrollTo(editor);
+            editorCreated.current = true;
           }
         }}
       ></EditorProvider>

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

@@ -5,7 +5,7 @@
   );
   color: light-dark(
     var(--mantine-color-default-color),
-    var(--mantine-color-dark-0)
+    var(--mantine-color-white)
   );
   font-size: var(--mantine-font-size-md);
   line-height: var(--mantine-line-height-xl);
@@ -110,12 +110,20 @@
     border-top: 1px solid #68cef8;
   }
 
+  hr[data-type="pagebreak"] {
+    border-top: 1px dashed var(--mantine-color-dark-2) !important;
+  }
+
+  .ProseMirror[contenteditable="false"] hr[data-type="pagebreak"] {
+    display: none !important;
+  }
+
   .ProseMirror-selectednode {
     outline: 2px solid #70cff8;
   }
 
   & > .react-renderer {
-    margin-top:  var(--mantine-spacing-sm);
+    margin-top: var(--mantine-spacing-sm);
     margin-bottom: var(--mantine-spacing-sm);
 
     &:first-child {
@@ -141,7 +149,7 @@
 
   .selection,
   *::selection {
-    background-color: Highlight;
+    background-color: light-dark(Highlight, var(--mantine-color-gray-7));
   }
 
   .comment-mark {
@@ -188,6 +196,36 @@
   }
 }
 
+.ProseMirror > h1,
+.ProseMirror > h2,
+.ProseMirror > h3,
+.ProseMirror > h4,
+.ProseMirror > h5,
+.ProseMirror > h6 {
+  > .link-btn {
+    cursor: pointer;
+    position: relative;
+  }
+
+  > .link-btn > .link-btn-content {
+    opacity: 0;
+    position: absolute;
+    left: 5px;
+    top: 0;
+    height: 100%;
+    transition: opacity 0.15s ease;
+    display: inline-flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &:hover > .link-btn > .link-btn-content {
+    opacity: 1;
+  }
+
+  scroll-margin-top: 80px; /* match your header height */
+}
+
 .ProseMirror-icon {
   display: inline-block;
   width: 1em;
@@ -209,4 +247,3 @@
 .actionIconGroup {
   background: var(--mantine-color-body);
 }
-

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

@@ -0,0 +1,177 @@
+/* Highlight colors with dark mode support */
+
+.ProseMirror {
+  /* Blue */
+  mark[data-color="#98d8f2"] {
+    background-color: light-dark(
+      rgb(224 242 254),
+      rgba(37, 99, 235, 0.35)
+    ) !important;
+  }
+
+  /* Green */
+  mark[data-color="#7edb6c"] {
+    background-color: light-dark(
+      rgb(220 252 231),
+      rgba(0, 138, 0, 0.35)
+    ) !important;
+  }
+
+  /* Purple */
+  mark[data-color="#e0d6ed"] {
+    background-color: light-dark(
+      rgb(243 232 255),
+      rgba(147, 51, 234, 0.35)
+    ) !important;
+  }
+
+  /* Red */
+  mark[data-color="#ffc6c2"] {
+    background-color: light-dark(
+      rgb(255 228 230),
+      rgba(224, 0, 0, 0.35)
+    ) !important;
+  }
+
+  /* Yellow */
+  mark[data-color="#faf594"] {
+    background-color: light-dark(
+      rgb(254 249 195),
+      rgba(234, 179, 8, 0.35)
+    ) !important;
+  }
+
+  /* Orange */
+  mark[data-color="#f5c8a9"] {
+    background-color: light-dark(
+      rgb(251, 236, 221),
+      rgba(255, 165, 0, 0.45)
+    ) !important;
+  }
+
+  /* Pink */
+  mark[data-color="#f5cfe0"] {
+    background-color: light-dark(
+      rgb(252, 241, 246),
+      rgba(186, 64, 129, 0.35)
+    ) !important;
+  }
+
+  /* Gray */
+  mark[data-color="#dfdfd7"] {
+    background-color: light-dark(
+      rgb(238 238 235),
+      rgba(168, 162, 158, 0.35)
+    ) !important;
+  }
+
+  /* Brown */
+  mark[data-color="#d7c4b7"] {
+    background-color: light-dark(
+      rgb(215 196 183),
+      rgba(146, 64, 14, 0.35)
+    ) !important;
+  }
+}
+
+
+/* Color selector trigger button styles */
+.color-selector-trigger[data-text-color="#2563EB"] {
+    color: #2563EB !important;
+}
+
+.color-selector-trigger[data-text-color="#008A00"] {
+    color: #008A00 !important;
+}
+
+.color-selector-trigger[data-text-color="#9333EA"] {
+    color: #9333EA !important;
+}
+
+.color-selector-trigger[data-text-color="#E00000"] {
+    color: #E00000 !important;
+}
+
+.color-selector-trigger[data-text-color="#EAB308"] {
+    color: #EAB308 !important;
+}
+
+.color-selector-trigger[data-text-color="#FFA500"] {
+    color: #FFA500 !important;
+}
+
+.color-selector-trigger[data-text-color="#BA4081"] {
+    color: #BA4081 !important;
+}
+
+.color-selector-trigger[data-text-color="#A8A29E"] {
+    color: #A8A29E !important;
+}
+
+.color-selector-trigger[data-text-color="#92400E"] {
+    color: #92400E !important;
+}
+
+/* Highlight background colors with light-dark support - solid colors for trigger button */
+.color-selector-trigger[data-highlight-color="#98d8f2"] {
+    background-color: light-dark(
+            rgb(224 242 254),
+            rgb(30 64 175)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#7edb6c"] {
+    background-color: light-dark(
+            rgb(220 252 231),
+            rgb(21 128 61)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#e0d6ed"] {
+    background-color: light-dark(
+            rgb(243 232 255),
+            rgb(107 33 168)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#ffc6c2"] {
+    background-color: light-dark(
+            rgb(255 228 230),
+            rgb(185 28 28)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#faf594"] {
+    background-color: light-dark(
+            rgb(254 249 195),
+            rgb(161 98 7)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#f5c8a9"] {
+    background-color: light-dark(
+            rgb(251 236 221),
+            rgb(194 65 12)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#f5cfe0"] {
+    background-color: light-dark(
+            rgb(252 241 246),
+            rgb(157 23 77)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#dfdfd7"] {
+    background-color: light-dark(
+            rgb(238 238 235),
+            rgb(115 115 115)
+    ) !important;
+}
+
+.color-selector-trigger[data-highlight-color="#d7c4b7"] {
+    background-color: light-dark(
+            rgb(215 196 183),
+            rgb(120 53 15)
+    ) !important;
+}

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

@@ -12,3 +12,4 @@
 @import "./find.css";
 @import "./mention.css";
 @import "./ordered-list.css";
+@import "./highlight.css";

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

@@ -20,4 +20,10 @@
   .tableWrapper {
     overflow: hidden !important;
   }
+
+  hr[data-type="pagebreak"] {
+    break-before: always;
+    page-break-before: always;
+    visibility: hidden;
+  }
 }

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

@@ -104,7 +104,10 @@ export function TitleEditor({
   });
 
   useEffect(() => {
-    const pageSlug = buildPageUrl(spaceSlug, slugId, title);
+    const anchorId = window.location.hash
+      ? window.location.hash.substring(1)
+      : undefined;
+    const pageSlug = buildPageUrl(spaceSlug, slugId, title, anchorId);
     navigate(pageSlug, { replace: true });
   }, [title]);
 
@@ -192,10 +195,43 @@ export function TitleEditor({
     const { key } = event;
     const { $head } = titleEditor.state.selection;
 
+    if (key === "Enter") {
+      event.preventDefault();
+
+      const { $from } = titleEditor.state.selection;
+      const titleText = titleEditor.getText();
+
+      // Get the text offset within the heading node (not document position)
+      const textOffset = $from.parentOffset;
+
+      const textAfterCursor = titleText.slice(textOffset);
+
+      // Delete text after cursor from title (this will be in undo history)
+      const endPos = titleEditor.state.doc.content.size;
+      if (textAfterCursor) {
+        titleEditor.commands.deleteRange({ from: $from.pos, to: endPos });
+      }
+
+      // Don't add to history so undo in page editor won't remove this split
+      pageEditor
+        .chain()
+        .command(({ tr }) => {
+          tr.setMeta("addToHistory", false);
+          return true;
+        })
+        .insertContentAt(0, {
+          type: "paragraph",
+          content: textAfterCursor
+            ? [{ type: "text", text: textAfterCursor }]
+            : undefined,
+        })
+        .focus("start")
+        .run();
+      return;
+    }
+
     const shouldFocusEditor =
-      key === "Enter" ||
+      key === "ArrowDown" || (key === "ArrowRight" && !$head.nodeAfter);
-      key === "ArrowDown" ||
-      (key === "ArrowRight" && !$head.nodeAfter);
 
     if (shouldFocusEditor) {
       pageEditor.commands.focus("start");

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

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

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

@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Avatar,
   Group,
+  Switch,
   getDefaultZIndex,
 } from "@mantine/core";
 import {
@@ -17,6 +18,7 @@ import {
   IconFileDescription,
   IconSearch,
   IconCheck,
+  IconSparkles,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useDebouncedValue } from "@mantine/hooks";
@@ -24,15 +26,21 @@ 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 { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
 interface SearchSpotlightFiltersProps {
   onFiltersChange?: (filters: any) => void;
+  onAskClick?: () => void;
   spaceId?: string;
+  isAiMode?: boolean;
 }
 
 export function SearchSpotlightFilters({
   onFiltersChange,
+  onAskClick,
   spaceId,
+  isAiMode = false,
 }: SearchSpotlightFiltersProps) {
   const { t } = useTranslation();
   const { hasLicenseKey } = useLicense();
@@ -42,6 +50,7 @@ export function SearchSpotlightFilters({
   const [spaceSearchQuery, setSpaceSearchQuery] = useState("");
   const [debouncedSpaceQuery] = useDebouncedValue(spaceSearchQuery, 300);
   const [contentType, setContentType] = useState<string | null>("page");
+  const [workspace] = useAtom(workspaceAtom);
 
   const { data: spacesData } = useGetSpacesQuery({
     page: 1,
@@ -120,6 +129,31 @@ export function SearchSpotlightFilters({
 
   return (
     <div className={classes.filtersContainer}>
+      {workspace?.settings?.ai?.search === true && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            height: "32px",
+            paddingLeft: "8px",
+            paddingRight: "8px",
+          }}
+        >
+          <Switch
+            checked={isAiMode}
+            onChange={(event) => onAskClick()}
+            label={t("Ask AI")}
+            size="sm"
+            color="blue"
+            labelPosition="left"
+            styles={{
+              root: { display: "flex", alignItems: "center" },
+              label: { paddingRight: "8px", fontSize: "13px", fontWeight: 500 },
+            }}
+          />
+        </div>
+      )}
+
       <Menu
         shadow="md"
         width={250}
@@ -231,7 +265,7 @@ export function SearchSpotlightFilters({
                 contentType !== option.value &&
                 handleFilterChange("contentType", option.value)
               }
-              disabled={option.disabled}
+              disabled={option.disabled || (isAiMode && option.value === "attachment")}
             >
               <Group flex="1" gap="xs">
                 <div>
@@ -241,6 +275,11 @@ 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>
+                  )}
                 </div>
                 {contentType === option.value && <IconCheck size={20} />}
               </Group>

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

@@ -1,12 +1,16 @@
 import { Spotlight } from "@mantine/spotlight";
-import { IconSearch } from "@tabler/icons-react";
+import { IconSearch, IconSparkles } from "@tabler/icons-react";
-import React, { useState, useMemo } from "react";
+import { Group, Button } from "@mantine/core";
+import React, { useState, useMemo, useEffect } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
 import { searchSpotlightStore } from "../constants.ts";
 import { SearchSpotlightFilters } from "./search-spotlight-filters.tsx";
 import { useUnifiedSearch } from "../hooks/use-unified-search.ts";
+import { useAiSearch } from "../../../ee/ai/hooks/use-ai-search.ts";
 import { SearchResultItem } from "./search-result-item.tsx";
+import { AiSearchResult } from "../../../ee/ai/components/ai-search-result.tsx";
 import { useLicense } from "@/ee/hooks/use-license.tsx";
 import { isCloud } from "@/lib/config.ts";
 
@@ -24,6 +28,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
   }>({
     contentType: "page",
   });
+  const [isAiMode, setIsAiMode] = useState(false);
 
   // Build unified search params
   const searchParams = useMemo(() => {
@@ -40,7 +45,42 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
     return params;
   }, [debouncedSearchQuery, filters]);
 
-  const { data: searchResults, isLoading } = useUnifiedSearch(searchParams);
+  const { data: searchResults, isLoading } = useUnifiedSearch(
+    searchParams,
+    !isAiMode // Disable regular search when in AI mode
+  );
+  const {
+    //@ts-ignore
+    data: aiSearchResult,
+    //@ts-ignore
+    isPending: isAiLoading,
+    //@ts-ignore
+    mutate: triggerAiSearchMutation,
+    //@ts-ignore
+    reset: resetAiMutation,
+    //@ts-ignore
+    error: aiSearchError,
+    streamingAnswer,
+    streamingSources,
+    clearStreaming,
+  } = useAiSearch();
+
+  // Clear streaming state and mutation data when query changes (user is typing a new query)
+  useEffect(() => {
+    clearStreaming();
+    resetAiMutation();
+  }, [query, clearStreaming, resetAiMutation]);
+
+  // Show error notification when AI search fails
+  useEffect(() => {
+    if (aiSearchError) {
+      notifications.show({
+        message: aiSearchError.message || t("AI search failed. Please try again."),
+        color: "red",
+        position: "top-center"
+      });
+    }
+  }, [aiSearchError, t]);
 
   // Determine result type for rendering
   const isAttachmentSearch =
@@ -59,6 +99,16 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
     setFilters(newFilters);
   };
 
+  const handleAskClick = () => {
+    setIsAiMode(!isAiMode);
+  };
+
+  const handleAiSearchTrigger = () => {
+    if (query.trim() && isAiMode) {
+      triggerAiSearchMutation(searchParams);
+    }
+  };
+
   return (
     <>
       <Spotlight.Root
@@ -72,10 +122,30 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
           backgroundOpacity: 0.55,
         }}
       >
-        <Spotlight.Search
+        <Group gap="xs" px="sm" pt="sm" pb="xs">
-          placeholder={t("Search...")}
+          <Spotlight.Search
-          leftSection={<IconSearch size={20} stroke={1.5} />}
+            placeholder={isAiMode ? t("Ask a question...") : t("Search...")}
-        />
+            leftSection={<IconSearch size={20} stroke={1.5} />}
+            style={{ flex: 1 }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && isAiMode && query.trim() && !isAiLoading) {
+                e.preventDefault();
+                handleAiSearchTrigger();
+              }
+            }}
+          />
+          {isAiMode && hasLicenseKey && (
+            <Button
+              size="xs"
+              leftSection={<IconSparkles size={16} />}
+              onClick={handleAiSearchTrigger}
+              disabled={!query.trim()}
+              loading={isAiLoading}
+            >
+              Ask
+            </Button>
+          )}
+        </Group>
 
         <div
           style={{
@@ -84,20 +154,43 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
         >
           <SearchSpotlightFilters
             onFiltersChange={handleFiltersChange}
+            onAskClick={handleAskClick}
             spaceId={spaceId}
+            isAiMode={isAiMode}
           />
         </div>
 
         <Spotlight.ActionsList>
-          {query.length === 0 && resultItems.length === 0 && (
+          {isAiMode ? (
-            <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
+            <>
-          )}
+              {query.length === 0 && (
+                <Spotlight.Empty>{t("Ask a question...")}</Spotlight.Empty>
+              )}
+              {query.length > 0 && (isAiLoading || aiSearchResult || streamingAnswer) && (
+                <AiSearchResult
+                  result={aiSearchResult}
+                  isLoading={isAiLoading}
+                  streamingAnswer={streamingAnswer}
+                  streamingSources={streamingSources}
+                />
+              )}
+              {query.length > 0 && !isAiLoading && !aiSearchResult && (
+                <Spotlight.Empty>{t("No answer available")}</Spotlight.Empty>
+              )}
+            </>
+          ) : (
+            <>
+              {query.length === 0 && resultItems.length === 0 && (
+                <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
+              )}
 
-          {query.length > 0 && !isLoading && resultItems.length === 0 && (
+              {query.length > 0 && !isLoading && resultItems.length === 0 && (
-            <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
+                <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
-          )}
+              )}
 
-          {resultItems.length > 0 && <>{resultItems}</>}
+              {resultItems.length > 0 && <>{resultItems}</>}
+            </>
+          )}
         </Spotlight.ActionsList>
       </Spotlight.Root>
     </>

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

@@ -19,6 +19,7 @@ export interface UseUnifiedSearchParams extends IPageSearchParams {
 
 export function useUnifiedSearch(
   params: UseUnifiedSearchParams,
+  enabled: boolean = true,
 ): UseQueryResult<UnifiedSearchResult[], Error> {
   const { hasLicenseKey } = useLicense();
 
@@ -38,6 +39,6 @@ export function useUnifiedSearch(
         return await searchPage(backendParams);
       }
     },
-    enabled: !!params.query,
+    enabled: !!params.query && enabled,
   });
 }

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

@@ -42,7 +42,7 @@ export async function deleteWorkspaceMember(data: {
   await api.post("/workspace/members/delete", data);
 }
 
-export async function updateWorkspace(data: Partial<IWorkspace>) {
+export async function updateWorkspace(data: Partial<IWorkspace> & { aiSearch?: boolean }) {
   const req = await api.post<IWorkspace>("/workspace/update", data);
   return req.data;
 }

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

@@ -9,7 +9,7 @@ export interface IWorkspace {
   defaultSpaceId: string;
   customDomain: string;
   enableInvite: boolean;
-  settings: any;
+  settings: IWorkspaceSettings;
   status: string;
   enforceSso: boolean;
   stripeCustomerId: string;
@@ -24,6 +24,14 @@ export interface IWorkspace {
   enforceMfa?: boolean;
 }
 
+export interface IWorkspaceSettings {
+  ai?: IWorkspaceAiSettings;
+}
+
+export interface IWorkspaceAiSettings {
+  search?: boolean;
+}
+
 export interface ICreateInvite {
   role: string;
   emails: string[];

apps/client/src/lib/constants.ts

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

apps/client/src/main.tsx

@@ -51,7 +51,7 @@ root.render(
     <MantineProvider theme={theme} cssVariablesResolver={mantineCssResolver}>
       <ModalsProvider>
         <QueryClientProvider client={queryClient}>
-          <Notifications position="bottom-center" limit={3} />
+          <Notifications position="bottom-center" limit={3} zIndex={10000} />
           <HelmetProvider>
             <PostHogProvider client={posthog}>
               <App />

apps/client/src/pages/page/page.tsx

@@ -21,6 +21,7 @@ const MemoizedHistoryModal = React.memo(HistoryModal);
 export default function Page() {
   const { t } = useTranslation();
   const { pageSlug } = useParams();
+
   const {
     data: page,
     isLoading,

apps/server/package.json

@@ -30,6 +30,9 @@
     "test:e2e": "jest --config test/jest-e2e.json"
   },
   "dependencies": {
+    "@ai-sdk/azure": "^2.0.47",
+    "@ai-sdk/google": "^2.0.18",
+    "@ai-sdk/openai": "^2.0.46",
     "@aws-sdk/client-s3": "3.701.0",
     "@aws-sdk/lib-storage": "3.701.0",
     "@aws-sdk/s3-request-presigner": "3.701.0",
@@ -37,51 +40,55 @@
     "@fastify/cookie": "^11.0.2",
     "@fastify/multipart": "^9.0.3",
     "@fastify/static": "^8.2.0",
+    "@langchain/textsplitters": "^0.1.0",
     "@nestjs-labs/nestjs-ioredis": "^11.0.4",
-    "@nestjs/bullmq": "^11.0.2",
+    "@nestjs/bullmq": "^11.0.4",
-    "@nestjs/common": "^11.1.3",
+    "@nestjs/common": "^11.1.9",
     "@nestjs/config": "^4.0.2",
-    "@nestjs/core": "^11.1.3",
+    "@nestjs/core": "^11.1.9",
     "@nestjs/event-emitter": "^3.0.1",
-    "@nestjs/jwt": "^11.0.0",
+    "@nestjs/jwt": "11.0.0",
     "@nestjs/mapped-types": "^2.1.0",
     "@nestjs/passport": "^11.0.5",
-    "@nestjs/platform-fastify": "^11.1.3",
+    "@nestjs/platform-fastify": "^11.1.9",
-    "@nestjs/platform-socket.io": "^11.1.3",
+    "@nestjs/platform-socket.io": "^11.1.9",
-    "@nestjs/schedule": "^6.0.0",
+    "@nestjs/schedule": "^6.0.1",
     "@nestjs/terminus": "^11.0.0",
-    "@nestjs/websockets": "^11.1.3",
+    "@nestjs/websockets": "^11.1.9",
     "@node-saml/passport-saml": "^5.1.0",
     "@react-email/components": "0.0.28",
     "@react-email/render": "1.0.2",
     "@socket.io/redis-adapter": "^8.3.0",
-    "bcrypt": "^5.1.1",
+    "ai": "^5.0.65",
-    "bullmq": "^5.61.0",
+    "ai-sdk-ollama": "^0.12.0",
+    "bcrypt": "^6.0.0",
+    "bullmq": "^5.65.0",
     "cache-manager": "^6.4.3",
     "cheerio": "^1.1.0",
     "class-transformer": "^0.5.1",
-    "class-validator": "^0.14.1",
+    "class-validator": "^0.14.3",
     "cookie": "^1.0.2",
     "fs-extra": "^11.3.0",
-    "happy-dom": "^18.0.1",
+    "happy-dom": "20.0.10",
     "ioredis": "^5.4.1",
     "jsonwebtoken": "^9.0.2",
     "kysely": "^0.28.2",
     "kysely-migration-cli": "^0.4.2",
     "ldapts": "^7.4.0",
-    "mammoth": "^1.10.0",
+    "mammoth": "^1.11.0",
     "mime-types": "^2.1.35",
     "nanoid": "3.3.11",
     "nestjs-kysely": "^1.2.0",
-    "nodemailer": "^7.0.3",
+    "nodemailer": "^7.0.11",
     "openid-client": "^5.7.1",
     "otpauth": "^9.4.0",
     "p-limit": "^6.2.0",
     "passport-google-oauth20": "^2.0.0",
     "passport-jwt": "^4.0.1",
-    "pdfjs-dist": "^5.4.54",
+    "pdfjs-dist": "^5.4.394",
-    "pg": "^8.16.0",
+    "pg": "^8.16.3",
     "pg-tsquery": "^8.4.2",
+    "pgvector": "^0.2.1",
     "postmark": "^4.0.5",
     "react": "^18.3.1",
     "reflect-metadata": "^0.2.2",
@@ -92,7 +99,7 @@
     "stripe": "^17.5.0",
     "tmp-promise": "^3.0.3",
     "typesense": "^2.1.0",
-    "ws": "^8.18.2",
+    "ws": "^8.18.3",
     "yauzl": "^3.2.0"
   },
   "devDependencies": {

apps/server/src/collaboration/collaboration.util.ts

@@ -5,12 +5,12 @@ import { TaskItem } from '@tiptap/extension-task-item';
 import { Underline } from '@tiptap/extension-underline';
 import { Superscript } from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
-import { Highlight } from '@tiptap/extension-highlight';
 import { Typography } from '@tiptap/extension-typography';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Youtube } from '@tiptap/extension-youtube';
 import {
+  Heading,
   Callout,
   Comment,
   CustomCodeBlock,
@@ -33,6 +33,10 @@ import {
   Embed,
   Mention,
   Subpages,
+  Highlight,
+  UniqueID,
+  addUniqueIdsToDoc,
+  HorizontalRule,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
@@ -44,6 +48,13 @@ import { Node } from '@tiptap/pm/model';
 export const tiptapExtensions = [
   StarterKit.configure({
     codeBlock: false,
+    heading: false,
+    horizontalRule: false,
+  }),
+  HorizontalRule,
+  Heading,
+  UniqueID.configure({
+    types: ['heading', 'paragraph'],
   }),
   Comment,
   TextAlign.configure({ types: ['heading', 'paragraph'] }),
@@ -87,7 +98,14 @@ export function jsonToHtml(tiptapJson: any) {
 }
 
 export function htmlToJson(html: string) {
-  return generateJSON(html, tiptapExtensions);
+  const pmJson = generateJSON(html, tiptapExtensions);
+
+  try {
+    return addUniqueIdsToDoc(pmJson, tiptapExtensions);
+  } catch (error) {
+    console.warn('failed to add unique ids to doc', error);
+    return pmJson;
+  }
 }
 
 export function jsonToText(tiptapJson: JSONContent) {

apps/server/src/collaboration/extensions/persistence.extension.ts

@@ -35,6 +35,7 @@ export class PersistenceExtension implements Extension {
     @InjectKysely() private readonly db: KyselyDB,
     private eventEmitter: EventEmitter2,
     @InjectQueue(QueueName.GENERAL_QUEUE) private generalQueue: Queue,
+    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
   ) {}
 
   async onLoadDocument(data: onLoadDocumentPayload) {
@@ -168,6 +169,11 @@ export class PersistenceExtension implements Extension {
         workspaceId: page.workspaceId,
         mentions: pageMentions,
       } as IPageBacklinkJob);
+
+      await this.aiQueue.add(QueueJob.PAGE_CONTENT_UPDATED, {
+        pageIds: [pageId],
+        workspaceId: page.workspaceId,
+      });
     }
   }
 

apps/server/src/common/events/event.contants.ts

@@ -2,7 +2,17 @@ export enum EventName {
   COLLAB_PAGE_UPDATED = 'collab.page.updated',
   PAGE_CREATED = 'page.created',
   PAGE_UPDATED = 'page.updated',
+  PAGE_CONTENT_UPDATED = 'page-content-updated',
+  PAGE_MOVED_TO_SPACE = 'page-moved-to-space',
   PAGE_DELETED = 'page.deleted',
   PAGE_SOFT_DELETED = 'page.soft_deleted',
   PAGE_RESTORED = 'page.restored',
+
+  SPACE_CREATED = 'space.created',
+  SPACE_UPDATED = 'space.updated',
+  SPACE_DELETED = 'space.deleted',
+
+  WORKSPACE_CREATED = 'workspace.created',
+  WORKSPACE_UPDATED = 'workspace.updated',
+  WORKSPACE_DELETED = 'workspace.deleted',
 }

apps/server/src/core/page/page.controller.ts

@@ -1,23 +1,23 @@
 import {
-  Controller,
+  BadRequestException,
-  Post,
   Body,
+  Controller,
+  ForbiddenException,
   HttpCode,
   HttpStatus,
-  UseGuards,
-  ForbiddenException,
   NotFoundException,
-  BadRequestException,
+  Post,
+  UseGuards,
 } from '@nestjs/common';
 import { PageService } from './services/page.service';
 import { CreatePageDto } from './dto/create-page.dto';
 import { UpdatePageDto } from './dto/update-page.dto';
 import { MovePageDto, MovePageToSpaceDto } from './dto/move-page.dto';
 import {
+  DeletePageDto,
   PageHistoryIdDto,
   PageIdDto,
   PageInfoDto,
-  DeletePageDto,
 } from './dto/page.dto';
 import { PageHistoryService } from './services/page-history.service';
 import { AuthUser } from '../../common/decorators/auth-user.decorator';
@@ -106,7 +106,11 @@ export class PageController {
 
   @HttpCode(HttpStatus.OK)
   @Post('delete')
-  async delete(@Body() deletePageDto: DeletePageDto, @AuthUser() user: User) {
+  async delete(
+    @Body() deletePageDto: DeletePageDto,
+    @AuthUser() user: User,
+    @AuthWorkspace() workspace: Workspace,
+  ) {
     const page = await this.pageRepo.findById(deletePageDto.pageId);
 
     if (!page) {
@@ -122,19 +126,27 @@ export class PageController {
           'Only space admins can permanently delete pages',
         );
       }
-      await this.pageService.forceDelete(deletePageDto.pageId);
+      await this.pageService.forceDelete(deletePageDto.pageId, workspace.id);
     } else {
       // Soft delete requires page manage permissions
       if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Page)) {
         throw new ForbiddenException();
       }
-      await this.pageService.remove(deletePageDto.pageId, user.id);
+      await this.pageService.removePage(
+        deletePageDto.pageId,
+        user.id,
+        workspace.id,
+      );
     }
   }
 
   @HttpCode(HttpStatus.OK)
   @Post('restore')
-  async restore(@Body() pageIdDto: PageIdDto, @AuthUser() user: User) {
+  async restore(
+    @Body() pageIdDto: PageIdDto,
+    @AuthUser() user: User,
+    @AuthWorkspace() workspace: Workspace,
+  ) {
     const page = await this.pageRepo.findById(pageIdDto.pageId);
 
     if (!page) {
@@ -146,13 +158,11 @@ export class PageController {
       throw new ForbiddenException();
     }
 
-    await this.pageRepo.restorePage(pageIdDto.pageId);
+    await this.pageRepo.restorePage(pageIdDto.pageId, workspace.id);
 
-    // Return the restored page data with hasChildren info
+    return this.pageRepo.findById(pageIdDto.pageId, {
-    const restoredPage = await this.pageRepo.findById(pageIdDto.pageId, {
       includeHasChildren: true,
     });
-    return restoredPage;
   }
 
   @HttpCode(HttpStatus.OK)

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

@@ -51,6 +51,7 @@ export class PageService {
     @InjectKysely() private readonly db: KyselyDB,
     private readonly storageService: StorageService,
     @InjectQueue(QueueName.ATTACHMENT_QUEUE) private attachmentQueue: Queue,
+    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
     private eventEmitter: EventEmitter2,
   ) {}
 
@@ -255,6 +256,11 @@ export class PageService {
           pageIds,
           trx,
         );
+
+        await this.aiQueue.add(QueueJob.PAGE_MOVED_TO_SPACE, {
+          pageId: pageIds,
+          workspaceId: rootPage.workspaceId
+        });
       }
     });
   }
@@ -381,9 +387,9 @@ export class PageService {
           workspaceId: page.workspaceId,
           creatorId: authUser.id,
           lastUpdatedById: authUser.id,
-          parentPageId: page.parentPageId
+          parentPageId: page.id === rootPage.id
-            ? pageMap.get(page.parentPageId)?.newPageId
+            ? (isDuplicateInSameSpace ? rootPage.parentPageId : null)
-            : null,
+            : (page.parentPageId ? pageMap.get(page.parentPageId)?.newPageId : null),
         };
       }),
     );
@@ -393,6 +399,7 @@ export class PageService {
     const insertedPageIds = insertablePages.map((page) => page.id);
     this.eventEmitter.emit(EventName.PAGE_CREATED, {
       pageIds: insertedPageIds,
+      workspaceId: authUser.workspaceId,
     });
 
     //TODO: best to handle this in a queue
@@ -580,7 +587,7 @@ export class PageService {
     return await this.pageRepo.getDeletedPagesInSpace(spaceId, pagination);
   }
 
-  async forceDelete(pageId: string): Promise<void> {
+  async forceDelete(pageId: string, workspaceId: string): Promise<void> {
     // Get all descendant IDs (including the page itself) using recursive CTE
     const descendants = await this.db
       .withRecursive('page_descendants', (db) =>
@@ -623,11 +630,16 @@ export class PageService {
       await this.db.deleteFrom('pages').where('id', 'in', pageIds).execute();
       this.eventEmitter.emit(EventName.PAGE_DELETED, {
         pageIds: pageIds,
+        workspaceId,
       });
     }
   }
 
-  async remove(pageId: string, userId: string): Promise<void> {
+  async removePage(
-    await this.pageRepo.removePage(pageId, userId);
+    pageId: string,
+    userId: string,
+    workspaceId: string,
+  ): Promise<void> {
+    await this.pageRepo.removePage(pageId, userId, workspaceId);
   }
 }

apps/server/src/core/search/search.service.ts

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

apps/server/src/core/workspace/dto/update-workspace.dto.ts

@@ -22,4 +22,12 @@ export class UpdateWorkspaceDto extends PartialType(CreateWorkspaceDto) {
   @IsOptional()
   @IsBoolean()
   restrictApiToAdmins: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  aiSearch: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  generativeAi: boolean;
 }

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

@@ -33,6 +33,7 @@ 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';
 
 @Injectable()
 export class WorkspaceService {
@@ -50,6 +51,7 @@ export class WorkspaceService {
     @InjectKysely() private readonly db: KyselyDB,
     @InjectQueue(QueueName.ATTACHMENT_QUEUE) private attachmentQueue: Queue,
     @InjectQueue(QueueName.BILLING_QUEUE) private billingQueue: Queue,
+    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
   ) {}
 
   async findById(workspaceId: string) {
@@ -312,6 +314,51 @@ export class WorkspaceService {
       delete updateWorkspaceDto.restrictApiToAdmins;
     }
 
+    if (typeof updateWorkspaceDto.aiSearch !== 'undefined') {
+      await this.workspaceRepo.updateAiSettings(
+        workspaceId,
+        'search',
+        updateWorkspaceDto.aiSearch,
+      );
+
+      if (updateWorkspaceDto.aiSearch) {
+        const tableExists = await isPageEmbeddingsTableExists(this.db);
+        if (!tableExists) {
+          throw new BadRequestException(
+            'Failed to activate. Make sure pgvector postgres extension is installed.',
+          );
+        }
+
+        await this.aiQueue.add(QueueJob.WORKSPACE_CREATE_EMBEDDINGS, {
+          workspaceId,
+        });
+      } else {
+        // Schedule deletion after 24 hours
+        const deleteJobId = `ai-search-disabled-${workspaceId}`;
+        await this.aiQueue.add(
+          QueueJob.WORKSPACE_DELETE_EMBEDDINGS,
+          { workspaceId },
+          {
+            jobId: deleteJobId,
+            delay: 24 * 60 * 60 * 1000,
+            removeOnComplete: true,
+            removeOnFail: true,
+          },
+        );
+      }
+
+      delete updateWorkspaceDto.aiSearch;
+    }
+
+    if (typeof updateWorkspaceDto.generativeAi !== 'undefined') {
+      await this.workspaceRepo.updateAiSettings(
+        workspaceId,
+        'generative',
+        updateWorkspaceDto.generativeAi,
+      );
+      delete updateWorkspaceDto.generativeAi;
+    }
+
     await this.workspaceRepo.updateWorkspace(updateWorkspaceDto, workspaceId);
 
     const workspace = await this.workspaceRepo.findById(workspaceId, {

apps/server/src/database/helpers/helpers.ts

@@ -0,0 +1,22 @@
+import { sql } from 'kysely';
+import { KyselyDB } from '@docmost/db/types/kysely.types';
+
+export async function isPageEmbeddingsTableExists(db: KyselyDB) {
+  return tableExists({ db, tableName: 'page_embeddings' });
+}
+
+export async function tableExists(opts: {
+  db: KyselyDB;
+  tableName: string;
+}): Promise<boolean> {
+  const { db, tableName } = opts;
+  const result = await sql<{ exists: boolean }>`
+      SELECT EXISTS (
+        SELECT 1 FROM information_schema.tables
+        WHERE table_schema = COALESCE(current_schema(), 'public')
+        AND table_name = ${tableName}
+      ) as exists
+    `.execute(db);
+
+  return result.rows[0]?.exists ?? false;
+}

apps/server/src/database/listeners/page.listener.ts

@@ -4,9 +4,11 @@ import { EventName } from '../../common/events/event.contants';
 import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../integrations/queue/constants';
 import { Queue } from 'bullmq';
+import { EnvironmentService } from '../../integrations/environment/environment.service';
 
 export class PageEvent {
   pageIds: string[];
+  workspaceId: string;
 }
 
 @Injectable()
@@ -14,36 +16,65 @@ export class PageListener {
   private readonly logger = new Logger(PageListener.name);
 
   constructor(
+    private readonly environmentService: EnvironmentService,
     @InjectQueue(QueueName.SEARCH_QUEUE) private searchQueue: Queue,
+    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
   ) {}
 
   @OnEvent(EventName.PAGE_CREATED)
   async handlePageCreated(event: PageEvent) {
-    const { pageIds } = event;
+    const { pageIds, workspaceId } = event;
-    await this.searchQueue.add(QueueJob.PAGE_CREATED, { pageIds });
+    if (this.isTypesense()) {
+      await this.searchQueue.add(QueueJob.PAGE_CREATED, {
+        pageIds,
+      });
+    }
+
+    await this.aiQueue.add(QueueJob.PAGE_CREATED, { pageIds, workspaceId });
   }
 
   @OnEvent(EventName.PAGE_UPDATED)
   async handlePageUpdated(event: PageEvent) {
     const { pageIds } = event;
+
     await this.searchQueue.add(QueueJob.PAGE_UPDATED, { pageIds });
   }
 
   @OnEvent(EventName.PAGE_DELETED)
   async handlePageDeleted(event: PageEvent) {
-    const { pageIds } = event;
+    const { pageIds, workspaceId } = event;
-    await this.searchQueue.add(QueueJob.PAGE_DELETED, { pageIds });
+    if (this.isTypesense()) {
+      await this.searchQueue.add(QueueJob.PAGE_DELETED, { pageIds });
+    }
+
+    await this.aiQueue.add(QueueJob.PAGE_DELETED, { pageIds, workspaceId });
   }
 
   @OnEvent(EventName.PAGE_SOFT_DELETED)
   async handlePageSoftDeleted(event: PageEvent) {
-    const { pageIds } = event;
+    const { pageIds, workspaceId } = event;
-    await this.searchQueue.add(QueueJob.PAGE_SOFT_DELETED, { pageIds });
+
+    if (this.isTypesense()) {
+      await this.searchQueue.add(QueueJob.PAGE_SOFT_DELETED, { pageIds });
+    }
+
+    await this.aiQueue.add(QueueJob.PAGE_SOFT_DELETED, {
+      pageIds,
+      workspaceId,
+    });
   }
 
   @OnEvent(EventName.PAGE_RESTORED)
   async handlePageRestored(event: PageEvent) {
-    const { pageIds } = event;
+    const { pageIds, workspaceId } = event;
-    await this.searchQueue.add(QueueJob.PAGE_RESTORED, { pageIds });
+    if (this.isTypesense()) {
+      await this.searchQueue.add(QueueJob.PAGE_RESTORED, { pageIds });
+    }
+
+    await this.aiQueue.add(QueueJob.PAGE_RESTORED, { pageIds, workspaceId });
+  }
+
+  isTypesense(): boolean {
+    return this.environmentService.getSearchDriver() === 'typesense';
   }
 }

apps/server/src/database/listeners/space.listener.ts

@@ -0,0 +1,36 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { OnEvent } from '@nestjs/event-emitter';
+import { EventName } from '../../common/events/event.contants';
+import { InjectQueue } from '@nestjs/bullmq';
+import { QueueJob, QueueName } from '../../integrations/queue/constants';
+import { Queue } from 'bullmq';
+import { EnvironmentService } from '../../integrations/environment/environment.service';
+
+export class SpaceEvent {
+  spaceId: string;
+}
+
+@Injectable()
+export class SpaceListener {
+  private readonly logger = new Logger(SpaceListener.name);
+
+  constructor(
+    private readonly environmentService: EnvironmentService,
+    @InjectQueue(QueueName.SEARCH_QUEUE) private searchQueue: Queue,
+    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
+  ) {}
+
+  @OnEvent(EventName.SPACE_DELETED)
+  async handleSpaceDeleted(event: SpaceEvent) {
+    const { spaceId } = event;
+    if (this.isTypesense()) {
+      await this.searchQueue.add(QueueJob.SPACE_DELETED, { spaceId });
+    }
+
+    await this.aiQueue.add(QueueJob.SPACE_DELETED, { spaceId });
+  }
+
+  isTypesense(): boolean {
+    return this.environmentService.getSearchDriver() === 'typesense';
+  }
+}

apps/server/src/database/listeners/workspace.listener.ts

@@ -0,0 +1,36 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { OnEvent } from '@nestjs/event-emitter';
+import { EventName } from '../../common/events/event.contants';
+import { InjectQueue } from '@nestjs/bullmq';
+import { QueueJob, QueueName } from '../../integrations/queue/constants';
+import { Queue } from 'bullmq';
+import { EnvironmentService } from '../../integrations/environment/environment.service';
+
+export class WorkspaceEvent {
+  workspaceId: string;
+}
+
+@Injectable()
+export class WorkspaceListener {
+  private readonly logger = new Logger(WorkspaceListener.name);
+
+  constructor(
+    private readonly environmentService: EnvironmentService,
+    @InjectQueue(QueueName.SEARCH_QUEUE) private searchQueue: Queue,
+    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
+  ) {}
+
+  @OnEvent(EventName.WORKSPACE_DELETED)
+  async handlePageDeleted(event: WorkspaceEvent) {
+    const { workspaceId } = event;
+    if (this.isTypesense()) {
+      await this.searchQueue.add(QueueJob.WORKSPACE_DELETED, { workspaceId });
+    }
+
+    await this.aiQueue.add(QueueJob.WORKSPACE_DELETED, { workspaceId });
+  }
+
+  isTypesense(): boolean {
+    return this.environmentService.getSearchDriver() === 'typesense';
+  }
+}

apps/server/src/database/repos/page/page.repo.ts

@@ -125,6 +125,7 @@ export class PageRepo {
 
     this.eventEmitter.emit(EventName.PAGE_UPDATED, {
       pageIds: pageIds,
+      workspaceId: updatePageData.workspaceId,
     });
 
     return result;
@@ -143,6 +144,7 @@ export class PageRepo {
 
     this.eventEmitter.emit(EventName.PAGE_CREATED, {
       pageIds: [result.id],
+      workspaceId: result.workspaceId,
     });
 
     return result;
@@ -160,7 +162,11 @@ export class PageRepo {
     await query.execute();
   }
 
-  async removePage(pageId: string, deletedById: string): Promise<void> {
+  async removePage(
+    pageId: string,
+    deletedById: string,
+    workspaceId: string,
+  ): Promise<void> {
     const currentDate = new Date();
 
     const descendants = await this.db
@@ -195,13 +201,15 @@ export class PageRepo {
 
         await trx.deleteFrom('shares').where('pageId', 'in', pageIds).execute();
       });
+
       this.eventEmitter.emit(EventName.PAGE_SOFT_DELETED, {
         pageIds: pageIds,
+        workspaceId,
       });
     }
   }
 
-  async restorePage(pageId: string): Promise<void> {
+  async restorePage(pageId: string, workspaceId: string): Promise<void> {
     // First, check if the page being restored has a deleted parent
     const pageToRestore = await this.db
       .selectFrom('pages')
@@ -263,6 +271,7 @@ export class PageRepo {
     }
     this.eventEmitter.emit(EventName.PAGE_RESTORED, {
       pageIds: pageIds,
+      workspaceId: workspaceId,
     });
   }
 

apps/server/src/database/repos/space/space.repo.ts

@@ -12,10 +12,15 @@ import { PaginationOptions } from '../../pagination/pagination-options';
 import { executeWithPagination } from '@docmost/db/pagination/pagination';
 import { DB } from '@docmost/db/types/db';
 import { validate as isValidUUID } from 'uuid';
+import { EventEmitter2 } from '@nestjs/event-emitter';
+import { EventName } from '../../../common/events/event.contants';
 
 @Injectable()
 export class SpaceRepo {
-  constructor(@InjectKysely() private readonly db: KyselyDB) {}
+  constructor(
+    @InjectKysely() private readonly db: KyselyDB,
+    private eventEmitter: EventEmitter2,
+  ) {}
 
   async findById(
     spaceId: string,
@@ -110,7 +115,11 @@ export class SpaceRepo {
 
     if (pagination.query) {
       query = query.where((eb) =>
-        eb(sql`f_unaccent(name)`, 'ilike', sql`f_unaccent(${'%' + pagination.query + '%'})`).or(
+        eb(
+          sql`f_unaccent(name)`,
+          'ilike',
+          sql`f_unaccent(${'%' + pagination.query + '%'})`,
+        ).or(
           sql`f_unaccent(description)`,
           'ilike',
           sql`f_unaccent(${'%' + pagination.query + '%'})`,
@@ -155,5 +164,9 @@ export class SpaceRepo {
       .where('id', '=', spaceId)
       .where('workspaceId', '=', workspaceId)
       .execute();
+
+    this.eventEmitter.emit(EventName.SPACE_DELETED, {
+      spaceId,
+    });
   }
 }

apps/server/src/database/repos/workspace/workspace.repo.ts

@@ -175,4 +175,22 @@ export class WorkspaceRepo {
       .returning(this.baseFields)
       .executeTakeFirst();
   }
+
+  async updateAiSettings(
+    workspaceId: string,
+    prefKey: string,
+    prefValue: string | boolean,
+  ) {
+    return this.db
+      .updateTable('workspaces')
+      .set({
+        settings: sql`COALESCE(settings, '{}'::jsonb)
+                || jsonb_build_object('ai', COALESCE(settings->'ai', '{}'::jsonb) 
+                || jsonb_build_object('${sql.raw(prefKey)}', ${sql.lit(prefValue)}))`,
+        updatedAt: new Date(),
+      })
+      .where('id', '=', workspaceId)
+      .returning(this.baseFields)
+      .executeTakeFirst();
+  }
 }

apps/server/src/database/types/db.interface.ts

@@ -0,0 +1,47 @@
+import {
+  ApiKeys,
+  Attachments,
+  AuthAccounts,
+  AuthProviders,
+  Backlinks,
+  Billing,
+  Comments,
+  FileTasks,
+  Groups,
+  GroupUsers,
+  PageHistory,
+  Pages,
+  Shares,
+  SpaceMembers,
+  Spaces,
+  UserMfa,
+  Users,
+  UserTokens,
+  WorkspaceInvitations,
+  Workspaces,
+} from '@docmost/db/types/db';
+import { PageEmbeddings } from '@docmost/db/types/embeddings.types';
+
+export interface DbInterface {
+  attachments: Attachments;
+  authAccounts: AuthAccounts;
+  authProviders: AuthProviders;
+  backlinks: Backlinks;
+  billing: Billing;
+  comments: Comments;
+  fileTasks: FileTasks;
+  groups: Groups;
+  groupUsers: GroupUsers;
+  pageEmbeddings: PageEmbeddings;
+  pageHistory: PageHistory;
+  pages: Pages;
+  shares: Shares;
+  spaceMembers: SpaceMembers;
+  spaces: Spaces;
+  userMfa: UserMfa;
+  users: Users;
+  userTokens: UserTokens;
+  workspaceInvitations: WorkspaceInvitations;
+  workspaces: Workspaces;
+  apiKeys: ApiKeys;
+}

apps/server/src/database/types/embeddings.types.ts

@@ -0,0 +1,20 @@
+import { Json, Timestamp, Generated } from '@docmost/db/types/db';
+
+// embeddings type
+export interface PageEmbeddings {
+  id: Generated<string>;
+  pageId: string;
+  spaceId: string;
+  modelName: string;
+  modelDimensions: number;
+  workspaceId: string;
+  attachmentId: string;
+  embedding: number[];
+  chunkIndex: Generated<number>;
+  chunkStart: Generated<number>;
+  chunkLength: Generated<number>;
+  metadata: Generated<Json>;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Generated<Timestamp>;
+  deletedAt: Timestamp | null;
+}

apps/server/src/database/types/entity.types.ts

@@ -21,6 +21,7 @@ import {
   UserMfa as _UserMFA,
   ApiKeys,
 } from './db';
+import { PageEmbeddings } from '@docmost/db/types/embeddings.types';
 
 // Workspace
 export type Workspace = Selectable<Workspaces>;
@@ -125,3 +126,8 @@ export type UpdatableUserMFA = Updateable<Omit<_UserMFA, 'id'>>;
 export type ApiKey = Selectable<ApiKeys>;
 export type InsertableApiKey = Insertable<ApiKeys>;
 export type UpdatableApiKey = Updateable<Omit<ApiKeys, 'id'>>;
+
+// Page Embedding
+export type PageEmbedding = Selectable<PageEmbeddings>;
+export type InsertablePageEmbedding = Insertable<PageEmbeddings>;
+export type UpdatablePageEmbedding = Updateable<Omit<PageEmbeddings, 'id'>>;

apps/server/src/database/types/kysely.types.ts

@@ -1,5 +1,5 @@
-import { DB } from './db';
 import { Kysely, Transaction } from 'kysely';
+import { DbInterface } from '@docmost/db/types/db.interface';
 
-export type KyselyDB = Kysely<DB>;
+export type KyselyDB = Kysely<DbInterface>;
-export type KyselyTransaction = Transaction<DB>;
+export type KyselyTransaction = Transaction<DbInterface>;

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

@@ -10,6 +10,10 @@ export class EnvironmentService {
     return this.configService.get<string>('NODE_ENV', 'development');
   }
 
+  isDevelopment(): boolean {
+    return this.getNodeEnv() === 'development';
+  }
+
   getAppUrl(): string {
     const rawUrl =
       this.configService.get<string>('APP_URL') ||
@@ -231,6 +235,46 @@ export class EnvironmentService {
   }
 
   getTypesenseLocale(): string {
-    return this.configService.get<string>('TYPESENSE_LOCALE', 'en').toLowerCase();
+    return this.configService
+      .get<string>('TYPESENSE_LOCALE', 'en')
+      .toLowerCase();
+  }
+
+  getAiDriver(): string {
+    return this.configService.get<string>('AI_DRIVER');
+  }
+
+  getAiEmbeddingModel(): string {
+    return this.configService.get<string>('AI_EMBEDDING_MODEL');
+  }
+
+  getAiCompletionModel(): string {
+    return this.configService.get<string>('AI_COMPLETION_MODEL');
+  }
+
+  getAiEmbeddingDimension(): number {
+    return parseInt(
+      this.configService.get<string>('AI_EMBEDDING_DIMENSION'),
+      10,
+    );
+  }
+
+  getOpenAiApiKey(): string {
+    return this.configService.get<string>('OPENAI_API_KEY');
+  }
+
+  getOpenAiApiUrl(): string {
+    return this.configService.get<string>('OPENAI_API_URL');
+  }
+
+  getGeminiApiKey(): string {
+    return this.configService.get<string>('GEMINI_API_KEY');
+  }
+
+  getOllamaApiUrl(): string {
+    return this.configService.get<string>(
+      'OLLAMA_API_URL',
+      'http://localhost:11434',
+    );
   }
 }

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

@@ -93,6 +93,7 @@ export class EnvironmentVariables {
 
   @IsOptional()
   @ValidateIf((obj) => obj.SEARCH_DRIVER === 'typesense')
+  @IsNotEmpty()
   @IsString()
   TYPESENSE_API_KEY: string;
 
@@ -101,6 +102,53 @@ export class EnvironmentVariables {
   @IsISO6391()
   @IsString()
   TYPESENSE_LOCALE: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER)
+  @IsIn(['openai', 'gemini', 'ollama'])
+  @IsString()
+  AI_DRIVER: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER)
+  @IsString()
+  @IsNotEmpty()
+  AI_EMBEDDING_MODEL: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_EMBEDDING_DIMENSION)
+  @IsIn(['768', '1024', '1536'])
+  @IsString()
+  AI_EMBEDDING_DIMENSION: string;
+
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER)
+  @IsString()
+  @IsNotEmpty()
+  AI_COMPLETION_MODEL: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER && obj.AI_DRIVER === 'openai')
+  @IsString()
+  @IsNotEmpty()
+  OPENAI_API_KEY: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER && obj.OPENAI_API_URL && obj.AI_DRIVER === 'openai')
+  @IsUrl({ protocols: ['http', 'https'], require_tld: false })
+  OPENAI_API_URL: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER && obj.AI_DRIVER === 'gemini')
+  @IsString()
+  @IsNotEmpty()
+  GEMINI_API_KEY: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.AI_DRIVER && obj.AI_DRIVER === 'ollama')
+  @IsUrl({ protocols: ['http', 'https'], require_tld: false })
+  OLLAMA_API_URL: string;
 }
 
 export function validate(config: Record<string, any>) {

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

@@ -175,6 +175,67 @@ export class FileImportTaskService {
       });
     }
 
+    // Create placeholder pages for folders without corresponding files
+    const foldersWithContent = new Set<string>();
+
+    pagesMap.forEach((page) => {
+      const segments = page.filePath.split('/');
+      segments.pop(); // remove filename
+
+      // Build up all folder paths and mark them as having content
+      let currentPath = '';
+      for (const segment of segments) {
+        currentPath = currentPath ? `${currentPath}/${segment}` : segment;
+        foldersWithContent.add(currentPath); // All ancestor folders have content
+      }
+    });
+
+    // Determine if there's a single root container folder
+    const rootLevelItems = new Set<string>();
+    pagesMap.forEach((page) => {
+      const firstSegment = page.filePath.split('/')[0];
+      rootLevelItems.add(firstSegment);
+    });
+
+    // If all files are in a single root folder and no files at root level exist
+    let skipRootFolder: string | null = null;
+    if (rootLevelItems.size === 1) {
+      const onlyRootItem = Array.from(rootLevelItems)[0];
+      // Check if this is a folder (not a file at root)
+      const hasRootFiles = Array.from(pagesMap.keys()).some(
+        (filePath) => !filePath.includes('/'),
+      );
+      if (!hasRootFiles) {
+        skipRootFolder = onlyRootItem;
+      }
+    }
+
+    // For each folder with content, create a placeholder page if no corresponding .md or .html exists
+    foldersWithContent.forEach((folderPath) => {
+      if (
+        skipRootFolder &&
+        folderPath?.toLowerCase() === skipRootFolder?.toLowerCase()
+      ) {
+        return;
+      }
+
+      const mdPath = `${folderPath}.md`;
+      const htmlPath = `${folderPath}.html`;
+
+      if (!pagesMap.has(mdPath) && !pagesMap.has(htmlPath)) {
+        const folderName = path.basename(folderPath);
+        pagesMap.set(mdPath, {
+          id: v7(),
+          slugId: generateSlugId(),
+          name: stripNotionID(folderName),
+          content: '',
+          parentPageId: null,
+          fileExtension: '.md',
+          filePath: mdPath,
+        });
+      }
+    });
+
     // parent/child linking
     pagesMap.forEach((page, filePath) => {
       const segments = filePath.split('/');
@@ -316,10 +377,23 @@ export class FileImportTaskService {
 
           for (const [filePath, page] of levelPages) {
             const absPath = path.join(extractDir, filePath);
-            let content = await fs.readFile(absPath, 'utf-8');
+            let content = '';
 
-            if (page.fileExtension.toLowerCase() === '.md') {
+            // Check if file exists (placeholder pages won't have physical files)
-              content = await markdownToHtml(content);
+            try {
+              await fs.access(absPath);
+              content = await fs.readFile(absPath, 'utf-8');
+
+              if (page.fileExtension.toLowerCase() === '.md') {
+                content = await markdownToHtml(content);
+              }
+            } catch (err: any) {
+              if (err?.code === 'ENOENT') {
+                // Use empty content, title will be the folder name
+                content = '';
+              } else {
+                throw err;
+              }
             }
 
             const htmlContent =
@@ -402,6 +476,7 @@ export class FileImportTaskService {
         if (validPageIds.size > 0) {
           this.eventEmitter.emit(EventName.PAGE_CREATED, {
             pageIds: Array.from(validPageIds),
+            workspaceId: fileTask.workspaceId,
           });
         }
 

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

@@ -103,6 +103,14 @@ function extractZipInternal(
         zipfile.on('entry', (entry) => {
           const name = entry.fileName.toString('utf8');
           const safe = name.replace(/^\/+/, '');
+
+          const validationError = yauzl.validateFileName(safe);
+          if (validationError) {
+            console.warn(`Skipping invalid entry (${validationError})`);
+            zipfile.readEntry();
+            return;
+          }
+
           if (safe.startsWith('__MACOSX/')) {
             zipfile.readEntry();
             return;
@@ -110,6 +118,15 @@ function extractZipInternal(
 
           const fullPath = path.join(target, safe);
 
+          const resolved = path.resolve(fullPath);
+          const targetResolved = path.resolve(target);
+
+          if (!resolved.startsWith(targetResolved + path.sep)) {
+            console.warn(`Skipping entry (path outside target): ${safe}`);
+            zipfile.readEntry();
+            return;
+          }
+
           // Handle directories
           if (/\/$/.test(name)) {
             try {

apps/server/src/integrations/queue/constants/queue.constants.ts

@@ -5,6 +5,7 @@ export enum QueueName {
   BILLING_QUEUE = '{billing-queue}',
   FILE_TASK_QUEUE = '{file-task-queue}',
   SEARCH_QUEUE = '{search-queue}',
+  AI_QUEUE = '{ai-queue}',
 }
 
 export enum QueueJob {
@@ -13,7 +14,6 @@ export enum QueueJob {
   ATTACHMENT_INDEX_CONTENT = 'attachment-index-content',
   ATTACHMENT_INDEXING = 'attachment-indexing',
   DELETE_PAGE_ATTACHMENTS = 'delete-page-attachments',
-  PAGE_CONTENT_UPDATE = 'page-content-update',
 
   DELETE_USER_AVATARS = 'delete-user-avatars',
 
@@ -39,8 +39,23 @@ export enum QueueJob {
   TYPESENSE_FLUSH = 'typesense-flush',
 
   PAGE_CREATED = 'page-created',
+  PAGE_CONTENT_UPDATED = 'page-content-updated',
+  PAGE_MOVED_TO_SPACE = 'page-moved-to-space',
   PAGE_UPDATED = 'page-updated',
   PAGE_SOFT_DELETED = 'page-soft-deleted',
   PAGE_RESTORED = 'page-restored',
   PAGE_DELETED = 'page-deleted',
+
+  SPACE_CREATED = 'space-created',
+  SPACE_UPDATED = 'space-updated',
+  SPACE_DELETED = 'space-deleted',
+
+  WORKSPACE_CREATED = 'workspace-created',
+  WORKSPACE_SPACE_UPDATED = 'workspace-updated',
+  WORKSPACE_DELETED = 'workspace-deleted',
+  WORKSPACE_CREATE_EMBEDDINGS = 'workspace-create-embeddings',
+  WORKSPACE_DELETE_EMBEDDINGS = 'workspace-delete-embeddings',
+
+  GENERATE_PAGE_EMBEDDINGS = 'generate-page-embeddings',
+  DELETE_PAGE_EMBEDDINGS = 'delete-page-embeddings',
 }

apps/server/src/integrations/queue/queue.module.ts

@@ -65,6 +65,14 @@ import { BacklinksProcessor } from './processors/backlinks.processor';
         attempts: 2,
       },
     }),
+    BullModule.registerQueue({
+      name: QueueName.AI_QUEUE,
+      defaultJobOptions: {
+        removeOnComplete: true,
+        removeOnFail: true,
+        attempts: 1,
+      },
+    }),
   ],
   exports: [BullModule],
   providers: [BacklinksProcessor],

package.json

@@ -21,47 +21,48 @@
     "@braintree/sanitize-url": "^7.1.0",
     "@docmost/editor-ext": "workspace:*",
     "@floating-ui/dom": "^1.7.3",
-    "@hocuspocus/extension-redis": "^2.15.2",
+    "@hocuspocus/extension-redis": "^2.15.3",
-    "@hocuspocus/provider": "^2.15.2",
+    "@hocuspocus/provider": "^2.15.3",
-    "@hocuspocus/server": "^2.15.2",
+    "@hocuspocus/server": "^2.15.3",
-    "@hocuspocus/transformer": "^2.15.2",
+    "@hocuspocus/transformer": "^2.15.3",
     "@joplin/turndown": "^4.0.74",
     "@joplin/turndown-plugin-gfm": "^1.0.56",
     "@sindresorhus/slugify": "1.1.0",
-    "@tiptap/core": "^2.10.3",
+    "@tiptap/core": "2.27.1",
-    "@tiptap/extension-code-block": "^2.10.3",
+    "@tiptap/extension-code-block": "2.27.1",
-    "@tiptap/extension-code-block-lowlight": "^2.10.3",
+    "@tiptap/extension-code-block-lowlight": "2.27.1",
-    "@tiptap/extension-collaboration": "^2.10.3",
+    "@tiptap/extension-collaboration": "2.27.1",
-    "@tiptap/extension-collaboration-cursor": "^2.10.3",
+    "@tiptap/extension-collaboration-cursor": "2.27.1",
-    "@tiptap/extension-color": "^2.10.3",
+    "@tiptap/extension-color": "2.27.1",
-    "@tiptap/extension-document": "^2.10.3",
+    "@tiptap/extension-document": "2.27.1",
-    "@tiptap/extension-heading": "^2.10.3",
+    "@tiptap/extension-heading": "2.27.1",
-    "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-highlight": "2.27.1",
-    "@tiptap/extension-history": "^2.10.3",
+    "@tiptap/extension-history": "2.27.1",
-    "@tiptap/extension-image": "^2.10.3",
+    "@tiptap/extension-horizontal-rule": "2.27.1",
-    "@tiptap/extension-link": "^2.10.3",
+    "@tiptap/extension-image": "2.27.1",
-    "@tiptap/extension-list-item": "^2.10.3",
+    "@tiptap/extension-link": "2.27.1",
-    "@tiptap/extension-list-keymap": "^2.10.3",
+    "@tiptap/extension-list-item": "2.27.1",
-    "@tiptap/extension-placeholder": "^2.10.3",
+    "@tiptap/extension-list-keymap": "2.27.1",
-    "@tiptap/extension-subscript": "^2.10.3",
+    "@tiptap/extension-placeholder": "2.27.1",
-    "@tiptap/extension-superscript": "^2.10.3",
+    "@tiptap/extension-subscript": "2.27.1",
-    "@tiptap/extension-table": "^2.10.3",
+    "@tiptap/extension-superscript": "2.27.1",
-    "@tiptap/extension-table-cell": "^2.10.3",
+    "@tiptap/extension-table": "2.27.1",
-    "@tiptap/extension-table-header": "^2.10.3",
+    "@tiptap/extension-table-cell": "2.27.1",
-    "@tiptap/extension-table-row": "^2.10.3",
+    "@tiptap/extension-table-header": "2.27.1",
-    "@tiptap/extension-task-item": "^2.10.3",
+    "@tiptap/extension-table-row": "2.27.1",
-    "@tiptap/extension-task-list": "^2.10.3",
+    "@tiptap/extension-task-item": "2.27.1",
-    "@tiptap/extension-text": "^2.10.3",
+    "@tiptap/extension-task-list": "2.27.1",
-    "@tiptap/extension-text-align": "^2.10.3",
+    "@tiptap/extension-text": "2.27.1",
-    "@tiptap/extension-text-style": "^2.10.3",
+    "@tiptap/extension-text-align": "2.27.1",
-    "@tiptap/extension-typography": "^2.10.3",
+    "@tiptap/extension-text-style": "2.27.1",
-    "@tiptap/extension-underline": "^2.10.3",
+    "@tiptap/extension-typography": "2.27.1",
-    "@tiptap/extension-youtube": "^2.10.3",
+    "@tiptap/extension-underline": "2.27.1",
-    "@tiptap/html": "^2.10.3",
+    "@tiptap/extension-youtube": "2.27.1",
-    "@tiptap/pm": "^2.10.3",
+    "@tiptap/html": "2.27.1",
-    "@tiptap/react": "^2.10.3",
+    "@tiptap/pm": "2.27.1",
-    "@tiptap/starter-kit": "^2.10.3",
+    "@tiptap/react": "2.27.1",
-    "@tiptap/suggestion": "^2.10.3",
+    "@tiptap/starter-kit": "2.27.1",
+    "@tiptap/suggestion": "2.27.1",
     "@types/qrcode": "^1.5.5",
     "bytes": "^3.1.2",
     "cross-env": "^7.0.3",
@@ -76,6 +77,7 @@
     "qrcode": "^1.5.4",
     "uuid": "^11.1.0",
     "y-indexeddb": "^9.0.12",
+    "y-prosemirror": "1.3.7",
     "yjs": "^13.6.27"
   },
   "devDependencies": {
@@ -98,7 +100,8 @@
       "react-arborist@3.4.0": "patches/react-arborist@3.4.0.patch"
     },
     "overrides": {
-      "jsdom": "25.0.1"
+      "jsdom": "25.0.1",
+      "y-prosemirror": "1.3.7"
     },
     "neverBuiltDependencies": []
   }

packages/editor-ext/src/index.ts

@@ -20,3 +20,7 @@ export * from "./lib/markdown";
 export * from "./lib/search-and-replace";
 export * from "./lib/embed-provider";
 export * from "./lib/subpages";
+export * from "./lib/highlight";
+export * from "./lib/heading/heading";
+export * from "./lib/unique-id";
+export * from "./lib/hr";

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

@@ -0,0 +1,78 @@
+import TiptapHeading, {
+  HeadingOptions as TiptapHeadingOptions,
+} from "@tiptap/extension-heading";
+import { mergeAttributes } from "@tiptap/react";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Plugin } from "prosemirror-state";
+
+const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><!-- Icon from Material Symbols Light by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M10.616 16.077H7.077q-1.692 0-2.884-1.192T3 12t1.193-2.885t2.884-1.193h3.539v1H7.077q-1.27 0-2.173.904Q4 10.731 4 12t.904 2.173t2.173.904h3.539zM8.5 12.5v-1h7v1zm4.885 3.577v-1h3.538q1.27 0 2.173-.904Q20 13.269 20 12t-.904-2.173t-2.173-.904h-3.538v-1h3.538q1.692 0 2.885 1.192T21 12t-1.193 2.885t-2.884 1.193z"/></svg>`;
+const successIcon = `<svg xmlns="http://www.w3.org/2000/svg" style="color: forestgreen;" width="18" height="18" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="m10.6 16.6l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>`;
+
+export const Heading = TiptapHeading.extend<TiptapHeadingOptions>({
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          decorations(state) {
+            const decorations: Decoration[] = [];
+            const { doc } = state;
+
+            doc.descendants((node, pos) => {
+              if (node.type.name === "heading" && node.content.size > 0) {
+                const deco = Decoration.widget(
+                  pos + node.nodeSize - 1,
+                  () => {
+                    const icon = document.createElement("span");
+                    icon.classList.add("link-btn");
+                    icon.innerHTML = "&nbsp;";
+                    icon.contentEditable = "false";
+
+                    const linkBtnContent = document.createElement("span");
+                    linkBtnContent.classList.add("link-btn-content");
+                    linkBtnContent.innerHTML = copyIcon;
+                    icon.appendChild(linkBtnContent);
+
+                    icon.addEventListener("mousedown", (e) =>
+                      e.preventDefault(),
+                    );
+                    icon.addEventListener("click", (e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      const id = node.attrs.id;
+                      const baseUrl = window.location.href.split('#')[0];
+                      const url = `${baseUrl}#${id}`;
+                      navigator.clipboard.writeText(url);
+                      linkBtnContent.innerHTML = successIcon;
+                      setTimeout(
+                        () => (linkBtnContent.innerHTML = copyIcon),
+                        2000,
+                      );
+                    });
+
+                    return icon;
+                  },
+                  { side: 1 }, // render after node content
+                );
+                decorations.push(deco);
+              }
+            });
+
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+
+    return [
+      `h${level}`,
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        id: node.attrs.id,
+      }),
+      0,
+    ];
+  },
+});

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

@@ -0,0 +1,40 @@
+import {
+  Highlight as TiptapHighlight,
+  type HighlightOptions,
+} from "@tiptap/extension-highlight";
+
+export const Highlight = TiptapHighlight.extend<HighlightOptions>({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      color: {
+        default: null,
+        parseHTML: (element) =>
+          element.getAttribute("data-color") || element.style.backgroundColor,
+        renderHTML: (attributes) => {
+          if (!attributes.color) {
+            return {};
+          }
+
+          return {
+            "data-color": attributes.color,
+            style: `background-color: ${attributes.color}; color: inherit`,
+          };
+        },
+      },
+      colorName: {
+        default: null,
+        parseHTML: (element) =>
+          element.getAttribute("data-highlight-color-name") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.colorName) {
+            return {};
+          }
+          return {
+            "data-highlight-color-name": attributes.colorName.toLowerCase(),
+          };
+        },
+      },
+    };
+  },
+});

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

@@ -0,0 +1,21 @@
+import { HorizontalRule as TiptapHorizontalRule } from "@tiptap/extension-horizontal-rule";
+
+export type HorizontalRuleType = "pageBreak";
+
+export const HorizontalRule = TiptapHorizontalRule.extend({
+  addAttributes() {
+    return {
+      type: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-type"),
+        renderHTML: (attributes) => {
+          if (attributes.type) {
+            return {
+              "data-type": attributes.type,
+            };
+          }
+        },
+      },
+    };
+  },
+});

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

@@ -33,6 +33,11 @@ export interface MentionNodeAttrs {
    * the id of the user who initiated the mention
    */
   creatorId?: string;
+
+  /**
+   * the anchor hash for page mentions (e.g., "heading-1")
+   */
+  anchorId?: string;
 }
 
 export type MentionOptions<
@@ -246,6 +251,20 @@ export const Mention = Node.create<MentionOptions>({
           };
         },
       },
+
+      anchorId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-anchor-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.anchorId) {
+            return {};
+          }
+
+          return {
+            "data-anchor-id": attributes.anchorId,
+          };
+        },
+      },
     };
   },
 

packages/editor-ext/src/lib/trailing-node.ts

@@ -64,6 +64,12 @@ export const TrailingNode = Extension.create<TrailingNodeExtensionOptions>({
               return value
             }
 
+            // Ignore transactions from UniqueID extension to prevent infinite loops
+            // when UniqueID adds IDs to newly inserted trailing nodes
+            if (tr.getMeta('__uniqueIDTransaction')) {
+              return value
+            }
+
             const lastNode = tr.doc.lastChild
             return !nodeEqualsType({ node: lastNode, types: disabledNodes })
           },

packages/editor-ext/src/lib/unique-id/helpers/findDuplicates.ts

@@ -0,0 +1,11 @@
+import { removeDuplicates } from './removeDuplicates.js'
+
+/**
+ * Returns a list of duplicated items within an array.
+ */
+export function findDuplicates(items: any[]): any[] {
+  const filtered = items.filter((el, index) => items.indexOf(el) !== index)
+  const duplicates = removeDuplicates(filtered)
+
+  return duplicates
+}

packages/editor-ext/src/lib/unique-id/helpers/removeDuplicates.ts

@@ -0,0 +1,15 @@
+/**
+ * Removes duplicated values within an array.
+ * Supports numbers, strings and objects.
+ */
+export function removeDuplicates<T>(array: T[], by = JSON.stringify): T[] {
+  const seen: Record<any, any> = {}
+
+  return array.filter(item => {
+    const key = by(item)
+
+    return Object.prototype.hasOwnProperty.call(seen, key)
+      ? false
+      : (seen[key] = true)
+  })
+}

packages/editor-ext/src/lib/unique-id/index.ts

@@ -0,0 +1,2 @@
+export { UniqueID } from "./unique-id";
+export * from "./unique-id.util";

packages/editor-ext/src/lib/unique-id/unique-id.ts

@@ -0,0 +1,386 @@
+import {
+  combineTransactionSteps,
+  Extension,
+  findChildren,
+  findChildrenInRange,
+  getChangedRanges,
+} from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Fragment, Slice } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+import { findDuplicates } from "./helpers/findDuplicates.js";
+import { generateNodeId } from "../utils";
+
+export type UniqueIDGenerationContext = {
+  node: ProseMirrorNode;
+  pos: number;
+};
+
+export interface UniqueIDOptions {
+  /**
+   * The name of the attribute to add the unique ID to.
+   * @default "id"
+   */
+  attributeName: string;
+  /**
+   * The types of nodes to add unique IDs to.
+   * @default []
+   */
+  types: string[];
+  /**
+   * The function that generates the unique ID. By default, a UUID v4 is
+   * generated. However, you can provide your own function to generate the
+   * unique ID based on the node type and the position.
+   */
+  generateID: (ctx: UniqueIDGenerationContext) => any;
+  /**
+   * Ignore some mutations, for example applied from other users through the collaboration plugin.
+   *
+   * @default null
+   */
+  filterTransaction: ((transaction: Transaction) => boolean) | null;
+  /**
+   * Whether to update the document by adding unique IDs to the nodes. Set this
+   * property to `false` if the document is in `readonly` mode, is immutable, or
+   * you don't want it to be modified.
+   *
+   * @default true
+   */
+  updateDocument: boolean;
+}
+
+export const UniqueID = Extension.create<UniqueIDOptions>({
+  name: "uniqueID",
+
+  // we’ll set a very high priority to make sure this runs first
+  // and is compatible with `appendTransaction` hooks of other extensions
+  priority: 10000,
+
+  addOptions() {
+    return {
+      attributeName: "id",
+      types: [],
+      generateID: () => generateNodeId(),
+      filterTransaction: null,
+      updateDocument: true,
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          [this.options.attributeName]: {
+            default: null,
+            parseHTML: (element) =>
+              element.getAttribute(`data-${this.options.attributeName}`),
+            renderHTML: (attributes) => {
+              if (!attributes[this.options.attributeName]) {
+                return {};
+              }
+
+              return {
+                [`data-${this.options.attributeName}`]:
+                  attributes[this.options.attributeName],
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  // check initial content for missing ids
+  onCreate() {
+    if (!this.options.updateDocument) {
+      return;
+    }
+
+    const collaboration = this.editor.extensionManager.extensions.find(
+      (ext) => ext.name === "collaboration",
+    );
+    const collaborationCursor = this.editor.extensionManager.extensions.find(
+      (ext) => ext.name === "collaborationCursor",
+    );
+
+    const collabExtensions = [collaboration, collaborationCursor].filter(
+      Boolean,
+    );
+    const collab = collabExtensions.find((ext) => ext?.options?.provider);
+    const provider = collab?.options?.provider;
+
+    const createIds = () => {
+      const { view, state } = this.editor;
+      const { tr, doc } = state;
+      const { types, attributeName, generateID } = this.options;
+      const nodesWithoutId = findChildren(doc, (node) => {
+        return (
+          types.includes(node.type.name) && node.attrs[attributeName] === null
+        );
+      });
+
+      nodesWithoutId.forEach(({ node, pos }) => {
+        tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          [attributeName]: generateID({ node, pos }),
+        });
+      });
+
+      tr.setMeta("addToHistory", false);
+
+      view.dispatch(tr);
+
+      if (provider) {
+        provider.off("synced", createIds);
+      }
+    };
+
+    /**
+     * We need to handle collaboration a bit different here
+     * because we can't automatically add IDs when the provider is not yet synced
+     * otherwise we end up with empty paragraphs
+     */
+    if (collab) {
+      if (!provider) {
+        return createIds();
+      }
+
+      provider.on("synced", createIds);
+    } else {
+      return createIds();
+    }
+  },
+
+  addProseMirrorPlugins() {
+    if (!this.options.updateDocument) {
+      return [];
+    }
+
+    let dragSourceElement: Element | null = null;
+    let transformPasted = false;
+
+    return [
+      new Plugin({
+        key: new PluginKey("uniqueID"),
+
+        appendTransaction: (transactions, oldState, newState) => {
+          const hasDocChanges =
+            transactions.some((transaction) => transaction.docChanged) &&
+            !oldState.doc.eq(newState.doc);
+          const filterTransactions =
+            this.options.filterTransaction &&
+            transactions.some((tr) => !this.options.filterTransaction?.(tr));
+
+          const isCollabTransaction = transactions.find((tr) =>
+            tr.getMeta("y-sync$"),
+          );
+
+          if (isCollabTransaction) {
+            return;
+          }
+
+          if (!hasDocChanges || filterTransactions) {
+            return;
+          }
+
+          const { tr } = newState;
+
+          const { types, attributeName, generateID } = this.options;
+          const transform = combineTransactionSteps(
+            oldState.doc,
+            transactions as Transaction[],
+          );
+          const { mapping } = transform;
+
+          // get changed ranges based on the old state
+          const changes = getChangedRanges(transform);
+
+          changes.forEach(({ newRange }) => {
+            const newNodes = findChildrenInRange(
+              newState.doc,
+              newRange,
+              (node) => {
+                return types.includes(node.type.name);
+              },
+            );
+
+            const newIds = newNodes
+              .map(({ node }) => node.attrs[attributeName])
+              .filter((id) => id !== null);
+
+            newNodes.forEach(({ node, pos }, i) => {
+              // instead of checking `node.attrs[attributeName]` directly
+              // we look at the current state of the node within `tr.doc`.
+              // this helps to prevent adding new ids to the same node
+              // if the node changed multiple times within one transaction
+              const id = tr.doc.nodeAt(pos)?.attrs[attributeName];
+
+              if (id === null) {
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  [attributeName]: generateID({ node, pos }),
+                });
+
+                return;
+              }
+
+              const nextNode = newNodes[i + 1];
+
+              if (nextNode && node.content.size === 0) {
+                tr.setNodeMarkup(nextNode.pos, undefined, {
+                  ...nextNode.node.attrs,
+                  [attributeName]: id,
+                });
+                newIds[i + 1] = id;
+
+                if (nextNode.node.attrs[attributeName]) {
+                  return;
+                }
+
+                const generatedId = generateID({ node, pos });
+
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  [attributeName]: generatedId,
+                });
+                newIds[i] = generatedId;
+
+                return tr;
+              }
+
+              const duplicatedNewIds = findDuplicates(newIds);
+
+              // check if the node doesn’t exist in the old state
+              const { deleted } = mapping.invert().mapResult(pos);
+
+              const newNode = deleted && duplicatedNewIds.includes(id);
+
+              if (newNode) {
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  [attributeName]: generateID({ node, pos }),
+                });
+              }
+            });
+          });
+
+          if (!tr.steps.length) {
+            return;
+          }
+
+          // `tr.setNodeMarkup` resets the stored marks
+          // so we'll restore them if they exist
+          tr.setStoredMarks(newState.tr.storedMarks);
+
+          // Mark this transaction as coming from UniqueID
+          // to prevent infinite loops with other extensions (e.g., TrailingNode)
+          tr.setMeta("__uniqueIDTransaction", true);
+
+          return tr;
+        },
+
+        // we register a global drag handler to track the current drag source element
+        view(view) {
+          const handleDragstart = (event: DragEvent) => {
+            dragSourceElement = view.dom.parentElement?.contains(
+              event.target as Element,
+            )
+              ? view.dom.parentElement
+              : null;
+          };
+
+          window.addEventListener("dragstart", handleDragstart);
+
+          return {
+            destroy() {
+              window.removeEventListener("dragstart", handleDragstart);
+            },
+          };
+        },
+
+        props: {
+          // `handleDOMEvents` is called before `transformPasted`
+          // so we can do some checks before
+          handleDOMEvents: {
+            // only create new ids for dropped content
+            // or dropped content while holding `alt`
+            // or content is dragged from another editor
+            drop: (view, event) => {
+              if (
+                dragSourceElement !== view.dom.parentElement ||
+                event.dataTransfer?.effectAllowed === "copyMove" ||
+                event.dataTransfer?.effectAllowed === "copy"
+              ) {
+                dragSourceElement = null;
+                transformPasted = true;
+              }
+
+              return false;
+            },
+            // always create new ids on pasted content
+            paste: () => {
+              transformPasted = true;
+
+              return false;
+            },
+          },
+
+          // we’ll remove ids for every pasted node
+          // so we can create a new one within `appendTransaction`
+          transformPasted: (slice) => {
+            if (!transformPasted) {
+              return slice;
+            }
+
+            const { types, attributeName } = this.options;
+            const removeId = (fragment: Fragment): Fragment => {
+              const list: ProseMirrorNode[] = [];
+
+              fragment.forEach((node) => {
+                // don’t touch text nodes
+                if (node.isText) {
+                  list.push(node);
+
+                  return;
+                }
+
+                // check for any other child nodes
+                if (!types.includes(node.type.name)) {
+                  list.push(node.copy(removeId(node.content)));
+
+                  return;
+                }
+
+                // remove id
+                const nodeWithoutId = node.type.create(
+                  {
+                    ...node.attrs,
+                    [attributeName]: null,
+                  },
+                  removeId(node.content),
+                  node.marks,
+                );
+
+                list.push(nodeWithoutId);
+              });
+
+              return Fragment.from(list);
+            };
+
+            // reset check
+            transformPasted = false;
+
+            return new Slice(
+              removeId(slice.content),
+              slice.openStart,
+              slice.openEnd,
+            );
+          },
+        },
+      }),
+    ];
+  },
+});

packages/editor-ext/src/lib/unique-id/unique-id.util.ts

@@ -0,0 +1,78 @@
+import type { Extensions, JSONContent } from "@tiptap/core";
+import { findChildren, getSchema } from "@tiptap/core";
+import { Node } from "@tiptap/pm/model";
+import { EditorState } from "@tiptap/pm/state";
+import type { UniqueID } from "./unique-id";
+
+/**
+ * Creates a new document with unique IDs added to the nodes. Does the same
+ * thing as the UniqueID extension, but without the need to create an `Editor`
+ * instance. This lets you add unique IDs to the document in the server.
+ *
+ * When you call it, include the `UniqueID` extension in the `extensions` array.
+ * The configuration from the `UniqueID` extension will be picked up
+ * automatically, including its configuration options like `types` and
+ * `attributeName`.
+ *
+ * @see `UniqueID` extension for more information.
+ *
+ * @throws {Error} If the `UniqueID` extension is not found in the extensions array.
+ *
+ * @example
+ * const doc = {
+ *   type: 'doc',
+ *   content: [
+ *     { type: 'paragraph', content: [{ type: 'text', text: 'Hello, world!' }] }
+ *   ]
+ * }
+ * const newDoc = addUniqueIds(doc, [StarterKit, UniqueID.configure({ types: ['paragraph', 'heading'] })])
+ * console.log(newDoc)
+ * // Result:
+ * // {
+ * //   type: 'doc',
+ * //   content: [
+ * //     { type: 'paragraph', content: [{ type: 'text', text: 'Hello, world!' }], id: '123' }
+ * //   ]
+ * // }
+ *
+ * @param doc - A Tiptap JSON document to add unique IDs to.
+ * @param extensions - The extensions to use. Must include the `UniqueID` extension.
+ * @returns The updated Tiptap JSON document, with the unique IDs added to the nodes.
+ */
+export function addUniqueIdsToDoc(
+  doc: JSONContent,
+  extensions: Extensions,
+): JSONContent {
+  // Find the UniqueID extension in the extensions array. If it's not found, throw an error.
+  const uniqueIDExtension = extensions.find(
+    (ext) => ext.name === "uniqueID",
+  ) as typeof UniqueID | undefined;
+  if (!uniqueIDExtension) {
+    throw new Error("UniqueID extension not found in the extensions array");
+  }
+  const { types, attributeName, generateID } = uniqueIDExtension.options;
+
+  // Convert the JSON content to a ProseMirror node
+  const schema = getSchema([
+    ...extensions.filter((ext) => ext.name !== "uniqueID"),
+    uniqueIDExtension,
+  ]);
+  const contentNode = Node.fromJSON(schema, doc);
+
+  // Find nodes that don't have a unique ID
+  const nodesWithoutId = findChildren(contentNode, (node) => {
+    return !node.attrs[attributeName] && types.includes(node.type.name);
+  });
+
+  // Edit the document to add unique IDs to the nodes that don't have a unique ID
+  let tr = EditorState.create({
+    doc: contentNode,
+  }).tr;
+  // eslint-disable-next-line no-restricted-syntax
+  for (const { node, pos } of nodesWithoutId) {
+    tr = tr.setNodeAttribute(pos, attributeName, generateID({ node, pos }));
+  }
+
+  // Return the updated document
+  return tr.doc.toJSON();
+}

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

@@ -5,6 +5,7 @@ import { CellSelection, TableMap } from "@tiptap/pm/tables";
 import { Node, ResolvedPos } from "@tiptap/pm/model";
 import Table from "@tiptap/extension-table";
 import { sanitizeUrl as braintreeSanitizeUrl } from "@braintree/sanitize-url";
+import { customAlphabet } from "nanoid";
 
 export const isRectSelected = (rect: any) => (selection: CellSelection) => {
   const map = TableMap.get(selection.$anchorCell.node(-1));
@@ -383,9 +384,12 @@ export function icon(name: string) {
 
 export function sanitizeUrl(url: string | undefined): string {
   if (!url) return "";
-  
+
   const sanitized = braintreeSanitizeUrl(url);
-  
+
   // Return empty string instead of "about:blank"
   return sanitized === "about:blank" ? "" : sanitized;
 }
+
+const alphabet = "abcdefghijklmnopqrstuvwxyz";
+export const generateNodeId = customAlphabet(alphabet, 12);