import embeds

move embed parser to editor-ext package
notion formatter
2025-11-13 06:22:42 +10:00 · 2025-05-26 15:37:35 -07:00 · 2025-05-26 14:59:17 -07:00 · 2025-05-25 20:06:21 -07:00 · 2025-05-25 17:59:28 -07:00 · 2025-05-23 22:31:37 -07:00
160 changed files with 6888 additions and 1420 deletions
--- a/README.md
+++ b/README.md
@ -4,14 +4,15 @@
        Open-source collaborative wiki and documentation software.
        <br />
        <a href="https://docmost.com"><strong>Website</strong></a> | 
-        <a href="https://docmost.com/docs"><strong>Documentation</strong></a>
+        <a href="https://docmost.com/docs"><strong>Documentation</strong></a> |
        <a href="https://twitter.com/DocmostHQ"><strong>Twitter / X</strong></a>
    </p>
 </div>
 <br />
 ## Getting started
-To get started with Docmost, please refer to our [documentation](https://docmost.com/docs).
+To get started with Docmost, please refer to our [documentation](https://docmost.com/docs) or try our [cloud version](https://docmost.com/pricing) .
 ## Features
@ -46,3 +47,16 @@ All files in the following directories are licensed under the Docmost Enterprise
 ### Contributing
 See the [development documentation](https://docmost.com/docs/self-hosting/development)
 ## Thanks
 Special thanks to;
 <img width="100" alt="Crowdin" src="https://github.com/user-attachments/assets/a6c3d352-e41b-448d-b6cd-3fbca3109f07" />
 [Crowdin](https://crowdin.com/) for providing access to their localization platform.
 <img width="48" alt="Algolia-mark-square-white" src="https://github.com/user-attachments/assets/6ccad04a-9589-4965-b6a1-d5cb1f4f9e94" />
 [Algolia](https://www.algolia.com/) for providing full-text search to the docs.
--- a/apps/client/index.html
+++ b/apps/client/index.html
@ -6,6 +6,7 @@
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Docmost</title>
    <!--meta-tags-->
  </head>
  <body>
    <div id="root"></div>
--- a/apps/client/package.json
+++ b/apps/client/package.json
@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.10.0",
+  "version": "0.20.4",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@ -25,10 +25,11 @@
    "@tabler/icons-react": "^3.22.0",
    "@tanstack/react-query": "^5.61.4",
    "@tiptap/extension-character-count": "^2.11.5",
-    "axios": "^1.7.9",
+    "axios": "^1.8.4",
    "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.1",
@ -63,7 +64,7 @@
    "@types/node": "22.10.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
    "eslint": "^9.15.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.1.0",
@ -76,6 +77,6 @@
    "prettier": "^3.4.1",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.17.0",
-    "vite": "^6.1.0"
+    "vite": "^6.3.2"
  }
 }
--- a/apps/client/public/locales/de-DE/translation.json
+++ b/apps/client/public/locales/de-DE/translation.json
@ -362,5 +362,26 @@
  "Move page to a different space.": "Seite in einen anderen Bereich verschieben.",
  "Real-time editor connection lost. Retrying...": "Echtzeit-Editor-Verbindung verloren. Wiederholen...",
  "Table of contents": "Inhaltsverzeichnis",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Fügen Sie Überschriften (H1, H2, H3) hinzu, um ein Inhaltsverzeichnis zu erstellen."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Fügen Sie Überschriften (H1, H2, H3) hinzu, um ein Inhaltsverzeichnis zu erstellen.",
  "Share": "Teilen",
  "Public sharing": "Öffentliches Teilen",
  "Shared by": "Geteilt von",
  "Shared at": "Geteilt am",
  "Inherits public sharing from": "Erbt das öffentliche Teilen von",
  "Share to web": "Im Web teilen",
  "Shared to web": "Im Web geteilt",
  "Anyone with the link can view this page": "Jeder mit dem Link kann diese Seite ansehen",
  "Make this page publicly accessible": "Diese Seite öffentlich zugänglich machen",
  "Include sub-pages": "Unterseiten einbeziehen",
  "Make sub-pages public too": "Unterseiten auch öffentlich machen",
  "Allow search engines to index page": "Suchmaschinen erlauben, die Seite zu indexieren",
  "Open page": "Seite öffnen",
  "Page": "Seite",
  "Delete public share link": "Öffentlichen Freigabelink löschen",
  "Delete share": "Freigabe löschen",
  "Are you sure you want to delete this shared link?": "Möchten Sie diesen Freigabelink wirklich löschen?",
  "Publicly shared pages from spaces you are a member of will appear here": "Öffentlich geteilte Seiten aus Bereichen, in denen Sie Mitglied sind, erscheinen hier",
  "Share deleted successfully": "Freigabe erfolgreich gelöscht",
  "Share not found": "Freigabe nicht gefunden",
  "Failed to share page": "Fehler beim Teilen der Seite"
 }
--- a/apps/client/public/locales/en-US/translation.json
+++ b/apps/client/public/locales/en-US/translation.json
@ -362,5 +362,29 @@
  "Move page to a different space.": "Move page to a different space.",
  "Real-time editor connection lost. Retrying...": "Real-time editor connection lost. Retrying...",
  "Table of contents": "Table of contents",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Add headings (H1, H2, H3) to generate a table of contents."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Add headings (H1, H2, H3) to generate a table of contents.",
  "Share": "Share",
  "Public sharing": "Public sharing",
  "Shared by": "Shared by",
  "Shared at": "Shared at",
  "Inherits public sharing from": "Inherits public sharing from",
  "Share to web": "Share to web",
  "Shared to web": "Shared to web",
  "Anyone with the link can view this page": "Anyone with the link can view this page",
  "Make this page publicly accessible": "Make this page publicly accessible",
  "Include sub-pages": "Include sub-pages",
  "Make sub-pages public too": "Make sub-pages public too",
  "Allow search engines to index page": "Allow search engines to index page",
  "Open page": "Open page",
  "Page": "Page",
  "Delete public share link": "Delete public share link",
  "Delete share": "Delete share",
  "Are you sure you want to delete this shared link?": "Are you sure you want to delete this shared link?",
  "Publicly shared pages from spaces you are a member of will appear here": "Publicly shared pages from spaces you are a member of will appear here",
  "Share deleted successfully": "Share deleted successfully",
  "Share not found": "Share not found",
  "Failed to share page": "Failed to share page",
  "Copy page":  "Copy page",
  "Copy page to a different space.": "Copy page to a different space.",
  "Page copied successfully": "Page copied successfully"
 }
--- a/apps/client/public/locales/es-ES/translation.json
+++ b/apps/client/public/locales/es-ES/translation.json
@ -94,7 +94,7 @@
  "Invited members will be granted access to spaces the groups can access": "Los miembros invitados recibirán acceso a los espacios a los que los grupos pueden acceder",
  "Join the workspace": "Unirse al espacio de trabajo",
  "Language": "Idioma",
-  "Light": "Ligero",
+  "Light": "Claro",
  "Link copied": "Enlace copiado",
  "Login": "Iniciar sesión",
  "Logout": "Cerrar sesión",
@ -362,5 +362,26 @@
  "Move page to a different space.": "Mover página a un espacio diferente.",
  "Real-time editor connection lost. Retrying...": "Conexión del editor en tiempo real perdida. Reintentando...",
  "Table of contents": "Índice de contenidos",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Añadir encabezados (H1, H2, H3) para generar un índice de contenidos."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Añadir encabezados (H1, H2, H3) para generar un índice de contenidos.",
  "Share": "Compartir",
  "Public sharing": "Compartición pública",
  "Shared by": "Compartido por",
  "Shared at": "Compartido en",
  "Inherits public sharing from": "Hereda la compartición pública de",
  "Share to web": "Compartir en la web",
  "Shared to web": "Compartido en la web",
  "Anyone with the link can view this page": "Cualquiera con el enlace puede ver esta página",
  "Make this page publicly accessible": "Hacer esta página accesible públicamente",
  "Include sub-pages": "Incluir subpáginas",
  "Make sub-pages public too": "Hacer públicas también las subpáginas",
  "Allow search engines to index page": "Permitir a los motores de búsqueda indexar la página",
  "Open page": "Abrir página",
  "Page": "Página",
  "Delete public share link": "Eliminar enlace de compartición pública",
  "Delete share": "Eliminar compartición",
  "Are you sure you want to delete this shared link?": "¿Está seguro de que desea eliminar este enlace compartido?",
  "Publicly shared pages from spaces you are a member of will appear here": "Las páginas compartidas públicamente de los espacios a los que pertenece aparecerán aquí",
  "Share deleted successfully": "Compartición eliminada con éxito",
  "Share not found": "Compartición no encontrada",
  "Failed to share page": "Error al compartir la página"
 }
--- a/apps/client/public/locales/fr-FR/translation.json
+++ b/apps/client/public/locales/fr-FR/translation.json
@ -362,5 +362,26 @@
  "Move page to a different space.": "Déplacer la page vers un autre espace.",
  "Real-time editor connection lost. Retrying...": "Connexion avec l'éditeur en temps réel perdue. Nouvelle tentative...",
  "Table of contents": "",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Ajoutez des titres (H1, H2, H3) pour générer une table des matières."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Ajoutez des titres (H1, H2, H3) pour générer une table des matières.",
  "Share": "Partager",
  "Public sharing": "Partage public",
  "Shared by": "Partagé par",
  "Shared at": "Partagé à",
  "Inherits public sharing from": "Hérite du partage public de",
  "Share to web": "Partager sur le web",
  "Shared to web": "Partagé sur le web",
  "Anyone with the link can view this page": "Toute personne avec le lien peut voir cette page",
  "Make this page publicly accessible": "Rendre cette page accessible au public",
  "Include sub-pages": "Inclure les sous-pages",
  "Make sub-pages public too": "Rendre également les sous-pages publiques",
  "Allow search engines to index page": "Autoriser les moteurs de recherche à indexer la page",
  "Open page": "Ouvrir la page",
  "Page": "Page",
  "Delete public share link": "Supprimer le lien de partage public",
  "Delete share": "Supprimer le partage",
  "Are you sure you want to delete this shared link?": "Êtes-vous sûr de vouloir supprimer ce lien partagé ?",
  "Publicly shared pages from spaces you are a member of will appear here": "Les pages partagées publiquement des espaces dont vous êtes membre apparaîtront ici",
  "Share deleted successfully": "Partage supprimé avec succès",
  "Share not found": "Partage non trouvé",
  "Failed to share page": "Échec du partage de la page"
 }
--- a/apps/client/public/locales/it-IT/translation.json
+++ b/apps/client/public/locales/it-IT/translation.json
@ -362,5 +362,26 @@
  "Move page to a different space.": "Sposta la pagina in un altro spazio.",
  "Real-time editor connection lost. Retrying...": "Connessione all'editor in tempo reale persa. Riprovo...",
  "Table of contents": "Indice dei contenuti",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Aggiungi intestazioni (H1, H2, H3) per generare un sommario."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Aggiungi intestazioni (H1, H2, H3) per generare un sommario.",
  "Share": "Condividi",
  "Public sharing": "Condivisione pubblica",
  "Shared by": "Condiviso da",
  "Shared at": "Condiviso il",
  "Inherits public sharing from": "Eredita la condivisione pubblica da",
  "Share to web": "Condividi su web",
  "Shared to web": "Condiviso su web",
  "Anyone with the link can view this page": "Chiunque abbia il link può visualizzare questa pagina",
  "Make this page publicly accessible": "Rendi questa pagina accessibile pubblicamente",
  "Include sub-pages": "Includi sotto-pagine",
  "Make sub-pages public too": "Rendi pubbliche anche le sotto-pagine",
  "Allow search engines to index page": "Permetti ai motori di ricerca di indicizzare la pagina",
  "Open page": "Apri pagina",
  "Page": "Pagina",
  "Delete public share link": "Elimina il link di condivisione pubblica",
  "Delete share": "Elimina condivisione",
  "Are you sure you want to delete this shared link?": "Sei sicuro di voler eliminare questo link condiviso?",
  "Publicly shared pages from spaces you are a member of will appear here": "Le pagine condivise pubblicamente dagli spazi di cui sei membro appariranno qui",
  "Share deleted successfully": "Condivisione eliminata con successo",
  "Share not found": "Condivisione non trovata",
  "Failed to share page": "Condivisione della pagina fallita"
 }
--- a/apps/client/public/locales/ja-JP/translation.json
+++ b/apps/client/public/locales/ja-JP/translation.json
@ -362,5 +362,26 @@
  "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": "共有者",
  "Shared at": "共有日時",
  "Inherits public sharing from": "から公開共有を継承する",
  "Share to web": "ウェブで共有",
  "Shared to web": "ウェブに共有済み",
  "Anyone with the link can view this page": "リンクを持っている人はこのページを閲覧できます",
  "Make this page publicly accessible": "このページを公開します",
  "Include sub-pages": "サブページを含む",
  "Make sub-pages public too": "サブページも公開する",
  "Allow search engines to index page": "検索エンジンにページのインデックス作成を許可する",
  "Open page": "ページを開く",
  "Page": "ページ",
  "Delete public share link": "公開リンクを削除",
  "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 not found": "共有が見つかりません",
  "Failed to share page": "ページの共有に失敗しました"
 }
--- a/apps/client/public/locales/ko-KR/translation.json
+++ b/apps/client/public/locales/ko-KR/translation.json
@ -362,5 +362,26 @@
  "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": "공유자",
  "Shared at": "공유 시간",
  "Inherits public sharing from": "로부터 공개 공유를 상속함",
  "Share to web": "웹에 공유",
  "Shared to web": "웹에 공유됨",
  "Anyone with the link can view this page": "링크가 있는 사람은 이 페이지를 볼 수 있습니다",
  "Make this page publicly accessible": "이 페이지를 공개적으로 접근 가능하게 만들기",
  "Include sub-pages": "하위 페이지 포함",
  "Make sub-pages public too": "하위 페이지도 공개로 설정",
  "Allow search engines to index page": "검색 엔진이 페이지를 색인할 수 있도록 허용",
  "Open page": "페이지 열기",
  "Page": "페이지",
  "Delete public share link": "공유 링크 삭제",
  "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 not found": "공유를 찾을 수 없습니다",
  "Failed to share page": "페이지 공유에 실패했습니다"
 }
--- a/apps/client/public/locales/nl-NL/translation.json
+++ b/apps/client/public/locales/nl-NL/translation.json
@ -362,5 +362,26 @@
  "Move page to a different space.": "Verplaats pagina naar een andere ruimte.",
  "Real-time editor connection lost. Retrying...": "Realtime editorverbinding verloren. Opnieuw proberen...",
  "Table of contents": "Inhoudsopgave",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Voeg koppen (H1, H2, H3) toe om een inhoudsopgave te genereren."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Voeg koppen (H1, H2, H3) toe om een inhoudsopgave te genereren.",
  "Share": "Delen",
  "Public sharing": "Openbaar delen",
  "Shared by": "Gedeeld door",
  "Shared at": "Gedeeld op",
  "Inherits public sharing from": "Erft openbaar delen van",
  "Share to web": "Delen naar web",
  "Shared to web": "Gedeeld naar web",
  "Anyone with the link can view this page": "Iedereen met de link kan deze pagina bekijken",
  "Make this page publicly accessible": "Maak deze pagina openbaar toegankelijk",
  "Include sub-pages": "Inclusief subpagina's",
  "Make sub-pages public too": "Maak subpagina's ook openbaar",
  "Allow search engines to index page": "Sta zoekmachines toe om pagina te indexeren",
  "Open page": "Pagina openen",
  "Page": "Pagina",
  "Delete public share link": "Verwijder openbare deel-link",
  "Delete share": "Verwijder deel",
  "Are you sure you want to delete this shared link?": "Weet u zeker dat u deze gedeelde link wilt verwijderen?",
  "Publicly shared pages from spaces you are a member of will appear here": "Openbaar gedeelde pagina's van ruimtes waarvan u lid bent, verschijnen hier",
  "Share deleted successfully": "Delen succesvol verwijderd",
  "Share not found": "Delen niet gevonden",
  "Failed to share page": "Pagina delen mislukt"
 }
--- a/apps/client/public/locales/pt-BR/translation.json
+++ b/apps/client/public/locales/pt-BR/translation.json
@ -362,5 +362,26 @@
  "Move page to a different space.": "Mover página para um espaço diferente.",
  "Real-time editor connection lost. Retrying...": "Conexão do editor em tempo real perdida. Tentando novamente...",
  "Table of contents": "Tabela de conteúdos",
-  "Add headings (H1, H2, H3) to generate a table of contents.": "Adicionar títulos (H1, H2, H3) para gerar uma tabela de conteúdo."
+  "Add headings (H1, H2, H3) to generate a table of contents.": "Adicionar títulos (H1, H2, H3) para gerar uma tabela de conteúdo.",
  "Share": "Compartilhar",
  "Public sharing": "Compartilhamento público",
  "Shared by": "Compartilhado por",
  "Shared at": "Compartilhado em",
  "Inherits public sharing from": "Herdado do compartilhamento público de",
  "Share to web": "Compartilhar na web",
  "Shared to web": "Compartilhado na web",
  "Anyone with the link can view this page": "Qualquer um com o link pode ver esta página",
  "Make this page publicly accessible": "Tornar esta página publicamente acessível",
  "Include sub-pages": "Incluir sub-páginas",
  "Make sub-pages public too": "Tornar as sub-páginas públicas também",
  "Allow search engines to index page": "Permitir que mecanismos de busca indexem a página",
  "Open page": "Abrir página",
  "Page": "Página",
  "Delete public share link": "Excluir o link público compartilhado",
  "Delete share": "Excluir compartilhamento",
  "Are you sure you want to delete this shared link?": "Tem certeza de que deseja excluir este link compartilhado?",
  "Publicly shared pages from spaces you are a member of will appear here": "Páginas compartilhadas publicamente de espaços que você é membro aparecerão aqui",
  "Share deleted successfully": "Compartilhamento excluído com sucesso",
  "Share not found": "Compartilhamento não encontrado",
  "Failed to share page": "Falha ao compartilhar página"
 }
--- a/apps/client/public/locales/ru-RU/translation.json
+++ b/apps/client/public/locales/ru-RU/translation.json
@ -13,11 +13,11 @@
  "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 become members of groups and spaces in workspace": "Могут становиться участниками групп и пространств в рабочей области",
  "Can create and edit pages in space.": "Может создавать и редактировать страницы в пространстве.",
  "Can edit": "Может изменять",
-  "Can manage workspace": "Может управлять рабочим пространством",
+  "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.": "Может просматривать страницы в пространстве, но не может их редактировать.",
  "Cancel": "Отменить",
@ -34,7 +34,7 @@
  "Create group": "Создать группу",
  "Create page": "Создать страницу",
  "Create space": "Создать пространство",
-  "Create workspace": "Создать рабочее пространство",
+  "Create workspace": "Создать рабочую область",
  "Current password": "Текущий пароль",
  "Dark": "Темная",
  "Date": "Дата",
@ -92,7 +92,7 @@
  "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": "Приглашённые участники получат доступ к пространствам, доступ к которым есть у группы",
-  "Join the workspace": "Присоединиться к рабочему пространству",
+  "Join the workspace": "Присоединиться к рабочей области",
  "Language": "Язык",
  "Light": "Светлая",
  "Link copied": "Ссылка скопирована",
@ -150,7 +150,7 @@
  "Send invitation": "Отправить приглашение",
  "Invitation sent": "Приглашение отправлено",
  "Settings": "Настройки",
-  "Setup workspace": "Настроить рабочее пространство",
+  "Setup workspace": "Настроить рабочую область",
  "Sign In": "Вход",
  "Sign Up": "Регистрация",
  "Slug": "Slug",
@ -177,9 +177,9 @@
  "Untitled": "Без названия",
  "Updated successfully": "Обновлено успешно",
  "User": "Пользователь",
-  "Workspace": "Рабочее пространство",
+  "Workspace": "Рабочая область",
-  "Workspace Name": "Имя рабочего пространства",
+  "Workspace Name": "Имя рабочей области",
-  "Workspace settings": "Настройки рабочего пространства",
+  "Workspace settings": "Настройки рабочей области",
  "You can change your password here.": "Вы можете изменить свой пароль здесь.",
  "Your Email": "Ваш адрес электронной почты",
  "Your import is complete.": "Ваш импорт завершен.",
@ -217,9 +217,9 @@
  "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": "Копировать",
  "Copied": "Скопировано",
@ -362,5 +362,26 @@
  "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": "Поделился",
  "Shared at": "Поделился в",
  "Inherits public sharing from": "Наследует общий доступ от",
  "Share to web": "Поделиться в интернете",
  "Shared to web": "Размещено в интернете",
  "Anyone with the link can view this page": "Любой, у кого есть ссылка, может просмотреть эту страницу",
  "Make this page publicly accessible": "Сделать эту страницу общедоступной",
  "Include sub-pages": "Включить подстраницы",
  "Make sub-pages public too": "Сделать подстраницы также общедоступными",
  "Allow search engines to index page": "Разрешить поисковым системам индексировать страницу",
  "Open page": "Открыть страницу",
  "Page": "Страница",
  "Delete public share link": "Удалить ссылку на общий доступ",
  "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 not found": "Общий доступ не найден",
  "Failed to share page": "Не удалось поделиться страницей"
 }
--- a/apps/client/public/locales/zh-CN/translation.json
+++ b/apps/client/public/locales/zh-CN/translation.json
@ -298,7 +298,7 @@
  "Heading 2": "2 级标题",
  "Heading 3": "3 级标题",
  "To-do List": "代办列表",
-  "Bullet List": "无需列表",
+  "Bullet List": "无序列表",
  "Numbered List": "有序列表",
  "Blockquote": "引用块",
  "Just start typing with plain text.": "只需开始键入纯文本",
@ -362,5 +362,26 @@
  "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": "分享者",
  "Shared at": "分享时间",
  "Inherits public sharing from": "继承自的公开分享",
  "Share to web": "分享到网页",
  "Shared to web": "已分享到网页",
  "Anyone with the link can view this page": "任何有链接的人都可以查看此页面",
  "Make this page publicly accessible": "使此页面可公开访问",
  "Include sub-pages": "包括子页面",
  "Make sub-pages public too": "将子页面也设为公开",
  "Allow search engines to index page": "允许搜索引擎索引页面",
  "Open page": "打开页面",
  "Page": "页面",
  "Delete public share link": "删除公开分享链接",
  "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 not found": "未找到分享",
  "Failed to share page": "页面分享失败"
 }
--- a/apps/client/src/App.tsx
+++ b/apps/client/src/App.tsx
@ -26,10 +26,16 @@ import { useTranslation } from "react-i18next";
 import Security from "@/ee/security/pages/security.tsx";
 import License from "@/ee/licence/pages/license.tsx";
 import { useRedirectToCloudSelect } from "@/ee/hooks/use-redirect-to-cloud-select.tsx";
 import SharedPage from "@/pages/share/shared-page.tsx";
 import Shares from "@/pages/settings/shares/shares.tsx";
 import ShareLayout from "@/features/share/components/share-layout.tsx";
 import ShareRedirect from '@/pages/share/share-redirect.tsx';
 import { useTrackOrigin } from "@/hooks/use-track-origin";
 export default function App() {
  const { t } = useTranslation();
  useRedirectToCloudSelect();
  useTrackOrigin();
  return (
    <>
@ -51,6 +57,12 @@ export default function App() {
          </>
        )}
        <Route element={<ShareLayout />}>
          <Route path={"/share/:shareId/p/:pageSlug"} element={<SharedPage />} />
          <Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
        </Route>
        <Route path={"/share/:shareId"} element={<ShareRedirect />} />
        <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
        <Route element={<Layout />}>
@ -78,6 +90,7 @@ export default function App() {
            <Route path={"groups"} element={<Groups />} />
            <Route path={"groups/:groupId"} element={<GroupInfo />} />
            <Route path={"spaces"} element={<Spaces />} />
            <Route path={"sharing"} element={<Shares />} />
            <Route path={"security"} element={<Security />} />
            {!isCloud() && <Route path={"license"} element={<License />} />}
            {isCloud() && <Route path={"billing"} element={<Billing />} />}
--- a/apps/client/src/components/layouts/global/global-app-shell.tsx
+++ b/apps/client/src/components/layouts/global/global-app-shell.tsx
@ -14,6 +14,7 @@ import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
 import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 export default function GlobalAppShell({
  children,
@ -22,6 +23,7 @@ export default function GlobalAppShell({
 }) {
  useTrialEndAction();
  const [mobileOpened] = useAtom(mobileSidebarAtom);
  const toggleMobile = useToggleSidebar(mobileSidebarAtom);
  const [desktopOpened] = useAtom(desktopSidebarAtom);
  const [{ isAsideOpen }] = useAtom(asideStateAtom);
  const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
@ -111,7 +113,7 @@ export default function GlobalAppShell({
      )}
      <AppShell.Main>
        {isSettingsRoute ? (
-          <Container size={800}>{children}</Container>
+          <Container size={850}>{children}</Container>
        ) : (
          children
        )}
--- a/apps/client/src/components/settings/app-version.tsx
+++ b/apps/client/src/components/settings/app-version.tsx
@ -35,6 +35,12 @@ export default function AppVersion() {
          position="middle-end"
          style={{ cursor: "pointer" }}
          disabled={!hasUpdate}
          onClick={() => {
            window.open(
              "https://github.com/docmost/docmost/releases",
              "_blank",
            );
          }}
        >
          <Text
            size="sm"
--- a/apps/client/src/components/settings/atoms/settings-origin-atom.ts
+++ b/apps/client/src/components/settings/atoms/settings-origin-atom.ts
@ -0,0 +1,10 @@
 import { atom, WritableAtom } from "jotai";
 export const settingsOriginAtom: WritableAtom<string | null, [string | null], void> = atom(
  null,
  (get, set, newValue) => {
    if (get(settingsOriginAtom) !== newValue) {
      set(settingsOriginAtom, newValue);
    }
  }
 );
--- a/apps/client/src/components/settings/settings-queries.tsx
+++ b/apps/client/src/components/settings/settings-queries.tsx
@ -8,7 +8,8 @@ import { getGroups } from "@/features/group/services/group-service.ts";
 import { QueryParams } from "@/lib/types.ts";
 import { getWorkspaceMembers } from "@/features/workspace/services/workspace-service.ts";
 import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
-import { getSsoProviders } from '@/ee/security/services/security-service.ts';
+import { getSsoProviders } from "@/ee/security/services/security-service.ts";
 import { getShares } from "@/features/share/services/share-service.ts";
 export const prefetchWorkspaceMembers = () => {
  const params = { limit: 100, page: 1, query: "" } as QueryParams;
@ -57,3 +58,10 @@ export const prefetchSsoProviders = () => {
    queryFn: () => getSsoProviders(),
  });
 };
 export const prefetchShares = () => {
  queryClient.prefetchQuery({
    queryKey: ["share-list", { page: 1 }],
    queryFn: () => getShares({ page: 1, limit: 100 }),
  });
 };
--- a/apps/client/src/components/settings/settings-sidebar.tsx
+++ b/apps/client/src/components/settings/settings-sidebar.tsx
@ -11,8 +11,9 @@ import {
  IconCoin,
  IconLock,
  IconKey,
  IconWorld,
 } from "@tabler/icons-react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
@ -23,11 +24,15 @@ import {
  prefetchBilling,
  prefetchGroups,
  prefetchLicense,
  prefetchShares,
  prefetchSpaces,
  prefetchSsoProviders,
  prefetchWorkspaceMembers,
 } from "@/components/settings/settings-queries.tsx";
 import AppVersion from "@/components/settings/app-version.tsx";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import { useSettingsNavigation } from "@/hooks/use-settings-navigation";
 interface DataItem {
  label: string;
@ -82,6 +87,7 @@ const groupedData: DataGroup[] = [
      },
      { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
      { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
      { label: "Public sharing", icon: IconWorld, path: "/settings/sharing" },
    ],
  },
  {
@ -100,9 +106,11 @@ export default function SettingsSidebar() {
  const { t } = useTranslation();
  const location = useLocation();
  const [active, setActive] = useState(location.pathname);
-  const navigate = useNavigate();
+  const { goBack } = useSettingsNavigation();
  const { isAdmin } = useUserRole();
  const [workspace] = useAtom(workspaceAtom);
  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
  useEffect(() => {
    setActive(location.pathname);
@ -170,6 +178,9 @@ export default function SettingsSidebar() {
            case "Security & SSO":
              prefetchHandler = prefetchSsoProviders;
              break;
            case "Public sharing":
              prefetchHandler = prefetchShares;
              break;
            default:
              break;
          }
@ -181,6 +192,11 @@ export default function SettingsSidebar() {
              data-active={active.startsWith(item.path) || undefined}
              key={item.label}
              to={item.path}
              onClick={() => {
                if (mobileSidebarOpened) {
                  toggleMobileSidebar();
                }
              }}
            >
              <item.icon className={classes.linkIcon} stroke={2} />
              <span>{t(item.label)}</span>
@ -195,7 +211,12 @@ export default function SettingsSidebar() {
    <div className={classes.navbar}>
      <Group className={classes.title} justify="flex-start">
        <ActionIcon
-          onClick={() => navigate(-1)}
+          onClick={() => {
            goBack();
            if (mobileSidebarOpened) {
              toggleMobileSidebar();
            }
          }}
          variant="transparent"
          c="gray"
          aria-label="Back"
--- a/apps/client/src/components/theme-toggle.module.css
+++ b/apps/client/src/components/theme-toggle.module.css
@ -0,0 +1,19 @@
 .dark {
  @mixin dark {
    display: none;
  }
  @mixin light {
    display: block;
  }
 }
 .light {
  @mixin light {
    display: none;
  }
  @mixin dark {
    display: block;
  }
 }
--- a/apps/client/src/components/theme-toggle.tsx
+++ b/apps/client/src/components/theme-toggle.tsx
@ -1,13 +1,28 @@
-import { Button, Group, useMantineColorScheme } from '@mantine/core';
+import {
  ActionIcon,
  Tooltip,
  useComputedColorScheme,
  useMantineColorScheme,
 } from "@mantine/core";
 import { IconMoon, IconSun } from "@tabler/icons-react";
 import classes from "./theme-toggle.module.css";
 export function ThemeToggle() {
  const { setColorScheme } = useMantineColorScheme();
  const computedColorScheme = useComputedColorScheme();
  return (
-      <Group justify="center" mt="xl">
+    <Tooltip label="Toggle Color Scheme">
-          <Button onClick={() => setColorScheme('light')}>Light</Button>
+      <ActionIcon
-          <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+        variant="default"
-          <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+        onClick={() => {
-      </Group>
+          setColorScheme(computedColorScheme === "light" ? "dark" : "light");
        }}
        aria-label="Toggle color scheme"
      >
        <IconSun className={classes.light} size={18} stroke={1.5} />
        <IconMoon className={classes.dark} size={18} stroke={1.5} />
      </ActionIcon>
    </Tooltip>
  );
 }
--- a/apps/client/src/ee/billing/components/billing-trial.tsx
+++ b/apps/client/src/ee/billing/components/billing-trial.tsx
@ -1,6 +1,7 @@
 import { Alert } from "@mantine/core";
 import { useBillingQuery } from "@/ee/billing/queries/billing-query.ts";
 import useTrial from "@/ee/hooks/use-trial.tsx";
 import { getBillingTrialDays } from '@/lib/config.ts';
 export default function BillingTrial() {
  const { data: billing, isLoading } = useBillingQuery();
@ -15,14 +16,14 @@ export default function BillingTrial() {
      {trialDaysLeft > 0 && !billing && (
        <Alert title="Your Trial is Active 🎉" color="blue" radius="md">
          You have {trialDaysLeft} {trialDaysLeft === 1 ? "day" : "days"} left
-          in your 7-day trial. Please subscribe to a plan before your trial
+          in your {getBillingTrialDays()}-day free trial. Please subscribe to a paid plan before your trial
          ends.
        </Alert>
      )}
      {trialDaysLeft === 0 && (
        <Alert title="Your Trial has ended" color="red" radius="md">
-          Your 7-day trial has come to an end. Please subscribe to a plan to
+          Your {getBillingTrialDays()}-day free trial has come to an end. Please subscribe to a paid plan to
          continue using this service.
        </Alert>
      )}
--- a/apps/client/src/ee/billing/types/billing.types.ts
+++ b/apps/client/src/ee/billing/types/billing.types.ts
@ -1,5 +1,6 @@
 export enum BillingPlan {
  STANDARD = "standard",
  BUSINESS = "business",
 }
 export interface IBilling {
--- a/apps/client/src/ee/hooks/use-plan.tsx
+++ b/apps/client/src/ee/hooks/use-plan.tsx
@ -2,14 +2,18 @@ import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { BillingPlan } from "@/ee/billing/types/billing.types.ts";
-export const usePlan = () => {
+const usePlan = () => {
  const [workspace] = useAtom(workspaceAtom);
  const isStandard =
    typeof workspace?.plan === "string" &&
    workspace?.plan.toLowerCase() === BillingPlan.STANDARD.toLowerCase();
-  return { isStandard };
+  const isBusiness =
    typeof workspace?.plan === "string" &&
    workspace?.plan.toLowerCase() === BillingPlan.BUSINESS.toLowerCase();
  return { isStandard, isBusiness };
 };
 export default usePlan;
--- a/apps/client/src/ee/hooks/use-trial-end-action.tsx
+++ b/apps/client/src/ee/hooks/use-trial-end-action.tsx
@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { isCloud } from "@/lib/config.ts";
+import { getBillingTrialDays, isCloud } from "@/lib/config.ts";
 import APP_ROUTE from "@/lib/app-route.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import { notifications } from "@mantine/notifications";
@ -18,7 +18,7 @@ export const useTrialEndAction = () => {
        notifications.show({
          position: "top-right",
          color: "red",
-          title: "Your 7-day trial has ended",
+          title: `Your ${getBillingTrialDays()}-day trial has ended`,
          message:
            "Please upgrade to a paid plan or contact your workspace admin.",
          autoClose: false,
--- a/apps/client/src/ee/security/components/enforce-sso.tsx
+++ b/apps/client/src/ee/security/components/enforce-sso.tsx
@ -15,7 +15,7 @@ export default function EnforceSso() {
        <Text size="md">{t("Enforce SSO")}</Text>
        <Text size="sm" c="dimmed">
          {t(
-            "Once enforced, members will not able able to login with email and password.",
+            "Once enforced, members will not be able to login with email and password.",
          )}
        </Text>
      </div>
--- a/apps/client/src/ee/security/pages/security.tsx
+++ b/apps/client/src/ee/security/pages/security.tsx
@ -10,11 +10,13 @@ import EnforceSso from "@/ee/security/components/enforce-sso.tsx";
 import AllowedDomains from "@/ee/security/components/allowed-domains.tsx";
 import { useTranslation } from "react-i18next";
 import useLicense from "@/ee/hooks/use-license.tsx";
 import usePlan from "@/ee/hooks/use-plan.tsx";
 export default function Security() {
  const { t } = useTranslation();
  const { isAdmin } = useUserRole();
  const { hasLicenseKey } = useLicense();
  const { isBusiness } = usePlan();
  if (!isAdmin) {
    return null;
@ -35,8 +37,7 @@ export default function Security() {
        Single sign-on (SSO)
      </Title>
-      {/*TODO: revisit when we add a second plan */}
+      {(isCloud() && isBusiness) || (!isCloud() && hasLicenseKey) ? (
      {!isCloud() && hasLicenseKey ? (
        <>
          <EnforceSso />
          <Divider my="lg" />
--- a/apps/client/src/features/comment/components/comment-actions.tsx
+++ b/apps/client/src/features/comment/components/comment-actions.tsx
@ -1,4 +1,4 @@
-import { Button, Group } from "@mantine/core";
+import { Button, Group, Tooltip } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 type CommentActionsProps = {
--- a/apps/client/src/features/comment/components/comment-dialog.tsx
+++ b/apps/client/src/features/comment/components/comment-dialog.tsx
@ -15,6 +15,7 @@ import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-
 import { useEditor } from "@tiptap/react";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 interface CommentDialogProps {
  editor: ReturnType<typeof useEditor>;
@ -35,6 +36,8 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
  const createCommentMutation = useCreateCommentMutation();
  const { isPending } = createCommentMutation;
  const emit = useQueryEmit();
  const handleDialogClose = () => {
    setShowCommentPopup(false);
    editor.chain().focus().unsetCommentDecoration().run();
@ -63,11 +66,23 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
        .run();
      setActiveCommentId(createdComment.id);
      //unselect text to close bubble menu
      editor.commands.setTextSelection({ from: editor.view.state.selection.from, to: editor.view.state.selection.from });
      setAsideState({ tab: "comments", isAsideOpen: true });
      setTimeout(() => {
        const selector = `div[data-comment-id="${createdComment.id}"]`;
        const commentElement = document.querySelector(selector);
-        commentElement?.scrollIntoView();
+        commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
        editor.view.dispatch(
          editor.state.tr.scrollIntoView()
        );
      }, 400);
      emit({
        operation: "invalidateComment",
        pageId: pageId,
      });
    } finally {
      setShowCommentPopup(false);
@ -109,6 +124,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
        <CommentEditor
          onUpdate={handleCommentEditorChange}
          onSave={handleAddComment}
          placeholder={t("Write a comment")}
          editable={true}
          autofocus={true}
--- a/apps/client/src/features/comment/components/comment-editor.tsx
+++ b/apps/client/src/features/comment/components/comment-editor.tsx
@ -8,10 +8,12 @@ import { useFocusWithin } from "@mantine/hooks";
 import clsx from "clsx";
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command";
 interface CommentEditorProps {
  defaultContent?: any;
  onUpdate?: any;
  onSave?: any;
  editable: boolean;
  placeholder?: string;
  autofocus?: boolean;
@ -22,6 +24,7 @@ const CommentEditor = forwardRef(
    {
      defaultContent,
      onUpdate,
      onSave,
      editable,
      placeholder,
      autofocus,
@ -42,7 +45,35 @@ const CommentEditor = forwardRef(
        }),
        Underline,
        Link,
        EmojiCommand,
      ],
      editorProps: {
        handleDOMEvents: {
          keydown: (_view, event) => {
            if (
              [
                "ArrowUp",
                "ArrowDown",
                "ArrowLeft",
                "ArrowRight",
                "Enter",
              ].includes(event.key)
            ) {
              const emojiCommand = document.querySelector("#emoji-command");
              if (emojiCommand) {
                return true;
              }
            }
            if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
              event.preventDefault();
              if (onSave) onSave();
              return true;
            }
          },
        },
      },
      onUpdate({ editor }) {
        if (onUpdate) onUpdate(editor.getJSON());
      },
@ -53,6 +84,10 @@ const CommentEditor = forwardRef(
      autofocus: (autofocus && "end") || false,
    });
    useEffect(() => {
      commentEditor.commands.setContent(defaultContent);
    }, [defaultContent]);
    useEffect(() => {
      setTimeout(() => {
        if (autofocus) {
--- a/apps/client/src/features/comment/components/comment-list-item.tsx
+++ b/apps/client/src/features/comment/components/comment-list-item.tsx
@ -1,5 +1,5 @@
 import { Group, Text, Box } from "@mantine/core";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import classes from "./comment.module.css";
 import { useAtom, useAtomValue } from "jotai";
 import { timeAgo } from "@/lib/time";
@ -15,12 +15,14 @@ import {
 import { IComment } from "@/features/comment/types/comment.types";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 interface CommentListItemProps {
  comment: IComment;
  pageId: string;
 }
-function CommentListItem({ comment }: CommentListItemProps) {
+function CommentListItem({ comment, pageId }: CommentListItemProps) {
  const { hovered, ref } = useHover();
  const [isEditing, setIsEditing] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
@ -29,6 +31,11 @@ function CommentListItem({ comment }: CommentListItemProps) {
  const updateCommentMutation = useUpdateCommentMutation();
  const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
  const [currentUser] = useAtom(currentUserAtom);
  const emit = useQueryEmit();
  useEffect(() => {
    setContent(comment.content)
  }, [comment]);
  async function handleUpdateComment() {
    try {
@ -39,6 +46,11 @@ function CommentListItem({ comment }: CommentListItemProps) {
      };
      await updateCommentMutation.mutateAsync(commentToUpdate);
      setIsEditing(false);
      emit({
        operation: "invalidateComment",
        pageId: pageId,
      });
    } catch (error) {
      console.error("Failed to update comment:", error);
    } finally {
@ -50,11 +62,27 @@ function CommentListItem({ comment }: CommentListItemProps) {
    try {
      await deleteCommentMutation.mutateAsync(comment.id);
      editor?.commands.unsetComment(comment.id);
      emit({
        operation: "invalidateComment",
        pageId: pageId,
      });
    } catch (error) {
      console.error("Failed to delete comment:", error);
    }
  }
  function handleCommentClick(comment: IComment) {
    const el = document.querySelector(`.comment-mark[data-comment-id="${comment.id}"]`);
    if (el) {
      el.scrollIntoView({ behavior: "smooth", block: "center" });
      el.classList.add("comment-highlight");
      setTimeout(() => {
        el.classList.remove("comment-highlight");
      }, 3000);
    }
  }
  function handleEditToggle() {
    setIsEditing(true);
  }
@ -99,7 +127,7 @@ function CommentListItem({ comment }: CommentListItemProps) {
      <div>
        {!comment.parentCommentId && comment?.selection && (
-          <Box className={classes.textSelection}>
+          <Box className={classes.textSelection} onClick={() => handleCommentClick(comment)}>
            <Text size="sm">{comment?.selection}</Text>
          </Box>
        )}
@ -112,6 +140,7 @@ function CommentListItem({ comment }: CommentListItemProps) {
              defaultContent={content}
              editable={true}
              onUpdate={(newContent: any) => setContent(newContent)}
              onSave={handleUpdateComment}
              autofocus={true}
            />
--- a/apps/client/src/features/comment/components/comment-list.tsx
+++ b/apps/client/src/features/comment/components/comment-list.tsx
@ -14,6 +14,7 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { IPagination } from "@/lib/types.ts";
 import { extractPageSlugId } from "@/lib";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 function CommentList() {
  const { t } = useTranslation();
@ -26,6 +27,7 @@ function CommentList() {
  } = useCommentsQuery({ pageId: page?.id, limit: 100 });
  const createCommentMutation = useCreateCommentMutation();
  const [isLoading, setIsLoading] = useState(false);
  const emit = useQueryEmit();
  const handleAddReply = useCallback(
    async (commentId: string, content: string) => {
@ -38,6 +40,11 @@ function CommentList() {
        };
        await createCommentMutation.mutateAsync(commentData);
        emit({
          operation: "invalidateComment",
          pageId: page?.id,
        });
      } catch (error) {
        console.error("Failed to post comment:", error);
      } finally {
@ -59,8 +66,8 @@ function CommentList() {
        data-comment-id={comment.id}
      >
        <div>
-          <CommentListItem comment={comment} />
+          <CommentListItem comment={comment} pageId={page?.id} />
-          <MemoizedChildComments comments={comments} parentId={comment.id} />
+          <MemoizedChildComments comments={comments} parentId={comment.id} pageId={page?.id} />
        </div>
        <Divider my={4} />
@ -99,8 +106,9 @@ function CommentList() {
 interface ChildCommentsProps {
  comments: IPagination<IComment>;
  parentId: string;
  pageId: string;
 }
-const ChildComments = ({ comments, parentId }: ChildCommentsProps) => {
+const ChildComments = ({ comments, parentId, pageId }: ChildCommentsProps) => {
  const getChildComments = useCallback(
    (parentId: string) =>
      comments.items.filter(
@ -113,10 +121,11 @@ const ChildComments = ({ comments, parentId }: ChildCommentsProps) => {
    <div>
      {getChildComments(parentId).map((childComment) => (
        <div key={childComment.id}>
-          <CommentListItem comment={childComment} />
+          <CommentListItem comment={childComment} pageId={pageId} />
          <MemoizedChildComments
            comments={comments}
            parentId={childComment.id}
            pageId={pageId}
          />
        </div>
      ))}
@ -142,6 +151,7 @@ const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
      <CommentEditor
        ref={commentEditorRef}
        onUpdate={setContent}
        onSave={handleSave}
        editable={true}
      />
      {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
--- a/apps/client/src/features/comment/components/comment.module.css
+++ b/apps/client/src/features/comment/components/comment.module.css
@ -11,25 +11,26 @@
    border-left: 2px solid var(--mantine-color-gray-6);
    padding: 8px;
    background: var(--mantine-color-gray-light);
    cursor: pointer;
 }
 .commentEditor {
    .focused {
        border-radius: var(--mantine-radius-sm);
        box-shadow: 0 0 0 2px var(--mantine-color-blue-3);
    }
-    .ProseMirror {
+    .ProseMirror :global(.ProseMirror){
-        width: 100%;
+        border-radius: var(--mantine-radius-sm);
        max-width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 20vh;
        padding-left: 6px;
        padding-right: 6px;
-        margin-top: 2px;
+        margin-top: 10px;
        margin-bottom: 2px;
        font-size: 14px;
        overflow: hidden auto;
    }
--- a/apps/client/src/features/editor/atoms/editor-atoms.ts
+++ b/apps/client/src/features/editor/atoms/editor-atoms.ts
@ -5,4 +5,6 @@ export const pageEditorAtom = atom<Editor | null>(null);
 export const titleEditorAtom = atom<Editor | null>(null);
 export const readOnlyEditorAtom = atom<Editor | null>(null);
 export const yjsConnectionStatusAtom = atom<string>("");
--- a/apps/client/src/features/editor/components/drawio/drawio-view.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-view.tsx
@ -139,7 +139,7 @@ export default function DrawioView(props: NodeViewProps) {
            )}
          />
-          {selected && (
+          {selected && editor.isEditable && (
            <ActionIcon
              onClick={handleOpen}
              variant="default"
--- a/apps/client/src/features/editor/components/embed/embed-view.tsx
+++ b/apps/client/src/features/editor/components/embed/embed-view.tsx
@ -15,13 +15,10 @@ import {
 import { IconEdit } from "@tabler/icons-react";
 import { z } from "zod";
 import { useForm, zodResolver } from "@mantine/form";
 import {
  getEmbedProviderById,
  getEmbedUrlAndProvider,
 } from "@/features/editor/components/embed/providers.ts";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 import i18n from "i18next";
 import { getEmbedProviderById, getEmbedUrlAndProvider } from '@docmost/editor-ext';
 const schema = z.object({
  url: z
--- a/apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts
+++ b/apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts
@ -33,7 +33,7 @@ const renderEmojiItems = () => {
        showOnCreate: true,
        interactive: true,
        trigger: "manual",
-        placement: "bottom-start",
+        placement: "bottom",
      });
    },
    onStart: (props: {
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
@ -170,7 +170,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
            )}
          />
-          {selected && (
+          {selected && editor.isEditable && (
            <ActionIcon
              onClick={handleOpen}
              variant="default"
--- a/apps/client/src/features/editor/components/mention/mention-list.tsx
+++ b/apps/client/src/features/editor/components/mention/mention-list.tsx
@ -3,6 +3,7 @@ import React, {
  useCallback,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
 } from "react";
@ -18,7 +19,7 @@ import {
 import clsx from "clsx";
 import classes from "./mention.module.css";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { IconFileDescription } from "@tabler/icons-react";
+import { IconFileDescription, IconPlus } from "@tabler/icons-react";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { useParams } from "react-router-dom";
 import { v7 as uuid7 } from "uuid";
@ -28,14 +29,28 @@ import {
  MentionListProps,
  MentionSuggestionItem,
 } from "@/features/editor/components/mention/mention.type.ts";
 import { IPage } from "@/features/page/types/page.types";
 import { useCreatePageMutation, usePageQuery } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
 import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 import { extractPageSlugId } from "@/lib";
 const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
  const [selectedIndex, setSelectedIndex] = useState(1);
  const viewportRef = useRef<HTMLDivElement>(null);
-  const { spaceSlug } = useParams();
+  const { pageSlug, spaceSlug } = useParams();
  const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
  const { data: space } = useSpaceQuery(spaceSlug);
  const [currentUser] = useAtom(currentUserAtom);
  const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
  const { t } = useTranslation();
  const [data, setData] = useAtom(treeDataAtom);
  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
  const createPageMutation = useCreatePageMutation();
  const emit = useQueryEmit();
  const { data: suggestion, isLoading } = useSearchSuggestionsQuery({
    query: props.query,
@ -45,12 +60,23 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
    limit: 10,
  });
  const createPageItem = (label: string) : MentionSuggestionItem => {
    return {
      id: null,
      label: label,
      entityType: "page",
      entityId: null,
      slugId: null,
      icon: null,
    }
  }
  useEffect(() => {
    if (suggestion && !isLoading) {
      let items: MentionSuggestionItem[] = [];
      if (suggestion?.users?.length > 0) {
-        items.push({ entityType: "header", label: "Users" });
+        items.push({ entityType: "header", label: t("Users") });
        items = items.concat(
          suggestion.users.map((user) => ({
@ -64,7 +90,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
      }
      if (suggestion?.pages?.length > 0) {
-        items.push({ entityType: "header", label: "Pages" });
+        items.push({ entityType: "header", label: t("Pages") });
        items = items.concat(
          suggestion.pages.map((page) => ({
            id: uuid7(),
@ -76,6 +102,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
          })),
        );
      }
      items.push(createPageItem(props.query));
      setRenderItems(items);
      // update editor storage
@ -96,7 +123,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
            creatorId: currentUser?.user.id,
          });
        }
-        if (item.entityType === "page") {
+        if (item.entityType === "page" && item.id!==null) {
          props.command({
            id: item.id,
            label: item.label || "Untitled",
@ -106,6 +133,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
            creatorId: currentUser?.user.id,
          });
        }
        if (item.entityType === "page" && item.id===null) {
          createPage(item.label);
        }
      }
    },
    [renderItems],
@ -167,6 +197,58 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
    },
  }));
  const createPage = async (title: string) => {
    const payload: { spaceId: string; parentPageId?: string; title: string } = {
      spaceId: space.id,
      parentPageId: page.id || null,
      title: title
    };
    let createdPage: IPage;
    try {
      createdPage = await createPageMutation.mutateAsync(payload);
      const parentId = page.id || null;
      const data = {
        id: createdPage.id,
        slugId: createdPage.slugId,
        name: createdPage.title,
        position: createdPage.position,
        spaceId: createdPage.spaceId,
        parentPageId: createdPage.parentPageId,
        children: [],
      } as any;
      const lastIndex = tree.data.length;
      tree.create({ parentId, index: lastIndex, data });
      setData(tree.data);
      props.command({
        id: uuid7(),
        label:  createdPage.title || "Untitled",
        entityType: "page",
        entityId: createdPage.id,
        slugId: createdPage.slugId,
        creatorId: currentUser?.user.id,
      });
      setTimeout(() => {
      emit({
        operation: "addTreeNode",
        spaceId: space.id,
        payload: {
          parentId,
          index: lastIndex,
          data,
        },
      });
    }, 50);
    } catch (err) {
      throw new Error("Failed to create page");
    }
  }
  // if no results and enter what to do?
  useEffect(() => {
@ -178,7 +260,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
  if (renderItems.length === 0) {
    return (
      <Paper shadow="md" p="xs" withBorder>
-        No results
+        { t("No results") }
      </Paper>
    );
  }
@ -248,14 +330,14 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                        color="gray"
                        size={18}
                      >
-                        <IconFileDescription size={18} />
+                        { (item.id) ? <IconFileDescription size={18} /> : <IconPlus size={18} /> }
                      </ActionIcon>
                    )}
                  </ActionIcon>
                  <div style={{ flex: 1 }}>
                    <Text size="sm" fw={500}>
-                      {item.label}
+                      { (item.id) ? item.label : t("Create page") + ': ' + item.label }
                    </Text>
                  </div>
                </Group>
--- a/apps/client/src/features/editor/components/mention/mention-view.tsx
+++ b/apps/client/src/features/editor/components/mention/mention-view.tsx
@ -1,21 +1,34 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import {
  buildPageUrl,
  buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
 import classes from "./mention.module.css";
 export default function MentionView(props: NodeViewProps) {
  const { node } = props;
  const { label, entityType, entityId, slugId } = node.attrs;
  const { spaceSlug } = useParams();
  const { shareId } = useParams();
  const {
    data: page,
    isLoading,
    isError,
  } = usePageQuery({ pageId: entityType === "page" ? slugId : null });
  const location = useLocation();
  const isShareRoute = location.pathname.startsWith("/share");
  const shareSlugUrl = buildSharedPageUrl({
    shareId,
    pageSlugId: slugId,
    pageTitle: label,
  });
  return (
    <NodeViewWrapper style={{ display: "inline" }}>
      {entityType === "user" && (
@ -28,7 +41,9 @@ export default function MentionView(props: NodeViewProps) {
        <Anchor
          component={Link}
          fw={500}
-          to={buildPageUrl(spaceSlug, slugId, label)}
+          to={
            isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label)
          }
          underline="never"
          className={classes.pageMentionLink}
        >
--- a/apps/client/src/features/editor/components/table-of-contents/table-of-contents.module.css
+++ b/apps/client/src/features/editor/components/table-of-contents/table-of-contents.module.css
@ -52,3 +52,8 @@
    ) !important;
  }
 }
 .leftBorder {
  border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }
--- a/apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx
+++ b/apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx
@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 type TableOfContentsProps = {
  editor: ReturnType<typeof useEditor>;
  isShare?: boolean;
 };
 export type HeadingLink = {
@ -73,6 +74,7 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
  const handleUpdate = () => {
    const result = recalculateLinks(props.editor?.$nodes("heading"));
    setLinks(result.links);
    setHeadingDOMNodes(result.nodes);
  };
@ -85,9 +87,12 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
    };
  }, [props.editor]);
-  useEffect(() => {
+  useEffect(
    () => {
      handleUpdate();
-  }, []);
+    },
    props.isShare ? [props.editor] : [],
  );
  useEffect(() => {
    try {
@ -133,16 +138,29 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
  if (!links.length) {
    return (
      <>
        {!props.isShare && (
          <Text size="sm">
            {t("Add headings (H1, H2, H3) to generate a table of contents.")}
          </Text>
        )}
        {props.isShare && (
          <Text size="sm" c="dimmed">
            {t("No table of contents.")}
          </Text>
        )}
      </>
    );
  }
  return (
    <>
-      <div>
+      {props.isShare && (
        <Text mb="md" fw={500}>
          {t("Table of contents")}
        </Text>
      )}
      <div className={props.isShare ? classes.leftBorder : ""}>
        {links.map((item, idx) => (
          <Box<"button">
            component="button"
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@ -58,6 +58,7 @@ import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-v
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
 import plaintext from "highlight.js/lib/languages/plaintext";
 import powershell from "highlight.js/lib/languages/powershell";
 import abap from "highlightjs-sap-abap";
 import elixir from "highlight.js/lib/languages/elixir";
 import erlang from "highlight.js/lib/languages/erlang";
 import dockerfile from "highlight.js/lib/languages/dockerfile";
@ -76,7 +77,7 @@ import { CharacterCount } from "@tiptap/extension-character-count";
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
 lowlight.register("powershell", powershell);
-lowlight.register("powershell", powershell);
+lowlight.register("abap", abap);
 lowlight.register("erlang", erlang);
 lowlight.register("elixir", elixir);
 lowlight.register("dockerfile", dockerfile);
--- a/apps/client/src/features/editor/page-editor.tsx
+++ b/apps/client/src/features/editor/page-editor.tsx
@ -219,9 +219,12 @@ export default function PageEditor({
    setActiveCommentId(commentId);
    setAsideState({ tab: "comments", isAsideOpen: true });
    //wait if aside is closed
    setTimeout(() => {
      const selector = `div[data-comment-id="${commentId}"]`;
      const commentElement = document.querySelector(selector);
-    commentElement?.scrollIntoView();
+      commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
    }, 400);
  };
  useEffect(() => {
--- a/apps/client/src/features/editor/readonly-page-editor.tsx
+++ b/apps/client/src/features/editor/readonly-page-editor.tsx
@ -0,0 +1,67 @@
 import "@/features/editor/styles/index.css";
 import React, { useMemo } from "react";
 import { EditorProvider } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Document } from "@tiptap/extension-document";
 import { Heading } from "@tiptap/extension-heading";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai/index";
 import {
  pageEditorAtom,
  readOnlyEditorAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { Editor } from "@tiptap/core";
 interface PageEditorProps {
  title: string;
  content: any;
 }
 export default function ReadonlyPageEditor({
  title,
  content,
 }: PageEditorProps) {
  const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
  const extensions = useMemo(() => {
    return [...mainExtensions];
  }, []);
  const titleExtensions = [
    Document.extend({
      content: "heading",
    }),
    Heading,
    Text,
    Placeholder.configure({
      placeholder: "Untitled",
      showOnlyWhenEditable: false,
    }),
  ];
  return (
    <>
      <EditorProvider
        editable={false}
        immediatelyRender={true}
        extensions={titleExtensions}
        content={title}
      ></EditorProvider>
      <EditorProvider
        editable={false}
        immediatelyRender={true}
        extensions={extensions}
        content={content}
        onCreate={({ editor }) => {
          if (editor) {
            // @ts-ignore
            setReadOnlyEditor(editor);
          }
        }}
      ></EditorProvider>
      <div style={{ paddingBottom: "20vh" }}></div>
    </>
  );
 }
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@ -144,6 +144,19 @@
    border-bottom: 2px solid rgb(166, 158, 12);
  }
  .comment-highlight {
    animation: flash-highlight 3s ease-out;
  }
  @keyframes flash-highlight {
    0% {
      background-color: #ff4d4d;
    }
    100% {
      background-color: rgba(255, 215, 0, 0.14);
    }
  }
  .resize-cursor {
    cursor: ew-resize;
    cursor: col-resize;
--- a/apps/client/src/features/editor/styles/table.css
+++ b/apps/client/src/features/editor/styles/table.css
@ -47,7 +47,7 @@
    .column-resize-handle {
      background-color: #adf;
-      bottom: -2px;
+      bottom: -1px;
      position: absolute;
      right: -2px;
      pointer-events: none;
--- a/apps/client/src/features/editor/title-editor.tsx
+++ b/apps/client/src/features/editor/title-editor.tsx
@ -10,7 +10,7 @@ import {
  pageEditorAtom,
  titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
-import { useUpdatePageMutation } from "@/features/page/queries/page-query";
+import { updatePageData, useUpdateTitlePageMutation } from "@/features/page/queries/page-query";
 import { useDebouncedCallback } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
@ -38,7 +38,7 @@ export function TitleEditor({
  editable,
 }: TitleEditorProps) {
  const { t } = useTranslation();
-  const { mutateAsync: updatePageMutationAsync } = useUpdatePageMutation();
+  const { mutateAsync: updateTitlePageMutationAsync } = useUpdateTitlePageMutation();
  const pageEditor = useAtomValue(pageEditorAtom);
  const [, setTitleEditor] = useAtom(titleEditorAtom);
  const emit = useQueryEmit();
@ -94,7 +94,7 @@ export function TitleEditor({
      return;
    }
-    updatePageMutationAsync({
+    updateTitlePageMutationAsync({
      pageId: pageId,
      title: titleEditor.getText(),
    }).then((page) => {
@ -106,6 +106,10 @@ export function TitleEditor({
        payload: { title: page.title, slugId: page.slugId },
      };
      if (page.title !== titleEditor.getText()) return;
      updatePageData(page);
      localEmitter.emit("message", event);
      emit(event);
    });
--- a/apps/client/src/features/page/components/breadcrumbs/breadcrumb.module.css
+++ b/apps/client/src/features/page/components/breadcrumbs/breadcrumb.module.css
@ -2,6 +2,7 @@
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;
    a {
        color: var(--mantine-color-default-color);
--- a/apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx
+++ b/apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx
@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { findBreadcrumbPath } from "@/features/page/tree/utils";
 import {
  Button,
@ -9,14 +9,16 @@ import {
  Breadcrumbs,
  ActionIcon,
  Text,
  Tooltip,
 } from "@mantine/core";
-import { IconDots } from "@tabler/icons-react";
+import { IconCornerDownRightDouble, IconDots } from "@tabler/icons-react";
 import { Link, useParams } from "react-router-dom";
 import classes from "./breadcrumb.module.css";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { extractPageSlugId } from "@/lib";
 import { useMediaQuery } from "@mantine/hooks";
 function getTitle(name: string, icon: string) {
  if (icon) {
@ -34,6 +36,7 @@ export default function Breadcrumb() {
  const { data: currentPage } = usePageQuery({
    pageId: extractPageSlugId(pageSlug),
  });
  const isMobile = useMediaQuery("(max-width: 48em)");
  useEffect(() => {
    if (treeData?.length > 0 && currentPage) {
@ -43,7 +46,7 @@ export default function Breadcrumb() {
  }, [currentPage?.id, treeData]);
  const HiddenNodesTooltipContent = () =>
-    breadcrumbNodes?.slice(1, -2).map((node) => (
+    breadcrumbNodes?.slice(1, -1).map((node) => (
      <Button.Group orientation="vertical" key={node.id}>
        <Button
          justify="start"
@ -59,17 +62,39 @@ export default function Breadcrumb() {
      </Button.Group>
    ));
-  const renderAnchor = (node: SpaceTreeNode) => (
+  const MobileHiddenNodesTooltipContent = () =>
    breadcrumbNodes?.map((node) => (
      <Button.Group orientation="vertical" key={node.id}>
        <Button
          justify="start"
          component={Link}
          to={buildPageUrl(spaceSlug, node.slugId, node.name)}
          variant="default"
          style={{ border: "none" }}
        >
          <Text fz={"sm"} className={classes.truncatedText}>
            {getTitle(node.name, node.icon)}
          </Text>
        </Button>
      </Button.Group>
    ));
  const renderAnchor = useCallback(
    (node: SpaceTreeNode) => (
      <Tooltip label={node.name} key={node.id}>
        <Anchor
          component={Link}
          to={buildPageUrl(spaceSlug, node.slugId, node.name)}
          underline="never"
-      fz={"sm"}
+          fz="sm"
          key={node.id}
          className={classes.truncatedText}
        >
          {getTitle(node.name, node.icon)}
        </Anchor>
      </Tooltip>
    ),
    [spaceSlug],
  );
  const getBreadcrumbItems = () => {
@ -77,7 +102,7 @@ export default function Breadcrumb() {
    if (breadcrumbNodes.length > 3) {
      const firstNode = breadcrumbNodes[0];
-      const secondLastNode = breadcrumbNodes[breadcrumbNodes.length - 2];
+      //const secondLastNode = breadcrumbNodes[breadcrumbNodes.length - 2];
      const lastNode = breadcrumbNodes[breadcrumbNodes.length - 1];
      return [
@ -98,7 +123,7 @@ export default function Breadcrumb() {
            <HiddenNodesTooltipContent />
          </Popover.Dropdown>
        </Popover>,
-        renderAnchor(secondLastNode),
+        //renderAnchor(secondLastNode),
        renderAnchor(lastNode),
      ];
    }
@ -106,11 +131,40 @@ export default function Breadcrumb() {
    return breadcrumbNodes.map(renderAnchor);
  };
  const getMobileBreadcrumbItems = () => {
    if (!breadcrumbNodes) return [];
    if (breadcrumbNodes.length > 0) {
      return [
        <Popover
          width={250}
          position="bottom"
          withArrow
          shadow="xl"
          key="mobile-hidden-nodes"
        >
          <Popover.Target>
            <Tooltip label="Breadcrumbs">
              <ActionIcon color="gray" variant="transparent">
                <IconCornerDownRightDouble size={20} stroke={2} />
              </ActionIcon>
            </Tooltip>
          </Popover.Target>
          <Popover.Dropdown>
            <MobileHiddenNodesTooltipContent />
          </Popover.Dropdown>
        </Popover>,
      ];
    }
    return breadcrumbNodes.map(renderAnchor);
  };
  return (
    <div style={{ overflow: "hidden" }}>
      {breadcrumbNodes && (
        <Breadcrumbs className={classes.breadcrumbs}>
-          {getBreadcrumbItems()}
+          {isMobile ? getMobileBreadcrumbItems() : getBreadcrumbItems()}
        </Breadcrumbs>
      )}
    </div>
--- a/apps/client/src/features/page/components/copy-page-modal.tsx
+++ b/apps/client/src/features/page/components/copy-page-modal.tsx
@ -0,0 +1,105 @@
 import { Modal, Button, Group, Text } from "@mantine/core";
 import { copyPageToSpace } from "@/features/page/services/page-service.ts";
 import { useState } from "react";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 import { ISpace } from "@/features/space/types/space.types.ts";
 import { queryClient } from "@/main.tsx";
 import { SpaceSelect } from "@/features/space/components/sidebar/space-select.tsx";
 import { useNavigate } from "react-router-dom";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 interface CopyPageModalProps {
  pageId: string;
  currentSpaceSlug: string;
  open: boolean;
  onClose: () => void;
 }
 export default function CopyPageModal({
  pageId,
  currentSpaceSlug,
  open,
  onClose,
 }: CopyPageModalProps) {
  const { t } = useTranslation();
  const [targetSpace, setTargetSpace] = useState<ISpace>(null);
  const navigate = useNavigate();
  const handleCopy = async () => {
    if (!targetSpace) return;
    try {
      const copiedPage = await copyPageToSpace({
        pageId,
        spaceId: targetSpace.id,
      });
      queryClient.removeQueries({
        predicate: (item) =>
          ["pages", "sidebar-pages", "root-sidebar-pages"].includes(
            item.queryKey[0] as string,
          ),
      });
      const pageUrl = buildPageUrl(
        copiedPage.space.slug,
        copiedPage.slugId,
        copiedPage.title,
      );
      navigate(pageUrl);
      notifications.show({
        message: t("Page copied successfully"),
      });
      onClose();
      setTargetSpace(null);
    } catch (err) {
      notifications.show({
        message: err.response?.data.message || "An error occurred",
        color: "red",
      });
      console.log(err);
    }
  };
  const handleChange = (space: ISpace) => {
    setTargetSpace(space);
  };
  return (
    <Modal.Root
      opened={open}
      onClose={onClose}
      size={500}
      padding="xl"
      yOffset="10vh"
      xOffset={0}
      mah={400}
      onClick={(e) => e.stopPropagation()}
    >
      <Modal.Overlay />
      <Modal.Content style={{ overflow: "hidden" }}>
        <Modal.Header py={0}>
          <Modal.Title fw={500}>{t("Copy page")}</Modal.Title>
          <Modal.CloseButton />
        </Modal.Header>
        <Modal.Body>
          <Text mb="xs" c="dimmed" size="sm">
            {t("Copy page to a different space.")}
          </Text>
          <SpaceSelect
            value={currentSpaceSlug}
            clearable={false}
            onChange={handleChange}
          />
          <Group justify="end" mt="md">
            <Button onClick={onClose} variant="default">
              {t("Cancel")}
            </Button>
            <Button onClick={handleCopy}>{t("Copy")}</Button>
          </Group>
        </Modal.Body>
      </Modal.Content>
    </Modal.Root>
  );
 }
--- a/apps/client/src/features/page/components/header/page-header-menu.tsx
+++ b/apps/client/src/features/page/components/header/page-header-menu.tsx
@ -12,7 +12,7 @@ import {
  IconTrash,
  IconWifiOff,
 } from "@tabler/icons-react";
-import React, { useEffect } from "react";
+import React from "react";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import { useAtom } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
@ -35,6 +35,7 @@ import {
 import { formattedDate, timeAgo } from "@/lib/time.ts";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import ShareModal from "@/features/share/components/share-modal.tsx";
 interface PageHeaderMenuProps {
  readOnly?: boolean;
@ -58,6 +59,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
        </Tooltip>
      )}
      <ShareModal readOnly={readOnly} />
      <Tooltip label={t("Comments")} openDelay={250} withArrow>
        <ActionIcon
          variant="default"
@ -103,7 +106,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
    { open: openMovePageModal, close: closeMoveSpaceModal },
  ] = useDisclosure(false);
  const [pageEditor] = useAtom(pageEditorAtom);
-  const pageUpdatedAt = useTimeAgo(page.updatedAt);
+  const pageUpdatedAt = useTimeAgo(page?.updatedAt);
  const handleCopyLink = () => {
    const pageUrl =
--- a/apps/client/src/features/page/components/move-page-modal.tsx
+++ b/apps/client/src/features/page/components/move-page-modal.tsx
@ -46,6 +46,7 @@ export default function MovePageModal({
        message: t("Page moved successfully"),
      });
      onClose();
      setTargetSpace(null);
    } catch (err) {
      notifications.show({
        message: err.response?.data.message || "An error occurred",
@ -53,7 +54,6 @@ export default function MovePageModal({
      });
      console.log(err);
    }
    setTargetSpace(null);
  };
  const handleChange = (space: ISpace) => {
@ -69,7 +69,7 @@ export default function MovePageModal({
      yOffset="10vh"
      xOffset={0}
      mah={400}
-      onClick={e => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
    >
      <Modal.Overlay />
      <Modal.Content style={{ overflow: "hidden" }}>
@ -78,7 +78,9 @@ export default function MovePageModal({
          <Modal.CloseButton />
        </Modal.Header>
        <Modal.Body>
-          <Text mb="xs" c="dimmed" size="sm">{t("Move page to a different space.")}</Text>
+          <Text mb="xs" c="dimmed" size="sm">
            {t("Move page to a different space.")}
          </Text>
          <SpaceSelect
            value={currentSpaceSlug}
--- a/apps/client/src/features/page/page.utils.ts
+++ b/apps/client/src/features/page/page.utils.ts
@ -8,7 +8,7 @@ const buildPageSlug = (pageSlugId: string, pageTitle?: string): string => {
    ],
  });
-  return `p/${titleSlug}-${pageSlugId}`;
+  return `${titleSlug}-${pageSlugId}`;
 };
 export const buildPageUrl = (
@ -17,7 +17,20 @@ export const buildPageUrl = (
  pageTitle?: string,
 ): string => {
  if (spaceName === undefined) {
-    return `/${buildPageSlug(pageSlugId, pageTitle)}`;
+    return `/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  }
-  return `/s/${spaceName}/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
 };
 export const buildSharedPageUrl = (opts: {
  shareId: string;
  pageSlugId: string;
  pageTitle?: string;
 }): string => {
  const { shareId, pageSlugId, pageTitle } = opts;
  if (!shareId) {
    return `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  }
  return `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
 };
--- a/apps/client/src/features/page/queries/page-query.ts
+++ b/apps/client/src/features/page/queries/page-query.ts
@ -63,12 +63,7 @@ export function useCreatePageMutation() {
  });
 }
-export function useUpdatePageMutation() {
+export function updatePageData(data: IPage) {
  const queryClient = useQueryClient();
  return useMutation<IPage, Error, Partial<IPageInput>>({
    mutationFn: (data) => updatePage(data),
    onSuccess: (data) => {
  const pageBySlug = queryClient.getQueryData<IPage>([
    "pages",
    data.slugId,
@ -85,6 +80,19 @@ export function useUpdatePageMutation() {
  if (pageById) {
    queryClient.setQueryData(["pages", data.id], { ...pageById, ...data });
  }
 }
 export function useUpdateTitlePageMutation() {
  return useMutation<IPage, Error, Partial<IPageInput>>({
    mutationFn: (data) => updatePage(data),
  });
 }
 export function useUpdatePageMutation() {
  return useMutation<IPage, Error, Partial<IPageInput>>({
    mutationFn: (data) => updatePage(data),
    onSuccess: (data) => {
      updatePage(data);
    },
  });
 }
--- a/apps/client/src/features/page/services/page-service.ts
+++ b/apps/client/src/features/page/services/page-service.ts
@ -1,5 +1,6 @@
 import api from "@/lib/api-client";
 import {
  ICopyPageToSpace,
  IExportPageParams,
  IMovePage,
  IMovePageToSpace,
@ -39,6 +40,11 @@ export async function movePageToSpace(data: IMovePageToSpace): Promise<void> {
  await api.post<void>("/pages/move-to-space", data);
 }
 export async function copyPageToSpace(data: ICopyPageToSpace): Promise<IPage> {
  const req = await api.post<IPage>("/pages/copy-to-space", data);
  return req.data;
 }
 export async function getSidebarPages(
  params: SidebarPagesParams,
 ): Promise<IPagination<IPage>> {
--- a/apps/client/src/features/page/tree/components/space-tree.tsx
+++ b/apps/client/src/features/page/tree/components/space-tree.tsx
@ -7,14 +7,15 @@ import {
  usePageQuery,
  useUpdatePageMutation,
 } from "@/features/page/queries/page-query.ts";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import classes from "@/features/page/tree/styles/tree.module.css";
-import { ActionIcon, Menu, rem } from "@mantine/core";
+import { ActionIcon, Box, Menu, rem } from "@mantine/core";
 import {
  IconArrowRight,
  IconChevronDown,
  IconChevronRight,
  IconCopy,
  IconDotsVertical,
  IconFileDescription,
  IconFileExport,
@ -58,6 +59,9 @@ import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.
 import { useTranslation } from "react-i18next";
 import ExportModal from "@/components/common/export-modal";
 import MovePageModal from "../../components/move-page-modal.tsx";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import CopyPageModal from "../../components/copy-page-modal.tsx";
 interface SpaceTreeProps {
  spaceId: string;
@ -84,7 +88,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
  const rootElement = useRef<HTMLDivElement>();
  const { ref: sizeRef, width, height } = useElementSize();
  const mergedRef = useMergedRef(rootElement, sizeRef);
-  const isDataLoaded = useRef(false);
+  const [isDataLoaded, setIsDataLoaded] = useState(false);
  const { data: currentPage } = usePageQuery({
    pageId: extractPageSlugId(pageSlug),
  });
@ -108,7 +112,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
        // and append root pages instead of resetting the entire tree
        // which looses async loaded children too
        setData(treeData);
-        isDataLoaded.current = true;
+        setIsDataLoaded(true);
        setOpenTreeNodes({});
      }
    }
@ -116,7 +120,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
  useEffect(() => {
    const fetchData = async () => {
-      if (isDataLoaded.current && currentPage) {
+      if (isDataLoaded && currentPage) {
        // check if pageId node is present in the tree
        const node = dfs(treeApiRef.current?.root, currentPage.id);
        if (node) {
@ -178,7 +182,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
    };
    fetchData();
-  }, [isDataLoaded.current, currentPage?.id]);
+  }, [isDataLoaded, currentPage?.id]);
  useEffect(() => {
    if (currentPage?.id) {
@ -230,13 +234,14 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
 }
 function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
-  const navigate = useNavigate();
+  const { t } = useTranslation();
  const updatePageMutation = useUpdatePageMutation();
  const [treeData, setTreeData] = useAtom(treeDataAtom);
  const emit = useQueryEmit();
  const { spaceSlug } = useParams();
  const timerRef = useRef(null);
-  const { t } = useTranslation();
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
  const prefetchPage = () => {
    timerRef.current = setTimeout(() => {
@ -287,11 +292,6 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
    }
  }
  const handleClick = () => {
    const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
    navigate(pageUrl);
  };
  const handleUpdateNodeIcon = (nodeId: string, newIcon: string) => {
    const updatedTree = updateTreeNodeIcon(treeData, nodeId, newIcon);
    setTreeData(updatedTree);
@ -345,13 +345,22 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
    }, 650);
  }
  const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
  return (
    <>
-      <div
+      <Box
        style={style}
        className={clsx(classes.node, node.state)}
        component={Link}
        to={pageUrl}
        // @ts-ignore
        ref={dragHandle}
-        onClick={handleClick}
+        onClick={() => {
          if (mobileSidebarOpened) {
            toggleMobileSidebar();
          }
        }}
        onMouseEnter={prefetchPage}
        onMouseLeave={cancelPagePrefetch}
      >
@ -385,7 +394,7 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
            />
          )}
        </div>
-      </div>
+      </Box>
    </>
  );
 }
@ -441,6 +450,10 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
    movePageModalOpened,
    { open: openMovePageModal, close: closeMoveSpaceModal },
  ] = useDisclosure(false);
  const [
    copyPageModalOpened,
    { open: openCopyPageModal, close: closeCopySpaceModal },
  ] = useDisclosure(false);
  const handleCopyLink = () => {
    const pageUrl =
@ -504,6 +517,17 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
                {t("Move")}
              </Menu.Item>
              <Menu.Item
                leftSection={<IconCopy size={16} />}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  openCopyPageModal();
                }}
              >
                {t("Copy")}
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item
                c="red"
@ -529,6 +553,13 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
        open={movePageModalOpened}
      />
      <CopyPageModal
        pageId={node.id}
        currentSpaceSlug={spaceSlug}
        onClose={closeCopySpaceModal}
        open={copyPageModalOpened}
      />
      <ExportModal
        type="page"
        id={node.id}
--- a/apps/client/src/features/page/tree/styles/tree.module.css
+++ b/apps/client/src/features/page/tree/styles/tree.module.css
@ -18,7 +18,7 @@
    align-items: center;
    height: 100%;
    width: 93%; /* not to overlap with scroll bar */
-
+    text-decoration: none;
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
    &:hover {
@ -70,6 +70,10 @@
    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
 }
 .row:focus .node:global(.isFocused) {
    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
 }
 .row {
    white-space: nowrap;
    cursor: pointer;
--- a/apps/client/src/features/page/tree/utils/utils.ts
+++ b/apps/client/src/features/page/tree/utils/utils.ts
@ -1,7 +1,7 @@
 import { IPage } from "@/features/page/types/page.types.ts";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-function sortPositionKeys(keys: any[]) {
+export function sortPositionKeys(keys: any[]) {
  return keys.sort((a, b) => {
    if (a.position < b.position) return -1;
    if (a.position > b.position) return 1;
--- a/apps/client/src/features/page/types/page.types.ts
+++ b/apps/client/src/features/page/types/page.types.ts
@ -12,7 +12,7 @@ export interface IPage {
  spaceId: string;
  workspaceId: string;
  isLocked: boolean;
-  lastUpdatedById: Date;
+  lastUpdatedById: string;
  createdAt: Date;
  updatedAt: Date;
  deletedAt: Date;
@ -47,6 +47,11 @@ export interface IMovePageToSpace {
  spaceId: string;
 }
 export interface ICopyPageToSpace {
  pageId: string;
  spaceId: string;
 }
 export interface SidebarPagesParams {
  spaceId: string;
  pageId?: string;
--- a/apps/client/src/features/search/components/search-control.module.css
+++ b/apps/client/src/features/search/components/search-control.module.css
@ -0,0 +1,44 @@
 .root {
    height: 34px;
    padding-left: var(--mantine-spacing-sm);
    padding-right: 4px;
    border-radius: var(--mantine-radius-md);
    color: var(--mantine-color-placeholder);
    border: 1px solid;
    @mixin light {
        border-color: var(--mantine-color-gray-3);
        background-color: var(--mantine-color-white);
    }
    @mixin dark {
        border-color: var(--mantine-color-dark-4);
        background-color: var(--mantine-color-dark-6);
    }
    @mixin rtl {
        padding-left: 4px;
        padding-right: var(--mantine-spacing-sm);
    }
 }
 .shortcut {
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: var(--mantine-radius-sm);
    border: 1px solid;
    font-weight: bold;
    @mixin light {
        color: var(--mantine-color-gray-7);
        border-color: var(--mantine-color-gray-2);
        background-color: var(--mantine-color-gray-0);
    }
    @mixin dark {
        color: var(--mantine-color-dark-0);
        border-color: var(--mantine-color-dark-7);
        background-color: var(--mantine-color-dark-7);
    }
 }
--- a/apps/client/src/features/search/components/search-control.tsx
+++ b/apps/client/src/features/search/components/search-control.tsx
@ -0,0 +1,56 @@
 import { IconSearch } from "@tabler/icons-react";
 import cx from "clsx";
 import {
  ActionIcon,
  BoxProps,
  ElementProps,
  Group,
  rem,
  Text,
  Tooltip,
  UnstyledButton,
 } from "@mantine/core";
 import classes from "./search-control.module.css";
 import React from "react";
 import { useTranslation } from "react-i18next";
 interface SearchControlProps extends BoxProps, ElementProps<"button"> {}
 export function SearchControl({ className, ...others }: SearchControlProps) {
  const { t } = useTranslation();
  return (
    <UnstyledButton {...others} className={cx(classes.root, className)}>
      <Group gap="xs" wrap="nowrap">
        <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={1.5} />
        <Text fz="sm" c="dimmed" pr={80}>
          {t("Search")}
        </Text>
        <Text fw={700} className={classes.shortcut}>
          Ctrl + K
        </Text>
      </Group>
    </UnstyledButton>
  );
 }
 interface SearchMobileControlProps {
  onSearch: () => void;
 }
 export function SearchMobileControl({ onSearch }: SearchMobileControlProps) {
  const { t } = useTranslation();
  return (
    <Tooltip label={t("Search")} withArrow>
      <ActionIcon
        variant="default"
        style={{ border: "none" }}
        onClick={onSearch}
        size="sm"
      >
        <IconSearch size={20} stroke={2} />
      </ActionIcon>
    </Tooltip>
  );
 }
--- a/apps/client/src/features/search/constants.ts
+++ b/apps/client/src/features/search/constants.ts
@ -0,0 +1,7 @@
 import { createSpotlight } from '@mantine/spotlight';
 export const [searchSpotlightStore, searchSpotlight] = createSpotlight();
 export const [shareSearchSpotlightStore, shareSearchSpotlight] =
  createSpotlight();
--- a/apps/client/src/features/search/queries/search-query.ts
+++ b/apps/client/src/features/search/queries/search-query.ts
@ -1,6 +1,7 @@
 import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import {
  searchPage,
  searchShare,
  searchSuggestions,
 } from "@/features/search/services/search-service";
 import {
@ -30,3 +31,13 @@ export function useSearchSuggestionsQuery(
    enabled: !!params.query,
  });
 }
 export function useShareSearchQuery(
  params: IPageSearchParams,
 ): UseQueryResult<IPageSearch[], Error> {
  return useQuery({
    queryKey: ["share-search", params],
    queryFn: () => searchShare(params),
    enabled: !!params.query,
  });
 }
--- a/apps/client/src/features/search/search-spotlight.tsx
+++ b/apps/client/src/features/search/search-spotlight.tsx
@ -2,36 +2,36 @@ import { Group, Center, Text } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useDebouncedValue } from "@mantine/hooks";
 import { usePageSearchQuery } from "@/features/search/queries/search-query";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 import { useTranslation } from "react-i18next";
 import { searchSpotlightStore } from "./constants";
 interface SearchSpotlightProps {
  spaceId?: string;
 }
 export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [query, setQuery] = useState("");
  const [debouncedSearchQuery] = useDebouncedValue(query, 300);
-  const {
+  const { data: searchResults } = usePageSearchQuery({
-    data: searchResults,
+    query: debouncedSearchQuery,
-    isLoading,
+    spaceId,
-    error,
+  });
  } = usePageSearchQuery({ query: debouncedSearchQuery, spaceId });
  const pages = (
    searchResults && searchResults.length > 0 ? searchResults : []
  ).map((page) => (
    <Spotlight.Action
      key={page.id}
-      onClick={() =>
+      component={Link}
-        navigate(buildPageUrl(page.space.slug, page.slugId, page.title))
+      //@ts-ignore
-      }
+      to={buildPageUrl(page.space.slug, page.slugId, page.title)}
      style={{ userSelect: "none" }}
    >
      <Group wrap="nowrap" w="100%">
        <Center>{getPageIcon(page?.icon)}</Center>
@ -54,6 +54,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
  return (
    <>
      <Spotlight.Root
        store={searchSpotlightStore}
        query={query}
        onQueryChange={setQuery}
        scrollable
--- a/apps/client/src/features/search/services/search-service.ts
+++ b/apps/client/src/features/search/services/search-service.ts
@ -19,3 +19,10 @@ export async function searchSuggestions(
  const req = await api.post<ISuggestionResult>("/search/suggest", params);
  return req.data;
 }
 export async function searchShare(
  params: IPageSearchParams,
 ): Promise<IPageSearch[]> {
  const req = await api.post<IPageSearch[]>("/search/share-search", params);
  return req.data;
 }
--- a/apps/client/src/features/search/share-search-spotlight.tsx
+++ b/apps/client/src/features/search/share-search-spotlight.tsx
@ -0,0 +1,87 @@
 import { Group, Center, Text } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useShareSearchQuery } from "@/features/search/queries/search-query";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 import { useTranslation } from "react-i18next";
 import { shareSearchSpotlightStore } from "@/features/search/constants.ts";
 interface ShareSearchSpotlightProps {
  shareId?: string;
 }
 export function ShareSearchSpotlight({ shareId }: ShareSearchSpotlightProps) {
  const { t } = useTranslation();
  const [query, setQuery] = useState("");
  const [debouncedSearchQuery] = useDebouncedValue(query, 300);
  const { data: searchResults } = useShareSearchQuery({
    query: debouncedSearchQuery,
    shareId,
  });
  const pages = (
    searchResults && searchResults.length > 0 ? searchResults : []
  ).map((page) => (
    <Spotlight.Action
      key={page.id}
      component={Link}
      //@ts-ignore
      to={buildSharedPageUrl({
        shareId: shareId,
        pageTitle: page.title,
        pageSlugId: page.slugId,
      })}
      style={{ userSelect: "none" }}
    >
      <Group wrap="nowrap" w="100%">
        <Center>{getPageIcon(page?.icon)}</Center>
        <div style={{ flex: 1 }}>
          <Text>{page.title}</Text>
          {page?.highlight && (
            <Text
              opacity={0.6}
              size="xs"
              dangerouslySetInnerHTML={{ __html: page.highlight }}
            />
          )}
        </div>
      </Group>
    </Spotlight.Action>
  ));
  return (
    <>
      <Spotlight.Root
        store={shareSearchSpotlightStore}
        query={query}
        onQueryChange={setQuery}
        scrollable
        overlayProps={{
          backgroundOpacity: 0.55,
        }}
      >
        <Spotlight.Search
          placeholder={t("Search...")}
          leftSection={<IconSearch size={20} stroke={1.5} />}
        />
        <Spotlight.ActionsList>
          {query.length === 0 && pages.length === 0 && (
            <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
          )}
          {query.length > 0 && pages.length === 0 && (
            <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
          )}
          {pages.length > 0 && pages}
        </Spotlight.ActionsList>
      </Spotlight.Root>
    </>
  );
 }
--- a/apps/client/src/features/search/types/search.types.ts
+++ b/apps/client/src/features/search/types/search.types.ts
@ -35,4 +35,5 @@ export interface ISuggestionResult {
 export interface IPageSearchParams {
  query: string;
  spaceId?: string;
  shareId?: string;
 }
--- a/apps/client/src/features/share/atoms/sidebar-atom.ts
+++ b/apps/client/src/features/share/atoms/sidebar-atom.ts
@ -0,0 +1,9 @@
 import { atomWithWebStorage } from "@/lib/jotai-helper.ts";
 import { atom } from 'jotai';
 export const tableOfContentAsideAtom = atomWithWebStorage<boolean>(
  "showTOC",
  true,
 );
 export const mobileTableOfContentAsideAtom = atom<boolean>(false);
--- a/apps/client/src/features/share/components/share-action-menu.tsx
+++ b/apps/client/src/features/share/components/share-action-menu.tsx
@ -0,0 +1,106 @@
 import { Menu, ActionIcon, Text } from "@mantine/core";
 import React from "react";
 import {
  IconCopy,
  IconDots,
  IconFileDescription,
  IconTrash,
 } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
 import { ISharedItem } from "@/features/share/types/share.types.ts";
 import {
  buildPageUrl,
  buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
 import { useClipboard } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { useNavigate } from "react-router-dom";
 import { useDeleteShareMutation } from "@/features/share/queries/share-query.ts";
 interface Props {
  share: ISharedItem;
 }
 export default function ShareActionMenu({ share }: Props) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const clipboard = useClipboard();
  const deleteShareMutation = useDeleteShareMutation();
  const openPage = () => {
    const pageLink = buildPageUrl(
      share.space.slug,
      share.page.slugId,
      share.page.title,
    );
    navigate(pageLink);
  };
  const copyLink = () => {
    const shareLink = buildSharedPageUrl({
      shareId: share.key,
      pageTitle: share.page.title,
      pageSlugId: share.page.slugId,
    });
    clipboard.copy(shareLink);
    notifications.show({ message: t("Link copied") });
  };
  const onDelete = async () => {
    deleteShareMutation.mutateAsync(share.key);
  };
  const openDeleteModal = () =>
    modals.openConfirmModal({
      title: t("Delete public share link"),
      children: (
        <Text size="sm">
          {t("Are you sure you want to delete this shared link?")}
        </Text>
      ),
      centered: true,
      labels: { confirm: t("Delete"), cancel: t("Don't") },
      confirmProps: { color: "red" },
      onConfirm: onDelete,
    });
  return (
    <>
      <Menu
        shadow="xl"
        position="bottom-end"
        offset={20}
        width={200}
        withArrow
        arrowPosition="center"
      >
        <Menu.Target>
          <ActionIcon variant="subtle" c="gray">
            <IconDots size={20} stroke={2} />
          </ActionIcon>
        </Menu.Target>
        <Menu.Dropdown>
          <Menu.Item onClick={copyLink} leftSection={<IconCopy size={16} />}>
            {t("Copy link")}
          </Menu.Item>
          <Menu.Item
            onClick={openPage}
            leftSection={<IconFileDescription size={16} />}
          >
            {t("Open page")}
          </Menu.Item>
          <Menu.Item
            c="red"
            onClick={openDeleteModal}
            leftSection={<IconTrash size={16} />}
            disabled={share.space?.userRole === "reader"}
          >
            {t("Delete share")}
          </Menu.Item>
        </Menu.Dropdown>
      </Menu>
    </>
  );
 }
--- a/apps/client/src/features/share/components/share-branding.tsx
+++ b/apps/client/src/features/share/components/share-branding.tsx
@ -0,0 +1,16 @@
 import { Affix, Button } from "@mantine/core";
 export default function ShareBranding() {
  return (
    <Affix position={{ bottom: 20, right: 20 }}>
      <Button
        variant="default"
        component="a"
        target="_blank"
        href="https://docmost.com?ref=public-share"
      >
        Powered by Docmost
      </Button>
    </Affix>
  );
 }
--- a/apps/client/src/features/share/components/share-layout.tsx
+++ b/apps/client/src/features/share/components/share-layout.tsx
@ -0,0 +1,10 @@
 import { Outlet } from "react-router-dom";
 import ShareShell from "@/features/share/components/share-shell.tsx";
 export default function ShareLayout() {
  return (
    <ShareShell>
      <Outlet />
    </ShareShell>
  );
 }
--- a/apps/client/src/features/share/components/share-list.tsx
+++ b/apps/client/src/features/share/components/share-list.tsx
@ -0,0 +1,97 @@
 import { Table, Group, Text, Anchor } from "@mantine/core";
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
 import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
 import { ISharedItem } from "@/features/share/types/share.types.ts";
 import { format } from "date-fns";
 import ShareActionMenu from "@/features/share/components/share-action-menu.tsx";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import classes from "./share.module.css";
 export default function ShareList() {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);
  const { data, isLoading } = useGetSharesQuery({ page });
  return (
    <>
      <Table.ScrollContainer minWidth={500}>
        <Table verticalSpacing="xs">
          <Table.Thead>
            <Table.Tr>
              <Table.Th>{t("Page")}</Table.Th>
              <Table.Th>{t("Shared by")}</Table.Th>
              <Table.Th>{t("Shared at")}</Table.Th>
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {data?.items.map((share: ISharedItem, index: number) => (
              <Table.Tr key={index}>
                <Table.Td>
                  <Anchor
                    size="sm"
                    underline="never"
                    style={{
                      cursor: "pointer",
                      color: "var(--mantine-color-text)",
                    }}
                    component={Link}
                    target="_blank"
                    to={buildSharedPageUrl({
                      shareId: share.key,
                      pageTitle: share.page.title,
                      pageSlugId: share.page.slugId,
                    })}
                  >
                    <Group gap="4" wrap="nowrap">
                      {getPageIcon(share.page.icon)}
                      <div className={classes.shareLinkText}>
                        <Text fz="sm" fw={500} lineClamp={1}>
                          {share.page.title || t("untitled")}
                        </Text>
                      </div>
                    </Group>
                  </Anchor>
                </Table.Td>
                <Table.Td>
                  <Group gap="4" wrap="nowrap">
                    <CustomAvatar
                      avatarUrl={share.creator?.avatarUrl}
                      name={share.creator.name}
                      size="sm"
                    />
                    <Text fz="sm" lineClamp={1}>
                      {share.creator.name}
                    </Text>
                  </Group>
                </Table.Td>
                <Table.Td>
                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
                    {format(new Date(share.createdAt), "MMM dd, yyyy")}
                  </Text>
                </Table.Td>
                <Table.Td>
                  <ShareActionMenu share={share} />
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      </Table.ScrollContainer>
      {data?.items.length > 0 && (
        <Paginate
          currentPage={page}
          hasPrevPage={data?.meta.hasPrevPage}
          hasNextPage={data?.meta.hasNextPage}
          onPageChange={setPage}
        />
      )}
    </>
  );
 }
--- a/apps/client/src/features/share/components/share-modal.tsx
+++ b/apps/client/src/features/share/components/share-modal.tsx
@ -0,0 +1,227 @@
 import {
  ActionIcon,
  Anchor,
  Button,
  Group,
  Indicator,
  Popover,
  Switch,
  Text,
  TextInput,
  Tooltip,
 } from "@mantine/core";
 import { IconExternalLink, IconWorld } from "@tabler/icons-react";
 import React, { useEffect, useMemo, useState } from "react";
 import {
  useCreateShareMutation,
  useDeleteShareMutation,
  useShareForPageQuery,
  useUpdateShareMutation,
 } from "@/features/share/queries/share-query.ts";
 import { Link, useParams } from "react-router-dom";
 import { extractPageSlugId, getPageIcon } from "@/lib";
 import { useTranslation } from "react-i18next";
 import CopyTextButton from "@/components/common/copy.tsx";
 import { getAppUrl } from "@/lib/config.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import classes from "@/features/share/components/share.module.css";
 interface ShareModalProps {
  readOnly: boolean;
 }
 export default function ShareModal({ readOnly }: ShareModalProps) {
  const { t } = useTranslation();
  const { pageSlug } = useParams();
  const pageId = extractPageSlugId(pageSlug);
  const { data: share } = useShareForPageQuery(pageId);
  const { spaceSlug } = useParams();
  const createShareMutation = useCreateShareMutation();
  const updateShareMutation = useUpdateShareMutation();
  const deleteShareMutation = useDeleteShareMutation();
  // pageIsShared means that the share exists and its level equals zero.
  const pageIsShared = share && share.level === 0;
  // if level is greater than zero, then it is a descendant page from a shared page
  const isDescendantShared = share && share.level > 0;
  const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
  const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
  useEffect(() => {
    if (share) {
      setIsPagePublic(true);
    } else {
      setIsPagePublic(false);
    }
  }, [share, pageId]);
  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.currentTarget.checked;
    if (value) {
      createShareMutation.mutateAsync({
        pageId: pageId,
        includeSubPages: true,
        searchIndexing: true,
      });
      setIsPagePublic(value);
    } else {
      if (share && share.id) {
        deleteShareMutation.mutateAsync(share.id);
        setIsPagePublic(value);
      }
    }
  };
  const handleSubPagesChange = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const value = event.currentTarget.checked;
    updateShareMutation.mutateAsync({
      shareId: share.id,
      includeSubPages: value,
    });
  };
  const handleIndexSearchChange = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const value = event.currentTarget.checked;
    updateShareMutation.mutateAsync({
      shareId: share.id,
      searchIndexing: value,
    });
  };
  const shareLink = useMemo(() => (
    <Group my="sm" gap={4} wrap="nowrap">
      <TextInput
        variant="filled"
        value={publicLink}
        readOnly
        rightSection={<CopyTextButton text={publicLink} />}
        style={{ width: "100%" }}
      />
      <ActionIcon
        component="a"
        variant="default"
        target="_blank"
        href={publicLink}
        size="sm"
      >
        <IconExternalLink size={16} />
      </ActionIcon>
    </Group>
  ), [publicLink]);
  return (
    <Popover width={350} position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button
          style={{ border: "none" }}
          size="compact-sm"
          leftSection={
            <Indicator
              color="green"
              offset={5}
              disabled={!isPagePublic}
              withBorder
            >
              <IconWorld size={20} stroke={1.5} />
            </Indicator>
          }
          variant="default"
        >
          {t("Share")}
        </Button>
      </Popover.Target>
      <Popover.Dropdown style={{ userSelect: "none" }}>
        {isDescendantShared ? (
          <>
            <Text size="sm">{t("Inherits public sharing from")}</Text>
            <Anchor
              size="sm"
              underline="never"
              style={{
                cursor: "pointer",
                color: "var(--mantine-color-text)",
              }}
              component={Link}
              to={buildPageUrl(
                spaceSlug,
                share.sharedPage.slugId,
                share.sharedPage.title,
              )}
            >
              <Group gap="4" wrap="nowrap" my="sm">
                {getPageIcon(share.sharedPage.icon)}
                <div className={classes.shareLinkText}>
                  <Text fz="sm" fw={500} lineClamp={1}>
                    {share.sharedPage.title || t("untitled")}
                  </Text>
                </div>
              </Group>
            </Anchor>
            {shareLink}
          </>
        ) : (
          <>
            <Group justify="space-between" wrap="nowrap" gap="xl">
              <div>
                <Text size="sm">
                  {isPagePublic ? t("Shared to web") : t("Share to web")}
                </Text>
                <Text size="xs" c="dimmed">
                  {isPagePublic
                    ? t("Anyone with the link can view this page")
                    : t("Make this page publicly accessible")}
                </Text>
              </div>
              <Switch
                onChange={handleChange}
                defaultChecked={isPagePublic}
                disabled={readOnly}
                size="xs"
              />
            </Group>
            {pageIsShared && (
              <>
                {shareLink}
                <Group justify="space-between" wrap="nowrap" gap="xl">
                  <div>
                    <Text size="sm">{t("Include sub-pages")}</Text>
                    <Text size="xs" c="dimmed">
                      {t("Make sub-pages public too")}
                    </Text>
                  </div>
                  <Switch
                    onChange={handleSubPagesChange}
                    checked={share.includeSubPages}
                    size="xs"
                    disabled={readOnly}
                  />
                </Group>
                <Group justify="space-between" wrap="nowrap" gap="xl" mt="sm">
                  <div>
                    <Text size="sm">{t("Search engine indexing")}</Text>
                    <Text size="xs" c="dimmed">
                      {t("Allow search engines to index page")}
                    </Text>
                  </div>
                  <Switch
                    onChange={handleIndexSearchChange}
                    checked={share.searchIndexing}
                    size="xs"
                    disabled={readOnly}
                  />
                </Group>
              </>
            )}
          </>
        )}
      </Popover.Dropdown>
    </Popover>
  );
 }
--- a/apps/client/src/features/share/components/share-shell.tsx
+++ b/apps/client/src/features/share/components/share-shell.tsx
@ -0,0 +1,187 @@
 import React from "react";
 import {
  ActionIcon,
  Affix,
  AppShell,
  Button,
  Group,
  ScrollArea,
  Tooltip,
 } from "@mantine/core";
 import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
 import { useParams } from "react-router-dom";
 import SharedTree from "@/features/share/components/shared-tree.tsx";
 import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import { ThemeToggle } from "@/components/theme-toggle.tsx";
 import { useAtomValue } from "jotai";
 import { useAtom } from "jotai";
 import {
  desktopSidebarAtom,
  mobileSidebarAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
 import { useTranslation } from "react-i18next";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import {
  mobileTableOfContentAsideAtom,
  tableOfContentAsideAtom,
 } from "@/features/share/atoms/sidebar-atom.ts";
 import { IconList } from "@tabler/icons-react";
 import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
 import classes from "./share.module.css";
 import {
  SearchControl,
  SearchMobileControl,
 } from "@/features/search/components/search-control.tsx";
 import { ShareSearchSpotlight } from "@/features/search/share-search-spotlight";
 import { shareSearchSpotlight } from "@/features/search/constants";
 import ShareBranding from '@/features/share/components/share-branding.tsx';
 const MemoizedSharedTree = React.memo(SharedTree);
 export default function ShareShell({
  children,
 }: {
  children: React.ReactNode;
 }) {
  const { t } = useTranslation();
  const [mobileOpened] = useAtom(mobileSidebarAtom);
  const [desktopOpened] = useAtom(desktopSidebarAtom);
  const toggleMobile = useToggleSidebar(mobileSidebarAtom);
  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
  const [tocOpened] = useAtom(tableOfContentAsideAtom);
  const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
  const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
  const toggleToc = useToggleToc(tableOfContentAsideAtom);
  const { shareId } = useParams();
  const { data } = useGetSharedPageTreeQuery(shareId);
  const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
  return (
    <AppShell
      header={{ height: 50 }}
      {...(data?.pageTree?.length > 1 && {
        navbar: {
          width: 300,
          breakpoint: "sm",
          collapsed: {
            mobile: !mobileOpened,
            desktop: !desktopOpened,
          },
        },
      })}
      aside={{
        width: 300,
        breakpoint: "sm",
        collapsed: {
          mobile: !mobileTocOpened,
          desktop: !tocOpened,
        },
      }}
      padding="md"
    >
      <AppShell.Header>
        <Group wrap="nowrap" justify="space-between" py="sm" px="xl">
          <Group wrap="nowrap">
            {data?.pageTree?.length > 1 && (
              <>
                <Tooltip label={t("Sidebar toggle")}>
                  <SidebarToggle
                    aria-label={t("Sidebar toggle")}
                    opened={mobileOpened}
                    onClick={toggleMobile}
                    hiddenFrom="sm"
                    size="sm"
                  />
                </Tooltip>
                <Tooltip label={t("Sidebar toggle")}>
                  <SidebarToggle
                    aria-label={t("Sidebar toggle")}
                    opened={desktopOpened}
                    onClick={toggleDesktop}
                    visibleFrom="sm"
                    size="sm"
                  />
                </Tooltip>
              </>
            )}
          </Group>
          {shareId && (
            <Group visibleFrom="sm">
              <SearchControl onClick={shareSearchSpotlight.open} />
            </Group>
          )}
          <Group>
            <>
              {shareId && (
                <Group hiddenFrom="sm">
                  <SearchMobileControl onSearch={shareSearchSpotlight.open} />
                </Group>
              )}
              <Tooltip label={t("Table of contents")} withArrow>
                <ActionIcon
                  variant="default"
                  style={{ border: "none" }}
                  onClick={toggleTocMobile}
                  hiddenFrom="sm"
                  size="sm"
                >
                  <IconList size={20} stroke={2} />
                </ActionIcon>
              </Tooltip>
              <Tooltip label={t("Table of contents")} withArrow>
                <ActionIcon
                  variant="default"
                  style={{ border: "none" }}
                  onClick={toggleToc}
                  visibleFrom="sm"
                  size="sm"
                >
                  <IconList size={20} stroke={2} />
                </ActionIcon>
              </Tooltip>
            </>
            <ThemeToggle />
          </Group>
        </Group>
      </AppShell.Header>
      {data?.pageTree?.length > 1 && (
        <AppShell.Navbar p="md" className={classes.navbar}>
          <MemoizedSharedTree sharedPageTree={data} />
        </AppShell.Navbar>
      )}
      <AppShell.Main>
        {children}
        {data && shareId && !data.hasLicenseKey && <ShareBranding />}
      </AppShell.Main>
      <AppShell.Aside
        p="md"
        withBorder={mobileTocOpened}
        className={classes.aside}
      >
        <ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
          <div style={{ paddingBottom: "50px" }}>
            {readOnlyEditor && (
              <TableOfContents isShare={true} editor={readOnlyEditor} />
            )}
          </div>
        </ScrollArea>
      </AppShell.Aside>
      <ShareSearchSpotlight shareId={shareId} />
    </AppShell>
  );
 }
--- a/apps/client/src/features/share/components/share.module.css
+++ b/apps/client/src/features/share/components/share.module.css
@ -0,0 +1,20 @@
 .shareLinkText {
  @mixin light {
    border-bottom: 0.05em solid var(--mantine-color-dark-0);
  }
  @mixin dark {
    border-bottom: 0.05em solid var(--mantine-color-dark-2);
  }
 }
 .treeNode {
  text-decoration: none;
  user-select: none;
 }
 .navbar,
 .aside {
  @media (max-width: $mantine-breakpoint-sm) {
    width: 350px;
  }
 }
--- a/apps/client/src/features/share/components/shared-tree.tsx
+++ b/apps/client/src/features/share/components/shared-tree.tsx
@ -0,0 +1,195 @@
 import { ISharedPageTree } from "@/features/share/types/share.types.ts";
 import { NodeApi, NodeRendererProps, Tree, TreeApi } from "react-arborist";
 import {
  buildSharedPageTree,
  SharedPageTreeNode,
 } from "@/features/share/utils.ts";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useElementSize, useMergedRef } from "@mantine/hooks";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { Link, useParams } from "react-router-dom";
 import { atom, useAtom } from "jotai/index";
 import { useTranslation } from "react-i18next";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import clsx from "clsx";
 import {
  IconChevronDown,
  IconChevronRight,
  IconFileDescription,
  IconPointFilled,
 } from "@tabler/icons-react";
 import { ActionIcon, Box } from "@mantine/core";
 import { extractPageSlugId } from "@/lib";
 import { OpenMap } from "react-arborist/dist/main/state/open-slice";
 import classes from "@/features/page/tree/styles/tree.module.css";
 import styles from "./share.module.css";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 interface SharedTree {
  sharedPageTree: ISharedPageTree;
 }
 const openSharedTreeNodesAtom = atom<OpenMap>({});
 export default function SharedTree({ sharedPageTree }: SharedTree) {
  const [tree, setTree] = useState<
    TreeApi<SharedPageTreeNode> | null | undefined
  >(null);
  const rootElement = useRef<HTMLDivElement>();
  const { ref: sizeRef, width, height } = useElementSize();
  const mergedRef = useMergedRef(rootElement, sizeRef);
  const { pageSlug } = useParams();
  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(
    openSharedTreeNodesAtom,
  );
  const currentNodeId = extractPageSlugId(pageSlug);
  const treeData: SharedPageTreeNode[] = useMemo(() => {
    if (!sharedPageTree?.pageTree) return;
    return buildSharedPageTree(sharedPageTree.pageTree);
  }, [sharedPageTree?.pageTree]);
  useEffect(() => {
    const parentNodeId = treeData?.[0]?.slugId;
    if (parentNodeId && tree) {
      const parentNode = tree.get(parentNodeId);
      setTimeout(() => {
        if (parentNode) {
          tree.openSiblings(parentNode);
        }
      });
      // open direct children of parent node
      parentNode?.children.forEach((node) => {
        tree.openSiblings(node);
      });
    }
  }, [treeData, tree]);
  useEffect(() => {
    if (currentNodeId && tree) {
      setTimeout(() => {
        // focus on node and open all parents
        tree?.select(currentNodeId, { align: "auto" });
      }, 200);
    } else {
      tree?.deselectAll();
    }
  }, [currentNodeId, tree]);
  if (!sharedPageTree || !sharedPageTree?.pageTree) {
    return null;
  }
  return (
    <div ref={mergedRef} className={classes.treeContainer}>
      {rootElement.current && (
        <Tree
          data={treeData}
          disableDrag={true}
          disableDrop={true}
          disableEdit={true}
          width={width}
          height={rootElement.current.clientHeight}
          ref={(t) => setTree(t)}
          openByDefault={false}
          disableMultiSelection={true}
          className={classes.tree}
          rowClassName={classes.row}
          rowHeight={30}
          overscanCount={10}
          dndRootElement={rootElement.current}
          onToggle={() => {
            setOpenTreeNodes(tree?.openState);
          }}
          initialOpenState={openTreeNodes}
          onClick={(e) => {
            if (tree && tree.focusedNode) {
              tree.select(tree.focusedNode);
            }
          }}
        >
          {Node}
        </Tree>
      )}
    </div>
  );
 }
 function Node({ node, style, tree }: NodeRendererProps<any>) {
  const { shareId } = useParams();
  const { t } = useTranslation();
  const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
  const pageUrl = buildSharedPageUrl({
    shareId: shareId,
    pageSlugId: node.data.slugId,
    pageTitle: node.data.name,
  });
  return (
    <>
      <Box
        style={style}
        className={clsx(classes.node, node.state, styles.treeNode)}
        component={Link}
        to={pageUrl}
        onClick={() => {
          setMobileSidebarState(false);
        }}
      >
        <PageArrow node={node} />
        <div style={{ marginRight: "4px" }}>
          <EmojiPicker
            onEmojiSelect={() => {}}
            icon={
              node.data.icon ? (
                node.data.icon
              ) : (
                <IconFileDescription size="18" />
              )
            }
            readOnly={true}
            removeEmojiAction={() => {}}
          />
        </div>
        <span className={classes.text}>{node.data.name || t("untitled")}</span>
      </Box>
    </>
  );
 }
 interface PageArrowProps {
  node: NodeApi<SpaceTreeNode>;
 }
 function PageArrow({ node }: PageArrowProps) {
  return (
    <ActionIcon
      size={20}
      variant="subtle"
      c="gray"
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        node.toggle();
      }}
    >
      {node.isInternal ? (
        node.children && (node.children.length > 0 || node.data.hasChildren) ? (
          node.isOpen ? (
            <IconChevronDown stroke={2} size={16} />
          ) : (
            <IconChevronRight stroke={2} size={16} />
          )
        ) : (
          <IconPointFilled size={4} />
        )
      ) : null}
    </ActionIcon>
  );
 }
--- a/apps/client/src/features/share/hooks/use-toggle-toc.ts
+++ b/apps/client/src/features/share/hooks/use-toggle-toc.ts
@ -0,0 +1,8 @@
 import { useAtom } from "jotai";
 export function useToggleToc(tocAtom: any) {
  const [tocState, setTocState] = useAtom(tocAtom);
  return () => {
    setTocState(!tocState);
  }
 }
--- a/apps/client/src/features/share/queries/share-query.ts
+++ b/apps/client/src/features/share/queries/share-query.ts
@ -0,0 +1,179 @@
 import {
  keepPreviousData,
  useMutation,
  useQuery,
  useQueryClient,
  UseQueryResult,
 } from "@tanstack/react-query";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 import {
  ICreateShare,
  IShare,
  ISharedItem,
  ISharedPage,
  ISharedPageTree,
  IShareForPage,
  IShareInfoInput,
  IUpdateShare,
 } from "@/features/share/types/share.types.ts";
 import {
  createShare,
  deleteShare,
  getSharedPageTree,
  getShareForPage,
  getShareInfo,
  getSharePageInfo,
  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,
 ): UseQueryResult<IPagination<ISharedItem>, Error> {
  return useQuery({
    queryKey: ["share-list"],
    queryFn: () => getShares(params),
    placeholderData: keepPreviousData,
  });
 }
 export function useGetShareByIdQuery(
  shareId: string,
 ): UseQueryResult<IShare, Error> {
  const query = useQuery({
    queryKey: ["share-by-id", shareId],
    queryFn: () => getShareInfo(shareId),
    enabled: !!shareId,
  });
  return query;
 }
 export function useSharePageQuery(
  shareInput: Partial<IShareInfoInput>,
 ): UseQueryResult<ISharedPage, Error> {
  const query = useQuery({
    queryKey: ["shares", shareInput],
    queryFn: () => getSharePageInfo(shareInput),
    enabled: !!shareInput.pageId,
  });
  return query;
 }
 export function useShareForPageQuery(
  pageId: string,
 ): UseQueryResult<IShareForPage, Error> {
  const query = useQuery({
    queryKey: ["share-for-page", pageId],
    queryFn: () => getShareForPage(pageId),
    enabled: !!pageId,
    staleTime: 0,
    retry: false,
  });
  return query;
 }
 export function useCreateShareMutation() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  return useMutation<any, Error, ICreateShare>({
    mutationFn: (data) => createShare(data),
    onSuccess: (data) => {
      queryClient.invalidateQueries({
        predicate: (item) =>
          ["share-for-page", "share-list"].includes(item.queryKey[0] as string),
      });
    },
    onError: (error) => {
      notifications.show({ message: t("Failed to share page"), color: "red" });
    },
  });
 }
 export function useUpdateShareMutation() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  return useMutation<any, Error, IUpdateShare>({
    mutationFn: (data) => updateShare(data),
    onSuccess: (data) => {
      queryClient.invalidateQueries({
        predicate: (item) =>
          ["share-for-page", "share-list"].includes(item.queryKey[0] as string),
      });
    },
    onError: (error, params) => {
      if (error?.["status"] === 404) {
        queryClient.removeQueries({
          predicate: (item) =>
            ["share-for-page"].includes(item.queryKey[0] as string),
        });
        notifications.show({
          message: t("Share not found"),
          color: "red",
        });
        return;
      }
      notifications.show({
        message: error?.["response"]?.data?.message || "Share not found",
        color: "red",
      });
    },
  });
 }
 export function useDeleteShareMutation() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (shareId: string) => deleteShare(shareId),
    onSuccess: (data) => {
      queryClient.removeQueries({
        predicate: (item) =>
          ["share-for-page"].includes(item.queryKey[0] as string),
      });
      queryClient.invalidateQueries({
        predicate: (item) =>
          ["share-list"].includes(item.queryKey[0] as string),
      });
      notifications.show({ message: t("Share deleted successfully") });
    },
    onError: (error) => {
      if (error?.["status"] === 404) {
        queryClient.removeQueries({
          predicate: (item) =>
            ["share-for-page"].includes(item.queryKey[0] as string),
        });
      }
      notifications.show({
        message: error?.["response"]?.data?.message || "Failed to delete share",
        color: "red",
      });
    },
  });
 }
 export function useGetSharedPageTreeQuery(
  shareId: string,
 ): UseQueryResult<ISharedPageTree, Error> {
  return useQuery({
    queryKey: ["shared-page-tree", shareId],
    queryFn: () => getSharedPageTree(shareId),
    enabled: !!shareId,
    placeholderData: keepPreviousData,
    staleTime: 60 * 60 * 1000,
  });
 }
--- a/apps/client/src/features/share/services/share-service.ts
+++ b/apps/client/src/features/share/services/share-service.ts
@ -0,0 +1,59 @@
 import api from "@/lib/api-client";
 import { IPage } from "@/features/page/types/page.types";
 import {
  ICreateShare,
  IShare,
  ISharedItem,
  ISharedPage,
  ISharedPageTree,
  IShareForPage,
  IShareInfoInput,
  IUpdateShare,
 } from "@/features/share/types/share.types.ts";
 import { IPagination, QueryParams } from "@/lib/types.ts";
 export async function getShares(
  params?: QueryParams,
 ): Promise<IPagination<ISharedItem>> {
  const req = await api.post("/shares", params);
  return req.data;
 }
 export async function createShare(data: ICreateShare): Promise<any> {
  const req = await api.post<any>("/shares/create", data);
  return req.data;
 }
 export async function getShareInfo(shareId: string): Promise<IShare> {
  const req = await api.post<IShare>("/shares/info", { shareId });
  return req.data;
 }
 export async function updateShare(data: IUpdateShare): Promise<any> {
  const req = await api.post<any>("/shares/update", data);
  return req.data;
 }
 export async function getShareForPage(pageId: string): Promise<IShareForPage> {
  const req = await api.post<any>("/shares/for-page", { pageId });
  return req.data;
 }
 export async function getSharePageInfo(
  shareInput: Partial<IShareInfoInput>,
 ): Promise<ISharedPage> {
  const req = await api.post<ISharedPage>("/shares/page-info", shareInput);
  return req.data;
 }
 export async function deleteShare(shareId: string): Promise<void> {
  await api.post("/shares/delete", { shareId });
 }
 export async function getSharedPageTree(
  shareId: string,
 ): Promise<ISharedPageTree> {
  const req = await api.post<ISharedPageTree>("/shares/tree", { shareId });
  return req.data;
 }
--- a/apps/client/src/features/share/types/share.types.ts
+++ b/apps/client/src/features/share/types/share.types.ts
@ -0,0 +1,75 @@
 import { IPage } from "@/features/page/types/page.types.ts";
 export interface IShare {
  id: string;
  key: string;
  pageId: string;
  includeSubPages: boolean;
  searchIndexing: boolean;
  creatorId: string;
  spaceId: string;
  workspaceId: string;
  createdAt: string;
  updatedAt: string;
  deletedAt: string | null;
  sharedPage?: ISharePage;
 }
 export interface ISharedItem extends IShare {
  page: {
    id: string;
    title: string;
    slugId: string;
    icon: string | null;
  };
  space: {
    id: string;
    name: string;
    slug: string;
    userRole: string;
  };
  creator: {
    id: string;
    name: string;
    avatarUrl: string | null;
  };
 }
 export interface ISharedPage extends IShare {
  page: IPage;
  share: IShare & {
    level: number;
    sharedPage: { id: string; slugId: string; title: string; icon: string };
  };
  hasLicenseKey: boolean;
 }
 export interface IShareForPage extends IShare {
  level: number;
  sharedPage: ISharePage;
 }
 interface ISharePage {
  id: string;
  slugId: string;
  title: string;
  icon: string;
 }
 export interface ICreateShare {
  pageId?: string;
  includeSubPages?: boolean;
  searchIndexing?: boolean;
 }
 export type IUpdateShare = ICreateShare & { shareId: string; pageId?: string };
 export interface IShareInfoInput {
  pageId: string;
 }
 export interface ISharedPageTree {
  share: IShare;
  pageTree: Partial<IPage[]>;
  hasLicenseKey: boolean;
 }
--- a/apps/client/src/features/share/utils.ts
+++ b/apps/client/src/features/share/utils.ts
@ -0,0 +1,68 @@
 import { IPage } from "@/features/page/types/page.types.ts";
 import { sortPositionKeys } from "@/features/page/tree/utils";
 export type SharedPageTreeNode = {
  id: string;
  slugId: string;
  name: string;
  icon?: string;
  position: string;
  spaceId: string;
  parentPageId: string;
  hasChildren: boolean;
  children: SharedPageTreeNode[];
  label: string;
  value: string;
 };
 export function buildSharedPageTree(
  pages: Partial<IPage[]>,
 ): SharedPageTreeNode[] {
  const pageMap: Record<string, SharedPageTreeNode> = {};
  // Initialize each page as a tree node and store it in a map.
  pages.forEach((page) => {
    pageMap[page.id] = {
      id: page.slugId,
      slugId: page.slugId,
      name: page.title,
      icon: page.icon,
      position: page.position,
      // Initially assume a page has no children.
      hasChildren: false,
      spaceId: page.spaceId,
      parentPageId: page.parentPageId,
      label: page.title || "untitled",
      value: page.id,
      children: [],
    };
  });
  // Build the tree structure.
  const tree: SharedPageTreeNode[] = [];
  pages.forEach((page) => {
    if (page.parentPageId) {
      // If the page has a parent, add it as a child of the parent node.
      const parentNode = pageMap[page.parentPageId];
      if (parentNode) {
        parentNode.children.push(pageMap[page.id]);
        parentNode.hasChildren = true;
      } else {
        // Parent not found – treat this page as a top-level node.
        tree.push(pageMap[page.id]);
      }
    } else {
      // No parentPageId indicates a top-level page.
      tree.push(pageMap[page.id]);
    }
  });
  function sortTree(nodes: SharedPageTreeNode[]): SharedPageTreeNode[] {
    return sortPositionKeys(nodes).map((node: SharedPageTreeNode) => ({
      ...node,
      children: sortTree(node.children),
    }));
  }
  return sortTree(tree);
 }
--- a/apps/client/src/features/space/components/sidebar/space-select.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-select.tsx
@ -81,7 +81,7 @@ export function SpaceSelect({
      nothingFoundMessage={t("No space found")}
      limit={50}
      checkIconPosition="right"
-      comboboxProps={{ width, withinPortal: false }}
+      comboboxProps={{ width, withinPortal: true, position: "bottom" }}
      dropdownOpened={opened}
    />
  );
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
@ -6,7 +6,6 @@ import {
  Tooltip,
  UnstyledButton,
 } from "@mantine/core";
 import { spotlight } from "@mantine/spotlight";
 import {
  IconArrowDown,
  IconDots,
@ -16,9 +15,8 @@ import {
  IconSearch,
  IconSettings,
 } from "@tabler/icons-react";
 import classes from "./space-sidebar.module.css";
-import React, { useMemo } from "react";
+import React from "react";
 import { useAtom } from "jotai";
 import { SearchSpotlight } from "@/features/search/search-spotlight.tsx";
 import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
@ -38,6 +36,9 @@ import PageImportModal from "@/features/page/components/page-import-modal.tsx";
 import { useTranslation } from "react-i18next";
 import { SwitchSpace } from "./switch-space";
 import ExportModal from "@/components/common/export-modal";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import { searchSpotlight } from "@/features/search/constants";
 export function SpaceSidebar() {
  const { t } = useTranslation();
@ -45,8 +46,11 @@ export function SpaceSidebar() {
  const location = useLocation();
  const [opened, { open: openSettings, close: closeSettings }] =
    useDisclosure(false);
  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
  const { spaceSlug } = useParams();
-  const { data: space, isLoading, isError } = useGetSpaceBySlugQuery(spaceSlug);
+  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
  const spaceRules = space?.membership?.permissions;
  const spaceAbility = useSpaceAbility(spaceRules);
@ -95,7 +99,10 @@ export function SpaceSidebar() {
              </div>
            </UnstyledButton>
-            <UnstyledButton className={classes.menu} onClick={spotlight.open}>
+            <UnstyledButton
              className={classes.menu}
              onClick={searchSpotlight.open}
            >
              <div className={classes.menuItemInner}>
                <IconSearch
                  size={18}
@ -123,7 +130,12 @@ export function SpaceSidebar() {
            ) && (
              <UnstyledButton
                className={classes.menu}
-                onClick={handleCreatePage}
+                onClick={() => {
                  handleCreatePage();
                  if (mobileSidebarOpened) {
                    toggleMobileSidebar();
                  }
                }}
              >
                <div className={classes.menuItemInner}>
                  <IconPlus
--- a/apps/client/src/features/websocket/types/types.ts
+++ b/apps/client/src/features/websocket/types/types.ts
@ -7,6 +7,11 @@ export type InvalidateEvent = {
  id?: string;
 };
 export type InvalidateCommentsEvent = {
  operation: "invalidateComment";
  pageId: string;
 };
 export type UpdateEvent = {
  operation: "updateOne";
  spaceId: string;
@ -52,4 +57,4 @@ export type DeleteTreeNodeEvent = {
  }
 };
-export type WebSocketEvent = InvalidateEvent | UpdateEvent | DeleteEvent | AddTreeNodeEvent | MoveTreeNodeEvent | DeleteTreeNodeEvent;
+export type WebSocketEvent = InvalidateEvent | InvalidateCommentsEvent | UpdateEvent | DeleteEvent | AddTreeNodeEvent | MoveTreeNodeEvent | DeleteTreeNodeEvent;
--- a/apps/client/src/features/websocket/use-query-subscription.ts
+++ b/apps/client/src/features/websocket/use-query-subscription.ts
@ -3,6 +3,7 @@ import { socketAtom } from "@/features/websocket/atoms/socket-atom.ts";
 import { useAtom } from "jotai";
 import { useQueryClient } from "@tanstack/react-query";
 import { WebSocketEvent } from "@/features/websocket/types";
 import { RQ_KEY } from "../comment/queries/comment-query";
 export const useQuerySubscription = () => {
  const queryClient = useQueryClient();
@ -21,6 +22,11 @@ export const useQuerySubscription = () => {
            queryKey: [...data.entity, data.id].filter(Boolean),
          });
          break;
        case "invalidateComment":
          queryClient.invalidateQueries({
            queryKey: RQ_KEY(data.pageId),
          });
          break;
        case "updateOne":
          entity = data.entity[0];
          if (entity === "pages") {
--- a/apps/client/src/hooks/use-settings-navigation.ts
+++ b/apps/client/src/hooks/use-settings-navigation.ts
@ -0,0 +1,14 @@
 import { settingsOriginAtom } from "@/components/settings/atoms/settings-origin-atom";
 import { useAtomValue } from "jotai";
 import { useNavigate } from "react-router-dom";
 export function useSettingsNavigation() {
  const navigate = useNavigate();
  const origin = useAtomValue(settingsOriginAtom);
  const goBack = () => {
    navigate(origin ?? "/home", { replace: true });
  };
  return { goBack };
 }
--- a/apps/client/src/hooks/use-track-origin.ts
+++ b/apps/client/src/hooks/use-track-origin.ts
@ -0,0 +1,16 @@
 import { settingsOriginAtom } from "@/components/settings/atoms/settings-origin-atom";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 export function useTrackOrigin() {
  const location = useLocation();
  const setOrigin = useSetAtom(settingsOriginAtom);
  useEffect(() => {
    const isInSettings = location.pathname.startsWith("/settings");
    if (!isInSettings) {
      setOrigin(location.pathname);
    }
  }, [location.pathname, setOrigin]);
 }
--- a/apps/client/src/lib/api-client.ts
+++ b/apps/client/src/lib/api-client.ts
@ -26,6 +26,7 @@ api.interceptors.response.use(
        case 401: {
          const url = new URL(error.request.responseURL)?.pathname;
          if (url === "/api/auth/collab-token") return;
          if (window.location.pathname.startsWith("/share/")) return;
          // Handle unauthorized error
          redirectToLogin();
--- a/apps/client/src/lib/config.ts
+++ b/apps/client/src/lib/config.ts
@ -74,6 +74,10 @@ export function getDrawioUrl() {
  return getConfigValue("DRAWIO_URL", "https://embed.diagrams.net");
 }
 export function getBillingTrialDays() {
  return getConfigValue("BILLING_TRIAL_DAYS");
 }
 function getConfigValue(key: string, defaultValue: string = undefined): string {
  const rawValue = import.meta.env.DEV
    ? process?.env?.[key]
--- a/apps/client/src/pages/settings/shares/shares.tsx
+++ b/apps/client/src/pages/settings/shares/shares.tsx
@ -0,0 +1,31 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import { Helmet } from "react-helmet-async";
 import { getAppName } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
 import ShareList from "@/features/share/components/share-list.tsx";
 import { Alert, Text } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
 import React from "react";
 export default function Shares() {
  const { t } = useTranslation();
  return (
    <>
      <Helmet>
        <title>
          {t("Public sharing")} - {getAppName()}
        </title>
      </Helmet>
      <SettingsTitle title={t("Public sharing")} />
      <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
        {t(
          "Publicly shared pages from spaces you are a member of will appear here",
        )}
      </Alert>
      <ShareList />
    </>
  );
 }
--- a/apps/client/src/pages/share/share-redirect.tsx
+++ b/apps/client/src/pages/share/share-redirect.tsx
@ -0,0 +1,35 @@
 import { useNavigate, useParams } from "react-router-dom";
 import { useEffect } from "react";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { Error404 } from "@/components/ui/error-404.tsx";
 import { useGetShareByIdQuery } from "@/features/share/queries/share-query.ts";
 export default function ShareRedirect() {
  const { shareId } = useParams();
  const navigate = useNavigate();
  const { data: share, isLoading, isError } = useGetShareByIdQuery(shareId);
  useEffect(() => {
    if (share) {
      navigate(
        buildSharedPageUrl({
          shareId: share.key,
          pageSlugId: share?.sharedPage.slugId,
          pageTitle: share?.sharedPage.title,
        }),
        { replace: true },
      );
    }
  }, [isLoading, share]);
  if (isError) {
    return <Error404 />;
  }
  if (isLoading) {
    return <></>;
  }
  return null;
 }
--- a/apps/client/src/pages/share/shared-page.tsx
+++ b/apps/client/src/pages/share/shared-page.tsx
@ -0,0 +1,61 @@
 import { useNavigate, useParams } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
 import { Container } from "@mantine/core";
 import React, { useEffect } from "react";
 import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
 import { extractPageSlugId } from "@/lib";
 import { Error404 } from "@/components/ui/error-404.tsx";
 import ShareBranding from "@/features/share/components/share-branding.tsx";
 export default function SharedPage() {
  const { t } = useTranslation();
  const { pageSlug } = useParams();
  const { shareId } = useParams();
  const navigate = useNavigate();
  const { data, isLoading, isError, error } = useSharePageQuery({
    pageId: extractPageSlugId(pageSlug),
  });
  useEffect(() => {
    if (shareId && data) {
      if (data.share.key !== shareId) {
        navigate(`/share/${data.share.key}/p/${pageSlug}`, { replace: true });
      }
    }
  }, [shareId, data]);
  if (isLoading) {
    return <></>;
  }
  if (isError || !data) {
    if ([401, 403, 404].includes(error?.["status"])) {
      return <Error404 />;
    }
    return <div>{t("Error fetching page data.")}</div>;
  }
  return (
    <div>
      <Helmet>
        <title>{`${data?.page?.title || t("untitled")}`}</title>
        {!data?.share.searchIndexing && (
          <meta name="robots" content="noindex" />
        )}
      </Helmet>
      <Container size={900} p={0}>
        <ReadonlyPageEditor
          key={data.page.id}
          title={data.page.title}
          content={data.page.content}
        />
      </Container>
      {data && !shareId && !data.hasLicenseKey && <ShareBranding />}
    </div>
  );
 }
--- a/apps/client/vite.config.ts
+++ b/apps/client/vite.config.ts
@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => {
    CLOUD,
    SUBDOMAIN_HOST,
    COLLAB_URL,
    BILLING_TRIAL_DAYS,
  } = loadEnv(mode, envPath, "");
  return {
@ -23,6 +24,7 @@ export default defineConfig(({ mode }) => {
        CLOUD,
        SUBDOMAIN_HOST,
        COLLAB_URL,
        BILLING_TRIAL_DAYS,
      },
      APP_VERSION: JSON.stringify(process.env.npm_package_version),
    },
--- a/apps/server/package.json
+++ b/apps/server/package.json
@ -1,6 +1,6 @@
 {
  "name": "server",
-  "version": "0.10.0",
+  "version": "0.20.4",
  "description": "",
  "author": "",
  "private": true,
@ -31,24 +31,25 @@
  },
  "dependencies": {
    "@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.1.1",
    "@nestjs/bullmq": "^11.0.2",
-    "@nestjs/common": "^11.0.10",
+    "@nestjs/common": "^11.0.20",
-    "@nestjs/config": "^4.0.0",
+    "@nestjs/config": "^4.0.2",
-    "@nestjs/core": "^11.0.10",
+    "@nestjs/core": "^11.0.20",
    "@nestjs/event-emitter": "^3.0.0",
    "@nestjs/jwt": "^11.0.0",
    "@nestjs/mapped-types": "^2.1.0",
    "@nestjs/passport": "^11.0.5",
-    "@nestjs/platform-fastify": "^11.0.10",
+    "@nestjs/platform-fastify": "^11.0.20",
-    "@nestjs/platform-socket.io": "^11.0.10",
+    "@nestjs/platform-socket.io": "^11.0.20",
    "@nestjs/schedule": "^5.0.1",
    "@nestjs/terminus": "^11.0.0",
-    "@nestjs/websockets": "^11.0.10",
+    "@nestjs/websockets": "^11.0.20",
    "@node-saml/passport-saml": "^5.0.1",
    "@react-email/components": "0.0.28",
    "@react-email/render": "1.0.2",
@ -59,14 +60,13 @@
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.1",
    "cookie": "^1.0.2",
    "fix-esm": "^1.0.1",
    "fs-extra": "^11.3.0",
    "happy-dom": "^15.11.6",
    "jsonwebtoken": "^9.0.2",
    "kysely": "^0.27.5",
    "kysely-migration-cli": "^0.4.2",
    "mime-types": "^2.1.35",
-    "nanoid": "^5.1.0",
+    "nanoid": "3.3.11",
    "nestjs-kysely": "^1.1.0",
    "nodemailer": "^6.10.0",
    "openid-client": "^5.7.1",
@ -81,7 +81,9 @@
    "sanitize-filename-ts": "^1.0.2",
    "socket.io": "^4.8.1",
    "stripe": "^17.5.0",
-    "ws": "^8.18.0"
+    "tmp-promise": "^3.0.3",
    "ws": "^8.18.0",
    "yauzl": "^3.2.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.20.0",
@ -100,6 +102,7 @@
    "@types/pg": "^8.11.11",
    "@types/supertest": "^6.0.2",
    "@types/ws": "^8.5.14",
    "@types/yauzl": "^2.10.3",
    "eslint": "^9.20.1",
    "eslint-config-prettier": "^10.0.1",
    "globals": "^15.15.0",
--- a/apps/server/src/collaboration/collaboration.module.ts
+++ b/apps/server/src/collaboration/collaboration.module.ts
@ -1,4 +1,4 @@
-import { Module, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import { Logger, Module, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
 import { AuthenticationExtension } from './extensions/authentication.extension';
 import { PersistenceExtension } from './extensions/persistence.extension';
 import { CollaborationGateway } from './collaboration.gateway';
@ -22,6 +22,7 @@ import { LoggerExtension } from './extensions/logger.extension';
  imports: [TokenModule],
 })
 export class CollaborationModule implements OnModuleInit, OnModuleDestroy {
  private readonly logger = new Logger(CollaborationModule.name);
  private collabWsAdapter: CollabWsAdapter;
  private path = '/collab';
@ -38,7 +39,15 @@ export class CollaborationModule implements OnModuleInit, OnModuleDestroy {
    wss.on('connection', (client: WebSocket, request: IncomingMessage) => {
      this.collaborationGateway.handleConnection(client, request);
      client.on('error', (error) => {
        this.logger.error('WebSocket client error:', error);
      });
    });
    wss.on('error', (error) =>
      this.logger.log('WebSocket server error:', error),
    );
  }
  async onModuleDestroy(): Promise<void> {
--- a/apps/server/src/collaboration/collaboration.util.ts
+++ b/apps/server/src/collaboration/collaboration.util.ts
@ -46,7 +46,7 @@ export const tiptapExtensions = [
    codeBlock: false,
  }),
  Comment,
-  TextAlign,
+  TextAlign.configure({ types: ["heading", "paragraph"] }),
  TaskList,
  TaskItem,
  Underline,
--- a/apps/server/src/collaboration/extensions/persistence.extension.ts
+++ b/apps/server/src/collaboration/extensions/persistence.extension.ts
@ -130,7 +130,7 @@ export class PersistenceExtension implements Extension {
          );
          this.contributors.delete(documentName);
        } catch (err) {
-          this.logger.log('Contributors error:' + err?.['message']);
+          this.logger.debug('Contributors error:' + err?.['message']);
        }
        await this.pageRepo.updatePage(
--- a/apps/server/src/common/helpers/nanoid.utils.ts
+++ b/apps/server/src/common/helpers/nanoid.utils.ts
@ -1,5 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
+import { customAlphabet } from 'nanoid';
 const { customAlphabet } = require('fix-esm').require('nanoid');
 const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
 export const nanoIdGen = customAlphabet(alphabet, 10);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	36a573fce9	import embeds	2025-05-26 15:37:35 -07:00
Philipinho	af54e1827d	move embed parser to editor-ext package	2025-05-26 14:59:17 -07:00
Philipinho	3bbf7c4475	notion formatter	2025-05-25 20:06:21 -07:00
Philipinho	ca23c9a4f2	WIP	2025-05-25 17:59:28 -07:00
Philipinho	065f888c32	feat: add stream upload support and improve file handling - Add stream upload functionality to storage drivers\n- Improve ZIP file extraction with better encoding handling\n- Fix attachment ID rendering issues\n- Add AWS S3 upload stream support\n- Update dependencies for better compatibility	2025-05-23 22:31:37 -07:00
Philipinho	ec533934de	turndown video tag	2025-05-23 12:40:34 -07:00
Philipinho	ef2a6be59b	fix attachmentId render	2025-05-22 12:51:25 -07:00
Philipinho	915b31b8bd	fix attachmentId render	2025-05-22 12:50:30 -07:00
Philipinho	e2b8899569	WIP	2025-05-21 23:40:43 -07:00
Philipinho	f6e3230eec	Add readstream	2025-05-21 10:58:40 -07:00
Philipinho	625bdc7024	refactor imports - WIP	2025-05-21 10:53:03 -07:00
Philipinho	69447fc375	Merge branch 'main' of https://github.com/docmost/docmost	2025-05-21 08:43:56 -07:00
Philipinho	858ff9da06	sync	2025-05-20 09:27:30 -07:00
sanua356	343b2976c2	#1186/chore: add support language abap syntax highlight (#1188 )	2025-05-19 20:05:31 +01:00
Philip Okugbe	7491224d0f	hide shared page branding in EE (#1193 ) * hide shared page branding in EE * Hide branding in business plan	2025-05-17 19:17:34 +01:00
Philip Okugbe	4a0b4040ed	Add second plan (#1187 )	2025-05-17 19:03:01 +01:00
fuscodev	e3ba817723	feat: comment editor emoji picker and ctrl+enter action (#1121 ) * commenteditor-emoji-picker * capture Mac command key * remove tooltip --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>	2025-05-16 20:01:27 +01:00
fuscodev	b0491d5da4	feat: create new page from mention (#1153 ) * init * create page in relative parent root	2025-05-16 19:15:11 +01:00
极地	1c200dbd0f	fix(table-hover): adjust row height to prevent unexpected scrollbar on hover (#1124 ) fix: Hover table style height error causing scrollbar to appear #1108	2025-05-16 16:26:05 +01:00
fuscodev	fb7e4a7956	fix: copy/move select (#1174 )	2025-05-16 16:24:31 +01:00
fuscodev	1413033568	feat: realtime comments (#1144 ) * init * fix: close bubblemenu after comment and wait before scroll * scroll to comment when click * highlight comment animation	2025-05-16 16:18:23 +01:00
fuscodev	00f4588c21	fix title update (#1154 )	2025-05-16 16:11:29 +01:00
fuscodev	3a75251e75	fix alignment in shared page (#1123 )	2025-05-16 16:00:47 +01:00
Philipinho	c6bca6a602	fix deprecated kysely usage	2025-05-09 16:44:33 +01:00
edo0	55d1a2c932	Fix typo in enforce-sso.tsx (#1145 )	2025-05-09 11:11:02 +01:00
Philipinho	bc3cb2d63f	fix: increase random subdomain suffix	2025-05-07 15:10:58 +01:00
Philipinho	7adbf85030	v0.20.4	2025-04-30 14:44:58 +01:00
Philip Okugbe	de7982fe30	feat: copy page to different space (#1118 ) * Add copy page to space endpoint * copy storage function * copy function * feat: copy attachments too * Copy page - WIP * fix type * sync * cleanup	2025-04-30 14:43:16 +01:00
Philipinho	0402f7efb5	sync	2025-04-30 14:33:01 +01:00
Philipinho	8327251ab6	fix typo	2025-04-29 23:30:12 +01:00
Philip Okugbe	e8847bd9cd	fix: handle unhandled exceptions (#1116 ) * Handle unhandled exceptions * cleanup	2025-04-29 23:29:00 +01:00
Philipinho	9bbd62e0f0	v0.20.3	2025-04-24 23:22:53 +01:00
Philipinho	0289c5cb09	Reduce markdown checkbox space	2025-04-24 23:19:39 +01:00
Philip Okugbe	7993532111	fix page export (#1081 )	2025-04-24 23:18:54 +01:00
Philipinho	31e5c0c660	v0.20.2	2025-04-24 17:57:14 +01:00
Philipinho	33c314d4e8	remove clickoutside hook	2025-04-24 17:56:54 +01:00
Philipinho	08f223899a	cloud trial refactor	2025-04-23 16:07:58 +01:00
Philipinho	c528f7e858	v0.20.1	2025-04-23 14:34:28 +01:00
Philip Okugbe	c26a851d52	feat: enhance public sharing (#1057 ) * fix tree nodes sort * remove comment mark in shares * remove clickoutside hook for now * feat: search in shared pages * fix user-select * use Link * render page icons	2025-04-23 14:32:35 +01:00
Philipinho	de5f90309c	v0.20.0	2025-04-22 22:49:45 +01:00
Philipinho	0ec3ff2965	Add empty placeholder text	2025-04-22 22:48:12 +01:00
Philipinho	acffeacdbc	fix TOC	2025-04-22 22:47:34 +01:00
Philip Okugbe	00d92a3690	New Crowdin updates (#1008 ) * New translations translation.json (Russian) * New translations translation.json (Russian) * New translations translation.json (Chinese Simplified) * New translations translation.json (Spanish) * New translations translation.json (French) * New translations translation.json (Spanish) * New translations translation.json (German) * New translations translation.json (Italian) * New translations translation.json (Japanese) * New translations translation.json (Korean) * New translations translation.json (Dutch) * New translations translation.json (Russian) * New translations translation.json (Chinese Simplified) * New translations translation.json (English) * New translations translation.json (Portuguese, Brazilian)	2025-04-22 20:57:07 +01:00
Diego Ochoa	3430f715ec	feat: remember and restore previous route when exiting settings (#1046 ) Improves user experience by allowing users to return to the previous page after visiting the Settings section. Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>	2025-04-22 20:47:57 +01:00
Philip Okugbe	6c422011ac	feat: public page sharing (#1012 ) * Share - WIP * - public attachment links - WIP * WIP * WIP * Share - WIP * WIP * WIP * include userRole in space object * WIP * Server render shared page meta tags * disable user select * Close Navbar on outside click on mobile * update shared page spaceId * WIP * fix * close sidebar on click * close sidebar * defaults * update copy * Store share key in lowercase * refactor page breadcrumbs * Change copy * add link ref * open link button * add meta og:title * add twitter tags * WIP * make shares/info endpoint public * fix * * add /p/ segment to share urls * minore fixes * change mobile breadcrumb icon	2025-04-22 20:37:32 +01:00
Philipinho	3e8824435d	update vite and axios	2025-04-22 20:28:27 +01:00
Philip Okugbe	37a1804db9	Revert "switch to vite rolldown (#1048 )" (#1050 ) This reverts commit `1a1b2c8682`.	2025-04-22 20:00:36 +01:00
Philip Okugbe	882f3093bd	search space members by email (#1049 )	2025-04-22 19:37:06 +01:00
Philip Okugbe	1a1b2c8682	switch to vite rolldown (#1048 ) * switch to vite rolldown * update	2025-04-22 15:52:44 +01:00
Philip Okugbe	10b67929ea	Update README.md	2025-04-21 21:50:21 +01:00
Philip Okugbe	5c957fda8d	fix: nested tree open state	2025-04-21 19:24:25 +01:00
Philip Okugbe	862f6d4820	use non-esm nanoid version (#1040 )	2025-04-19 19:45:09 +01:00
Philipinho	de57d05199	0.10.2	2025-04-15 12:48:40 +01:00
Philipinho	89ec990232	sync ee	2025-04-15 12:46:28 +01:00
Philipinho	49d0f1cc9a	Add click handler	2025-04-11 13:41:43 +01:00
Philipinho	268001ae26	v0.10.1	2025-04-11 13:23:42 +01:00
Philip Okugbe	27fa45a769	fix local attachment paths in exports (#1013 )	2025-04-11 13:18:44 +01:00
Philipinho	f9711918a3	fix comment editor padding	2025-04-11 12:32:54 +01:00