tiptap 3.17.1

fix history editor css
fix search shortcut
2026-05-07 14:43:06 +08:00 · 2026-01-24 19:45:37 +00:00 · 2026-01-24 19:07:55 +00:00 · 2026-01-24 18:43:45 +00:00 · 2026-01-24 17:59:57 +00:00 · 2026-01-24 17:54:56 +00:00
127 changed files with 4243 additions and 3532 deletions
@@ -1,5 +1,6 @@
 node_modules
 .git
-.gitignore
 dist
-data
+/data
+.env*
+.nx
@@ -46,4 +46,10 @@ DRAWIO_URL=
 DISABLE_TELEMETRY=false

 # Enable debug logging in production (default: false)
-DEBUG_MODE=false
+DEBUG_MODE=false
+
+# Log database queries
+DEBUG_DB=false
+
+# Log http requests
+LOG_HTTP=false
@@ -1,19 +1,22 @@
-FROM node:22-alpine AS base
+FROM node:22-slim AS base
 LABEL org.opencontainers.image.source="https://github.com/docmost/docmost"

+RUN npm install -g pnpm@10.4.0
+
 FROM base AS builder

 WORKDIR /app

 COPY . .

-RUN npm install -g pnpm@10.4.0
 RUN pnpm install --frozen-lockfile
 RUN pnpm build

 FROM base AS installer

-RUN apk add --no-cache curl bash
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends curl bash \
+  && rm -rf /var/lib/apt/lists/*

 WORKDIR /app

@@ -29,12 +32,11 @@ COPY --from=builder /app/packages/editor-ext/package.json /app/packages/editor-e
 # Copy root package files
 COPY --from=builder /app/package.json /app/package.json
 COPY --from=builder /app/pnpm*.yaml /app/
+COPY --from=builder /app/.npmrc /app/.npmrc

 # Copy patches
 COPY --from=builder /app/patches /app/patches

-RUN npm install -g pnpm@10.4.0
-
 RUN chown -R node:node /app

 USER node
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.24.0",
+  "version": "0.24.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -10,52 +10,49 @@
    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
  },
  "dependencies": {
-    "@casl/ability": "^6.7.2",
    "@casl/react": "^4.0.0",
    "@docmost/editor-ext": "workspace:*",
    "@emoji-mart/data": "^1.2.1",
    "@emoji-mart/react": "^1.1.1",
-    "@excalidraw/excalidraw": "0.18.0-864353b",
-    "@mantine/core": "^8.1.3",
-    "@mantine/dates": "^8.3.2",
-    "@mantine/form": "^8.1.3",
-    "@mantine/hooks": "^8.1.3",
-    "@mantine/modals": "^8.1.3",
-    "@mantine/notifications": "^8.1.3",
-    "@mantine/spotlight": "^8.1.3",
-    "@tabler/icons-react": "^3.34.0",
-    "@tanstack/react-query": "^5.80.6",
-    "@tiptap/extension-character-count": "^2.10.3",
+    "@excalidraw/excalidraw": "0.18.0-c158187",
+    "@mantine/core": "^8.3.12",
+    "@mantine/dates": "^8.3.12",
+    "@mantine/form": "^8.3.12",
+    "@mantine/hooks": "^8.3.12",
+    "@mantine/modals": "^8.3.12",
+    "@mantine/notifications": "^8.3.12",
+    "@mantine/spotlight": "^8.3.12",
+    "@tabler/icons-react": "^3.36.1",
+    "@tanstack/react-query": "^5.90.17",
    "alfaaz": "^1.1.0",
    "axios": "^1.13.2",
    "clsx": "^2.1.1",
    "emoji-mart": "^5.6.0",
    "file-saver": "^2.0.5",
    "highlightjs-sap-abap": "^0.3.0",
-    "i18next": "^23.14.0",
-    "i18next-http-backend": "^2.6.1",
-    "jotai": "^2.12.5",
+    "i18next": "^23.16.8",
+    "i18next-http-backend": "^2.7.3",
+    "jotai": "^2.16.2",
    "jotai-optics": "^0.4.0",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
-    "katex": "0.16.22",
+    "katex": "0.16.27",
    "lowlight": "^3.3.0",
    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "^11.11.0",
+    "mermaid": "^11.12.2",
    "mitt": "^3.0.1",
    "posthog-js": "^1.255.1",
    "react": "^18.3.1",
    "react-arborist": "3.4.0",
-    "react-clear-modal": "^2.0.15",
+    "react-clear-modal": "^2.0.17",
    "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.1",
+    "react-drawio": "^1.0.7",
    "react-error-boundary": "^4.1.2",
    "react-helmet-async": "^2.0.5",
    "react-i18next": "^15.0.1",
-    "react-router-dom": "^7.0.1",
-    "semver": "^7.7.2",
-    "socket.io-client": "^4.8.1",
-    "tippy.js": "^6.3.7",
+    "react-router-dom": "^7.12.0",
+    "semver": "^7.7.3",
+    "socket.io-client": "^4.8.3",
    "tiptap-extension-global-drag-handle": "^0.1.18",
    "zod": "^3.25.76"
  },
@@ -328,6 +328,8 @@
  "Upload any image from your device.": "Upload any image from your device.",
  "Upload any video from your device.": "Upload any video from your device.",
  "Upload any file from your device.": "Upload any file from your device.",
+  "Uploading {{name}}": "Uploading {{name}}",
+  "Uploading file": "Uploading file",
  "Table": "Table",
  "Insert a table.": "Insert a table.",
  "Insert collapsible block.": "Insert collapsible block.",
@@ -13,21 +13,21 @@
  "Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.": "このユーザをグループから削除してもよろしいですか? ユーザはこのグループがアクセス権を持つリソースにアクセスできなくなります。",
  "Are you sure you want to remove this user from the space? The user will lose all access to this space.": "このユーザをスペースから削除してもよろしいですか? ユーザはこのスペースへのアクセス権をすべて失います。",
  "Are you sure you want to restore this version? Any changes not versioned will be lost.": "このバージョンを復元してもよろしいですか? バージョン管理されていない変更は失われます。",
-  "Can become members of groups and spaces in workspace": "ワークスペース内のグループやスペースのメンバーになることができます",
-  "Can create and edit pages in space.": "スペース内のページを作成および編集できます。",
+  "Can become members of groups and spaces in workspace": "ワークスペース内のグループやスペースのメンバーになれます",
+  "Can create and edit pages in space.": "スペース内のページを作成・編集できます",
  "Can edit": "編集可能",
  "Can manage workspace": "ワークスペースを管理できます",
-  "Can manage workspace but cannot delete it": "ワークスペースを管理できますが、削除はできません",
+  "Can manage workspace but cannot delete it": "ワークスペースを管理できますが削除はできません",
  "Can view": "閲覧可能",
-  "Can view pages in space but not edit.": "スペース内のページを閲覧できますが、編集はできません。",
+  "Can view pages in space but not edit.": "スペース内のページを閲覧できますが編集はできません",
  "Cancel": "キャンセル",
  "Change email": "メールアドレスの変更",
  "Change password": "パスワードの変更",
  "Change photo": "画像の変更",
  "Choose a role": "ロールを選んでください",
-  "Choose your preferred color scheme.": "お好みのカラースキームを選択してください。",
-  "Choose your preferred interface language.": "お好みのインターフェース言語を選択してください。",
-  "Choose your preferred page width.": "左右の余白を縮小する場合はオンにしてください。",
+  "Choose your preferred color scheme.": "お好みのカラースキームを選択してください",
+  "Choose your preferred interface language.": "お好みの言語を選択してください",
+  "Choose your preferred page width.": "お好みのページ幅を選択してください",
  "Confirm": "確認",
  "Copy link": "リンクをコピー",
  "Create": "新規作成",
@@ -40,24 +40,24 @@
  "Date": "日付",
  "Delete": "削除",
  "Delete group": "グループを削除",
-  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "このページを削除してもよろしいですか？この操作により、子ページおよびページ履歴が削除されます。この操作は元に戻せません。",
+  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "このページを削除してもよろしいですか？子ページとページ履歴も削除されます。この操作は取り消せません。",
  "Description": "説明",
  "Details": "詳細",
  "e.g ACME": "例: 山田太郎",
  "e.g ACME Inc": "例: 株式会社サンプル",
  "e.g Developers": "例: エンジニア",
-  "e.g Group for developers": "例: エンジニアグループ",
+  "e.g Group for developers": "例: 開発チーム",
  "e.g product": "例: product",
-  "e.g Product Team": "例: 製品チーム",
-  "e.g Sales": "例: 営業",
-  "e.g Space for product team": "例: 製品チームのスペース",
-  "e.g Space for sales team to collaborate": "例: 営業チーム連携用スペース",
+  "e.g Product Team": "例: プロダクトチーム",
+  "e.g Sales": "例: 営業部",
+  "e.g Space for product team": "例: プロダクトチーム用スペース",
+  "e.g Space for sales team to collaborate": "例: 営業チーム用スペース",
  "Edit": "編集",
-  "Read": "読む",
+  "Read": "閲覧",
  "Edit group": "グループを編集",
  "Email": "メールアドレス",
  "Enter a strong password": "強力なパスワードを入力してください",
-  "Enter valid email addresses separated by comma or space max_50": "有効なメールアドレスをカンマまたはスペースで区切って入力してください（最大 50 個）",
+  "Enter valid email addresses separated by comma or space max_50": "メールアドレスをカンマまたはスペース区切りで入力（最大50件）",
  "enter valid emails addresses": "有効なメールアドレスを入力してください",
  "Enter your current password": "現在のパスワードを入力してください",
  "enter your full name": "氏名を入力してください",
@@ -81,18 +81,18 @@
  "Group description": "グループ説明",
  "Group name": "グループ名",
  "Groups": "グループ",
-  "Has full access to space settings and pages.": "スペース設定とページにフルアクセスできます。",
+  "Has full access to space settings and pages.": "スペース設定とページにフルアクセスできます",
  "Home": "ホーム",
  "Import pages": "ページをインポート",
  "Import pages & space settings": "ページとスペース設定をインポート",
  "Importing pages": "ページをインポートしています",
-  "invalid invitation link": "招待リンクが間違っています",
+  "invalid invitation link": "無効な招待リンクです",
  "Invitation signup": "招待登録",
  "Invite by email": "メールアドレスで招待する",
  "Invite members": "メンバーを招待する",
  "Invite new members": "新しいメンバーを招待する",
-  "Invited members who are yet to accept their invitation will appear here.": "招待をまだ承諾していないメンバーはここに表示されます。",
-  "Invited members will be granted access to spaces the groups can access": "招待されたメンバーは、グループがアクセスできるスペースにアクセス権が付与されます",
+  "Invited members who are yet to accept their invitation will appear here.": "招待を承諾していないメンバーがここに表示されます",
+  "Invited members will be granted access to spaces the groups can access": "招待されたメンバーはグループがアクセスできるスペースにアクセスできます",
  "Join the workspace": "ワークスペースに参加",
  "Language": "言語",
  "Light": "ライト",
@@ -113,20 +113,20 @@
  "New page": "新規ページ",
  "New password": "新しいパスワード",
  "No group found": "グループが見つかりません",
-  "No page history saved yet.": "まだページの履歴が保存されていません。",
+  "No page history saved yet.": "ページ履歴がありません",
  "No pages yet": "ページがありません",
-  "No results found...": "結果が見つかりませんでした...",
-  "No user found": "ユーザがいません",
+  "No results found...": "結果が見つかりません",
+  "No user found": "ユーザーが見つかりません",
  "Overview": "概要",
  "Owner": "所有者",
  "page": "ページ",
-  "Page deleted successfully": "ページが正常に削除されました",
-  "Page history": "ページの履歴",
-  "Page import is in progress. Please do not close this tab.": "ページのインポートが進行中です。このタブを閉じないでください。",
+  "Page deleted successfully": "ページを削除しました",
+  "Page history": "ページ履歴",
+  "Page import is in progress. Please do not close this tab.": "ページをインポート中です。このタブを閉じないでください",
  "Pages": "ページ",
  "pages": "ページ",
  "Password": "パスワード",
-  "Password changed successfully": "パスワードが正常に変更されました",
+  "Password changed successfully": "パスワードを変更しました",
  "Pending": "保留中",
  "Please confirm your action": "アクションを確認してください",
  "Preferences": "設定",
@@ -143,95 +143,95 @@
  "Search for groups": "グループを検索",
  "Search for users": "ユーザーを検索",
  "Search for users and groups": "ユーザーとグループを検索",
-  "Search...": "検索する語句を入力",
+  "Search...": "検索",
  "Select language": "言語を選択",
  "Select role": "ロールを選択",
-  "Select role to assign to all invited members": "招待されたすべてのメンバーに割り当てるロールを選択してください",
+  "Select role to assign to all invited members": "招待するメンバーに割り当てるロールを選択",
  "Select theme": "テーマを選択",
  "Send invitation": "招待を送る",
-  "Invitation sent": "招待が送信されました",
+  "Invitation sent": "招待を送信しました",
  "Settings": "設定",
  "Setup workspace": "ワークスペースを設定する",
  "Sign In": "サインイン",
-  "Sign Up": "アカウント登録",
-  "Slug": "Slug (URL用文字列)",
+  "Sign Up": "新規登録",
+  "Slug": "スラッグ（URL識別子）",
  "Space": "スペース",
  "Space description": "スペース説明",
  "Space menu": "スペースメニュー",
  "Space name": "スペース名",
  "Space settings": "スペース設定",
-  "Space slug": "スペースのSlug (URL用文字列)",
+  "Space slug": "スペースのスラッグ（URL識別子）",
  "Spaces": "スペース",
  "Spaces you belong to": "所属しているスペース",
  "No space found": "スペースが見つかりません",
  "Search for spaces": "スペースを検索",
-  "Start typing to search...": "検索を開始するには入力してください...",
+  "Start typing to search...": "入力して検索",
  "Status": "ステータス",
-  "Successfully imported": "インポートに成功しました",
-  "Successfully restored": "正常に復元されました",
+  "Successfully imported": "インポートしました",
+  "Successfully restored": "復元しました",
  "System settings": "システム設定",
  "Theme": "テーマ",
-  "To change your email, you have to enter your password and new email.": "メールアドレスを変更するには、パスワードと新しいメールアドレスを入力する必要があります。",
-  "Toggle full page width": "ページ幅を切り替える",
-  "Unable to import pages. Please try again.": "ページをインポートできません。もう一度お試しください。",
+  "To change your email, you have to enter your password and new email.": "メールアドレスを変更するには、パスワードと新しいメールアドレスを入力してください",
+  "Toggle full page width": "ページ幅を切り替え",
+  "Unable to import pages. Please try again.": "ページをインポートできませんでした。もう一度お試しください",
  "untitled": "無題",
  "Untitled": "無題",
-  "Updated successfully": "正常に更新されました",
+  "Updated successfully": "更新しました",
  "User": "ユーザー",
  "Workspace": "ワークスペース",
  "Workspace Name": "ワークスペース名",
  "Workspace settings": "ワークスペース設定",
-  "You can change your password here.": "パスワードを変更できます。",
+  "You can change your password here.": "パスワードを変更できます",
  "Your Email": "メールアドレス",
-  "Your import is complete.": "インポートが完了しました。",
+  "Your import is complete.": "インポートが完了しました",
  "Your name": "名前",
  "Your Name": "名前",
  "Your password": "パスワード",
-  "Your password must be a minimum of 8 characters.": "パスワードは最低 8 文字必要です。",
+  "Your password must be a minimum of 8 characters.": "パスワードは8文字以上にしてください",
  "Sidebar toggle": "サイドバー切り替え",
  "Comments": "コメント",
  "404 page not found": "404 ページが見つかりません",
-  "Sorry, we can't find the page you are looking for.": "お探しのページが見つかりません。",
+  "Sorry, we can't find the page you are looking for.": "お探しのページが見つかりません",
  "Take me back to homepage": "ホームに戻る",
  "Forgot password": "パスワードを忘れた",
  "Forgot your password?": "パスワードを忘れましたか?",
-  "A password reset link has been sent to your email. Please check your inbox.": "パスワードリセットリンクがあなたのメールアドレスに送信されました。受信箱を確認してください。",
-  "Send reset link": "リセットリンクを送る",
+  "A password reset link has been sent to your email. Please check your inbox.": "パスワードリセット用のリンクをメールに送信しました。受信トレイを確認してください",
+  "Send reset link": "リセットリンクを送信",
  "Password reset": "パスワードリセット",
  "Your new password": "新しいパスワード",
  "Set password": "パスワードを設定",
  "Write a comment": "コメントを書く",
  "Reply...": "返信...",
-  "Error loading comments.": "コメントの読み込み中にエラーが発生しました。",
-  "No comments yet.": "コメントがありません。",
+  "Error loading comments.": "コメントの読み込みに失敗しました",
+  "No comments yet.": "コメントがありません",
  "Edit comment": "コメントを編集する",
  "Delete comment": "コメントを削除する",
  "Are you sure you want to delete this comment?": "このコメントを削除してもよろしいですか?",
-  "Comment created successfully": "コメントが作成されました",
-  "Error creating comment": "コメントの作成中にエラーが発生しました",
-  "Comment updated successfully": "コメントが更新されました",
+  "Comment created successfully": "コメントを作成しました",
+  "Error creating comment": "コメントの作成に失敗しました",
+  "Comment updated successfully": "コメントを更新しました",
  "Failed to update comment": "コメントの更新に失敗しました",
-  "Comment deleted successfully": "コメントが削除されました",
+  "Comment deleted successfully": "コメントを削除しました",
  "Failed to delete comment": "コメントの削除に失敗しました",
-  "Comment resolved successfully": "コメントが解決されました",
-  "Comment re-opened successfully": "コメントが再開されました",
-  "Comment unresolved successfully": "コメントが再解決されました",
+  "Comment resolved successfully": "コメントを解決しました",
+  "Comment re-opened successfully": "コメントを再開しました",
+  "Comment unresolved successfully": "コメントを未解決に戻しました",
  "Failed to resolve comment": "コメントの解決に失敗しました",
  "Resolve comment": "コメントを解決",
-  "Unresolve comment": "コメントを再解決",
+  "Unresolve comment": "コメントを未解決に戻す",
  "Resolve Comment Thread": "コメントスレッドを解決",
-  "Unresolve Comment Thread": "コメントスレッドを再解決",
-  "Are you sure you want to resolve this comment thread? This will mark it as completed.": "このコメントスレッドを解決しますか? これにより完了としてマークされます。",
-  "Are you sure you want to unresolve this comment thread?": "このコメントスレッドを再解決しますか?",
+  "Unresolve Comment Thread": "コメントスレッドを未解決に戻す",
+  "Are you sure you want to resolve this comment thread? This will mark it as completed.": "このコメントスレッドを解決しますか？完了としてマークされます",
+  "Are you sure you want to unresolve this comment thread?": "このコメントスレッドを未解決に戻しますか?",
  "Resolved": "解決済",
-  "No active comments.": "アクティブなコメントはありません。",
-  "No resolved comments.": "解決されたコメントはありません。",
+  "No active comments.": "アクティブなコメントはありません",
+  "No resolved comments.": "解決済みのコメントはありません",
  "Revoke invitation": "招待を取り消す",
  "Revoke": "取り消す",
  "Don't": "取り消さない",
-  "Are you sure you want to revoke this invitation? The user will not be able to join the workspace.": "この招待を取り消してもよろしいですか? ユーザはワークスペースに参加できなくなります。",
+  "Are you sure you want to revoke this invitation? The user will not be able to join the workspace.": "この招待を取り消してもよろしいですか？ユーザーはワークスペースに参加できなくなります",
  "Resend invitation": "招待を再度送る",
-  "Anyone with this link can join this workspace.": "このリンクを持っている人は誰でもこのワークスペースに参加できます。",
+  "Anyone with this link can join this workspace.": "このリンクを知っている人は誰でもワークスペースに参加できます",
  "Invite link": "招待リンク",
  "Copy": "コピー",
  "Copy to space": "スペースにコピー",
@@ -239,13 +239,13 @@
  "Duplicate": "複製",
  "Select a user": "ユーザを選択",
  "Select a group": "グループを選択",
-  "Export all pages and attachments in this space.": "このスペースのすべてのページと添付ファイルをエクスポートします。",
+  "Export all pages and attachments in this space.": "このスペースのすべてのページと添付ファイルをエクスポートします",
  "Delete space": "スペースを削除",
  "Are you sure you want to delete this space?": "このスペースを削除してもよろしいですか？",
-  "Delete this space with all its pages and data.": "このスペースおよびスペース内のすべてのページとデータを削除します。",
-  "All pages, comments, attachments and permissions in this space will be deleted irreversibly.": "このスペース内のすべてのページ、コメント、添付ファイル、および権限は完全に削除されます。",
+  "Delete this space with all its pages and data.": "このスペースとすべてのページ、データを削除します",
+  "All pages, comments, attachments and permissions in this space will be deleted irreversibly.": "スペース内のすべてのページ、コメント、添付ファイル、権限が完全に削除されます",
  "Confirm space name": "スペース名を確認する",
-  "Type the space name <b>{{spaceName}}</b> to confirm your action.": "アクションを確認するためにスペース名 <b>{{spaceName}}</b> を入力してください。",
+  "Type the space name <b>{{spaceName}}</b> to confirm your action.": "確認のためスペース名 <b>{{spaceName}}</b> を入力してください",
  "Format": "フォーマット",
  "Include subpages": "サブページを含める",
  "Include attachments": "添付ファイルを含める",
@@ -273,12 +273,12 @@
  "Success": "成功",
  "Warning": "警告",
  "Danger": "危険",
-  "Mermaid diagram error:": "Mermaid コードエラー",
-  "Invalid Mermaid diagram": "無効な Mermaid コードです",
-  "Double-click to edit Draw.io diagram": "ダブルクリックしてDraw.ioの図を編集",
+  "Mermaid diagram error:": "Mermaid ダイアグラムエラー:",
+  "Invalid Mermaid diagram": "無効な Mermaid ダイアグラムです",
+  "Double-click to edit Draw.io diagram": "ダブルクリックして Draw.io 図を編集",
  "Exit": "終了",
  "Save & Exit": "保存して終了",
-  "Double-click to edit Excalidraw diagram": "ダブルクリックしてExcalidraw図を編集",
+  "Double-click to edit Excalidraw diagram": "ダブルクリックして Excalidraw 図を編集",
  "Paste link": "リンクを貼り付け",
  "Edit link": "リンクを編集",
  "Remove link": "リンクを削除",
@@ -315,22 +315,22 @@
  "Bullet List": "箇条書きリスト",
  "Numbered List": "番号付きリスト",
  "Blockquote": "引用",
-  "Just start typing with plain text.": "すぐに文章を書き始められます。",
-  "Track tasks with a to-do list.": "Todoリストでタスクを追跡します。",
-  "Big section heading.": "大きいフォントのセクション見出しです。",
-  "Medium section heading.": "中くらいのフォントのセクション見出しです。",
-  "Small section heading.": "小さいフォントのセクション見出しです。",
-  "Create a simple bullet list.": "シンプルな箇条書きのリストを作成します。",
-  "Create a list with numbering.": "番号付きのリストを作成します。",
-  "Create block quote.": "引用文を作成します。",
-  "Insert code snippet.": "コードスニペットを入力します。",
-  "Insert horizontal rule divider": "水平線を挿入します。",
-  "Upload any image from your device.": "画像をアップロードします。",
-  "Upload any video from your device.": "動画をアップロードします。",
-  "Upload any file from your device.": "ファイルをアップロードします。",
+  "Just start typing with plain text.": "プレーンテキストを入力します",
+  "Track tasks with a to-do list.": "Todo リストでタスクを管理します",
+  "Big section heading.": "大見出し",
+  "Medium section heading.": "中見出し",
+  "Small section heading.": "小見出し",
+  "Create a simple bullet list.": "箇条書きリストを作成します",
+  "Create a list with numbering.": "番号付きリストを作成します",
+  "Create block quote.": "引用ブロックを作成します",
+  "Insert code snippet.": "コードスニペットを挿入します",
+  "Insert horizontal rule divider": "区切り線を挿入します",
+  "Upload any image from your device.": "デバイスから画像をアップロードします",
+  "Upload any video from your device.": "デバイスから動画をアップロードします",
+  "Upload any file from your device.": "デバイスからファイルをアップロードします",
  "Table": "テーブル",
-  "Insert a table.": "表を挿入します。",
-  "Insert collapsible block.": "折りたたみ可能なブロックを挿入します。",
+  "Insert a table.": "テーブルを挿入します",
+  "Insert collapsible block.": "折りたたみブロックを挿入します",
  "Video": "動画",
  "Divider": "区切り線",
  "Quote": "引用",
@@ -338,16 +338,16 @@
  "File attachment": "ファイル添付",
  "Toggle block": "ブロックを切り替える",
  "Callout": "コールアウト",
-  "Insert callout notice.": "コールアウトブロックを挿入します。",
+  "Insert callout notice.": "コールアウトを挿入します",
  "Math inline": "インライン数式",
-  "Insert inline math equation.": "インライン数式を挿入します。",
+  "Insert inline math equation.": "インライン数式を挿入します",
  "Math block": "数式ブロック",
  "Insert math equation": "数式を挿入します",
-  "Mermaid diagram": "Mermaidコード",
-  "Insert mermaid diagram": "Mermaidコードを記述して図を挿入します",
-  "Insert and design Drawio diagrams": "Drawioの図を挿入してデザインします",
-  "Insert current date": "今日の日付を挿入します",
-  "Draw and sketch excalidraw diagrams": "Excalidrawの図を埋め込みます",
+  "Mermaid diagram": "Mermaid ダイアグラム",
+  "Insert mermaid diagram": "Mermaid ダイアグラムを挿入します",
+  "Insert and design Drawio diagrams": "Draw.io 図を挿入・編集します",
+  "Insert current date": "現在の日付を挿入します",
+  "Draw and sketch excalidraw diagrams": "Excalidraw 図を挿入します",
  "Multiple": "複数",
  "Heading {{level}}": "見出し {{level}}",
  "Toggle title": "タイトルの表示/非表示を切り替える",
@@ -357,29 +357,29 @@
  "Yesterday, {{time}}": "昨日、{{time}}",
  "Space created successfully": "スペースを作成しました",
  "Space updated successfully": "スペースを更新しました",
-  "Space deleted successfully": "スペースが削除されました",
+  "Space deleted successfully": "スペースを削除しました",
  "Members added successfully": "メンバーを追加しました",
-  "Member removed successfully": "メンバーが削除されました",
+  "Member removed successfully": "メンバーを削除しました",
  "Member role updated successfully": "メンバーのロールを更新しました",
  "Created by: <b>{{creatorName}}</b>": "作成者: <b>{{creatorName}}</b>",
-  "Created at: {{time}}": "が作成しました：{{time}}",
+  "Created at: {{time}}": "作成日: {{time}}",
  "Edited by {{name}} {{time}}": "最終編集: {{name}} {{time}}",
-  "Word count: {{wordCount}}": "ワード数: {{wordCount}}",
+  "Word count: {{wordCount}}": "単語数: {{wordCount}}",
  "Character count: {{characterCount}}": "文字数: {{characterCount}}",
  "New update": "新規更新",
-  "{{latestVersion}} is available": "{{latestVersion}}は利用可能です",
+  "{{latestVersion}} is available": "{{latestVersion}} が利用可能です",
  "Default page edit mode": "デフォルトのページ編集モード",
-  "Choose your preferred page edit mode. Avoid accidental edits.": "希望のページ編集モードを選択してください。誤って編集を防ぎます。",
+  "Choose your preferred page edit mode. Avoid accidental edits.": "お好みのページ編集モードを選択してください（誤編集を防止します）",
  "Reading": "読み取り",
  "Delete member": "メンバーを削除する",
-  "Member deleted successfully": "メンバーが削除されました",
-  "Are you sure you want to delete this workspace member? This action is irreversible.": "ワークスペースメンバーを削除してもよろしいですか？この操作は元に戻せません。",
+  "Member deleted successfully": "メンバーを削除しました",
+  "Are you sure you want to delete this workspace member? This action is irreversible.": "このメンバーを削除してもよろしいですか？この操作は取り消せません",
  "Move": "移動",
  "Move page": "ページを移動",
-  "Move page to a different space.": "ページを別のスペースに移動します。",
-  "Real-time editor connection lost. Retrying...": "リアルタイムエディターの接続が失われました。再試行しています…",
+  "Move page to a different space.": "ページを別のスペースに移動します",
+  "Real-time editor connection lost. Retrying...": "リアルタイム編集の接続が切断されました。再接続中...",
  "Table of contents": "目次",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "見出し（H1、H2、H3）を追加して目次を生成します。",
+  "Add headings (H1, H2, H3) to generate a table of contents.": "見出し（H1、H2、H3）を追加すると目次が生成されます",
  "Share": "共有",
  "Public sharing": "公開共有",
  "Shared by": "共有者",
@@ -398,13 +398,13 @@
  "Delete share": "共有を削除",
  "Are you sure you want to delete this shared link?": "この共有リンクを削除してもよろしいですか?",
  "Publicly shared pages from spaces you are a member of will appear here": "メンバーであるスペースからの公開ページがここに表示されます",
-  "Share deleted successfully": "共有が正常に削除されました",
+  "Share deleted successfully": "共有を削除しました",
  "Share not found": "共有が見つかりません",
  "Failed to share page": "ページの共有に失敗しました",
  "Copy page": "ページをコピー",
-  "Copy page to a different space.": "ページを別のスペースにコピーします。",
-  "Page copied successfully": "ページのコピーに成功しました",
-  "Page duplicated successfully": "ページが正常に複製されました",
+  "Copy page to a different space.": "ページを別のスペースにコピーします",
+  "Page copied successfully": "ページをコピーしました",
+  "Page duplicated successfully": "ページを複製しました",
  "Find": "検索",
  "Not found": "見つかりません",
  "Previous Match (Shift+Enter)": "前の一致 (Shift+Enter)",
@@ -419,26 +419,26 @@
  "Error": "エラー",
  "Failed to disable MFA": "MFAの無効化に失敗しました",
  "Disable two-factor authentication": "二要素認証を無効化",
-  "Disabling two-factor authentication will make your account less secure. You'll only need your password to sign in.": "二要素認証を無効化すると、アカウントのセキュリティが低下します。サインインにはパスワードのみが必要になります。",
-  "Please enter your password to disable two-factor authentication:": "二要素認証を無効化するにはパスワードを入力してください:",
-  "Two-factor authentication has been enabled": "二要素認証が有効になりました",
-  "Two-factor authentication has been disabled": "二要素認証が無効になりました",
-  "2-step verification": "2段階確認",
-  "Protect your account with an additional verification layer when signing in.": "サインイン時に追加の認証レイヤーでアカウントを保護します。",
-  "Two-factor authentication is active on your account.": "二要素認証がアカウントで有効です。",
+  "Disabling two-factor authentication will make your account less secure. You'll only need your password to sign in.": "二要素認証を無効にすると、アカウントのセキュリティが低下します。サインインにはパスワードのみが必要になります",
+  "Please enter your password to disable two-factor authentication:": "二要素認証を無効にするにはパスワードを入力してください",
+  "Two-factor authentication has been enabled": "二要素認証を有効にしました",
+  "Two-factor authentication has been disabled": "二要素認証を無効にしました",
+  "2-step verification": "2段階認証",
+  "Protect your account with an additional verification layer when signing in.": "サインイン時に追加の認証でアカウントを保護します",
+  "Two-factor authentication is active on your account.": "二要素認証が有効です",
  "Add 2FA method": "2FAメソッドを追加",
  "Backup codes": "バックアップコード",
  "Disable": "無効にする",
  "Invalid verification code": "無効な認証コード",
-  "New backup codes have been generated": "新しいバックアップコードが生成されました",
+  "New backup codes have been generated": "新しいバックアップコードを生成しました",
  "Failed to regenerate backup codes": "バックアップコードの再生成に失敗しました",
  "About backup codes": "バックアップコードについて",
-  "Backup codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "バックアップコードは、認証アプリへのアクセスを失った場合にアカウントにアクセスするために使用できます。各コードは一度しか使用できません。",
-  "You can regenerate new backup codes at any time. This will invalidate all existing codes.": "いつでも新しいバックアップコードを再生成できます。これにより、既存のすべてのコードが無効になります。",
+  "Backup codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "認証アプリにアクセスできない場合、バックアップコードでアカウントにアクセスできます。各コードは1回のみ使用可能です",
+  "You can regenerate new backup codes at any time. This will invalidate all existing codes.": "新しいバックアップコードはいつでも再生成できます。既存のコードはすべて無効になります",
  "Confirm password": "パスワードを確認",
  "Generate new backup codes": "新しいバックアップコードを生成",
  "Save your new backup codes": "新しいバックアップコードを保存",
-  "Make sure to save these codes in a secure place. Your old backup codes are no longer valid.": "これらのコードを安全な場所に保存してください。古いバックアップコードは無効です。",
+  "Make sure to save these codes in a secure place. Your old backup codes are no longer valid.": "これらのコードを安全な場所に保存してください。古いバックアップコードは無効になりました",
  "Your new backup codes": "新しいバックアップコード",
  "I've saved my backup codes": "バックアップコードを保存しました",
  "Failed to setup MFA": "MFAの設定に失敗しました",
@@ -449,51 +449,51 @@
  "Enter this code manually in your authenticator app:": "このコードを認証アプリに手動で入力してください:",
  "2. Enter the 6-digit code from your authenticator": "2. 認証アプリからの6桁のコードを入力してください",
  "Verify and enable": "確認と有効化",
-  "Failed to generate QR code. Please try again.": "QRコードの生成に失敗しました。再試行してください。",
+  "Failed to generate QR code. Please try again.": "QRコードの生成に失敗しました。もう一度お試しください",
  "Backup": "バックアップ",
  "Save codes": "コードを保存",
  "Save your backup codes": "バックアップコードを保存",
-  "These codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "これらのコードは、認証アプリへのアクセスを失った場合にアカウントにアクセスするために使用できます。各コードは一度しか使用できません。",
+  "These codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "認証アプリにアクセスできない場合、これらのコードでアカウントにアクセスできます。各コードは1回のみ使用可能です",
  "Print": "印刷",
-  "Two-factor authentication has been set up. Please log in again.": "二要素認証が設定されました。再度ログインしてください。",
+  "Two-factor authentication has been set up. Please log in again.": "二要素認証を設定しました。再度ログインしてください",
  "Two-Factor authentication required": "二要素認証が必要です",
-  "Your workspace requires two-factor authentication for all users": "ワークスペースでは、すべてのユーザーに二要素認証が必要です",
-  "To continue accessing your workspace, you must set up two-factor authentication. This adds an extra layer of security to your account.": "ワークスペースへのアクセスを続けるには、二要素認証を設定する必要があります。これにより、アカウントに追加のセキュリティ層が追加されます。",
+  "Your workspace requires two-factor authentication for all users": "このワークスペースではすべてのユーザーに二要素認証が必要です",
+  "To continue accessing your workspace, you must set up two-factor authentication. This adds an extra layer of security to your account.": "ワークスペースにアクセスするには二要素認証を設定してください。アカウントのセキュリティが強化されます",
  "Set up two-factor authentication": "二要素認証を設定",
  "Cancel and logout": "キャンセルしてログアウト",
-  "Your workspace requires two-factor authentication. Please set it up to continue.": "ワークスペースでは二要素認証が必要です。続行するには設定してください。",
-  "This adds an extra layer of security to your account by requiring a verification code from your authenticator app.": "これにより、認証アプリからの確認コードが必要となり、アカウントに追加のセキュリティ層が追加されます。",
+  "Your workspace requires two-factor authentication. Please set it up to continue.": "このワークスペースでは二要素認証が必要です。続行するには設定してください",
+  "This adds an extra layer of security to your account by requiring a verification code from your authenticator app.": "認証アプリからの確認コードでアカウントのセキュリティが強化されます",
  "Password is required": "パスワードが必要です",
  "Password must be at least 8 characters": "パスワードは8文字以上必要です",
  "Please enter a 6-digit code": "6桁のコードを入力してください",
-  "Code must be exactly 6 digits": "コードは正確に6桁である必要があります",
+  "Code must be exactly 6 digits": "コードは6桁で入力してください",
  "Enter the 6-digit code found in your authenticator app": "認証アプリに表示された6桁のコードを入力してください",
  "Need help authenticating?": "認証に関するヘルプが必要ですか?",
  "MFA QR Code": "MFA QRコード",
-  "Account created successfully. Please log in to set up two-factor authentication.": "アカウントが正常に作成されました。二要素認証を設定するためにログインしてください。",
-  "Password reset successful. Please log in with your new password and complete two-factor authentication.": "パスワードのリセットが成功しました。新しいパスワードでログインし、二要素認証を完了してください。",
-  "Password reset successful. Please log in with your new password to set up two-factor authentication.": "パスワードのリセットが成功しました。二要素認証を設定するために新しいパスワードでログインしてください。",
-  "Password reset was successful. Please log in with your new password.": "パスワードのリセットが成功しました。新しいパスワードでログインしてください。",
+  "Account created successfully. Please log in to set up two-factor authentication.": "アカウントを作成しました。二要素認証を設定するためにログインしてください",
+  "Password reset successful. Please log in with your new password and complete two-factor authentication.": "パスワードをリセットしました。新しいパスワードでログインして二要素認証を完了してください",
+  "Password reset successful. Please log in with your new password to set up two-factor authentication.": "パスワードをリセットしました。新しいパスワードでログインして二要素認証を設定してください",
+  "Password reset was successful. Please log in with your new password.": "パスワードをリセットしました。新しいパスワードでログインしてください",
  "Two-factor authentication": "二要素認証",
  "Use authenticator app instead": "代わりに認証アプリを使用",
  "Verify backup code": "バックアップコードを確認",
  "Use backup code": "バックアップコードを使用",
  "Enter one of your backup codes": "バックアップコードのいずれかを入力してください",
  "Backup code": "バックアップコード",
-  "Enter one of your backup codes. Each backup code can only be used once.": "バックアップコードのいずれかを入力してください。各バックアップコードは一度しか使用できません。",
+  "Enter one of your backup codes. Each backup code can only be used once.": "バックアップコードを入力してください。各コードは1回のみ使用可能です",
  "Verify": "確認",
  "Trash": "ごみ箱",
-  "Pages in trash will be permanently deleted after 30 days.": "ごみ箱内のページは30日後に完全に削除されます。",
+  "Pages in trash will be permanently deleted after 30 days.": "ごみ箱内のページは30日後に完全に削除されます",
  "Deleted": "削除",
  "No pages in trash": "ごみ箱にページがありません",
  "Permanently delete page?": "ページを完全に削除しますか?",
-  "Are you sure you want to permanently delete '{{title}}'? This action cannot be undone.": "{{title}}』を完全に削除しますか? この操作は元に戻せません。",
-  "Restore '{{title}}' and its sub-pages?": "{{title}}』とそのサブページを復元しますか?",
+  "Are you sure you want to permanently delete '{{title}}'? This action cannot be undone.": "「{{title}}」を完全に削除しますか？この操作は取り消せません",
+  "Restore '{{title}}' and its sub-pages?": "「{{title}}」とそのサブページを復元しますか?",
  "Move to trash": "ごみ箱に移動",
  "Move this page to trash?": "このページをごみ箱に移動しますか?",
  "Restore page": "ページを復元",
-  "Page moved to trash": "ページがごみ箱に移動されました",
-  "Page restored successfully": "ページが正常に復元されました",
+  "Page moved to trash": "ページをごみ箱に移動しました",
+  "Page restored successfully": "ページを復元しました",
  "Deleted by": "削除者",
  "Deleted at": "削除日時",
  "Preview": "プレビュー",
@@ -511,10 +511,10 @@
  "Enterprise": "エンタープライズ",
  "Download attachment": "添付ファイルをダウンロード",
  "Allowed email domains": "許可されたメールドメイン",
-  "Only users with email addresses from these domains can signup via SSO.": "これらのドメインからのメールアドレスを持つユーザーのみがSSOで登録できます。",
+  "Only users with email addresses from these domains can signup via SSO.": "これらのドメインのメールアドレスを持つユーザーのみSSO経由で登録できます",
  "Enter valid domain names separated by comma or space": "コンマまたはスペースで区切って有効なドメイン名を入力してください",
  "Enforce two-factor authentication": "二要素認証を強制する",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "一度強制されると、すべてのメンバーはワークスペースにアクセスするために二要素認証を有効にする必要があります。",
+  "Once enforced, all members must enable two-factor authentication to access the workspace.": "有効にすると、すべてのメンバーが二要素認証を設定しないとワークスペースにアクセスできなくなります",
  "Toggle MFA enforcement": "MFAの強制を切り替える",
  "Display name": "表示名",
  "Allow signup": "登録を許可する",
@@ -532,10 +532,10 @@
  "Upload image": "画像をアップロード",
  "Remove image": "画像を削除",
  "Failed to remove image": "画像の削除に失敗しました",
-  "Image exceeds 10MB limit.": "画像が10MBの制限を超えています。",
-  "Image removed successfully": "画像が正常に削除されました",
+  "Image exceeds 10MB limit.": "画像が10MBの制限を超えています",
+  "Image removed successfully": "画像を削除しました",
  "API key": "APIキー",
-  "API key created successfully": "APIキーが正常に作成されました",
+  "API key created successfully": "APIキーを作成しました",
  "API keys": "APIキー",
  "API management": "API管理",
  "Are you sure you want to revoke this API key": "このAPIキーを無効にしてもよろしいですか",
@@ -550,9 +550,9 @@
  "No API keys found": "APIキーが見つかりません",
  "No expiration": "期限なし",
  "Revoke API key": "APIキーを無効にする",
-  "Revoked successfully": "正常に無効化されました",
+  "Revoked successfully": "無効にしました",
  "Select expiration date": "有効期限を選択してください",
-  "This action cannot be undone. Any applications using this API key will stop working.": "この操作は元に戻せません。このAPIキーを使用しているアプリケーションは動作を停止します。",
+  "This action cannot be undone. Any applications using this API key will stop working.": "この操作は取り消せません。このAPIキーを使用しているアプリケーションは動作しなくなります",
  "Update API key": "APIキーを更新",
  "Manage API keys for all users in the workspace": "ワークスペース内のすべてのユーザーのAPIキーを管理",
  "AI settings": "AI設定",
@@ -562,7 +562,7 @@
  "AI is thinking...": "AIが考え中...",
  "Ask a question...": "質問を入力...",
  "AI-powered search (Ask AI)": "AIによる検索（AIに質問）",
-  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI検索はベクター埋め込みを使用して、ワークスペースコンテンツ全体にわたって意味検索機能を提供します。",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI検索はベクター埋め込みを使用してワークスペース全体の意味検索を実現します",
  "Toggle AI search": "AI検索を切り替え",
  "Sources": "ソース",
  "Ask AI not available for attachments": "添付ファイルにはAI質問は利用できません",
@@ -5,26 +5,27 @@ import {
  Badge,
  Table,
  ActionIcon,
-} from '@mantine/core';
-import {Link} from 'react-router-dom';
-import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
-import { buildPageUrl } from '@/features/page/page.utils.ts';
-import { formattedDate } from '@/lib/time.ts';
-import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
-import { IconFileDescription } from '@tabler/icons-react';
-import { getSpaceUrl } from '@/lib/config.ts';
+} from "@mantine/core";
+import { Link } from "react-router-dom";
+import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { formattedDate } from "@/lib/time.ts";
+import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
+import { IconFileDescription } from "@tabler/icons-react";
+import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
+import { getInitialsColor } from "@/lib/get-initials-color.ts";

 interface Props {
  spaceId?: string;
 }

-export default function RecentChanges({spaceId}: Props) {
+export default function RecentChanges({ spaceId }: Props) {
  const { t } = useTranslation();
-  const {data: pages, isLoading, isError} = useRecentChangesQuery(spaceId);
+  const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);

  if (isLoading) {
-    return <PageListSkeleton/>;
+    return <PageListSkeleton />;
  }

  if (isError) {
@@ -44,8 +45,8 @@ export default function RecentChanges({spaceId}: Props) {
                >
                  <Group wrap="nowrap">
                    {page.icon || (
-                      <ActionIcon variant='transparent' color='gray' size={18}>
-                        <IconFileDescription size={18}/>
+                      <ActionIcon variant="transparent" color="gray" size={18}>
+                        <IconFileDescription size={18} />
                      </ActionIcon>
                    )}

@@ -58,18 +59,23 @@ export default function RecentChanges({spaceId}: Props) {
              {!spaceId && (
                <Table.Td>
                  <Badge
-                    color="blue"
+                    color={getInitialsColor(page?.space.name)}
                    variant="light"
                    component={Link}
                    to={getSpaceUrl(page?.space.slug)}
-                    style={{cursor: 'pointer'}}
+                    style={{ cursor: "pointer" }}
                  >
                    {page?.space.name}
                  </Badge>
                </Table.Td>
              )}
              <Table.Td>
-                <Text c="dimmed" style={{whiteSpace: 'nowrap'}} size="xs" fw={500}>
+                <Text
+                  c="dimmed"
+                  style={{ whiteSpace: "nowrap" }}
+                  size="xs"
+                  fw={500}
+                >
                  {formattedDate(page.updatedAt)}
                </Text>
              </Table.Td>
@@ -0,0 +1,49 @@
+import { useRef, useState, ReactNode } from "react";
+import { Text, TextProps, Tooltip } from "@mantine/core";
+
+type AutoTooltipTextProps = TextProps & {
+  children: ReactNode;
+  tooltipLabel?: string;
+  tooltipProps?: Omit<
+    React.ComponentProps<typeof Tooltip>,
+    "children" | "label"
+  >;
+};
+
+export function AutoTooltipText({
+  children,
+  tooltipLabel,
+  tooltipProps,
+  ...textProps
+}: AutoTooltipTextProps) {
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const handleMouseEnter = () => {
+    const element = textRef.current;
+    if (element) {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    }
+  };
+
+  const label = tooltipLabel ?? (typeof children === "string" ? children : "");
+
+  return (
+    <Tooltip
+      label={label}
+      disabled={!isTruncated || !label}
+      multiline
+      withArrow
+      {...tooltipProps}
+    >
+      <Text
+        ref={textRef}
+        truncate
+        onMouseEnter={handleMouseEnter}
+        {...textProps}
+      >
+        {children}
+      </Text>
+    </Tooltip>
+  );
+}
@@ -37,14 +37,18 @@ export async function askAi(

  let answer = "";
  let sources: any[] = [];
+  let buffer = "";

  if (reader) {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

-      const chunk = decoder.decode(value);
-      const lines = chunk.split("\n");
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+
+      // Keep the last incomplete line in the buffer
+      buffer = lines.pop() || "";

      for (const line of lines) {
        if (line.startsWith("data: ")) {
@@ -1,11 +1,13 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { Group, Text, Paper, ActionIcon } from "@mantine/core";
+import { Group, Text, Paper, ActionIcon, Loader } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
 import { IconDownload, IconPaperclip } from "@tabler/icons-react";
 import { useHover } from "@mantine/hooks";
 import { formatBytes } from "@/lib";
+import { useTranslation } from "react-i18next";

 export default function AttachmentView(props: NodeViewProps) {
+  const { t } = useTranslation();
  const { node, selected } = props;
  const { url, name, size } = node.attrs;
  const { hovered, ref } = useHover();
@@ -20,26 +22,28 @@ export default function AttachmentView(props: NodeViewProps) {
          wrap="nowrap"
          h={25}
        >
-          <Group justify="space-between" wrap="nowrap">
-            <IconPaperclip size={20} />
+          <Group wrap="nowrap" gap="sm" style={{ minWidth: 0, flex: 1 }}>
+            {url ? (
+              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
+            ) : (
+              <Loader size={20} style={{ flexShrink: 0 }} />
+            )}

-            <Text component="span" size="md" truncate="end">
-              {name}
+            <Text component="span" size="md" truncate="end" style={{ minWidth: 0 }}>
+              {url ? name : t("Uploading {{name}}", { name })}
            </Text>

-            <Text component="span" size="sm" c="dimmed" inline>
+            <Text component="span" size="sm" c="dimmed" style={{ flexShrink: 0 }}>
              {formatBytes(size)}
            </Text>
          </Group>

-          {selected || hovered ? (
+          {url && (selected || hovered) && (
            <a href={getFileUrl(url)} target="_blank">
              <ActionIcon variant="default" aria-label="download file">
                <IconDownload size={18} />
              </ActionIcon>
            </a>
-          ) : (
-            ""
          )}
        </Group>
      </Paper>
@@ -1,10 +1,6 @@
-import {
-  BubbleMenu,
-  BubbleMenuProps,
-  isNodeSelection,
-  useEditor,
-  useEditorState,
-} from "@tiptap/react";
+import { BubbleMenu, BubbleMenuProps } from "@tiptap/react/menus";
+import { isNodeSelection, useEditorState } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
 import { FC, useEffect, useRef, useState } from "react";
 import {
  IconBold,
@@ -38,7 +34,7 @@ export interface BubbleMenuItem {
 }

 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
 };

 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
@@ -133,14 +129,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
      }
      return isTextSelected(editor);
    },
-    tippyOptions: {
-      moveTransition: "transform 0.15s ease-out",
-      onCreate: (instance) => {
-        instance.popper.firstChild?.addEventListener("blur", (event) => {
-          event.preventDefault();
-          event.stopImmediatePropagation();
-        });
-      },
+    options: {
+      placement: "top",
+      offset: 8,
      onHide: () => {
        setIsNodeSelectorOpen(false);
        setIsTextAlignmentOpen(false);
@@ -156,7 +147,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);

  return (
-    <BubbleMenu {...bubbleMenuProps}>
+    <BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
      <div className={classes.bubbleMenu}>
        <NodeSelector
          editor={props.editor}
@@ -1,9 +1,5 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {
@@ -53,17 +49,26 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
    },
  });

-  const getReferenceClientRect = useCallback(() => {
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "callout";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
    }

-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
  }, [editor]);

  const setCalloutType = useCallback(
@@ -112,14 +117,12 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
      editor={editor}
      pluginKey={`callout-menu`}
      updateDelay={0}
-      tippyOptions={{
-        getReferenceClientRect,
-        offset: [0, 10],
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
        placement: "bottom",
-        zIndex: 99,
-        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
-        },
+        // offset: 233, //      //         offset: [0, 10],
+        // zIndex: 99,
+        flip: false,
      }}
      shouldShow={shouldShow}
    >
@@ -90,6 +90,7 @@ export default function CodeBlockView(props: NodeViewProps) {
          node.textContent.length > 0
        }
      >
+        {/* @ts-ignore */}
        <NodeViewContent as="code" className={`language-${language}`} />
      </pre>

@@ -1,13 +1,12 @@
-import type { EditorView } from "@tiptap/pm/view";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
-import { Slice } from "@tiptap/pm/model";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
+import { Editor } from "@tiptap/core";

 export const handlePaste = (
-  view: EditorView,
+  editor: Editor,
  event: ClipboardEvent,
  pageId: string,
  creatorId?: string,
@@ -18,7 +17,7 @@ export const handlePaste = (
    // we have to do this validation here to allow the default link extension to takeover if needs be
    event.preventDefault();
    const url = clipboardData.trim();
-    const { from: pos, empty } = view.state.selection;
+    const { from: pos, empty } = editor.state.selection;
    const match = INTERNAL_LINK_REGEX.exec(url);
    const currentPageMatch = INTERNAL_LINK_REGEX.exec(window.location.href);

@@ -34,19 +33,27 @@ export const handlePaste = (
      return false;
    }

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

  if (event.clipboardData?.files.length) {
    event.preventDefault();
    for (const file of event.clipboardData.files) {
-      const pos = view.state.selection.from;
-      uploadImageAction(file, view, pos, pageId);
-      uploadVideoAction(file, view, pos, pageId);
-      uploadAttachmentAction(file, view, pos, pageId);
+      const pos = editor.state.selection.from;
+      uploadImageAction(file, editor, pos, pageId);
+      uploadVideoAction(file, editor, pos, pageId);
+      uploadAttachmentAction(file, editor, pos, pageId);
    }
    return true;
  }
@@ -54,7 +61,7 @@ export const handlePaste = (
 };

 export const handleFileDrop = (
-  view: EditorView,
+  editor: Editor,
  event: DragEvent,
  moved: boolean,
  pageId: string,
@@ -63,14 +70,14 @@ export const handleFileDrop = (
    event.preventDefault();

    for (const file of event.dataTransfer.files) {
-      const coordinates = view.posAtCoords({
+      const coordinates = editor.view.posAtCoords({
        left: event.clientX,
        top: event.clientY,
      });

-      uploadImageAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
-      uploadVideoAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
-      uploadAttachmentAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
+      uploadImageAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
+      uploadVideoAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
+      uploadAttachmentAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
    }
    return true;
  }
@@ -1,11 +1,6 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
  EditorMenuProps,
@@ -40,17 +35,26 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
    },
  });

-  const getReferenceClientRect = useCallback(() => {
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "drawio";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
    }

-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
  }, [editor]);

  const onWidthChange = useCallback(
@@ -65,15 +69,11 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
      editor={editor}
      pluginKey={`drawio-menu`}
      updateDelay={0}
-      tippyOptions={{
-        getReferenceClientRect,
-        offset: [0, 8],
-        zIndex: 99,
-        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
      }}
      shouldShow={shouldShow}
    >
@@ -66,6 +66,7 @@ export default function DrawioView(props: NodeViewProps) {
    const fileName = "diagram.drawio.svg";
    const drawioSVGFile = await svgStringToFile(svgString, fileName);

+    //@ts-ignore
    const pageId = editor.storage?.pageId;

    let attachment: IAttachment = null;
@@ -1,16 +1,41 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import EmojiList from "./emoji-list";
-import tippy from "tippy.js";
 import { init } from "emoji-mart";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";

 const renderEmojiItems = () => {
  let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let popup: HTMLDivElement | null = null;
+  let cleanup: (() => void) | null = null;
+  let getReferenceClientRect: (() => DOMRect) | null = null;
+
+  const destroy = () => {
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+
+    if (popup) {
+      popup.remove();
+      popup = null;
+    }
+
+    if (component) {
+      component.destroy();
+      component = null;
+    }
+  };

  return {
    onBeforeStart: (props: {
      editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
    }) => {
      init({
        data: async () => (await import("@emoji-mart/data")).default,
@@ -25,51 +50,61 @@ const renderEmojiItems = () => {
        return;
      }

-      // @ts-ignore
-      popup = tippy("body", {
-        getReferenceClientRect: props.clientRect,
-        appendTo: () => document.body,
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom",
+      getReferenceClientRect = props.clientRect;
+      popup = document.createElement("div");
+      popup.style.zIndex = "9999";
+      popup.style.position = "absolute";
+      popup.style.top = "0";
+      popup.style.left = "0";
+      popup.appendChild(component.element);
+      document.body.appendChild(popup);
+
+      const virtualElement = {
+        getBoundingClientRect: () => {
+          return getReferenceClientRect
+            ? getReferenceClientRect()
+            : new DOMRect(0, 0, 0, 0);
+        },
+      };
+
+      cleanup = autoUpdate(virtualElement, popup, () => {
+        if (!popup) return;
+
+        computePosition(virtualElement, popup, {
+          placement: "bottom-start",
+          middleware: [offset(10), flip(), shift()],
+        }).then(({ x, y }) => {
+          if (!popup) return;
+
+          Object.assign(popup.style, {
+            transform: `translate(${x}px, ${y}px)`,
+          });
+        });
      });
    },
    onStart: (props: {
      editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
    }) => {
-      component?.updateProps({...props, isLoading: false});
+      component?.updateProps({ ...props, isLoading: false });

-      if (!props.clientRect) {
-        return;
+      if (props.clientRect) {
+        getReferenceClientRect = props.clientRect;
      }
-
-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
    },
    onUpdate: (props: {
      editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
    }) => {
      component?.updateProps(props);

-      if (!props.clientRect) {
-        return;
+      if (props.clientRect) {
+        getReferenceClientRect = props.clientRect;
      }
-
-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
    },
    onKeyDown: (props: { event: KeyboardEvent }) => {
      if (props.event.key === "Escape") {
-        popup?.[0].hide();
-        component?.destroy()
+        destroy();

        return true;
      }
@@ -78,13 +113,7 @@ const renderEmojiItems = () => {
      return component?.ref?.onKeyDown(props);
    },
    onExit: () => {
-      if (popup && !popup[0]?.state.isDestroyed) {
-        popup[0]?.destroy();
-      }
-
-      if (component) {
-        component?.destroy();
-      }
+      destroy();
    },
  };
 };
@@ -1,11 +1,6 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
  EditorMenuProps,
@@ -42,17 +37,26 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
    },
  });

-  const getReferenceClientRect = useCallback(() => {
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "excalidraw";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
    }

-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
  }, [editor]);

  const onWidthChange = useCallback(
@@ -65,17 +69,13 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`excalidraw-menu}`}
+      pluginKey={`excalidraw-menu`}
      updateDelay={0}
-      tippyOptions={{
-        getReferenceClientRect,
-        offset: [0, 8],
-        zIndex: 99,
-        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
      }}
      shouldShow={shouldShow}
    >
@@ -98,6 +98,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
    const fileName = "diagram.excalidraw.svg";
    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);

+    // @ts-ignore
    const pageId = editor.storage?.pageId;

    let attachment: IAttachment = null;
@@ -1,11 +1,6 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import React, { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
  EditorMenuProps,
@@ -22,16 +17,6 @@ import { useTranslation } from "react-i18next";

 export function ImageMenu({ editor }: EditorMenuProps) {
  const { t } = useTranslation();
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) {
-        return false;
-      }
-
-      return editor.isActive("image");
-    },
-    [editor],
-  );

  const editorState = useEditorState({
    editor,
@@ -52,17 +37,37 @@ export function ImageMenu({ editor }: EditorMenuProps) {
    },
  });

-  const getReferenceClientRect = useCallback(() => {
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("image") && editor.getAttributes("image").src;
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "image";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
    }

-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
  }, [editor]);

  const alignImageLeft = useCallback(() => {
@@ -105,15 +110,11 @@ export function ImageMenu({ editor }: EditorMenuProps) {
      editor={editor}
      pluginKey={`image-menu`}
      updateDelay={0}
-      tippyOptions={{
-        getReferenceClientRect,
-        offset: [0, 8],
-        zIndex: 99,
-        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
      }}
      shouldShow={shouldShow}
    >
@@ -0,0 +1,27 @@
+.imageWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
@@ -1,30 +1,70 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Image, Loader, Text } from "@mantine/core";
 import { useMemo } from "react";
-import { Image } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
 import clsx from "clsx";
+import classes from "./image-view.module.css";
+import { useTranslation } from "react-i18next";

 export default function ImageView(props: NodeViewProps) {
-  const { node, selected } = props;
-  const { src, width, align, title } = node.attrs;
-
+  const { t } = useTranslation();
+  const { editor, node, selected } = props;
+  const { src, width, align, title, aspectRatio, placeholder } = node.attrs;
  const alignClass = useMemo(() => {
    if (align === "left") return "alignLeft";
    if (align === "right") return "alignRight";
    if (align === "center") return "alignCenter";
    return "alignCenter";
  }, [align]);
+  const previewSrc = useMemo(() => {
+    editor.storage.shared.imagePreviews =
+      editor.storage.shared.imagePreviews || {};
+
+    if (placeholder?.id) {
+      return editor.storage.shared.imagePreviews[placeholder.id];
+    }
+
+    return null;
+  }, [placeholder, editor]);

  return (
    <NodeViewWrapper data-drag-handle>
-      <Image
-        radius="md"
-        fit="contain"
-        w={width}
-        src={getFileUrl(src)}
-        alt={title}
-        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
-      />
+      <div
+        className={clsx(
+          selected && "ProseMirror-selectednode",
+          classes.imageWrapper,
+          alignClass,
+        )}
+        style={{
+          aspectRatio: aspectRatio ? aspectRatio : src ? undefined : "16 / 9",
+          width,
+        }}
+      >
+        {src && (
+          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={title} />
+        )}
+        {!src && previewSrc && (
+          <Group pos="relative" h="100%" w="100%">
+            <Image
+              radius="md"
+              fit="contain"
+              src={previewSrc}
+              alt={placeholder?.name}
+            />
+            <Loader size={20} pos="absolute" bottom={6} right={6} />
+          </Group>
+        )}
+        {!src && !previewSrc && (
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Text component="span" size="sm" truncate="end">
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
+            </Text>
+          </Group>
+        )}
+      </div>
    </NodeViewWrapper>
  );
 }
@@ -1,9 +1,10 @@
-import { BubbleMenu as BaseBubbleMenu, useEditorState } from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import React, { useCallback, useState } from "react";
 import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
 import { LinkPreviewPanel } from "@/features/editor/components/link/link-preview.tsx";
 import { Card } from "@mantine/core";
+import { useEditorState } from "@tiptap/react";

 export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
  const [showEdit, setShowEdit] = useState(false);
@@ -59,18 +60,15 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`link-menu}`}
+      pluginKey={`link-menu`}
      updateDelay={0}
-      tippyOptions={{
-        appendTo: () => {
-          return appendTo?.current;
-        },
-        onHidden: () => {
+      options={{
+        onHide: () => {
          setShowEdit(false);
        },
        placement: "bottom",
-        offset: [0, 5],
-        zIndex: 101,
+        offset: 5,
+        // zIndex: 101,
      }}
      shouldShow={shouldShow}
    >
@@ -106,6 +106,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {

      setRenderItems(items);
      // update editor storage
+      //@ts-ignore
      props.editor.storage.mentionItems = items;
    }
  }, [suggestion, isLoading]);
@@ -163,7 +164,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {

  const enterHandler = () => {
    if (!renderItems.length) return;
-    if (renderItems[selectedIndex].entityType !== "header") {
+    if (renderItems[selectedIndex]?.entityType !== "header") {
      selectItem(selectedIndex);
    }
  };
@@ -203,7 +204,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
      parentPageId: page.id || null,
      title: title
    };
-    
+
    let createdPage: IPage;
    try {
      createdPage = await createPageMutation.mutateAsync(payload);
@@ -1,5 +1,11 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
-import tippy from "tippy.js";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";
 import MentionList from "@/features/editor/components/mention/mention-list.tsx";

 function getWhitespaceCount(query: string) {
@@ -9,16 +15,27 @@ function getWhitespaceCount(query: string) {

 const mentionRenderItems = () => {
  let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let activeClientRect: (() => DOMRect) | null = null;
+  let updatePositionCleanup: (() => void) | null = null;
+
+  const destroy = () => {
+    updatePositionCleanup?.();
+    updatePositionCleanup = null;
+    component?.destroy();
+    if (component?.element?.parentNode) {
+      component.element.parentNode.removeChild(component.element);
+    }
+    component = null;
+  };

  return {
    onStart: (props: {
      editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
      query: string;
    }) => {
      // query must not start with a whitespace
-      if (props.query.charAt(0) === ' '){
+      if (props.query.charAt(0) === " ") {
        return;
      }

@@ -37,75 +54,95 @@ const mentionRenderItems = () => {
        return;
      }

-      // @ts-ignore
-      popup = tippy("body", {
-        getReferenceClientRect: props.clientRect,
-        appendTo: () => document.body,
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom-start",
-      });
+      activeClientRect = props.clientRect;
+
+      const { element } = component;
+      document.body.appendChild(element);
+
+      updatePositionCleanup = autoUpdate(
+        {
+          getBoundingClientRect: () =>
+            activeClientRect ? activeClientRect() : new DOMRect(),
+        },
+        element,
+        () => {
+          if (!component?.element) return;
+          computePosition(
+            {
+              getBoundingClientRect: () => {
+                return activeClientRect ? activeClientRect() : new DOMRect();
+              },
+            },
+            element,
+            {
+              placement: "bottom-start",
+              middleware: [offset(0), flip(), shift()],
+            },
+          ).then(({ x, y }) => {
+            Object.assign(element.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+              position: "absolute",
+              zIndex: "9999",
+            });
+          });
+        },
+      );
    },
    onUpdate: (props: {
      editor: ReturnType<typeof useEditor>;
-      clientRect: DOMRect;
+      clientRect: () => DOMRect;
      query: string;
    }) => {
      // query must not start with a whitespace
-      if (props.query.charAt(0) === ' '){
-        component?.destroy();
+      if (props.query.charAt(0) === " ") {
+        destroy();
        return;
      }

      // only update component if popup is not destroyed
-      if (!popup?.[0].state.isDestroyed) {
-        component?.updateProps(props);
+      if (component) {
+        component.updateProps(props);
      }

      if (!props || !props.clientRect) {
        return;
      }

+      activeClientRect = props.clientRect;
+
      const whitespaceCount = getWhitespaceCount(props.query);

      // destroy component if space is greater 3 without a match
      if (
-        whitespaceCount > 3 &&
-        props.editor.storage.mentionItems.length === 0
+        whitespaceCount > 4 &&
+        //@ts-ignore
+        props.editor.storage.mentionItems.length === 1
      ) {
-        popup?.[0]?.destroy();
-        component?.destroy();
+        destroy();
+        return;
+      }
+      // fallback exit
+      if (whitespaceCount > 7) {
+        destroy();
        return;
      }
-
-      popup &&
-        !popup?.[0].state.isDestroyed &&
-        popup?.[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
    },
    onKeyDown: (props: { event: KeyboardEvent }) => {
-      if (props.event.key)
-        if (
-          props.event.key === "Escape" ||
-          (props.event.key === "Enter" && !popup?.[0].state.isShown)
-        ) {
-          popup?.[0].destroy();
-          component?.destroy();
-          return false;
-        }
+      if (props.event.key === "Escape") {
+        destroy();
+        return true;
+      }
+
+      if (props.event.key === "Enter" && !component) {
+        destroy();
+        return false;
+      }
+
      return (component?.ref as any)?.onKeyDown(props);
    },
    onExit: () => {
-      if (popup && !popup?.[0].state.isDestroyed) {
-        popup[0].destroy();
-      }
-
-      if (component) {
-        component.destroy();
-      }
+      destroy();
    },
  };
 };
@@ -1,19 +1,21 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import {
  buildPageUrl,
  buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
+import { extractPageSlugId } from "@/lib";
 import classes from "./mention.module.css";

 export default function MentionView(props: NodeViewProps) {
  const { node } = props;
  const { label, entityType, entityId, slugId, anchorId } = node.attrs;
-  const { spaceSlug } = useParams();
+  const { spaceSlug, pageSlug } = useParams();
  const { shareId } = useParams();
+  const navigate = useNavigate();
  const {
    data: page,
    isLoading,
@@ -23,6 +25,20 @@ export default function MentionView(props: NodeViewProps) {
  const location = useLocation();
  const isShareRoute = location.pathname.startsWith("/share");

+  const currentPageSlugId = extractPageSlugId(pageSlug);
+  const isSamePage = currentPageSlugId === slugId;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isSamePage && anchorId) {
+      e.preventDefault();
+      const element = document.querySelector(`[id="${anchorId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+        navigate(`#${anchorId}`, { replace: true });
+      }
+    }
+  };
+
  const shareSlugUrl = buildSharedPageUrl({
    shareId,
    pageSlugId: slugId,
@@ -45,6 +61,7 @@ export default function MentionView(props: NodeViewProps) {
          to={
            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label, anchorId)
          }
+          onClick={handleClick}
          underline="never"
          className={classes.pageMentionLink}
        >
@@ -73,6 +73,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
    if (!editor) return;

    const { results, resultIndex } = editor.storage.searchAndReplace;
+    //TODO: check type error
+    //@ts-ignore
    const position: Range = results[resultIndex];

    if (!position) return;
@@ -161,6 +161,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      command: ({ editor, range }) => {
        editor.chain().focus().deleteRange(range).run();

+        // @ts-ignore
        const pageId = editor.storage?.pageId;
        if (!pageId) return;

@@ -173,9 +174,13 @@ const CommandGroups: SlashMenuGroupedItemsType = {
          if (input.files?.length) {
            for (const file of input.files) {
              const pos = editor.view.state.selection.from;
-              uploadImageAction(file, editor.view, pos, pageId);
+
+              uploadImageAction(file, editor, pos, pageId);
            }
          }
+
+          // Reset the input value to allow uploading the same file again if needed
+          input.value = "";
        };
        input.click();
      },
@@ -188,6 +193,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      command: ({ editor, range }) => {
        editor.chain().focus().deleteRange(range).run();

+        // @ts-ignore
        const pageId = editor.storage?.pageId;
        if (!pageId) return;

@@ -195,12 +201,18 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = "video/*";
+        input.multiple = true;
        input.onchange = async () => {
          if (input.files?.length) {
-            const file = input.files[0];
-            const pos = editor.view.state.selection.from;
-            uploadVideoAction(file, editor.view, pos, pageId);
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadVideoAction(file, editor, pos, pageId);
+            }
          }
+
+          // Reset the input value to allow uploading the same file again if needed
+          input.value = "";
        };
        input.click();
      },
@@ -213,6 +225,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      command: ({ editor, range }) => {
        editor.chain().focus().deleteRange(range).run();

+        // @ts-ignore
        const pageId = editor.storage?.pageId;
        if (!pageId) return;

@@ -220,12 +233,18 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = "";
+        input.multiple = true;
        input.onchange = async () => {
          if (input.files?.length) {
-            const file = input.files[0];
-            const pos = editor.view.state.selection.from;
-            uploadAttachmentAction(file, editor.view, pos, pageId, true);
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadAttachmentAction(file, editor, pos, pageId, true);
+            }
          }
+
+          // Reset the input value to allow uploading the same file again if needed
+          input.value = "";
        };
        input.click();
      },
@@ -1,10 +1,35 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import CommandList from "@/features/editor/components/slash-menu/command-list";
-import tippy from "tippy.js";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom";

 const renderItems = () => {
  let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let popup: HTMLElement | null = null;
+  let cleanup: (() => void) | null = null;
+  let getReferenceClientRect: (() => DOMRect) | null = null;
+
+  const updatePosition = () => {
+    if (!popup || !getReferenceClientRect) return;
+
+    // @ts-ignore
+    const rect = getReferenceClientRect();
+
+    computePosition({ getBoundingClientRect: () => rect }, popup, {
+      placement: "bottom-start",
+      middleware: [offset(0), flip(), shift()],
+    }).then(({ x, y }) => {
+      if (popup) {
+        popup.style.left = `${x}px`;
+        popup.style.top = `${y}px`;
+      }
+    });
+  };

  return {
    onStart: (props: {
@@ -21,15 +46,29 @@ const renderItems = () => {
      }

      // @ts-ignore
-      popup = tippy("body", {
-        getReferenceClientRect: props.clientRect,
-        appendTo: () => document.body,
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom-start",
-      });
+      getReferenceClientRect = props.clientRect;
+
+      popup = document.createElement("div");
+      popup.style.zIndex = "9999";
+      popup.style.position = "absolute";
+      popup.style.top = "0";
+      popup.style.left = "0";
+
+      document.body.appendChild(popup);
+      popup.appendChild(component.element);
+
+      cleanup = autoUpdate(
+        // @ts-ignore
+        {
+          getBoundingClientRect: () => {
+            return getReferenceClientRect
+              ? getReferenceClientRect()
+              : new DOMRect();
+          },
+        },
+        popup,
+        updatePosition
+      );
    },
    onUpdate: (props: {
      editor: ReturnType<typeof useEditor>;
@@ -41,14 +80,15 @@ const renderItems = () => {
        return;
      }

-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
+      // @ts-ignore
+      getReferenceClientRect = props.clientRect;
+      updatePosition();
    },
    onKeyDown: (props: { event: KeyboardEvent }) => {
      if (props.event.key === "Escape") {
-        popup?.[0].hide();
+        if (popup) {
+          popup.style.display = "none";
+        }

        return true;
      }
@@ -57,12 +97,19 @@ const renderItems = () => {
      return component?.ref?.onKeyDown(props);
    },
    onExit: () => {
-      if (popup && !popup[0].state.isDestroyed) {
-        popup[0].destroy();
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+
+      if (popup) {
+        popup.remove();
+        popup = null;
      }

      if (component) {
        component.destroy();
+        component = null;
      }
    },
  };
@@ -1,15 +1,11 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  posToDOMRect,
-  findParentNode,
-} from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { posToDOMRect, findParentNode } from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import React, { useCallback } from "react";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { Editor } from "@tiptap/core";
-import { sticky } from "tippy.js";

 interface SubpagesMenuProps {
  editor: Editor;
@@ -33,7 +29,7 @@ export const SubpagesMenu = React.memo(

        return editor.isActive("subpages");
      },
-      [editor],
+      [editor]
    );

    const getReferenceClientRect = useCallback(() => {
@@ -62,18 +58,8 @@ export const SubpagesMenu = React.memo(
    return (
      <BaseBubbleMenu
        editor={editor}
-        pluginKey={`subpages-menu}`}
+        pluginKey={`subpages-menu`}
        updateDelay={0}
-        tippyOptions={{
-          getReferenceClientRect,
-          offset: [0, 8],
-          zIndex: 99,
-          popperOptions: {
-            modifiers: [{ name: "flip", enabled: false }],
-          },
-          plugins: [sticky],
-          sticky: "popper",
-        }}
        shouldShow={shouldShow}
      >
        <Tooltip position="top" label={t("Delete")}>
@@ -89,7 +75,7 @@ export const SubpagesMenu = React.memo(
        </Tooltip>
      </BaseBubbleMenu>
    );
-  },
+  }
 );

 export default SubpagesMenu;
@@ -19,6 +19,7 @@ export default function SubpagesView(props: NodeViewProps) {
  const { spaceSlug, shareId } = useParams();
  const { t } = useTranslation();

+  //@ts-ignore
  const currentPageId = editor.storage.pageId;

  // Get subpages from shared tree if we're in a shared context
@@ -1,6 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
 import React, { useCallback } from "react";
-
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -17,6 +15,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { TableBackgroundColor } from "./table-background-color";
 import { TableTextAlignment } from "./table-text-alignment";
+import { BubbleMenu } from "@tiptap/react/menus";

 export const TableCellMenu = React.memo(
  ({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -29,7 +28,7 @@ export const TableCellMenu = React.memo(

        return isCellSelection(state.selection);
      },
-      [editor],
+      [editor]
    );

    const mergeCells = useCallback(() => {
@@ -53,23 +52,27 @@ export const TableCellMenu = React.memo(
    }, [editor]);

    return (
-      <BaseBubbleMenu
+      <BubbleMenu
        editor={editor}
        pluginKey="table-cell-menu"
        updateDelay={0}
-        tippyOptions={{
-          appendTo: () => {
-            return appendTo?.current;
+        appendTo={() => {
+          return appendTo?.current;
+        }}
+        ref={(element) => {
+          element.style.zIndex = "99";
+        }}
+        options={{
+          offset: {
+            mainAxis: 15,
          },
-          offset: [0, 15],
-          zIndex: 99,
        }}
        shouldShow={shouldShow}
      >
        <ActionIcon.Group>
          <TableBackgroundColor editor={editor} />
          <TableTextAlignment editor={editor} />
-          
+
          <Tooltip position="top" label={t("Merge cells")}>
            <ActionIcon
              onClick={mergeCells}
@@ -125,9 +128,9 @@ export const TableCellMenu = React.memo(
            </ActionIcon>
          </Tooltip>
        </ActionIcon.Group>
-      </BaseBubbleMenu>
+      </BubbleMenu>
    );
-  },
+  }
 );

 export default TableCellMenu;
@@ -1,11 +1,6 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  posToDOMRect,
-  findParentNode,
-} from "@tiptap/react";
+import { posToDOMRect, findParentNode } from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import React, { useCallback } from "react";
-
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -17,9 +12,12 @@ import {
  IconColumnRemove,
  IconRowInsertBottom,
  IconRowInsertTop,
-  IconRowRemove, IconTableColumn, IconTableRow,
+  IconRowRemove,
+  IconTableColumn,
+  IconTableRow,
  IconTrashX,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
+import { BubbleMenu } from "@tiptap/react/menus";
 import { isCellSelection } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";

@@ -34,20 +32,28 @@ export const TableMenu = React.memo(

        return editor.isActive("table") && !isCellSelection(state.selection);
      },
-      [editor],
+      [editor]
    );

-    const getReferenceClientRect = useCallback(() => {
+    const getReferencedVirtualElement = useCallback(() => {
      const { selection } = editor.state;
      const predicate = (node: PMNode) => node.type.name === "table";
      const parent = findParentNode(predicate)(selection);

      if (parent) {
        const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-        return dom.getBoundingClientRect();
+        const rect = dom.getBoundingClientRect();
+        return {
+          getBoundingClientRect: () => rect,
+          getClientRects: () => [rect],
+        };
      }

-      return posToDOMRect(editor.view, selection.from, selection.to);
+      const rect = posToDOMRect(editor.view, selection.from, selection.to);
+      return {
+        getBoundingClientRect: () => rect,
+        getClientRects: () => [rect],
+      };
    }, [editor]);

    const toggleHeaderColumn = useCallback(() => {
@@ -87,42 +93,33 @@ export const TableMenu = React.memo(
    }, [editor]);

    return (
-      <BaseBubbleMenu
+      <BubbleMenu
        editor={editor}
        pluginKey="table-menu"
-        updateDelay={0}
-        tippyOptions={{
-          getReferenceClientRect: getReferenceClientRect,
-          offset: [0, 15],
-          zIndex: 99,
-          popperOptions: {
-            modifiers: [
-              {
-                name: "preventOverflow",
-                enabled: true,
-                options: {
-                  altAxis: true,
-                  boundary: "clippingParents",
-                  padding: 8,
-                },
-              },
-              {
-                name: "flip",
-                enabled: true,
-                options: {
-                  boundary: editor.options.element,
-                  fallbackPlacements: ["top", "bottom"],
-                  padding: { top: 35, left: 8, right: 8, bottom: -Infinity },
-                },
-              },
-            ],
+        resizeDelay={0}
+        getReferencedVirtualElement={getReferencedVirtualElement}
+        ref={(element) => {
+          element.style.zIndex = "99";
+        }}
+        options={{
+          placement: "top",
+          offset: {
+            mainAxis: 15,
+          },
+          flip: {
+            fallbackPlacements: ["top", "bottom"],
+            padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
+            boundary: editor.options.element as HTMLElement,
+          },
+          shift: {
+            padding: 8 + 15,
+            crossAxis: true,
          },
        }}
        shouldShow={shouldShow}
      >
        <ActionIcon.Group>
-          <Tooltip position="top" label={t("Add left column")}
-          >
+          <Tooltip position="top" label={t("Add left column")}>
            <ActionIcon
              onClick={addColumnLeft}
              variant="default"
@@ -188,8 +185,7 @@ export const TableMenu = React.memo(
            </ActionIcon>
          </Tooltip>

-          <Tooltip position="top" label={t("Toggle header row")}
-          >
+          <Tooltip position="top" label={t("Toggle header row")}>
            <ActionIcon
              onClick={toggleHeaderRow}
              variant="default"
@@ -200,8 +196,7 @@ export const TableMenu = React.memo(
            </ActionIcon>
          </Tooltip>

-          <Tooltip position="top" label={t("Toggle header column")}
-          >
+          <Tooltip position="top" label={t("Toggle header column")}>
            <ActionIcon
              onClick={toggleHeaderColumn}
              variant="default"
@@ -224,9 +219,9 @@ export const TableMenu = React.memo(
            </ActionIcon>
          </Tooltip>
        </ActionIcon.Group>
-      </BaseBubbleMenu>
+      </BubbleMenu>
    );
-  },
+  }
 );

 export default TableMenu;
@@ -1,11 +1,6 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  findParentNode,
-  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import React, { useCallback } from "react";
-import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";
 import {
  EditorMenuProps,
@@ -22,16 +17,6 @@ import { useTranslation } from "react-i18next";

 export function VideoMenu({ editor }: EditorMenuProps) {
  const { t } = useTranslation();
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) {
-        return false;
-      }
-
-      return editor.isActive("video");
-    },
-    [editor],
-  );

  const editorState = useEditorState({
    editor,
@@ -52,17 +37,37 @@ export function VideoMenu({ editor }: EditorMenuProps) {
    },
  });

-  const getReferenceClientRect = useCallback(() => {
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("video") && editor.getAttributes("video").src;
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "video";
    const parent = findParentNode(predicate)(selection);

    if (parent) {
      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      return dom.getBoundingClientRect();
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
    }

-    return posToDOMRect(editor.view, selection.from, selection.to);
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
  }, [editor]);

  const alignVideoLeft = useCallback(() => {
@@ -105,15 +110,11 @@ export function VideoMenu({ editor }: EditorMenuProps) {
      editor={editor}
      pluginKey={`video-menu`}
      updateDelay={0}
-      tippyOptions={{
-        getReferenceClientRect,
-        offset: [0, 8],
-        zIndex: 99,
-        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        plugins: [sticky],
-        sticky: "popper",
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
      }}
      shouldShow={shouldShow}
    >
@@ -0,0 +1,33 @@
+.videoWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
+.video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+}
@@ -1,29 +1,75 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Loader, Text } from "@mantine/core";
 import { useMemo } from "react";
 import { getFileUrl } from "@/lib/config.ts";
 import clsx from "clsx";
+import classes from "./video-view.module.css";
+import { useTranslation } from "react-i18next";

 export default function VideoView(props: NodeViewProps) {
-  const { node, selected } = props;
-  const { src, width, align } = node.attrs;
-
+  const { t } = useTranslation();
+  const { editor, node, selected } = props;
+  const { src, width, align, aspectRatio, placeholder } = node.attrs;
  const alignClass = useMemo(() => {
    if (align === "left") return "alignLeft";
    if (align === "right") return "alignRight";
    if (align === "center") return "alignCenter";
    return "alignCenter";
  }, [align]);
+  const previewSrc = useMemo(() => {
+    editor.storage.shared.videoPreviews =
+      editor.storage.shared.videoPreviews || {};
+
+    if (placeholder?.id) {
+      return editor.storage.shared.videoPreviews[placeholder.id];
+    }
+
+    return null;
+  }, [placeholder, editor]);

  return (
    <NodeViewWrapper data-drag-handle>
-      <video
-        preload="metadata"
-        width={width}
-        controls
-        src={getFileUrl(src)}
-        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
-        style={{ display: "block" }}
-      />
+      <div
+        className={clsx(
+          selected && "ProseMirror-selectednode",
+          classes.videoWrapper,
+          alignClass,
+        )}
+        style={{
+          aspectRatio: aspectRatio ? aspectRatio : src ? undefined : "16 / 9",
+          width,
+        }}
+      >
+        {src && (
+          <video
+            className={classes.video}
+            preload="metadata"
+            controls
+            src={getFileUrl(src)}
+          />
+        )}
+        {!src && previewSrc && (
+          <Group pos="relative" h="100%" w="100%">
+            <video
+              className={classes.video}
+              preload="metadata"
+              controls
+              src={previewSrc}
+            />
+            <Loader size={20} pos="absolute" top={6} right={6} />
+          </Group>
+        )}
+        {!src && !previewSrc && (
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Text component="span" size="sm" truncate="end">
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
+            </Text>
+          </Group>
+        )}
+      </div>
    </NodeViewWrapper>
  );
 }
@@ -1,11 +1,7 @@
 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 { TaskList, TaskItem } from "@tiptap/extension-list";
+import { Placeholder, CharacterCount } from "@tiptap/extensions";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
 import { Typography } from "@tiptap/extension-typography";
@@ -15,7 +11,7 @@ import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Youtube } from "@tiptap/extension-youtube";
 import SlashCommand from "@/features/editor/extensions/slash-command";
 import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
-import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
+import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import {
  Comment,
@@ -41,11 +37,12 @@ import {
  Embed,
  SearchAndReplace,
  Mention,
-  Subpages,
  TableDndExtension,
+  Subpages,
  Heading,
  Highlight,
  UniqueID,
+  SharedStorage,
 } from "@docmost/editor-ext";
 import {
  randomElement,
@@ -97,7 +94,9 @@ lowlight.register("scala", scala);
 export const mainExtensions = [
  StarterKit.configure({
    heading: false,
-    history: false,
+    undoRedo: false,
+    link: false,
+    trailingNode: false,
    dropcursor: {
      width: 3,
      color: "#70CFF8",
@@ -109,6 +108,7 @@ export const mainExtensions = [
      },
    },
  }),
+  SharedStorage,
  Heading,
  UniqueID.configure({
    types: ["heading", "paragraph"],
@@ -134,8 +134,6 @@ export const mainExtensions = [
  TaskItem.configure({
    nested: true,
  }),
-  ListKeymap,
-  Underline,
  LinkExtension.configure({
    openOnClick: false,
  }),
@@ -170,6 +168,9 @@ export const mainExtensions = [
    },
  }).extend({
    addNodeView() {
+      // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+      this.editor.isInitialized = true;
+
      return ReactNodeViewRenderer(MentionView);
    },
  }),
@@ -208,6 +209,7 @@ export const mainExtensions = [
  }),
  CustomCodeBlock.configure({
    view: CodeBlockView,
+    //@ts-ignore
    lowlight,
    HTMLAttributes: {
      spellcheck: false,
@@ -246,7 +248,7 @@ export const mainExtensions = [
        Escape: () => {
          const event = new CustomEvent("closeFindDialogFromEditor", {});
          document.dispatchEvent(event);
-          return true;
+          return false;
        },
      };
    },
@@ -258,8 +260,9 @@ type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
 export const collabExtensions: CollabExtensions = (provider, user) => [
  Collaboration.configure({
    document: provider.document,
+    provider,
  }),
-  CollaborationCursor.configure({
+  CollaborationCaret.configure({
    provider,
    user: {
      name: user.name,
@@ -1,13 +1,22 @@
 import "@/features/editor/styles/index.css";
-import React, { useCallback, 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 {
  HocuspocusProvider,
-  onAuthenticationFailedParameters,
+  onStatusParameters,
  WebSocketStatus,
+  HocuspocusProviderWebsocket,
+  onSyncedParameters,
 } from "@hocuspocus/provider";
 import {
+  Editor,
  EditorContent,
  EditorProvider,
  useEditor,
@@ -69,161 +78,140 @@ export default function PageEditor({
  editable,
  content,
 }: PageEditorProps) {
-
-  
  const collaborationURL = useCollaborationUrl();
  const isComponentMounted = useRef(false);
-  const editorCreated = useRef(false);
+  const editorRef = useRef<Editor | null>(null);

  useEffect(() => {
    isComponentMounted.current = true;
  }, []);
-  
+
  const [currentUser] = useAtom(currentUserAtom);
  const [, setEditor] = useAtom(pageEditorAtom);
  const [, setAsideState] = useAtom(asideStateAtom);
  const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
  const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
-  const ydocRef = useRef<Y.Doc | null>(null);
-  if (!ydocRef.current) {
-    ydocRef.current = new Y.Doc();
-  }
-  const ydoc = ydocRef.current;
-  const [isLocalSynced, setLocalSynced] = useState(false);
-  const [isRemoteSynced, setRemoteSynced] = useState(false);
+  const [isLocalSynced, setIsLocalSynced] = useState(false);
+  const [isRemoteSynced, setIsRemoteSynced] = useState(false);
  const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
    yjsConnectionStatusAtom,
  );
  const menuContainerRef = useRef(null);
-  const documentName = `page.${pageId}`;
  const { data: collabQuery, refetch: refetchCollabToken } = useCollabToken();
  const { isIdle, resetIdle } = useIdle(FIVE_MINUTES, { initialState: false });
  const documentState = useDocumentVisibility();
-  const [isCollabReady, setIsCollabReady] = useState(false);
  const { pageSlug } = useParams();
  const slugId = extractPageSlugId(pageSlug);
  const userPageEditMode =
    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-  
-    const canScroll = useCallback(() => isComponentMounted.current && editorCreated.current, [isComponentMounted, editorCreated]);
+  const canScroll = useCallback(
+    () => Boolean(isComponentMounted.current && editorRef.current),
+    [isComponentMounted],
+  );
  const { handleScrollTo } = useEditorScroll({ canScroll });
  // Providers only created once per pageId
  const providersRef = useRef<{
    local: IndexeddbPersistence;
    remote: HocuspocusProvider;
+    socket: HocuspocusProviderWebsocket;
  } | null>(null);
  const [providersReady, setProvidersReady] = useState(false);

-  const localProvider = providersRef.current?.local;
-  const remoteProvider = providersRef.current?.remote;
-
-  // Track when collaborative provider is ready and synced
-  const [collabReady, setCollabReady] = useState(false);
-  useEffect(() => {
-    if (
-      remoteProvider?.status === WebSocketStatus.Connected &&
-      isLocalSynced &&
-      isRemoteSynced
-    ) {
-      setCollabReady(true);
-    }
-  }, [remoteProvider?.status, isLocalSynced, isRemoteSynced]);
-
  useEffect(() => {
    if (!providersRef.current) {
+      const documentName = `page.${pageId}`;
+      const ydoc = new Y.Doc();
      const local = new IndexeddbPersistence(documentName, ydoc);
-      local.on("synced", () => setLocalSynced(true));
-      const remote = new HocuspocusProvider({
-        name: documentName,
+      const socket = new HocuspocusProviderWebsocket({
        url: collaborationURL,
+      });
+      const onLocalSyncedHandler = () => {
+        setIsLocalSynced(true);
+      };
+      const onStatusHandler = (event: onStatusParameters) => {
+        setYjsConnectionStatus(event.status);
+      };
+      const onSyncedHandler = (event: onSyncedParameters) => {
+        setIsRemoteSynced(event.state);
+      };
+      const onAuthenticationFailedHandler = () => {
+        const payload = jwtDecode(collabQuery?.token);
+        const now = Date.now().valueOf() / 1000;
+        const isTokenExpired = now >= payload.exp;
+        if (isTokenExpired) {
+          refetchCollabToken().then((result) => {
+            if (result.data?.token) {
+              socket.disconnect();
+              setTimeout(() => {
+                remote.configuration.token = result.data.token;
+                socket.connect();
+              }, 100);
+            }
+          });
+        }
+      };
+      const remote = new HocuspocusProvider({
+        websocketProvider: socket,
+        name: documentName,
        document: ydoc,
        token: collabQuery?.token,
-        connect: true,
-        preserveConnection: false,
-        onAuthenticationFailed: (auth: onAuthenticationFailedParameters) => {
-          const payload = jwtDecode(collabQuery?.token);
-          const now = Date.now().valueOf() / 1000;
-          const isTokenExpired = now >= payload.exp;
-          if (isTokenExpired) {
-            refetchCollabToken().then((result) => {
-              if (result.data?.token) {
-                remote.disconnect();
-                setTimeout(() => {
-                  remote.configuration.token = result.data.token;
-                  remote.connect();
-                }, 100);
-              }
-            });
-          }
-        },
-        onStatus: (status) => {
-          if (status.status === "connected") {
-            setYjsConnectionStatus(status.status);
-          }
-        },
+        onAuthenticationFailed: onAuthenticationFailedHandler,
+        onStatus: onStatusHandler,
+        onSynced: onSyncedHandler,
      });
-      remote.on("synced", () => setRemoteSynced(true));
-      remote.on("disconnect", () => {
-        setYjsConnectionStatus(WebSocketStatus.Disconnected);
-      });
-      providersRef.current = { local, remote };
+
+      local.on("synced", onLocalSyncedHandler);
+      providersRef.current = { socket, local, remote };
      setProvidersReady(true);
    } else {
      setProvidersReady(true);
    }
    // Only destroy on final unmount
    return () => {
+      providersRef.current?.socket.destroy();
      providersRef.current?.remote.destroy();
      providersRef.current?.local.destroy();
      providersRef.current = null;
    };
  }, [pageId]);

-  /*
-  useEffect(() => {
-    // Handle token updates by reconnecting with new token
-    if (providersRef.current?.remote && collabQuery?.token) {
-      const currentToken = providersRef.current.remote.configuration.token;
-      if (currentToken !== collabQuery.token) {
-        // Token has changed, need to reconnect with new token
-        providersRef.current.remote.disconnect();
-        providersRef.current.remote.configuration.token = collabQuery.token;
-        providersRef.current.remote.connect();
-      }
-    }
-  }, [collabQuery?.token]);
-   */
-
  // Only connect/disconnect on tab/idle, not destroy
  useEffect(() => {
    if (!providersReady || !providersRef.current) return;
-    const remoteProvider = providersRef.current.remote;
+    const socket = providersRef.current.socket;
+
    if (
      isIdle &&
      documentState === "hidden" &&
-      remoteProvider.status === WebSocketStatus.Connected
+      yjsConnectionStatus === WebSocketStatus.Connected
    ) {
-      remoteProvider.disconnect();
-      setIsCollabReady(false);
+      socket.disconnect();
      return;
    }
    if (
      documentState === "visible" &&
-      remoteProvider.status === WebSocketStatus.Disconnected
+      yjsConnectionStatus === WebSocketStatus.Disconnected
    ) {
      resetIdle();
-      remoteProvider.connect();
-      setTimeout(() => setIsCollabReady(true), 500);
+      socket.connect();
    }
  }, [isIdle, documentState, providersReady, resetIdle]);

+  // Attach here, to make sure the connection gets properly established
+  providersRef.current?.remote.attach();
+
  const extensions = useMemo(() => {
-    if (!remoteProvider || !currentUser?.user) return mainExtensions;
+    if (!providersReady || !providersRef.current || !currentUser?.user) {
+      return mainExtensions;
+    }
+
+    const remoteProvider = providersRef.current.remote;
+
    return [
      ...mainExtensions,
      ...collabExtensions(remoteProvider, currentUser?.user),
    ];
-  }, [remoteProvider, currentUser?.user]);
+  }, [providersReady, currentUser?.user]);

  const editor = useEditor(
    {
@@ -266,18 +254,30 @@ export default function PageEditor({
            }
          },
        },
-        handlePaste: (view, event, slice) =>
-          handlePaste(view, event, pageId, currentUser?.user.id),
-        handleDrop: (view, event, _slice, moved) =>
-          handleFileDrop(view, event, moved, pageId),
+        handlePaste: (_view, event) => {
+          if (!editorRef.current) return false;
+
+          return handlePaste(
+            editorRef.current,
+            event,
+            pageId,
+            currentUser?.user.id,
+          );
+        },
+        handleDrop: (_view, event, _slice, moved) => {
+          if (!editorRef.current) return false;
+
+          return handleFileDrop(editorRef.current, event, moved, pageId);
+        },
      },
      onCreate({ editor }) {
        if (editor) {
          // @ts-ignore
          setEditor(editor);
+          // @ts-ignore
          editor.storage.pageId = pageId;
          handleScrollTo(editor);
-          editorCreated.current = true;
+          editorRef.current = editor;
        }
      },
      onUpdate({ editor }) {
@@ -287,7 +287,7 @@ export default function PageEditor({
        debouncedUpdateContent(editorJson);
      },
    },
-    [pageId, editable, remoteProvider],
+    [pageId, editable, extensions],
  );

  const editorIsEditable = useEditorState({
@@ -343,30 +343,17 @@ export default function PageEditor({
    setAsideState({ tab: "", isAsideOpen: false });
  }, [pageId]);

-  useEffect(() => {
-    if (remoteProvider?.status === WebSocketStatus.Connecting) {
-      const timeout = setTimeout(() => {
-        setYjsConnectionStatus(WebSocketStatus.Disconnected);
-      }, 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [remoteProvider?.status]);
-
  const isSynced = isLocalSynced && isRemoteSynced;

  useEffect(() => {
-    const collabReadyTimeout = setTimeout(() => {
-      if (
-        !isCollabReady &&
-        isSynced &&
-        remoteProvider?.status === WebSocketStatus.Connected
-      ) {
-        setIsCollabReady(true);
+    const timeout = setTimeout(() => {
+      if (yjsConnectionStatus === WebSocketStatus.Connecting || !isSynced) {
+        setYjsConnectionStatus(WebSocketStatus.Disconnected);
      }
-    }, 500);
-    return () => clearTimeout(collabReadyTimeout);
-  }, [isRemoteSynced, isLocalSynced, remoteProvider?.status]);
+    }, 7500);

+    return () => clearTimeout(timeout);
+  }, [yjsConnectionStatus, isSynced]);
  useEffect(() => {
    // Only honor user default page edit mode preference and permissions
    if (editor) {
@@ -388,12 +375,13 @@ export default function PageEditor({
  useEffect(() => {
    if (
      !hasConnectedOnceRef.current &&
-      remoteProvider?.status === WebSocketStatus.Connected
+      yjsConnectionStatus === WebSocketStatus.Connected &&
+      isSynced
    ) {
      hasConnectedOnceRef.current = true;
      setShowStatic(false);
    }
-  }, [remoteProvider?.status]);
+  }, [yjsConnectionStatus, isSynced]);

  if (showStatic) {
    return (
@@ -81,6 +81,7 @@ export default function ReadonlyPageEditor({
        onCreate={({ editor }) => {
          if (editor) {
            if (pageId) {
+              // @ts-ignore
              editor.storage.pageId = pageId;
            }
            // @ts-ignore
@@ -1,5 +1,5 @@
 /* Give a remote user a caret */
-.collaboration-cursor__caret {
+.collaboration-carets__caret {
    border-left: 1px solid #0d0d0d;
    border-right: 1px solid #0d0d0d;
    margin-left: -1px;
@@ -10,7 +10,7 @@
 }

 /* Render the username above the caret */
-.collaboration-cursor__label {
+.collaboration-carets__label {
    border-radius: 3px 3px 3px 0;
    color: #0d0d0d;
    font-size: 0.75rem;
@@ -1,5 +1,7 @@
 import api from "@/lib/api-client";
 import { IFileTask } from "@/features/file-task/types/file-task.types.ts";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import { IApiKey } from "@/ee/api-key";

 export async function getFileTaskById(fileTaskId: string): Promise<IFileTask> {
  const req = await api.post<IFileTask>("/file-tasks/info", {
@@ -8,7 +10,10 @@ export async function getFileTaskById(fileTaskId: string): Promise<IFileTask> {
  return req.data;
 }

-export async function getFileTasks(): Promise<IFileTask[]> {
-  const req = await api.post<IFileTask[]>("/file-tasks");
+export async function getFileTasks(
+  params?: QueryParams,
+): Promise<IPagination<IFileTask>> {
+  const req = await api.post("/file-tasks", { ...params });
  return req.data;
 }
+
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { zodResolver } from 'mantine-form-zod-resolver';

 const formSchema = z.object({
-  name: z.string().trim().min(2).max(50),
+  name: z.string().trim().min(2).max(100),
  description: z.string().max(500),
 });

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { zodResolver } from "mantine-form-zod-resolver";

 const formSchema = z.object({
-  name: z.string().min(2).max(50),
+  name: z.string().min(2).max(100),
  description: z.string().max(500),
 });

@@ -10,6 +10,7 @@ import Paginate from "@/components/common/paginate.tsx";
 import { queryClient } from "@/main.tsx";
 import { getSpaces } from "@/features/space/services/space-service.ts";
 import { getGroupMembers } from "@/features/group/services/group-service.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";

 export default function GroupList() {
  const { t } = useTranslation();
@@ -50,10 +51,10 @@ export default function GroupList() {
                  >
                    <Group gap="sm" wrap="nowrap">
                      <IconGroupCircle />
-                      <div>
-                        <Text fz="sm" fw={500} lineClamp={1}>
+                      <div style={{ minWidth: 0, overflow: "hidden" }}>
+                        <AutoTooltipText fz="sm" fw={500} lineClamp={1}>
                          {group.name}
-                        </Text>
+                        </AutoTooltipText>
                        <Text fz="xs" c="dimmed" lineClamp={2}>
                          {group.description}
                        </Text>
@@ -1,8 +1,9 @@
-import '@/features/editor/styles/index.css';
-import React, { useEffect } from 'react';
-import { EditorContent, useEditor } from '@tiptap/react';
-import { mainExtensions } from '@/features/editor/extensions/extensions';
-import { Title } from '@mantine/core';
+import "@/features/editor/styles/index.css";
+import React, { useEffect } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { mainExtensions } from "@/features/editor/extensions/extensions";
+import { Title } from "@mantine/core";
+import classes from "./history.module.css";

 export interface HistoryEditorProps {
  title: string;
@@ -26,7 +27,9 @@ export function HistoryEditor({ title, content }: HistoryEditorProps) {
      <div>
        <Title order={1}>{title}</Title>

-        {editor && <EditorContent editor={editor} />}
+        {editor && (
+          <EditorContent editor={editor} className={classes.historyEditor} />
+        )}
      </div>
    </>
  );
@@ -67,7 +67,7 @@ function HistoryList({ pageId }: Props) {
      mainEditorTitle
        .chain()
        .clearContent()
-        .setContent(activeHistoryData.title, true)
+        .setContent(activeHistoryData.title, { emitUpdate: true })
        .run();
      mainEditor
        .chain()
@@ -1,37 +1,49 @@
 .history {
-    display: block;
-    width: 100%;
-    padding: var(--mantine-spacing-md);
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+  display: block;
+  width: 100%;
+  padding: var(--mantine-spacing-md);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));

-    @mixin hover {
-        background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
-    }
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-2),
+      var(--mantine-color-dark-8)
+    );
+  }
+}
+
+.historyEditor {
+  :global(.ProseMirror) {
+    padding: 0 !important;
+  }
 }

 .active {
-    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
+  background-color: light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-8)
+  );
 }

 .sidebar {
-    max-height: rem(700px);
-    width: rem(250px);
-    padding: var(--mantine-spacing-sm);
-    display: flex;
-    flex-direction: column;
-    border-right: rem(1px) solid
+  max-height: rem(700px);
+  width: rem(250px);
+  padding: var(--mantine-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  border-right: rem(1px) solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }

 .sidebarFlex {
-    display: flex;
+  display: flex;
 }

 .sidebarMain {
-    flex: 1;
+  flex: 1;
 }

 .sidebarRightSection {
-    flex: 1;
-    padding: rem(16px) rem(40px);
+  flex: 1;
+  padding: rem(16px) rem(40px);
 }
@@ -9,20 +9,14 @@ import {
  IconList,
  IconMessage,
  IconPrinter,
-  IconSearch,
  IconTrash,
  IconWifiOff,
 } from "@tabler/icons-react";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
-import {
-  getHotkeyHandler,
-  useClipboard,
-  useDisclosure,
-  useHotkeys,
-} from "@mantine/hooks";
+import { useClipboard, useDisclosure, useHotkeys } from "@mantine/hooks";
 import { useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -38,8 +32,7 @@ import {
  pageEditorAtom,
  yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
-import { searchAndReplaceStateAtom } from "@/features/editor/components/search-and-replace/atoms/search-and-replace-state-atom.ts";
-import { formattedDate, timeAgo } from "@/lib/time.ts";
+import { formattedDate } from "@/lib/time.ts";
 import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
@@ -51,7 +44,6 @@ interface PageHeaderMenuProps {
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
  const { t } = useTranslation();
  const toggleAside = useToggleAside();
-  const [yjsConnectionStatus] = useAtom(yjsConnectionStatusAtom);

  useHotkeys(
    [
@@ -68,6 +60,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
          const event = new CustomEvent("closeFindDialogFromEditor", {});
          document.dispatchEvent(event);
        },
+        { preventDefault: false },
      ],
    ],
    [],
@@ -75,17 +68,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {

  return (
    <>
-      {yjsConnectionStatus === "disconnected" && (
-        <Tooltip
-          label={t("Real-time editor connection lost. Retrying...")}
-          openDelay={250}
-          withArrow
-        >
-          <ActionIcon variant="default" c="red" style={{ border: "none" }}>
-            <IconWifiOff size={20} stroke={2} />
-          </ActionIcon>
-        </Tooltip>
-      )}
+      <ConnectionWarning />

      {!readOnly && <PageStateSegmentedControl size="xs" />}

@@ -290,3 +273,51 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
    </>
  );
 }
+
+function ConnectionWarning() {
+  const { t } = useTranslation();
+  const yjsConnectionStatus = useAtomValue(yjsConnectionStatusAtom);
+  const [showWarning, setShowWarning] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const isDisconnected = ["disconnected", "connecting"].includes(
+      yjsConnectionStatus,
+    );
+
+    if (isDisconnected) {
+      if (!timeoutRef.current) {
+        timeoutRef.current = setTimeout(() => setShowWarning(true), 5000);
+      }
+    } else {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      setShowWarning(false);
+    }
+  }, [yjsConnectionStatus]);
+
+  // Cleanup only on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  if (!showWarning) return null;
+
+  return (
+    <Tooltip
+      label={t("Real-time editor connection lost. Retrying...")}
+      openDelay={250}
+      withArrow
+    >
+      <ActionIcon variant="default" c="red" style={{ border: "none" }}>
+        <IconWifiOff size={20} stroke={2} />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
@@ -269,12 +269,15 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);

  const prefetchPage = () => {
-    timerRef.current = setTimeout(() => {
-      queryClient.prefetchQuery({
-        queryKey: ["pages", node.data.slugId],
-        queryFn: () => getPageById({ pageId: node.data.slugId }),
+    timerRef.current = setTimeout(async () => {
+      const page = await queryClient.fetchQuery({
+        queryKey: ["pages", node.data.id],
+        queryFn: () => getPageById({ pageId: node.data.id }),
        staleTime: 5 * 60 * 1000,
      });
+      if (page?.slugId) {
+        queryClient.setQueryData(["pages", page.slugId], page);
+      }
    }, 150);
  };

@@ -8,7 +8,6 @@ import {
  Switch,
  Text,
  TextInput,
-  Tooltip,
 } from "@mantine/core";
 import { IconExternalLink, IconWorld, IconLock } from "@tabler/icons-react";
 import React, { useEffect, useMemo, useState } from "react";
@@ -21,12 +20,12 @@ import {
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { extractPageSlugId, getPageIcon } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import CopyTextButton from "@/components/common/copy.tsx";
 import { getAppUrl, isCloud } from "@/lib/config.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import classes from "@/features/share/components/share.module.css";
 import useTrial from "@/ee/hooks/use-trial.tsx";
-import { getCheckoutLink } from "@/ee/billing/services/billing-service.ts";

 interface ShareModalProps {
  readOnly: boolean;
@@ -35,7 +34,9 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { pageSlug } = useParams();
-  const pageId = extractPageSlugId(pageSlug);
+  const pageSlugId = extractPageSlugId(pageSlug);
+  const { data: page } = usePageQuery({ pageId: pageSlugId });
+  const pageId = page?.id;
  const { data: share } = useShareForPageQuery(pageId);
  const { spaceSlug } = useParams();
  const { isTrial } = useTrial();
@@ -27,9 +27,7 @@ import {
  getShares,
  updateShare,
 } from "@/features/share/services/share-service.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
 import { IPagination, QueryParams } from "@/lib/types.ts";
-import { useEffect } from "react";

 export function useGetSharesQuery(
  params?: QueryParams,
@@ -72,7 +70,7 @@ export function useShareForPageQuery(
    queryKey: ["share-for-page", pageId],
    queryFn: () => getShareForPage(pageId),
    enabled: !!pageId,
-    staleTime: 0,
+    staleTime: 60 * 1000,
    retry: false,
  });

@@ -1,6 +1,7 @@
 import { Group, Box, Button, TextInput, Stack, Textarea } from "@mantine/core";
 import React, { useEffect } from "react";
-import { useForm, zodResolver } from "@mantine/form";
+import { useForm } from "@mantine/form";
+import { zodResolver } from "mantine-form-zod-resolver";
 import * as z from "zod";
 import { useNavigate } from "react-router-dom";
 import { useCreateSpaceMutation } from "@/features/space/queries/space-query.ts";
@@ -9,12 +10,12 @@ import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";

 const formSchema = z.object({
-  name: z.string().trim().min(2).max(50),
+  name: z.string().trim().min(2).max(100),
  slug: z
    .string()
    .trim()
    .min(2)
-    .max(50)
+    .max(100)
    .regex(
      /^[a-zA-Z0-9]+$/,
      "Space slug must be alphanumeric. No special characters",
@@ -7,12 +7,12 @@ import { ISpace } from "@/features/space/types/space.types.ts";
 import { useTranslation } from "react-i18next";

 const formSchema = z.object({
-  name: z.string().min(2).max(50),
-  description: z.string().max(250),
+  name: z.string().min(2).max(100),
+  description: z.string().max(500),
  slug: z
    .string()
    .min(2)
-    .max(50)
+    .max(100)
    .regex(
      /^[a-zA-Z0-9]+$/,
      "Space slug must be alphanumeric. No special characters",
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";

 export default function SpaceList() {
  const { t } = useTranslation();
@@ -48,10 +49,10 @@ export default function SpaceList() {
                      variant="filled"
                      name={space.name}
                    />
-                    <div>
-                      <Text fz="sm" fw={500} lineClamp={1}>
+                    <div style={{ minWidth: 0, overflow: "hidden" }}>
+                      <AutoTooltipText fz="sm" fw={500} lineClamp={1}>
                        {space.name}
-                      </Text>
+                      </AutoTooltipText>
                      <Text fz="xs" c="dimmed" lineClamp={2}>
                        {space.description}
                      </Text>
@@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";

 type MemberType = "user" | "group";

@@ -138,10 +139,10 @@ export default function SpaceMembersList({

                      {member.type === "group" && <IconGroupCircle />}

-                      <div>
-                        <Text fz="sm" fw={500} lineClamp={1}>
+                      <div style={{ minWidth: 0, overflow: "hidden", maxWidth: 260 }}>
+                        <AutoTooltipText fz="sm" fw={500}>
                          {member?.name}
-                        </Text>
+                        </AutoTooltipText>
                        <Text fz="xs" c="dimmed">
                          {member.type == "user" && member?.email}

@@ -23,6 +23,7 @@ import SpaceSettingsModal from "@/features/space/components/settings-modal";
 import classes from "./all-spaces-list.module.css";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";

 interface AllSpacesListProps {
  spaces: any[];
@@ -96,10 +97,10 @@ export default function AllSpacesList({
                          variant="filled"
                          size="md"
                        />
-                        <div>
-                          <Text fz="sm" fw={500} lineClamp={1}>
+                        <div style={{ minWidth: 0, overflow: "hidden", maxWidth: 350 }}>
+                          <AutoTooltipText fz="sm" fw={500} lineClamp={1}>
                            {space.name}
-                          </Text>
+                          </AutoTooltipText>
                          {space.description && (
                            <Text fz="xs" c="dimmed" lineClamp={2}>
                              {space.description}
@@ -0,0 +1,34 @@
+import { MantineColor } from "@mantine/core";
+
+function hashCode(input: string) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return hash;
+}
+
+const defaultColors: MantineColor[] = [
+  "blue",
+  "cyan",
+  "grape",
+  "green",
+  "indigo",
+  "lime",
+  "orange",
+  "pink",
+  "red",
+  "teal",
+  "violet",
+];
+
+export function getInitialsColor(
+  name: string,
+  colors: MantineColor[] = defaultColors,
+) {
+  const hash = hashCode(name);
+  const index = Math.abs(hash) % colors.length;
+  return colors[index];
+}
@@ -1,6 +1,6 @@
 {
  "name": "server",
-  "version": "0.24.0",
+  "version": "0.24.1",
  "description": "",
  "author": "",
  "private": true,
@@ -30,76 +30,80 @@
    "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",
+    "@ai-sdk/google": "^3.0.9",
+    "@ai-sdk/openai": "^3.0.11",
+    "@ai-sdk/openai-compatible": "^2.0.12",
    "@aws-sdk/client-s3": "3.701.0",
    "@aws-sdk/lib-storage": "3.701.0",
    "@aws-sdk/s3-request-presigner": "3.701.0",
-    "@casl/ability": "^6.7.3",
    "@fastify/cookie": "^11.0.2",
-    "@fastify/multipart": "^9.0.3",
-    "@fastify/static": "^8.2.0",
-    "@langchain/textsplitters": "^0.1.0",
+    "@fastify/multipart": "^9.3.0",
+    "@fastify/static": "^8.3.0",
+    "@langchain/core": "1.1.13",
+    "@langchain/textsplitters": "1.0.1",
    "@nestjs-labs/nestjs-ioredis": "^11.0.4",
    "@nestjs/bullmq": "^11.0.4",
-    "@nestjs/common": "^11.1.9",
+    "@nestjs/common": "^11.1.11",
    "@nestjs/config": "^4.0.2",
-    "@nestjs/core": "^11.1.9",
+    "@nestjs/core": "^11.1.11",
    "@nestjs/event-emitter": "^3.0.1",
    "@nestjs/jwt": "11.0.0",
    "@nestjs/mapped-types": "^2.1.0",
    "@nestjs/passport": "^11.0.5",
-    "@nestjs/platform-fastify": "^11.1.9",
-    "@nestjs/platform-socket.io": "^11.1.9",
-    "@nestjs/schedule": "^6.0.1",
+    "@nestjs/platform-fastify": "^11.1.11",
+    "@nestjs/platform-socket.io": "^11.1.11",
+    "@nestjs/schedule": "^6.1.0",
    "@nestjs/terminus": "^11.0.0",
-    "@nestjs/websockets": "^11.1.9",
+    "@nestjs/websockets": "^11.1.11",
    "@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",
-    "ai": "^5.0.65",
-    "ai-sdk-ollama": "^0.12.0",
+    "ai": "^6.0.37",
+    "ai-sdk-ollama": "^3.1.1",
    "bcrypt": "^6.0.0",
    "bullmq": "^5.65.0",
    "cache-manager": "^6.4.3",
-    "cheerio": "^1.1.0",
+    "cheerio": "^1.1.2",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.3",
-    "cookie": "^1.0.2",
-    "fs-extra": "^11.3.0",
-    "happy-dom": "20.0.10",
+    "cookie": "^1.1.1",
+    "fs-extra": "^11.3.3",
+    "happy-dom": "20.1.0",
    "ioredis": "^5.4.1",
-    "jsonwebtoken": "^9.0.2",
+    "jsonwebtoken": "^9.0.3",
    "kysely": "^0.28.2",
    "kysely-migration-cli": "^0.4.2",
+    "kysely-postgres-js": "^3.0.0",
    "ldapts": "^7.4.0",
    "mammoth": "^1.11.0",
    "mime-types": "^2.1.35",
    "nanoid": "3.3.11",
    "nestjs-kysely": "^1.2.0",
-    "nodemailer": "^7.0.11",
+    "nestjs-pino": "^4.5.0",
+    "nodemailer": "^7.0.12",
    "openid-client": "^5.7.1",
-    "otpauth": "^9.4.0",
+    "otpauth": "^9.4.1",
    "p-limit": "^6.2.0",
    "passport-google-oauth20": "^2.0.0",
    "passport-jwt": "^4.0.1",
    "pdfjs-dist": "^5.4.394",
-    "pg": "^8.16.3",
    "pg-tsquery": "^8.4.2",
    "pgvector": "^0.2.1",
+    "postgres": "^3.4.8",
+    "pino-http": "^11.0.0",
+    "pino-pretty": "^13.1.3",
    "postmark": "^4.0.5",
    "react": "^18.3.1",
    "reflect-metadata": "^0.2.2",
    "rxjs": "^7.8.2",
    "sanitize-filename-ts": "1.0.2",
    "sharp": "0.34.3",
-    "socket.io": "^4.8.1",
+    "socket.io": "^4.8.3",
    "stripe": "^17.5.0",
    "tmp-promise": "^3.0.3",
    "typesense": "^2.1.0",
-    "ws": "^8.18.3",
+    "ws": "^8.19.0",
    "yauzl": "^3.2.0"
  },
  "devDependencies": {
@@ -116,7 +120,6 @@
    "@types/nodemailer": "^6.4.17",
    "@types/passport-google-oauth20": "^2.0.16",
    "@types/passport-jwt": "^4.0.1",
-    "@types/pg": "^8.11.11",
    "@types/supertest": "^6.0.2",
    "@types/ws": "^8.5.14",
    "@types/yauzl": "^2.10.3",
@@ -124,7 +127,7 @@
    "eslint-config-prettier": "^10.0.1",
    "globals": "^15.15.0",
    "jest": "^29.7.0",
-    "kysely-codegen": "^0.17.0",
+    "kysely-codegen": "^0.19.0",
    "prettier": "^3.5.1",
    "react-email": "3.0.2",
    "source-map-support": "^0.5.21",
@@ -18,6 +18,7 @@ import { SecurityModule } from './integrations/security/security.module';
 import { TelemetryModule } from './integrations/telemetry/telemetry.module';
 import { RedisModule } from '@nestjs-labs/nestjs-ioredis';
 import { RedisConfigService } from './integrations/redis/redis-config.service';
+import { LoggerModule } from './common/logger/logger.module';

 const enterpriseModules = [];
 try {
@@ -35,6 +36,7 @@ try {

@Module({
  imports: [
+    LoggerModule,
    CoreModule,
    DatabaseModule,
    EnvironmentModule,
@@ -26,7 +26,7 @@ export class CollaborationGateway {
  ) {
    this.redisConfig = parseRedisUrl(this.environmentService.getRedisUrl());

-    this.hocuspocus = HocuspocusServer.configure({
+    this.hocuspocus = new Hocuspocus({
      debounce: 10000,
      maxDebounce: 45000,
      unloadImmediately: false,
@@ -65,6 +65,6 @@ export class CollaborationGateway {
  }

  async destroy(): Promise<void> {
-    await this.hocuspocus.destroy();
+    //await this.hocuspocus.destroy();
  }
 }
@@ -1,14 +1,12 @@
 import { StarterKit } from '@tiptap/starter-kit';
 import { TextAlign } from '@tiptap/extension-text-align';
-import { TaskList } from '@tiptap/extension-task-list';
-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 { 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 { TaskList, TaskItem } from '@tiptap/extension-list';
 import {
  Heading,
  Callout,
@@ -42,11 +40,14 @@ import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
 // @tiptap/html library works best for generating prosemirror json state but not HTML
 // see: https://github.com/ueberdosis/tiptap/issues/5352
 // see:https://github.com/ueberdosis/tiptap/issues/4089
+//import { generateJSON } from '@tiptap/html';
 import { Node } from '@tiptap/pm/model';

 export const tiptapExtensions = [
  StarterKit.configure({
    codeBlock: false,
+    link: false,
+    trailingNode: false,
    heading: false,
  }),
  Heading,
@@ -59,7 +60,6 @@ export const tiptapExtensions = [
  TaskItem.configure({
    nested: true,
  }),
-  Underline,
  LinkExtension,
  Superscript,
  SubScript,
@@ -69,7 +69,7 @@ export class AuthenticationExtension implements Extension {
    }

    if (userSpaceRole === SpaceRole.READER) {
-      data.connection.readOnly = true;
+      data.connectionConfig.readOnly = true;
      this.logger.debug(`User granted readonly access to page: ${pageId}`);
    }

@@ -8,9 +8,11 @@ import { QueueModule } from '../../integrations/queue/queue.module';
 import { EventEmitterModule } from '@nestjs/event-emitter';
 import { HealthModule } from '../../integrations/health/health.module';
 import { CollaborationController } from './collaboration.controller';
+import { LoggerModule } from '../../common/logger/logger.module';

@Module({
  imports: [
+    LoggerModule,
    DatabaseModule,
    EnvironmentModule,
    CollaborationModule,
@@ -5,8 +5,8 @@ import {
  NestFastifyApplication,
 } from '@nestjs/platform-fastify';
 import { TransformHttpResponseInterceptor } from '../../common/interceptors/http-response.interceptor';
-import { InternalLogFilter } from '../../common/logger/internal-log-filter';
 import { Logger } from '@nestjs/common';
+import { Logger as PinoLogger } from 'nestjs-pino';

 async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
@@ -17,10 +17,12 @@ async function bootstrap() {
      maxParamLength: 500,
    }),
    {
-      logger: new InternalLogFilter(),
+      bufferLogs: true,
    },
  );

+  app.useLogger(app.get(PinoLogger));
+
  app.setGlobalPrefix('api', { exclude: ['/'] });

  app.enableCors();
@@ -0,0 +1,71 @@
+// https://github.com/WebReflection/html-escaper
+/**
+ * Copyright (C) 2017-present by Andrea Giammarchi - @WebReflection
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+const { replace } = '';
+
+// escape
+const es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
+const ca = /[&<>'"]/g;
+
+const esca = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  "'": '&#39;',
+  '"': '&quot;',
+};
+const pe = (m) => esca[m];
+
+/**
+ * Safely escape HTML entities such as `&`, `<`, `>`, `"`, and `'`.
+ * @param {string} es the input to safely escape
+ * @returns {string} the escaped input, and it **throws** an error if
+ *  the input type is unexpected, except for boolean and numbers,
+ *  converted as string.
+ */
+export const htmlEscape = (es) => replace.call(es, ca, pe);
+
+// unescape
+const unes = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"',
+};
+const cape = (m) => unes[m];
+
+/**
+ * Safely unescape previously escaped entities such as `&`, `<`, `>`, `"`,
+ * and `'`.
+ * @param {string} un a previously escaped string
+ * @returns {string} the unescaped input, and it **throws** an error if
+ *  the input type is unexpected, except for boolean and numbers,
+ *  converted as string.
+ */
+export const htmlUnescape = (un) => replace.call(un, es, cape);
@@ -2,6 +2,7 @@ import * as path from 'path';
 import * as bcrypt from 'bcrypt';
 import { sanitize } from 'sanitize-filename-ts';
 import { FastifyRequest } from 'fastify';
+import { Readable, Transform } from 'stream';

 export const envPath = path.resolve(process.cwd(), '..', '..', '.env');

@@ -98,3 +99,38 @@ export function hasLicenseOrEE(opts: {
  const { licenseKey, plan, isCloud } = opts;
  return Boolean(licenseKey) || (isCloud && plan === 'business');
 }
+
+/**
+ * Normalizes a database URL for postgres.js compatibility.
+ * - Removes `sslmode=no-verify` (not supported by postgres.js), keeps other sslmode values
+ * - Removes `schema` parameter (has no effect via connection string)
+ * Note: If we don't strip them, the connection will fail
+ */
+export function normalizePostgresUrl(url: string): string {
+  const parsed = new URL(url);
+  const newParams = new URLSearchParams();
+
+  for (const [key, value] of parsed.searchParams) {
+    if (key === 'sslmode' && value === 'no-verify') continue;
+    if (key === 'schema') continue;
+    newParams.append(key, value);
+  }
+
+  parsed.search = newParams.toString();
+  return parsed.toString();
+}
+
+export function createByteCountingStream(source: Readable) {
+  let bytesRead = 0;
+  const stream = new Transform({
+    transform(chunk, encoding, callback) {
+      bytesRead += chunk.length;
+      callback(null, chunk);
+    },
+  });
+
+  source.pipe(stream);
+  source.on('error', (err) => stream.emit('error', err));
+
+  return { stream, getBytesRead: () => bytesRead };
+}
@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { LoggerModule as PinoLoggerModule } from 'nestjs-pino';
+import { createPinoConfig } from './pino.config';
+
+@Module({
+  imports: [PinoLoggerModule.forRoot(createPinoConfig())],
+  exports: [PinoLoggerModule],
+})
+export class LoggerModule {}
@@ -0,0 +1,77 @@
+import { Params } from 'nestjs-pino';
+import { stdTimeFunctions } from 'pino';
+
+const CONTEXTS_TO_IGNORE = [
+  'InstanceLoader',
+  'RoutesResolver',
+  'RouterExplorer',
+  'WebSocketsController',
+];
+
+export function createPinoConfig(): Params {
+  const isProduction = process.env.NODE_ENV === 'production';
+  const isDebugMode = process.env.DEBUG_MODE === 'true';
+  const logHttp = process.env.LOG_HTTP === 'true';
+
+  const level = isProduction && !isDebugMode ? 'info' : 'debug';
+
+  return {
+    pinoHttp: {
+      level,
+      timestamp: stdTimeFunctions.isoTime,
+      transport: !isProduction
+        ? {
+            target: 'pino-pretty',
+            options: {
+              colorize: true,
+              singleLine: true,
+              translateTime: 'SYS:standard',
+              ignore: 'pid,hostname',
+            },
+          }
+        : undefined,
+      formatters: {
+        level: (label) => ({ level: label }),
+        log: (object: Record<string, unknown>) => {
+          if (isProduction && !isDebugMode) {
+            const context = object['context'] as string | undefined;
+            if (context && CONTEXTS_TO_IGNORE.includes(context)) {
+              return { filtered: true };
+            }
+          }
+          return object;
+        },
+      },
+      serializers: {
+        req: (req) => {
+          const forwardedFor = req.headers?.['x-forwarded-for'];
+          const ip =
+            req.headers?.['cf-connecting-ip'] ||
+            (typeof forwardedFor === 'string' ? forwardedFor.split(',')[0]?.trim() : undefined) ||
+            req.remoteAddress;
+
+          return {
+            method: req.method,
+            url: req.url,
+            ip,
+            userAgent: req.headers?.['user-agent'],
+          };
+        },
+        res: (res) => ({
+          statusCode: res.statusCode,
+        }),
+      },
+      customLogLevel: (_req, res, err) => {
+        if (res.statusCode >= 500 || err) return 'error';
+        if (res.statusCode >= 400) return 'warn';
+        return 'info';
+      },
+      autoLogging: logHttp
+        ? {
+            ignore: (req) =>
+              req.url === '/api/health' || req.url === '/api/health/live',
+          }
+        : false,
+    },
+  };
+}
@@ -181,7 +181,9 @@ export class AttachmentController {
    }

    try {
-      const fileStream = await this.storageService.read(attachment.filePath);
+      const fileStream = await this.storageService.readStream(
+        attachment.filePath,
+      );
      res.headers({
        'Content-Type': attachment.mimeType,
        'Cache-Control': 'private, max-age=3600',
@@ -241,7 +243,9 @@ export class AttachmentController {
    }

    try {
-      const fileStream = await this.storageService.read(attachment.filePath);
+      const fileStream = await this.storageService.readStream(
+        attachment.filePath,
+      );
      res.headers({
        'Content-Type': attachment.mimeType,
        'Cache-Control': 'public, max-age=3600',
@@ -367,14 +371,14 @@ export class AttachmentController {
    const filePath = `${getAttachmentFolderPath(attachmentType, workspace.id)}/${fileName}`;

    try {
-      const fileStream = await this.storageService.read(filePath);
+      const fileStream = await this.storageService.readStream(filePath);
      res.headers({
        'Content-Type': getMimeType(filePath),
        'Cache-Control': 'private, max-age=86400',
      });
      return res.send(fileStream);
    } catch (err) {
-     // this.logger.error(err);
+      // this.logger.error(err);
      throw new NotFoundException('File not found');
    }
  }
@@ -5,15 +5,17 @@ import { sanitizeFileName } from '../../common/helpers';
 import * as sharp from 'sharp';

 export interface PreparedFile {
-  buffer: Buffer;
+  buffer?: Buffer;
  fileName: string;
  fileSize: number;
  fileExtension: string;
  mimeType: string;
+  multiPartFile?: MultipartFile;
 }

 export async function prepareFile(
  filePromise: Promise<MultipartFile>,
+  options: { skipBuffer?: boolean } = {},
 ): Promise<PreparedFile> {
  const file = await filePromise;

@@ -22,10 +24,16 @@ export async function prepareFile(
  }

  try {
-    const buffer = await file.toBuffer();
+    let buffer: Buffer | undefined;
+    let fileSize = 0;
+
+    if (!options.skipBuffer) {
+      buffer = await file.toBuffer();
+      fileSize = buffer.length;
+    }
+
    const sanitizedFilename = sanitizeFileName(file.filename);
    const fileName = sanitizedFilename.slice(0, 255);
-    const fileSize = buffer.length;
    const fileExtension = path.extname(file.filename).toLowerCase();

    return {
@@ -34,6 +42,7 @@ export async function prepareFile(
      fileSize,
      fileExtension,
      mimeType: file.mimetype,
+      multiPartFile: file,
    };
  } catch (error) {
    throw error;
@@ -4,6 +4,7 @@ import {
  Logger,
  NotFoundException,
 } from '@nestjs/common';
+import { Readable } from 'stream';
 import { StorageService } from '../../../integrations/storage/storage.service';
 import { MultipartFile } from '@fastify/multipart';
 import {
@@ -26,6 +27,7 @@ import { SpaceRepo } from '@docmost/db/repos/space/space.repo';
 import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
 import { Queue } from 'bullmq';
+import { createByteCountingStream } from '../../../common/helpers/utils';

@Injectable()
 export class AttachmentService {
@@ -49,7 +51,9 @@ export class AttachmentService {
    attachmentId?: string;
  }) {
    const { filePromise, pageId, spaceId, userId, workspaceId } = opts;
-    const preparedFile: PreparedFile = await prepareFile(filePromise);
+    const preparedFile: PreparedFile = await prepareFile(filePromise, {
+      skipBuffer: true,
+    });

    let isUpdate = false;
    let attachmentId = null;
@@ -81,7 +85,14 @@ export class AttachmentService {

    const filePath = `${getAttachmentFolderPath(AttachmentType.File, workspaceId)}/${attachmentId}/${preparedFile.fileName}`;

-    await this.uploadToDrive(filePath, preparedFile.buffer);
+    const { stream, getBytesRead } = createByteCountingStream(
+      preparedFile.multiPartFile.file,
+    );
+
+    await this.uploadToDrive(filePath, stream);
+
+    // Update fileSize from the consumed stream
+    preparedFile.fileSize = getBytesRead();

    let attachment: Attachment = null;
    try {
@@ -142,7 +153,10 @@ export class AttachmentService {
    const preparedFile: PreparedFile = await prepareFile(filePromise);
    validateFileType(preparedFile.fileExtension, validImageExtensions);

-    const processedBuffer = await compressAndResizeIcon(preparedFile.buffer, type);
+    const processedBuffer = await compressAndResizeIcon(
+      preparedFile.buffer,
+      type,
+    );
    preparedFile.buffer = processedBuffer;
    preparedFile.fileSize = processedBuffer.length;
    preparedFile.fileName = uuid4() + preparedFile.fileExtension;
@@ -232,9 +246,9 @@ export class AttachmentService {
    }
  }

-  async uploadToDrive(filePath: string, fileBuffer: any) {
+  async uploadToDrive(filePath: string, fileContent: Buffer | Readable) {
    try {
-      await this.storageService.upload(filePath, fileBuffer);
+      await this.storageService.upload(filePath, fileContent);
    } catch (err) {
      this.logger.error('Error uploading file to drive:', err);
      throw new BadRequestException('Error uploading file to drive');
@@ -11,7 +11,7 @@ import {Transform, TransformFnParams} from "class-transformer";

 export class CreateGroupDto {
  @MinLength(2)
-  @MaxLength(50)
+  @MaxLength(100)
  @IsString()
  @Transform(({ value }: TransformFnParams) => value?.trim())
  name: string;
@@ -74,16 +74,13 @@ export class SearchService {
      queryResults = queryResults.where('spaceId', '=', searchParams.spaceId);
    } else if (opts.userId && !searchParams.spaceId) {
      // only search spaces the user is a member of
-      const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(
-        opts.userId,
-      );
-      if (userSpaceIds.length > 0) {
-        queryResults = queryResults
-          .where('spaceId', 'in', userSpaceIds)
-          .where('workspaceId', '=', opts.workspaceId);
-      } else {
-        return [];
-      }
+      queryResults = queryResults
+        .where(
+          'spaceId',
+          'in',
+          this.spaceMemberRepo.getUserSpaceIdsQuery(opts.userId),
+        )
+        .where('workspaceId', '=', opts.workspaceId);
    } else if (searchParams.shareId && !searchParams.spaceId && !opts.userId) {
      // search in shares
      const shareId = searchParams.shareId;
@@ -7,6 +7,7 @@ import { validate as isValidUUID } from 'uuid';
 import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo';
 import { EnvironmentService } from '../../integrations/environment/environment.service';
 import { Workspace } from '@docmost/db/types/entity.types';
+import { htmlEscape } from '../../common/helpers/html-escaper';

@Controller('share')
 export class ShareSeoController {
@@ -68,7 +69,7 @@ export class ShareSeoController {
        return this.sendIndex(indexFilePath, res);
      }

-      const rawTitle = share.sharedPage.title ?? 'untitled';
+      const rawTitle = htmlEscape(share?.sharedPage.title ?? 'untitled');
      const metaTitle =
        rawTitle.length > 80 ? `${rawTitle.slice(0, 77)}…` : rawTitle;

@@ -123,80 +123,82 @@ export class ShareService {
      .withRecursive('page_hierarchy', (cte) =>
        cte
          .selectFrom('pages')
+          .leftJoin('shares', 'shares.pageId', 'pages.id')
          .select([
-            'id',
-            'slugId',
+            'pages.id',
+            'pages.slugId',
            'pages.title',
            'pages.icon',
-            'parentPageId',
+            'pages.parentPageId',
            sql`0`.as('level'),
+            'shares.id as shareId',
+            'shares.key as shareKey',
+            'shares.includeSubPages',
+            'shares.searchIndexing',
+            'shares.creatorId',
+            'shares.spaceId',
+            'shares.workspaceId',
+            'shares.createdAt',
          ])
-          .where(isValidUUID(pageId) ? 'id' : 'slugId', '=', pageId)
-          .where('deletedAt', 'is', null)
-          .unionAll((union) =>
-            union
-              .selectFrom('pages as p')
-              .select([
-                'p.id',
-                'p.slugId',
-                'p.title',
-                'p.icon',
-                'p.parentPageId',
-                // Increase the level by 1 for each ancestor.
-                sql`ph.level + 1`.as('level'),
-              ])
-              .innerJoin('page_hierarchy as ph', 'ph.parentPageId', 'p.id')
-              .where('p.deletedAt', 'is', null),
+          .where(isValidUUID(pageId) ? 'pages.id' : 'pages.slugId', '=', pageId)
+          .where('pages.deletedAt', 'is', null)
+          .unionAll(
+            (union) =>
+              union
+                .selectFrom('pages as p')
+                .innerJoin('page_hierarchy as ph', 'ph.parentPageId', 'p.id')
+                .leftJoin('shares as s', 's.pageId', 'p.id')
+                .select([
+                  'p.id',
+                  'p.slugId',
+                  'p.title',
+                  'p.icon',
+                  'p.parentPageId',
+                  sql`ph.level + 1`.as('level'),
+                  's.id as shareId',
+                  's.key as shareKey',
+                  's.includeSubPages',
+                  's.searchIndexing',
+                  's.creatorId',
+                  's.spaceId',
+                  's.workspaceId',
+                  's.createdAt',
+                ])
+                .where('p.deletedAt', 'is', null)
+                .where(sql`ph.share_id`, 'is', null) // stop if share found
+                .where(sql`ph.level`, '<', sql`25`), // prevent loop
          ),
      )
      .selectFrom('page_hierarchy')
-      .leftJoin('shares', 'shares.pageId', 'page_hierarchy.id')
-      .select([
-        'page_hierarchy.id as sharedPageId',
-        'page_hierarchy.slugId as sharedPageSlugId',
-        'page_hierarchy.title as sharedPageTitle',
-        'page_hierarchy.icon as sharedPageIcon',
-        'page_hierarchy.level as level',
-        'shares.id',
-        'shares.key',
-        'shares.pageId',
-        'shares.includeSubPages',
-        'shares.searchIndexing',
-        'shares.creatorId',
-        'shares.spaceId',
-        'shares.workspaceId',
-        'shares.createdAt',
-        'shares.updatedAt',
-      ])
-      .where('shares.id', 'is not', null)
-      .orderBy('page_hierarchy.level', 'asc')
+      .selectAll()
+      .where('shareId', 'is not', null)
+      .limit(1)
      .executeTakeFirst();

-    if (!share || share.workspaceId != workspaceId) {
+    if (!share || share.workspaceId !== workspaceId) {
      return undefined;
    }

-    if (share.level === 1 && !share.includeSubPages) {
-      // we can only show a page if its shared ancestor permits it
+    if ((share.level as number) > 0 && !share.includeSubPages) {
      return undefined;
    }

    return {
-      id: share.id,
-      key: share.key,
+      id: share.shareId,
+      key: share.shareKey,
      includeSubPages: share.includeSubPages,
      searchIndexing: share.searchIndexing,
-      pageId: share.pageId,
+      pageId: share.id,
      creatorId: share.creatorId,
      spaceId: share.spaceId,
      workspaceId: share.workspaceId,
      createdAt: share.createdAt,
      level: share.level,
      sharedPage: {
-        id: share.sharedPageId,
-        slugId: share.sharedPageSlugId,
-        title: share.sharedPageTitle,
-        icon: share.sharedPageIcon,
+        id: share.id,
+        slugId: share.slugId,
+        title: share.title,
+        icon: share.icon,
      },
    };
  }
@@ -9,7 +9,7 @@ import {Transform, TransformFnParams} from "class-transformer";

 export class CreateSpaceDto {
  @MinLength(2)
-  @MaxLength(50)
+  @MaxLength(100)
  @IsString()
  @Transform(({ value }: TransformFnParams) => value?.trim())
  name: string;
@@ -19,7 +19,7 @@ export class CreateSpaceDto {
  description?: string;

  @MinLength(2)
-  @MaxLength(50)
+  @MaxLength(100)
  @IsAlphanumeric()
  slug: string;
 }
@@ -7,8 +7,7 @@ import {
 } from '@nestjs/common';
 import { InjectKysely, KyselyModule } from 'nestjs-kysely';
 import { EnvironmentService } from '../integrations/environment/environment.service';
-import { CamelCasePlugin, LogEvent, PostgresDialect, sql } from 'kysely';
-import { Pool, types } from 'pg';
+import { CamelCasePlugin, LogEvent, sql } from 'kysely';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
 import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo';
 import { UserRepo } from '@docmost/db/repos/user/user.repo';
@@ -26,9 +25,9 @@ import { UserTokenRepo } from './repos/user-token/user-token.repo';
 import { BacklinkRepo } from '@docmost/db/repos/backlink/backlink.repo';
 import { ShareRepo } from '@docmost/db/repos/share/share.repo';
 import { PageListener } from '@docmost/db/listeners/page.listener';
-
-// https://github.com/brianc/node-postgres/issues/811
-types.setTypeParser(types.builtins.INT8, (val) => Number(val));
+import { PostgresJSDialect } from 'kysely-postgres-js';
+import * as postgres from 'postgres';
+import { normalizePostgresUrl } from '../common/helpers';

@Global()
@Module({
@@ -37,26 +36,30 @@ types.setTypeParser(types.builtins.INT8, (val) => Number(val));
      imports: [],
      inject: [EnvironmentService],
      useFactory: (environmentService: EnvironmentService) => ({
-        dialect: new PostgresDialect({
-          pool: new Pool({
-            connectionString: environmentService.getDatabaseURL(),
-            max: environmentService.getDatabaseMaxPool(),
-          }).on('error', (err) => {
-            console.error('Database error:', err.message);
-          }),
+        dialect: new PostgresJSDialect({
+          postgres: postgres(
+            normalizePostgresUrl(environmentService.getDatabaseURL()),
+            {
+              max: environmentService.getDatabaseMaxPool(),
+              onnotice: () => {},
+              types: {
+                bigint: {
+                  to: 20,
+                  from: [20, 1700],
+                  serialize: (value: number) => value.toString(),
+                  parse: (value: string) => Number.parseInt(value),
+                },
+              },
+            },
+          ),
        }),
        plugins: [new CamelCasePlugin()],
        log: (event: LogEvent) => {
          if (environmentService.getNodeEnv() !== 'development') return;
          const logger = new Logger(DatabaseModule.name);
-          if (event.level) {
-            if (process.env.DEBUG_DB?.toLowerCase() === 'true') {
-              logger.debug(event.query.sql);
-              logger.debug('query time: ' + event.queryDurationMillis + ' ms');
-              //if (event.query.parameters.length > 0) {
-              // logger.debug('parameters: ' + event.query.parameters);
-              //}
-            }
+          if (process.env.DEBUG_DB?.toLowerCase() === 'true') {
+            logger.debug(event.query.sql);
+            logger.debug('query time: ' + event.queryDurationMillis + ' ms');
          }
        },
      }),
@@ -1,25 +1,19 @@
 import * as path from 'path';
 import { promises as fs } from 'fs';
-import pg from 'pg';
-import {
-  Kysely,
-  Migrator,
-  PostgresDialect,
-  FileMigrationProvider,
-} from 'kysely';
+import { Kysely, Migrator, FileMigrationProvider } from 'kysely';
 import { run } from 'kysely-migration-cli';
 import * as dotenv from 'dotenv';
-import { envPath } from '../common/helpers/utils';
+import { envPath, normalizePostgresUrl } from '../common/helpers';
+import { PostgresJSDialect } from 'kysely-postgres-js';
+import postgres from 'postgres';

 dotenv.config({ path: envPath });

 const migrationFolder = path.join(__dirname, './migrations');

 const db = new Kysely<any>({
-  dialect: new PostgresDialect({
-    pool: new pg.Pool({
-      connectionString: process.env.DATABASE_URL,
-    }) as any,
+  dialect: new PostgresJSDialect({
+    postgres: postgres(normalizePostgresUrl(process.env.DATABASE_URL)),
  }),
 });

@@ -293,24 +293,18 @@ export class PageRepo {
  }

  async getRecentPages(userId: string, pagination: PaginationOptions) {
-    const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(userId);
-
    const query = this.db
      .selectFrom('pages')
      .select(this.baseFields)
      .select((eb) => this.withSpace(eb))
-      .where('spaceId', 'in', userSpaceIds)
+      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(userId))
      .where('deletedAt', 'is', null)
      .orderBy('updatedAt', 'desc');

-    const hasEmptyIds = userSpaceIds.length === 0;
-    const result = executeWithPagination(query, {
+    return executeWithPagination(query, {
      page: pagination.page,
      perPage: pagination.limit,
-      hasEmptyIds,
    });
-
-    return result;
  }

  async getDeletedPagesInSpace(spaceId: string, pagination: PaginationOptions) {
@@ -137,25 +137,19 @@ export class ShareRepo {
  }

  async getShares(userId: string, pagination: PaginationOptions) {
-    const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(userId);
-
    const query = this.db
      .selectFrom('shares')
      .select(this.baseFields)
      .select((eb) => this.withPage(eb))
      .select((eb) => this.withSpace(eb, userId))
      .select((eb) => this.withCreator(eb))
-      .where('spaceId', 'in', userSpaceIds)
+      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(userId))
      .orderBy('updatedAt', 'desc');

-    const hasEmptyIds = userSpaceIds.length === 0;
-    const result = executeWithPagination(query, {
+    return executeWithPagination(query, {
      page: pagination.page,
      perPage: pagination.limit,
-      hasEmptyIds,
    });
-
-    return result;
  }

  withPage(eb: ExpressionBuilder<DB, 'shares'>) {
@@ -209,34 +209,33 @@ export class SpaceMemberRepo {
    return roles;
  }

-  async getUserSpaceIds(userId: string): Promise<string[]> {
-    const membership = await this.db
+  getUserSpaceIdsQuery(userId: string) {
+    return this.db
      .selectFrom('spaceMembers')
      .innerJoin('spaces', 'spaces.id', 'spaceMembers.spaceId')
-      .select(['spaces.id'])
+      .select('spaces.id')
      .where('userId', '=', userId)
      .union(
        this.db
          .selectFrom('spaceMembers')
          .innerJoin('groupUsers', 'groupUsers.groupId', 'spaceMembers.groupId')
          .innerJoin('spaces', 'spaces.id', 'spaceMembers.spaceId')
-          .select(['spaces.id'])
+          .select('spaces.id')
          .where('groupUsers.userId', '=', userId),
-      )
-      .execute();
+      );
+  }

+  async getUserSpaceIds(userId: string): Promise<string[]> {
+    const membership = await this.getUserSpaceIdsQuery(userId).execute();
    return membership.map((space) => space.id);
  }

  async getUserSpaces(userId: string, pagination: PaginationOptions) {
-    const userSpaceIds = await this.getUserSpaceIds(userId);
-
    let query = this.db
      .selectFrom('spaces')
      .selectAll()
      .select((eb) => [this.spaceRepo.withMemberCount(eb)])
-      //.where('workspaceId', '=', workspaceId)
-      .where('id', 'in', userSpaceIds)
+      .where('id', 'in', this.getUserSpaceIdsQuery(userId))
      .orderBy('createdAt', 'asc');

    if (pagination.query) {
@@ -253,14 +252,9 @@ export class SpaceMemberRepo {
      );
    }

-    const hasEmptyIds = userSpaceIds.length === 0;
-
-    const result = executeWithPagination(query, {
+    return executeWithPagination(query, {
      page: pagination.page,
      perPage: pagination.limit,
-      hasEmptyIds,
    });
-
-    return result;
  }
 }
@@ -105,7 +105,7 @@ export class EnvironmentVariables {

  @IsOptional()
  @ValidateIf((obj) => obj.AI_DRIVER)
-  @IsIn(['openai', 'gemini', 'ollama'])
+  @IsIn(['openai', 'openai-compatible', 'gemini', 'ollama'])
  @IsString()
  AI_DRIVER: string;

@@ -117,11 +117,10 @@ export class EnvironmentVariables {

  @IsOptional()
  @ValidateIf((obj) => obj.AI_EMBEDDING_DIMENSION)
-  @IsIn(['768', '1024', '1536'])
+  @IsIn(['768', '1024', '1536', '2000', '3072'])
  @IsString()
  AI_EMBEDDING_DIMENSION: string;

-
  @IsOptional()
  @ValidateIf((obj) => obj.AI_DRIVER)
  @IsString()
@@ -129,13 +128,20 @@ export class EnvironmentVariables {
  AI_COMPLETION_MODEL: string;

  @IsOptional()
-  @ValidateIf((obj) => obj.AI_DRIVER && obj.AI_DRIVER === 'openai')
+  @ValidateIf(
+    (obj) =>
+      obj.AI_DRIVER && ['openai', 'openai-compatible'].includes(obj.AI_DRIVER),
+  )
  @IsString()
  @IsNotEmpty()
  OPENAI_API_KEY: string;

  @IsOptional()
-  @ValidateIf((obj) => obj.AI_DRIVER && obj.OPENAI_API_URL && obj.AI_DRIVER === 'openai')
+  @ValidateIf(
+    (obj) =>
+      obj.AI_DRIVER === 'openai-compatible' ||
+      (obj.AI_DRIVER === 'openai' && obj.OPENAI_API_URL),
+  )
  @IsUrl({ protocols: ['http', 'https'], require_tld: false })
  OPENAI_API_URL: string;

@@ -55,7 +55,7 @@ export class ExportController {
      throw new ForbiddenException();
    }

-    const zipFileBuffer = await this.exportService.exportPages(
+    const zipFileStream = await this.exportService.exportPages(
      dto.pageId,
      dto.format,
      dto.includeAttachments,
@@ -70,7 +70,7 @@ export class ExportController {
        'attachment; filename="' + encodeURIComponent(fileName) + '"',
    });

-    res.send(zipFileBuffer);
+    res.send(zipFileStream);
  }

  @UseGuards(JwtAuthGuard)
@@ -100,6 +100,6 @@ export class ExportController {
        '"',
    });

-    res.send(exportFile.fileBuffer);
+    res.send(exportFile.fileStream);
  }
 }
@@ -177,7 +177,7 @@ export class ExportService {

    const fileName = `${space.name}-space-export.zip`;
    return {
-      fileBuffer: zipFile,
+      fileStream: zipFile,
      fileName,
    };
  }
@@ -10,46 +10,59 @@ import {
 } from '@nestjs/common';
 import SpaceAbilityFactory from '../../core/casl/abilities/space-ability.factory';
 import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
-import { User } from '@docmost/db/types/entity.types';
+import { User, Workspace } from '@docmost/db/types/entity.types';
 import {
  SpaceCaslAction,
  SpaceCaslSubject,
 } from '../../core/casl/interfaces/space-ability.type';
+import {
+  WorkspaceCaslAction,
+  WorkspaceCaslSubject,
+} from '../../core/casl/interfaces/workspace-ability.type';
+import WorkspaceAbilityFactory from '../../core/casl/abilities/workspace-ability.factory';
+import { AuthWorkspace } from '../../common/decorators/auth-workspace.decorator';
 import { InjectKysely } from 'nestjs-kysely';
 import { KyselyDB } from '@docmost/db/types/kysely.types';
 import { AuthUser } from '../../common/decorators/auth-user.decorator';
 import { FileTaskIdDto } from './dto/file-task-dto';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
+import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
+import { executeWithPagination } from '@docmost/db/pagination/pagination';

@Controller('file-tasks')
 export class FileTaskController {
  constructor(
-    private readonly spaceMemberRepo: SpaceMemberRepo,
    private readonly spaceAbility: SpaceAbilityFactory,
+    private readonly workspaceAbility: WorkspaceAbilityFactory,
+    private readonly spaceMemberRepo: SpaceMemberRepo,
    @InjectKysely() private readonly db: KyselyDB,
  ) {}

  @UseGuards(JwtAuthGuard)
  @HttpCode(HttpStatus.OK)
  @Post()
-  async getFileTasks(@AuthUser() user: User) {
-    const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(user.id);
-
-    if (!userSpaceIds || userSpaceIds.length === 0) {
-      return [];
+  async getFileTasks(
+    @Body() pagination: PaginationOptions,
+    @AuthUser() user: User,
+    @AuthWorkspace() workspace: Workspace,
+  ) {
+    const ability = this.workspaceAbility.createForUser(user, workspace);
+    if (
+      ability.cannot(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Settings)
+    ) {
+      throw new ForbiddenException();
    }

-    const fileTasks = await this.db
+    const query = this.db
      .selectFrom('fileTasks')
      .selectAll()
-      .where('spaceId', 'in', userSpaceIds)
-      .execute();
+      .where('spaceId', 'in', this.spaceMemberRepo.getUserSpaceIdsQuery(user.id))
+      .orderBy('createdAt', 'desc');

-    if (!fileTasks) {
-      throw new NotFoundException('File task not found');
-    }
-
-    return fileTasks;
+    return executeWithPagination(query, {
+      page: pagination.page,
+      perPage: pagination.limit,
+    });
  }

  @UseGuards(JwtAuthGuard)
@@ -10,7 +10,11 @@ import {
 } from '../../../collaboration/collaboration.util';
 import { InjectKysely } from 'nestjs-kysely';
 import { KyselyDB } from '@docmost/db/types/kysely.types';
-import { generateSlugId, sanitizeFileName } from '../../../common/helpers';
+import {
+  generateSlugId,
+  sanitizeFileName,
+  createByteCountingStream,
+} from '../../../common/helpers';
 import { generateJitteredKeyBetween } from 'fractional-indexing-jittered';
 import { TiptapTransformer } from '@hocuspocus/transformer';
 import * as Y from 'yjs';
@@ -173,15 +177,24 @@ export class ImportService {
    };
  }

-  async getNewPagePosition(spaceId: string): Promise<string> {
-    const lastPage = await this.db
+  async getNewPagePosition(
+    spaceId: string,
+    parentPageId?: string,
+  ): Promise<string> {
+    let query = this.db
      .selectFrom('pages')
      .select(['id', 'position'])
      .where('spaceId', '=', spaceId)
      .orderBy('position', (ob) => ob.collate('C').desc())
-      .limit(1)
-      .where('parentPageId', 'is', null)
-      .executeTakeFirst();
+      .limit(1);
+
+    if (parentPageId) {
+      query = query.where('parentPageId', '=', parentPageId);
+    } else {
+      query = query.where('parentPageId', 'is', null);
+    }
+
+    const lastPage = await query.executeTakeFirst();

    if (lastPage) {
      return generateJitteredKeyBetween(lastPage.position, null);
@@ -198,20 +211,21 @@ export class ImportService {
    workspaceId: string,
  ) {
    const file = await filePromise;
-    const fileBuffer = await file.toBuffer();
    const fileExtension = path.extname(file.filename).toLowerCase();
    const fileName = sanitizeFileName(
      path.basename(file.filename, fileExtension),
    );
-    const fileSize = fileBuffer.length;
-
    const fileNameWithExt = fileName + fileExtension;

    const fileTaskId = uuid7();
    const filePath = `${getFileTaskFolderPath(FileTaskType.Import, workspaceId)}/${fileTaskId}/${fileNameWithExt}`;

    // upload file
-    await this.storageService.upload(filePath, fileBuffer);
+    const { stream, getBytesRead } = createByteCountingStream(file.file);
+
+    await this.storageService.upload(filePath, stream);
+
+    const fileSize = getBytesRead();

    const fileTask = await this.db
      .insertInto('fileTasks')
@@ -20,9 +20,15 @@ export class LocalDriver implements StorageDriver {
    return join(this.config.storagePath, filePath);
  }

-  async upload(filePath: string, file: Buffer): Promise<void> {
+  async upload(filePath: string, file: Buffer | Readable): Promise<void> {
    try {
-      await fs.outputFile(this._fullPath(filePath), file);
+      const fullPath = this._fullPath(filePath);
+      if (file instanceof Buffer) {
+        await fs.outputFile(fullPath, file);
+      } else {
+        await fs.mkdir(dirname(fullPath), { recursive: true });
+        await pipeline(file, createWriteStream(fullPath));
+      }
    } catch (err) {
      throw new Error(`Failed to upload file: ${(err as Error).message}`);
    }
@@ -42,7 +48,7 @@ export class LocalDriver implements StorageDriver {
    try {
      const fromFullPath = this._fullPath(fromFilePath);
      const toFullPath = this._fullPath(toFilePath);
-      
+
      if (await this.exists(fromFilePath)) {
        await fs.copy(fromFullPath, toFullPath);
      }
@@ -23,19 +23,21 @@ export class S3Driver implements StorageDriver {
    this.s3Client = new S3Client(config as any);
  }

-  async upload(filePath: string, file: Buffer): Promise<void> {
+  async upload(filePath: string, file: Buffer | Readable): Promise<void> {
    try {
      const contentType = getMimeType(filePath);

-      const command = new PutObjectCommand({
-        Bucket: this.config.bucket,
-        Key: filePath,
-        Body: file,
-        ContentType: contentType,
-        // ACL: "public-read",
+      const upload = new Upload({
+        client: this.s3Client,
+        params: {
+          Bucket: this.config.bucket,
+          Key: filePath,
+          Body: file,
+          ContentType: contentType,
+        },
      });

-      await this.s3Client.send(command);
+      await upload.done();
    } catch (err) {
      throw new Error(`Failed to upload file: ${(err as Error).message}`);
    }
@@ -1,7 +1,7 @@
 import { Readable } from 'stream';

 export interface StorageDriver {
-  upload(filePath: string, file: Buffer): Promise<void>;
+  upload(filePath: string, file: Buffer | Readable): Promise<void>;

  uploadStream(filePath: string, file: Readable, options?: { recreateClient?: boolean }): Promise<void>;

@@ -8,9 +8,9 @@ export class StorageService {
  private readonly logger = new Logger(StorageService.name);
  constructor(
    @Inject(STORAGE_DRIVER_TOKEN) private storageDriver: StorageDriver,
-  ) {}
+  ) { }

-  async upload(filePath: string, fileContent: Buffer | any) {
+  async upload(filePath: string, fileContent: Buffer | Readable) {
    await this.storageDriver.upload(filePath, fileContent);
    this.logger.debug(`File uploaded successfully. Path: ${filePath}`);
  }
@@ -5,9 +5,9 @@ import {
  NestFastifyApplication,
 } from '@nestjs/platform-fastify';
 import { Logger, NotFoundException, ValidationPipe } from '@nestjs/common';
+import { Logger as PinoLogger } from 'nestjs-pino';
 import { TransformHttpResponseInterceptor } from './common/interceptors/http-response.interceptor';
 import { WsRedisIoAdapter } from './ws/adapter/ws-redis.adapter';
-import { InternalLogFilter } from './common/logger/internal-log-filter';
 import fastifyMultipart from '@fastify/multipart';
 import fastifyCookie from '@fastify/cookie';

@@ -15,17 +15,21 @@ async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter({
-      ignoreTrailingSlash: true,
-      ignoreDuplicateSlashes: true,
-      maxParamLength: 1000,
      trustProxy: true,
+      routerOptions: {
+        maxParamLength: 1000,
+        ignoreTrailingSlash: true,
+        ignoreDuplicateSlashes: true,
+      },
    }),
    {
      rawBody: true,
-      logger: new InternalLogFilter(),
+      bufferLogs: true,
    },
  );

+  app.useLogger(app.get(PinoLogger));
+
  app.setGlobalPrefix('api', {
    exclude: ['robots.txt', 'share/:shareId/p/:pageSlug'],
  });
@@ -97,9 +101,7 @@ async function bootstrap() {

  const port = process.env.PORT || 3000;
  await app.listen(port, '0.0.0.0', () => {
-    logger.log(
-      `Listening on http://127.0.0.1:${port} / ${process.env.APP_URL}`,
-    );
+    logger.log(`Listening on http://127.0.0.1:${port} / ${process.env.APP_URL}`);
  });
 }

@@ -1,7 +1,7 @@
 {
  "name": "docmost",
  "homepage": "https://docmost.com",
-  "version": "0.24.0",
+  "version": "0.24.1",
  "private": true,
  "scripts": {
    "build": "nx run-many -t build",
@@ -15,59 +15,56 @@
    "server:dev": "nx run server:start:dev",
    "server:start": "nx run server:start:prod",
    "email:dev": "nx run server:email:dev",
-    "dev": "pnpm concurrently -n \"frontend,backend\" -c \"cyan,green\" \"pnpm run client:dev\" \"pnpm run server:dev\""
+    "dev": "pnpm concurrently -n \"frontend,backend\" -c \"cyan,green\" \"pnpm run client:dev\" \"pnpm run server:dev\"",
+    "clean": "rm -rf apps/*/dist packages/*/dist apps/client/node_modules/.vite"
  },
  "dependencies": {
    "@braintree/sanitize-url": "^7.1.0",
+    "@casl/ability": "6.8.0",
    "@docmost/editor-ext": "workspace:*",
    "@floating-ui/dom": "^1.7.3",
-    "@hocuspocus/extension-redis": "^2.15.3",
-    "@hocuspocus/provider": "^2.15.3",
-    "@hocuspocus/server": "^2.15.3",
-    "@hocuspocus/transformer": "^2.15.3",
+    "@hocuspocus/extension-redis": "3.4.3",
+    "@hocuspocus/provider": "3.4.3",
+    "@hocuspocus/server": "3.4.3",
+    "@hocuspocus/transformer": "3.4.3",
    "@joplin/turndown": "^4.0.74",
    "@joplin/turndown-plugin-gfm": "^1.0.56",
    "@sindresorhus/slugify": "1.1.0",
-    "@tiptap/core": "2.27.1",
-    "@tiptap/extension-code-block": "2.27.1",
-    "@tiptap/extension-code-block-lowlight": "2.27.1",
-    "@tiptap/extension-collaboration": "2.27.1",
-    "@tiptap/extension-collaboration-cursor": "2.27.1",
-    "@tiptap/extension-color": "2.27.1",
-    "@tiptap/extension-document": "2.27.1",
-    "@tiptap/extension-heading": "2.27.1",
-    "@tiptap/extension-highlight": "2.27.1",
-    "@tiptap/extension-history": "2.27.1",
-    "@tiptap/extension-image": "2.27.1",
-    "@tiptap/extension-link": "2.27.1",
-    "@tiptap/extension-list-item": "2.27.1",
-    "@tiptap/extension-list-keymap": "2.27.1",
-    "@tiptap/extension-placeholder": "2.27.1",
-    "@tiptap/extension-subscript": "2.27.1",
-    "@tiptap/extension-superscript": "2.27.1",
-    "@tiptap/extension-table": "2.27.1",
-    "@tiptap/extension-table-cell": "2.27.1",
-    "@tiptap/extension-table-header": "2.27.1",
-    "@tiptap/extension-table-row": "2.27.1",
-    "@tiptap/extension-task-item": "2.27.1",
-    "@tiptap/extension-task-list": "2.27.1",
-    "@tiptap/extension-text": "2.27.1",
-    "@tiptap/extension-text-align": "2.27.1",
-    "@tiptap/extension-text-style": "2.27.1",
-    "@tiptap/extension-typography": "2.27.1",
-    "@tiptap/extension-underline": "2.27.1",
-    "@tiptap/extension-youtube": "2.27.1",
-    "@tiptap/html": "2.27.1",
-    "@tiptap/pm": "2.27.1",
-    "@tiptap/react": "2.27.1",
-    "@tiptap/starter-kit": "2.27.1",
-    "@tiptap/suggestion": "2.27.1",
+    "@tiptap/core": "3.17.1",
+    "@tiptap/extension-code-block": "3.17.1",
+    "@tiptap/extension-collaboration": "3.17.1",
+    "@tiptap/extension-collaboration-caret": "3.17.1",
+    "@tiptap/extension-color": "3.17.1",
+    "@tiptap/extension-document": "3.17.1",
+    "@tiptap/extension-heading": "3.17.1",
+    "@tiptap/extension-highlight": "3.17.1",
+    "@tiptap/extension-history": "3.17.1",
+    "@tiptap/extension-image": "3.17.1",
+    "@tiptap/extension-link": "3.17.1",
+    "@tiptap/extension-list": "3.17.1",
+    "@tiptap/extension-placeholder": "3.17.1",
+    "@tiptap/extension-subscript": "3.17.1",
+    "@tiptap/extension-superscript": "3.17.1",
+    "@tiptap/extension-table": "3.17.1",
+    "@tiptap/extension-text": "3.17.1",
+    "@tiptap/extension-text-align": "3.17.1",
+    "@tiptap/extension-text-style": "3.17.1",
+    "@tiptap/extension-typography": "3.17.1",
+    "@tiptap/extension-unique-id": "^3.17.1",
+    "@tiptap/extension-youtube": "3.17.1",
+    "@tiptap/html": "3.17.1",
+    "@tiptap/pm": "3.17.1",
+    "@tiptap/react": "3.17.1",
+    "@tiptap/starter-kit": "3.17.1",
+    "@tiptap/suggestion": "3.17.1",
    "@types/qrcode": "^1.5.5",
    "bytes": "^3.1.2",
    "cross-env": "^7.0.3",
    "date-fns": "^4.1.0",
    "dompurify": "^3.2.6",
    "fractional-indexing-jittered": "^1.0.0",
+    "highlight.js": "^11.11.1",
+    "image-dimensions": "^2.5.0",
    "ioredis": "^5.4.1",
    "jszip": "^3.10.1",
    "linkifyjs": "^4.3.2",
@@ -77,7 +74,7 @@
    "uuid": "^11.1.0",
    "y-indexeddb": "^9.0.12",
    "y-prosemirror": "1.3.7",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.29"
  },
  "devDependencies": {
    "@nx/js": "20.4.5",
@@ -23,3 +23,4 @@ export * from "./lib/subpages";
 export * from "./lib/highlight";
 export * from "./lib/heading/heading";
 export * from "./lib/unique-id";
+export * from "./lib/shared-storage";
@@ -1,126 +1,125 @@
-import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import {
-  insertTrailingNode,
-  MediaUploadOptions,
-  UploadFn,
-} from "../media-utils";
+import { Node } from "@tiptap/pm/model";
+import { MediaUploadOptions, UploadFn } from "../media-utils";
 import { IAttachment } from "../types";
+import { generateNodeId } from "../utils";
+import { Command } from "@tiptap/core";

-const uploadKey = new PluginKey("attachment-upload");
+const findAttachmentNodeByPlaceholderId = (
+  doc: Node,
+  placeholderId: string,
+): { node: Node; pos: number } | null => {
+  let result: { node: Node; pos: number } | null = null;

-export const AttachmentUploadPlugin = ({
-  placeholderClass,
-}: {
-  placeholderClass: string;
-}) =>
-  new Plugin({
-    key: uploadKey,
-    state: {
-      init() {
-        return DecorationSet.empty;
-      },
-      apply(tr, set) {
-        set = set.map(tr.mapping, tr.doc);
-        // See if the transaction adds or removes any placeholders
-        //@-ts-expect-error - not yet sure what the type I need here
-        const action = tr.getMeta(this);
-        if (action?.add) {
-          const { id, pos, fileName } = action.add;
-
-          const placeholder = document.createElement("div");
-          placeholder.setAttribute("class", placeholderClass);
-
-          const uploadingText = document.createElement("span");
-          uploadingText.setAttribute("class", "uploading-text");
-          uploadingText.textContent = `Uploading ${fileName}`;
-
-          placeholder.appendChild(uploadingText);
-
-          const realPos = pos + 1;
-          const deco = Decoration.widget(realPos, placeholder, {
-            id,
-          });
-          set = set.add(tr.doc, [deco]);
-        } else if (action?.remove) {
-          set = set.remove(
-            set.find(
-              undefined,
-              undefined,
-              (spec) => spec.id == action.remove.id,
-            ),
-          );
-        }
-        return set;
-      },
-    },
-    props: {
-      decorations(state) {
-        return this.getState(state);
-      },
-    },
+  doc.descendants((node, pos) => {
+    if (result) return false;
+    if (
+      node.type.name === "attachment" &&
+      node.attrs.placeholder?.id === placeholderId
+    ) {
+      result = { node, pos };
+      return false;
+    }
+    return true;
  });

-function findPlaceholder(state: EditorState, id: {}) {
-  const decos = uploadKey.getState(state) as DecorationSet;
-  const found = decos.find(undefined, undefined, (spec) => spec.id == id);
-  return found.length ? found[0]?.from : null;
-}
-
-export const handleAttachmentUpload =
+  return result;
+};
+const handleAttachmentUpload =
  ({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
-  async (file, view, pos, pageId, allowMedia) => {
+  async (file, editor, pos, pageId, allowMedia) => {
    const validated = validateFn?.(file, allowMedia);
    // @ts-ignore
    if (!validated) return;
-    // A fresh object to act as the ID for this upload
-    const id = {};

-    // Replace the selection with a placeholder
-    const tr = view.state.tr;
-    if (!tr.selection.empty) tr.deleteSelection();
+    const placeholderId = generateNodeId();

-    tr.setMeta(uploadKey, {
-      add: {
-        id,
-        pos,
-        fileName: file.name,
-      },
-    });
+    let placeholderInserted = false;

-    insertTrailingNode(tr, pos, view);
-    view.dispatch(tr);
+    const insertPlaceholder = (): Command => {
+      return ({ tr, state }) => {
+        const initialPlaceholderNode = state.schema.nodes.attachment?.create({
+          placeholder: {
+            id: placeholderId,
+          },
+          name: file.name,
+          size: file.size,
+        });

-    await onUpload(file, pageId).then(
-      (attachment: IAttachment) => {
-        const { schema } = view.state;
+        if (!initialPlaceholderNode) return false;

-        const pos = findPlaceholder(view.state, id);
+        const { parent } = tr.doc.resolve(pos);
+        const isEmptyTextBlock = parent.isTextblock && !parent.childCount;

-        if (pos == null) return;
+        if (isEmptyTextBlock) {
+          tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
+        } else {
+          tr.insert(pos, initialPlaceholderNode);
+        }

-        if (!attachment) return;
+        return true;
+      };
+    };
+    const replacePlaceholderWithAttachment = (
+      attachment: IAttachment,
+    ): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};

-        const node = schema.nodes.attachment?.create({
+        //  If the placeholder is not found or attachment is missing, abort the process
+        if (currentPos === null || !attachment) return false;
+
+        // Update the placeholder node with the actual attachment data
+        tr.setNodeMarkup(currentPos, undefined, {
          url: `/api/files/${attachment.id}/${attachment.fileName}`,
          name: attachment.fileName,
          mime: attachment.mimeType,
          size: attachment.fileSize,
          attachmentId: attachment.id,
        });
-        if (!node) return;

-        const transaction = view.state.tr
-          .replaceWith(pos, pos, node)
-          .setMeta(uploadKey, { remove: { id } });
-        view.dispatch(transaction);
-      },
-      () => {
-        // Deletes the placeholder on error
-        const transaction = view.state.tr
-          .delete(pos, pos)
-          .setMeta(uploadKey, { remove: { id } });
-        view.dispatch(transaction);
-      },
-    );
+        return true;
+      };
+    };
+    const removePlaceholder = (): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        if (currentPos === null) return false;
+
+        tr.delete(currentPos, currentPos + 2);
+
+        return true;
+      };
+    };
+    // Only show the placeholder if the upload takes more than 250ms
+    const insertPlaceholderTimeout = setTimeout(() => {
+      editor.commands.command(insertPlaceholder());
+      placeholderInserted = true;
+    }, 250);
+
+    try {
+      const attachment: IAttachment = await onUpload(file, pageId);
+
+      clearTimeout(insertPlaceholderTimeout);
+
+      if (placeholderInserted) {
+        setTimeout(() => {
+          editor.commands.command(replacePlaceholderWithAttachment(attachment));
+        }, 100);
+      } else {
+        editor
+          .chain()
+          .command(insertPlaceholder())
+          .command(replacePlaceholderWithAttachment(attachment))
+          .run();
+      }
+    } catch (error) {
+      clearTimeout(insertPlaceholderTimeout);
+
+      editor.commands.command(removePlaceholder());
+    }
  };
+
+export { handleAttachmentUpload };
@@ -1,6 +1,5 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
-import { AttachmentUploadPlugin } from "./attachment-upload";

 export interface AttachmentOptions {
  HTMLAttributes: Record<string, any>;
@@ -13,6 +12,7 @@ export interface AttachmentAttributes {
  mime?: string; // e.g. application/zip
  size?: number;
  attachmentId?: string;
+  placeholder?: string;
 }

 declare module "@tiptap/core" {
@@ -75,6 +75,10 @@ export const Attachment = Node.create<AttachmentOptions>({
          "data-attachment-id": attributes.attachmentId,
        }),
      },
+      placeholder: {
+        default: null,
+        rendered: false,
+      },
    };
  },

@@ -120,14 +124,9 @@ export const Attachment = Node.create<AttachmentOptions>({
  },

  addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
    return ReactNodeViewRenderer(this.options.view);
  },
-
-  addProseMirrorPlugins() {
-    return [
-      AttachmentUploadPlugin({
-        placeholderClass: "attachment-placeholder",
-      }),
-    ];
-  },
 });
@@ -87,7 +87,7 @@ export const Callout = Node.create<CalloutOptions>({
      mergeAttributes(
        { "data-type": this.name },
        this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
      ),
      0,
    ];
@@ -130,6 +130,9 @@ export const Callout = Node.create<CalloutOptions>({
  },

  addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
    return ReactNodeViewRenderer(this.options.view);
  },

@@ -193,7 +196,7 @@ export const Callout = Node.create<CalloutOptions>({

          tr.delete(pos, pos + nodeSize);
          tr.setSelection(
-            TextSelection.near(tr.doc.resolve(previousPosition - 1)),
+            TextSelection.near(tr.doc.resolve(previousPosition - 1))
          );
          tr.insert(previousPosition - 1, content);

@@ -1,81 +0,0 @@
-import CodeBlockLowlight, {
-  CodeBlockLowlightOptions,
-} from "@tiptap/extension-code-block-lowlight";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-
-export interface CustomCodeBlockOptions extends CodeBlockLowlightOptions {
-  view: any;
-}
-
-const TAB_CHAR = "\u00A0\u00A0";
-
-export const CustomCodeBlock = CodeBlockLowlight.extend<CustomCodeBlockOptions>(
-  {
-    selectable: true,
-
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        view: null,
-      };
-    },
-
-    addKeyboardShortcuts() {
-      return {
-        ...this.parent?.(),
-        Tab: () => {
-          if (this.editor.isActive("codeBlock")) {
-            this.editor
-              .chain()
-              .command(({ tr }) => {
-                tr.insertText(TAB_CHAR);
-                return true;
-              })
-              .run();
-            return true;
-          }
-        },
-        "Mod-a": () => {
-          if (this.editor.isActive("codeBlock")) {
-            const { state } = this.editor;
-            const { $from } = state.selection;
-            
-            let codeBlockNode = null;
-            let codeBlockPos = null;
-            let depth = 0;
-            
-            for (depth = $from.depth; depth > 0; depth--) {
-              const node = $from.node(depth);
-              if (node.type.name === "codeBlock") {
-                codeBlockNode = node;
-                codeBlockPos = $from.start(depth) - 1;
-                break;
-              }
-            }
-            
-            if (codeBlockNode && codeBlockPos !== null) {
-              const codeBlockStart = codeBlockPos;
-              const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
-              
-              const contentStart = codeBlockStart + 1;
-              const contentEnd = codeBlockEnd - 1;
-              
-              this.editor.commands.setTextSelection({
-                from: contentStart,
-                to: contentEnd,
-              });
-              
-              return true;
-            }
-          }
-          
-          return false;
-        },
-      };
-    },
-
-    addNodeView() {
-      return ReactNodeViewRenderer(this.options.view);
-    },
-  }
-);
@@ -0,0 +1,108 @@
+import type { CodeBlockOptions } from "@tiptap/extension-code-block";
+import CodeBlock from "@tiptap/extension-code-block";
+
+import { LowlightPlugin } from "./lowlight-plugin.js";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+  /**
+   * The lowlight instance.
+   */
+  lowlight: any;
+  view: any;
+}
+
+const TAB_CHAR = "\u00A0\u00A0";
+
+/**
+ * This extension allows you to highlight code blocks with lowlight.
+ * @see https://tiptap.dev/api/nodes/code-block-lowlight
+ */
+export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
+  selectable: true,
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      lowlight: {},
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      defaultLanguage: null,
+      HTMLAttributes: {},
+      view: null,
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      Tab: () => {
+        if (this.editor.isActive("codeBlock")) {
+          this.editor
+            .chain()
+            .command(({ tr }) => {
+              tr.insertText(TAB_CHAR);
+              return true;
+            })
+            .run();
+          return true;
+        }
+      },
+      "Mod-a": () => {
+        if (this.editor.isActive("codeBlock")) {
+          const { state } = this.editor;
+          const { $from } = state.selection;
+
+          let codeBlockNode = null;
+          let codeBlockPos = null;
+          let depth = 0;
+
+          for (depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name === "codeBlock") {
+              codeBlockNode = node;
+              codeBlockPos = $from.start(depth) - 1;
+              break;
+            }
+          }
+
+          if (codeBlockNode && codeBlockPos !== null) {
+            const codeBlockStart = codeBlockPos;
+            const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
+
+            const contentStart = codeBlockStart + 1;
+            const contentEnd = codeBlockEnd - 1;
+
+            this.editor.commands.setTextSelection({
+              from: contentStart,
+              to: contentEnd,
+            });
+
+            return true;
+          }
+        }
+
+        return false;
+      },
+    };
+  },
+
+  addNodeView() {
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
+
+    return ReactNodeViewRenderer(this.options.view);
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      ...(this.parent?.() || []),
+      LowlightPlugin({
+        name: this.name,
+        lowlight: this.options.lowlight,
+        defaultLanguage: this.options.defaultLanguage,
+      }),
+    ];
+  },
+});
@@ -0,0 +1 @@
+export { CustomCodeBlock } from "./custom-code-block";
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	744d88acac	tiptap 3.17.1	2026-01-24 19:45:37 +00:00
Philipinho	7002001340	fix history editor css	2026-01-24 19:07:55 +00:00
Philipinho	c72ee1ee8e	fix search shortcut	2026-01-24 18:43:45 +00:00
Philipinho	b82fdd5f50	Merge branch 'main' into tiptap3-migration	2026-01-24 17:59:57 +00:00
Philip Okugbe	98f71c95fe	feat: stream file serving (#1865 )	2026-01-24 17:54:56 +00:00
Philipinho	31e66ecf90	fix suggestion menu exit bug	2026-01-24 06:49:33 +00:00
Philipinho	605bf760be	Tiptap v3.17.0	2026-01-24 00:34:31 +00:00
Philipinho	c5c9237b00	Merge branch 'main' into tiptap3-migration	2026-01-24 00:18:48 +00:00
Philip Okugbe	efb0a9317b	feat: allow upload of large files (#1862 ) * Allow upload of large files * feat: createByteCountingStream utility function. --------- Co-authored-by: gpapp <gergely.papp@itworks.hu>	2026-01-22 20:00:58 +00:00
Philipinho	063ea99b66	sync	2026-01-21 18:17:48 +00:00
Philip Okugbe	aa143ad79c	refactor(db): migrate from node-postgres to postgres.js (#1846 ) * refactor(db): migrate from node-postgres to postgres.js * ignore schema param	2026-01-21 18:12:16 +00:00
Philip Okugbe	918f4508d2	feat: switch to pino for logs (#1855 ) - switch to json logs in production - add option to support http logging	2026-01-21 01:23:50 +00:00
Philipinho	5cd0ba6902	fix script	2026-01-20 22:36:19 +00:00
Philipinho	511c822a90	fix collab connection status display	2026-01-20 16:17:14 +00:00
Philipinho	7af31fe228	update lock file	2026-01-20 15:26:45 +00:00
Philipinho	dd460713ce	Merge branch 'feat/asset-placeholders' into tiptap3-migration	2026-01-20 15:21:24 +00:00
Philipinho	b0f3bec4d1	* add skeleton pulse animation * add translation strings * fix attachment view responsiveness	2026-01-20 15:03:49 +00:00
Arek Nawo	8ea92668b2	fix: Allow media as attachment	2026-01-20 13:52:02 +01:00
Arek Nawo	dcf9228344	fix: Drag & drop, paste upload	2026-01-20 13:51:53 +01:00
Arek Nawo	dbd1308c72	feat: Multiple file upload, improved placeholders, local previews	2026-01-20 11:10:11 +01:00
Arek Nawo	03ae58253a	fix: Use imageDimensionsFromStream	2026-01-19 23:42:13 +01:00
Philipinho	a1260188ae	fix: UI improvements	2026-01-19 21:05:34 +00:00
Arek Nawo	b99d803b81	fix: Transaction handling on asset upload	2026-01-19 20:53:59 +01:00
Arek Nawo	b9b5ddb848	fix: Video view styles	2026-01-19 20:45:45 +01:00
Arek Nawo	dd8c42e1f3	feat: Improved placeholder and upload handling for attachments	2026-01-19 20:45:24 +01:00
Philipinho	bdf02f593d	Merge branch 'feat/auto-tooltip'	2026-01-19 19:43:58 +00:00
Philipinho	e24bf5ed57	feat: auto-tooltip component	2026-01-19 19:40:06 +00:00
Philip Okugbe	f3f74c591f	fix(share): escape page title in SEO meta tags (#1850 )	2026-01-19 19:31:28 +00:00
Arek Nawo	13c29545a2	refactor: Image node and view clean-up	2026-01-19 20:15:14 +01:00
Arek Nawo	0c5c83a17a	feat: Improved placeholder and upload handling for videos	2026-01-19 20:14:48 +01:00
Arek Nawo	5bda5623f2	feat: Improved placeholder and upload handling for images	2026-01-19 16:54:24 +01:00
Philipinho	5f966a2d89	chore: add clean up command	2026-01-18 16:50:51 +00:00
Philipinho	051bc80ab7	cleanup	2026-01-16 17:10:58 +00:00
Philipinho	78d363febb	cleanup	2026-01-16 16:59:42 +00:00
Philipinho	8681d9a8c4	Merge branch 'tiptap3-migration' of https://github.com/areknawo/docmost into tiptap3-migration	2026-01-16 15:42:47 +00:00
Philipinho	b9543b01bd	Merge branch 'main' into tiptap3-migration	2026-01-16 15:42:16 +00:00
Philipinho	bcb004af21	update lockfile	2026-01-16 13:22:41 +00:00
Philipinho	ac675e7d74	update dockerfile	2026-01-16 13:21:42 +00:00
Philipinho	bf89eff5e7	sync	2026-01-16 13:20:31 +00:00
Philip Okugbe	183787fa0c	fix: update dependencies (#1843 )	2026-01-14 16:36:47 +00:00
Philipinho	15aa04a5f7	sync	2026-01-14 11:49:39 +00:00
Philipinho	79343a5d52	fix: prevent text overflow in group and space list tables	2026-01-13 16:25:42 +00:00
Philipinho	61e252918e	fix length	2026-01-13 16:13:52 +00:00
Philipinho	e98fa7f69a	sync * fix form length	2026-01-13 16:13:04 +00:00
Philip Okugbe	6d148a35eb	New Crowdin updates (#1830 ) * New translations translation.json (Japanese) * New translations translation.json (Japanese)	2026-01-13 16:01:08 +00:00
Philip Okugbe	0bbc1c35de	fix: public sharing performance improvements (#1841 )	2026-01-13 16:00:22 +00:00
Philip Okugbe	47097969a0	fix: use subquery (#1833 ) - enhance file tasks list endpoint	2026-01-13 15:58:26 +00:00
Philip Okugbe	13f529e064	fix anchor scroll in same page (#1834 )	2026-01-13 15:35:53 +00:00
Philip Okugbe	8fc8422fbc	fix: increase max length for groups and spaces (#1840 )	2026-01-13 15:31:03 +00:00
Arek Nawo	5510434221	fix: Connect/disconnect websocketProvider	2026-01-09 12:04:45 +01:00
Arek Nawo	f671e7a3b9	feat: Update collaboration connection for HocusPocus v3	2026-01-09 01:01:48 +01:00
Arek Nawo	974bcea690	feat: Migrate tippy.js menus to Floating UI	2026-01-09 00:33:28 +01:00
Arek Nawo	601ed88931	fix: Set `isInitialized` to force immediate react node view rendering	2026-01-08 22:51:28 +01:00
Philipinho	cfbaedcd63	Merge branch 'main' into tiptap3-migration	2025-12-16 15:56:00 +00:00
Philipinho	732951a322	v0.24.1	2025-12-14 13:24:09 +00:00
Philipinho	2544775266	fix: switch to node slim image	2025-12-14 13:16:40 +00:00
Philipinho	d59539f197	fix ai streaming	2025-12-13 14:15:41 +00:00
Philipinho	b061df7f7d	Use new fastify router options	2025-12-13 14:15:06 +00:00
Philipinho	5fc04aa7df	fix collaboration caret css	2025-12-13 01:05:34 +00:00
Philipinho	c357f169e1	Merge branch 'main' into tiptap3-migration	2025-12-13 00:57:13 +00:00
Philipinho	1cbd2854bb	fix menus	2025-09-28 20:51:57 +01:00
Philipinho	3af1482a31	fix converter	2025-09-27 21:10:40 +01:00
Philipinho	d31d1f7bbd	fix bubble menu	2025-09-27 14:50:27 +01:00
Philipinho	cc0146d0cd	Merge branch 'main' into tiptap3-migration	2025-09-26 18:53:18 +01:00
Philipinho	83ce9cf240	tiptap 3.6.1	2025-09-26 18:52:49 +01:00
Philipinho	e7e85e9fdd	merge main	2025-09-10 04:19:04 +01:00
Philipinho	2d710612b1	Merge branch 'main' into tiptap3-migration	2025-09-10 04:00:01 +01:00
Philipinho	a0814ef49a	add tippyoptions for reference	2025-08-18 13:45:41 -07:00
Philipinho	bf17289ab2	fix editable state	2025-08-15 02:06:59 -07:00
Philipinho	c2cd412ac7	Switch to useEditorState - Set shouldRerenderOnTransaction to false	2025-08-15 01:19:05 -07:00
Philipinho	71dfcf6bce	update tiptap version	2025-08-14 23:29:48 -07:00
Philipinho	23e8ab032e	disable duplicate extensions	2025-08-03 19:01:50 -07:00
Philipinho	0e1d4e5eee	fix flicker	2025-08-03 19:01:28 -07:00
Philipinho	6f83f32d5c	remove unused code	2025-08-03 18:34:32 -07:00
Philipinho	63ea2f7663	fix collaboration	2025-08-03 18:24:55 -07:00
Philipinho	66a3dad632	Merge branch 'main' into tiptap3-migration	2025-08-03 17:45:02 -07:00
Philipinho	2adc6a60d2	Tiptap3 migration - WIP	2025-08-02 19:09:06 -07:00
				`@@ -0,0 +1 @@`
				`export { CustomCodeBlock } from "./custom-code-block";`