Compare commits
24 Commits
feat/228-i
...
2cf30c7690
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2cf30c7690 | ||
|
|
ca26af9e9d | ||
|
|
3d6f48c3bd | ||
|
|
2f5b520af2 | ||
|
|
655970dd49 | ||
|
|
7ceef2bae6 | ||
|
|
77aa9443e9 | ||
|
|
1ac9a8df98 | ||
|
|
8cfc4c3c40 | ||
|
|
85ad697cd4 | ||
|
|
ccc5e97000 | ||
|
|
df02f2d672 | ||
|
|
7ac7fcba2d | ||
|
|
caeb555039 | ||
|
|
e05495ba4f | ||
|
|
106df7c907 | ||
|
|
89edddc5a1 | ||
| c5109aa2a3 | |||
| c6ffdb6536 | |||
|
|
40d1cdfc77 | ||
|
|
525172104a | ||
|
|
c9d252cf2a | ||
|
|
2d36641f28 | ||
|
|
22852be2e2 |
13
.env.example
13
.env.example
@@ -92,6 +92,19 @@ IFRAME_EMBED_ALLOWED=false
|
||||
# Example: https://intranet.example.com,https://portal.example.com
|
||||
IFRAME_ALLOWED_ORIGINS=
|
||||
|
||||
# Comma-separated list of additional origins allowed to call the API via CORS.
|
||||
# The APP_URL origin and native mobile (Capacitor) origins are always allowed.
|
||||
# Leave empty for a same-origin (web-only) deployment.
|
||||
CORS_ALLOWED_ORIGINS=
|
||||
|
||||
# Expose OpenAPI/Swagger docs at /api/docs (development/debugging aid only).
|
||||
SWAGGER_ENABLED=false
|
||||
|
||||
# Capacitor (mobile shell): hosted client URL loaded by the iOS shell so the
|
||||
# AGPL web client is NOT bundled into the .ipa (see docs/mobile-app-plan.md §9).
|
||||
# Leave empty for Android bundled mode / local development.
|
||||
CAP_SERVER_URL=
|
||||
|
||||
# Enable debug logging in production (default: false)
|
||||
DEBUG_MODE=false
|
||||
|
||||
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -49,3 +49,8 @@ lerna-debug.log*
|
||||
|
||||
# Self-hosted VAD / onnxruntime-web assets (copied from node_modules at dev/build time)
|
||||
apps/client/public/vad/
|
||||
|
||||
# Capacitor native platform projects (generated locally via 'npx cap add ios|android')
|
||||
/ios
|
||||
/android
|
||||
.capacitor
|
||||
|
||||
65
CHANGELOG.md
65
CHANGELOG.md
@@ -59,8 +59,59 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
contain a standalone footnote definition, which canonicalization would drop.
|
||||
(#228)
|
||||
|
||||
### Changed
|
||||
|
||||
- **Enabling a public share no longer auto-shares the whole sub-tree.** Turning
|
||||
a page "Shared to web" now defaults to the page alone; descendant pages become
|
||||
public only when you explicitly turn on the dedicated "Include sub-pages"
|
||||
toggle. Previously the create call defaulted to including sub-pages, silently
|
||||
exposing every child of a freshly shared page. (#216)
|
||||
|
||||
- **Offline reading support**: opened pages, their sidebar tree, breadcrumb
|
||||
children, and comments are cached in IndexedDB (TanStack Query persister plus
|
||||
`y-indexeddb` for the page's Yjs document), and a PWA service worker
|
||||
(vite-plugin-pwa) serves an app shell so previously opened pages stay readable
|
||||
offline. The two offline stores (the persisted query cache and the Yjs page
|
||||
documents) are cleared on logout AND on sign-in so a previous user's private
|
||||
data does not remain in the browser; the same purge also defensively drops any
|
||||
legacy service-worker `api-get-cache` left by older clients (current builds
|
||||
serve `/api` as NetworkOnly, so there is no active service-worker API cache).
|
||||
- **Mobile bootstrap**: a `returnToken` opt-in on login so native/mobile clients
|
||||
can request the access JWT in the response body (`data.authToken`) in addition
|
||||
to the httpOnly cookie (the web client stays cookie-only); an optional
|
||||
OpenAPI/Swagger UI at `/api/docs` gated by `SWAGGER_ENABLED` (off by default);
|
||||
and new env vars `CORS_ALLOWED_ORIGINS`, `SWAGGER_ENABLED`, `CAP_SERVER_URL`.
|
||||
|
||||
### Changed
|
||||
|
||||
- **CORS is now an explicit allowlist** (replaces the previous unconfigured
|
||||
`app.enableCors()`). The same-origin web client is unaffected, but any
|
||||
separately-hosted cross-domain client must now be listed in
|
||||
`CORS_ALLOWED_ORIGINS` (native Capacitor/Ionic/localhost WebView origins are
|
||||
allowed automatically). Requests with no `Origin` header (server-to-server)
|
||||
are still allowed. **Upgrade note:** the old bare `app.enableCors()` reflected
|
||||
*any* origin (with `credentials:false`), so any previously-working cross-domain
|
||||
REST/browser client is now rejected until its origin is added to
|
||||
`CORS_ALLOWED_ORIGINS` (see `.env.example`).
|
||||
|
||||
### Fixed
|
||||
|
||||
- **Internal links in exported Markdown no longer lose their visible text.** A
|
||||
link whose target page name had no file extension (e.g. a bare title) was
|
||||
collapsed to empty text during export, producing an unclickable, label-less
|
||||
link; the page name is now preserved. (#204)
|
||||
- **Deep pages no longer render a blank breadcrumb while the sidebar tree loads.**
|
||||
The breadcrumb now falls back to the page's own ancestor chain (fetched
|
||||
independently of the lazily-built sidebar tree) so a deep page resolves its
|
||||
trail immediately; navigating away no longer leaves the previously-viewed
|
||||
page's breadcrumb showing until the new one resolves. (#206, #218)
|
||||
- **Pasted GitHub-style callouts (`> [!NOTE]` …) now convert to real callouts.**
|
||||
GitHub admonition blocks pasted as Markdown are recognized and rendered as
|
||||
callout blocks instead of plain block-quotes. (#192)
|
||||
- **The editor stays read-only until collaboration has synced.** While a page is
|
||||
connecting, the body is shown as a non-editable static view with a
|
||||
"Connecting… (read-only)" banner, so edits typed before the document finishes
|
||||
syncing can no longer be silently dropped. (#218)
|
||||
- **A shared page now keeps EXACTLY ONE custom address (`/l/:alias`).** Editing a
|
||||
page's vanity slug previously inserted a second `share_aliases` row instead of
|
||||
renaming the existing one, leaving the old `/l/<old>` link live forever and
|
||||
@@ -80,6 +131,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
enabled, so the existing reassign-confirm flow (`409 ALIAS_REASSIGN_REQUIRED` →
|
||||
"Move custom address?") is discoverable instead of reading as terminal. (#227)
|
||||
|
||||
### Security
|
||||
|
||||
- **The anonymous public-share page payload is trimmed to an explicit allowlist.**
|
||||
The `/shares/page-info` route (the only unauthenticated path serializing a
|
||||
page + its share) now returns only the fields the public renderer needs;
|
||||
internal metadata — creator/last-updater/contributor ids, space/workspace ids,
|
||||
AI/source bookkeeping, lock/template flags, parent/position and raw timestamps
|
||||
— is no longer exposed to anonymous viewers. (#218)
|
||||
- **A forged or mismatched share id can no longer render a page off its slug
|
||||
alone.** When the public URL carries a share id/key, the page must be reachable
|
||||
through that exact share (its own share or an ancestor `includeSubPages`
|
||||
share); any other value now returns the generic "not found" instead of
|
||||
serving the page. (#218)
|
||||
|
||||
## [0.94.0] - 2026-06-26
|
||||
|
||||
This release makes AI chat durable and fast: assistant turns are persisted to
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
"slug": "fact-checker",
|
||||
"emoji": "🔍",
|
||||
"name": "Fact-checker",
|
||||
"description": "Verifies facts, figures, dates, names, and quotes with web search. Confirms, corrects, or flags the unverifiable — with a verdict and a source.",
|
||||
"instructions": "You are a fact-checker at Gitmost, verifying the factual accuracy of non-fiction texts (articles, opinion pieces, technical material, blogs, documentation). You have access to web search — use it to verify. Communicate with the user in English.\n\nWHAT YOU DO\nVerify every checkable claim: names, titles, positions; dates, chronology, sequence; numbers, statistics, proportions, units; quotations and their attribution; technical facts, terms, versions, specifications; causal and logical claims, and internal consistency.\n\nRemember the weakness of machine text: an LLM does not fact-check and will confidently state falsehoods, invent non-existent terms, conflate near-neighbor entities (e.g. claim \"handwriting understanding\" where it was template-based recognition), and insert pseudo-precise numbers. Be especially wary of smoothly written but unverifiable claims.\n\nA VERDICT FOR EACH CLAIM\n- [Verified] — the fact is correct; cite the source.\n- [Incorrect] — the fact is wrong; give the correction and the source.\n- [Unverified] — probably correct but not confirmed; say what's needed to verify.\n- [Unverifiable] — the claim can't be checked in principle (no source, too vague).\n- [Opinion] — not a factual claim, not subject to checking.\n\nSource rule: rely on primary sources (original data, documentation, official site), not retellings. One primary source or two independent secondary sources is a reasonable minimum. Cite the source in the comment.\n\nWHAT YOU DON'T DO\n- Don't fix style, grammar, punctuation, structure, or typography — those are other roles.\n- Don't rewrite the text. You confirm, correct, or flag — the decision is the author's.\n- Don't judge opinions or subjective phrasing as facts.\n- Don't fabricate confirmations. If you can't verify, honestly mark [Unverified] or [Unverifiable]. Never confirm a fact you don't know.\n\nHOW TO LEAVE COMMENTS\nYou don't edit the text directly. For each checked claim, select the span via the MCP tool and leave a comment. Open the comment with the label `[Facts]`, then the verdict, the correction (if any), and the source. Tag severity:\n- [Critical] — a factual error, especially in numbers, names, or quotes, or a claim that risks misinformation.\n- [Major] — a doubtful or unconfirmed claim that needs a source.\n- [Minor] — a small correction, or false precision worth rounding or confirming.\n\nTONE\nNeutral and precise. Don't argue with the author's stance — check facts, not views.\n\nWHEN UNSURE\nBetter to honestly flag \"can't confirm\" than to give a false confirmation.",
|
||||
"description": "Verifies facts, figures, dates, names, and quotes with web search. Finds errors and flags the doubtful or unverifiable — with a verdict and a source.",
|
||||
"instructions": "You are a fact-checker at Gitmost, verifying the factual accuracy of non-fiction texts (articles, opinion pieces, technical material, blogs, documentation). You have access to web search — use it to verify. Communicate with the user in English.\n\nWHAT YOU DO\nVerify every checkable claim: names, titles, positions; dates, chronology, sequence; numbers, statistics, proportions, units; quotations and their attribution; technical facts, terms, versions, specifications; causal and logical claims, and internal consistency. Your job is to find errors and doubtful spots, not to confirm what is already correct.\n\nRemember the weakness of machine text: an LLM does not fact-check and will confidently state falsehoods, invent non-existent terms, conflate near-neighbor entities (e.g. claim \"handwriting understanding\" where it was template-based recognition), and insert pseudo-precise numbers. Be especially wary of smoothly written but unverifiable claims.\n\nVERDICTS (for problem claims only)\nDon't comment on correct facts — don't write or mark that a fact is right or confirmed. Leave a verdict only where there is a problem:\n- [Incorrect] — the fact is wrong; give the correction and the source.\n- [Unverified] — probably correct but not confirmed; say what's needed to verify.\n- [Unverifiable] — the claim can't be checked in principle (no source, too vague).\n- [Opinion] — not a factual claim, not subject to checking.\n\nSource rule: rely on primary sources (original data, documentation, official site), not retellings. One primary source or two independent secondary sources is a reasonable minimum. Cite the source in the comment.\n\nWHAT YOU DON'T DO\n- Don't fix style, grammar, punctuation, structure, or typography — those are other roles.\n- Don't rewrite the text. You refute or flag a problem — the decision is the author's.\n- Don't judge opinions or subjective phrasing as facts.\n- Don't write or comment that a fact is right or confirmed: your job is to find errors, not to confirm facts.\n- Don't fabricate confirmations. If you can't verify, honestly mark [Unverified] or [Unverifiable].\n\nHOW TO LEAVE COMMENTS\nYou don't edit the text directly. For each problem claim (an error, a doubt, an unverifiable statement), select the span via the MCP tool and leave a comment; leave no comment on correct facts. Open the comment with the label `[Facts]`, then the verdict, the correction (if any), and the source. Tag severity:\n- [Critical] — a factual error, especially in numbers, names, or quotes, or a claim that risks misinformation.\n- [Major] — a doubtful or unconfirmed claim that needs a source.\n- [Minor] — a small correction, or false precision worth rounding or confirming.\n\nTONE\nNeutral and precise. Don't argue with the author's stance — check facts, not views.\n\nWHEN UNSURE\nBetter to honestly flag \"can't confirm\" than to give a false confirmation.",
|
||||
"autoStart": true,
|
||||
"launchMessage": "Take the current page into work. If there is none, ask the user which page to work on."
|
||||
},
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -12,7 +12,7 @@
|
||||
"roles": [
|
||||
{ "slug": "structural-editor", "version": 2 },
|
||||
{ "slug": "line-editor", "version": 2 },
|
||||
{ "slug": "fact-checker", "version": 2 },
|
||||
{ "slug": "fact-checker", "version": 3 },
|
||||
{ "slug": "proofreader", "version": 3 },
|
||||
{ "slug": "narrator", "version": 1 }
|
||||
]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"fact-checker": {
|
||||
"version": 2,
|
||||
"hash": "d7ad1dae07d6f4321e7d40c5b36259dbf930264d748834809c4fb77294bf72e3"
|
||||
"version": 3,
|
||||
"hash": "a94931fbd20272570a588c72159ac9e48a89c99bd8f718449cda5e7ca4280fdf"
|
||||
},
|
||||
"line-editor": {
|
||||
"version": 2,
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta name="theme-color" content="#0E1117" media="(prefers-color-scheme: dark)" />
|
||||
<meta name="theme-color" content="#f6f7f9" media="(prefers-color-scheme: light)" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="apple-touch-icon" href="/icons/app-icon-192x192.png" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-touch-fullscreen" content="yes" />
|
||||
<meta name="apple-mobile-web-app-title" content="Gitmost" />
|
||||
|
||||
@@ -33,7 +33,9 @@
|
||||
"@slidoapp/emoji-mart-data": "1.2.4",
|
||||
"@slidoapp/emoji-mart-react": "1.1.5",
|
||||
"@tabler/icons-react": "3.40.0",
|
||||
"@tanstack/query-async-storage-persister": "5.90.17",
|
||||
"@tanstack/react-query": "5.90.17",
|
||||
"@tanstack/react-query-persist-client": "5.90.17",
|
||||
"@tanstack/react-virtual": "3.13.24",
|
||||
"ai": "6.0.207",
|
||||
"alfaaz": "1.1.0",
|
||||
@@ -45,6 +47,7 @@
|
||||
"highlightjs-sap-abap": "0.3.0",
|
||||
"i18next": "25.10.1",
|
||||
"i18next-http-backend": "3.0.6",
|
||||
"idb-keyval": "6.2.5",
|
||||
"jotai": "2.18.1",
|
||||
"jotai-optics": "0.4.0",
|
||||
"js-cookie": "3.0.7",
|
||||
@@ -95,6 +98,7 @@
|
||||
"typescript": "5.9.3",
|
||||
"typescript-eslint": "8.57.1",
|
||||
"vite": "8.0.5",
|
||||
"vite-plugin-pwa": "1.3.0",
|
||||
"vitest": "4.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -464,6 +464,18 @@
|
||||
"Move page": "Move page",
|
||||
"Move page to a different space.": "Move page to a different space.",
|
||||
"Real-time editor connection lost. Retrying...": "Real-time editor connection lost. Retrying...",
|
||||
"Offline — changes are saved locally and will sync when you reconnect": "Offline — changes are saved locally and will sync when you reconnect",
|
||||
"Syncing changes…": "Syncing changes…",
|
||||
"All changes synced": "All changes synced",
|
||||
"Update available": "Update available",
|
||||
"Reload": "Reload",
|
||||
"Make available offline": "Make available offline",
|
||||
"Saving page for offline use...": "Saving page for offline use...",
|
||||
"Page is now available offline": "Page is now available offline",
|
||||
"Failed to make page available offline": "Failed to make page available offline",
|
||||
"You're offline": "You're offline",
|
||||
"This page hasn't been saved for offline use, so it can't be loaded right now. Reconnect to the internet and try again.": "This page hasn't been saved for offline use, so it can't be loaded right now. Reconnect to the internet and try again.",
|
||||
"Retry": "Retry",
|
||||
"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.",
|
||||
"Share": "Share",
|
||||
@@ -1364,5 +1376,6 @@
|
||||
"Already up to date": "Already up to date",
|
||||
"Updated to the latest version": "Updated to the latest version",
|
||||
"This role is no longer in the catalog": "This role is no longer in the catalog",
|
||||
"This language is no longer available in the catalog": "This language is no longer available in the catalog"
|
||||
"This language is no longer available in the catalog": "This language is no longer available in the catalog",
|
||||
"Connecting… (read-only)": "Connecting… (read-only)"
|
||||
}
|
||||
|
||||
@@ -474,6 +474,18 @@
|
||||
"Move page": "Переместить страницу",
|
||||
"Move page to a different space.": "Переместите страницу в другое пространство.",
|
||||
"Real-time editor connection lost. Retrying...": "Соединение с редактором в реальном времени потеряно. Повторная попытка...",
|
||||
"Offline — changes are saved locally and will sync when you reconnect": "Нет сети — изменения сохраняются локально и синхронизируются при восстановлении соединения",
|
||||
"Syncing changes…": "Синхронизация изменений…",
|
||||
"All changes synced": "Все изменения синхронизированы",
|
||||
"Update available": "Доступно обновление",
|
||||
"Reload": "Перезагрузить",
|
||||
"Make available offline": "Сделать доступным офлайн",
|
||||
"Saving page for offline use...": "Сохраняем страницу для офлайн-доступа…",
|
||||
"Page is now available offline": "Страница доступна офлайн",
|
||||
"Failed to make page available offline": "Не удалось сделать страницу доступной офлайн",
|
||||
"You're offline": "Вы офлайн",
|
||||
"This page hasn't been saved for offline use, so it can't be loaded right now. Reconnect to the internet and try again.": "Эта страница не была сохранена для офлайн-доступа, поэтому её нельзя загрузить сейчас. Подключитесь к интернету и попробуйте снова.",
|
||||
"Retry": "Повторить",
|
||||
"Table of contents": "Оглавление",
|
||||
"Add headings (H1, H2, H3) to generate a table of contents.": "Добавьте заголовки (H1, H2, H3), чтобы создать оглавление.",
|
||||
"Share": "Поделиться",
|
||||
@@ -1222,5 +1234,6 @@
|
||||
"Already up to date": "Уже актуальна",
|
||||
"Updated to the latest version": "Обновлено до последней версии",
|
||||
"This role is no longer in the catalog": "Эта роль больше не представлена в каталоге",
|
||||
"This language is no longer available in the catalog": "Этот язык больше не доступен в каталоге"
|
||||
"This language is no longer available in the catalog": "Этот язык больше не доступен в каталоге",
|
||||
"Connecting… (read-only)": "Подключение… (только чтение)"
|
||||
}
|
||||
|
||||
@@ -1,30 +1,19 @@
|
||||
{
|
||||
"id": "/",
|
||||
"name": "Gitmost",
|
||||
"short_name": "Gitmost",
|
||||
"description": "Gitmost - open-source collaborative documentation and knowledge base.",
|
||||
"lang": "en",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"orientation": "any",
|
||||
"background_color": "#0E1117",
|
||||
"theme_color": "#0E1117",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/favicon-16x16.png",
|
||||
"type": "image/png",
|
||||
"sizes": "16x16"
|
||||
},
|
||||
{
|
||||
"src": "icons/favicon-32x32.png",
|
||||
"type": "image/png",
|
||||
"sizes": "32x32"
|
||||
},
|
||||
{
|
||||
"src": "icons/app-icon-192x192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "180x180 192x192"
|
||||
},
|
||||
{
|
||||
"src": "icons/app-icon-512x512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
{ "src": "icons/favicon-16x16.png", "type": "image/png", "sizes": "16x16" },
|
||||
{ "src": "icons/favicon-32x32.png", "type": "image/png", "sizes": "32x32" },
|
||||
{ "src": "icons/app-icon-192x192.png", "type": "image/png", "sizes": "192x192", "purpose": "any" },
|
||||
{ "src": "icons/app-icon-512x512.png", "type": "image/png", "sizes": "512x512", "purpose": "any" }
|
||||
]
|
||||
}
|
||||
|
||||
154
apps/client/src/features/auth/hooks/use-auth.test.ts
Normal file
154
apps/client/src/features/auth/hooks/use-auth.test.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { renderHook, act } from "@testing-library/react";
|
||||
|
||||
// react-i18next: identity t() so the hook renders without an i18n provider.
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({ t: (k: string) => k }),
|
||||
}));
|
||||
|
||||
// react-router-dom: only useNavigate is used by the hook.
|
||||
const navigateMock = vi.fn();
|
||||
vi.mock("react-router-dom", () => ({
|
||||
useNavigate: () => navigateMock,
|
||||
}));
|
||||
|
||||
// The auth service is the network boundary; stub login/logout per test.
|
||||
const loginMock = vi.fn();
|
||||
const logoutMock = vi.fn();
|
||||
vi.mock("@/features/auth/services/auth-service", () => ({
|
||||
login: (...args: unknown[]) => loginMock(...args),
|
||||
logout: (...args: unknown[]) => logoutMock(...args),
|
||||
forgotPassword: vi.fn(),
|
||||
passwordReset: vi.fn(),
|
||||
setupWorkspace: vi.fn(),
|
||||
verifyUserToken: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/features/workspace/services/workspace-service.ts", () => ({
|
||||
acceptInvitation: vi.fn(),
|
||||
}));
|
||||
|
||||
// The offline cache purge is the unit under test — assert it is invoked.
|
||||
const clearOfflineCacheMock = vi.fn();
|
||||
vi.mock("@/features/offline/clear-offline-cache", () => ({
|
||||
clearOfflineCache: () => clearOfflineCacheMock(),
|
||||
}));
|
||||
|
||||
// app-route helpers are pure config; provide deterministic values.
|
||||
vi.mock("@/lib/app-route.ts", () => ({
|
||||
default: { AUTH: { LOGIN: "/login" }, HOME: "/home" },
|
||||
getPostLoginRedirect: () => "/home",
|
||||
}));
|
||||
|
||||
// Mantine notifications: avoid touching the DOM-bound notification system.
|
||||
vi.mock("@mantine/notifications", () => ({
|
||||
notifications: { show: vi.fn() },
|
||||
}));
|
||||
|
||||
import useAuth from "./use-auth";
|
||||
|
||||
beforeEach(() => {
|
||||
navigateMock.mockReset();
|
||||
loginMock.mockReset();
|
||||
loginMock.mockResolvedValue(undefined);
|
||||
logoutMock.mockReset();
|
||||
logoutMock.mockResolvedValue(undefined);
|
||||
clearOfflineCacheMock.mockReset();
|
||||
clearOfflineCacheMock.mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
describe("useAuth.handleSignIn", () => {
|
||||
it("clears the offline cache BEFORE logging in (cross-user leak guard)", async () => {
|
||||
const order: string[] = [];
|
||||
clearOfflineCacheMock.mockImplementation(async () => {
|
||||
order.push("clear");
|
||||
});
|
||||
loginMock.mockImplementation(async () => {
|
||||
order.push("login");
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useAuth());
|
||||
await act(async () => {
|
||||
await result.current.signIn({ email: "b@x", password: "pw" } as any);
|
||||
});
|
||||
|
||||
expect(clearOfflineCacheMock).toHaveBeenCalledTimes(1);
|
||||
expect(loginMock).toHaveBeenCalledTimes(1);
|
||||
// The purge must run before the new session's login resolves.
|
||||
expect(order).toEqual(["clear", "login"]);
|
||||
expect(navigateMock).toHaveBeenCalledWith("/home");
|
||||
});
|
||||
|
||||
it("does not block sign-in when the cache purge throws (best-effort)", async () => {
|
||||
clearOfflineCacheMock.mockRejectedValue(new Error("idb unavailable"));
|
||||
|
||||
const { result } = renderHook(() => useAuth());
|
||||
await act(async () => {
|
||||
await result.current.signIn({ email: "b@x", password: "pw" } as any);
|
||||
});
|
||||
|
||||
// Login still proceeds despite the cleanup failure.
|
||||
expect(loginMock).toHaveBeenCalledTimes(1);
|
||||
expect(navigateMock).toHaveBeenCalledWith("/home");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useAuth.handleLogout", () => {
|
||||
const replaceMock = vi.fn();
|
||||
let originalLocation: Location;
|
||||
|
||||
beforeEach(() => {
|
||||
replaceMock.mockReset();
|
||||
// window.location.replace is the post-logout redirect. jsdom's real `replace`
|
||||
// is a non-configurable method that warns "not implemented", so swap the
|
||||
// whole location object for one whose `replace` we can capture.
|
||||
originalLocation = window.location;
|
||||
Object.defineProperty(window, "location", {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: { replace: replaceMock },
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
Object.defineProperty(window, "location", {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: originalLocation,
|
||||
});
|
||||
});
|
||||
|
||||
it("purges the offline cache exactly once BEFORE redirecting (cross-user leak guard)", async () => {
|
||||
const order: string[] = [];
|
||||
clearOfflineCacheMock.mockImplementation(async () => {
|
||||
order.push("clear");
|
||||
});
|
||||
replaceMock.mockImplementation((url: string) => {
|
||||
order.push(`replace:${url}`);
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useAuth());
|
||||
await act(async () => {
|
||||
await result.current.logout();
|
||||
});
|
||||
|
||||
expect(clearOfflineCacheMock).toHaveBeenCalledTimes(1);
|
||||
// Purge must complete before the redirect (which would otherwise interrupt
|
||||
// the async cleanup).
|
||||
expect(order).toEqual(["clear", "replace:/login?logout=1"]);
|
||||
});
|
||||
|
||||
it("still redirects when the cache purge throws (best-effort, never blocks logout)", async () => {
|
||||
clearOfflineCacheMock.mockRejectedValue(new Error("idb unavailable"));
|
||||
|
||||
const { result } = renderHook(() => useAuth());
|
||||
await act(async () => {
|
||||
await result.current.logout();
|
||||
});
|
||||
|
||||
// The thrown purge error is swallowed and the redirect still fires.
|
||||
expect(clearOfflineCacheMock).toHaveBeenCalledTimes(1);
|
||||
expect(replaceMock).toHaveBeenCalledTimes(1);
|
||||
expect(replaceMock).toHaveBeenCalledWith("/login?logout=1");
|
||||
});
|
||||
});
|
||||
@@ -23,6 +23,7 @@ import { acceptInvitation } from "@/features/workspace/services/workspace-servic
|
||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
|
||||
import { RESET } from "jotai/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { clearOfflineCache } from "@/features/offline/clear-offline-cache";
|
||||
|
||||
export default function useAuth() {
|
||||
const { t } = useTranslation();
|
||||
@@ -33,6 +34,20 @@ export default function useAuth() {
|
||||
const handleSignIn = async (data: ILogin) => {
|
||||
setIsLoading(true);
|
||||
|
||||
// Purge any previous user's offline data BEFORE signing in (mirrors logout).
|
||||
// On a shared/kiosk device the prior session may have ended WITHOUT an
|
||||
// explicit logout (cookie/JWT expiry, tab close, force-quit), leaving user
|
||||
// A's persisted query cache (gitmost-rq-cache) and Yjs page bodies
|
||||
// (page.<id>) in IndexedDB. Without this purge user B would briefly read A's
|
||||
// cached currentUser/pages/comments on first render (UserProvider serves the
|
||||
// cached user) and A's page bodies would stay readable offline. Best-effort:
|
||||
// never block sign-in on cache cleanup.
|
||||
try {
|
||||
await clearOfflineCache();
|
||||
} catch {
|
||||
// best-effort: never block sign-in on cache cleanup
|
||||
}
|
||||
|
||||
try {
|
||||
await login(data);
|
||||
setIsLoading(false);
|
||||
@@ -123,6 +138,13 @@ export default function useAuth() {
|
||||
const handleLogout = async () => {
|
||||
setCurrentUser(RESET);
|
||||
await logout();
|
||||
// Purge the previous user's offline data while the page is still alive —
|
||||
// window.location.replace below would otherwise interrupt async cleanup.
|
||||
try {
|
||||
await clearOfflineCache();
|
||||
} catch {
|
||||
// best-effort: never block logout on cache cleanup
|
||||
}
|
||||
window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
|
||||
};
|
||||
|
||||
|
||||
43
apps/client/src/features/auth/queries/auth-query.test.ts
Normal file
43
apps/client/src/features/auth/queries/auth-query.test.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { AxiosError } from "axios";
|
||||
import { collabTokenRetry } from "./auth-query";
|
||||
|
||||
// Regression for the offline white-screen (#237/#238): offline the collab-token
|
||||
// POST rejects as an axios NETWORK error (isAxiosError === true but
|
||||
// error.response === undefined). The old predicate read `error.response.status`
|
||||
// without a guard and threw an uncaught TypeError inside the React Query retryer
|
||||
// BEFORE React mounted, blanking the whole app. The predicate must stay total.
|
||||
describe("collabTokenRetry", () => {
|
||||
it("does NOT throw and returns a retryable value for a network error with no response (offline)", () => {
|
||||
// An axios error with no `response` is exactly the offline/network-failure shape.
|
||||
const networkError = new AxiosError("Network Error");
|
||||
expect(networkError.response).toBeUndefined();
|
||||
|
||||
let result: boolean | number = false;
|
||||
expect(() => {
|
||||
result = collabTokenRetry(0, networkError);
|
||||
}).not.toThrow();
|
||||
// Network failures stay retryable (truthy), matching the original intent.
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it("returns false (no retry) for a real 404 response", () => {
|
||||
const notFound = new AxiosError("Not Found");
|
||||
notFound.response = { status: 404 } as AxiosError["response"];
|
||||
expect(collabTokenRetry(0, notFound)).toBe(false);
|
||||
});
|
||||
|
||||
it("retries for a non-404 response (e.g. 500)", () => {
|
||||
const serverError = new AxiosError("Server Error");
|
||||
serverError.response = { status: 500 } as AxiosError["response"];
|
||||
expect(collabTokenRetry(0, serverError)).toBe(true);
|
||||
});
|
||||
|
||||
it("does not throw and retries for a non-axios error", () => {
|
||||
let result: boolean | number = false;
|
||||
expect(() => {
|
||||
result = collabTokenRetry(0, new Error("boom"));
|
||||
}).not.toThrow();
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -3,6 +3,27 @@ import { getCollabToken, verifyUserToken } from "../services/auth-service";
|
||||
import { ICollabToken, IVerifyUserToken } from "../types/auth.types";
|
||||
import { isAxiosError } from "axios";
|
||||
|
||||
/**
|
||||
* Retry predicate for the collab-token query.
|
||||
*
|
||||
* Offline (or any network failure) the POST rejects as an axios NETWORK error:
|
||||
* `isAxiosError(error) === true` but `error.response === undefined`. Reading
|
||||
* `error.response.status` without a guard threw an uncaught TypeError inside the
|
||||
* React Query retryer BEFORE React mounted, white-screening the whole app on an
|
||||
* offline cold boot (#237/#238). Optional-chaining `error.response?.status`
|
||||
* keeps the predicate total: a network error (no response) is retryable, a real
|
||||
* 404 is not. Extracted (and exported) so it can be unit-tested in isolation.
|
||||
*/
|
||||
export function collabTokenRetry(
|
||||
_failureCount: number,
|
||||
error: Error,
|
||||
): boolean {
|
||||
if (isAxiosError(error) && error.response?.status === 404) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export function useVerifyUserTokenQuery(
|
||||
verify: IVerifyUserToken,
|
||||
): UseQueryResult<any, Error> {
|
||||
@@ -22,13 +43,7 @@ export function useCollabToken(): UseQueryResult<ICollabToken, Error> {
|
||||
//refetchInterval: 12 * 60 * 60 * 1000, // 12hrs
|
||||
//refetchIntervalInBackground: true,
|
||||
refetchOnMount: true,
|
||||
//@ts-ignore
|
||||
retry: (failureCount, error) => {
|
||||
if (isAxiosError(error) && error.response.status === 404) {
|
||||
return false;
|
||||
}
|
||||
return 10;
|
||||
},
|
||||
retry: collabTokenRetry,
|
||||
retryDelay: (retryAttempt) => {
|
||||
// Exponential backoff: 5s, 10s, 20s, etc.
|
||||
return 5000 * Math.pow(2, retryAttempt - 1);
|
||||
|
||||
@@ -20,6 +20,7 @@ import { notifications } from "@mantine/notifications";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { offlineMutationKeys } from "@/features/offline/offline-mutations";
|
||||
|
||||
export const RQ_KEY = (pageId: string) => ["comments", pageId];
|
||||
|
||||
@@ -60,6 +61,9 @@ export function useCreateCommentMutation() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<IComment, Error, Partial<IComment>>({
|
||||
// Stable key so a paused comment-create restored from IndexedDB after an
|
||||
// offline reload finds its default mutationFn and is replayed on reconnect.
|
||||
mutationKey: offlineMutationKeys.createComment,
|
||||
mutationFn: (data) => createComment(data),
|
||||
onSuccess: (newComment) => {
|
||||
const cache = queryClient.getQueryData(
|
||||
|
||||
@@ -10,6 +10,12 @@ export const readOnlyEditorAtom = atom<Editor | null>(null);
|
||||
|
||||
export const yjsConnectionStatusAtom = atom<string>("");
|
||||
|
||||
// Local (IndexedDB) persistence sync state for the current page's Y.Doc.
|
||||
export const isLocalSyncedAtom = atom<boolean>(false);
|
||||
|
||||
// Remote (Hocuspocus) sync state for the current page's Y.Doc.
|
||||
export const isRemoteSyncedAtom = atom<boolean>(false);
|
||||
|
||||
export const showLinkMenuAtom = atom(false);
|
||||
|
||||
// Current page's edit mode — initialized from the user's saved preference on
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import { describe, it, expect, beforeEach } from "vitest";
|
||||
import {
|
||||
sortFrequentlyUsedEmoji,
|
||||
getFrequentlyUsedEmoji,
|
||||
LOCAL_STORAGE_FREQUENT_KEY,
|
||||
} from "./utils";
|
||||
|
||||
describe("sortFrequentlyUsedEmoji", () => {
|
||||
it("orders known emoji by descending usage count", async () => {
|
||||
const result = await sortFrequentlyUsedEmoji({
|
||||
rocket: 1,
|
||||
joy: 9,
|
||||
heart_eyes: 5,
|
||||
});
|
||||
expect(result.map((e) => e.id)).toEqual(["joy", "heart_eyes", "rocket"]);
|
||||
});
|
||||
|
||||
it("caps the result at the top 5 most frequent", async () => {
|
||||
const result = await sortFrequentlyUsedEmoji({
|
||||
rocket: 1,
|
||||
joy: 2,
|
||||
heart_eyes: 3,
|
||||
grinning: 4,
|
||||
laughing: 5,
|
||||
scream: 6,
|
||||
sweat_smile: 7,
|
||||
});
|
||||
expect(result).toHaveLength(5);
|
||||
// Highest counts retained, lowest (rocket:1, joy:2) dropped.
|
||||
expect(result.map((e) => e.id)).toEqual([
|
||||
"sweat_smile",
|
||||
"scream",
|
||||
"laughing",
|
||||
"grinning",
|
||||
"heart_eyes",
|
||||
]);
|
||||
});
|
||||
|
||||
it("drops ids that have no matching emoji in the index", async () => {
|
||||
const result = await sortFrequentlyUsedEmoji({
|
||||
__definitely_not_a_real_emoji_id__: 100,
|
||||
rocket: 1,
|
||||
});
|
||||
expect(result.map((e) => e.id)).toEqual(["rocket"]);
|
||||
});
|
||||
|
||||
it("maps each entry to its native glyph and a command", async () => {
|
||||
const [entry] = await sortFrequentlyUsedEmoji({ rocket: 5 });
|
||||
expect(entry.id).toBe("rocket");
|
||||
expect(typeof entry.emoji).toBe("string");
|
||||
expect(entry.emoji.length).toBeGreaterThan(0);
|
||||
expect(typeof entry.command).toBe("function");
|
||||
});
|
||||
|
||||
it("returns an empty list for empty input", async () => {
|
||||
expect(await sortFrequentlyUsedEmoji({})).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("getFrequentlyUsedEmoji", () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
it("falls back to the default map when nothing is stored", () => {
|
||||
const result = getFrequentlyUsedEmoji();
|
||||
expect(result["+1"]).toBe(10);
|
||||
expect(result["rocket"]).toBe(1);
|
||||
});
|
||||
|
||||
it("parses a valid stored JSON map", () => {
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE_FREQUENT_KEY,
|
||||
JSON.stringify({ rocket: 42 }),
|
||||
);
|
||||
expect(getFrequentlyUsedEmoji()).toEqual({ rocket: 42 });
|
||||
});
|
||||
|
||||
// BUG (issue #204, Phase 2): getFrequentlyUsedEmoji() does an unprotected
|
||||
// JSON.parse() of the raw localStorage value. A corrupt value (e.g. truncated
|
||||
// by a crash, or written by another tab/extension) makes the emoji menu throw
|
||||
// on open instead of degrading gracefully to the default set.
|
||||
//
|
||||
// Documented with it.fails: this asserts the DESIRED behavior (return a sane
|
||||
// default, never throw). It currently FAILS because the function throws —
|
||||
// flip to `it()` once utils.ts guards the JSON.parse.
|
||||
it.fails(
|
||||
"should degrade to a sane default on corrupt localStorage (currently throws)",
|
||||
() => {
|
||||
localStorage.setItem(LOCAL_STORAGE_FREQUENT_KEY, "{not valid json");
|
||||
let result: Record<string, number> | undefined;
|
||||
expect(() => {
|
||||
result = getFrequentlyUsedEmoji();
|
||||
}).not.toThrow();
|
||||
// Should hand back a usable, non-empty map rather than nothing.
|
||||
expect(result).toBeTruthy();
|
||||
expect(Object.keys(result ?? {}).length).toBeGreaterThan(0);
|
||||
},
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,163 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import {
|
||||
isHeaderCell,
|
||||
sortItems,
|
||||
weaveItems,
|
||||
type SortableItem,
|
||||
} from "./sort-cells";
|
||||
|
||||
// isHeaderCell only reads node.type.name and node.attrs?.header, so a minimal
|
||||
// duck-typed node is sufficient (no real ProseMirror schema needed).
|
||||
function fakeNode(typeName: string, attrs: Record<string, unknown> = {}) {
|
||||
return { type: { name: typeName }, attrs } as unknown as ProseMirrorNode;
|
||||
}
|
||||
|
||||
function item<T>(
|
||||
payload: T,
|
||||
text: string,
|
||||
originalOrder: number,
|
||||
opts: { isHeader?: boolean; isEmpty?: boolean } = {},
|
||||
): SortableItem<T> {
|
||||
return {
|
||||
payload,
|
||||
text,
|
||||
originalOrder,
|
||||
isHeader: opts.isHeader ?? false,
|
||||
isEmpty: opts.isEmpty ?? text.trim() === "",
|
||||
};
|
||||
}
|
||||
|
||||
describe("isHeaderCell", () => {
|
||||
it("recognizes the tableHeader node type", () => {
|
||||
expect(isHeaderCell(fakeNode("tableHeader"))).toBe(true);
|
||||
});
|
||||
|
||||
it("recognizes the snake_case table_header node type", () => {
|
||||
expect(isHeaderCell(fakeNode("table_header"))).toBe(true);
|
||||
});
|
||||
|
||||
it("treats a plain cell with header:true attr as a header", () => {
|
||||
expect(isHeaderCell(fakeNode("tableCell", { header: true }))).toBe(true);
|
||||
});
|
||||
|
||||
it("returns false for a regular body cell", () => {
|
||||
expect(isHeaderCell(fakeNode("tableCell", { header: false }))).toBe(false);
|
||||
expect(isHeaderCell(fakeNode("tableCell"))).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("sortItems", () => {
|
||||
it("sorts non-empty rows ascending using a base/numeric collator", () => {
|
||||
const data = [
|
||||
item("c", "cherry", 0),
|
||||
item("a", "Apple", 1),
|
||||
item("b", "banana", 2),
|
||||
];
|
||||
expect(sortItems(data, "asc").map((i) => i.payload)).toEqual([
|
||||
"a",
|
||||
"b",
|
||||
"c",
|
||||
]);
|
||||
});
|
||||
|
||||
it("sorts descending when direction is desc", () => {
|
||||
const data = [
|
||||
item("a", "apple", 0),
|
||||
item("b", "banana", 1),
|
||||
item("c", "cherry", 2),
|
||||
];
|
||||
expect(sortItems(data, "desc").map((i) => i.payload)).toEqual([
|
||||
"c",
|
||||
"b",
|
||||
"a",
|
||||
]);
|
||||
});
|
||||
|
||||
it("orders numerically, not lexically (numeric collator)", () => {
|
||||
const data = [
|
||||
item("ten", "10", 0),
|
||||
item("two", "2", 1),
|
||||
item("one", "1", 2),
|
||||
];
|
||||
expect(sortItems(data, "asc").map((i) => i.payload)).toEqual([
|
||||
"one",
|
||||
"two",
|
||||
"ten",
|
||||
]);
|
||||
});
|
||||
|
||||
it("always pushes empty cells to the bottom regardless of direction", () => {
|
||||
const data = [
|
||||
item("empty", "", 0, { isEmpty: true }),
|
||||
item("b", "banana", 1),
|
||||
item("a", "apple", 2),
|
||||
];
|
||||
const asc = sortItems(data, "asc");
|
||||
expect(asc.map((i) => i.payload)).toEqual(["a", "b", "empty"]);
|
||||
const desc = sortItems(data, "desc");
|
||||
// Empty stays last even when the rest is reversed.
|
||||
expect(desc[desc.length - 1].payload).toBe("empty");
|
||||
});
|
||||
|
||||
it("keeps empty cells in their original relative order (stable)", () => {
|
||||
const data = [
|
||||
item("e1", "", 5, { isEmpty: true }),
|
||||
item("e2", "", 2, { isEmpty: true }),
|
||||
item("a", "apple", 9),
|
||||
];
|
||||
const sorted = sortItems(data, "asc");
|
||||
// e2 (originalOrder 2) before e1 (originalOrder 5).
|
||||
expect(sorted.map((i) => i.payload)).toEqual(["a", "e2", "e1"]);
|
||||
});
|
||||
|
||||
it("does not mutate the input array", () => {
|
||||
const data = [item("b", "banana", 0), item("a", "apple", 1)];
|
||||
const snapshot = data.map((i) => i.payload);
|
||||
sortItems(data, "asc");
|
||||
expect(data.map((i) => i.payload)).toEqual(snapshot);
|
||||
});
|
||||
});
|
||||
|
||||
describe("weaveItems", () => {
|
||||
it("keeps header rows pinned in place and fills body slots from sorted data", () => {
|
||||
const header = item("H", "Name", 0, { isHeader: true });
|
||||
const all = [
|
||||
header,
|
||||
item("orig-b", "b", 1),
|
||||
item("orig-a", "a", 2),
|
||||
];
|
||||
const sortedBody = [item("orig-a", "a", 2), item("orig-b", "b", 1)];
|
||||
|
||||
const woven = weaveItems(all, sortedBody);
|
||||
// Header never moves out of row 0...
|
||||
expect(woven[0]).toBe(header);
|
||||
// ...and the body positions are filled in sorted order.
|
||||
expect(woven.slice(1).map((i) => i.payload)).toEqual(["orig-a", "orig-b"]);
|
||||
});
|
||||
|
||||
it("does not consume body data for header positions (header stays at top)", () => {
|
||||
const header = item("H", "head", 0, { isHeader: true });
|
||||
const all = [header, item("x", "x", 1), item("y", "y", 2)];
|
||||
const sortedBody = [item("y", "y", 2), item("x", "x", 1)];
|
||||
const woven = weaveItems(all, sortedBody);
|
||||
expect(woven[0].isHeader).toBe(true);
|
||||
expect(woven.filter((i) => !i.isHeader).map((i) => i.payload)).toEqual([
|
||||
"y",
|
||||
"x",
|
||||
]);
|
||||
});
|
||||
|
||||
it("interleaves correctly when a header sits between body rows", () => {
|
||||
const header = item("H", "head", 1, { isHeader: true });
|
||||
const all = [
|
||||
item("b1", "b1", 0),
|
||||
header,
|
||||
item("b2", "b2", 2),
|
||||
];
|
||||
const sortedBody = [item("b2", "b2", 2), item("b1", "b1", 0)];
|
||||
const woven = weaveItems(all, sortedBody);
|
||||
expect(woven.map((i) => i.payload)).toEqual(["b2", "H", "b1"]);
|
||||
expect(woven[1]).toBe(header);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
import { createContext, useContext } from "react";
|
||||
import type { HocuspocusProvider } from "@hocuspocus/provider";
|
||||
import type * as Y from "yjs";
|
||||
|
||||
// Shared collaboration providers lifted above the title/body editors so that
|
||||
// both siblings bind to the SAME Y.Doc and HocuspocusProvider. The title lives
|
||||
// in a dedicated 'title' fragment of the same doc as the body.
|
||||
export interface EditorProvidersContextValue {
|
||||
ydoc: Y.Doc;
|
||||
remote: HocuspocusProvider;
|
||||
providersReady: boolean;
|
||||
}
|
||||
|
||||
export const EditorProvidersContext =
|
||||
createContext<EditorProvidersContextValue | null>(null);
|
||||
|
||||
// Returns the shared providers, or null when rendered outside of a provider.
|
||||
// Consumers must be null-safe (the body editor falls back to a non-collab mode).
|
||||
export function useEditorProviders(): EditorProvidersContextValue | null {
|
||||
return useContext(EditorProvidersContext);
|
||||
}
|
||||
32
apps/client/src/features/editor/editor-sync-state.test.ts
Normal file
32
apps/client/src/features/editor/editor-sync-state.test.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { WebSocketStatus } from "@hocuspocus/provider";
|
||||
import { isCollabSynced, isBodyEditable } from "./editor-sync-state";
|
||||
|
||||
describe("isCollabSynced", () => {
|
||||
it("is true only when Connected and synced", () => {
|
||||
expect(isCollabSynced(WebSocketStatus.Connected, true)).toBe(true);
|
||||
});
|
||||
|
||||
it("is false while connecting or not yet synced", () => {
|
||||
expect(isCollabSynced(WebSocketStatus.Connecting, true)).toBe(false);
|
||||
expect(isCollabSynced(WebSocketStatus.Connected, false)).toBe(false);
|
||||
expect(isCollabSynced(WebSocketStatus.Disconnected, true)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("isBodyEditable (pre-sync data-loss gate, #218)", () => {
|
||||
const base = { editable: true, inEditMode: true, showStatic: false };
|
||||
|
||||
it("allows editing only after the static (pre-sync) phase ends", () => {
|
||||
expect(isBodyEditable(base)).toBe(true);
|
||||
});
|
||||
|
||||
it("never editable while the static read-only editor is shown", () => {
|
||||
expect(isBodyEditable({ ...base, showStatic: true })).toBe(false);
|
||||
});
|
||||
|
||||
it("honors read-only and view mode", () => {
|
||||
expect(isBodyEditable({ ...base, editable: false })).toBe(false);
|
||||
expect(isBodyEditable({ ...base, inEditMode: false })).toBe(false);
|
||||
});
|
||||
});
|
||||
32
apps/client/src/features/editor/editor-sync-state.ts
Normal file
32
apps/client/src/features/editor/editor-sync-state.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { WebSocketStatus } from "@hocuspocus/provider";
|
||||
|
||||
/**
|
||||
* The collab document is usable only once the provider is Connected AND has
|
||||
* synced (both the local IndexedDB replica and the remote room). Until then the
|
||||
* in-browser Y.Doc is empty/stale, so edits would either be dropped or clobber
|
||||
* the server's authoritative doc when it finally arrives.
|
||||
*/
|
||||
export function isCollabSynced(
|
||||
status: WebSocketStatus | string,
|
||||
isSynced: boolean,
|
||||
): boolean {
|
||||
return status === WebSocketStatus.Connected && isSynced;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the page BODY editor may accept edits.
|
||||
*
|
||||
* `showStatic` is true during the pre-sync window (a read-only static editor is
|
||||
* shown). Gating editability on `!showStatic` guarantees the body never becomes
|
||||
* editable before the collab doc is synced, so early keystrokes on a freshly
|
||||
* created page can't land only in local ProseMirror and then be lost when the
|
||||
* server's initial empty doc syncs in (#218). Read-only and view modes are
|
||||
* still honored via `editable`/`inEditMode`.
|
||||
*/
|
||||
export function isBodyEditable(opts: {
|
||||
editable: boolean;
|
||||
inEditMode: boolean;
|
||||
showStatic: boolean;
|
||||
}): boolean {
|
||||
return opts.editable && opts.inEditMode && !opts.showStatic;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { normalizeTableColumnWidths } from "./markdown-clipboard";
|
||||
|
||||
// normalizeTableColumnWidths mutates a DOM subtree (jsdom provides document).
|
||||
function root(html: string): HTMLElement {
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = html;
|
||||
return div;
|
||||
}
|
||||
|
||||
function firstRowColWidths(container: HTMLElement): (string | null)[] {
|
||||
const row = container.querySelector("tr");
|
||||
return Array.from(row?.children ?? []).map((c) =>
|
||||
c.getAttribute("colwidth"),
|
||||
);
|
||||
}
|
||||
|
||||
describe("normalizeTableColumnWidths", () => {
|
||||
// The core "squash столбцов вставленной таблицы" concern: markdown has no
|
||||
// widths, so every pasted table would otherwise render at table-layout:fixed
|
||||
// / 100% and squash columns. This stamps an explicit per-column px width.
|
||||
it("stamps the default px width on every column when no widths are present", () => {
|
||||
const container = root(
|
||||
"<table><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody></table>",
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
expect(firstRowColWidths(container)).toEqual(["150", "150", "150"]);
|
||||
});
|
||||
|
||||
it("derives column widths from a colgroup", () => {
|
||||
const container = root(
|
||||
"<table>" +
|
||||
'<colgroup><col style="width:200px"><col style="width:80px"></colgroup>' +
|
||||
"<tbody><tr><td>a</td><td>b</td></tr></tbody>" +
|
||||
"</table>",
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
expect(firstRowColWidths(container)).toEqual(["200", "80"]);
|
||||
});
|
||||
|
||||
it("derives column widths from per-cell width attributes", () => {
|
||||
const container = root(
|
||||
'<table><tbody><tr><td width="120">a</td><td width="90">b</td></tr></tbody></table>',
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
expect(firstRowColWidths(container)).toEqual(["120", "90"]);
|
||||
});
|
||||
|
||||
it("derives column widths from a cell style:width:px", () => {
|
||||
const container = root(
|
||||
'<table><tbody><tr><td style="width:140px">a</td><td>b</td></tr></tbody></table>',
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
// First cell width parsed; a fully-unmeasured column is left untouched
|
||||
// (the 100 fallback only fills in NULL gaps inside an otherwise-measured
|
||||
// multi-column slice, e.g. a colspan).
|
||||
expect(firstRowColWidths(container)).toEqual(["140", null]);
|
||||
});
|
||||
|
||||
it("fills a null gap inside a measured colspanned slice with 100", () => {
|
||||
// colgroup gives [200, null]; the single colspan=2 cell spans both, so its
|
||||
// slice is [200, null] -> the null is backfilled to 100 => "200,100".
|
||||
const container = root(
|
||||
"<table>" +
|
||||
'<colgroup><col style="width:200px"><col></colgroup>' +
|
||||
'<tbody><tr><td colspan="2">merged</td></tr></tbody>' +
|
||||
"</table>",
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
expect(firstRowColWidths(container)).toEqual(["200,100"]);
|
||||
});
|
||||
|
||||
it("splits a measured width across a colspanned cell", () => {
|
||||
const container = root(
|
||||
'<table><tbody><tr><td colspan="2" width="300">merged</td><td width="100">x</td></tr></tbody></table>',
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
// 300 / colspan(2) = 150 per underlying column => "150,150" on the merged cell.
|
||||
expect(firstRowColWidths(container)).toEqual(["150,150", "100"]);
|
||||
});
|
||||
|
||||
it("falls back to the default width per spanned column when nothing is measurable", () => {
|
||||
const container = root(
|
||||
'<table><tbody><tr><td colspan="2">merged</td><td>x</td></tr></tbody></table>',
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
expect(firstRowColWidths(container)).toEqual(["150,150", "150"]);
|
||||
});
|
||||
|
||||
it("leaves cells that already have a colwidth untouched", () => {
|
||||
const container = root(
|
||||
'<table><tbody><tr><td colwidth="42">a</td><td>b</td></tr></tbody></table>',
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
expect(firstRowColWidths(container)).toEqual(["42", "150"]);
|
||||
});
|
||||
|
||||
it("normalizes every table in the subtree", () => {
|
||||
const container = root(
|
||||
"<table><tbody><tr><td>a</td></tr></tbody></table>" +
|
||||
"<table><tbody><tr><td>b</td><td>c</td></tr></tbody></table>",
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
const tables = container.querySelectorAll("table");
|
||||
const widths = Array.from(tables).map((t) =>
|
||||
Array.from(t.querySelector("tr")!.children).map((c) =>
|
||||
c.getAttribute("colwidth"),
|
||||
),
|
||||
);
|
||||
expect(widths).toEqual([["150"], ["150", "150"]]);
|
||||
});
|
||||
|
||||
it("only annotates the first row (column widths are defined once)", () => {
|
||||
const container = root(
|
||||
"<table><tbody>" +
|
||||
"<tr><td>a</td><td>b</td></tr>" +
|
||||
"<tr><td>c</td><td>d</td></tr>" +
|
||||
"</tbody></table>",
|
||||
);
|
||||
normalizeTableColumnWidths(container);
|
||||
const rows = container.querySelectorAll("tr");
|
||||
expect(
|
||||
Array.from(rows[1].children).map((c) => c.getAttribute("colwidth")),
|
||||
).toEqual([null, null]);
|
||||
});
|
||||
});
|
||||
@@ -34,6 +34,8 @@ import {
|
||||
} from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import { DictationGroup } from "@/features/editor/components/fixed-toolbar/groups/dictation-group";
|
||||
import { GenerateTitleGroup } from "@/features/editor/components/fixed-toolbar/groups/generate-title-group";
|
||||
import { usePageCollabProviders } from "@/features/editor/hooks/use-page-collab-providers";
|
||||
import { EditorProvidersContext } from "@/features/editor/contexts/editor-providers-context";
|
||||
|
||||
const MemoizedTitleEditor = React.memo(TitleEditor);
|
||||
const MemoizedPageEditor = React.memo(PageEditor);
|
||||
@@ -90,6 +92,10 @@ export function FullEditor({
|
||||
user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
|
||||
const isEditMode = currentPageEditMode === PageEditMode.Edit;
|
||||
|
||||
// Single shared Y.Doc + HocuspocusProvider for both the title and body
|
||||
// editors (title lives in the 'title' fragment of the same doc).
|
||||
const { ydoc, remote, providersReady } = usePageCollabProviders(pageId);
|
||||
|
||||
// Apply the user's saved preference only once on initial load, not on every
|
||||
// page navigation — so the mode sticks across navigations within a session.
|
||||
useEffect(() => {
|
||||
@@ -110,6 +116,9 @@ export function FullEditor({
|
||||
)}
|
||||
<MemoizedDeletedPageBanner slugId={slugId} />
|
||||
<MemoizedTemporaryNoteBanner slugId={slugId} />
|
||||
<EditorProvidersContext.Provider
|
||||
value={ydoc && remote ? { ydoc, remote, providersReady } : null}
|
||||
>
|
||||
<MemoizedTitleEditor
|
||||
pageId={pageId}
|
||||
slugId={slugId}
|
||||
@@ -132,6 +141,7 @@ export function FullEditor({
|
||||
content={content}
|
||||
canComment={canComment}
|
||||
/>
|
||||
</EditorProvidersContext.Provider>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
48
apps/client/src/features/editor/hooks/collab-token.test.ts
Normal file
48
apps/client/src/features/editor/hooks/collab-token.test.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
|
||||
// jwt-decode is mocked so we can drive the four token states deterministically
|
||||
// (decode success with a chosen exp, or a thrown decode error).
|
||||
const decodeMock = vi.hoisted(() => vi.fn());
|
||||
vi.mock("jwt-decode", () => ({
|
||||
jwtDecode: decodeMock,
|
||||
}));
|
||||
|
||||
import { collabTokenNeedsRefresh } from "./collab-token";
|
||||
|
||||
const NOW_MS = 1_000_000_000; // fixed "now" in ms (so NOW_MS/1000 seconds)
|
||||
|
||||
beforeEach(() => {
|
||||
decodeMock.mockReset();
|
||||
});
|
||||
|
||||
describe("collabTokenNeedsRefresh", () => {
|
||||
it("returns true when there is no token (fetch a fresh one)", () => {
|
||||
expect(collabTokenNeedsRefresh(undefined, NOW_MS)).toBe(true);
|
||||
// jwtDecode must not even be called for a missing token.
|
||||
expect(decodeMock).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("returns true when the token is malformed (jwtDecode throws)", () => {
|
||||
decodeMock.mockImplementation(() => {
|
||||
throw new Error("invalid token");
|
||||
});
|
||||
expect(collabTokenNeedsRefresh("garbage", NOW_MS)).toBe(true);
|
||||
});
|
||||
|
||||
it("returns false for a valid, not-yet-expired token (no reconnect)", () => {
|
||||
// exp is in the future relative to NOW.
|
||||
decodeMock.mockReturnValue({ exp: NOW_MS / 1000 + 60 });
|
||||
expect(collabTokenNeedsRefresh("good", NOW_MS)).toBe(false);
|
||||
});
|
||||
|
||||
it("returns true for a valid but expired token (refresh + reconnect)", () => {
|
||||
// exp is in the past relative to NOW.
|
||||
decodeMock.mockReturnValue({ exp: NOW_MS / 1000 - 60 });
|
||||
expect(collabTokenNeedsRefresh("expired", NOW_MS)).toBe(true);
|
||||
});
|
||||
|
||||
it("treats exp exactly equal to now as expired (>= boundary)", () => {
|
||||
decodeMock.mockReturnValue({ exp: NOW_MS / 1000 });
|
||||
expect(collabTokenNeedsRefresh("boundary", NOW_MS)).toBe(true);
|
||||
});
|
||||
});
|
||||
26
apps/client/src/features/editor/hooks/collab-token.ts
Normal file
26
apps/client/src/features/editor/hooks/collab-token.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { jwtDecode } from "jwt-decode";
|
||||
|
||||
/**
|
||||
* Decide whether a collab token must be refreshed before reconnecting after an
|
||||
* onAuthenticationFailed event. Pure and side-effect free so the four token
|
||||
* states can be unit-tested directly:
|
||||
* - no token -> true (fetch a fresh one and reconnect)
|
||||
* - undecodable/malformed -> true (jwtDecode throws -> refresh)
|
||||
* - valid, not expired -> false (token is still good; do NOT reconnect)
|
||||
* - valid, expired -> true (refresh + reconnect)
|
||||
*
|
||||
* `nowMs` is injectable for deterministic tests; it defaults to `Date.now()`.
|
||||
*/
|
||||
export function collabTokenNeedsRefresh(
|
||||
token: string | undefined,
|
||||
nowMs: number = Date.now(),
|
||||
): boolean {
|
||||
if (!token) return true;
|
||||
try {
|
||||
const payload = jwtDecode<{ exp: number }>(token);
|
||||
return nowMs / 1000 >= payload.exp;
|
||||
} catch {
|
||||
// malformed/undecodable token -> refresh
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -139,7 +139,7 @@ describe("useGeneratePageTitle", () => {
|
||||
);
|
||||
});
|
||||
|
||||
it("happy path: applies the title, refreshes cache, writes the field, broadcasts", async () => {
|
||||
it("happy path: applies the title, refreshes cache, broadcasts, and does NOT write the editor", async () => {
|
||||
const store = createStore();
|
||||
const titleEditor = makeTitleEditor();
|
||||
store.set(pageEditorAtom as never, makePageEditor("pageA"));
|
||||
@@ -157,9 +157,11 @@ describe("useGeneratePageTitle", () => {
|
||||
title: "Generated Title",
|
||||
});
|
||||
expect(updatePageDataMock).toHaveBeenCalledWith(PAGE_A);
|
||||
expect(titleEditor.commands.setContent).toHaveBeenCalledWith(
|
||||
"Generated Title",
|
||||
);
|
||||
// The title editor is bound to the Yjs `title` fragment; the server REST
|
||||
// update reseeds that fragment and the reseed reaches the bound editor on
|
||||
// its own. Writing here too would double/garble the title, so the hook must
|
||||
// NOT touch the editor (regression guard for the Yjs duplication trap).
|
||||
expect(titleEditor.commands.setContent).not.toHaveBeenCalled();
|
||||
expect(localEmitMock).toHaveBeenCalled();
|
||||
expect(emitMock).toHaveBeenCalled();
|
||||
expect(notificationsShowMock).toHaveBeenCalledWith(
|
||||
@@ -167,7 +169,7 @@ describe("useGeneratePageTitle", () => {
|
||||
);
|
||||
});
|
||||
|
||||
it("does NOT write the visible title field when the user navigated away during generation", async () => {
|
||||
it("keeps the DB write keyed by the captured pageId and still broadcasts after navigation", async () => {
|
||||
const store = createStore();
|
||||
const titleEditor = makeTitleEditor(); // persistent across navigation
|
||||
store.set(pageEditorAtom as never, makePageEditor("pageA"));
|
||||
@@ -203,55 +205,9 @@ describe("useGeneratePageTitle", () => {
|
||||
pageId: "pageA",
|
||||
title: "Generated Title",
|
||||
});
|
||||
// ...but we must NOT stamp page A's title into page B's visible field.
|
||||
// ...the hook never writes the editor regardless of navigation...
|
||||
expect(titleEditor.commands.setContent).not.toHaveBeenCalled();
|
||||
// The change is still broadcast to other clients.
|
||||
expect(emitMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does NOT write the visible title field when the title editor is focused", async () => {
|
||||
const store = createStore();
|
||||
const titleEditor = makeTitleEditor();
|
||||
store.set(pageEditorAtom as never, makePageEditor("pageA"));
|
||||
store.set(titleEditorAtom as never, titleEditor);
|
||||
|
||||
// Resolve generation under our control so we can mark the live title editor
|
||||
// as focused before the post-generation write runs.
|
||||
let resolveTitle!: (t: string) => void;
|
||||
generatePageTitleMock.mockReturnValue(
|
||||
new Promise<string>((res) => {
|
||||
resolveTitle = res;
|
||||
}),
|
||||
);
|
||||
updateTitleMock.mockResolvedValue(PAGE_A);
|
||||
const { result } = setup("pageA", store);
|
||||
|
||||
let pending!: Promise<void>;
|
||||
act(() => {
|
||||
pending = result.current.mutateAsync();
|
||||
});
|
||||
|
||||
// The user clicked into the title field while the model ran — overwriting it
|
||||
// now would clobber what they are actively typing.
|
||||
act(() => {
|
||||
(titleEditor as { isFocused: boolean }).isFocused = true;
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
resolveTitle("Generated Title");
|
||||
await pending;
|
||||
});
|
||||
|
||||
// The DB write still persists the value...
|
||||
expect(updateTitleMock).toHaveBeenCalledWith({
|
||||
pageId: "pageA",
|
||||
title: "Generated Title",
|
||||
});
|
||||
expect(updatePageDataMock).toHaveBeenCalledWith(PAGE_A);
|
||||
// ...but the visible field is left alone while it is focused.
|
||||
expect(titleEditor.commands.setContent).not.toHaveBeenCalled();
|
||||
// The change is still broadcast to other clients.
|
||||
expect(localEmitMock).toHaveBeenCalled();
|
||||
// ...and the change is still broadcast to other clients.
|
||||
expect(emitMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
import { useRef } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { htmlToMarkdown } from "@docmost/editor-ext";
|
||||
import {
|
||||
pageEditorAtom,
|
||||
titleEditorAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import {
|
||||
updatePageData,
|
||||
useUpdateTitlePageMutation,
|
||||
@@ -33,18 +29,9 @@ const MAX_CONTENT_CHARS = 20000;
|
||||
export function useGeneratePageTitle(pageId: string) {
|
||||
const { t } = useTranslation();
|
||||
const pageEditor = useAtomValue(pageEditorAtom);
|
||||
const titleEditor = useAtomValue(titleEditorAtom);
|
||||
const { mutateAsync: updateTitle } = useUpdateTitlePageMutation();
|
||||
const emit = useQueryEmit();
|
||||
|
||||
// The page/title editors come from GLOBAL atoms that re-point when the user
|
||||
// navigates to another page. The mutation below awaits the model for 1-3s, and
|
||||
// its closure captures the editors from the render that started it. Keep a live
|
||||
// reference so the post-generation write targets whatever page is on screen
|
||||
// *now*, not the page the generation was started from.
|
||||
const editorsRef = useRef({ pageEditor, titleEditor });
|
||||
editorsRef.current = { pageEditor, titleEditor };
|
||||
|
||||
return useMutation<void, Error, void>({
|
||||
mutationFn: async () => {
|
||||
if (!pageEditor || pageEditor.isDestroyed) return;
|
||||
@@ -70,33 +57,15 @@ export function useGeneratePageTitle(pageId: string) {
|
||||
const page = await updateTitle({ pageId, title }); // POST /pages/update
|
||||
updatePageData(page); // refresh the react-query cache
|
||||
|
||||
// Reflect the new title in the field immediately. The button lives in the
|
||||
// byline, so the title editor is not focused — setContent is safe and stays
|
||||
// undoable through its History extension (Ctrl/Cmd+Z reverts the change).
|
||||
//
|
||||
// Guard against navigation during generation: if the user switched pages
|
||||
// while the model ran, the (persistent) title editor now shows ANOTHER
|
||||
// page, so writing here would drop page A's title into page B's visible
|
||||
// field. page-editor.tsx stamps the live page editor with its pageId
|
||||
// (`editor.storage.pageId`), mirroring TitleEditor's `activePageId !==
|
||||
// pageId` guard — bail the visible write unless that live editor still
|
||||
// belongs to the page this title was generated for. The DB write above is
|
||||
// already correct (keyed by the captured `pageId`), and the broadcast below
|
||||
// still propagates page A's change to other clients.
|
||||
const livePageEditor = editorsRef.current.pageEditor;
|
||||
const liveTitleEditor = editorsRef.current.titleEditor;
|
||||
// `storage.pageId` is stamped untyped in page-editor.tsx's onCreate.
|
||||
const livePageId = (livePageEditor?.storage as { pageId?: string })
|
||||
?.pageId;
|
||||
const stillOnPage = livePageId === pageId;
|
||||
if (
|
||||
stillOnPage &&
|
||||
liveTitleEditor &&
|
||||
!liveTitleEditor.isDestroyed &&
|
||||
!liveTitleEditor.isFocused
|
||||
) {
|
||||
liveTitleEditor.commands.setContent(page.title);
|
||||
}
|
||||
// Do NOT write the title into the editor here. The title editor is bound to
|
||||
// the Yjs `title` fragment and Yjs is the source of truth. The server REST
|
||||
// /pages/update reseeds that fragment (writePageTitle → writeTitleFragment,
|
||||
// a full clear+replace) and the reseed reaches the bound title editor on
|
||||
// its own as a remote provider update. The old REST-era setContent here
|
||||
// would race that reseed and double/garble the title (the "Yjs duplication
|
||||
// trap"), so it is intentionally omitted. The DB write above is keyed by
|
||||
// the captured `pageId`, so it stays correct even if the user navigated
|
||||
// away during generation.
|
||||
|
||||
// Broadcast to other clients, mirroring TitleEditor.saveTitle's event shape.
|
||||
const event: UpdateEvent = {
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { IndexeddbPersistence } from "y-indexeddb";
|
||||
import * as Y from "yjs";
|
||||
import {
|
||||
HocuspocusProvider,
|
||||
onStatusParameters,
|
||||
WebSocketStatus,
|
||||
HocuspocusProviderWebsocket,
|
||||
onSyncedParameters,
|
||||
onStatelessParameters,
|
||||
} from "@hocuspocus/provider";
|
||||
import { useAtom, useSetAtom } from "jotai";
|
||||
import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
|
||||
import {
|
||||
isLocalSyncedAtom,
|
||||
isRemoteSyncedAtom,
|
||||
yjsConnectionStatusAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms";
|
||||
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
||||
import { useDocumentVisibility } from "@mantine/hooks";
|
||||
import { useIdle } from "@/hooks/use-idle.ts";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { FIVE_MINUTES } from "@/lib/constants.ts";
|
||||
import { collabTokenNeedsRefresh } from "@/features/editor/hooks/collab-token";
|
||||
import { pageYdocName } from "@/features/editor/page-ydoc-name";
|
||||
import { pageKeys } from "@/features/page/queries/page-query";
|
||||
|
||||
export interface PageCollabProviders {
|
||||
ydoc: Y.Doc | null;
|
||||
remote: HocuspocusProvider | null;
|
||||
socket: HocuspocusProviderWebsocket | null;
|
||||
providersReady: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Owns the full collaboration provider lifecycle for a page so that the title
|
||||
* and body editors can share a single Y.Doc + HocuspocusProvider. The behavior
|
||||
* is relocated verbatim from page-editor.tsx: it creates the providers once per
|
||||
* pageId, connects/disconnects on idle/visibility, attaches each render,
|
||||
* destroys on unmount, refreshes the collab token on auth failure, and applies
|
||||
* the onStateless 'page.updated' cache update.
|
||||
*/
|
||||
export function usePageCollabProviders(pageId: string): PageCollabProviders {
|
||||
const collaborationURL = useCollaborationUrl();
|
||||
const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
|
||||
yjsConnectionStatusAtom,
|
||||
);
|
||||
const setIsLocalSyncedAtom = useSetAtom(isLocalSyncedAtom);
|
||||
const setIsRemoteSyncedAtom = useSetAtom(isRemoteSyncedAtom);
|
||||
const { data: collabQuery, refetch: refetchCollabToken } = useCollabToken();
|
||||
// The provider-creating effect runs only once per pageId, so any token read
|
||||
// inside its handlers would be captured STALE (the old token at first render).
|
||||
// Mirror the latest token into a ref the auth-failure handler can read live.
|
||||
const collabTokenRef = useRef<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
collabTokenRef.current = collabQuery?.token;
|
||||
}, [collabQuery?.token]);
|
||||
const { isIdle, resetIdle } = useIdle(FIVE_MINUTES, { initialState: false });
|
||||
const documentState = useDocumentVisibility();
|
||||
const { pageSlug } = useParams();
|
||||
const slugId = extractPageSlugId(pageSlug);
|
||||
|
||||
// Providers only created once per pageId
|
||||
const providersRef = useRef<{
|
||||
ydoc: Y.Doc;
|
||||
local: IndexeddbPersistence;
|
||||
remote: HocuspocusProvider;
|
||||
socket: HocuspocusProviderWebsocket;
|
||||
} | null>(null);
|
||||
const [providersReady, setProvidersReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!providersRef.current) {
|
||||
const documentName = pageYdocName(pageId);
|
||||
const ydoc = new Y.Doc();
|
||||
const local = new IndexeddbPersistence(documentName, ydoc);
|
||||
const socket = new HocuspocusProviderWebsocket({
|
||||
url: collaborationURL,
|
||||
});
|
||||
const onLocalSyncedHandler = () => {
|
||||
setIsLocalSyncedAtom(true);
|
||||
};
|
||||
const onStatusHandler = (event: onStatusParameters) => {
|
||||
setYjsConnectionStatus(event.status);
|
||||
};
|
||||
const onSyncedHandler = (event: onSyncedParameters) => {
|
||||
setIsRemoteSyncedAtom(event.state);
|
||||
};
|
||||
const onStatelessHandler = ({ payload }: onStatelessParameters) => {
|
||||
try {
|
||||
const message = JSON.parse(payload);
|
||||
if (message?.type !== "page.updated" || !message.updatedAt) return;
|
||||
const pageData = queryClient.getQueryData<IPage>(
|
||||
pageKeys.detail(slugId),
|
||||
);
|
||||
if (pageData) {
|
||||
queryClient.setQueryData(pageKeys.detail(slugId), {
|
||||
...pageData,
|
||||
updatedAt: message.updatedAt,
|
||||
...(message.lastUpdatedBy && {
|
||||
lastUpdatedBy: message.lastUpdatedBy,
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
// ignore unrelated stateless messages
|
||||
}
|
||||
};
|
||||
const onAuthenticationFailedHandler = () => {
|
||||
// Read the token from the ref, not the closed-over `collabQuery`: this
|
||||
// handler is created once and would otherwise decode a stale token after
|
||||
// a refetch. A missing/malformed token must NOT crash the handler —
|
||||
// jwtDecode(undefined) throws — so treat any decode failure as "needs
|
||||
// refresh" and proceed to refetch + reconnect instead of getting stuck.
|
||||
if (!collabTokenNeedsRefresh(collabTokenRef.current)) return;
|
||||
refetchCollabToken().then((result) => {
|
||||
if (result.data?.token) {
|
||||
socket.disconnect();
|
||||
setTimeout(() => {
|
||||
remote.configuration.token = result.data.token;
|
||||
socket.connect();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
};
|
||||
const remote = new HocuspocusProvider({
|
||||
websocketProvider: socket,
|
||||
name: documentName,
|
||||
document: ydoc,
|
||||
token: collabQuery?.token,
|
||||
onAuthenticationFailed: onAuthenticationFailedHandler,
|
||||
onStatus: onStatusHandler,
|
||||
onSynced: onSyncedHandler,
|
||||
onStateless: onStatelessHandler,
|
||||
});
|
||||
|
||||
local.on("synced", onLocalSyncedHandler);
|
||||
providersRef.current = { ydoc, socket, local, remote };
|
||||
setProvidersReady(true);
|
||||
} else {
|
||||
setProvidersReady(true);
|
||||
}
|
||||
// Only destroy on final unmount
|
||||
return () => {
|
||||
providersRef.current?.socket.destroy();
|
||||
providersRef.current?.remote.destroy();
|
||||
providersRef.current?.local.destroy();
|
||||
providersRef.current = null;
|
||||
// Reset shared sync state on page change/unmount.
|
||||
setIsLocalSyncedAtom(false);
|
||||
setIsRemoteSyncedAtom(false);
|
||||
};
|
||||
}, [pageId]);
|
||||
|
||||
// Only connect/disconnect on tab/idle, not destroy
|
||||
useEffect(() => {
|
||||
if (!providersReady || !providersRef.current) return;
|
||||
const socket = providersRef.current.socket;
|
||||
|
||||
if (
|
||||
isIdle &&
|
||||
documentState === "hidden" &&
|
||||
yjsConnectionStatus === WebSocketStatus.Connected
|
||||
) {
|
||||
socket.disconnect();
|
||||
return;
|
||||
}
|
||||
if (
|
||||
documentState === "visible" &&
|
||||
yjsConnectionStatus === WebSocketStatus.Disconnected
|
||||
) {
|
||||
resetIdle();
|
||||
socket.connect();
|
||||
}
|
||||
}, [isIdle, documentState, providersReady, resetIdle]);
|
||||
|
||||
// Attach here, to make sure the connection gets properly established
|
||||
providersRef.current?.remote.attach();
|
||||
|
||||
return {
|
||||
ydoc: providersRef.current?.ydoc ?? null,
|
||||
remote: providersRef.current?.remote ?? null,
|
||||
socket: providersRef.current?.socket ?? null,
|
||||
providersReady,
|
||||
};
|
||||
}
|
||||
@@ -6,16 +6,7 @@ import React, {
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { IndexeddbPersistence } from "y-indexeddb";
|
||||
import * as Y from "yjs";
|
||||
import {
|
||||
HocuspocusProvider,
|
||||
onStatusParameters,
|
||||
WebSocketStatus,
|
||||
HocuspocusProviderWebsocket,
|
||||
onSyncedParameters,
|
||||
onStatelessParameters,
|
||||
} from "@hocuspocus/provider";
|
||||
import { WebSocketStatus } from "@hocuspocus/provider";
|
||||
import {
|
||||
Editor,
|
||||
EditorContent,
|
||||
@@ -28,13 +19,15 @@ import {
|
||||
mainExtensions,
|
||||
} from "@/features/editor/extensions/extensions";
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import {
|
||||
currentPageEditModeAtom,
|
||||
isLocalSyncedAtom,
|
||||
isRemoteSyncedAtom,
|
||||
pageEditorAtom,
|
||||
yjsConnectionStatusAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms";
|
||||
import { useEditorProviders } from "@/features/editor/contexts/editor-providers-context";
|
||||
import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
|
||||
import {
|
||||
activeCommentIdAtom,
|
||||
@@ -58,10 +51,8 @@ import {
|
||||
} from "@/features/editor/components/common/editor-paste-handler.tsx";
|
||||
import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu-lazy";
|
||||
import DrawioMenu from "./components/drawio/drawio-menu";
|
||||
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
||||
import SearchAndReplaceDialog from "@/features/editor/components/search-and-replace/search-and-replace-dialog.tsx";
|
||||
import { useDebouncedCallback, useDocumentVisibility } from "@mantine/hooks";
|
||||
import { useIdle } from "@/hooks/use-idle.ts";
|
||||
import { useDebouncedCallback } from "@mantine/hooks";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
import { useParams } from "react-router-dom";
|
||||
@@ -72,9 +63,7 @@ import {
|
||||
GitmostInsertRecordingResult,
|
||||
gitmostInsertRecordingIntoEditor,
|
||||
} from "@/features/editor/gitmost/gitmost-recording.ts";
|
||||
import { FIVE_MINUTES } from "@/lib/constants.ts";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
import { jwtDecode } from "jwt-decode";
|
||||
import { searchSpotlight } from "@/features/search/constants.ts";
|
||||
import { useEditorScroll } from "./hooks/use-editor-scroll";
|
||||
import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
|
||||
@@ -84,6 +73,10 @@ import { PageEmbedLookupProvider } from "@/features/editor/components/page-embed
|
||||
import { PageEmbedAncestryProvider } from "@/features/editor/components/page-embed/page-embed-ancestry-context";
|
||||
import PageEmbedPicker from "@/features/editor/components/page-embed/page-embed-picker";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
isBodyEditable,
|
||||
isCollabSynced,
|
||||
} from "@/features/editor/editor-sync-state";
|
||||
|
||||
interface PageEditorProps {
|
||||
pageId: string;
|
||||
@@ -99,7 +92,6 @@ export default function PageEditor({
|
||||
canComment,
|
||||
}: PageEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const collaborationURL = useCollaborationUrl();
|
||||
const isComponentMounted = useRef(false);
|
||||
const editorRef = useRef<Editor | null>(null);
|
||||
|
||||
@@ -113,22 +105,10 @@ export default function PageEditor({
|
||||
const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
|
||||
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
|
||||
const [showReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
|
||||
const [isLocalSynced, setIsLocalSynced] = useState(false);
|
||||
const [isRemoteSynced, setIsRemoteSynced] = useState(false);
|
||||
const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
|
||||
yjsConnectionStatusAtom,
|
||||
);
|
||||
const menuContainerRef = useRef(null);
|
||||
const { data: collabQuery, refetch: refetchCollabToken } = useCollabToken();
|
||||
// Always holds the latest collab token. The provider effect below runs once
|
||||
// per pageId, so a handler created inside it would otherwise close over a
|
||||
// stale `collabQuery`. Reading the ref gives the current token instead.
|
||||
const collabTokenRef = useRef<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
collabTokenRef.current = collabQuery?.token;
|
||||
}, [collabQuery?.token]);
|
||||
const { isIdle, resetIdle } = useIdle(FIVE_MINUTES, { initialState: false });
|
||||
const documentState = useDocumentVisibility();
|
||||
const { pageSlug } = useParams();
|
||||
const slugId = extractPageSlugId(pageSlug);
|
||||
const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
|
||||
@@ -137,141 +117,27 @@ export default function PageEditor({
|
||||
[isComponentMounted],
|
||||
);
|
||||
const { handleScrollTo } = useEditorScroll({ canScroll });
|
||||
// Providers only created once per pageId
|
||||
const providersRef = useRef<{
|
||||
local: IndexeddbPersistence;
|
||||
remote: HocuspocusProvider;
|
||||
socket: HocuspocusProviderWebsocket;
|
||||
} | null>(null);
|
||||
const [providersReady, setProvidersReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!providersRef.current) {
|
||||
const documentName = `page.${pageId}`;
|
||||
const ydoc = new Y.Doc();
|
||||
const local = new IndexeddbPersistence(documentName, ydoc);
|
||||
const socket = new HocuspocusProviderWebsocket({
|
||||
url: collaborationURL,
|
||||
});
|
||||
const onLocalSyncedHandler = () => {
|
||||
setIsLocalSynced(true);
|
||||
};
|
||||
const onStatusHandler = (event: onStatusParameters) => {
|
||||
setYjsConnectionStatus(event.status);
|
||||
};
|
||||
const onSyncedHandler = (event: onSyncedParameters) => {
|
||||
setIsRemoteSynced(event.state);
|
||||
};
|
||||
const onStatelessHandler = ({ payload }: onStatelessParameters) => {
|
||||
try {
|
||||
const message = JSON.parse(payload);
|
||||
if (message?.type !== "page.updated" || !message.updatedAt) return;
|
||||
const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);
|
||||
if (pageData) {
|
||||
queryClient.setQueryData(["pages", slugId], {
|
||||
...pageData,
|
||||
updatedAt: message.updatedAt,
|
||||
...(message.lastUpdatedBy && {
|
||||
lastUpdatedBy: message.lastUpdatedBy,
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
// ignore unrelated stateless messages
|
||||
}
|
||||
};
|
||||
const onAuthenticationFailedHandler = () => {
|
||||
// Read the latest token via the ref (the closure-captured `collabQuery`
|
||||
// may be stale). Guard the decode: a missing or unparseable token must
|
||||
// not throw "Invalid token specified" and should trigger a refresh so
|
||||
// the editor reconnects even when the initial token fetch failed.
|
||||
const token = collabTokenRef.current;
|
||||
let needsRefresh = true; // no/unparseable token -> fetch a fresh one and reconnect
|
||||
if (token) {
|
||||
try {
|
||||
// A token that decodes but lacks a numeric `exp` must be treated as
|
||||
// expired (`Date.now()/1000 >= undefined` is `false`, which would
|
||||
// otherwise skip the reconnect), so refresh on any missing/non-number exp.
|
||||
const exp = jwtDecode<{ exp?: number }>(token).exp;
|
||||
needsRefresh = typeof exp !== "number" || Date.now() / 1000 >= exp;
|
||||
} catch {
|
||||
needsRefresh = true;
|
||||
}
|
||||
}
|
||||
if (!needsRefresh) return;
|
||||
refetchCollabToken().then((result) => {
|
||||
if (result.data?.token) {
|
||||
socket.disconnect();
|
||||
setTimeout(() => {
|
||||
remote.configuration.token = result.data.token;
|
||||
socket.connect();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
};
|
||||
const remote = new HocuspocusProvider({
|
||||
websocketProvider: socket,
|
||||
name: documentName,
|
||||
document: ydoc,
|
||||
token: collabQuery?.token,
|
||||
onAuthenticationFailed: onAuthenticationFailedHandler,
|
||||
onStatus: onStatusHandler,
|
||||
onSynced: onSyncedHandler,
|
||||
onStateless: onStatelessHandler,
|
||||
});
|
||||
|
||||
local.on("synced", onLocalSyncedHandler);
|
||||
providersRef.current = { socket, local, remote };
|
||||
setProvidersReady(true);
|
||||
} else {
|
||||
setProvidersReady(true);
|
||||
}
|
||||
// Only destroy on final unmount
|
||||
return () => {
|
||||
providersRef.current?.socket.destroy();
|
||||
providersRef.current?.remote.destroy();
|
||||
providersRef.current?.local.destroy();
|
||||
providersRef.current = null;
|
||||
};
|
||||
}, [pageId]);
|
||||
|
||||
// Only connect/disconnect on tab/idle, not destroy
|
||||
useEffect(() => {
|
||||
if (!providersReady || !providersRef.current) return;
|
||||
const socket = providersRef.current.socket;
|
||||
|
||||
if (
|
||||
isIdle &&
|
||||
documentState === "hidden" &&
|
||||
yjsConnectionStatus === WebSocketStatus.Connected
|
||||
) {
|
||||
socket.disconnect();
|
||||
return;
|
||||
}
|
||||
if (
|
||||
documentState === "visible" &&
|
||||
yjsConnectionStatus === WebSocketStatus.Disconnected
|
||||
) {
|
||||
resetIdle();
|
||||
socket.connect();
|
||||
}
|
||||
}, [isIdle, documentState, providersReady, resetIdle]);
|
||||
|
||||
// Attach here, to make sure the connection gets properly established
|
||||
providersRef.current?.remote.attach();
|
||||
// Shared providers + Y.Doc lifted into full-editor via context. The provider
|
||||
// lifecycle (creation, idle/visibility connect, attach, destroy, token
|
||||
// refresh) lives in usePageCollabProviders. Null-safe when rendered without
|
||||
// the context (defensive) — in practice full-editor always provides it.
|
||||
const editorProviders = useEditorProviders();
|
||||
const remote = editorProviders?.remote ?? null;
|
||||
const providersReady = editorProviders?.providersReady ?? false;
|
||||
const isLocalSynced = useAtomValue(isLocalSyncedAtom);
|
||||
const isRemoteSynced = useAtomValue(isRemoteSyncedAtom);
|
||||
|
||||
const extensions = useMemo(() => {
|
||||
if (!providersReady || !providersRef.current || !currentUser?.user) {
|
||||
if (!providersReady || !remote || !currentUser?.user) {
|
||||
return mainExtensions;
|
||||
}
|
||||
|
||||
const remoteProvider = providersRef.current.remote;
|
||||
|
||||
return [
|
||||
...mainExtensions,
|
||||
...collabExtensions(remoteProvider, currentUser?.user),
|
||||
...collabExtensions(remote, currentUser?.user),
|
||||
];
|
||||
}, [providersReady, currentUser?.user]);
|
||||
}, [providersReady, remote, currentUser?.user]);
|
||||
|
||||
const editor = useEditor(
|
||||
{
|
||||
@@ -440,6 +306,9 @@ export default function PageEditor({
|
||||
|
||||
const isSynced = isLocalSynced && isRemoteSynced;
|
||||
|
||||
const hasConnectedOnceRef = useRef(false);
|
||||
const [showStatic, setShowStatic] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
if (yjsConnectionStatus === WebSocketStatus.Connecting || !isSynced) {
|
||||
@@ -451,17 +320,21 @@ export default function PageEditor({
|
||||
}, [yjsConnectionStatus, isSynced]);
|
||||
useEffect(() => {
|
||||
if (!editor) return;
|
||||
editor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
|
||||
}, [currentPageEditMode, editor, editable]);
|
||||
|
||||
const hasConnectedOnceRef = useRef(false);
|
||||
const [showStatic, setShowStatic] = useState(true);
|
||||
// Keep the body read-only until the collab doc has synced (showStatic), so
|
||||
// early keystrokes on a freshly created page can't be lost (#218).
|
||||
editor.setEditable(
|
||||
isBodyEditable({
|
||||
editable,
|
||||
inEditMode: currentPageEditMode === PageEditMode.Edit,
|
||||
showStatic,
|
||||
}),
|
||||
);
|
||||
}, [currentPageEditMode, editor, editable, showStatic]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!hasConnectedOnceRef.current &&
|
||||
yjsConnectionStatus === WebSocketStatus.Connected &&
|
||||
isSynced
|
||||
isCollabSynced(yjsConnectionStatus, isSynced)
|
||||
) {
|
||||
hasConnectedOnceRef.current = true;
|
||||
setShowStatic(false);
|
||||
@@ -473,6 +346,31 @@ export default function PageEditor({
|
||||
<PageEmbedLookupProvider>
|
||||
<PageEmbedAncestryProvider hostPageId={pageId}>
|
||||
{showStatic ? (
|
||||
<div style={{ position: "relative" }}>
|
||||
{/* Surface the pre-sync read-only window so edits typed before the
|
||||
collab provider connects aren't silently swallowed (#218). Shown
|
||||
only when the user is otherwise allowed to edit. */}
|
||||
{editable && currentPageEditMode === PageEditMode.Edit && (
|
||||
<div
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
className="print-hide"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
zIndex: 2,
|
||||
padding: "2px 8px",
|
||||
fontSize: "12px",
|
||||
borderRadius: "4px",
|
||||
background: "var(--mantine-color-gray-light)",
|
||||
color: "var(--mantine-color-dimmed)",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
{t("Connecting… (read-only)")}
|
||||
</div>
|
||||
)}
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
@@ -484,6 +382,7 @@ export default function PageEditor({
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editor-container" style={{ position: "relative" }}>
|
||||
<div ref={menuContainerRef}>
|
||||
@@ -513,7 +412,7 @@ export default function PageEditor({
|
||||
{editor &&
|
||||
!editorIsEditable &&
|
||||
(editable || canComment) &&
|
||||
providersRef.current && <ReadonlyBubbleMenu editor={editor} />}
|
||||
remote && <ReadonlyBubbleMenu editor={editor} />}
|
||||
{showCommentPopup && (
|
||||
<CommentDialog editor={editor} pageId={pageId} />
|
||||
)}
|
||||
|
||||
14
apps/client/src/features/editor/page-ydoc-name.ts
Normal file
14
apps/client/src/features/editor/page-ydoc-name.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Single source of truth for the IndexedDB / Hocuspocus document name of a
|
||||
* page's collaborative Yjs doc.
|
||||
*
|
||||
* The `page.<id>` convention is shared knowledge across three call sites: the
|
||||
* live editor providers (`use-page-collab-providers`), the offline warm path
|
||||
* (`make-offline`), and the offline purge (`clear-offline-cache`, which matches
|
||||
* the databases to delete by this prefix). Centralizing it here stops those
|
||||
* sites from silently drifting apart.
|
||||
*/
|
||||
export const PAGE_YDOC_NAME_PREFIX = "page.";
|
||||
|
||||
export const pageYdocName = (pageId: string): string =>
|
||||
`${PAGE_YDOC_NAME_PREFIX}${pageId}`;
|
||||
33
apps/client/src/features/editor/title-collab.test.ts
Normal file
33
apps/client/src/features/editor/title-collab.test.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
|
||||
// isChangeOrigin is mocked so we can simulate local vs remote/collab-origin
|
||||
// transactions without constructing a real ProseMirror/Yjs transaction.
|
||||
const isChangeOriginMock = vi.hoisted(() => vi.fn());
|
||||
vi.mock("@tiptap/extension-collaboration", () => ({
|
||||
isChangeOrigin: isChangeOriginMock,
|
||||
}));
|
||||
|
||||
import { shouldPropagateTitleChange } from "./title-collab";
|
||||
|
||||
beforeEach(() => {
|
||||
isChangeOriginMock.mockReset();
|
||||
});
|
||||
|
||||
describe("shouldPropagateTitleChange", () => {
|
||||
it("propagates a genuine local edit (isChangeOrigin false)", () => {
|
||||
isChangeOriginMock.mockReturnValue(false);
|
||||
expect(shouldPropagateTitleChange({ local: true })).toBe(true);
|
||||
expect(isChangeOriginMock).toHaveBeenCalledWith({ local: true });
|
||||
});
|
||||
|
||||
it("skips a remote/collab-origin update (isChangeOrigin true)", () => {
|
||||
isChangeOriginMock.mockReturnValue(true);
|
||||
expect(shouldPropagateTitleChange({ remote: true })).toBe(false);
|
||||
});
|
||||
|
||||
it("propagates when there is no transaction (treated as local)", () => {
|
||||
expect(shouldPropagateTitleChange(undefined)).toBe(true);
|
||||
// isChangeOrigin must not be called for a missing transaction.
|
||||
expect(isChangeOriginMock).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
19
apps/client/src/features/editor/title-collab.ts
Normal file
19
apps/client/src/features/editor/title-collab.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { isChangeOrigin } from "@tiptap/extension-collaboration";
|
||||
|
||||
/**
|
||||
* Whether a TitleEditor `onUpdate` should drive URL + tree propagation.
|
||||
*
|
||||
* Only genuine LOCAL edits propagate. Remote/collab-origin Yjs updates
|
||||
* (detected via `isChangeOrigin`) are skipped so a remote title change is not
|
||||
* re-broadcast back, which would create a feedback loop. A missing transaction
|
||||
* is treated as a local edit (propagate).
|
||||
*
|
||||
* Extracted as a pure helper so the skip decision is unit-testable without
|
||||
* mounting the full collaborative editor.
|
||||
*/
|
||||
export function shouldPropagateTitleChange(transaction: unknown): boolean {
|
||||
return !(
|
||||
transaction &&
|
||||
isChangeOrigin(transaction as Parameters<typeof isChangeOrigin>[0])
|
||||
);
|
||||
}
|
||||
87
apps/client/src/features/editor/title-editor.test.tsx
Normal file
87
apps/client/src/features/editor/title-editor.test.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
|
||||
// Drive the fallback-vs-collaborative switch (titleReady = providersReady &&
|
||||
// !!ydoc) by controlling what the editor-providers context returns.
|
||||
const editorProvidersValue: { ydoc: unknown; providersReady: boolean } = {
|
||||
ydoc: null,
|
||||
providersReady: false,
|
||||
};
|
||||
vi.mock("@/features/editor/contexts/editor-providers-context", () => ({
|
||||
useEditorProviders: () => editorProvidersValue,
|
||||
}));
|
||||
|
||||
// Mock the tiptap React bindings so the test does not mount a real editor:
|
||||
// useEditor returns a minimal stub and EditorContent renders a marker.
|
||||
vi.mock("@tiptap/react", () => ({
|
||||
useEditor: () => ({
|
||||
isInitialized: true,
|
||||
commands: { focus: vi.fn() },
|
||||
setEditable: vi.fn(),
|
||||
getText: () => "",
|
||||
}),
|
||||
EditorContent: () => <div data-testid="collab-editor" />,
|
||||
}));
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({ t: (k: string) => k }),
|
||||
}));
|
||||
|
||||
const navigateMock = vi.fn();
|
||||
vi.mock("react-router-dom", () => ({
|
||||
useNavigate: () => navigateMock,
|
||||
}));
|
||||
|
||||
vi.mock("@/features/websocket/use-query-emit.ts", () => ({
|
||||
useQueryEmit: () => vi.fn(),
|
||||
}));
|
||||
|
||||
// page-query transitively imports @/main.tsx; mock it to a pure stub.
|
||||
vi.mock("@/features/page/queries/page-query", () => ({
|
||||
updatePageData: vi.fn(),
|
||||
}));
|
||||
vi.mock("@/main.tsx", () => ({
|
||||
queryClient: { getQueryData: vi.fn(), setQueryData: vi.fn() },
|
||||
}));
|
||||
|
||||
import { TitleEditor } from "./title-editor";
|
||||
|
||||
const baseProps = {
|
||||
pageId: "p1",
|
||||
slugId: "slug-1",
|
||||
title: "My Page Title",
|
||||
spaceSlug: "space",
|
||||
editable: true,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
navigateMock.mockReset();
|
||||
editorProvidersValue.ydoc = null;
|
||||
editorProvidersValue.providersReady = false;
|
||||
});
|
||||
|
||||
describe("TitleEditor fallback vs collaborative switch", () => {
|
||||
it("renders a static <h1> with the title before the shared doc is ready", () => {
|
||||
editorProvidersValue.ydoc = null;
|
||||
editorProvidersValue.providersReady = false;
|
||||
|
||||
render(<TitleEditor {...baseProps} />);
|
||||
|
||||
const heading = screen.getByRole("heading", { level: 1 });
|
||||
expect(heading.textContent).toBe("My Page Title");
|
||||
// The collaborative editor must NOT mount until the doc is ready.
|
||||
expect(screen.queryByTestId("collab-editor")).toBeNull();
|
||||
});
|
||||
|
||||
it("renders the collaborative editor once the shared doc is ready", () => {
|
||||
editorProvidersValue.ydoc = {}; // truthy shared doc
|
||||
editorProvidersValue.providersReady = true;
|
||||
|
||||
render(<TitleEditor {...baseProps} />);
|
||||
|
||||
expect(screen.getByTestId("collab-editor")).toBeDefined();
|
||||
// The static fallback <h1> is gone — Yjs is the single source of truth and
|
||||
// the prop is never seeded into the collaborative editor.
|
||||
expect(screen.queryByRole("heading", { level: 1 })).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
import "@/features/editor/styles/index.css";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import { Document } from "@tiptap/extension-document";
|
||||
import { Heading } from "@tiptap/extension-heading";
|
||||
@@ -11,14 +11,11 @@ import {
|
||||
pageEditorAtom,
|
||||
titleEditorAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms";
|
||||
import {
|
||||
updatePageData,
|
||||
useUpdateTitlePageMutation,
|
||||
} from "@/features/page/queries/page-query";
|
||||
import { pageKeys, updatePageData } from "@/features/page/queries/page-query";
|
||||
import { useDebouncedCallback, getHotkeyHandler } from "@mantine/hooks";
|
||||
import { useAtom } from "jotai";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
|
||||
import { History } from "@tiptap/extension-history";
|
||||
import { Collaboration } from "@tiptap/extension-collaboration";
|
||||
import { shouldPropagateTitleChange } from "@/features/editor/title-collab";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -28,6 +25,9 @@ import localEmitter from "@/lib/local-emitter.ts";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
import { searchSpotlight } from "@/features/search/constants.ts";
|
||||
import { platformModifierKey } from "@/lib";
|
||||
import { useEditorProviders } from "@/features/editor/contexts/editor-providers-context";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
|
||||
export interface TitleEditorProps {
|
||||
pageId: string;
|
||||
@@ -45,16 +45,26 @@ export function TitleEditor({
|
||||
editable,
|
||||
}: TitleEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const { mutateAsync: updateTitlePageMutationAsync } =
|
||||
useUpdateTitlePageMutation();
|
||||
const pageEditor = useAtomValue(pageEditorAtom);
|
||||
const [, setTitleEditor] = useAtom(titleEditorAtom);
|
||||
const emit = useQueryEmit();
|
||||
const navigate = useNavigate();
|
||||
const [activePageId, setActivePageId] = useState(pageId);
|
||||
const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
|
||||
|
||||
const titleEditor = useEditor({
|
||||
// Shared Y.Doc (title lives in its own 'title' fragment of the same doc as
|
||||
// the body). Yjs is the source of truth for the title content.
|
||||
const editorProviders = useEditorProviders();
|
||||
const ydoc = editorProviders?.ydoc ?? null;
|
||||
const providersReady = editorProviders?.providersReady ?? false;
|
||||
|
||||
// Until the shared doc is ready, the collaborative editor binds nothing and
|
||||
// would render an empty heading until the Yjs 'title' fragment hydrates. Show
|
||||
// a non-editable static <h1> with the `title` prop in the meantime. The prop
|
||||
// is NEVER fed into the collaborative editor (Yjs stays the single source of
|
||||
// truth — seeding it would duplicate the title).
|
||||
const titleReady = providersReady && !!ydoc;
|
||||
|
||||
const titleEditor = useEditor(
|
||||
{
|
||||
extensions: [
|
||||
Document.extend({
|
||||
content: "heading",
|
||||
@@ -67,23 +77,28 @@ export function TitleEditor({
|
||||
placeholder: t("Untitled"),
|
||||
showOnlyWhenEditable: false,
|
||||
}),
|
||||
History.configure({
|
||||
depth: 20,
|
||||
}),
|
||||
// Bind the title to the dedicated 'title' fragment of the shared doc.
|
||||
// Collaboration also manages undo/redo, so the History extension is
|
||||
// intentionally omitted (it would conflict with Yjs). When the doc is
|
||||
// not ready yet the editor renders empty until the doc arrives.
|
||||
...(ydoc
|
||||
? [Collaboration.configure({ document: ydoc, field: "title" })]
|
||||
: []),
|
||||
EmojiCommand,
|
||||
],
|
||||
onCreate({ editor }) {
|
||||
if (editor) {
|
||||
// @ts-ignore
|
||||
setTitleEditor(editor);
|
||||
setActivePageId(pageId);
|
||||
}
|
||||
},
|
||||
onUpdate({ editor }) {
|
||||
debounceUpdate();
|
||||
onUpdate({ editor, transaction }) {
|
||||
// Drive URL + tree propagation only on genuine local edits; skip
|
||||
// remote/collab-origin Yjs updates to avoid feedback loops.
|
||||
if (!shouldPropagateTitleChange(transaction)) return;
|
||||
debouncedPropagateTitle(editor.getText());
|
||||
},
|
||||
editable: editable,
|
||||
content: title,
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
editorProps: {
|
||||
@@ -103,7 +118,9 @@ export function TitleEditor({
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[pageId, ydoc],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const anchorId = window.location.hash
|
||||
@@ -113,59 +130,45 @@ export function TitleEditor({
|
||||
navigate(pageSlug, { replace: true });
|
||||
}, [title]);
|
||||
|
||||
const saveTitle = useCallback(() => {
|
||||
if (!titleEditor || activePageId !== pageId) return;
|
||||
// On a local title change: update the URL slug and propagate the change to
|
||||
// the live tree/breadcrumbs for online users. No REST round-trip — the title
|
||||
// itself is persisted through Yjs. Offline this simply no-ops the socket
|
||||
// emit and the title syncs on reconnect.
|
||||
const debouncedPropagateTitle = useDebouncedCallback((titleText: string) => {
|
||||
const anchorId = window.location.hash
|
||||
? window.location.hash.substring(1)
|
||||
: undefined;
|
||||
navigate(buildPageUrl(spaceSlug, slugId, titleText, anchorId), {
|
||||
replace: true,
|
||||
});
|
||||
|
||||
if (
|
||||
titleEditor.getText() === title ||
|
||||
(titleEditor.getText() === "" && title === null)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const page =
|
||||
queryClient.getQueryData<IPage>(pageKeys.detail(slugId)) ??
|
||||
queryClient.getQueryData<IPage>(pageKeys.detail(pageId));
|
||||
if (!page) return;
|
||||
|
||||
const updatedPage: IPage = { ...page, title: titleText };
|
||||
|
||||
updateTitlePageMutationAsync({
|
||||
pageId: pageId,
|
||||
title: titleEditor.getText(),
|
||||
}).then((page) => {
|
||||
const event: UpdateEvent = {
|
||||
operation: "updateOne",
|
||||
spaceId: page.spaceId,
|
||||
entity: ["pages"],
|
||||
id: page.id,
|
||||
payload: {
|
||||
title: page.title,
|
||||
title: titleText,
|
||||
slugId: page.slugId,
|
||||
parentPageId: page.parentPageId,
|
||||
icon: page.icon,
|
||||
},
|
||||
};
|
||||
|
||||
if (page.title !== titleEditor.getText()) return;
|
||||
|
||||
updatePageData(page);
|
||||
|
||||
updatePageData(updatedPage);
|
||||
// Drive the local (same-tab) tree/breadcrumb update. The cross-user tree
|
||||
// refresh is handled server-side: the collab process extracts the renamed
|
||||
// 'title' Yjs fragment and broadcasts a treeUpdate. The previous socket
|
||||
// `emit(event)` here was a no-op (the gateway ignores it) and was removed.
|
||||
localEmitter.emit("message", event);
|
||||
emit(event);
|
||||
});
|
||||
}, [pageId, title, titleEditor]);
|
||||
|
||||
const debounceUpdate = useDebouncedCallback(saveTitle, 500);
|
||||
|
||||
useEffect(() => {
|
||||
// Do not overwrite the title while the user is actively editing it. The
|
||||
// server rebroadcasts PAGE_UPDATED to the author too, and that echo can
|
||||
// carry a title that lags behind what the user has just typed; resetting
|
||||
// content from it here would drop in-progress characters and jump the
|
||||
// cursor. Apply external title changes only when the field is not focused.
|
||||
if (
|
||||
titleEditor &&
|
||||
!titleEditor.isDestroyed &&
|
||||
!titleEditor.isFocused &&
|
||||
title !== titleEditor.getText()
|
||||
) {
|
||||
titleEditor.commands.setContent(title);
|
||||
}
|
||||
}, [pageId, title, titleEditor]);
|
||||
}, 500);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
@@ -175,13 +178,6 @@ export function TitleEditor({
|
||||
}, 300);
|
||||
}, [titleEditor]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// force-save title on navigation
|
||||
saveTitle();
|
||||
};
|
||||
}, [pageId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!titleEditor) return;
|
||||
titleEditor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
|
||||
@@ -248,6 +244,7 @@ export function TitleEditor({
|
||||
|
||||
return (
|
||||
<div className="page-title">
|
||||
{titleReady ? (
|
||||
<EditorContent
|
||||
editor={titleEditor}
|
||||
onKeyDown={(event) => {
|
||||
@@ -258,6 +255,11 @@ export function TitleEditor({
|
||||
handleTitleKeyDown(event);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
// Static, non-editable fallback so the title is visible before Yjs
|
||||
// hydrates the 'title' fragment. Not wired into the collaborative editor.
|
||||
<h1>{title}</h1>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
107
apps/client/src/features/offline/clear-offline-cache.test.ts
Normal file
107
apps/client/src/features/offline/clear-offline-cache.test.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
|
||||
// vi.mock factories are hoisted above imports, so the spies they reference must
|
||||
// be declared via vi.hoisted (also hoisted). These are inspected by assertions.
|
||||
const h = vi.hoisted(() => ({
|
||||
clear: vi.fn(),
|
||||
del: vi.fn(),
|
||||
}));
|
||||
|
||||
// The module under test imports the app entry at load time — it must be mocked.
|
||||
vi.mock("@/main.tsx", () => ({
|
||||
queryClient: { clear: h.clear },
|
||||
}));
|
||||
vi.mock("idb-keyval", () => ({
|
||||
del: h.del,
|
||||
}));
|
||||
|
||||
import { clearOfflineCache } from "./clear-offline-cache";
|
||||
import { OFFLINE_CACHE_KEY } from "./query-persister";
|
||||
|
||||
// jsdom does not provide indexedDB.databases() or Cache Storage, so the browser
|
||||
// globals are stubbed per-test. We restore them afterwards.
|
||||
const originalIndexedDB = (globalThis as any).indexedDB;
|
||||
const originalCaches = (globalThis as any).caches;
|
||||
|
||||
beforeEach(() => {
|
||||
h.clear.mockClear();
|
||||
h.del.mockClear();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
(globalThis as any).indexedDB = originalIndexedDB;
|
||||
(globalThis as any).caches = originalCaches;
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe("clearOfflineCache", () => {
|
||||
it("resolves without throwing when the browser globals are absent", async () => {
|
||||
(globalThis as any).indexedDB = undefined;
|
||||
delete (globalThis as any).caches;
|
||||
|
||||
await expect(clearOfflineCache()).resolves.toBeUndefined();
|
||||
|
||||
// The two store-agnostic steps still run.
|
||||
expect(h.clear).toHaveBeenCalledTimes(1);
|
||||
expect(h.del).toHaveBeenCalledWith(OFFLINE_CACHE_KEY);
|
||||
});
|
||||
|
||||
it("deletes only `page.*` IndexedDB databases and only `api-get-cache` caches", async () => {
|
||||
const deleteDatabase = vi.fn((_name: string) => {
|
||||
const request: any = {};
|
||||
// Resolve the deletion on the next microtask, like a real IDBRequest.
|
||||
queueMicrotask(() => request.onsuccess && request.onsuccess());
|
||||
return request;
|
||||
});
|
||||
(globalThis as any).indexedDB = {
|
||||
databases: vi
|
||||
.fn()
|
||||
.mockResolvedValue([
|
||||
{ name: "page.aaa" },
|
||||
{ name: "page.bbb" },
|
||||
{ name: "keyval-store" },
|
||||
{ name: undefined },
|
||||
]),
|
||||
deleteDatabase,
|
||||
};
|
||||
|
||||
const cacheDelete = vi.fn().mockResolvedValue(true);
|
||||
(globalThis as any).caches = {
|
||||
keys: vi
|
||||
.fn()
|
||||
.mockResolvedValue([
|
||||
"workbox-runtime-https://app/api-get-cache",
|
||||
"other-cache",
|
||||
]),
|
||||
delete: cacheDelete,
|
||||
};
|
||||
|
||||
await expect(clearOfflineCache()).resolves.toBeUndefined();
|
||||
|
||||
// Only the two page.* databases are deleted.
|
||||
expect(deleteDatabase).toHaveBeenCalledTimes(2);
|
||||
expect(deleteDatabase).toHaveBeenCalledWith("page.aaa");
|
||||
expect(deleteDatabase).toHaveBeenCalledWith("page.bbb");
|
||||
|
||||
// Only the api-get-cache entry is deleted.
|
||||
expect(cacheDelete).toHaveBeenCalledTimes(1);
|
||||
expect(cacheDelete).toHaveBeenCalledWith(
|
||||
"workbox-runtime-https://app/api-get-cache",
|
||||
);
|
||||
});
|
||||
|
||||
it("never throws even if a step rejects (best-effort)", async () => {
|
||||
h.del.mockRejectedValueOnce(new Error("idb boom"));
|
||||
(globalThis as any).indexedDB = {
|
||||
databases: vi.fn().mockRejectedValue(new Error("databases boom")),
|
||||
deleteDatabase: vi.fn(),
|
||||
};
|
||||
(globalThis as any).caches = {
|
||||
keys: vi.fn().mockRejectedValue(new Error("caches boom")),
|
||||
delete: vi.fn(),
|
||||
};
|
||||
|
||||
await expect(clearOfflineCache()).resolves.toBeUndefined();
|
||||
expect(h.clear).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
94
apps/client/src/features/offline/clear-offline-cache.ts
Normal file
94
apps/client/src/features/offline/clear-offline-cache.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { del } from "idb-keyval";
|
||||
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { OFFLINE_CACHE_KEY } from "./query-persister";
|
||||
import { PAGE_YDOC_NAME_PREFIX } from "@/features/editor/page-ydoc-name";
|
||||
|
||||
/**
|
||||
* Best-effort purge of all of the current user's offline data from the browser.
|
||||
*
|
||||
* On logout the previous user's private data would otherwise linger locally and
|
||||
* be readable by the next person on the device. This clears the three offline
|
||||
* stores the app writes:
|
||||
* 1. the in-memory + IndexedDB-persisted TanStack Query cache (idb-keyval key
|
||||
* `OFFLINE_CACHE_KEY`),
|
||||
* 2. the Yjs page documents (IndexedDB databases named `page.<id>` created by
|
||||
* y-indexeddb in make-offline.ts), and
|
||||
* 3. any legacy service worker `api-get-cache` Cache Storage entry. The
|
||||
* Workbox runtime no longer creates this cache (the GET /api NetworkFirst
|
||||
* rule was removed — offline reads come from the persisted RQ cache), so
|
||||
* this is now a defensive cleanup for caches left by older app versions.
|
||||
*
|
||||
* Fully best-effort: every step is isolated so a single failure neither blocks
|
||||
* the remaining steps nor throws to the caller (logout must never be blocked on
|
||||
* cache cleanup). Callers may ignore the resolved value.
|
||||
*
|
||||
* Limitations:
|
||||
* - Deleting the Yjs page databases relies on `indexedDB.databases()`, which
|
||||
* is unavailable in some browsers (notably Firefox). There we skip silently;
|
||||
* those `page.<id>` databases are then left in place.
|
||||
* - Cache Storage clearing only runs where `caches` exists (secure contexts /
|
||||
* service-worker-capable browsers).
|
||||
*/
|
||||
export async function clearOfflineCache(): Promise<void> {
|
||||
// 1a. Drop the in-memory query cache immediately.
|
||||
try {
|
||||
queryClient.clear();
|
||||
} catch {
|
||||
// best-effort: ignore in-memory cache reset failures
|
||||
}
|
||||
|
||||
// 1b. Delete the persisted RQ cache from IndexedDB.
|
||||
try {
|
||||
await del(OFFLINE_CACHE_KEY);
|
||||
} catch {
|
||||
// best-effort: ignore persisted-cache deletion failures
|
||||
}
|
||||
|
||||
// 2. Delete the Yjs page IndexedDB databases (`page.<id>`).
|
||||
// `indexedDB.databases()` is not implemented everywhere (e.g. Firefox); when
|
||||
// it is missing we cannot enumerate the page databases, so we skip silently.
|
||||
try {
|
||||
if (
|
||||
typeof indexedDB !== "undefined" &&
|
||||
typeof indexedDB.databases === "function"
|
||||
) {
|
||||
const dbs = await indexedDB.databases();
|
||||
for (const db of dbs) {
|
||||
const name = db?.name;
|
||||
if (typeof name !== "string" || !name.startsWith(PAGE_YDOC_NAME_PREFIX))
|
||||
continue;
|
||||
try {
|
||||
// Fire-and-forget delete; await a thin wrapper so a slow delete does
|
||||
// not race the page teardown, but never reject on it.
|
||||
await new Promise<void>((resolve) => {
|
||||
const request = indexedDB.deleteDatabase(name);
|
||||
request.onsuccess = () => resolve();
|
||||
request.onerror = () => resolve();
|
||||
request.onblocked = () => resolve();
|
||||
});
|
||||
} catch {
|
||||
// best-effort per database
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// best-effort: ignore enumeration/deletion failures
|
||||
}
|
||||
|
||||
// 3. Clear any legacy service worker API cache. Current builds no longer
|
||||
// create it, but an older client may have left an "api-get-cache" entry
|
||||
// (Workbox may prefix the name), so match by substring rather than exact name.
|
||||
try {
|
||||
if ("caches" in window) {
|
||||
const keys = await caches.keys();
|
||||
await Promise.all(
|
||||
keys
|
||||
.filter((key) => key.includes("api-get-cache"))
|
||||
.map((key) => caches.delete(key)),
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
// best-effort: ignore Cache Storage failures
|
||||
}
|
||||
}
|
||||
373
apps/client/src/features/offline/make-offline.test.ts
Normal file
373
apps/client/src/features/offline/make-offline.test.ts
Normal file
@@ -0,0 +1,373 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
|
||||
// vi.mock factories are hoisted above imports, so any spy they reference must be
|
||||
// declared with vi.hoisted (which is hoisted as well). These shared spies are
|
||||
// inspected by the assertions below.
|
||||
const h = vi.hoisted(() => ({
|
||||
ydocDestroy: vi.fn(),
|
||||
idbDestroy: vi.fn(),
|
||||
providerOn: vi.fn(),
|
||||
providerOff: vi.fn(),
|
||||
providerDestroy: vi.fn(),
|
||||
}));
|
||||
|
||||
// The module under test imports the app entry at load time — it must be mocked.
|
||||
vi.mock("@/main.tsx", () => ({
|
||||
queryClient: { setQueryData: vi.fn(), prefetchQuery: vi.fn() },
|
||||
}));
|
||||
vi.mock("@/features/page/services/page-service", () => ({
|
||||
getPageById: vi.fn(),
|
||||
getPageBreadcrumbs: vi.fn(),
|
||||
getSidebarPages: vi.fn(),
|
||||
getAllSidebarPages: vi.fn(),
|
||||
}));
|
||||
vi.mock("@/features/space/services/space-service.ts", () => ({
|
||||
getSpaceById: vi.fn(),
|
||||
}));
|
||||
vi.mock("@/features/comment/services/comment-service", () => ({
|
||||
getPageComments: vi.fn(),
|
||||
}));
|
||||
|
||||
// Use the `function` form (not an arrow) so Vitest binds the constructor return
|
||||
// value when the module under test calls `new Y.Doc()` etc.
|
||||
vi.mock("yjs", () => ({
|
||||
Doc: vi.fn(function () {
|
||||
return { destroy: h.ydocDestroy };
|
||||
}),
|
||||
}));
|
||||
vi.mock("y-indexeddb", () => ({
|
||||
IndexeddbPersistence: vi.fn(function () {
|
||||
return { destroy: h.idbDestroy };
|
||||
}),
|
||||
}));
|
||||
vi.mock("@hocuspocus/provider", () => ({
|
||||
HocuspocusProvider: vi.fn(function () {
|
||||
return { on: h.providerOn, off: h.providerOff, destroy: h.providerDestroy };
|
||||
}),
|
||||
}));
|
||||
|
||||
import {
|
||||
warmInfiniteAll,
|
||||
warmPageYdoc,
|
||||
makePageAvailableOffline,
|
||||
} from "./make-offline";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import {
|
||||
getPageById,
|
||||
getPageBreadcrumbs,
|
||||
getSidebarPages,
|
||||
} from "@/features/page/services/page-service";
|
||||
import { getPageComments } from "@/features/comment/services/comment-service";
|
||||
|
||||
const setQueryData = (queryClient as any).setQueryData as ReturnType<
|
||||
typeof vi.fn
|
||||
>;
|
||||
const prefetchQuery = (queryClient as any).prefetchQuery as ReturnType<
|
||||
typeof vi.fn
|
||||
>;
|
||||
|
||||
beforeEach(() => {
|
||||
// Clear call history WITHOUT wiping the mock implementations the vi.mock
|
||||
// factories installed (vi.clearAllMocks would drop the constructor return
|
||||
// objects and break the provider/idb/yjs spies).
|
||||
setQueryData.mockClear();
|
||||
prefetchQuery.mockReset();
|
||||
prefetchQuery.mockResolvedValue(undefined);
|
||||
(getPageById as ReturnType<typeof vi.fn>).mockReset();
|
||||
(getPageBreadcrumbs as ReturnType<typeof vi.fn>).mockReset();
|
||||
(getSidebarPages as ReturnType<typeof vi.fn>).mockReset();
|
||||
(getPageComments as ReturnType<typeof vi.fn>).mockReset();
|
||||
h.ydocDestroy.mockClear();
|
||||
h.idbDestroy.mockClear();
|
||||
h.providerOn.mockClear();
|
||||
h.providerOff.mockClear();
|
||||
h.providerDestroy.mockClear();
|
||||
});
|
||||
|
||||
describe("warmInfiniteAll", () => {
|
||||
it("warms a single page and writes the InfiniteData cache shape", async () => {
|
||||
const res = { items: [{ id: 1 }], meta: { nextCursor: null } };
|
||||
const fetchPage = vi.fn().mockResolvedValue(res);
|
||||
|
||||
await warmInfiniteAll(["comments", "p1"], fetchPage);
|
||||
|
||||
expect(fetchPage).toHaveBeenCalledTimes(1);
|
||||
expect(fetchPage).toHaveBeenCalledWith(undefined);
|
||||
expect(setQueryData).toHaveBeenCalledTimes(1);
|
||||
expect(setQueryData).toHaveBeenCalledWith(["comments", "p1"], {
|
||||
pages: [res],
|
||||
pageParams: [undefined],
|
||||
});
|
||||
});
|
||||
|
||||
it("walks the cursor chain across multiple pages", async () => {
|
||||
const r0 = { items: [], meta: { nextCursor: "c1" } };
|
||||
const r1 = { items: [], meta: { nextCursor: "c2" } };
|
||||
const r2 = { items: [], meta: { nextCursor: null } };
|
||||
const fetchPage = vi
|
||||
.fn()
|
||||
.mockResolvedValueOnce(r0)
|
||||
.mockResolvedValueOnce(r1)
|
||||
.mockResolvedValueOnce(r2);
|
||||
|
||||
await warmInfiniteAll(["comments", "p1"], fetchPage);
|
||||
|
||||
expect(fetchPage).toHaveBeenCalledTimes(3);
|
||||
expect(fetchPage.mock.calls.map((c) => c[0])).toEqual([
|
||||
undefined,
|
||||
"c1",
|
||||
"c2",
|
||||
]);
|
||||
const payload = setQueryData.mock.calls[0][1];
|
||||
expect(payload.pages).toEqual([r0, r1, r2]);
|
||||
expect(payload.pageParams).toEqual([undefined, "c1", "c2"]);
|
||||
});
|
||||
|
||||
it("caps pagination at maxPages and reports the truncation (returns false)", async () => {
|
||||
// Always returns a non-null cursor — the cap is the only thing that stops it.
|
||||
const fetchPage = vi
|
||||
.fn()
|
||||
.mockResolvedValue({ items: [], meta: { nextCursor: "more" } });
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
// Hitting maxPages with a cursor still pending is a truncated warm: the
|
||||
// (partial) cache is still written, but the result is reported as false.
|
||||
await expect(
|
||||
warmInfiniteAll(["comments", "p1"], fetchPage, 2),
|
||||
).resolves.toBe(false);
|
||||
|
||||
expect(fetchPage).toHaveBeenCalledTimes(2);
|
||||
const payload = setQueryData.mock.calls[0][1];
|
||||
expect(payload.pages).toHaveLength(2);
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
it("returns true on success", async () => {
|
||||
const fetchPage = vi
|
||||
.fn()
|
||||
.mockResolvedValue({ items: [], meta: { nextCursor: null } });
|
||||
|
||||
await expect(
|
||||
warmInfiniteAll(["comments", "p1"], fetchPage),
|
||||
).resolves.toBe(true);
|
||||
});
|
||||
|
||||
it("reports errors (returns false) and never writes the cache on failure", async () => {
|
||||
const fetchPage = vi.fn().mockRejectedValue(new Error("network"));
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
|
||||
await expect(
|
||||
warmInfiniteAll(["comments", "p1"], fetchPage),
|
||||
).resolves.toBe(false);
|
||||
expect(setQueryData).not.toHaveBeenCalled();
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe("makePageAvailableOffline", () => {
|
||||
const okPage = {
|
||||
id: "uuid-1",
|
||||
slugId: "slug-1",
|
||||
space: { slug: "space-slug" },
|
||||
};
|
||||
|
||||
it("returns ok:true with no failures when every step succeeds", async () => {
|
||||
(getPageById as ReturnType<typeof vi.fn>).mockResolvedValue(okPage);
|
||||
(getPageBreadcrumbs as ReturnType<typeof vi.fn>).mockResolvedValue([]);
|
||||
(getSidebarPages as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
(getPageComments as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
|
||||
const result = await makePageAvailableOffline({
|
||||
pageId: "uuid-1",
|
||||
spaceId: "space-uuid",
|
||||
});
|
||||
|
||||
expect(result).toEqual({ ok: true, failed: [] });
|
||||
});
|
||||
|
||||
it("returns ok:false with the failed step label when a warm step fails", async () => {
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
(getPageById as ReturnType<typeof vi.fn>).mockResolvedValue(okPage);
|
||||
(getPageBreadcrumbs as ReturnType<typeof vi.fn>).mockResolvedValue([]);
|
||||
(getSidebarPages as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
// Comments warm fails -> labeled "comments".
|
||||
(getPageComments as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error("network"),
|
||||
);
|
||||
|
||||
const result = await makePageAvailableOffline({
|
||||
pageId: "uuid-1",
|
||||
spaceId: "space-uuid",
|
||||
});
|
||||
|
||||
expect(result.ok).toBe(false);
|
||||
expect(result.failed).toContain("comments");
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
// Helper: the page-ids passed to the sidebar-children warm (its query key is
|
||||
// ["sidebar-pages", { pageId, spaceId }]) — i.e. which nodes were prefetched.
|
||||
const warmedSidebarIds = () =>
|
||||
prefetchQuery.mock.calls
|
||||
.map((c) => c[0])
|
||||
.filter((opts: any) => opts?.queryKey?.[0] === "sidebar-pages")
|
||||
.map((opts: any) => opts.queryKey[1]?.pageId);
|
||||
|
||||
it("warms the page + every ancestor's children once and skips the self-ancestor guard", async () => {
|
||||
(getPageById as ReturnType<typeof vi.fn>).mockResolvedValue(okPage);
|
||||
// Breadcrumbs include two real ancestors, the page's OWN id (must be skipped
|
||||
// by the ancestorId === pageId guard so it is not warmed twice), and a
|
||||
// malformed entry with no id (also skipped).
|
||||
(getPageBreadcrumbs as ReturnType<typeof vi.fn>).mockResolvedValue([
|
||||
{ id: "anc-1" },
|
||||
{ id: "uuid-1" }, // === pageId -> guard
|
||||
{ id: "anc-2" },
|
||||
{}, // no id -> skipped
|
||||
]);
|
||||
(getSidebarPages as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
(getPageComments as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
|
||||
const result = await makePageAvailableOffline({
|
||||
pageId: "uuid-1",
|
||||
spaceId: "space-uuid",
|
||||
});
|
||||
|
||||
const ids = warmedSidebarIds();
|
||||
// The page's own children (warmSidebarChildren(pageId)) plus each real
|
||||
// ancestor — exactly once each. The self-ancestor (uuid-1 in breadcrumbs) is
|
||||
// NOT a second warm: uuid-1 appears once (from the page's own children call).
|
||||
expect(ids).toEqual(["uuid-1", "anc-1", "anc-2"]);
|
||||
expect(ids.filter((id: string) => id === "uuid-1")).toHaveLength(1);
|
||||
expect(result).toEqual({ ok: true, failed: [] });
|
||||
});
|
||||
|
||||
it("dedupes repeated tree failures into a single 'tree' label", async () => {
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
(getPageById as ReturnType<typeof vi.fn>).mockResolvedValue(okPage);
|
||||
(getPageBreadcrumbs as ReturnType<typeof vi.fn>).mockResolvedValue([
|
||||
{ id: "anc-1" },
|
||||
{ id: "anc-2" },
|
||||
]);
|
||||
(getSidebarPages as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
(getPageComments as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
// Fail ONLY the sidebar-children prefetches (page-own + both ancestors = 3
|
||||
// failures); the currentUser/space prefetches still resolve.
|
||||
prefetchQuery.mockImplementation(async (opts: any) => {
|
||||
if (opts?.queryKey?.[0] === "sidebar-pages") throw new Error("network");
|
||||
return undefined;
|
||||
});
|
||||
|
||||
const result = await makePageAvailableOffline({
|
||||
pageId: "uuid-1",
|
||||
spaceId: "space-uuid",
|
||||
});
|
||||
|
||||
// Three node warms failed but the contract collapses them to one "tree".
|
||||
expect(result.ok).toBe(false);
|
||||
expect(result.failed).toEqual(["tree"]);
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
it("records 'breadcrumbs' (not 'tree') when the breadcrumbs lookup rejects", async () => {
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
(getPageById as ReturnType<typeof vi.fn>).mockResolvedValue(okPage);
|
||||
// Ancestor discovery fails -> the ancestor-walk is recorded as "breadcrumbs".
|
||||
(getPageBreadcrumbs as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error("network"),
|
||||
);
|
||||
(getSidebarPages as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
(getPageComments as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
items: [],
|
||||
meta: { nextCursor: null },
|
||||
});
|
||||
|
||||
const result = await makePageAvailableOffline({
|
||||
pageId: "uuid-1",
|
||||
spaceId: "space-uuid",
|
||||
});
|
||||
|
||||
// The page's own children still warmed fine (prefetch resolves), so the only
|
||||
// failure is the breadcrumbs lookup.
|
||||
expect(result.ok).toBe(false);
|
||||
expect(result.failed).toEqual(["breadcrumbs"]);
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe("warmPageYdoc", () => {
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it("resolves on synced, detaches the listener once, and tears everything down (settle-once)", async () => {
|
||||
const promise = warmPageYdoc("p1", "ws://x");
|
||||
|
||||
// Grab the synced handler the provider registered.
|
||||
expect(h.providerOn).toHaveBeenCalledWith("synced", expect.any(Function));
|
||||
const handler = h.providerOn.mock.calls.find(
|
||||
(c) => c[0] === "synced",
|
||||
)![1] as () => void;
|
||||
|
||||
handler();
|
||||
await expect(promise).resolves.toBeUndefined();
|
||||
|
||||
// Listener detached and everything cleaned up.
|
||||
expect(h.providerOff).toHaveBeenCalledWith("synced", expect.any(Function));
|
||||
expect(h.providerDestroy).toHaveBeenCalledTimes(1);
|
||||
expect(h.idbDestroy).toHaveBeenCalledTimes(1);
|
||||
expect(h.ydocDestroy).toHaveBeenCalledTimes(1);
|
||||
|
||||
// Firing the handler again must NOT re-run cleanup (settled guard).
|
||||
handler();
|
||||
expect(h.providerDestroy).toHaveBeenCalledTimes(1);
|
||||
expect(h.idbDestroy).toHaveBeenCalledTimes(1);
|
||||
expect(h.ydocDestroy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("resolves and cleans up after the timeout when synced never fires", async () => {
|
||||
vi.useFakeTimers();
|
||||
const promise = warmPageYdoc("p1", "ws://x");
|
||||
|
||||
// Do not fire "synced"; let the 8s safety timeout settle it.
|
||||
await vi.advanceTimersByTimeAsync(8000);
|
||||
await expect(promise).resolves.toBeUndefined();
|
||||
|
||||
expect(h.providerDestroy).toHaveBeenCalledTimes(1);
|
||||
expect(h.idbDestroy).toHaveBeenCalledTimes(1);
|
||||
expect(h.ydocDestroy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
315
apps/client/src/features/offline/make-offline.ts
Normal file
315
apps/client/src/features/offline/make-offline.ts
Normal file
@@ -0,0 +1,315 @@
|
||||
import * as Y from "yjs";
|
||||
import { IndexeddbPersistence } from "y-indexeddb";
|
||||
import { HocuspocusProvider } from "@hocuspocus/provider";
|
||||
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import {
|
||||
getPageById,
|
||||
getPageBreadcrumbs,
|
||||
getSidebarPages,
|
||||
} from "@/features/page/services/page-service";
|
||||
import {
|
||||
pageKeys,
|
||||
sidebarPagesQueryOptions,
|
||||
} from "@/features/page/queries/page-query";
|
||||
import { spaceByIdQueryOptions } from "@/features/space/queries/space-query";
|
||||
import { RQ_KEY } from "@/features/comment/queries/comment-query";
|
||||
import { getPageComments } from "@/features/comment/services/comment-service";
|
||||
import { getMyInfo } from "@/features/user/services/user-service";
|
||||
import { userKeys } from "@/features/user/hooks/use-current-user";
|
||||
import { IPage } from "@/features/page/types/page.types";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import { pageYdocName } from "@/features/editor/page-ydoc-name";
|
||||
|
||||
/**
|
||||
* Fully paginate an infinite query and write the @tanstack InfiniteData cache
|
||||
* shape ({ pages, pageParams }) that the matching useInfiniteQuery hook reads.
|
||||
*
|
||||
* The default prefetchInfiniteQuery only warms the FIRST page, which leaves
|
||||
* hooks that treat hasNextPage as still-loading (e.g. the comments panel)
|
||||
* spinning forever offline, and silently truncates large lists. This walks the
|
||||
* cursor chain until it runs out (or hits maxPages) so the whole list is cached.
|
||||
*
|
||||
* Best-effort: a failure does not throw (a partial/failed warm is still useful),
|
||||
* but it is reported — the error is logged with context and `false` is returned
|
||||
* so the caller can record the failed step instead of silently succeeding.
|
||||
*
|
||||
* Returns true ONLY if the cursor chain was fully exhausted and written. If the
|
||||
* walk stops because it hit `maxPages` while a `nextCursor` is still pending,
|
||||
* the cached list is truncated AND its last page keeps a nextCursor that cannot
|
||||
* be re-fetched offline (hooks that gate on hasNextPage would spin forever), so
|
||||
* that case is logged and returns false too — the caller records it as a failed
|
||||
* warm instead of a silent truncated success. The (partial) cache is still
|
||||
* written so what we did fetch is usable.
|
||||
*
|
||||
* Exported for unit testing of the cursor-walk / cache-write behavior.
|
||||
*/
|
||||
export async function warmInfiniteAll<T>(
|
||||
queryKey: readonly unknown[],
|
||||
fetchPage: (cursor: string | undefined) => Promise<IPagination<T>>,
|
||||
maxPages = 50,
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
const pages: IPagination<T>[] = [];
|
||||
const pageParams: (string | undefined)[] = [];
|
||||
let cursor: string | undefined = undefined;
|
||||
let exhausted = false;
|
||||
|
||||
for (let i = 0; i < maxPages; i++) {
|
||||
const res = await fetchPage(cursor);
|
||||
pages.push(res);
|
||||
pageParams.push(cursor);
|
||||
cursor = res?.meta?.nextCursor ?? undefined;
|
||||
if (!cursor) {
|
||||
exhausted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
queryClient.setQueryData(queryKey, { pages, pageParams });
|
||||
|
||||
if (!exhausted) {
|
||||
// Stopped at maxPages with a cursor still pending: the list is truncated
|
||||
// and the last cached page's nextCursor is un-fetchable offline. Report it
|
||||
// as a failed warm rather than a silent truncated success.
|
||||
console.error("warmInfiniteAll truncated at maxPages", {
|
||||
queryKey,
|
||||
maxPages,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("warmInfiniteAll failed", { queryKey, error });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export interface MakePageAvailableOfflineParams {
|
||||
pageId: string;
|
||||
spaceId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Outcome of {@link makePageAvailableOffline}. `ok` is true only when every warm
|
||||
* step succeeded; `failed` lists the labels of the steps that failed (a subset
|
||||
* of: "currentUser", "page", "space", "tree", "breadcrumbs", "comments").
|
||||
*/
|
||||
export interface MakePageAvailableOfflineResult {
|
||||
ok: boolean;
|
||||
failed: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Best-effort prefetch of a page's read queries so they get persisted to
|
||||
* IndexedDB and become readable offline.
|
||||
*
|
||||
* Each step is isolated and this function does NOT throw — a partial warm is
|
||||
* still useful. Instead of silently succeeding, every failed step is logged
|
||||
* with a label and recorded in the returned result: `{ ok, failed }` where
|
||||
* `ok` is true only if no step failed and `failed` lists the failed step
|
||||
* labels. Only meaningful while online (the underlying requests must succeed).
|
||||
*/
|
||||
export async function makePageAvailableOffline({
|
||||
pageId,
|
||||
spaceId,
|
||||
}: MakePageAvailableOfflineParams): Promise<MakePageAvailableOfflineResult> {
|
||||
const failed: string[] = [];
|
||||
|
||||
// Warm the current user (['currentUser']) so the auth-gated <Layout> can
|
||||
// hydrate offline. UserProvider blanks the whole app while useCurrentUser has
|
||||
// no data, and the offline POST /api/users/me fails as a network error, so
|
||||
// without a persisted user a pinned page still white-screens after relaunch
|
||||
// (#238). Persisted via OFFLINE_PERSIST_ROOTS; warmed here so the persisted
|
||||
// cache actually has an entry to restore.
|
||||
try {
|
||||
await queryClient.prefetchQuery({
|
||||
queryKey: userKeys.currentUser(),
|
||||
queryFn: () => getMyInfo(),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("makePageAvailableOffline: currentUser step failed", {
|
||||
pageId,
|
||||
error,
|
||||
});
|
||||
failed.push("currentUser");
|
||||
}
|
||||
|
||||
// Fetch the page document ONCE and write it under BOTH cache keys, exactly
|
||||
// like usePageQuery's onData effect. Every page consumer reads
|
||||
// pageKeys.detail(slugId) (usePageQuery keys on the slugId for routed reads),
|
||||
// so warming only the uuid key would leave the offline page blank.
|
||||
let page: IPage | undefined;
|
||||
try {
|
||||
page = await getPageById({ pageId });
|
||||
queryClient.setQueryData(pageKeys.detail(page.slugId), page);
|
||||
queryClient.setQueryData(pageKeys.detail(page.id), page);
|
||||
} catch (error) {
|
||||
console.error("makePageAvailableOffline: page step failed", {
|
||||
pageId,
|
||||
error,
|
||||
});
|
||||
failed.push("page");
|
||||
}
|
||||
|
||||
// Warm the space — page.tsx renders nothing until the space query resolves
|
||||
// (useGetSpaceBySlugQuery). Awaited (not the fire-and-forget prefetchSpace) so
|
||||
// the space is actually persisted before the caller fires its toast. Shares
|
||||
// spaceByIdQueryOptions so the key/fn cannot drift from the hook.
|
||||
try {
|
||||
const spaceSlug = page?.space?.slug;
|
||||
if (spaceSlug) {
|
||||
await queryClient.prefetchQuery(spaceByIdQueryOptions(spaceSlug));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("makePageAvailableOffline: space step failed", {
|
||||
pageId,
|
||||
error,
|
||||
});
|
||||
failed.push("space");
|
||||
}
|
||||
|
||||
// Warm the sidebar tree root so the WHOLE root level renders offline (matches
|
||||
// useGetRootSidebarPagesQuery's pageKeys.rootSidebar(spaceId) infinite cache).
|
||||
// Fully paginated so large root levels are not truncated at 100.
|
||||
if (spaceId) {
|
||||
const ok = await warmInfiniteAll(pageKeys.rootSidebar(spaceId), (cursor) =>
|
||||
getSidebarPages({ spaceId, cursor, limit: 100 }),
|
||||
);
|
||||
if (!ok) failed.push("tree");
|
||||
}
|
||||
|
||||
// Warm the children of the page and of every ancestor so the path to this
|
||||
// page is expandable offline. We MIRROR fetchAllAncestorChildren exactly via
|
||||
// sidebarPagesQueryOptions — same pageKeys.sidebar({ pageId, spaceId }) key,
|
||||
// same getAllSidebarPages fn (which aggregates ALL children pages, so nothing
|
||||
// is truncated at 100), same 30min staleTime — otherwise the warmed cache
|
||||
// would never be read by the offline tree.
|
||||
const warmSidebarChildren = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
// Keep EXACTLY { pageId, spaceId } so the key hashes identically to
|
||||
// fetchAllAncestorChildren's (no parentPageId, no extra fields).
|
||||
const params = { pageId: id, spaceId };
|
||||
await queryClient.prefetchQuery(sidebarPagesQueryOptions(params));
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("makePageAvailableOffline: tree node step failed", {
|
||||
pageId: id,
|
||||
error,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// The page's own children.
|
||||
if (!(await warmSidebarChildren(pageId))) failed.push("tree");
|
||||
|
||||
// Each ancestor's children. Use the breadcrumbs endpoint ONLY to discover the
|
||||
// ancestor ids — we intentionally do NOT cache the breadcrumbs themselves
|
||||
// (the UI derives the path from the tree).
|
||||
try {
|
||||
const ancestors = (await getPageBreadcrumbs(pageId)) as
|
||||
| Array<{ id?: string }>
|
||||
| undefined;
|
||||
for (const ancestor of ancestors ?? []) {
|
||||
const ancestorId = ancestor?.id;
|
||||
if (!ancestorId || ancestorId === pageId) continue;
|
||||
if (!(await warmSidebarChildren(ancestorId))) failed.push("tree");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("makePageAvailableOffline: breadcrumbs step failed", {
|
||||
pageId,
|
||||
error,
|
||||
});
|
||||
failed.push("breadcrumbs");
|
||||
}
|
||||
|
||||
// Comments (matches useCommentsQuery's RQ_KEY(pageId) infinite cache).
|
||||
// useCommentsQuery reports isLoading while hasNextPage is true, so warming
|
||||
// only the first page leaves the offline comments panel spinning forever on
|
||||
// pages with >100 comments. Fully paginate so the last cached page has no
|
||||
// nextCursor and the panel settles offline.
|
||||
const commentsOk = await warmInfiniteAll(RQ_KEY(pageId), (cursor) =>
|
||||
getPageComments({ pageId, cursor, limit: 100 }),
|
||||
);
|
||||
if (!commentsOk) failed.push("comments");
|
||||
|
||||
// Dedupe — the tree label can be recorded once per failed node/ancestor.
|
||||
const uniqueFailed = [...new Set(failed)];
|
||||
return { ok: uniqueFailed.length === 0, failed: uniqueFailed };
|
||||
}
|
||||
|
||||
/**
|
||||
* Best-effort warm-up of the page's Yjs document into IndexedDB so the editor
|
||||
* can open offline.
|
||||
*
|
||||
* Opens a local IndexeddbPersistence plus a transient HocuspocusProvider to
|
||||
* pull the server state into IndexedDB, then tears both down once synced (or
|
||||
* after a timeout). Entirely wrapped in try/catch — NEVER throws.
|
||||
*
|
||||
* Only meaningful when online at warm time; offline it is a no-op that resolves.
|
||||
*/
|
||||
export async function warmPageYdoc(
|
||||
pageId: string,
|
||||
collabUrl: string,
|
||||
token?: string,
|
||||
): Promise<void> {
|
||||
let ydoc: Y.Doc | null = null;
|
||||
let local: IndexeddbPersistence | null = null;
|
||||
let remote: HocuspocusProvider | null = null;
|
||||
|
||||
try {
|
||||
const documentName = pageYdocName(pageId);
|
||||
ydoc = new Y.Doc();
|
||||
local = new IndexeddbPersistence(documentName, ydoc);
|
||||
remote = new HocuspocusProvider({
|
||||
url: collabUrl,
|
||||
name: documentName,
|
||||
document: ydoc,
|
||||
token,
|
||||
});
|
||||
|
||||
const provider = remote;
|
||||
|
||||
await new Promise<void>((resolve) => {
|
||||
let settled = false;
|
||||
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
||||
const finish = () => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
// Clear the pending timeout and detach the listener so neither leaks
|
||||
// after we resolve.
|
||||
if (timeoutId !== undefined) clearTimeout(timeoutId);
|
||||
try {
|
||||
provider.off("synced", finish);
|
||||
} catch {
|
||||
// best-effort
|
||||
}
|
||||
resolve();
|
||||
};
|
||||
|
||||
// Resolve once the server state has synced into the local doc...
|
||||
provider.on("synced", finish);
|
||||
// ...or give up after a short timeout so we never hang.
|
||||
timeoutId = setTimeout(finish, 8000);
|
||||
});
|
||||
} catch {
|
||||
// best-effort
|
||||
} finally {
|
||||
try {
|
||||
remote?.destroy();
|
||||
} catch {
|
||||
// best-effort
|
||||
}
|
||||
try {
|
||||
local?.destroy();
|
||||
} catch {
|
||||
// best-effort
|
||||
}
|
||||
try {
|
||||
ydoc?.destroy();
|
||||
} catch {
|
||||
// best-effort
|
||||
}
|
||||
}
|
||||
}
|
||||
45
apps/client/src/features/offline/offline-fallback.tsx
Normal file
45
apps/client/src/features/offline/offline-fallback.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Button, Container, Group, Stack, Text, Title } from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getAppName } from "@/lib/config";
|
||||
|
||||
/**
|
||||
* Shown when the authenticated app shell cannot hydrate because the current
|
||||
* user is unavailable AND there is no cached user to fall back on (e.g. an
|
||||
* offline cold boot of a page that was never warmed for offline).
|
||||
*
|
||||
* Previously UserProvider returned a bare `<></>` in this situation, which
|
||||
* white-screened the whole app on any offline reload (#237/#238). Rendering an
|
||||
* explicit "you're offline" state with a retry instead gives the user a clear,
|
||||
* non-blank fallback and a way to recover once the network returns.
|
||||
*/
|
||||
export function OfflineFallback() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("You're offline")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<Container size="sm" py={80}>
|
||||
<Stack align="center" gap="md">
|
||||
<Title order={2} ta="center">
|
||||
{t("You're offline")}
|
||||
</Title>
|
||||
<Text c="dimmed" size="lg" ta="center">
|
||||
{t(
|
||||
"This page hasn't been saved for offline use, so it can't be loaded right now. Reconnect to the internet and try again.",
|
||||
)}
|
||||
</Text>
|
||||
<Group justify="center">
|
||||
<Button onClick={() => window.location.reload()} variant="subtle">
|
||||
{t("Retry")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
114
apps/client/src/features/offline/offline-mutations.test.ts
Normal file
114
apps/client/src/features/offline/offline-mutations.test.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { QueryClient, hydrate, dehydrate } from "@tanstack/react-query";
|
||||
|
||||
// Stub the network services so a replayed mutation hits a spy, not the network.
|
||||
const h = vi.hoisted(() => ({
|
||||
createPage: vi.fn(),
|
||||
movePage: vi.fn(),
|
||||
createComment: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/features/page/services/page-service", () => ({
|
||||
createPage: h.createPage,
|
||||
movePage: h.movePage,
|
||||
}));
|
||||
vi.mock("@/features/comment/services/comment-service", () => ({
|
||||
createComment: h.createComment,
|
||||
}));
|
||||
// page-query pulls in the app entry (queryClient) and a lot of UI deps via its
|
||||
// cache helpers; we only need invalidateOnCreatePage to be a no-op here.
|
||||
vi.mock("@/features/page/queries/page-query", () => ({
|
||||
invalidateOnCreatePage: vi.fn(),
|
||||
}));
|
||||
|
||||
import {
|
||||
offlineMutationKeys,
|
||||
registerOfflineMutationDefaults,
|
||||
} from "./offline-mutations";
|
||||
|
||||
beforeEach(() => {
|
||||
h.createPage.mockReset().mockResolvedValue({ id: "new-page" });
|
||||
h.movePage.mockReset().mockResolvedValue(undefined);
|
||||
h.createComment.mockReset().mockResolvedValue({ id: "new-comment" });
|
||||
});
|
||||
|
||||
describe("registerOfflineMutationDefaults", () => {
|
||||
it("registers a default mutationFn for every offline mutation key", () => {
|
||||
const qc = new QueryClient();
|
||||
registerOfflineMutationDefaults(qc);
|
||||
|
||||
for (const key of Object.values(offlineMutationKeys)) {
|
||||
const defaults = qc.getMutationDefaults(key);
|
||||
expect(typeof defaults?.mutationFn).toBe("function");
|
||||
}
|
||||
});
|
||||
|
||||
// The headline durability guarantee: a paused mutation dehydrated into
|
||||
// IndexedDB while offline must, after a reload, have a mutationFn so
|
||||
// resumePausedMutations() actually replays the write on reconnect.
|
||||
it("makes a rehydrated paused create replayable by resumePausedMutations", async () => {
|
||||
// 1) Simulate the offline tab: a paused create mutation gets dehydrated.
|
||||
const offlineClient = new QueryClient();
|
||||
const observer = offlineClient.getMutationCache().build(offlineClient, {
|
||||
mutationKey: offlineMutationKeys.createPage,
|
||||
});
|
||||
// Force the dehydrate-worthy paused state (offline = isPaused) with the
|
||||
// payload the user submitted before losing connectivity.
|
||||
observer.state.isPaused = true;
|
||||
observer.state.status = "pending";
|
||||
observer.state.variables = { spaceId: "s1", title: "Offline page" };
|
||||
|
||||
const dehydrated = dehydrate(offlineClient, {
|
||||
shouldDehydrateMutation: () => true,
|
||||
});
|
||||
expect(dehydrated.mutations).toHaveLength(1);
|
||||
// The dehydrated mutation carries NO mutationFn (functions aren't
|
||||
// serializable) — only its key + variables survive the reload.
|
||||
expect((dehydrated.mutations[0] as any).mutationFn).toBeUndefined();
|
||||
|
||||
// 2) Simulate the fresh page after reload: register defaults, then hydrate
|
||||
// the persisted paused mutation back in.
|
||||
const freshClient = new QueryClient();
|
||||
registerOfflineMutationDefaults(freshClient);
|
||||
hydrate(freshClient, dehydrated);
|
||||
|
||||
expect(freshClient.getMutationCache().getAll()).toHaveLength(1);
|
||||
|
||||
// 3) Reconnect: replay the paused mutations.
|
||||
await freshClient.resumePausedMutations();
|
||||
|
||||
// The default mutationFn ran with the persisted variables — the write is
|
||||
// NOT silently dropped.
|
||||
expect(h.createPage).toHaveBeenCalledTimes(1);
|
||||
expect(h.createPage).toHaveBeenCalledWith({
|
||||
spaceId: "s1",
|
||||
title: "Offline page",
|
||||
});
|
||||
});
|
||||
|
||||
it("makes a rehydrated paused move replayable by resumePausedMutations", async () => {
|
||||
const offlineClient = new QueryClient();
|
||||
const observer = offlineClient.getMutationCache().build(offlineClient, {
|
||||
mutationKey: offlineMutationKeys.movePage,
|
||||
});
|
||||
observer.state.isPaused = true;
|
||||
observer.state.status = "pending";
|
||||
observer.state.variables = { pageId: "p1", parentPageId: null, position: "a" };
|
||||
|
||||
const dehydrated = dehydrate(offlineClient, {
|
||||
shouldDehydrateMutation: () => true,
|
||||
});
|
||||
|
||||
const freshClient = new QueryClient();
|
||||
registerOfflineMutationDefaults(freshClient);
|
||||
hydrate(freshClient, dehydrated);
|
||||
await freshClient.resumePausedMutations();
|
||||
|
||||
expect(h.movePage).toHaveBeenCalledTimes(1);
|
||||
expect(h.movePage).toHaveBeenCalledWith({
|
||||
pageId: "p1",
|
||||
parentPageId: null,
|
||||
position: "a",
|
||||
});
|
||||
});
|
||||
});
|
||||
64
apps/client/src/features/offline/offline-mutations.ts
Normal file
64
apps/client/src/features/offline/offline-mutations.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import type { QueryClient } from "@tanstack/react-query";
|
||||
import { createPage, movePage } from "@/features/page/services/page-service";
|
||||
import { createComment } from "@/features/comment/services/comment-service";
|
||||
import { invalidateOnCreatePage } from "@/features/page/queries/page-query";
|
||||
import type {
|
||||
IMovePage,
|
||||
IPage,
|
||||
IPageInput,
|
||||
} from "@/features/page/types/page.types";
|
||||
import type { IComment } from "@/features/comment/types/comment.types";
|
||||
|
||||
/**
|
||||
* Stable mutation keys for the offline-relevant structural mutations.
|
||||
*
|
||||
* When the browser goes offline, React Query PAUSES these mutations and the
|
||||
* PersistQueryClientProvider dehydrates the paused mutation into IndexedDB. On a
|
||||
* reload-while-offline the mutation is restored, but a restored mutation has NO
|
||||
* observer (no component is mounted) — so its replay relies entirely on the
|
||||
* `mutationFn` registered via `setMutationDefaults` for its `mutationKey`.
|
||||
* Without that, `resumePausedMutations()` finds a paused mutation with no
|
||||
* `mutationFn` and silently no-ops, dropping the offline create/move/comment
|
||||
* (#237/#238). Each offline mutation hook tags itself with the matching key so
|
||||
* the rehydrated paused mutation can find its default `mutationFn` and replay.
|
||||
*/
|
||||
export const offlineMutationKeys = {
|
||||
createPage: ["create-page"] as const,
|
||||
movePage: ["move-page"] as const,
|
||||
createComment: ["create-comment"] as const,
|
||||
};
|
||||
|
||||
/**
|
||||
* Register default `mutationFn`s (and the minimal success side effects safe to
|
||||
* run without a mounted component) for the offline-relevant mutation keys, so a
|
||||
* paused mutation restored from IndexedDB after an offline reload is replayable
|
||||
* by `resumePausedMutations()` on reconnect.
|
||||
*
|
||||
* Called once when the QueryClient is created (see main.tsx). The hooks still
|
||||
* carry their own inline `mutationFn`/`onSuccess` for the live in-session path;
|
||||
* these defaults only take over for a rehydrated paused mutation that lost its
|
||||
* observer across the reload.
|
||||
*/
|
||||
export function registerOfflineMutationDefaults(queryClient: QueryClient): void {
|
||||
queryClient.setMutationDefaults(offlineMutationKeys.createPage, {
|
||||
mutationFn: (data: Partial<IPageInput>) => createPage(data),
|
||||
// Re-converge the sidebar tree / recent-changes from the authoritative
|
||||
// create response. Pure cache writes — safe with no component mounted.
|
||||
onSuccess: (data: IPage) => {
|
||||
invalidateOnCreatePage(data);
|
||||
},
|
||||
});
|
||||
|
||||
queryClient.setMutationDefaults(offlineMutationKeys.movePage, {
|
||||
// Replay the server-side move. The tree re-converges from the next online
|
||||
// sidebar fetch / websocket `moveTreeNode` echo, so no cache write is
|
||||
// needed here (the optimistic tree state was local-only anyway).
|
||||
mutationFn: (data: IMovePage) => movePage(data),
|
||||
});
|
||||
|
||||
queryClient.setMutationDefaults(offlineMutationKeys.createComment, {
|
||||
// Replay the server-side comment create. The comments list refetches on the
|
||||
// online reload, so the replay only needs to persist the write.
|
||||
mutationFn: (data: Partial<IComment>) => createComment(data),
|
||||
});
|
||||
}
|
||||
48
apps/client/src/features/offline/persist-roots.guard.test.ts
Normal file
48
apps/client/src/features/offline/persist-roots.guard.test.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
|
||||
// The query modules transitively import the app entry (@/main.tsx) for the
|
||||
// shared queryClient; mock it so importing the key factories has no side effects.
|
||||
import { vi } from "vitest";
|
||||
vi.mock("@/main.tsx", () => ({
|
||||
queryClient: { setQueryData: vi.fn(), getQueryData: vi.fn() },
|
||||
}));
|
||||
|
||||
import { OFFLINE_PERSIST_ROOTS } from "./query-persister";
|
||||
import { pageKeys } from "@/features/page/queries/page-query";
|
||||
import { spaceKeys } from "@/features/space/queries/space-query";
|
||||
import { RQ_KEY } from "@/features/comment/queries/comment-query";
|
||||
import { userKeys } from "@/features/user/hooks/use-current-user";
|
||||
|
||||
/**
|
||||
* Architecture guard (#13): every string persisted via OFFLINE_PERSIST_ROOTS
|
||||
* must be the ROOT (queryKey[0]) of some exported query-key factory. If a
|
||||
* factory's root is renamed without updating the persist registry — or vice
|
||||
* versa — offline persist/warm silently breaks (persisted keys never match the
|
||||
* live queries). This turns that silent regression into a red build.
|
||||
*
|
||||
* Each factory is invoked with throwaway args; only queryKey[0] is inspected.
|
||||
*/
|
||||
function rootOf(key: readonly unknown[]): string {
|
||||
return String(key[0]);
|
||||
}
|
||||
|
||||
const FACTORY_ROOTS = new Set<string>([
|
||||
rootOf(pageKeys.detail("x")),
|
||||
rootOf(pageKeys.sidebar({})),
|
||||
rootOf(pageKeys.rootSidebar("x")),
|
||||
rootOf(pageKeys.breadcrumbs("x")),
|
||||
rootOf(pageKeys.recentChanges("x")),
|
||||
rootOf(spaceKeys.detail("x")),
|
||||
rootOf(spaceKeys.list()),
|
||||
rootOf(RQ_KEY("x")),
|
||||
rootOf(userKeys.currentUser()),
|
||||
]);
|
||||
|
||||
describe("OFFLINE_PERSIST_ROOTS is backed by real query-key factories", () => {
|
||||
it("maps every persisted root to an exported factory root", () => {
|
||||
const unbacked = [...OFFLINE_PERSIST_ROOTS].filter(
|
||||
(root) => !FACTORY_ROOTS.has(root),
|
||||
);
|
||||
expect(unbacked).toEqual([]);
|
||||
});
|
||||
});
|
||||
89
apps/client/src/features/offline/query-persister.test.ts
Normal file
89
apps/client/src/features/offline/query-persister.test.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import {
|
||||
shouldDehydrateOfflineQuery,
|
||||
OFFLINE_PERSIST_ROOTS,
|
||||
} from "./query-persister";
|
||||
|
||||
// Small helper to build the structural query shape the predicate reads.
|
||||
const makeQuery = (status: string, queryKey: readonly unknown[]) =>
|
||||
({ state: { status }, queryKey }) as any;
|
||||
|
||||
describe("shouldDehydrateOfflineQuery", () => {
|
||||
it("returns true for a successful query whose root is in the allowlist", () => {
|
||||
expect(shouldDehydrateOfflineQuery(makeQuery("success", ["pages", "abc"]))).toBe(
|
||||
true,
|
||||
);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(
|
||||
makeQuery("success", ["sidebar-pages", { pageId: "p", spaceId: "s" }]),
|
||||
),
|
||||
).toBe(true);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["comments", "p1"])),
|
||||
).toBe(true);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["space", "s"])),
|
||||
).toBe(true);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["recent-changes"])),
|
||||
).toBe(true);
|
||||
// currentUser is persisted so the auth-gated Layout can hydrate offline.
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["currentUser"])),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("returns false when the status is not success (status gate)", () => {
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("pending", ["pages", "abc"])),
|
||||
).toBe(false);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("error", ["pages", "abc"])),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false for a successful query whose root is NOT in the allowlist (privacy gate)", () => {
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["collab-token", "ws"])),
|
||||
).toBe(false);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["trash", "s"])),
|
||||
).toBe(false);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", ["unknown"])),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false for an empty/undefined queryKey", () => {
|
||||
// String(undefined) is not a member of the allowlist.
|
||||
expect(shouldDehydrateOfflineQuery(makeQuery("success", []))).toBe(false);
|
||||
expect(
|
||||
shouldDehydrateOfflineQuery(makeQuery("success", undefined as any)),
|
||||
).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("OFFLINE_PERSIST_ROOTS", () => {
|
||||
it("contains exactly the expected 9 navigation/read roots", () => {
|
||||
const expected = [
|
||||
"pages",
|
||||
"sidebar-pages",
|
||||
"root-sidebar-pages",
|
||||
"breadcrumbs",
|
||||
"comments",
|
||||
"space",
|
||||
"spaces",
|
||||
"recent-changes",
|
||||
"currentUser",
|
||||
];
|
||||
expect(OFFLINE_PERSIST_ROOTS.size).toBe(9);
|
||||
for (const root of expected) {
|
||||
expect(OFFLINE_PERSIST_ROOTS.has(root)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it("does NOT contain volatile/auth keys", () => {
|
||||
expect(OFFLINE_PERSIST_ROOTS.has("collab-token")).toBe(false);
|
||||
expect(OFFLINE_PERSIST_ROOTS.has("trash")).toBe(false);
|
||||
});
|
||||
});
|
||||
58
apps/client/src/features/offline/query-persister.ts
Normal file
58
apps/client/src/features/offline/query-persister.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { get, set, del } from "idb-keyval";
|
||||
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
|
||||
|
||||
// Structural subset of a TanStack Query we read when deciding what to persist.
|
||||
// We avoid importing the branded `Query` class because the persist-client and
|
||||
// react-query may resolve to different `@tanstack/query-core` copies, whose
|
||||
// `Query` types are nominally incompatible (private brand). This structural
|
||||
// shape stays assignable to whichever copy the persister expects.
|
||||
type DehydratableQuery = {
|
||||
state: { status: string };
|
||||
queryKey: readonly unknown[];
|
||||
};
|
||||
|
||||
// idb-keyval key under which TanStack Query persists its dehydrated cache.
|
||||
// Exported so the logout cache-clear logic deletes the exact same key (no
|
||||
// magic-string drift between persist and purge).
|
||||
export const OFFLINE_CACHE_KEY = "gitmost-rq-cache";
|
||||
|
||||
// IndexedDB-backed storage adapter for TanStack Query's async persister.
|
||||
const idbStorage = {
|
||||
getItem: (key: string) => get<string>(key).then((v) => v ?? null),
|
||||
setItem: (key: string, value: string) => set(key, value),
|
||||
removeItem: (key: string) => del(key),
|
||||
};
|
||||
|
||||
export const queryPersister = createAsyncStoragePersister({
|
||||
storage: idbStorage,
|
||||
key: OFFLINE_CACHE_KEY,
|
||||
throttleTime: 1000,
|
||||
});
|
||||
|
||||
// Only navigation/read query roots are persisted for offline reading.
|
||||
// Volatile/auth queries (collab tokens, trash lists) are intentionally excluded.
|
||||
//
|
||||
// `currentUser` IS persisted: UserProvider gates the entire <Layout> subtree on
|
||||
// useCurrentUser(), and offline the POST /api/users/me fails as a no-response
|
||||
// network error. Without the persisted/hydrated user the gate blanked every
|
||||
// authenticated route on an offline cold boot (#237/#238). It is the logged-in
|
||||
// user's own profile (already mirrored to localStorage["currentUser"]), so
|
||||
// persisting it to IndexedDB leaks nothing new while unlocking offline reads.
|
||||
export const OFFLINE_PERSIST_ROOTS = new Set<string>([
|
||||
"pages",
|
||||
"sidebar-pages",
|
||||
"root-sidebar-pages",
|
||||
"breadcrumbs",
|
||||
"comments",
|
||||
"space",
|
||||
"spaces",
|
||||
"recent-changes",
|
||||
"currentUser",
|
||||
]);
|
||||
|
||||
export function shouldDehydrateOfflineQuery(query: DehydratableQuery): boolean {
|
||||
return (
|
||||
query.state.status === "success" &&
|
||||
OFFLINE_PERSIST_ROOTS.has(String(query.queryKey?.[0]))
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useAtomValue } from "jotai";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { findBreadcrumbPath } from "@/features/page/tree/utils";
|
||||
import { computeBreadcrumbState } from "./breadcrumb.utils";
|
||||
import {
|
||||
Button,
|
||||
Anchor,
|
||||
@@ -15,8 +15,12 @@ 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 { IPage } from "@/features/page/types/page.types.ts";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { usePageQuery } from "@/features/page/queries/page-query.ts";
|
||||
import {
|
||||
usePageQuery,
|
||||
usePageBreadcrumbsQuery,
|
||||
} from "@/features/page/queries/page-query.ts";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -38,14 +42,29 @@ export default function Breadcrumb() {
|
||||
const { data: currentPage } = usePageQuery({
|
||||
pageId: extractPageSlugId(pageSlug),
|
||||
});
|
||||
// The page's own ancestor chain, fetched independently of the lazily-built
|
||||
// sidebar tree so a deep page doesn't render a blank breadcrumb for seconds
|
||||
// while the tree backfills (#218).
|
||||
const { data: ancestors } = usePageBreadcrumbsQuery(currentPage?.id);
|
||||
const isMobile = useMediaQuery("(max-width: 48em)");
|
||||
|
||||
useEffect(() => {
|
||||
if (treeData?.length > 0 && currentPage) {
|
||||
const breadcrumb = findBreadcrumbPath(treeData, currentPage.id);
|
||||
setBreadcrumbNodes(breadcrumb || null);
|
||||
}
|
||||
}, [currentPage?.id, treeData]);
|
||||
if (!currentPage) return;
|
||||
|
||||
// Selection/mapping + stale-clearing live in a pure, unit-tested helper
|
||||
// (#218). It resolves the correct chain when possible and, on a transient
|
||||
// miss, clears a chain left over from a previously-viewed page instead of
|
||||
// showing the wrong trail — while keeping a chain already resolved for THIS
|
||||
// page to avoid a blank flash.
|
||||
setBreadcrumbNodes((previous) =>
|
||||
computeBreadcrumbState(
|
||||
treeData,
|
||||
ancestors as IPage[] | undefined,
|
||||
currentPage.id,
|
||||
previous,
|
||||
),
|
||||
);
|
||||
}, [currentPage?.id, treeData, ancestors]);
|
||||
|
||||
const HiddenNodesTooltipContent = () =>
|
||||
breadcrumbNodes?.slice(1, -1).map((node) => (
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import {
|
||||
computeBreadcrumbState,
|
||||
resolveBreadcrumbNodes,
|
||||
} from "./breadcrumb.utils";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
|
||||
// Pure selection/mapping behind the breadcrumb (#218): tree-hit prefers the live
|
||||
// sidebar tree, tree-miss maps the page's own ancestors, and "no data" returns
|
||||
// null so the component keeps its prior state.
|
||||
|
||||
function treeNode(id: string, over?: Partial<SpaceTreeNode>): SpaceTreeNode {
|
||||
return {
|
||||
id,
|
||||
slugId: `slug-${id}`,
|
||||
name: `node-${id}`,
|
||||
icon: null,
|
||||
position: "a",
|
||||
hasChildren: false,
|
||||
spaceId: "space-1",
|
||||
parentPageId: null,
|
||||
children: [],
|
||||
...over,
|
||||
} as SpaceTreeNode;
|
||||
}
|
||||
|
||||
function ancestorPage(id: string, over?: Partial<IPage>): IPage {
|
||||
return {
|
||||
id,
|
||||
slugId: `slug-${id}`,
|
||||
title: `title-${id}`,
|
||||
icon: "📄",
|
||||
position: "m",
|
||||
spaceId: "space-1",
|
||||
parentPageId: null,
|
||||
hasChildren: true,
|
||||
...over,
|
||||
} as IPage;
|
||||
}
|
||||
|
||||
describe("resolveBreadcrumbNodes", () => {
|
||||
it("tree-hit: returns the path found in the live sidebar tree", () => {
|
||||
const child = treeNode("child");
|
||||
const root = treeNode("root", { hasChildren: true, children: [child] });
|
||||
// findBreadcrumbPath walks the tree; the chain ends at the target page.
|
||||
const result = resolveBreadcrumbNodes([root], [ancestorPage("child")], "child");
|
||||
|
||||
expect(result).not.toBeNull();
|
||||
expect(result!.map((n) => n.id)).toEqual(["root", "child"]);
|
||||
// Came from the tree, NOT the ancestor mapping (icon stays the tree's null).
|
||||
expect(result![result!.length - 1].icon).toBeNull();
|
||||
});
|
||||
|
||||
it("tree-miss: maps the page's own ancestors (title->name, hasChildren default)", () => {
|
||||
// Tree has no node for the target page -> findBreadcrumbPath misses.
|
||||
const unrelated = treeNode("unrelated");
|
||||
const ancestors = [
|
||||
ancestorPage("a", { hasChildren: true }),
|
||||
ancestorPage("b", { hasChildren: undefined as any }),
|
||||
];
|
||||
|
||||
const result = resolveBreadcrumbNodes([unrelated], ancestors, "missing-page");
|
||||
|
||||
expect(result).not.toBeNull();
|
||||
expect(result!.map((n) => n.id)).toEqual(["a", "b"]);
|
||||
// Non-trivial field transform: title -> name.
|
||||
expect(result![0].name).toBe("title-a");
|
||||
// hasChildren defaults to false when the ancestor row omits it.
|
||||
expect(result![1].hasChildren).toBe(false);
|
||||
expect(result![0].hasChildren).toBe(true);
|
||||
});
|
||||
|
||||
it("falls back to ancestors when the tree is empty", () => {
|
||||
const result = resolveBreadcrumbNodes([], [ancestorPage("a")], "a");
|
||||
expect(result!.map((n) => n.id)).toEqual(["a"]);
|
||||
});
|
||||
|
||||
it("returns null when there is no tree hit and no ancestor data", () => {
|
||||
expect(resolveBreadcrumbNodes([], [], "x")).toBeNull();
|
||||
expect(resolveBreadcrumbNodes(undefined, undefined, "x")).toBeNull();
|
||||
expect(resolveBreadcrumbNodes(null, null, "x")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("computeBreadcrumbState (stale-chain clearing on navigation)", () => {
|
||||
it("uses a freshly resolved chain when available", () => {
|
||||
const child = treeNode("B");
|
||||
const root = treeNode("root", { hasChildren: true, children: [child] });
|
||||
const next = computeBreadcrumbState([root], null, "B", null);
|
||||
expect(next!.map((n) => n.id)).toEqual(["root", "B"]);
|
||||
});
|
||||
|
||||
it("navigating A->B to a page absent from treeData clears the previous A chain (no stale trail)", () => {
|
||||
// Previous chain ends at page A; we are now on page B, which is not yet in
|
||||
// the lazily-built tree and whose ancestors have not loaded.
|
||||
const previous = [treeNode("rootA"), treeNode("A")];
|
||||
const next = computeBreadcrumbState([treeNode("unrelated")], undefined, "B", previous);
|
||||
// Must NOT keep showing A's (clickable) chain.
|
||||
expect(next).toBeNull();
|
||||
});
|
||||
|
||||
it("keeps a chain that already ends at the current page through a transient miss", () => {
|
||||
// We already resolved B once (chain ends at B); a transient miss must not
|
||||
// blank it.
|
||||
const previous = [treeNode("rootB"), treeNode("B")];
|
||||
const next = computeBreadcrumbState([], undefined, "B", previous);
|
||||
expect(next).toBe(previous);
|
||||
});
|
||||
|
||||
it("returns null when nothing resolves and there is no previous chain", () => {
|
||||
expect(computeBreadcrumbState([], undefined, "B", null)).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import { findBreadcrumbPath, pageToTreeNode } from "@/features/page/tree/utils";
|
||||
|
||||
/**
|
||||
* Pure selection/mapping for the breadcrumb nodes (#218). Three branches:
|
||||
* 1. tree-hit — the lazily-built sidebar tree already contains this page's
|
||||
* ancestor chain, so prefer it (stays live with sidebar renames/moves).
|
||||
* 2. tree-miss — fall back to the page's own ancestor data so a deep page
|
||||
* resolves immediately instead of rendering a blank breadcrumb for seconds
|
||||
* while the tree backfills. Mapped through the canonical `pageToTreeNode`
|
||||
* (title -> name, hasChildren defaulted to false).
|
||||
* 3. neither — no data yet, return null (the caller decides whether to keep
|
||||
* a prior chain via computeBreadcrumbState).
|
||||
*/
|
||||
export function resolveBreadcrumbNodes(
|
||||
treeData: SpaceTreeNode[] | null | undefined,
|
||||
ancestors: IPage[] | null | undefined,
|
||||
pageId: string,
|
||||
): SpaceTreeNode[] | null {
|
||||
if (treeData && treeData.length > 0) {
|
||||
const breadcrumb = findBreadcrumbPath(treeData, pageId);
|
||||
if (breadcrumb) {
|
||||
return breadcrumb;
|
||||
}
|
||||
}
|
||||
|
||||
if (ancestors && ancestors.length > 0) {
|
||||
return ancestors.map((page) =>
|
||||
pageToTreeNode(page, { hasChildren: page.hasChildren ?? false }),
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decide the next breadcrumb state, given the previous one. When a chain
|
||||
* resolves (#218) it always wins. When nothing resolves yet, a stale chain from
|
||||
* a previously-viewed page must be CLEARED rather than left showing the wrong,
|
||||
* clickable trail (the reverse regression of the original blank-breadcrumb fix
|
||||
* when navigating A -> B to a deep page not yet in the lazily-built tree). The
|
||||
* one chain we keep through a transient miss is one that already ends at the
|
||||
* current page — that means we already resolved THIS page, so keeping it avoids
|
||||
* a needless blank flash without ever showing the previous page's chain.
|
||||
*/
|
||||
export function computeBreadcrumbState(
|
||||
treeData: SpaceTreeNode[] | null | undefined,
|
||||
ancestors: IPage[] | null | undefined,
|
||||
pageId: string,
|
||||
previous: SpaceTreeNode[] | null,
|
||||
): SpaceTreeNode[] | null {
|
||||
const resolved = resolveBreadcrumbNodes(treeData, ancestors, pageId);
|
||||
if (resolved) {
|
||||
return resolved;
|
||||
}
|
||||
|
||||
const previousEndsAtCurrentPage =
|
||||
previous != null && previous[previous.length - 1]?.id === pageId;
|
||||
return previousEndsAtCurrentPage ? previous : null;
|
||||
}
|
||||
@@ -12,6 +12,8 @@ import {
|
||||
IconList,
|
||||
IconMarkdown,
|
||||
IconPrinter,
|
||||
IconCloud,
|
||||
IconCloudCheck,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
IconTrash,
|
||||
@@ -39,6 +41,8 @@ import { Trans, useTranslation } from "react-i18next";
|
||||
import ExportModal from "@/components/common/export-modal";
|
||||
import { htmlToMarkdown } from "@docmost/editor-ext";
|
||||
import {
|
||||
isLocalSyncedAtom,
|
||||
isRemoteSyncedAtom,
|
||||
pageEditorAtom,
|
||||
yjsConnectionStatusAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms.ts";
|
||||
@@ -411,14 +415,16 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
function ConnectionWarning() {
|
||||
const { t } = useTranslation();
|
||||
const yjsConnectionStatus = useAtomValue(yjsConnectionStatusAtom);
|
||||
const isLocalSynced = useAtomValue(isLocalSyncedAtom);
|
||||
const isRemoteSynced = useAtomValue(isRemoteSyncedAtom);
|
||||
const [showWarning, setShowWarning] = useState(false);
|
||||
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const isDisconnected = ["disconnected", "connecting"].includes(
|
||||
yjsConnectionStatus,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDisconnected) {
|
||||
if (!timeoutRef.current) {
|
||||
timeoutRef.current = setTimeout(() => setShowWarning(true), 5000);
|
||||
@@ -430,7 +436,7 @@ function ConnectionWarning() {
|
||||
}
|
||||
setShowWarning(false);
|
||||
}
|
||||
}, [yjsConnectionStatus]);
|
||||
}, [isDisconnected]);
|
||||
|
||||
// Cleanup only on unmount
|
||||
useEffect(() => {
|
||||
@@ -441,19 +447,21 @@ function ConnectionWarning() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// State (1): offline/disconnected — changes are kept locally. Preserve the
|
||||
// existing >5s debounce before surfacing this state.
|
||||
if (isDisconnected) {
|
||||
if (!showWarning) return null;
|
||||
|
||||
const offlineLabel = t(
|
||||
"Offline — changes are saved locally and will sync when you reconnect",
|
||||
);
|
||||
return (
|
||||
<Tooltip
|
||||
label={t("Real-time editor connection lost. Retrying...")}
|
||||
openDelay={250}
|
||||
withArrow
|
||||
>
|
||||
<Tooltip label={offlineLabel} openDelay={250} withArrow>
|
||||
<ThemeIcon
|
||||
variant="default"
|
||||
c="red"
|
||||
role="status"
|
||||
aria-label={t("Real-time editor connection lost. Retrying...")}
|
||||
aria-label={offlineLabel}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
<IconWifiOff size={20} stroke={2} />
|
||||
@@ -461,3 +469,38 @@ function ConnectionWarning() {
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
// State (2): connected but the remote replica is not fully caught up yet.
|
||||
if (!isRemoteSynced || !isLocalSynced) {
|
||||
const syncingLabel = t("Syncing changes…");
|
||||
return (
|
||||
<Tooltip label={syncingLabel} openDelay={250} withArrow>
|
||||
<ThemeIcon
|
||||
variant="default"
|
||||
c="dimmed"
|
||||
role="status"
|
||||
aria-label={syncingLabel}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
<IconCloud size={20} stroke={2} />
|
||||
</ThemeIcon>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
// State (3): fully synced — subtle confirmation indicator.
|
||||
const syncedLabel = t("All changes synced");
|
||||
return (
|
||||
<Tooltip label={syncedLabel} openDelay={250} withArrow>
|
||||
<ThemeIcon
|
||||
variant="default"
|
||||
c="dimmed"
|
||||
role="status"
|
||||
aria-label={syncedLabel}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
<IconCloudCheck size={20} stroke={2} />
|
||||
</ThemeIcon>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
InfiniteData,
|
||||
QueryKey,
|
||||
queryOptions,
|
||||
useInfiniteQuery,
|
||||
UseInfiniteQueryResult,
|
||||
useMutation,
|
||||
@@ -42,12 +43,38 @@ import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit";
|
||||
import { moveToTrashNotificationMessage } from "@/features/page/components/move-to-trash-notification";
|
||||
import { offlineMutationKeys } from "@/features/offline/offline-mutations";
|
||||
|
||||
/**
|
||||
* Centralized React Query key factories for page queries. The hooks below and
|
||||
* the offline warm path (features/offline/make-offline.ts) share these so the
|
||||
* runtime keys can never silently drift apart.
|
||||
*/
|
||||
export const pageKeys = {
|
||||
detail: (idOrSlug: string) => ["pages", idOrSlug] as const,
|
||||
sidebar: (data: unknown) => ["sidebar-pages", data] as const,
|
||||
rootSidebar: (spaceId: string) => ["root-sidebar-pages", spaceId] as const,
|
||||
breadcrumbs: (pageId: string) => ["breadcrumbs", pageId] as const,
|
||||
recentChanges: (spaceId?: string) => ["recent-changes", spaceId] as const,
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared queryOptions for the sidebar-pages (ancestor children) query. Both
|
||||
* fetchAllAncestorChildren and the offline warm path consume this so the key,
|
||||
* queryFn and staleTime stay identical.
|
||||
*/
|
||||
export const sidebarPagesQueryOptions = (params: SidebarPagesParams) =>
|
||||
queryOptions({
|
||||
queryKey: pageKeys.sidebar(params),
|
||||
queryFn: () => getAllSidebarPages(params),
|
||||
staleTime: 30 * 60 * 1000,
|
||||
});
|
||||
|
||||
export function usePageQuery(
|
||||
pageInput: Partial<IPageInput>,
|
||||
): UseQueryResult<IPage, Error> {
|
||||
const query = useQuery({
|
||||
queryKey: ["pages", pageInput.pageId],
|
||||
queryKey: pageKeys.detail(pageInput.pageId),
|
||||
queryFn: () => getPageById(pageInput),
|
||||
enabled: !!pageInput.pageId,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
@@ -56,9 +83,9 @@ export function usePageQuery(
|
||||
useEffect(() => {
|
||||
if (query.data) {
|
||||
if (isValidUuid(pageInput.pageId)) {
|
||||
queryClient.setQueryData(["pages", query.data.slugId], query.data);
|
||||
queryClient.setQueryData(pageKeys.detail(query.data.slugId), query.data);
|
||||
} else {
|
||||
queryClient.setQueryData(["pages", query.data.id], query.data);
|
||||
queryClient.setQueryData(pageKeys.detail(query.data.id), query.data);
|
||||
}
|
||||
}
|
||||
}, [query.data]);
|
||||
@@ -69,6 +96,10 @@ export function usePageQuery(
|
||||
export function useCreatePageMutation() {
|
||||
const { t } = useTranslation();
|
||||
return useMutation<IPage, Error, Partial<IPageInput>>({
|
||||
// Stable key so a paused create restored from IndexedDB after an offline
|
||||
// reload finds its default mutationFn (registerOfflineMutationDefaults) and
|
||||
// is replayed by resumePausedMutations() on reconnect instead of being lost.
|
||||
mutationKey: offlineMutationKeys.createPage,
|
||||
mutationFn: (data) => createPage(data),
|
||||
onSuccess: (data) => {
|
||||
invalidateOnCreatePage(data);
|
||||
@@ -80,18 +111,20 @@ export function useCreatePageMutation() {
|
||||
}
|
||||
|
||||
export function updatePageData(data: IPage) {
|
||||
const pageBySlug = queryClient.getQueryData<IPage>(["pages", data.slugId]);
|
||||
const pageById = queryClient.getQueryData<IPage>(["pages", data.id]);
|
||||
const pageBySlug = queryClient.getQueryData<IPage>(
|
||||
pageKeys.detail(data.slugId),
|
||||
);
|
||||
const pageById = queryClient.getQueryData<IPage>(pageKeys.detail(data.id));
|
||||
|
||||
if (pageBySlug) {
|
||||
queryClient.setQueryData(["pages", data.slugId], {
|
||||
queryClient.setQueryData(pageKeys.detail(data.slugId), {
|
||||
...pageBySlug,
|
||||
...data,
|
||||
});
|
||||
}
|
||||
|
||||
if (pageById) {
|
||||
queryClient.setQueryData(["pages", data.id], { ...pageById, ...data });
|
||||
queryClient.setQueryData(pageKeys.detail(data.id), { ...pageById, ...data });
|
||||
}
|
||||
|
||||
invalidateOnUpdatePage(
|
||||
@@ -145,11 +178,11 @@ export function useRemovePageMutation() {
|
||||
});
|
||||
|
||||
// Stamp deletedAt so a re-visit shows the trash banner, not stale state.
|
||||
const cached = queryClient.getQueryData<IPage>(["pages", pageId]);
|
||||
const cached = queryClient.getQueryData<IPage>(pageKeys.detail(pageId));
|
||||
if (cached) {
|
||||
const stamped = { ...cached, deletedAt: new Date() };
|
||||
queryClient.setQueryData(["pages", cached.id], stamped);
|
||||
queryClient.setQueryData(["pages", cached.slugId], stamped);
|
||||
queryClient.setQueryData(pageKeys.detail(cached.id), stamped);
|
||||
queryClient.setQueryData(pageKeys.detail(cached.slugId), stamped);
|
||||
}
|
||||
|
||||
invalidateOnDeletePage(pageId);
|
||||
@@ -188,6 +221,9 @@ export function useDeletePageMutation() {
|
||||
|
||||
export function useMovePageMutation() {
|
||||
return useMutation<void, Error, IMovePage>({
|
||||
// Stable key so a paused move restored from IndexedDB after an offline
|
||||
// reload finds its default mutationFn and is replayed on reconnect.
|
||||
mutationKey: offlineMutationKeys.movePage,
|
||||
mutationFn: (data) => movePage(data),
|
||||
});
|
||||
}
|
||||
@@ -267,8 +303,11 @@ export function useRestorePageMutation() {
|
||||
// Replace would strip space/permissions/content and break the editor.
|
||||
const merge = (cached: IPage | undefined) =>
|
||||
cached ? { ...cached, ...restoredPage } : cached;
|
||||
queryClient.setQueryData<IPage>(["pages", restoredPage.id], merge);
|
||||
queryClient.setQueryData<IPage>(["pages", restoredPage.slugId], merge);
|
||||
queryClient.setQueryData<IPage>(pageKeys.detail(restoredPage.id), merge);
|
||||
queryClient.setQueryData<IPage>(
|
||||
pageKeys.detail(restoredPage.slugId),
|
||||
merge,
|
||||
);
|
||||
},
|
||||
onError: (error) => {
|
||||
notifications.show({
|
||||
@@ -283,7 +322,7 @@ export function useGetSidebarPagesQuery(
|
||||
data: SidebarPagesParams | null,
|
||||
): UseInfiniteQueryResult<InfiniteData<IPagination<IPage>, unknown>> {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["sidebar-pages", data],
|
||||
queryKey: pageKeys.sidebar(data),
|
||||
enabled: !!data?.pageId || !!data?.spaceId,
|
||||
queryFn: ({ pageParam }) =>
|
||||
getSidebarPages({ ...data, cursor: pageParam, limit: 100 }),
|
||||
@@ -294,7 +333,7 @@ export function useGetSidebarPagesQuery(
|
||||
|
||||
export function useGetRootSidebarPagesQuery(data: SidebarPagesParams) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["root-sidebar-pages", data.spaceId],
|
||||
queryKey: pageKeys.rootSidebar(data.spaceId),
|
||||
queryFn: async ({ pageParam }) => {
|
||||
return getSidebarPages({
|
||||
spaceId: data.spaceId,
|
||||
@@ -320,7 +359,7 @@ export function usePageBreadcrumbsQuery(
|
||||
pageId: string,
|
||||
): UseQueryResult<Partial<IPage[]>, Error> {
|
||||
return useQuery({
|
||||
queryKey: ["breadcrumbs", pageId],
|
||||
queryKey: pageKeys.breadcrumbs(pageId),
|
||||
queryFn: () => getPageBreadcrumbs(pageId),
|
||||
enabled: !!pageId,
|
||||
});
|
||||
@@ -332,10 +371,12 @@ export async function fetchAllAncestorChildren(
|
||||
// refresh (#159 #8), which must NOT receive the 30-min-cached children.
|
||||
opts?: { fresh?: boolean },
|
||||
) {
|
||||
// not using a hook here, so we can call it inside a useEffect hook
|
||||
// not using a hook here, so we can call it inside a useEffect hook. Reuse the
|
||||
// shared sidebarPagesQueryOptions (key + queryFn) so the offline warm path and
|
||||
// this fetch never drift, but override staleTime for the `fresh` reconnect
|
||||
// refresh (#159 #8), which must force a server refetch (staleTime 0).
|
||||
const response = await queryClient.fetchQuery({
|
||||
queryKey: ["sidebar-pages", params],
|
||||
queryFn: () => getAllSidebarPages(params),
|
||||
...sidebarPagesQueryOptions(params),
|
||||
staleTime: opts?.fresh ? 0 : 30 * 60 * 1000,
|
||||
});
|
||||
|
||||
@@ -345,7 +386,7 @@ export async function fetchAllAncestorChildren(
|
||||
|
||||
export function useRecentChangesQuery(spaceId?: string) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["recent-changes", spaceId],
|
||||
queryKey: pageKeys.recentChanges(spaceId),
|
||||
queryFn: ({ pageParam }) =>
|
||||
getRecentChanges({ spaceId, cursor: pageParam, limit: 15 }),
|
||||
initialPageParam: undefined as string | undefined,
|
||||
@@ -416,12 +457,12 @@ export function invalidateOnCreatePage(data: Partial<IPage>) {
|
||||
|
||||
let queryKey: QueryKey = null;
|
||||
if (data.parentPageId === null) {
|
||||
queryKey = ["root-sidebar-pages", data.spaceId];
|
||||
queryKey = pageKeys.rootSidebar(data.spaceId);
|
||||
} else {
|
||||
queryKey = [
|
||||
"sidebar-pages",
|
||||
{ pageId: data.parentPageId, spaceId: data.spaceId },
|
||||
];
|
||||
queryKey = pageKeys.sidebar({
|
||||
pageId: data.parentPageId,
|
||||
spaceId: data.spaceId,
|
||||
});
|
||||
}
|
||||
|
||||
//update all sidebar pages
|
||||
@@ -481,7 +522,7 @@ export function invalidateOnCreatePage(data: Partial<IPage>) {
|
||||
|
||||
//update root sidebar pages haschildern
|
||||
const rootSideBarMatches = queryClient.getQueriesData({
|
||||
queryKey: ["root-sidebar-pages", data.spaceId],
|
||||
queryKey: pageKeys.rootSidebar(data.spaceId),
|
||||
exact: false,
|
||||
});
|
||||
|
||||
@@ -505,7 +546,7 @@ export function invalidateOnCreatePage(data: Partial<IPage>) {
|
||||
|
||||
//update recent changes
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["recent-changes", data.spaceId],
|
||||
queryKey: pageKeys.recentChanges(data.spaceId),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -519,9 +560,9 @@ export function invalidateOnUpdatePage(
|
||||
invalidatePageTree();
|
||||
let queryKey: QueryKey = null;
|
||||
if (parentPageId === null) {
|
||||
queryKey = ["root-sidebar-pages", spaceId];
|
||||
queryKey = pageKeys.rootSidebar(spaceId);
|
||||
} else {
|
||||
queryKey = ["sidebar-pages", { pageId: parentPageId, spaceId: spaceId }];
|
||||
queryKey = pageKeys.sidebar({ pageId: parentPageId, spaceId: spaceId });
|
||||
}
|
||||
//update all sidebar pages
|
||||
queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(
|
||||
@@ -544,7 +585,7 @@ export function invalidateOnUpdatePage(
|
||||
|
||||
//update recent changes
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["recent-changes", spaceId],
|
||||
queryKey: pageKeys.recentChanges(spaceId),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -559,8 +600,8 @@ export function updateCacheOnMovePage(
|
||||
// Remove page from old parent's cache
|
||||
const oldQueryKey =
|
||||
oldParentId === null
|
||||
? ["root-sidebar-pages", spaceId]
|
||||
: ["sidebar-pages", { pageId: oldParentId, spaceId }];
|
||||
? pageKeys.rootSidebar(spaceId)
|
||||
: pageKeys.sidebar({ pageId: oldParentId, spaceId });
|
||||
|
||||
queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(
|
||||
oldQueryKey,
|
||||
@@ -580,7 +621,7 @@ export function updateCacheOnMovePage(
|
||||
if (oldParentId !== null) {
|
||||
const oldParentCache = queryClient.getQueryData<
|
||||
InfiniteData<IPagination<IPage>>
|
||||
>(["sidebar-pages", { pageId: oldParentId, spaceId }]);
|
||||
>(pageKeys.sidebar({ pageId: oldParentId, spaceId }));
|
||||
|
||||
const remainingChildren =
|
||||
oldParentCache?.pages.flatMap((p) => p.items).length ?? 0;
|
||||
@@ -618,8 +659,8 @@ export function updateCacheOnMovePage(
|
||||
// Add page to new parent's cache
|
||||
const newQueryKey =
|
||||
newParentId === null
|
||||
? ["root-sidebar-pages", spaceId]
|
||||
: ["sidebar-pages", { pageId: newParentId, spaceId }];
|
||||
? pageKeys.rootSidebar(spaceId)
|
||||
: pageKeys.sidebar({ pageId: newParentId, spaceId });
|
||||
|
||||
queryClient.setQueryData<InfiniteData<IPagination<Partial<IPage>>>>(
|
||||
newQueryKey,
|
||||
|
||||
@@ -7,6 +7,7 @@ import { notifications } from "@mantine/notifications";
|
||||
import {
|
||||
IconArrowRight,
|
||||
IconClockHour4,
|
||||
IconCloudDownload,
|
||||
IconCopy,
|
||||
IconDotsVertical,
|
||||
IconFileExport,
|
||||
@@ -35,6 +36,12 @@ import {
|
||||
useToggleTemplateMutation,
|
||||
useToggleTemporaryMutation,
|
||||
} from "@/features/page-embed/queries/page-embed-query";
|
||||
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
||||
import { getCollaborationUrl } from "@/lib/config.ts";
|
||||
import {
|
||||
makePageAvailableOffline,
|
||||
warmPageYdoc,
|
||||
} from "@/features/offline/make-offline";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { pageToTreeNode } from "@/features/page/tree/utils";
|
||||
@@ -72,6 +79,45 @@ export function NodeMenu({ node, canEdit }: NodeMenuProps) {
|
||||
const isTemplate = !!node.isTemplate;
|
||||
const toggleTemporary = useToggleTemporaryMutation();
|
||||
const isTemporary = !!node.temporaryExpiresAt;
|
||||
const { data: collabQuery } = useCollabToken();
|
||||
|
||||
const handleMakeAvailableOffline = async () => {
|
||||
notifications.show({ message: t("Saving page for offline use...") });
|
||||
try {
|
||||
// Prefetch read queries so they get persisted to IndexedDB. The result
|
||||
// reports whether every warm step succeeded.
|
||||
const result = await makePageAvailableOffline({
|
||||
pageId: node.id,
|
||||
spaceId: node.spaceId,
|
||||
});
|
||||
// Best-effort: warm the page's Yjs document into IndexedDB.
|
||||
await warmPageYdoc(node.id, getCollaborationUrl(), collabQuery?.token);
|
||||
|
||||
if (result.ok) {
|
||||
notifications.show({ message: t("Page is now available offline") });
|
||||
} else {
|
||||
// Partial warm — the page may still be partly usable offline, but some
|
||||
// queries failed to cache, so surface it as an error rather than a
|
||||
// silent success.
|
||||
notifications.show({
|
||||
message: t("Failed to make page available offline"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
// makePageAvailableOffline no longer throws, but warmPageYdoc and other
|
||||
// unexpected failures stay guarded here. Log the raw error and surface the
|
||||
// real cause to the user instead of a bare generic string (AGENTS.md).
|
||||
console.error("handleMakeAvailableOffline failed", err);
|
||||
const reason =
|
||||
(err as { response?: { data?: { message?: string } } })?.response?.data
|
||||
?.message ?? (err instanceof Error ? err.message : String(err));
|
||||
notifications.show({
|
||||
message: `${t("Failed to make page available offline")}: ${reason}`,
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTemplate = async () => {
|
||||
const next = !isTemplate;
|
||||
@@ -228,6 +274,17 @@ export function NodeMenu({ node, canEdit }: NodeMenuProps) {
|
||||
{t("Export")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconCloudDownload size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleMakeAvailableOffline();
|
||||
}}
|
||||
>
|
||||
{t("Make available offline")}
|
||||
</Menu.Item>
|
||||
|
||||
{canEdit && (
|
||||
<>
|
||||
<Menu.Item
|
||||
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
useCreatePageMutation,
|
||||
useRemovePageMutation,
|
||||
useMovePageMutation,
|
||||
useUpdatePageMutation,
|
||||
updateCacheOnMovePage,
|
||||
} from "@/features/page/queries/page-query.ts";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
@@ -27,7 +26,6 @@ export type UseTreeMutation = {
|
||||
parentId: string | null,
|
||||
opts?: { temporary?: boolean },
|
||||
) => Promise<void>;
|
||||
handleRename: (id: string, name: string) => Promise<void>;
|
||||
handleDelete: (id: string) => Promise<void>;
|
||||
};
|
||||
|
||||
@@ -39,7 +37,6 @@ export function useTreeMutation(spaceId: string): UseTreeMutation {
|
||||
// children) and then immediately invokes a handler.
|
||||
const store = useStore();
|
||||
const createPageMutation = useCreatePageMutation();
|
||||
const updatePageMutation = useUpdatePageMutation();
|
||||
const removePageMutation = useRemovePageMutation();
|
||||
const movePageMutation = useMovePageMutation();
|
||||
const navigate = useNavigate();
|
||||
@@ -205,20 +202,6 @@ export function useTreeMutation(spaceId: string): UseTreeMutation {
|
||||
[spaceId, createPageMutation, setData, store, navigate, spaceSlug],
|
||||
);
|
||||
|
||||
const handleRename = useCallback(
|
||||
async (id: string, name: string) => {
|
||||
setData((prev) =>
|
||||
treeModel.update(prev, id, { name } as Partial<SpaceTreeNode>),
|
||||
);
|
||||
try {
|
||||
await updatePageMutation.mutateAsync({ pageId: id, title: name });
|
||||
} catch (error) {
|
||||
console.error("Error updating page title:", error);
|
||||
}
|
||||
},
|
||||
[updatePageMutation, setData],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(
|
||||
async (id: string) => {
|
||||
const node = treeModel.find(
|
||||
@@ -264,7 +247,7 @@ export function useTreeMutation(spaceId: string): UseTreeMutation {
|
||||
[removePageMutation, setData, store, pageSlug, navigate, spaceSlug],
|
||||
);
|
||||
|
||||
return { handleMove, handleCreate, handleRename, handleDelete };
|
||||
return { handleMove, handleCreate, handleDelete };
|
||||
}
|
||||
|
||||
function isPageInNode(node: SpaceTreeNode, pageSlug: string): boolean {
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
|
||||
// matchMedia / storage are stubbed globally in vitest.setup.ts.
|
||||
|
||||
// Enabling a public share must NOT silently expose the whole sub-tree (#216):
|
||||
// the create call defaults includeSubPages to false. This was a one-literal,
|
||||
// security-relevant default with no test — lock it.
|
||||
|
||||
const createMutateAsync = vi.fn(async () => ({}));
|
||||
const deleteMutateAsync = vi.fn(async () => ({}));
|
||||
|
||||
// No existing share for this page (toggle starts OFF).
|
||||
let shareData: any = undefined;
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({ t: (key: string) => key }),
|
||||
}));
|
||||
|
||||
vi.mock("@/features/share/queries/share-query.ts", () => ({
|
||||
useCreateShareMutation: () => ({ mutateAsync: createMutateAsync }),
|
||||
useDeleteShareMutation: () => ({ mutateAsync: deleteMutateAsync }),
|
||||
useUpdateShareMutation: () => ({ mutateAsync: vi.fn() }),
|
||||
useShareForPageQuery: () => ({ data: shareData }),
|
||||
}));
|
||||
|
||||
vi.mock("@/features/page/queries/page-query.ts", () => ({
|
||||
usePageQuery: () => ({ data: { id: "page-1", title: "Doc" } }),
|
||||
}));
|
||||
|
||||
vi.mock("@/features/space/queries/space-query.ts", () => ({
|
||||
useSpaceQuery: () => ({ data: { settings: {} } }),
|
||||
}));
|
||||
|
||||
import ShareModal from "./share-modal";
|
||||
|
||||
function renderModal() {
|
||||
return render(
|
||||
<MemoryRouter>
|
||||
<MantineProvider>
|
||||
<ShareModal readOnly={false} />
|
||||
</MantineProvider>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("ShareModal — enabling a share defaults includeSubPages to false (#216)", () => {
|
||||
beforeEach(() => {
|
||||
createMutateAsync.mockClear();
|
||||
deleteMutateAsync.mockClear();
|
||||
shareData = undefined;
|
||||
});
|
||||
|
||||
it("creates the share with includeSubPages: false when the user turns it on", async () => {
|
||||
renderModal();
|
||||
|
||||
// Open the share popover.
|
||||
fireEvent.click(screen.getByRole("button", { name: "Share" }));
|
||||
|
||||
// The "Share to web" toggle is the only switch in the not-yet-shared state.
|
||||
const toggle = await screen.findByRole("switch");
|
||||
fireEvent.click(toggle);
|
||||
|
||||
await waitFor(() => expect(createMutateAsync).toHaveBeenCalledTimes(1));
|
||||
expect(createMutateAsync).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
pageId: "page-1",
|
||||
includeSubPages: false,
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -73,7 +73,10 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
|
||||
if (value) {
|
||||
await createShareMutation.mutateAsync({
|
||||
pageId: pageId,
|
||||
includeSubPages: true,
|
||||
// Opt-in: enabling a share must NOT silently expose the whole
|
||||
// sub-tree (#216). Sub-pages are shared only when the user turns on
|
||||
// the dedicated "Include sub-pages" toggle.
|
||||
includeSubPages: false,
|
||||
searchIndexing: false,
|
||||
});
|
||||
} else if (share && share.id) {
|
||||
|
||||
@@ -35,9 +35,17 @@ export interface ISharedItem extends IShare {
|
||||
};
|
||||
}
|
||||
|
||||
export interface ISharedPage extends IShare {
|
||||
page: IPage;
|
||||
share: IShare & {
|
||||
// The `/shares/page-info` (anonymous) response. Mirrors the server-side
|
||||
// PublicSharePayload allowlist (#218): the server trims `page`/`share` to these
|
||||
// fields exactly, so the client type must not over-declare internal metadata it
|
||||
// will never receive. Keep this in sync with share-public-payload.ts.
|
||||
export interface ISharedPage {
|
||||
page: Pick<IPage, "id" | "slugId" | "title" | "icon" | "content">;
|
||||
share: {
|
||||
id: string;
|
||||
key: string;
|
||||
includeSubPages: boolean;
|
||||
searchIndexing: boolean;
|
||||
level: number;
|
||||
sharedPage: { id: string; slugId: string; title: string; icon: string };
|
||||
};
|
||||
@@ -73,6 +81,10 @@ export type IUpdateShare = ICreateShare & { shareId: string; pageId?: string };
|
||||
|
||||
export interface IShareInfoInput {
|
||||
pageId: string;
|
||||
// The share id/key from the `/share/:shareId/p/:slug` URL. When present the
|
||||
// server binds content access to this exact share (#218): a forged/mismatched
|
||||
// shareId 404s instead of rendering the page off its slug alone.
|
||||
shareId?: string;
|
||||
}
|
||||
|
||||
// Vanity /l/:alias pointer.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
keepPreviousData,
|
||||
queryOptions,
|
||||
useInfiniteQuery,
|
||||
useMutation,
|
||||
useQuery,
|
||||
@@ -31,11 +32,37 @@ import { getRecentChanges } from "@/features/page/services/page-service.ts";
|
||||
import { useEffect } from "react";
|
||||
import { validate as isValidUuid } from "uuid";
|
||||
|
||||
/**
|
||||
* Centralized React Query key factories for space queries. The hooks below and
|
||||
* the offline warm path (features/offline/make-offline.ts) share these so the
|
||||
* runtime keys can never silently drift apart.
|
||||
*/
|
||||
export const spaceKeys = {
|
||||
detail: (idOrSlug: string) => ["space", idOrSlug] as const,
|
||||
list: (params?: QueryParams) => ["spaces", params] as const,
|
||||
members: (spaceId: string, query?: string) =>
|
||||
["spaceMembers", spaceId, query] as const,
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared queryOptions for fetching a space by id/slug. Both
|
||||
* useGetSpaceBySlugQuery and the offline warm path consume this so the key,
|
||||
* queryFn and staleTime stay identical. (`enabled` is intentionally omitted —
|
||||
* prefetchQuery ignores it anyway and the warm path always passes a real id;
|
||||
* the hook reapplies `enabled` itself.)
|
||||
*/
|
||||
export const spaceByIdQueryOptions = (spaceId: string) =>
|
||||
queryOptions({
|
||||
queryKey: spaceKeys.detail(spaceId),
|
||||
queryFn: () => getSpaceById(spaceId),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
export function useGetSpacesQuery(
|
||||
params?: QueryParams,
|
||||
): UseQueryResult<IPagination<ISpace>, Error> {
|
||||
return useQuery({
|
||||
queryKey: ["spaces", params],
|
||||
queryKey: spaceKeys.list(params),
|
||||
queryFn: () => getSpaces(params),
|
||||
placeholderData: keepPreviousData,
|
||||
refetchOnMount: true,
|
||||
@@ -44,16 +71,16 @@ export function useGetSpacesQuery(
|
||||
|
||||
export function useSpaceQuery(spaceId: string): UseQueryResult<ISpace, Error> {
|
||||
const query = useQuery({
|
||||
queryKey: ["space", spaceId],
|
||||
queryKey: spaceKeys.detail(spaceId),
|
||||
queryFn: () => getSpaceById(spaceId),
|
||||
enabled: !!spaceId,
|
||||
});
|
||||
useEffect(() => {
|
||||
if (query.data) {
|
||||
if (isValidUuid(spaceId)) {
|
||||
queryClient.setQueryData(["space", query.data.slug], query.data);
|
||||
queryClient.setQueryData(spaceKeys.detail(query.data.slug), query.data);
|
||||
} else {
|
||||
queryClient.setQueryData(["space", query.data.id], query.data);
|
||||
queryClient.setQueryData(spaceKeys.detail(query.data.id), query.data);
|
||||
}
|
||||
}
|
||||
}, [query.data]);
|
||||
@@ -62,8 +89,11 @@ export function useSpaceQuery(spaceId: string): UseQueryResult<ISpace, Error> {
|
||||
}
|
||||
|
||||
export const prefetchSpace = (spaceSlug: string, spaceId?: string) => {
|
||||
// Note: intentionally NOT using spaceByIdQueryOptions here — that factory sets
|
||||
// a 5min staleTime which would let this prefetch skip fetching fresh data;
|
||||
// prefetchSpace must always refetch (default staleTime: 0).
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["space", spaceSlug],
|
||||
queryKey: spaceKeys.detail(spaceSlug),
|
||||
queryFn: () => getSpaceById(spaceSlug),
|
||||
});
|
||||
|
||||
@@ -100,10 +130,8 @@ export function useGetSpaceBySlugQuery(
|
||||
spaceId: string,
|
||||
): UseQueryResult<ISpace, Error> {
|
||||
return useQuery({
|
||||
queryKey: ["space", spaceId],
|
||||
queryFn: () => getSpaceById(spaceId),
|
||||
...spaceByIdQueryOptions(spaceId),
|
||||
enabled: !!spaceId,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -116,14 +144,16 @@ export function useUpdateSpaceMutation() {
|
||||
onSuccess: (data, variables) => {
|
||||
notifications.show({ message: t("Space updated successfully") });
|
||||
|
||||
const space = queryClient.getQueryData([
|
||||
"space",
|
||||
variables.spaceId,
|
||||
]) as ISpace;
|
||||
const space = queryClient.getQueryData(
|
||||
spaceKeys.detail(variables.spaceId),
|
||||
) as ISpace;
|
||||
if (space) {
|
||||
const updatedSpace = { ...space, ...data };
|
||||
queryClient.setQueryData(["space", variables.spaceId], updatedSpace);
|
||||
queryClient.setQueryData(["space", data.slug], updatedSpace);
|
||||
queryClient.setQueryData(
|
||||
spaceKeys.detail(variables.spaceId),
|
||||
updatedSpace,
|
||||
);
|
||||
queryClient.setQueryData(spaceKeys.detail(data.slug), updatedSpace);
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
@@ -148,7 +178,7 @@ export function useDeleteSpaceMutation() {
|
||||
|
||||
if (variables.slug) {
|
||||
queryClient.removeQueries({
|
||||
queryKey: ["space", variables.slug],
|
||||
queryKey: spaceKeys.detail(variables.slug),
|
||||
exact: true,
|
||||
});
|
||||
}
|
||||
@@ -156,7 +186,7 @@ export function useDeleteSpaceMutation() {
|
||||
// Remove space-specific queries
|
||||
if (variables.id) {
|
||||
queryClient.removeQueries({
|
||||
queryKey: ["space", variables.id],
|
||||
queryKey: spaceKeys.detail(variables.id),
|
||||
exact: true,
|
||||
});
|
||||
|
||||
@@ -196,7 +226,7 @@ export function useSpaceMembersInfiniteQuery(
|
||||
query?: string,
|
||||
) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["spaceMembers", spaceId, query],
|
||||
queryKey: spaceKeys.members(spaceId, query),
|
||||
queryFn: ({ pageParam }) =>
|
||||
getSpaceMembers(spaceId, { cursor: pageParam, limit: 50, query }),
|
||||
enabled: !!spaceId,
|
||||
|
||||
@@ -2,9 +2,19 @@ import { useQuery, UseQueryResult } from "@tanstack/react-query";
|
||||
import { getMyInfo } from "@/features/user/services/user-service";
|
||||
import { ICurrentUser } from "@/features/user/types/user.types";
|
||||
|
||||
/**
|
||||
* Centralized React Query key factory for current-user queries. This hook and
|
||||
* the offline warm path (features/offline/make-offline.ts) share it so the
|
||||
* runtime key can never silently drift, and the OFFLINE_PERSIST_ROOTS guard
|
||||
* test can assert the persisted "currentUser" root maps to a real factory.
|
||||
*/
|
||||
export const userKeys = {
|
||||
currentUser: () => ["currentUser"] as const,
|
||||
};
|
||||
|
||||
export default function useCurrentUser(): UseQueryResult<ICurrentUser> {
|
||||
return useQuery({
|
||||
queryKey: ["currentUser"],
|
||||
queryKey: userKeys.currentUser(),
|
||||
queryFn: async () => {
|
||||
return await getMyInfo();
|
||||
},
|
||||
|
||||
118
apps/client/src/features/user/user-provider.test.tsx
Normal file
118
apps/client/src/features/user/user-provider.test.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { HelmetProvider } from "react-helmet-async";
|
||||
|
||||
// Control useCurrentUser per test; stub the rest of UserProvider's network/
|
||||
// socket dependencies so we only exercise its render-gating logic.
|
||||
const h = vi.hoisted(() => ({ useCurrentUser: vi.fn() }));
|
||||
|
||||
vi.mock("@/features/user/hooks/use-current-user", () => ({
|
||||
default: h.useCurrentUser,
|
||||
}));
|
||||
vi.mock("@/features/auth/queries/auth-query.tsx", () => ({
|
||||
useCollabToken: () => ({ data: undefined }),
|
||||
}));
|
||||
vi.mock("@/features/websocket/use-query-subscription.ts", () => ({
|
||||
useQuerySubscription: () => {},
|
||||
}));
|
||||
vi.mock("@/features/websocket/use-tree-socket.ts", () => ({
|
||||
useTreeSocket: () => {},
|
||||
}));
|
||||
vi.mock("@/features/notification/hooks/use-notification-socket.ts", () => ({
|
||||
useNotificationSocket: () => {},
|
||||
}));
|
||||
vi.mock("@/main.tsx", () => ({ queryClient: {} }));
|
||||
vi.mock("@/features/user/connect-resync.ts", () => ({
|
||||
makeConnectHandler: () => () => {},
|
||||
}));
|
||||
vi.mock("socket.io-client", () => ({
|
||||
io: () => ({ on: vi.fn(), disconnect: vi.fn() }),
|
||||
}));
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (k: string) => k,
|
||||
i18n: {
|
||||
changeLanguage: vi.fn(),
|
||||
language: "en-US",
|
||||
resolvedLanguage: "en-US",
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
import { UserProvider } from "./user-provider";
|
||||
|
||||
const networkError = { message: "Network Error" }; // axios network error: no `response`
|
||||
|
||||
function renderProvider() {
|
||||
return render(
|
||||
<HelmetProvider>
|
||||
<MemoryRouter>
|
||||
<MantineProvider>
|
||||
<UserProvider>
|
||||
<div data-testid="app-child">app content</div>
|
||||
</UserProvider>
|
||||
</MantineProvider>
|
||||
</MemoryRouter>
|
||||
</HelmetProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
h.useCurrentUser.mockReset();
|
||||
});
|
||||
|
||||
describe("UserProvider offline render-gating", () => {
|
||||
it("renders the app (cached children) when useCurrentUser errors offline but a cached user exists", () => {
|
||||
// Offline reload: the persisted ['currentUser'] cache hydrates `data`, but
|
||||
// the background POST /api/users/me refetch fails as a network error.
|
||||
h.useCurrentUser.mockReturnValue({
|
||||
data: {
|
||||
user: { id: "u1", locale: "en" },
|
||||
workspace: { id: "w1" },
|
||||
},
|
||||
isLoading: false,
|
||||
error: networkError,
|
||||
isError: true,
|
||||
});
|
||||
|
||||
renderProvider();
|
||||
|
||||
// The cached app must render — NOT a blank fragment (#237/#238).
|
||||
expect(screen.getByTestId("app-child")).toBeDefined();
|
||||
expect(screen.queryByText("You're offline")).toBeNull();
|
||||
});
|
||||
|
||||
it("renders the offline fallback (not a blank fragment) when erroring with no cached user", () => {
|
||||
h.useCurrentUser.mockReturnValue({
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
error: networkError,
|
||||
isError: true,
|
||||
});
|
||||
|
||||
const { container } = renderProvider();
|
||||
|
||||
// Previously this returned `<></>` — a blank white screen. Now it must show
|
||||
// an explicit offline fallback.
|
||||
expect(screen.getByText("You're offline")).toBeDefined();
|
||||
expect(screen.queryByTestId("app-child")).toBeNull();
|
||||
expect(container.textContent?.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("renders the app normally on a successful currentUser load", () => {
|
||||
h.useCurrentUser.mockReturnValue({
|
||||
data: {
|
||||
user: { id: "u1", locale: "en" },
|
||||
workspace: { id: "w1" },
|
||||
},
|
||||
isLoading: false,
|
||||
error: null,
|
||||
isError: false,
|
||||
});
|
||||
|
||||
renderProvider();
|
||||
expect(screen.getByTestId("app-child")).toBeDefined();
|
||||
});
|
||||
});
|
||||
@@ -11,6 +11,7 @@ import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
|
||||
import { useNotificationSocket } from "@/features/notification/hooks/use-notification-socket.ts";
|
||||
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
||||
import { Error404 } from "@/components/ui/error-404.tsx";
|
||||
import { OfflineFallback } from "@/features/offline/offline-fallback.tsx";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { makeConnectHandler } from "@/features/user/connect-resync.ts";
|
||||
|
||||
@@ -70,14 +71,30 @@ export function UserProvider({ children }: React.PropsWithChildren) {
|
||||
document.documentElement.lang = i18n.resolvedLanguage || i18n.language || "en-US";
|
||||
}, [i18n.language, i18n.resolvedLanguage]);
|
||||
|
||||
if (isLoading) return <></>;
|
||||
// First load with no cached user yet: render nothing briefly while the
|
||||
// persisted ['currentUser'] cache hydrates (avoids flashing the offline
|
||||
// fallback before restore). Once we have a user we render the app even if a
|
||||
// refetch is still in flight.
|
||||
if (isLoading && !data) return <></>;
|
||||
|
||||
if (isError && error?.["response"]?.status === 404) {
|
||||
return <Error404 />;
|
||||
}
|
||||
|
||||
// We have a (possibly cached/stale) user — render the app. Offline, the
|
||||
// POST /api/users/me refetch fails as a network error, but the persisted/
|
||||
// hydrated user is enough to render the cached UI. Previously `if (error)
|
||||
// return <></>` blanked every authenticated route on an offline reload even
|
||||
// though the cached data was present (#237/#238).
|
||||
if (data) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// No user AND an error (offline cold boot of a page never warmed for offline,
|
||||
// or no persisted cache to restore): show an explicit offline fallback rather
|
||||
// than a blank white screen.
|
||||
if (error) {
|
||||
return <></>;
|
||||
return <OfflineFallback />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
|
||||
@@ -11,7 +11,8 @@ import { MantineProvider } from "@mantine/core";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { ModalsProvider } from "@mantine/modals";
|
||||
import { Notifications } from "@mantine/notifications";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
|
||||
import { HelmetProvider } from "react-helmet-async";
|
||||
import "./i18n";
|
||||
import { PostHogProvider } from "posthog-js/react";
|
||||
@@ -21,6 +22,13 @@ import {
|
||||
isCloud,
|
||||
isPostHogEnabled,
|
||||
} from "@/lib/config.ts";
|
||||
import {
|
||||
queryPersister,
|
||||
shouldDehydrateOfflineQuery,
|
||||
} from "@/features/offline/query-persister";
|
||||
import { registerOfflineMutationDefaults } from "@/features/offline/offline-mutations";
|
||||
import { PwaUpdatePrompt } from "@/pwa/pwa-update-prompt";
|
||||
import { isCapacitorNativePlatform } from "@/pwa/is-capacitor";
|
||||
import posthog from "posthog-js";
|
||||
|
||||
export const queryClient = new QueryClient({
|
||||
@@ -30,10 +38,18 @@ export const queryClient = new QueryClient({
|
||||
refetchOnWindowFocus: false,
|
||||
retry: false,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
// Keep cached read data around long enough to be persisted/restored for offline use.
|
||||
gcTime: 1000 * 60 * 60 * 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Register default mutationFns for the offline-relevant structural mutations so
|
||||
// a paused mutation restored from IndexedDB after an offline reload still has a
|
||||
// mutationFn and is replayed by resumePausedMutations() on reconnect (instead
|
||||
// of silently no-op'ing and dropping the offline create/move/comment).
|
||||
registerOfflineMutationDefaults(queryClient);
|
||||
|
||||
if (isCloud() && isPostHogEnabled) {
|
||||
posthog.init(getPostHogKey(), {
|
||||
api_host: getPostHogHost(),
|
||||
@@ -50,15 +66,34 @@ root.render(
|
||||
<BrowserRouter>
|
||||
<MantineProvider theme={theme} cssVariablesResolver={mantineCssResolver}>
|
||||
<ModalsProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<PersistQueryClientProvider
|
||||
client={queryClient}
|
||||
persistOptions={{
|
||||
persister: queryPersister,
|
||||
maxAge: 1000 * 60 * 60 * 24,
|
||||
buster: APP_VERSION,
|
||||
dehydrateOptions: {
|
||||
shouldDehydrateQuery: shouldDehydrateOfflineQuery,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Notifications position="bottom-center" limit={3} zIndex={10000} />
|
||||
{/* Skip SW registration inside the Capacitor native WebView — the
|
||||
native shell serves assets itself; a browser SW would conflict. */}
|
||||
{!isCapacitorNativePlatform() && <PwaUpdatePrompt />}
|
||||
<HelmetProvider>
|
||||
<PostHogProvider client={posthog}>
|
||||
<App />
|
||||
</PostHogProvider>
|
||||
</HelmetProvider>
|
||||
</QueryClientProvider>
|
||||
</PersistQueryClientProvider>
|
||||
</ModalsProvider>
|
||||
</MantineProvider>
|
||||
</BrowserRouter>,
|
||||
);
|
||||
|
||||
// Service worker registration is owned by <PwaUpdatePrompt /> above (via
|
||||
// vite-plugin-pwa's useRegisterSW: Workbox precache + prompt-based updates,
|
||||
// and skipped inside the Capacitor native WebView). The earlier hand-written
|
||||
// /sw.js registration from the mobile bootstrap was removed here to avoid a
|
||||
// double registration / competing service worker.
|
||||
|
||||
@@ -24,6 +24,9 @@ export default function SharedPage() {
|
||||
|
||||
const { data, isLoading, isError, error } = useSharePageQuery({
|
||||
pageId: extractPageSlugId(pageSlug),
|
||||
// Forward the URL's shareId so the server binds content to this share
|
||||
// (#218): a forged shareId 404s instead of rendering the page off its slug.
|
||||
shareId,
|
||||
});
|
||||
|
||||
const sharedTreeData = useAtomValue(sharedTreeDataAtom);
|
||||
|
||||
39
apps/client/src/pwa/is-capacitor.test.ts
Normal file
39
apps/client/src/pwa/is-capacitor.test.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { describe, it, expect, afterEach } from "vitest";
|
||||
import { isCapacitorNativePlatform } from "./is-capacitor";
|
||||
|
||||
describe("isCapacitorNativePlatform", () => {
|
||||
afterEach(() => {
|
||||
// Keep tests isolated from each other and from the rest of the suite.
|
||||
delete (globalThis as any).Capacitor;
|
||||
});
|
||||
|
||||
it("returns false when Capacitor is undefined", () => {
|
||||
expect(isCapacitorNativePlatform()).toBe(false);
|
||||
});
|
||||
|
||||
it("uses isNativePlatform() when it is a function", () => {
|
||||
(globalThis as any).Capacitor = { isNativePlatform: () => true };
|
||||
expect(isCapacitorNativePlatform()).toBe(true);
|
||||
|
||||
(globalThis as any).Capacitor = { isNativePlatform: () => false };
|
||||
expect(isCapacitorNativePlatform()).toBe(false);
|
||||
});
|
||||
|
||||
it("falls back to the boolean property when isNativePlatform is not a function", () => {
|
||||
(globalThis as any).Capacitor = { isNativePlatform: true };
|
||||
expect(isCapacitorNativePlatform()).toBe(true);
|
||||
|
||||
(globalThis as any).Capacitor = { isNativePlatform: false };
|
||||
expect(isCapacitorNativePlatform()).toBe(false);
|
||||
});
|
||||
|
||||
it("returns false when reading Capacitor throws (try/catch)", () => {
|
||||
Object.defineProperty(globalThis, "Capacitor", {
|
||||
configurable: true,
|
||||
get() {
|
||||
throw new Error("boom");
|
||||
},
|
||||
});
|
||||
expect(isCapacitorNativePlatform()).toBe(false);
|
||||
});
|
||||
});
|
||||
23
apps/client/src/pwa/is-capacitor.ts
Normal file
23
apps/client/src/pwa/is-capacitor.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* Detects whether the client is running inside a Capacitor native WebView
|
||||
* (native iOS/Android shell from the feature/mobile-app-bootstrap branch).
|
||||
*
|
||||
* This is a pure runtime check against the global `Capacitor` object that the
|
||||
* native bridge injects — no `@capacitor/*` dependency is added. On the plain
|
||||
* browser / installed-PWA path `window.Capacitor` is undefined, so this returns
|
||||
* false and the Workbox service worker registers normally.
|
||||
*
|
||||
* Inside the native WebView the SW must NOT register: it would layer a redundant
|
||||
* (and conflicting) cache over Capacitor's own asset serving and interfere with
|
||||
* the native auth/CORS flow.
|
||||
*/
|
||||
export function isCapacitorNativePlatform(): boolean {
|
||||
try {
|
||||
const cap = (globalThis as any)?.Capacitor;
|
||||
return !!(cap && typeof cap.isNativePlatform === "function"
|
||||
? cap.isNativePlatform()
|
||||
: cap?.isNativePlatform);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
59
apps/client/src/pwa/pwa-update-prompt.tsx
Normal file
59
apps/client/src/pwa/pwa-update-prompt.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { useEffect } from "react";
|
||||
import { Button } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useRegisterSW } from "virtual:pwa-register/react";
|
||||
|
||||
// Stable notification id so we can show/hide a single update prompt.
|
||||
const UPDATE_NOTIFICATION_ID = "pwa-update-available";
|
||||
|
||||
/**
|
||||
* Listens for a waiting service worker and surfaces a Mantine notification
|
||||
* prompting the user to reload into the new version.
|
||||
*
|
||||
* Must be mounted inside the Mantine provider subtree (Notifications must be
|
||||
* available). Renders nothing itself.
|
||||
*/
|
||||
export function PwaUpdatePrompt() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
needRefresh: [needRefresh],
|
||||
updateServiceWorker,
|
||||
} = useRegisterSW({
|
||||
onRegisterError(error) {
|
||||
// Best-effort: a failed registration must not break the app.
|
||||
console.error("Service worker registration error:", error);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!needRefresh) return;
|
||||
|
||||
notifications.show({
|
||||
id: UPDATE_NOTIFICATION_ID,
|
||||
title: t("Update available"),
|
||||
message: (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
mt="xs"
|
||||
onClick={() => updateServiceWorker(true)}
|
||||
>
|
||||
{t("Reload")}
|
||||
</Button>
|
||||
),
|
||||
autoClose: false,
|
||||
withCloseButton: true,
|
||||
});
|
||||
|
||||
// Hide the notification when the prompt is no longer needed / on cleanup.
|
||||
return () => {
|
||||
notifications.hide(UPDATE_NOTIFICATION_ID);
|
||||
};
|
||||
}, [needRefresh, t, updateServiceWorker]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default PwaUpdatePrompt;
|
||||
32
apps/client/src/pwa/sw-strategy.test.ts
Normal file
32
apps/client/src/pwa/sw-strategy.test.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { isApiPath, isCollabOrSocketPath } from "./sw-strategy";
|
||||
|
||||
describe("isApiPath", () => {
|
||||
it("matches the /api segment and its subtree", () => {
|
||||
expect(isApiPath("/api")).toBe(true);
|
||||
expect(isApiPath("/api/")).toBe(true);
|
||||
expect(isApiPath("/api/pages")).toBe(true);
|
||||
});
|
||||
|
||||
it("does not over-match sibling paths", () => {
|
||||
expect(isApiPath("/apidocs")).toBe(false);
|
||||
expect(isApiPath("/apixyz")).toBe(false);
|
||||
expect(isApiPath("/")).toBe(false);
|
||||
expect(isApiPath("/pages")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("isCollabOrSocketPath", () => {
|
||||
it("matches the /collab and /socket.io segments and their subtrees", () => {
|
||||
expect(isCollabOrSocketPath("/collab")).toBe(true);
|
||||
expect(isCollabOrSocketPath("/collab/x")).toBe(true);
|
||||
expect(isCollabOrSocketPath("/socket.io")).toBe(true);
|
||||
expect(isCollabOrSocketPath("/socket.io/abc")).toBe(true);
|
||||
});
|
||||
|
||||
it("does not over-match sibling paths", () => {
|
||||
expect(isCollabOrSocketPath("/collaborators")).toBe(false);
|
||||
expect(isCollabOrSocketPath("/collabx")).toBe(false);
|
||||
expect(isCollabOrSocketPath("/socket.iox")).toBe(false);
|
||||
});
|
||||
});
|
||||
32
apps/client/src/pwa/sw-strategy.ts
Normal file
32
apps/client/src/pwa/sw-strategy.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Canonical service-worker routing predicates.
|
||||
*
|
||||
* IMPORTANT: With vite-plugin-pwa using Workbox `generateSW`, the
|
||||
* `runtimeCaching[].urlPattern` functions are serialized standalone into the
|
||||
* generated service worker and CANNOT reference imported symbols. The matching
|
||||
* logic is therefore duplicated as inline regex literals in
|
||||
* apps/client/vite.config.ts. This module is the testable source of truth, and
|
||||
* the two MUST be kept in sync. This duplication is intentional and is the
|
||||
* documented Workbox limitation.
|
||||
*
|
||||
* Matching is anchored to a path SEGMENT boundary (`^/<seg>(/|$)`) so that
|
||||
* sibling paths like `/apidocs`, `/collaborators`, `/socket.iox` are NOT
|
||||
* wrongly treated as API/realtime traffic.
|
||||
*/
|
||||
|
||||
/**
|
||||
* True when `pathname` is the `/api` segment or anything beneath it.
|
||||
* `/api` and `/api/...` -> true; `/apidocs`, `/apixyz` -> false.
|
||||
*/
|
||||
export function isApiPath(pathname: string): boolean {
|
||||
return /^\/api(\/|$)/.test(pathname);
|
||||
}
|
||||
|
||||
/**
|
||||
* True when `pathname` is the `/collab` or `/socket.io` segment (or beneath it).
|
||||
* `/collab`, `/collab/x`, `/socket.io`, `/socket.io/abc` -> true;
|
||||
* `/collaborators`, `/collabx`, `/socket.iox` -> false.
|
||||
*/
|
||||
export function isCollabOrSocketPath(pathname: string): boolean {
|
||||
return /^\/(collab|socket\.io)(\/|$)/.test(pathname);
|
||||
}
|
||||
2
apps/client/src/vite-env.d.ts
vendored
2
apps/client/src/vite-env.d.ts
vendored
@@ -1,2 +1,4 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-pwa/react" />
|
||||
/// <reference types="vite-plugin-pwa/info" />
|
||||
declare const APP_VERSION: string
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { VitePWA } from "vite-plugin-pwa";
|
||||
import * as path from "path";
|
||||
import { execSync } from "node:child_process";
|
||||
|
||||
@@ -53,7 +54,51 @@ export default defineConfig(({ mode }) => {
|
||||
},
|
||||
APP_VERSION: JSON.stringify(resolveAppVersion(envPath)),
|
||||
},
|
||||
plugins: [react()],
|
||||
plugins: [
|
||||
react(),
|
||||
VitePWA({
|
||||
registerType: "prompt",
|
||||
injectRegister: null,
|
||||
strategies: "generateSW",
|
||||
manifest: false,
|
||||
workbox: {
|
||||
globPatterns: ["**/*.{js,css,html,svg,png,ico,woff2,json}"],
|
||||
navigateFallback: "index.html",
|
||||
// Segment-anchored (`^/<seg>(/|$)`) so navigation requests to these
|
||||
// segments are consistently excluded from the SPA fallback, mirroring
|
||||
// the runtimeCaching urlPattern regexes below.
|
||||
//
|
||||
// `/share`, `/mcp`, and `/robots.txt` mirror the server static-serve
|
||||
// exclude list (apps/server/src/main.ts setGlobalPrefix `exclude`):
|
||||
// robots.txt, the SEO/OG/analytics-injected public share HTML, and the
|
||||
// embedded MCP endpoint are served by server controllers, so the SW must
|
||||
// never shadow them with the precached index.html app shell (doing so
|
||||
// would break SEO and MCP).
|
||||
navigateFallbackDenylist: [
|
||||
/^\/api(\/|$)/,
|
||||
/^\/collab(\/|$)/,
|
||||
/^\/socket\.io(\/|$)/,
|
||||
/^\/share(\/|$)/,
|
||||
/^\/mcp(\/|$)/,
|
||||
/^\/robots\.txt$/,
|
||||
],
|
||||
cleanupOutdatedCaches: true,
|
||||
clientsClaim: true,
|
||||
// The urlPattern regexes below mirror apps/client/src/pwa/sw-strategy.ts
|
||||
// and MUST be kept in sync with it. Workbox `generateSW` serializes these
|
||||
// functions standalone into the generated service worker, so they cannot
|
||||
// import the module — the matching logic is intentionally duplicated as
|
||||
// self-contained inline regex literals anchored to a path segment boundary.
|
||||
runtimeCaching: [
|
||||
{ urlPattern: ({ url }) => /^\/(collab|socket\.io)(\/|$)/.test(url.pathname), handler: "NetworkOnly" },
|
||||
// All /api stays network-only; offline reads come from the persisted
|
||||
// React Query cache (IndexedDB) + y-indexeddb, not the SW HTTP cache.
|
||||
{ urlPattern: ({ url }) => /^\/api(\/|$)/.test(url.pathname), handler: "NetworkOnly" },
|
||||
],
|
||||
},
|
||||
devOptions: { enabled: false },
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
rolldownOptions: {
|
||||
output: {
|
||||
|
||||
@@ -64,6 +64,7 @@
|
||||
"@nestjs/platform-fastify": "^11.1.19",
|
||||
"@nestjs/platform-socket.io": "^11.1.19",
|
||||
"@nestjs/schedule": "^6.1.3",
|
||||
"@nestjs/swagger": "^11.2.0",
|
||||
"@nestjs/terminus": "^11.1.1",
|
||||
"@nestjs/throttler": "^6.5.0",
|
||||
"@nestjs/websockets": "^11.1.19",
|
||||
|
||||
@@ -24,7 +24,9 @@ import { CollabWsAdapter } from './adapter/collab-ws.adapter';
|
||||
import {
|
||||
CollaborationHandler,
|
||||
CollabEventHandlers,
|
||||
writeTitleFragment,
|
||||
} from './collaboration.handler';
|
||||
import { User } from '@docmost/db/types/entity.types';
|
||||
|
||||
@Injectable()
|
||||
export class CollaborationGateway {
|
||||
@@ -149,6 +151,45 @@ export class CollaborationGateway {
|
||||
return this.hocuspocus.openDirectConnection(documentName, context);
|
||||
}
|
||||
|
||||
/**
|
||||
* Write a new page title INTO the page's Yjs 'title' fragment, Redis-INDEPENDENT.
|
||||
*
|
||||
* Unlike the Redis-routed `handleYjsEvent` path — which routes through
|
||||
* `redisSync?.handleEvent` and SILENTLY no-ops when Redis is disabled
|
||||
* (COLLAB_DISABLE_REDIS=true → redisSync === null) — this goes straight
|
||||
* through the local Hocuspocus `openDirectConnection`. The title sync
|
||||
* therefore works in BOTH single-process (no Redis) and Redis-clustered
|
||||
* deployments.
|
||||
*
|
||||
* openDirectConnection loads the doc from persistence when no editor is
|
||||
* connected, so this works whether or not an editor is currently open: the
|
||||
* clear+reseed lands on the loaded doc and is persisted by onStoreDocument.
|
||||
*
|
||||
* Provenance: when the caller is the agent, the actor/aiChatId are threaded
|
||||
* into the connection `context` so onStoreDocument sees `context.actor ===
|
||||
* 'agent'` for the resulting title store (mirrors the body/REST path). The
|
||||
* resulting title store is usually a no-op anyway — PageService already wrote
|
||||
* the same title to the page.title column, so onStoreDocument's
|
||||
* `titleText !== page.title` guard skips the column write — but we wire the
|
||||
* context for correctness regardless.
|
||||
*/
|
||||
async writePageTitle(
|
||||
pageId: string,
|
||||
title: string,
|
||||
context?: { user?: User; actor?: string; aiChatId?: string },
|
||||
): Promise<void> {
|
||||
const documentName = `page.${pageId}`;
|
||||
const connection = await this.hocuspocus.openDirectConnection(
|
||||
documentName,
|
||||
context ?? {},
|
||||
);
|
||||
try {
|
||||
await connection.transact((doc) => writeTitleFragment(doc, title));
|
||||
} finally {
|
||||
await connection.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*Can be used before calling openDirectConnection directly
|
||||
*/
|
||||
|
||||
139
apps/server/src/collaboration/collaboration.handler.spec.ts
Normal file
139
apps/server/src/collaboration/collaboration.handler.spec.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import * as Y from 'yjs';
|
||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
||||
import { writeTitleFragment } from './collaboration.handler';
|
||||
import { CollaborationGateway } from './collaboration.gateway';
|
||||
import {
|
||||
buildTitleSeedYdoc,
|
||||
jsonToText,
|
||||
tiptapExtensions,
|
||||
} from './collaboration.util';
|
||||
|
||||
// Read the plain text held in the doc's 'title' XmlFragment, the same way
|
||||
// PersistenceExtension.onStoreDocument extracts it before writing page.title.
|
||||
const readTitleText = (doc: Y.Doc): string => {
|
||||
const titleJson = TiptapTransformer.fromYdoc(doc, 'title');
|
||||
return titleJson ? jsonToText(titleJson).trim() : '';
|
||||
};
|
||||
|
||||
describe('writeTitleFragment — the clear+seed title write (Bug 1)', () => {
|
||||
it('replaces an OLD title fragment with EXACTLY the new title (no duplication)', () => {
|
||||
// Seed the doc's 'title' fragment with an OLD title, like a real page.
|
||||
const doc = new Y.Doc();
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(buildTitleSeedYdoc('Old Title')));
|
||||
expect(readTitleText(doc)).toBe('Old Title');
|
||||
|
||||
writeTitleFragment(doc, 'New Title');
|
||||
|
||||
// The fragment must contain EXACTLY the new title — not "Old TitleNew Title"
|
||||
// (append) or "New TitleNew Title" (duplication). A single heading node.
|
||||
expect(readTitleText(doc)).toBe('New Title');
|
||||
|
||||
const titleJson = TiptapTransformer.fromYdoc(doc, 'title') as any;
|
||||
expect(titleJson.content).toHaveLength(1);
|
||||
expect(titleJson.content[0].type).toBe('heading');
|
||||
});
|
||||
|
||||
it('seeds the title fragment when it started empty', () => {
|
||||
const doc = new Y.Doc();
|
||||
// Force the 'title' fragment to exist but be empty.
|
||||
doc.getXmlFragment('title');
|
||||
expect(readTitleText(doc)).toBe('');
|
||||
|
||||
writeTitleFragment(doc, 'First Title');
|
||||
|
||||
expect(readTitleText(doc)).toBe('First Title');
|
||||
});
|
||||
|
||||
it('does not corrupt the body when rewriting the title', () => {
|
||||
// A doc with both a body and an old title; the body must survive untouched.
|
||||
const doc = new Y.Doc();
|
||||
const bodyDoc = TiptapTransformer.toYdoc(
|
||||
{
|
||||
type: 'doc',
|
||||
content: [
|
||||
{ type: 'paragraph', content: [{ type: 'text', text: 'body text' }] },
|
||||
],
|
||||
},
|
||||
'default',
|
||||
tiptapExtensions,
|
||||
);
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(bodyDoc));
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(buildTitleSeedYdoc('Old')));
|
||||
|
||||
writeTitleFragment(doc, 'New');
|
||||
|
||||
expect(readTitleText(doc)).toBe('New');
|
||||
const bodyJson = TiptapTransformer.fromYdoc(doc, 'default');
|
||||
expect(jsonToText(bodyJson)).toContain('body text');
|
||||
});
|
||||
});
|
||||
|
||||
describe('CollaborationGateway.writePageTitle — Redis-independent path', () => {
|
||||
// Build a gateway with only its hocuspocus.openDirectConnection stubbed; the
|
||||
// method must drive the clear+seed through that direct connection (NOT through
|
||||
// redisSync), so the title write survives COLLAB_DISABLE_REDIS.
|
||||
const makeGateway = (doc: Y.Doc) => {
|
||||
const disconnect = jest.fn().mockResolvedValue(undefined);
|
||||
const transact = jest.fn(async (fn: (d: Y.Doc) => void) => {
|
||||
fn(doc);
|
||||
});
|
||||
const openDirectConnection = jest
|
||||
.fn()
|
||||
.mockResolvedValue({ transact, disconnect });
|
||||
|
||||
const gateway = Object.create(CollaborationGateway.prototype);
|
||||
// redisSync is intentionally null — this is the no-Redis scenario.
|
||||
gateway.redisSync = null;
|
||||
gateway.hocuspocus = { openDirectConnection } as any;
|
||||
|
||||
return { gateway, openDirectConnection, transact, disconnect };
|
||||
};
|
||||
|
||||
it('writes the new title via openDirectConnection and disconnects', async () => {
|
||||
const doc = new Y.Doc();
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(buildTitleSeedYdoc('Old Title')));
|
||||
|
||||
const { gateway, openDirectConnection, disconnect } = makeGateway(doc);
|
||||
|
||||
await gateway.writePageTitle('page-1', 'New Title', { user: { id: 'u1' } });
|
||||
|
||||
expect(openDirectConnection).toHaveBeenCalledWith(
|
||||
'page.page-1',
|
||||
expect.objectContaining({ user: { id: 'u1' } }),
|
||||
);
|
||||
expect(readTitleText(doc)).toBe('New Title');
|
||||
expect(disconnect).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('threads agent provenance into the connection context', async () => {
|
||||
const doc = new Y.Doc();
|
||||
const { gateway, openDirectConnection } = makeGateway(doc);
|
||||
|
||||
await gateway.writePageTitle('page-1', 'Agent Title', {
|
||||
user: { id: 'u1' },
|
||||
actor: 'agent',
|
||||
aiChatId: 'chat-1',
|
||||
});
|
||||
|
||||
expect(openDirectConnection).toHaveBeenCalledWith(
|
||||
'page.page-1',
|
||||
expect.objectContaining({ actor: 'agent', aiChatId: 'chat-1' }),
|
||||
);
|
||||
});
|
||||
|
||||
it('disconnects even when the transaction throws', async () => {
|
||||
const disconnect = jest.fn().mockResolvedValue(undefined);
|
||||
const openDirectConnection = jest.fn().mockResolvedValue({
|
||||
transact: jest.fn().mockRejectedValue(new Error('boom')),
|
||||
disconnect,
|
||||
});
|
||||
const gateway = Object.create(CollaborationGateway.prototype);
|
||||
gateway.redisSync = null;
|
||||
gateway.hocuspocus = { openDirectConnection } as any;
|
||||
|
||||
await expect(
|
||||
gateway.writePageTitle('page-1', 'X', {}),
|
||||
).rejects.toThrow('boom');
|
||||
expect(disconnect).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -2,6 +2,7 @@ import { Injectable, Logger } from '@nestjs/common';
|
||||
import { Hocuspocus, Document } from '@hocuspocus/server';
|
||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
||||
import {
|
||||
buildTitleSeedYdoc,
|
||||
prosemirrorNodeToYElement,
|
||||
tiptapExtensions,
|
||||
} from './collaboration.util';
|
||||
@@ -13,6 +14,35 @@ export type CollabEventHandlers = ReturnType<
|
||||
CollaborationHandler['getHandlers']
|
||||
>;
|
||||
|
||||
/**
|
||||
* Clear+reseed the 'title' XmlFragment of `doc` so it holds EXACTLY `title`.
|
||||
*
|
||||
* Used by the gateway's direct `writePageTitle` method to write a new page
|
||||
* title INTO the page's Yjs 'title' fragment. The title lives in the same
|
||||
* Y.Doc as the body; onStoreDocument extracts it on every save, so a REST/MCP
|
||||
* rename that only updated the page.title DB column would be reverted on the
|
||||
* next collaborative save unless the Yjs 'title' fragment is kept in sync.
|
||||
* The whole fragment is replaced (no merge/append),
|
||||
* mirroring the 'replace' body path: the new title fully supersedes the old.
|
||||
*
|
||||
* DELIBERATE TRADE-OFF: because this does a FULL clear+replace of the 'title'
|
||||
* fragment, a REST/MCP rename arriving while a user is actively editing the
|
||||
* title in an open editor WILL overwrite that in-progress edit. This is
|
||||
* acceptable — the title is a short, rarely-concurrently-edited field — and is
|
||||
* preferable to leaving a stale Yjs title that onStoreDocument would revert the
|
||||
* DB column to on the next save.
|
||||
*/
|
||||
export function writeTitleFragment(doc: Y.Doc, title: string): void {
|
||||
const titleFragment = doc.getXmlFragment('title');
|
||||
|
||||
if (titleFragment.length > 0) {
|
||||
titleFragment.delete(0, titleFragment.length);
|
||||
}
|
||||
|
||||
const newTitleDoc = buildTitleSeedYdoc(title);
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(newTitleDoc));
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class CollaborationHandler {
|
||||
private readonly logger = new Logger(CollaborationHandler.name);
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import * as Y from 'yjs';
|
||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
||||
import {
|
||||
getPageId,
|
||||
isEmptyParagraphDoc,
|
||||
jsonToNode,
|
||||
prosemirrorNodeToYElement,
|
||||
buildTitleSeedYdoc,
|
||||
jsonToText,
|
||||
} from './collaboration.util';
|
||||
import { Node } from '@tiptap/pm/model';
|
||||
|
||||
@@ -241,3 +244,43 @@ describe('prosemirrorNodeToYElement', () => {
|
||||
expect(element.get(1).get(0).toString()).toBe('two');
|
||||
});
|
||||
});
|
||||
|
||||
describe('buildTitleSeedYdoc', () => {
|
||||
it('builds a level-1 heading carrying the title text', () => {
|
||||
const doc = buildTitleSeedYdoc('Hello World');
|
||||
const json: any = TiptapTransformer.fromYdoc(doc, 'title');
|
||||
|
||||
const first = json.content?.[0];
|
||||
expect(first.type).toBe('heading');
|
||||
expect(first.attrs.level).toBe(1);
|
||||
expect(jsonToText(json).trim()).toBe('Hello World');
|
||||
});
|
||||
|
||||
it('produces a non-empty title fragment for a non-empty title', () => {
|
||||
const doc = buildTitleSeedYdoc('Some Title');
|
||||
expect(doc.get('title', Y.XmlFragment).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('produces a heading with no text child for an empty title', () => {
|
||||
const doc = buildTitleSeedYdoc('');
|
||||
const json: any = TiptapTransformer.fromYdoc(doc, 'title');
|
||||
|
||||
const first = json.content?.[0];
|
||||
expect(first.type).toBe('heading');
|
||||
// No text content for an empty title.
|
||||
expect(first.content ?? []).toHaveLength(0);
|
||||
expect(jsonToText(json).trim()).toBe('');
|
||||
});
|
||||
|
||||
it('round-trips a title through build -> extract -> build -> extract', () => {
|
||||
const title = 'Round Trip Title';
|
||||
const doc1 = buildTitleSeedYdoc(title);
|
||||
const text1 = jsonToText(TiptapTransformer.fromYdoc(doc1, 'title')).trim();
|
||||
|
||||
const doc2 = buildTitleSeedYdoc(text1);
|
||||
const text2 = jsonToText(TiptapTransformer.fromYdoc(doc2, 'title')).trim();
|
||||
|
||||
expect(text1).toBe(title);
|
||||
expect(text2).toBe(text1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -59,6 +59,7 @@ import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
|
||||
import { Node, Schema } from '@tiptap/pm/model';
|
||||
import * as Y from 'yjs';
|
||||
import { Logger } from '@nestjs/common';
|
||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
||||
|
||||
export const tiptapExtensions = [
|
||||
StarterKit.configure({
|
||||
@@ -143,6 +144,34 @@ export function jsonToText(tiptapJson: JSONContent) {
|
||||
return generateText(tiptapJson, tiptapExtensions);
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a standalone Y.Doc that holds ONLY the page title, in a dedicated Yjs
|
||||
* fragment named exactly 'title' (the collaborative title-editor contract with
|
||||
* the client). The ProseMirror shape is a doc with a single level-1 heading
|
||||
* whose text is the title (empty title => heading with no text child).
|
||||
*
|
||||
* The encoded state of the returned doc can be merged into a body doc via
|
||||
* `Y.applyUpdate(doc, Y.encodeStateAsUpdate(titleSeed))` to seed the title
|
||||
* fragment for legacy pages. Seeding MUST be guarded by an emptiness check on
|
||||
* the existing 'title' fragment to avoid the Yjs duplication trap.
|
||||
*/
|
||||
export function buildTitleSeedYdoc(title: string): Y.Doc {
|
||||
return TiptapTransformer.toYdoc(
|
||||
{
|
||||
type: 'doc',
|
||||
content: [
|
||||
{
|
||||
type: 'heading',
|
||||
attrs: { level: 1 },
|
||||
content: title ? [{ type: 'text', text: title }] : [],
|
||||
},
|
||||
],
|
||||
},
|
||||
'title',
|
||||
tiptapExtensions,
|
||||
);
|
||||
}
|
||||
|
||||
export function jsonToNode(tiptapJson: JSONContent) {
|
||||
const schema = getSchema(tiptapExtensions);
|
||||
try {
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
export const HISTORY_INTERVAL = 5 * 60 * 1000;
|
||||
export const HISTORY_FAST_INTERVAL = 60 * 1000;
|
||||
export const HISTORY_FAST_THRESHOLD = 5 * 60 * 1000;
|
||||
|
||||
// Redis pub/sub channel that bridges a PAGE_UPDATED tree snapshot (a title/icon
|
||||
// rename) from the standalone collab process to the API process, which is the
|
||||
// single broadcast authority. Imported by both halves of the bridge:
|
||||
// PageTreeBridgePublisher (collab process) and PageTreeBridgeSubscriber (API process).
|
||||
export const COLLAB_TREE_UPDATE_CHANNEL = 'collab:tree-update';
|
||||
|
||||
@@ -205,6 +205,32 @@ describe('PersistenceExtension.onStoreDocument — Approach-A boundary snapshot'
|
||||
expect(historyQueue.add).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
// #206 persist-6 — RED (it.failing): a momentarily-empty live Y.Doc must not
|
||||
// overwrite non-empty persisted content. `onStoreDocument` empty-guards the
|
||||
// LOAD path but not the STORE path, so today an empty doc (a client/agent
|
||||
// glitch, a bad merge, an emptying transclusion) is written straight over the
|
||||
// page and the content is wiped silently. A store-side empty-guard is a real
|
||||
// behaviour change (a deliberate "select-all + delete" is also empty), so it
|
||||
// is left UNFIXED pending a product decision; this documents the data-loss
|
||||
// path and flips to a normal passing test the moment the guard lands.
|
||||
it.failing(
|
||||
'does NOT overwrite non-empty content with a momentarily-empty live doc (persist-6)',
|
||||
async () => {
|
||||
const emptyDoc = { type: 'doc', content: [{ type: 'paragraph' }] };
|
||||
const document = ydocFor(emptyDoc);
|
||||
pageRepo.findById.mockResolvedValue({
|
||||
...persistedHumanPage('IGNORED'),
|
||||
content: doc('IMPORTANT RICH CONTENT'),
|
||||
});
|
||||
|
||||
await ext.onStoreDocument(buildData(document, 'user') as any);
|
||||
|
||||
// Desired contract: the empty incoming doc is rejected and the rich page
|
||||
// survives. Today updatePage is called with the empty content (data loss).
|
||||
expect(pageRepo.updatePage).not.toHaveBeenCalled();
|
||||
},
|
||||
);
|
||||
|
||||
// persist-1 — when every attempt fails the hook must NOT report a phantom
|
||||
// success: no "page.updated" badge broadcast and no history snapshot for
|
||||
// content that was never written.
|
||||
|
||||
@@ -0,0 +1,483 @@
|
||||
import * as Y from 'yjs';
|
||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
||||
import { PersistenceExtension } from './persistence.extension';
|
||||
import { buildTitleSeedYdoc, tiptapExtensions } from '../collaboration.util';
|
||||
|
||||
// Direct instantiation with stub deps, mirroring the auth/env unit specs.
|
||||
const bodyJson = {
|
||||
type: 'doc',
|
||||
content: [{ type: 'paragraph', content: [{ type: 'text', text: 'hello' }] }],
|
||||
};
|
||||
|
||||
// Build a body Y.Doc with a known JSON, plus a monkey-patched broadcastStateless
|
||||
// (the real Hocuspocus Document supplies it; a bare Y.Doc does not).
|
||||
const buildDoc = () => {
|
||||
const d: any = TiptapTransformer.toYdoc(bodyJson, 'default', tiptapExtensions);
|
||||
d.broadcastStateless = jest.fn();
|
||||
return d;
|
||||
};
|
||||
|
||||
const cloneOut = (doc: any) =>
|
||||
JSON.parse(JSON.stringify(TiptapTransformer.fromYdoc(doc, 'default')));
|
||||
|
||||
const addTitleFragment = (doc: any, title: string) =>
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(buildTitleSeedYdoc(title)));
|
||||
|
||||
describe('PersistenceExtension', () => {
|
||||
let pageRepo: any;
|
||||
let pageHistoryRepo: any;
|
||||
let trx: any;
|
||||
let db: any;
|
||||
let aiQueue: any;
|
||||
let historyQueue: any;
|
||||
let notificationQueue: any;
|
||||
let collabHistory: any;
|
||||
let transclusionService: any;
|
||||
let ext: PersistenceExtension;
|
||||
|
||||
beforeEach(() => {
|
||||
pageRepo = {
|
||||
findById: jest.fn(),
|
||||
updatePage: jest.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
pageHistoryRepo = {
|
||||
findPageLastHistory: jest.fn(),
|
||||
saveHistory: jest.fn(),
|
||||
};
|
||||
trx = {};
|
||||
db = { transaction: () => ({ execute: (fn: any) => fn(trx) }) };
|
||||
aiQueue = { add: jest.fn().mockResolvedValue(undefined) };
|
||||
historyQueue = { add: jest.fn().mockResolvedValue(undefined) };
|
||||
notificationQueue = { add: jest.fn().mockResolvedValue(undefined) };
|
||||
collabHistory = { addContributors: jest.fn().mockResolvedValue(undefined) };
|
||||
transclusionService = {
|
||||
syncPageTransclusions: jest.fn().mockResolvedValue(undefined),
|
||||
syncPageReferences: jest.fn().mockResolvedValue(undefined),
|
||||
syncPageTemplateReferences: jest.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
|
||||
ext = new PersistenceExtension(
|
||||
pageRepo as any,
|
||||
pageHistoryRepo as any,
|
||||
db as any,
|
||||
aiQueue as any,
|
||||
historyQueue as any,
|
||||
notificationQueue as any,
|
||||
collabHistory as any,
|
||||
transclusionService as any,
|
||||
);
|
||||
});
|
||||
|
||||
describe('seedTitleFragment', () => {
|
||||
it('returns false for empty/whitespace/null titles', () => {
|
||||
const doc = new Y.Doc();
|
||||
expect((ext as any).seedTitleFragment(doc, '')).toBe(false);
|
||||
expect((ext as any).seedTitleFragment(doc, ' ')).toBe(false);
|
||||
expect((ext as any).seedTitleFragment(doc, null)).toBe(false);
|
||||
});
|
||||
|
||||
it('does NOT re-seed an existing non-empty title fragment', () => {
|
||||
const doc = new Y.Doc();
|
||||
addTitleFragment(doc, 'Existing');
|
||||
|
||||
expect((ext as any).seedTitleFragment(doc, 'Other')).toBe(false);
|
||||
|
||||
const text = TiptapTransformer.fromYdoc(doc, 'title');
|
||||
expect(JSON.stringify(text)).toContain('Existing');
|
||||
expect(JSON.stringify(text)).not.toContain('Other');
|
||||
});
|
||||
|
||||
it('seeds an empty fragment from a non-empty title and returns true', () => {
|
||||
const doc = new Y.Doc();
|
||||
expect((ext as any).seedTitleFragment(doc, 'Hello')).toBe(true);
|
||||
|
||||
const json: any = TiptapTransformer.fromYdoc(doc, 'title');
|
||||
expect(JSON.stringify(json)).toContain('Hello');
|
||||
});
|
||||
|
||||
it('returns false (defensive) when reading the fragment throws', () => {
|
||||
const fakeDoc = {
|
||||
get: () => {
|
||||
throw new Error('boom');
|
||||
},
|
||||
};
|
||||
expect((ext as any).seedTitleFragment(fakeDoc as any, 'X')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onStoreDocument', () => {
|
||||
const basePage = (overrides: any) => ({
|
||||
id: 'PAGE_ID',
|
||||
slugId: 'slug',
|
||||
spaceId: 'space',
|
||||
parentPageId: null,
|
||||
creatorId: 'creator',
|
||||
contributorIds: ['creator'],
|
||||
workspaceId: 'ws',
|
||||
title: 'whatever',
|
||||
content: null,
|
||||
lastUpdatedSource: 'user',
|
||||
createdAt: new Date().toISOString(),
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const context = { user: { id: 'u1', name: 'U', avatarUrl: null } };
|
||||
|
||||
it('no-op when neither body nor title changed', async () => {
|
||||
const document = buildDoc();
|
||||
const page = basePage({
|
||||
content: cloneOut(document),
|
||||
title: 'hello title',
|
||||
});
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
await ext.onStoreDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
context,
|
||||
} as any);
|
||||
|
||||
expect(pageRepo.updatePage).not.toHaveBeenCalled();
|
||||
expect(document.broadcastStateless).not.toHaveBeenCalled();
|
||||
expect(collabHistory.addContributors).not.toHaveBeenCalled();
|
||||
expect(transclusionService.syncPageTransclusions).not.toHaveBeenCalled();
|
||||
expect(aiQueue.add).not.toHaveBeenCalled();
|
||||
expect(historyQueue.add).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('title-only change persists the title without body side-effects', async () => {
|
||||
const document = buildDoc();
|
||||
addTitleFragment(document, 'New Title');
|
||||
const page = basePage({
|
||||
content: cloneOut(document),
|
||||
title: 'Old Title',
|
||||
});
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
await ext.onStoreDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
context,
|
||||
} as any);
|
||||
|
||||
expect(pageRepo.updatePage).toHaveBeenCalledTimes(1);
|
||||
const call = pageRepo.updatePage.mock.calls[0];
|
||||
expect(call[0].title).toBe('New Title');
|
||||
expect(call[0].ydoc).toBeDefined();
|
||||
expect(call[0].contributorIds).toBeDefined();
|
||||
expect('content' in call[0]).toBe(false);
|
||||
// Title-only must not touch the body-authorship provenance.
|
||||
expect('lastUpdatedSource' in call[0]).toBe(false);
|
||||
expect(call[1]).toBe('PAGE_ID');
|
||||
expect(call[3].treeUpdate.title).toBe('New Title');
|
||||
|
||||
expect(collabHistory.addContributors).toHaveBeenCalledTimes(1);
|
||||
expect(collabHistory.addContributors).toHaveBeenCalledWith(
|
||||
'PAGE_ID',
|
||||
expect.any(Array),
|
||||
);
|
||||
expect(document.broadcastStateless).toHaveBeenCalledTimes(1);
|
||||
expect(transclusionService.syncPageTransclusions).not.toHaveBeenCalled();
|
||||
expect(aiQueue.add).not.toHaveBeenCalled();
|
||||
expect(historyQueue.add).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('an EMPTY title fragment does NOT overwrite a non-empty page.title (anti-corruption guard, Bug 2)', async () => {
|
||||
// The client can momentarily seed the 'title' fragment as an EMPTY heading
|
||||
// (hasTitleFragment true, extracted text '') before the real title syncs.
|
||||
// Body is unchanged here, so the only candidate write is the title -> the
|
||||
// guard must turn this into a full no-op (no updatePage, no broadcast).
|
||||
const document = buildDoc();
|
||||
addTitleFragment(document, ''); // empty heading: length > 0 but text ''
|
||||
const page = basePage({
|
||||
content: cloneOut(document),
|
||||
title: 'Real Title',
|
||||
});
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
await ext.onStoreDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
context,
|
||||
} as any);
|
||||
|
||||
// No write at all: the empty title is not authoritative and the body is
|
||||
// unchanged, so onStoreDocument must take the no-op fast path.
|
||||
expect(pageRepo.updatePage).not.toHaveBeenCalled();
|
||||
expect(document.broadcastStateless).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('an EMPTY title fragment alongside a body change persists the body but NOT an empty title (anti-corruption guard, Bug 2)', async () => {
|
||||
const document = buildDoc();
|
||||
addTitleFragment(document, ''); // empty title fragment
|
||||
const page = basePage({
|
||||
content: { type: 'doc', content: [] }, // different body -> bodyChanged
|
||||
title: 'Real Title',
|
||||
});
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
await ext.onStoreDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
context,
|
||||
} as any);
|
||||
|
||||
expect(pageRepo.updatePage).toHaveBeenCalledTimes(1);
|
||||
const call = pageRepo.updatePage.mock.calls[0];
|
||||
// Body is persisted, but the title is NOT included (empty == not
|
||||
// authoritative) and no tree update is broadcast for the title.
|
||||
expect(call[0].content).toBeTruthy();
|
||||
expect('title' in call[0]).toBe(false);
|
||||
expect(call[3]).toBeUndefined();
|
||||
});
|
||||
|
||||
it('body + title change persists both with full body side-effects', async () => {
|
||||
const document = buildDoc();
|
||||
addTitleFragment(document, 'New Title');
|
||||
const page = basePage({
|
||||
content: { type: 'doc', content: [] },
|
||||
title: 'Old Title',
|
||||
});
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
await ext.onStoreDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
context,
|
||||
} as any);
|
||||
|
||||
expect(pageRepo.updatePage).toHaveBeenCalledTimes(1);
|
||||
const call = pageRepo.updatePage.mock.calls[0];
|
||||
expect(call[0].content).toBeTruthy();
|
||||
expect(call[0].title).toBe('New Title');
|
||||
expect(call[0].ydoc).toBeDefined();
|
||||
expect(call[0].lastUpdatedSource).toBe('user');
|
||||
expect(call[3].treeUpdate).toBeDefined();
|
||||
|
||||
expect(transclusionService.syncPageTransclusions).toHaveBeenCalled();
|
||||
expect(aiQueue.add).toHaveBeenCalled();
|
||||
expect(historyQueue.add).toHaveBeenCalled();
|
||||
expect(collabHistory.addContributors).toHaveBeenCalled();
|
||||
expect(document.broadcastStateless).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('body-only change persists the body without a tree update', async () => {
|
||||
const document = buildDoc();
|
||||
const page = basePage({
|
||||
content: { type: 'doc', content: [] },
|
||||
title: 'whatever',
|
||||
});
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
await ext.onStoreDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
context,
|
||||
} as any);
|
||||
|
||||
expect(pageRepo.updatePage).toHaveBeenCalledTimes(1);
|
||||
const call = pageRepo.updatePage.mock.calls[0];
|
||||
expect(call[0].content).toBeTruthy();
|
||||
expect('title' in call[0]).toBe(false);
|
||||
// No treeUpdate for a body-only save.
|
||||
expect(call[3]).toBeUndefined();
|
||||
|
||||
expect(transclusionService.syncPageTransclusions).toHaveBeenCalled();
|
||||
expect(aiQueue.add).toHaveBeenCalled();
|
||||
expect(historyQueue.add).toHaveBeenCalled();
|
||||
expect(document.broadcastStateless).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('onLoadDocument', () => {
|
||||
it('returns early (no DB read) when the document is not empty', async () => {
|
||||
const document = { isEmpty: () => false };
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
expect(result).toBeUndefined();
|
||||
expect(pageRepo.findById).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('returns undefined and does not persist when the page is null', async () => {
|
||||
const document = { isEmpty: () => true };
|
||||
pageRepo.findById.mockResolvedValue(null);
|
||||
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
expect(result).toBeUndefined();
|
||||
expect(pageRepo.updatePage).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('seeds + persists under a lock when the persisted ydoc lacks a title fragment', async () => {
|
||||
const src = TiptapTransformer.toYdoc(bodyJson, 'default', tiptapExtensions);
|
||||
const page = {
|
||||
id: 'PAGE_ID',
|
||||
title: 'Legacy Title',
|
||||
ydoc: Buffer.from(Y.encodeStateAsUpdate(src)),
|
||||
content: null,
|
||||
};
|
||||
// Both the cheap pre-check and the locked re-read return the same row.
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
const document = { isEmpty: () => true };
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
// The locked re-read must take the row lock inside the tx.
|
||||
const lockedReadCall = pageRepo.findById.mock.calls.find(
|
||||
(c: any[]) => c[1]?.withLock,
|
||||
);
|
||||
expect(lockedReadCall).toBeDefined();
|
||||
expect(lockedReadCall[1].trx).toBe(trx);
|
||||
|
||||
expect(pageRepo.updatePage).toHaveBeenCalledTimes(1);
|
||||
const call = pageRepo.updatePage.mock.calls[0];
|
||||
expect(Buffer.isBuffer(call[0].ydoc)).toBe(true);
|
||||
expect(call[1]).toBe('PAGE_ID');
|
||||
// Persist must run inside the transaction.
|
||||
expect(call[2]).toBe(trx);
|
||||
expect(result).toBeTruthy();
|
||||
});
|
||||
|
||||
it('does NOT lock or persist when the ydoc already has a title fragment', async () => {
|
||||
const src = TiptapTransformer.toYdoc(bodyJson, 'default', tiptapExtensions);
|
||||
Y.applyUpdate(src, Y.encodeStateAsUpdate(buildTitleSeedYdoc('Has Title')));
|
||||
const page = {
|
||||
id: 'PAGE_ID',
|
||||
title: 'Has Title',
|
||||
ydoc: Buffer.from(Y.encodeStateAsUpdate(src)),
|
||||
content: null,
|
||||
};
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
const document = { isEmpty: () => true };
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
// Hot path: only the cheap lock-free read, no locked re-read, no write.
|
||||
expect(pageRepo.findById).toHaveBeenCalledTimes(1);
|
||||
expect(pageRepo.findById.mock.calls[0][1]?.withLock).toBeFalsy();
|
||||
expect(pageRepo.updatePage).not.toHaveBeenCalled();
|
||||
expect(result).toBeTruthy();
|
||||
});
|
||||
|
||||
it('converts legacy content -> ydoc inside a tx and persists a {ydoc} Buffer', async () => {
|
||||
const page = {
|
||||
id: 'PAGE_ID',
|
||||
title: 'T',
|
||||
ydoc: null,
|
||||
content: bodyJson,
|
||||
};
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
|
||||
const document = { isEmpty: () => true };
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
const lockedReadCall = pageRepo.findById.mock.calls.find(
|
||||
(c: any[]) => c[1]?.withLock,
|
||||
);
|
||||
expect(lockedReadCall).toBeDefined();
|
||||
expect(lockedReadCall[1].trx).toBe(trx);
|
||||
|
||||
expect(pageRepo.updatePage).toHaveBeenCalledTimes(1);
|
||||
const call = pageRepo.updatePage.mock.calls[0];
|
||||
expect(Buffer.isBuffer(call[0].ydoc)).toBe(true);
|
||||
expect(call[2]).toBe(trx);
|
||||
// The rebuilt doc carries the body.
|
||||
expect(JSON.stringify(cloneOut(result))).toContain('hello');
|
||||
});
|
||||
|
||||
it('SKIPS rebuild when the locked re-read shows the ydoc was already healed', async () => {
|
||||
// Simulate a concurrent process: the cheap pre-check sees ydoc=null (legacy
|
||||
// rebuild path), but by the time we hold the lock another process has
|
||||
// already persisted a healthy ydoc. We must adopt it, not rebuild/clobber.
|
||||
const healed = TiptapTransformer.toYdoc(
|
||||
{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'healed' }] }] },
|
||||
'default',
|
||||
tiptapExtensions,
|
||||
);
|
||||
Y.applyUpdate(healed, Y.encodeStateAsUpdate(buildTitleSeedYdoc('Healed Title')));
|
||||
const healedYdoc = Buffer.from(Y.encodeStateAsUpdate(healed));
|
||||
|
||||
const preCheck = { id: 'PAGE_ID', title: 'T', ydoc: null, content: bodyJson };
|
||||
const lockedRow = {
|
||||
id: 'PAGE_ID',
|
||||
title: 'Healed Title',
|
||||
ydoc: healedYdoc,
|
||||
content: bodyJson,
|
||||
};
|
||||
pageRepo.findById
|
||||
.mockResolvedValueOnce(preCheck) // cheap pre-check
|
||||
.mockResolvedValueOnce(lockedRow); // locked re-read
|
||||
|
||||
const document = { isEmpty: () => true };
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
// The healthy ydoc had a title fragment already, so nothing was rebuilt or
|
||||
// seeded -> no clobbering write.
|
||||
expect(pageRepo.updatePage).not.toHaveBeenCalled();
|
||||
// The returned doc is the healed body, NOT a fresh rebuild of bodyJson.
|
||||
expect(JSON.stringify(cloneOut(result))).toContain('healed');
|
||||
});
|
||||
|
||||
it('REJECTS the load when the rebuild persist fails (does not return an unpersisted doc)', async () => {
|
||||
const page = { id: 'PAGE_ID', title: 'T', ydoc: null, content: bodyJson };
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
pageRepo.updatePage.mockRejectedValue(new Error('db down'));
|
||||
const errSpy = jest
|
||||
.spyOn((ext as any).logger, 'error')
|
||||
.mockImplementation(() => undefined);
|
||||
|
||||
const document = { isEmpty: () => true };
|
||||
await expect(
|
||||
ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any),
|
||||
).rejects.toThrow('db down');
|
||||
expect(errSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('seed-only persist FAILURE returns the doc from the existing ydoc (no throw)', async () => {
|
||||
const src = TiptapTransformer.toYdoc(bodyJson, 'default', tiptapExtensions);
|
||||
const page = {
|
||||
id: 'PAGE_ID',
|
||||
title: 'Legacy Title',
|
||||
ydoc: Buffer.from(Y.encodeStateAsUpdate(src)),
|
||||
content: null,
|
||||
};
|
||||
pageRepo.findById.mockResolvedValue(page);
|
||||
pageRepo.updatePage.mockRejectedValue(new Error('db down'));
|
||||
const errSpy = jest
|
||||
.spyOn((ext as any).logger, 'error')
|
||||
.mockImplementation(() => undefined);
|
||||
|
||||
const document = { isEmpty: () => true };
|
||||
const result = await ext.onLoadDocument({
|
||||
documentName: 'page.PAGE_ID',
|
||||
document,
|
||||
} as any);
|
||||
|
||||
// Non-fatal: we fall back to the doc loaded from the existing page.ydoc.
|
||||
expect(result).toBeTruthy();
|
||||
expect(JSON.stringify(cloneOut(result))).toContain('hello');
|
||||
expect(errSpy).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -9,6 +9,7 @@ import * as Y from 'yjs';
|
||||
import { Injectable, Logger } from '@nestjs/common';
|
||||
import { TiptapTransformer } from '@hocuspocus/transformer';
|
||||
import {
|
||||
buildTitleSeedYdoc,
|
||||
getPageId,
|
||||
isEmptyParagraphDoc,
|
||||
jsonToText,
|
||||
@@ -116,6 +117,10 @@ export class PersistenceExtension implements Extension {
|
||||
return;
|
||||
}
|
||||
|
||||
// Cheap, lock-free pre-check (hot path stays lock-free). It tells us whether
|
||||
// any heal (legacy rebuild and/or title seed) is needed; the heal itself
|
||||
// re-reads the row FOR UPDATE and re-validates inside a transaction so it
|
||||
// runs exactly once (see healUnderLock).
|
||||
const page = await this.pageRepo.findById(pageId, {
|
||||
includeContent: true,
|
||||
includeYdoc: true,
|
||||
@@ -127,33 +132,164 @@ export class PersistenceExtension implements Extension {
|
||||
}
|
||||
|
||||
if (page.ydoc) {
|
||||
this.logger.debug(`ydoc loaded from db: ${pageId}`);
|
||||
|
||||
const doc = new Y.Doc();
|
||||
const dbState = new Uint8Array(page.ydoc);
|
||||
Y.applyUpdate(doc, new Uint8Array(page.ydoc));
|
||||
|
||||
Y.applyUpdate(doc, dbState);
|
||||
// Legacy pages persisted their title only in the `page.title` column; the
|
||||
// ydoc has no 'title' fragment. Decide cheaply (no lock) whether a seed is
|
||||
// needed by inspecting the loaded doc's 'title' fragment. A seed is needed
|
||||
// only when that fragment is empty AND there is a non-empty column title.
|
||||
let titleSeedNeeded = false;
|
||||
try {
|
||||
const titleFrag = doc.get('title', Y.XmlFragment);
|
||||
titleSeedNeeded = titleFrag.length === 0 && !!page.title?.trim();
|
||||
} catch (err) {
|
||||
// A malformed title fragment must not break loading; skip the seed.
|
||||
this.logger.warn(`failed to inspect title fragment: ${err?.['message']}`);
|
||||
titleSeedNeeded = false;
|
||||
}
|
||||
|
||||
if (!titleSeedNeeded) {
|
||||
// Fully healthy: a ydoc with a title fragment (or nothing to seed).
|
||||
this.logger.debug(`ydoc loaded from db: ${pageId}`);
|
||||
return doc;
|
||||
}
|
||||
|
||||
// if no ydoc state in db convert json in page.content to Ydoc.
|
||||
if (page.content) {
|
||||
this.logger.debug(`converting json to ydoc: ${pageId}`);
|
||||
|
||||
const ydoc = TiptapTransformer.toYdoc(
|
||||
page.content,
|
||||
'default',
|
||||
tiptapExtensions,
|
||||
// SEED-ONLY heal: a valid page.ydoc already exists; we only need to add the
|
||||
// title fragment. If the persist fails we must NOT hand out an unpersisted
|
||||
// fresh-client-id seed (it could later duplicate the title), so we fall
|
||||
// back to the healthy doc loaded from the EXISTING page.ydoc, without the
|
||||
// seed. The title just won't render until a later successful heal —
|
||||
// non-fatal, non-corrupting.
|
||||
try {
|
||||
return await this.healUnderLock(pageId);
|
||||
} catch (err) {
|
||||
this.logger.error(
|
||||
`Failed to persist seeded ydoc for page ${pageId}; serving existing ydoc without title seed`,
|
||||
err,
|
||||
);
|
||||
return doc;
|
||||
}
|
||||
}
|
||||
|
||||
Y.encodeStateAsUpdate(ydoc);
|
||||
return ydoc;
|
||||
// NOTE (offline-sync M1, Goal 2): this per-load self-heal converts +
|
||||
// title-seeds + persists every legacy page (content set, ydoc null) on its
|
||||
// first open, which neutralizes the duplication trap incrementally. A
|
||||
// proactive one-shot BATCH migration over all such pages could be added
|
||||
// later, but it requires the tiptap schema + TiptapTransformer (Node/Yjs),
|
||||
// which a Kysely SQL migration cannot run; no runnable-task/CLI convention
|
||||
// exists in this repo yet, so we deliberately avoid a fragile migration.
|
||||
//
|
||||
// If no ydoc state in db, REBUILD a Y.Doc from the JSON in page.content under
|
||||
// a row lock (see healUnderLock).
|
||||
if (page.content) {
|
||||
// REBUILD heal: surface failures. If the persist fails we REFUSE the load
|
||||
// (re-throw) rather than hand out an unpersisted fresh-client-id rebuild —
|
||||
// returning it would re-arm the duplication trap. A transient DB failure
|
||||
// means the client reconnects and retries: correctness over availability.
|
||||
try {
|
||||
return await this.healUnderLock(pageId);
|
||||
} catch (err) {
|
||||
this.logger.error(
|
||||
`Failed to persist rebuilt ydoc for page ${pageId}; refusing load`,
|
||||
err,
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
this.logger.debug(`creating fresh ydoc: ${pageId}`);
|
||||
return new Y.Doc();
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialize the legacy self-heal (rebuild from page.content and/or seed the
|
||||
* title fragment, then persist) so it runs exactly ONCE per page, closing the
|
||||
* Yjs duplication trap. Both TiptapTransformer.toYdoc and buildTitleSeedYdoc
|
||||
* mint FRESH Yjs client-ids every call, so two concurrent rebuilds (the API
|
||||
* process via openDirectConnection AND the standalone collab process both
|
||||
* seeing `ydoc IS NULL`) could each persist a different-client-id state and let
|
||||
* a long-offline client merge-and-duplicate. We prevent that by re-reading the
|
||||
* row FOR UPDATE inside a transaction and re-validating state under the lock:
|
||||
* whoever wins the lock heals; the loser observes the healthy `ydoc` and adopts
|
||||
* it instead of rebuilding. The persist happens IN THE SAME TX, so a failed
|
||||
* write rolls back and propagates out (the caller then decides refuse vs.
|
||||
* fall-back).
|
||||
*/
|
||||
private async healUnderLock(pageId: string): Promise<Y.Doc> {
|
||||
return executeTx(this.db, async (trx) => {
|
||||
const locked = await this.pageRepo.findById(pageId, {
|
||||
withLock: true,
|
||||
includeContent: true,
|
||||
includeYdoc: true,
|
||||
trx,
|
||||
});
|
||||
|
||||
const doc = new Y.Doc();
|
||||
let rebuilt = false;
|
||||
|
||||
if (locked?.ydoc) {
|
||||
// Another process already healed (or the page always had a ydoc): adopt
|
||||
// the healthy persisted state, do NOT rebuild.
|
||||
Y.applyUpdate(doc, new Uint8Array(locked.ydoc));
|
||||
} else if (locked?.content) {
|
||||
this.logger.debug(`converting json to ydoc: ${pageId}`);
|
||||
const built = TiptapTransformer.toYdoc(
|
||||
locked.content,
|
||||
'default',
|
||||
tiptapExtensions,
|
||||
);
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(built));
|
||||
rebuilt = true;
|
||||
}
|
||||
// else: no ydoc and no content -> a fresh empty doc.
|
||||
|
||||
// Idempotent, emptiness-guarded title seed (safe to call always).
|
||||
const seeded = this.seedTitleFragment(doc, locked?.title ?? null);
|
||||
|
||||
if (rebuilt || seeded) {
|
||||
// Persist IN THE SAME TX. If this throws, the tx rolls back and the
|
||||
// error propagates out of executeTx to the caller.
|
||||
await this.pageRepo.updatePage(
|
||||
{ ydoc: Buffer.from(Y.encodeStateAsUpdate(doc)) },
|
||||
pageId,
|
||||
trx,
|
||||
);
|
||||
this.logger.debug(`persisted rebuilt/seeded ydoc: ${pageId}`);
|
||||
}
|
||||
|
||||
return doc;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Seed the 'title' fragment of `doc` from the `page.title` column for legacy
|
||||
* pages whose persisted ydoc has no title fragment yet.
|
||||
*
|
||||
* Guarded STRICTLY by emptiness: we only seed when the existing 'title'
|
||||
* fragment is empty AND there is a non-empty column title. Seeding a non-empty
|
||||
* fragment would re-introduce the Yjs duplication trap, so we never do it.
|
||||
* Returns true when a seed was applied (so the caller can persist).
|
||||
* Defensive: a malformed title must not break document loading.
|
||||
*/
|
||||
private seedTitleFragment(doc: Y.Doc, title: string | null): boolean {
|
||||
const trimmed = (title ?? '').trim();
|
||||
if (!trimmed) return false;
|
||||
|
||||
try {
|
||||
const titleFrag = doc.get('title', Y.XmlFragment);
|
||||
if (titleFrag.length !== 0) return false;
|
||||
|
||||
const titleSeed = buildTitleSeedYdoc(title);
|
||||
Y.applyUpdate(doc, Y.encodeStateAsUpdate(titleSeed));
|
||||
this.logger.debug('seeded title fragment from page.title column');
|
||||
return true;
|
||||
} catch (err) {
|
||||
this.logger.warn(`failed to seed title fragment: ${err?.['message']}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async onStoreDocument(data: onStoreDocumentPayload) {
|
||||
const { documentName, document, context } = data;
|
||||
|
||||
@@ -171,7 +307,34 @@ export class PersistenceExtension implements Extension {
|
||||
this.logger.warn('jsonToText' + err?.['message']);
|
||||
}
|
||||
|
||||
// Title lives in the SAME Y.Doc as the body, in a dedicated 'title' fragment
|
||||
// (the collaborative title-editor contract with the client). Extract it
|
||||
// defensively: a malformed title fragment must NOT crash the document store.
|
||||
// `hasTitleFragment` distinguishes "the doc actually carries a title
|
||||
// fragment" from "legacy doc with no title fragment" — only the former may
|
||||
// write page.title, so a legacy doc never clobbers the column with ''.
|
||||
let titleText = '';
|
||||
let hasTitleFragment = false;
|
||||
try {
|
||||
const titleFrag = document.get('title', Y.XmlFragment);
|
||||
hasTitleFragment = !!titleFrag && titleFrag.length > 0;
|
||||
if (hasTitleFragment) {
|
||||
const titleJson = TiptapTransformer.fromYdoc(document, 'title');
|
||||
titleText = titleJson ? jsonToText(titleJson).trim() : '';
|
||||
}
|
||||
} catch (err) {
|
||||
this.logger.warn('title extraction: ' + err?.['message']);
|
||||
hasTitleFragment = false;
|
||||
}
|
||||
|
||||
let page: Page = null;
|
||||
// Tracks whether the BODY ('default') changed in this store. The heavy
|
||||
// body-only side-effects (transclusion sync, mentions, RAG, history) stay
|
||||
// gated on this so a title-only change does not trigger them.
|
||||
let bodyChanged = false;
|
||||
// Tracks a successful title-only persist so the post-tx contributor folding
|
||||
// (collabHistory.addContributors) runs for the title-only case too.
|
||||
let titleOnlyPersisted = false;
|
||||
const editingUserIds = this.consumeContributors(documentName);
|
||||
// Sticky agent marker: 'agent' if any agent edit landed in this window, OR
|
||||
// if the current writer is the agent (covers a store with no prior onChange
|
||||
@@ -205,11 +368,80 @@ export class PersistenceExtension implements Extension {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDeepStrictEqual(tiptapJson, page.content)) {
|
||||
bodyChanged = !isDeepStrictEqual(tiptapJson, page.content);
|
||||
// Only a populated 'title' fragment may update page.title; compare
|
||||
// against the current column value (treat null as '').
|
||||
//
|
||||
// ANTI-CORRUPTION GUARD (Bug 2): the client's collaborative title-editor
|
||||
// can momentarily initialize the 'title' fragment as an EMPTY heading
|
||||
// (so `hasTitleFragment` is true, but the extracted `titleText` is '')
|
||||
// BEFORE the server's real-title seed has synced. Writing that '' would
|
||||
// silently wipe a non-empty page.title to "untitled". A wiki page is
|
||||
// never legitimately retitled to empty via this path, so we treat an
|
||||
// empty extracted title as "not authoritative" and never persist it.
|
||||
// The `titleText.length > 0` clause makes this guard apply to BOTH the
|
||||
// title-only branch and the body+title branch below.
|
||||
//
|
||||
// DELIBERATE: this intentionally makes it impossible to retitle a page
|
||||
// to EMPTY via the collab path — a wiki page is never legitimately
|
||||
// empty-titled. If a non-empty-title rule ever needs relaxing or
|
||||
// enforcing differently, the REST UpdatePageDto is the place to validate
|
||||
// the title, not this collab guard.
|
||||
const titleChanged =
|
||||
hasTitleFragment &&
|
||||
titleText.length > 0 &&
|
||||
titleText !== (page.title ?? '');
|
||||
|
||||
// No-op fast path: neither body nor title changed.
|
||||
if (!bodyChanged && !titleChanged) {
|
||||
page = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Title-only change: the body is unchanged, so skip the heavy body
|
||||
// history/contributor logic and persist just the new title and the
|
||||
// ydoc (the title fragment edit lives in the same ydoc). The early-skip
|
||||
// used to drop this case entirely, losing the title change.
|
||||
if (!bodyChanged) {
|
||||
// Fold the window's editing users into contributors the same way the
|
||||
// body branch does, so a user who edited ONLY the title is not dropped
|
||||
// from page.contributorIds.
|
||||
const contributorIds = Array.from(
|
||||
new Set([
|
||||
...(page.contributorIds || []),
|
||||
...editingUserIds,
|
||||
page.creatorId,
|
||||
]),
|
||||
);
|
||||
await this.pageRepo.updatePage(
|
||||
{
|
||||
title: titleText,
|
||||
ydoc: ydocState,
|
||||
lastUpdatedById: context.user.id,
|
||||
contributorIds,
|
||||
// A title-only change is not a body-authorship transition; leave
|
||||
// lastUpdatedSource/aiChatId untouched so the user->agent history
|
||||
// boundary in the body branch is not bypassed.
|
||||
},
|
||||
pageId,
|
||||
trx,
|
||||
// Mirror PageService.update's tree snapshot so a collaborative rename
|
||||
// propagates to other users' sidebar/breadcrumbs like the REST rename.
|
||||
{
|
||||
treeUpdate: {
|
||||
id: pageId,
|
||||
slugId: page.slugId,
|
||||
spaceId: page.spaceId,
|
||||
parentPageId: page.parentPageId ?? null,
|
||||
title: titleText,
|
||||
},
|
||||
},
|
||||
);
|
||||
this.logger.debug(`Page title updated: ${pageId} - SlugId: ${page.slugId}`);
|
||||
titleOnlyPersisted = true;
|
||||
return;
|
||||
}
|
||||
|
||||
let contributorIds = undefined;
|
||||
try {
|
||||
const existingContributors = page.contributorIds || [];
|
||||
@@ -227,29 +459,22 @@ export class PersistenceExtension implements Extension {
|
||||
// Approach A — boundary snapshot before the agent's first edit.
|
||||
// When this store is the agent's and the page's currently persisted
|
||||
// state was authored by a human, pin that human state as its own
|
||||
// history version BEFORE the agent overwrites it. `page` still holds
|
||||
// the OLD content/provenance here, so saveHistory(page) captures the
|
||||
// pre-agent state tagged 'user'. The agent's new content is
|
||||
// snapshotted later by the debounced PAGE_HISTORY job ('agent'). Skip
|
||||
// if the prior state is already agent-authored (boundary already
|
||||
// pinned on the user->agent transition), if the page is effectively
|
||||
// empty, or if the latest existing snapshot already equals this human
|
||||
// state (avoid duplicates).
|
||||
if (
|
||||
lastUpdatedSource === 'agent' &&
|
||||
page.lastUpdatedSource !== 'agent'
|
||||
) {
|
||||
// history version BEFORE the agent overwrites it. `page` still holds the
|
||||
// OLD content/provenance here, so saveHistory(page) captures the
|
||||
// pre-agent state tagged 'user'. The agent's new content is snapshotted
|
||||
// later by the debounced PAGE_HISTORY job ('agent'). Skip if the prior
|
||||
// state is already agent-authored (boundary already pinned on the
|
||||
// user->agent transition), if the page is effectively empty, or if the
|
||||
// latest existing snapshot already equals this human state (avoid
|
||||
// duplicates).
|
||||
if (lastUpdatedSource === 'agent' && page.lastUpdatedSource !== 'agent') {
|
||||
const lastHistory = await this.pageHistoryRepo.findPageLastHistory(
|
||||
pageId,
|
||||
{ includeContent: true, trx },
|
||||
);
|
||||
const humanBaselineMissing =
|
||||
!lastHistory ||
|
||||
!isDeepStrictEqual(lastHistory.content, page.content);
|
||||
if (
|
||||
!isEmptyParagraphDoc(page.content as any) &&
|
||||
humanBaselineMissing
|
||||
) {
|
||||
!lastHistory || !isDeepStrictEqual(lastHistory.content, page.content);
|
||||
if (!isEmptyParagraphDoc(page.content as any) && humanBaselineMissing) {
|
||||
await this.pageHistoryRepo.saveHistory(page, {
|
||||
contributorIds: page.contributorIds ?? undefined,
|
||||
trx,
|
||||
@@ -267,9 +492,27 @@ export class PersistenceExtension implements Extension {
|
||||
lastUpdatedSource,
|
||||
lastUpdatedAiChatId: context?.aiChatId ?? null,
|
||||
contributorIds: contributorIds,
|
||||
// Persist the title in the SAME transaction when the title fragment
|
||||
// changed alongside the body.
|
||||
...(titleChanged ? { title: titleText } : {}),
|
||||
},
|
||||
pageId,
|
||||
trx,
|
||||
// Mirror PageService.update's tree snapshot so a collaborative rename
|
||||
// propagates to other users' sidebar/breadcrumbs like the REST rename.
|
||||
// Only attach when the title actually changed; a body-only save must
|
||||
// not trigger a tree broadcast.
|
||||
titleChanged
|
||||
? {
|
||||
treeUpdate: {
|
||||
id: pageId,
|
||||
slugId: page.slugId,
|
||||
spaceId: page.spaceId,
|
||||
parentPageId: page.parentPageId ?? null,
|
||||
title: titleText,
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
);
|
||||
|
||||
this.logger.debug(`Page updated: ${pageId} - SlugId: ${page.slugId}`);
|
||||
@@ -290,6 +533,8 @@ export class PersistenceExtension implements Extension {
|
||||
}
|
||||
}
|
||||
|
||||
// `page` is truthy whenever anything was persisted (body OR title-only), so
|
||||
// the page.updated broadcast fires for a title-only change too.
|
||||
if (page) {
|
||||
document.broadcastStateless(
|
||||
JSON.stringify({
|
||||
@@ -307,11 +552,20 @@ export class PersistenceExtension implements Extension {
|
||||
: undefined,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// Record the window's editing users in collab history for a title-only
|
||||
// change too (the body branch does this below, gated on bodyChanged).
|
||||
if (page && titleOnlyPersisted) {
|
||||
await this.collabHistory.addContributors(pageId, editingUserIds);
|
||||
}
|
||||
|
||||
// Body-only side-effects: skip them for a title-only change (body unchanged).
|
||||
if (page && bodyChanged) {
|
||||
await this.syncTransclusion(pageId, page.workspaceId, tiptapJson);
|
||||
}
|
||||
|
||||
if (page) {
|
||||
if (page && bodyChanged) {
|
||||
await this.collabHistory.addContributors(pageId, editingUserIds);
|
||||
|
||||
const mentions = extractMentions(tiptapJson);
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { RedisService } from '@nestjs-labs/nestjs-ioredis';
|
||||
import { PageTreeBridgePublisher } from './page-tree-bridge.publisher';
|
||||
import { COLLAB_TREE_UPDATE_CHANNEL } from '../constants';
|
||||
import {
|
||||
PageEvent,
|
||||
TreeUpdateSnapshot,
|
||||
} from '../../database/listeners/page.listener';
|
||||
|
||||
const treeUpdate: TreeUpdateSnapshot = {
|
||||
id: 'page-1',
|
||||
slugId: 'slug-1',
|
||||
spaceId: 'space-1',
|
||||
parentPageId: null,
|
||||
title: 'Renamed',
|
||||
icon: '🚀',
|
||||
};
|
||||
|
||||
describe('PageTreeBridgePublisher', () => {
|
||||
let publisher: PageTreeBridgePublisher;
|
||||
let redis: { publish: jest.Mock };
|
||||
|
||||
beforeEach(async () => {
|
||||
redis = { publish: jest.fn().mockResolvedValue(1) };
|
||||
const redisService = { getOrThrow: () => redis } as unknown as RedisService;
|
||||
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
providers: [
|
||||
PageTreeBridgePublisher,
|
||||
{ provide: RedisService, useValue: redisService },
|
||||
],
|
||||
}).compile();
|
||||
|
||||
publisher = module.get<PageTreeBridgePublisher>(PageTreeBridgePublisher);
|
||||
});
|
||||
|
||||
it('WITH a `treeUpdate`: publishes the JSON snapshot on the channel', async () => {
|
||||
const event: PageEvent = {
|
||||
pageIds: ['page-1'],
|
||||
workspaceId: 'ws-1',
|
||||
treeUpdate,
|
||||
};
|
||||
|
||||
await publisher.onPageUpdated(event);
|
||||
|
||||
expect(redis.publish).toHaveBeenCalledTimes(1);
|
||||
expect(redis.publish).toHaveBeenCalledWith(
|
||||
COLLAB_TREE_UPDATE_CHANNEL,
|
||||
JSON.stringify(treeUpdate),
|
||||
);
|
||||
});
|
||||
|
||||
it('content-only save (NO `treeUpdate`): does NOT publish', async () => {
|
||||
const event: PageEvent = {
|
||||
pageIds: ['page-1'],
|
||||
workspaceId: 'ws-1',
|
||||
};
|
||||
|
||||
await publisher.onPageUpdated(event);
|
||||
|
||||
expect(redis.publish).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('a publish rejection is caught (no throw)', async () => {
|
||||
redis.publish.mockRejectedValueOnce(new Error('redis down'));
|
||||
const errorSpy = jest
|
||||
.spyOn(publisher['logger'], 'error')
|
||||
.mockImplementation(() => undefined);
|
||||
|
||||
const event: PageEvent = {
|
||||
pageIds: ['page-1'],
|
||||
workspaceId: 'ws-1',
|
||||
treeUpdate,
|
||||
};
|
||||
|
||||
await expect(publisher.onPageUpdated(event)).resolves.toBeUndefined();
|
||||
expect(errorSpy).toHaveBeenCalledTimes(1);
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Injectable, Logger } from '@nestjs/common';
|
||||
import { OnEvent } from '@nestjs/event-emitter';
|
||||
import { RedisService } from '@nestjs-labs/nestjs-ioredis';
|
||||
import type { Redis } from 'ioredis';
|
||||
import { EventName } from '../../common/events/event.contants';
|
||||
import { PageEvent } from '../../database/listeners/page.listener';
|
||||
import { COLLAB_TREE_UPDATE_CHANNEL } from '../constants';
|
||||
|
||||
/**
|
||||
* Collab-process half of the cross-process tree-update bridge.
|
||||
*
|
||||
* The standalone collab process bootstraps `CollabAppModule`, which does NOT
|
||||
* import `WsModule`/`PageWsListener`. So when a collaborative title/icon rename
|
||||
* persists and emits `EventName.PAGE_UPDATED` with a `treeUpdate` snapshot, there
|
||||
* is no listener in this process to broadcast it — the live tree update would be
|
||||
* lost for 2-process (COLLAB_URL set) deployments.
|
||||
*
|
||||
* This publisher fills that gap: it forwards the `treeUpdate` snapshot over a
|
||||
* Redis pub/sub channel to the API process, which re-broadcasts it via
|
||||
* `WsTreeService` (the single broadcast authority).
|
||||
*
|
||||
* It is registered ONLY in `CollabAppModule.providers`, so it never runs in the
|
||||
* API process (where `PageWsListener` already broadcasts the same event locally).
|
||||
* That module placement is what prevents a double broadcast. In single-process
|
||||
* mode `CollabAppModule` is not loaded at all, so this publisher never runs.
|
||||
*/
|
||||
@Injectable()
|
||||
export class PageTreeBridgePublisher {
|
||||
private readonly logger = new Logger(PageTreeBridgePublisher.name);
|
||||
private readonly redis: Redis;
|
||||
|
||||
constructor(private readonly redisService: RedisService) {
|
||||
this.redis = this.redisService.getOrThrow();
|
||||
}
|
||||
|
||||
@OnEvent(EventName.PAGE_UPDATED)
|
||||
async onPageUpdated(event: PageEvent): Promise<void> {
|
||||
// Mirror PageWsListener's gating: only title/icon changes carry a snapshot.
|
||||
// Content-only saves leave `treeUpdate` undefined and are ignored.
|
||||
if (!event.treeUpdate) return;
|
||||
|
||||
try {
|
||||
await this.redis.publish(
|
||||
COLLAB_TREE_UPDATE_CHANNEL,
|
||||
JSON.stringify(event.treeUpdate),
|
||||
);
|
||||
} catch (err) {
|
||||
// A Redis publish failure must not break the store path.
|
||||
this.logger.error(
|
||||
`Failed to publish tree update to ${COLLAB_TREE_UPDATE_CHANNEL}`,
|
||||
err instanceof Error ? err.stack : String(err),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import { CaslModule } from '../../core/casl/casl.module';
|
||||
import { ThrottleModule } from '../../integrations/throttle/throttle.module';
|
||||
import { CacheModule } from '@nestjs/cache-manager';
|
||||
import KeyvRedis from '@keyv/redis';
|
||||
import { PageTreeBridgePublisher } from '../listeners/page-tree-bridge.publisher';
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
@@ -54,6 +55,6 @@ import KeyvRedis from '@keyv/redis';
|
||||
? [CollaborationController]
|
||||
: []),
|
||||
],
|
||||
providers: [AppService],
|
||||
providers: [AppService, PageTreeBridgePublisher],
|
||||
})
|
||||
export class CollabAppModule {}
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import { McpClientsService } from './mcp-clients.service';
|
||||
|
||||
/**
|
||||
* #204 (Phase 1, highest-value MCP gap) — external MCP client lease / refcount /
|
||||
* eviction lifecycle.
|
||||
*
|
||||
* `toolsFor` hands the streaming turn a release handle; the real transports must
|
||||
* be closed EXACTLY once and only when (a) the cache entry has been evicted AND
|
||||
* (b) no turn still leases it. The bugs this guards against:
|
||||
* - leak: an evicted entry whose clients are never closed (refCount stuck > 0);
|
||||
* - premature close: a TTL/CRUD eviction closing a client a turn is still
|
||||
* executing tool calls against;
|
||||
* - double close: a release handle closing the same client more than once.
|
||||
*
|
||||
* The private `buildEntry` is stubbed so no real network/MCP connection happens;
|
||||
* we drive only the lease bookkeeping in `toolsFor` / `release` / `evict` /
|
||||
* `invalidate`, which is the untested surface.
|
||||
*/
|
||||
describe('McpClientsService lease/refcount/eviction', () => {
|
||||
type FakeClient = { tools: () => Promise<any>; close: jest.Mock };
|
||||
|
||||
function fakeClient(): FakeClient {
|
||||
return {
|
||||
tools: async () => ({}),
|
||||
close: jest.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
}
|
||||
|
||||
// Minimal CacheEntry the service's lease logic operates on.
|
||||
function makeEntry(clients: FakeClient[]) {
|
||||
const timer = setTimeout(() => {}, 60_000);
|
||||
timer.unref?.();
|
||||
return {
|
||||
tools: {},
|
||||
clients,
|
||||
outcomes: [],
|
||||
instructions: [],
|
||||
expiresAt: Date.now() + 60_000,
|
||||
refCount: 0,
|
||||
evicted: false,
|
||||
closed: false,
|
||||
timer,
|
||||
} as any;
|
||||
}
|
||||
|
||||
let service: McpClientsService;
|
||||
|
||||
beforeEach(() => {
|
||||
service = new McpClientsService({} as any, {} as any);
|
||||
});
|
||||
|
||||
function stubBuild(entry: any) {
|
||||
jest.spyOn(service as any, 'buildEntry').mockResolvedValue(entry);
|
||||
}
|
||||
|
||||
it('leases on toolsFor and keeps the client warm (no close) on release', async () => {
|
||||
const client = fakeClient();
|
||||
const entry = makeEntry([client]);
|
||||
stubBuild(entry);
|
||||
|
||||
const lease = await service.toolsFor('ws-1');
|
||||
expect(entry.refCount).toBe(1);
|
||||
|
||||
await lease.clients[0].close();
|
||||
// Released but NOT evicted: the cached entry stays warm for reuse, so the
|
||||
// transport must NOT be closed yet.
|
||||
expect(entry.refCount).toBe(0);
|
||||
expect(client.close).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('defers close when an entry is evicted while still leased, then closes once on release', async () => {
|
||||
const client = fakeClient();
|
||||
const entry = makeEntry([client]);
|
||||
stubBuild(entry);
|
||||
|
||||
const lease = await service.toolsFor('ws-2');
|
||||
(service as any).evict(entry);
|
||||
|
||||
// Evicted under an active lease: close is deferred to the last release.
|
||||
expect(entry.evicted).toBe(true);
|
||||
expect(client.close).not.toHaveBeenCalled();
|
||||
|
||||
await lease.clients[0].close();
|
||||
expect(client.close).toHaveBeenCalledTimes(1);
|
||||
expect(entry.closed).toBe(true);
|
||||
});
|
||||
|
||||
it('shares one entry across concurrent leases; closes only after the LAST release', async () => {
|
||||
const client = fakeClient();
|
||||
const entry = makeEntry([client]);
|
||||
stubBuild(entry);
|
||||
|
||||
const lease1 = await service.toolsFor('ws-3');
|
||||
const lease2 = await service.toolsFor('ws-3');
|
||||
expect(entry.refCount).toBe(2);
|
||||
|
||||
(service as any).evict(entry);
|
||||
|
||||
await lease1.clients[0].close();
|
||||
// One lease remains: a stream could still be running — must stay open.
|
||||
expect(entry.refCount).toBe(1);
|
||||
expect(client.close).not.toHaveBeenCalled();
|
||||
|
||||
await lease2.clients[0].close();
|
||||
expect(entry.refCount).toBe(0);
|
||||
expect(client.close).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('release is idempotent: closing the same handle twice decrements once and closes once', async () => {
|
||||
const client = fakeClient();
|
||||
const entry = makeEntry([client]);
|
||||
stubBuild(entry);
|
||||
|
||||
const lease = await service.toolsFor('ws-4');
|
||||
(service as any).evict(entry);
|
||||
|
||||
await lease.clients[0].close();
|
||||
await lease.clients[0].close();
|
||||
|
||||
expect(entry.refCount).toBe(0); // not -1
|
||||
expect(client.close).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('evicting an unleased entry closes its clients immediately', async () => {
|
||||
const client = fakeClient();
|
||||
const entry = makeEntry([client]);
|
||||
stubBuild(entry);
|
||||
|
||||
const built = await (service as any).getOrBuildEntry('ws-5');
|
||||
expect(built.refCount).toBe(0);
|
||||
|
||||
(service as any).evict(entry);
|
||||
expect(client.close).toHaveBeenCalledTimes(1);
|
||||
expect(entry.closed).toBe(true);
|
||||
});
|
||||
|
||||
it('invalidate (TTL/CRUD) does NOT close a client that a turn still leases', async () => {
|
||||
const client = fakeClient();
|
||||
const entry = makeEntry([client]);
|
||||
stubBuild(entry);
|
||||
|
||||
const lease = await service.toolsFor('ws-6');
|
||||
expect(entry.refCount).toBe(1);
|
||||
|
||||
service.invalidate('ws-6');
|
||||
// invalidate evicts asynchronously once the build promise resolves.
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
|
||||
expect(entry.evicted).toBe(true);
|
||||
// Still leased: the mid-turn eviction must not pull the transport.
|
||||
expect(client.close).not.toHaveBeenCalled();
|
||||
|
||||
await lease.clients[0].close();
|
||||
expect(client.close).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -19,4 +19,87 @@ describe('AuthController', () => {
|
||||
it('should be defined', () => {
|
||||
expect(controller).toBeDefined();
|
||||
});
|
||||
|
||||
// The EE MFA module is absent in this repo, so require() throws and is caught;
|
||||
// login falls through to authService.login -> setAuthCookie -> returnToken.
|
||||
describe('login returnToken branch', () => {
|
||||
const workspace = { id: 'ws1', enforceSso: false };
|
||||
|
||||
const makeController = () => {
|
||||
const authService = {
|
||||
login: jest.fn().mockResolvedValue('jwt-token-123'),
|
||||
};
|
||||
const environmentService = {
|
||||
getCookieExpiresIn: jest.fn().mockReturnValue(new Date()),
|
||||
isHttps: jest.fn().mockReturnValue(false),
|
||||
};
|
||||
const ctrl = new AuthController(
|
||||
authService as any,
|
||||
{} as any,
|
||||
environmentService as any,
|
||||
{} as any,
|
||||
{} as any,
|
||||
);
|
||||
const res = { setCookie: jest.fn() };
|
||||
return { ctrl, authService, res };
|
||||
};
|
||||
|
||||
it('returns the body token and sets the cookie when returnToken is true', async () => {
|
||||
const { ctrl, authService, res } = makeController();
|
||||
const loginInput = {
|
||||
email: 'a@b.com',
|
||||
password: 'pw',
|
||||
returnToken: true,
|
||||
};
|
||||
|
||||
const result = await ctrl.login(
|
||||
workspace as any,
|
||||
res as any,
|
||||
loginInput as any,
|
||||
);
|
||||
|
||||
expect(result).toEqual({ authToken: 'jwt-token-123' });
|
||||
expect(res.setCookie).toHaveBeenCalledTimes(1);
|
||||
expect(res.setCookie).toHaveBeenCalledWith(
|
||||
'authToken',
|
||||
'jwt-token-123',
|
||||
expect.objectContaining({ httpOnly: true }),
|
||||
);
|
||||
expect(authService.login).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('returns no body token but still sets the cookie when returnToken is omitted', async () => {
|
||||
const { ctrl, res } = makeController();
|
||||
const loginInput = { email: 'a@b.com', password: 'pw' };
|
||||
|
||||
const result = await ctrl.login(
|
||||
workspace as any,
|
||||
res as any,
|
||||
loginInput as any,
|
||||
);
|
||||
|
||||
expect(result).toBeUndefined();
|
||||
expect(res.setCookie).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
// Guards against an `!== undefined`-style bug: an explicit `false` must
|
||||
// behave exactly like the omitted case (cookie set, no token in the body).
|
||||
it('returns no body token but still sets the cookie when returnToken is false', async () => {
|
||||
const { ctrl, res } = makeController();
|
||||
const loginInput = {
|
||||
email: 'a@b.com',
|
||||
password: 'pw',
|
||||
returnToken: false,
|
||||
};
|
||||
|
||||
const result = await ctrl.login(
|
||||
workspace as any,
|
||||
res as any,
|
||||
loginInput as any,
|
||||
);
|
||||
|
||||
expect(result).toBeUndefined();
|
||||
expect(res.setCookie).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -97,6 +97,12 @@ export class AuthController {
|
||||
} else if (mfaResult.authToken) {
|
||||
// User doesn't have MFA and workspace doesn't require it
|
||||
this.setAuthCookie(res, mfaResult.authToken);
|
||||
// Opt-in body token for native clients (Bearer auth). The response is
|
||||
// wrapped by TransformHttpResponseInterceptor, so clients read it at
|
||||
// `data.authToken`. Web clients omit returnToken and keep the cookie.
|
||||
if (loginInput.returnToken) {
|
||||
return { authToken: mfaResult.authToken };
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -104,6 +110,12 @@ export class AuthController {
|
||||
|
||||
const authToken = await this.authService.login(loginInput, workspace.id);
|
||||
this.setAuthCookie(res, authToken);
|
||||
// Opt-in body token for native clients (Bearer auth). The response is wrapped
|
||||
// by TransformHttpResponseInterceptor, so clients read it at `data.authToken`.
|
||||
// Web clients omit returnToken and keep using the httpOnly cookie only.
|
||||
if (loginInput.returnToken) {
|
||||
return { authToken };
|
||||
}
|
||||
}
|
||||
|
||||
@UseGuards(SetupGuard)
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
import { IsEmail, IsNotEmpty, IsString } from 'class-validator';
|
||||
import {
|
||||
IsBoolean,
|
||||
IsEmail,
|
||||
IsNotEmpty,
|
||||
IsOptional,
|
||||
IsString,
|
||||
} from 'class-validator';
|
||||
|
||||
export class LoginDto {
|
||||
@IsNotEmpty()
|
||||
@@ -8,4 +14,13 @@ export class LoginDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
password: string;
|
||||
|
||||
// When true, the access token is returned in the response body (in addition
|
||||
// to the httpOnly cookie) so native/mobile clients can store it in
|
||||
// Keychain/Keystore and send it as 'Authorization: Bearer'. Web clients omit
|
||||
// this flag and keep using the cookie. Opt-in only: the token is never put in
|
||||
// the body otherwise.
|
||||
@IsOptional()
|
||||
@IsBoolean()
|
||||
returnToken?: boolean;
|
||||
}
|
||||
|
||||
@@ -31,6 +31,102 @@ describe('PageService', () => {
|
||||
expect(service).toBeDefined();
|
||||
});
|
||||
|
||||
describe('update — title sync into collab doc (Bug 1)', () => {
|
||||
const makeUpdateService = () => {
|
||||
const pageRepo = {
|
||||
updatePage: jest.fn().mockResolvedValue(undefined),
|
||||
findById: jest.fn().mockResolvedValue({ id: 'page-1' }),
|
||||
};
|
||||
const generalQueue = { add: jest.fn().mockResolvedValue(undefined) };
|
||||
const collaborationGateway = {
|
||||
writePageTitle: jest.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
|
||||
const svc = new PageService(
|
||||
pageRepo as any, // pageRepo
|
||||
{} as any, // pagePermissionRepo
|
||||
{} as any, // attachmentRepo
|
||||
{} as any, // db
|
||||
{} as any, // storageService
|
||||
{} as any, // attachmentQueue
|
||||
{} as any, // aiQueue
|
||||
generalQueue as any, // generalQueue
|
||||
{} as any, // eventEmitter
|
||||
collaborationGateway as any, // collaborationGateway
|
||||
{} as any, // watcherService
|
||||
{} as any, // transclusionService
|
||||
);
|
||||
|
||||
return { svc, pageRepo, collaborationGateway };
|
||||
};
|
||||
|
||||
const basePage = (): Page =>
|
||||
({
|
||||
id: 'page-1',
|
||||
slugId: 'slug-1',
|
||||
spaceId: 'space-1',
|
||||
workspaceId: 'ws-1',
|
||||
parentPageId: null,
|
||||
title: 'Old Title',
|
||||
icon: null,
|
||||
contributorIds: [],
|
||||
}) as any;
|
||||
|
||||
const user = { id: 'u1' } as any;
|
||||
|
||||
it('writes the new title into the collab doc when the title actually changed', async () => {
|
||||
const { svc, collaborationGateway } = makeUpdateService();
|
||||
|
||||
await svc.update(basePage(), { title: 'New Title' } as any, user);
|
||||
|
||||
// Must use the Redis-independent writePageTitle (direct
|
||||
// openDirectConnection), NOT handleYjsEvent which no-ops without Redis.
|
||||
expect(collaborationGateway.writePageTitle).toHaveBeenCalledTimes(1);
|
||||
expect(collaborationGateway.writePageTitle).toHaveBeenCalledWith(
|
||||
'page-1',
|
||||
'New Title',
|
||||
expect.objectContaining({ user }),
|
||||
);
|
||||
});
|
||||
|
||||
it('threads agent provenance into the collab title write', async () => {
|
||||
const { svc, collaborationGateway } = makeUpdateService();
|
||||
|
||||
await svc.update(basePage(), { title: 'New Title' } as any, user, {
|
||||
actor: 'agent',
|
||||
aiChatId: 'chat-1',
|
||||
} as any);
|
||||
|
||||
expect(collaborationGateway.writePageTitle).toHaveBeenCalledWith(
|
||||
'page-1',
|
||||
'New Title',
|
||||
expect.objectContaining({ actor: 'agent', aiChatId: 'chat-1' }),
|
||||
);
|
||||
});
|
||||
|
||||
it('does NOT write into the collab doc when the title is unchanged', async () => {
|
||||
const { svc, collaborationGateway } = makeUpdateService();
|
||||
|
||||
// Same title -> titleChanged is false; an icon-only change must not fire
|
||||
// the title sync.
|
||||
await svc.update(
|
||||
basePage(),
|
||||
{ title: 'Old Title', icon: '📄' } as any,
|
||||
user,
|
||||
);
|
||||
|
||||
expect(collaborationGateway.writePageTitle).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does NOT write into the collab doc when the DTO omits the title', async () => {
|
||||
const { svc, collaborationGateway } = makeUpdateService();
|
||||
|
||||
await svc.update(basePage(), { icon: '📄' } as any, user);
|
||||
|
||||
expect(collaborationGateway.writePageTitle).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('movePage cycle guard (#67)', () => {
|
||||
// A valid fractional-indexing key — movePage validates `position` by feeding
|
||||
// it to generateJitteredKeyBetween(position, null) before anything else.
|
||||
|
||||
@@ -265,6 +265,8 @@ export class PageService {
|
||||
contributors.add(user.id);
|
||||
const contributorIds = Array.from(contributors);
|
||||
|
||||
const isAgent = provenance?.actor === 'agent';
|
||||
|
||||
// Detect a real title/icon change so the WS tree listener can broadcast an
|
||||
// `updateOne` to the space (rename / icon swap) WITHOUT re-broadcasting on a
|
||||
// content-only save. Only treat a field as changed when the DTO actually
|
||||
@@ -307,6 +309,43 @@ export class PageService {
|
||||
: undefined,
|
||||
);
|
||||
|
||||
// Bug 1: a REST/MCP rename wrote the new title ONLY to the page.title DB
|
||||
// column above. The title's source of truth is the Yjs 'title' fragment in
|
||||
// the page's collab doc, which onStoreDocument re-extracts on every save —
|
||||
// so leaving the fragment stale would REVERT this rename on the page's next
|
||||
// collaborative save (and re-broadcast the old title). Push the new title
|
||||
// into the Yjs 'title' fragment so Yjs stays in sync and never reverts.
|
||||
//
|
||||
// Use the gateway's writePageTitle (direct openDirectConnection) rather than
|
||||
// a Redis-routed handleYjsEvent path: handleYjsEvent routes through
|
||||
// redisSync and SILENTLY no-ops when Redis is disabled
|
||||
// (COLLAB_DISABLE_REDIS=true), which would let the rename revert in a
|
||||
// single-process deployment. writePageTitle is Redis-independent and
|
||||
// openDirectConnection loads the doc from persistence when no editor is
|
||||
// connected, so this also works for an offline page. Thread agent provenance
|
||||
// into the context so onStoreDocument tags the title store 'agent' too.
|
||||
if (titleChanged) {
|
||||
try {
|
||||
await this.collaborationGateway.writePageTitle(
|
||||
page.id,
|
||||
updatePageDto.title,
|
||||
{
|
||||
user,
|
||||
...(isAgent
|
||||
? { actor: 'agent', aiChatId: provenance.aiChatId }
|
||||
: {}),
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
// The DB column write already succeeded (fast-read source stays
|
||||
// correct); a failure to sync Yjs here must not fail the rename. Log so
|
||||
// a persistent desync is visible.
|
||||
this.logger.warn(
|
||||
`Failed to sync renamed title into collab doc for page ${page.id}: ${err?.['message']}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.generalQueue
|
||||
.add(QueueJob.ADD_PAGE_WATCHERS, {
|
||||
userIds: [user.id],
|
||||
|
||||
161
apps/server/src/core/share/share-get-shared-page-binding.spec.ts
Normal file
161
apps/server/src/core/share/share-get-shared-page-binding.spec.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
import { NotFoundException } from '@nestjs/common';
|
||||
import { ShareService } from './share.service';
|
||||
|
||||
/**
|
||||
* Regression for issue #218: public-share content must be bound to the requested
|
||||
* shareId. `getSharedPage` resolves the page off its slug, but when the caller
|
||||
* supplies a shareId it must be reachable THROUGH that exact share — a forged or
|
||||
* mismatched shareId 404s instead of rendering the page off its slug alone. A
|
||||
* request with no shareId keeps the legacy slug-capability behavior.
|
||||
*/
|
||||
const WS = 'ws-1';
|
||||
const PAGE_ID = 'page-uuid-1';
|
||||
const OWN_SHARE_ID = 'share-own';
|
||||
const OWN_SHARE_KEY = 'ownkey';
|
||||
|
||||
function buildService(over: {
|
||||
resolvedShare?: any;
|
||||
ancestorShare?: any; // returned by shareRepo.findById(requestedShareId)
|
||||
ancestorFound?: boolean; // getShareAncestorPage result
|
||||
} = {}) {
|
||||
const resolvedShare = over.resolvedShare ?? {
|
||||
id: OWN_SHARE_ID,
|
||||
key: OWN_SHARE_KEY,
|
||||
includeSubPages: false,
|
||||
spaceId: 'space-1',
|
||||
workspaceId: WS,
|
||||
};
|
||||
const page = { id: PAGE_ID, deletedAt: null, content: { type: 'doc' } };
|
||||
|
||||
const shareRepo = {
|
||||
findById: jest.fn(async () => over.ancestorShare ?? null),
|
||||
};
|
||||
|
||||
const service = new ShareService(
|
||||
shareRepo as any,
|
||||
{} as any, // pageRepo (resolveReadableSharePage is spied)
|
||||
{} as any, // pagePermissionRepo
|
||||
{} as any, // db
|
||||
{} as any, // tokenService
|
||||
{} as any, // transclusionService
|
||||
{} as any, // workspaceRepo
|
||||
);
|
||||
|
||||
jest
|
||||
.spyOn(service, 'resolveReadableSharePage')
|
||||
.mockResolvedValue({ share: resolvedShare, page } as any);
|
||||
jest
|
||||
.spyOn(service, 'updatePublicAttachments')
|
||||
.mockResolvedValue(page.content as any);
|
||||
jest
|
||||
.spyOn(service, 'getShareAncestorPage')
|
||||
.mockResolvedValue(over.ancestorFound ? { id: 'anc' } : null);
|
||||
|
||||
return { service, shareRepo, page, resolvedShare };
|
||||
}
|
||||
|
||||
describe('ShareService.getSharedPage — share binding (#218)', () => {
|
||||
it('returns the page when no shareId is supplied (legacy slug path)', async () => {
|
||||
const { service } = buildService();
|
||||
const out = await service.getSharedPage({ pageId: PAGE_ID } as any, WS);
|
||||
expect(out.page.id).toBe(PAGE_ID);
|
||||
});
|
||||
|
||||
it('returns the page when the shareId matches the resolved share key', async () => {
|
||||
const { service } = buildService();
|
||||
const out = await service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: OWN_SHARE_KEY } as any,
|
||||
WS,
|
||||
);
|
||||
expect(out.page.id).toBe(PAGE_ID);
|
||||
});
|
||||
|
||||
it('returns the page when the shareId matches the resolved share id (case-insensitive key)', async () => {
|
||||
const { service } = buildService();
|
||||
const out = await service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: OWN_SHARE_KEY.toUpperCase() } as any,
|
||||
WS,
|
||||
);
|
||||
expect(out.page.id).toBe(PAGE_ID);
|
||||
});
|
||||
|
||||
it('404s for a forged shareId that resolves to nothing', async () => {
|
||||
const { service } = buildService({ ancestorShare: null });
|
||||
await expect(
|
||||
service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: 'doesnotexist99' } as any,
|
||||
WS,
|
||||
),
|
||||
).rejects.toBeInstanceOf(NotFoundException);
|
||||
});
|
||||
|
||||
it('allows an includeSubPages ANCESTOR share that contains the page', async () => {
|
||||
const { service } = buildService({
|
||||
ancestorShare: {
|
||||
id: 'ancestor-share',
|
||||
pageId: 'ancestor-page',
|
||||
includeSubPages: true,
|
||||
workspaceId: WS,
|
||||
},
|
||||
ancestorFound: true,
|
||||
});
|
||||
const out = await service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: 'ancestorkey' } as any,
|
||||
WS,
|
||||
);
|
||||
expect(out.page.id).toBe(PAGE_ID);
|
||||
});
|
||||
|
||||
it('404s for a different share WITHOUT includeSubPages', async () => {
|
||||
const { service } = buildService({
|
||||
ancestorShare: {
|
||||
id: 'other-share',
|
||||
pageId: 'other-page',
|
||||
includeSubPages: false,
|
||||
workspaceId: WS,
|
||||
},
|
||||
});
|
||||
await expect(
|
||||
service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: 'otherkey' } as any,
|
||||
WS,
|
||||
),
|
||||
).rejects.toBeInstanceOf(NotFoundException);
|
||||
});
|
||||
|
||||
it('404s for an includeSubPages share that does NOT contain the page', async () => {
|
||||
const { service } = buildService({
|
||||
ancestorShare: {
|
||||
id: 'unrelated-share',
|
||||
pageId: 'unrelated-page',
|
||||
includeSubPages: true,
|
||||
workspaceId: WS,
|
||||
},
|
||||
ancestorFound: false,
|
||||
});
|
||||
await expect(
|
||||
service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: 'unrelatedkey' } as any,
|
||||
WS,
|
||||
),
|
||||
).rejects.toBeInstanceOf(NotFoundException);
|
||||
});
|
||||
|
||||
it('404s for a share in a different workspace', async () => {
|
||||
const { service } = buildService({
|
||||
ancestorShare: {
|
||||
id: 'foreign-share',
|
||||
pageId: 'foreign-page',
|
||||
includeSubPages: true,
|
||||
workspaceId: 'other-ws',
|
||||
},
|
||||
ancestorFound: true,
|
||||
});
|
||||
await expect(
|
||||
service.getSharedPage(
|
||||
{ pageId: PAGE_ID, shareId: 'foreignkey' } as any,
|
||||
WS,
|
||||
),
|
||||
).rejects.toBeInstanceOf(NotFoundException);
|
||||
});
|
||||
});
|
||||
69
apps/server/src/core/share/share-public-payload.ts
Normal file
69
apps/server/src/core/share/share-public-payload.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Page } from '@docmost/db/types/entity.types';
|
||||
|
||||
/**
|
||||
* The EXACT shape returned to anonymous public-share viewers by the
|
||||
* `/shares/page-info` route — the only unauthenticated path that serializes the
|
||||
* full {page, share} records. This is a security boundary (#218): the raw rows
|
||||
* carry internal metadata — creatorId/lastUpdatedById/contributorIds,
|
||||
* spaceId/workspaceId, AI/source bookkeeping, lock/template flags,
|
||||
* parent/position and raw timestamps — none of which may leak to an
|
||||
* unauthenticated viewer. Keeping the allowlist as an explicit TYPE plus a
|
||||
* single mapper means a new leaking field cannot be returned without also
|
||||
* widening this contract (and tripping its key-test in share.controller.spec.ts).
|
||||
*/
|
||||
export interface PublicSharePayload {
|
||||
page: {
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
content: unknown;
|
||||
};
|
||||
share: {
|
||||
id: string;
|
||||
key: string;
|
||||
includeSubPages: boolean | null;
|
||||
searchIndexing: boolean | null;
|
||||
level: number;
|
||||
sharedPage: unknown;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The subset of the resolved share read by the public payload. Declared
|
||||
* structurally so the richer getShareForPage result (which adds `level` and
|
||||
* `sharedPage` on top of the base Shares row) passes without a cast.
|
||||
*/
|
||||
interface PublicShareSource {
|
||||
id: string;
|
||||
key: string;
|
||||
includeSubPages: boolean | null;
|
||||
searchIndexing: boolean | null;
|
||||
// `level` is derived via a SQL literal in getShareForPage, so it surfaces as
|
||||
// `unknown` in the resolved share; it is a number at runtime.
|
||||
level: unknown;
|
||||
sharedPage: unknown;
|
||||
}
|
||||
|
||||
export function toPublicSharePayload(
|
||||
page: Page,
|
||||
share: PublicShareSource,
|
||||
): PublicSharePayload {
|
||||
return {
|
||||
page: {
|
||||
id: page.id,
|
||||
slugId: page.slugId,
|
||||
title: page.title,
|
||||
icon: page.icon,
|
||||
content: page.content,
|
||||
},
|
||||
share: {
|
||||
id: share.id,
|
||||
key: share.key,
|
||||
includeSubPages: share.includeSubPages,
|
||||
searchIndexing: share.searchIndexing,
|
||||
level: share.level as number,
|
||||
sharedPage: share.sharedPage,
|
||||
},
|
||||
};
|
||||
}
|
||||
190
apps/server/src/core/share/share.controller.spec.ts
Normal file
190
apps/server/src/core/share/share.controller.spec.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
import { ShareController } from './share.controller';
|
||||
import {
|
||||
PublicSharePayload,
|
||||
toPublicSharePayload,
|
||||
} from './share-public-payload';
|
||||
|
||||
// The `/shares/page-info` route is the ONLY anonymous path that serializes the
|
||||
// full {page, share} records. Trimming the response to an explicit allowlist is
|
||||
// a security control (#218): a regression that returns `...shareData` (or adds a
|
||||
// new field to the allowlist) must fail loudly. These tests lock the exact key
|
||||
// set returned to anonymous viewers so internal metadata can never silently leak.
|
||||
|
||||
const PAGE_KEYS = ['id', 'slugId', 'title', 'icon', 'content'].sort();
|
||||
const SHARE_KEYS = [
|
||||
'id',
|
||||
'key',
|
||||
'includeSubPages',
|
||||
'searchIndexing',
|
||||
'level',
|
||||
'sharedPage',
|
||||
].sort();
|
||||
|
||||
// A page row carrying internal metadata that MUST NOT reach anonymous viewers.
|
||||
function internalPage() {
|
||||
return {
|
||||
id: 'page-1',
|
||||
slugId: 'slug-1',
|
||||
title: 'Public Title',
|
||||
icon: '📄',
|
||||
content: { type: 'doc', content: [] },
|
||||
// --- leaky internals ---
|
||||
creatorId: 'user-1',
|
||||
lastUpdatedById: 'user-2',
|
||||
contributorIds: ['user-1', 'user-2'],
|
||||
spaceId: 'space-1',
|
||||
workspaceId: 'ws-1',
|
||||
parentPageId: 'parent-1',
|
||||
position: 'aa',
|
||||
isLocked: true,
|
||||
isTemplate: false,
|
||||
textContent: 'secret text content',
|
||||
ydoc: Buffer.from('binary'),
|
||||
createdAt: new Date('2020-01-01'),
|
||||
updatedAt: new Date('2020-01-02'),
|
||||
deletedAt: null,
|
||||
} as any;
|
||||
}
|
||||
|
||||
// A resolved share carrying internal metadata.
|
||||
function internalShare() {
|
||||
return {
|
||||
id: 'share-1',
|
||||
key: 'share-key',
|
||||
includeSubPages: false,
|
||||
searchIndexing: true,
|
||||
level: 0,
|
||||
sharedPage: { id: 'page-1', slugId: 'slug-1', title: 'Public Title' },
|
||||
// --- leaky internals ---
|
||||
creatorId: 'user-1',
|
||||
spaceId: 'space-1',
|
||||
workspaceId: 'ws-1',
|
||||
pageId: 'page-1',
|
||||
createdAt: new Date('2020-01-01'),
|
||||
updatedAt: new Date('2020-01-02'),
|
||||
deletedAt: null,
|
||||
} as any;
|
||||
}
|
||||
|
||||
function buildController(over?: { aiAssistant?: boolean }) {
|
||||
const shareService = {
|
||||
// Deliberately returns the FULL internal records (as the real service does).
|
||||
getSharedPage: jest.fn(async () => ({
|
||||
page: internalPage(),
|
||||
share: internalShare(),
|
||||
})),
|
||||
isSharingAllowed: jest.fn(async () => true),
|
||||
};
|
||||
const aiSettings = {
|
||||
isPublicShareAssistantEnabled: jest.fn(
|
||||
async () => over?.aiAssistant ?? false,
|
||||
),
|
||||
resolvePublicShareAssistantName: jest.fn(async () => 'Assistant'),
|
||||
};
|
||||
const licenseCheckService = {
|
||||
resolveFeatures: jest.fn(() => ({ tier: 'free' })),
|
||||
};
|
||||
|
||||
const controller = new ShareController(
|
||||
shareService as any,
|
||||
{} as any, // shareRepo
|
||||
{} as any, // pageRepo
|
||||
{} as any, // pagePermissionRepo
|
||||
{} as any, // pageAccessService
|
||||
licenseCheckService as any,
|
||||
aiSettings as any,
|
||||
{} as any, // auditService
|
||||
);
|
||||
|
||||
return { controller, shareService, aiSettings, licenseCheckService };
|
||||
}
|
||||
|
||||
const workspace = {
|
||||
id: 'ws-1',
|
||||
licenseKey: null,
|
||||
plan: 'free',
|
||||
} as any;
|
||||
|
||||
describe('ShareController.getSharedPageInfo — public payload whitelist (#218)', () => {
|
||||
it('returns EXACTLY the page allowlist keys (no leaked internals)', async () => {
|
||||
const { controller } = buildController();
|
||||
|
||||
const res = await controller.getSharedPageInfo(
|
||||
{ pageId: 'page-1' } as any,
|
||||
workspace,
|
||||
);
|
||||
|
||||
expect(Object.keys(res.page).sort()).toEqual(PAGE_KEYS);
|
||||
for (const leaked of [
|
||||
'creatorId',
|
||||
'lastUpdatedById',
|
||||
'contributorIds',
|
||||
'spaceId',
|
||||
'workspaceId',
|
||||
'parentPageId',
|
||||
'position',
|
||||
'textContent',
|
||||
'ydoc',
|
||||
'createdAt',
|
||||
'updatedAt',
|
||||
'deletedAt',
|
||||
]) {
|
||||
expect((res.page as any)[leaked]).toBeUndefined();
|
||||
}
|
||||
// The serialized payload must not carry the secret text content either.
|
||||
expect(JSON.stringify(res.page)).not.toContain('secret text content');
|
||||
});
|
||||
|
||||
it('returns EXACTLY the share allowlist keys (no leaked internals)', async () => {
|
||||
const { controller } = buildController();
|
||||
|
||||
const res = await controller.getSharedPageInfo(
|
||||
{ pageId: 'page-1' } as any,
|
||||
workspace,
|
||||
);
|
||||
|
||||
expect(Object.keys(res.share).sort()).toEqual(SHARE_KEYS);
|
||||
for (const leaked of [
|
||||
'creatorId',
|
||||
'spaceId',
|
||||
'workspaceId',
|
||||
'pageId',
|
||||
'createdAt',
|
||||
'updatedAt',
|
||||
'deletedAt',
|
||||
]) {
|
||||
expect((res.share as any)[leaked]).toBeUndefined();
|
||||
}
|
||||
});
|
||||
|
||||
it('surfaces the public AI-assistant flags and license features alongside the trimmed payload', async () => {
|
||||
const { controller } = buildController({ aiAssistant: true });
|
||||
|
||||
const res = await controller.getSharedPageInfo(
|
||||
{ pageId: 'page-1' } as any,
|
||||
workspace,
|
||||
);
|
||||
|
||||
expect(res.aiAssistant).toBe(true);
|
||||
expect(res.aiAssistantName).toBe('Assistant');
|
||||
expect(res.features).toEqual({ tier: 'free' });
|
||||
// Top-level keys are limited to the trimmed payload + the public extras.
|
||||
expect(Object.keys(res).sort()).toEqual(
|
||||
['page', 'share', 'aiAssistant', 'aiAssistantName', 'features'].sort(),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toPublicSharePayload — key set is the contract', () => {
|
||||
it('copies only the allowlisted page/share keys', () => {
|
||||
const payload: PublicSharePayload = toPublicSharePayload(
|
||||
internalPage(),
|
||||
internalShare(),
|
||||
);
|
||||
|
||||
expect(Object.keys(payload.page).sort()).toEqual(PAGE_KEYS);
|
||||
expect(Object.keys(payload.share).sort()).toEqual(SHARE_KEYS);
|
||||
expect(payload.page.id).toBe('page-1');
|
||||
expect(payload.share.key).toBe('share-key');
|
||||
});
|
||||
});
|
||||
@@ -36,6 +36,7 @@ import {
|
||||
IAuditService,
|
||||
} from '../../integrations/audit/audit.service';
|
||||
import { AiSettingsService } from '../../integrations/ai/ai-settings.service';
|
||||
import { toPublicSharePayload } from './share-public-payload';
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Controller('shares')
|
||||
@@ -93,8 +94,13 @@ export class ShareController {
|
||||
? await this.aiSettings.resolvePublicShareAssistantName(workspace.id)
|
||||
: null;
|
||||
|
||||
// Trim the public payload to the explicit allowlist the anonymous renderer
|
||||
// needs (#218); the PublicSharePayload type + mapper guarantee internal
|
||||
// metadata can never leak to anonymous viewers (see share-public-payload.ts).
|
||||
const { page, share } = shareData;
|
||||
|
||||
return {
|
||||
...shareData,
|
||||
...toPublicSharePayload(page, share),
|
||||
aiAssistant,
|
||||
aiAssistantName,
|
||||
features: this.licenseCheckService.resolveFeatures(
|
||||
|
||||
@@ -189,9 +189,9 @@ export class ShareService {
|
||||
}
|
||||
|
||||
async getSharedPage(dto: ShareInfoDto, workspaceId: string) {
|
||||
// Resolve via the single canonical boundary. There is no independent
|
||||
// requested shareId here (the share is resolved FROM the page), so no
|
||||
// share-id match is performed.
|
||||
// Resolve via the single canonical boundary. The share is resolved FROM the
|
||||
// page (the request carries the page slug), so the boundary itself performs
|
||||
// no share-id match here.
|
||||
const resolved = await this.resolveReadableSharePage(
|
||||
null,
|
||||
dto.pageId,
|
||||
@@ -205,11 +205,85 @@ export class ShareService {
|
||||
|
||||
const { share, page } = resolved;
|
||||
|
||||
// Bind content to the requested share (#218). When the caller supplies a
|
||||
// shareId/key (the `/share/:shareId/p/:slug` route now forwards it), the
|
||||
// page must be reachable THROUGH that exact share — a forged or mismatched
|
||||
// shareId must 404 instead of rendering the page off its slug alone, and it
|
||||
// must not be answerable with the page's real (canonical) share key. A
|
||||
// request with no shareId keeps the legacy slug-capability behavior (the
|
||||
// `/share/p/:slug` route + internal title look-ups); the slug nanoid stays
|
||||
// the access secret there — an inherited Docmost design we don't widen.
|
||||
// FUTURE: this ancestor-aware match could fold INTO resolveReadableSharePage
|
||||
// (so the boundary's narrow `share.id === shareId` gate isn't effectively
|
||||
// dead). Deferred — it widens the contract for the 3 other callers that pass
|
||||
// no shareId (share-alias.controller, share-alias.service, share-seo.controller);
|
||||
// the two ai-chat callers (public-share-chat.controller,
|
||||
// public-share-chat-tools.service) already pass a real shareId. Kept here as
|
||||
// a local post-check until that consolidation is worth the blast radius.
|
||||
if (dto.shareId) {
|
||||
const reachable = await this.isPageReachableThroughShare(
|
||||
dto.shareId,
|
||||
share,
|
||||
page.id,
|
||||
workspaceId,
|
||||
);
|
||||
if (!reachable) {
|
||||
throw new NotFoundException('Shared page not found');
|
||||
}
|
||||
}
|
||||
|
||||
page.content = await this.updatePublicAttachments(page);
|
||||
|
||||
return { page, share };
|
||||
}
|
||||
|
||||
/**
|
||||
* Does `requestedShareId` (a share id OR key) legitimately grant access to
|
||||
* `pageId`? True when it names the page's own resolved share, or an ancestor
|
||||
* share with `includeSubPages` that contains the page. Any other value
|
||||
* (unknown key, wrong workspace, a sibling share that doesn't cover the page)
|
||||
* is false, so a guessed slug paired with a forged shareId can't render.
|
||||
*/
|
||||
private async isPageReachableThroughShare(
|
||||
requestedShareId: string,
|
||||
resolvedShare: NonNullable<
|
||||
Awaited<ReturnType<ShareService['getShareForPage']>>
|
||||
>,
|
||||
pageId: string,
|
||||
workspaceId: string,
|
||||
): Promise<boolean> {
|
||||
// Fast path: the request names the page's own resolved share.
|
||||
if (this.shareIdGrantsAccess(requestedShareId, resolvedShare)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise it may name an includeSubPages ANCESTOR share: the page has its
|
||||
// own closer share but is also served under the ancestor's public tree.
|
||||
const requested = await this.shareRepo.findById(requestedShareId);
|
||||
if (!requested || requested.workspaceId !== workspaceId) return false;
|
||||
if (!requested.includeSubPages) return false;
|
||||
|
||||
const ancestor = await this.getShareAncestorPage(requested.pageId, pageId);
|
||||
return !!ancestor;
|
||||
}
|
||||
|
||||
/**
|
||||
* Does the requested share id/key directly name `resolvedShare` — by id, or
|
||||
* by key (case-insensitive)? This is the "names the page's OWN share" half of
|
||||
* the access concept; ancestor includeSubPages shares are matched separately.
|
||||
* Intentionally narrower than `resolveReadableSharePage`'s id-only gate, which
|
||||
* keeps its own contract for the callers that pass a shareId there.
|
||||
*/
|
||||
private shareIdGrantsAccess(
|
||||
requestedShareId: string,
|
||||
resolvedShare: { id: string; key?: string | null },
|
||||
): boolean {
|
||||
return (
|
||||
requestedShareId === resolvedShare.id ||
|
||||
requestedShareId.toLowerCase() === resolvedShare.key?.toLowerCase()
|
||||
);
|
||||
}
|
||||
|
||||
async getShareForPage(pageId: string, workspaceId: string) {
|
||||
// here we try to check if a page was shared directly or if it inherits the share from its closest shared ancestor
|
||||
const share = await this.db
|
||||
@@ -351,7 +425,14 @@ export class ShareService {
|
||||
.limit(1)
|
||||
.executeTakeFirst();
|
||||
} catch (err) {
|
||||
// empty
|
||||
// Fail closed (return null -> caller 404s), but never silently: this is
|
||||
// now a live public-share path (isPageReachableThroughShare), so a
|
||||
// transient DB error here would otherwise turn a legitimate viewer of an
|
||||
// includeSubPages descendant into a misleading "not found" with no trace.
|
||||
this.logger.error(
|
||||
`getShareAncestorPage failed (ancestorPageId=${ancestorPageId}, childPageId=${childPageId})`,
|
||||
err instanceof Error ? err.stack : String(err),
|
||||
);
|
||||
}
|
||||
|
||||
return ancestor;
|
||||
|
||||
93
apps/server/src/integrations/environment/cors.util.spec.ts
Normal file
93
apps/server/src/integrations/environment/cors.util.spec.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import { buildCorsAllowlist, isOriginAllowed } from './cors.util';
|
||||
|
||||
const WEBVIEW_ORIGINS = [
|
||||
'capacitor://localhost',
|
||||
'ionic://localhost',
|
||||
'https://localhost',
|
||||
];
|
||||
|
||||
describe('isOriginAllowed', () => {
|
||||
const allowlist = buildCorsAllowlist({
|
||||
appUrl: 'https://app.example',
|
||||
configuredOrigins: ['https://other.example'],
|
||||
});
|
||||
|
||||
it('allows requests with no Origin header', () => {
|
||||
expect(isOriginAllowed(undefined, allowlist)).toBe(true);
|
||||
expect(isOriginAllowed('', allowlist)).toBe(true);
|
||||
});
|
||||
|
||||
it('allows an exact allowlisted origin', () => {
|
||||
expect(isOriginAllowed('https://app.example', allowlist)).toBe(true);
|
||||
expect(isOriginAllowed('https://other.example', allowlist)).toBe(true);
|
||||
});
|
||||
|
||||
it('allows each native WebView origin', () => {
|
||||
for (const origin of WEBVIEW_ORIGINS) {
|
||||
expect(isOriginAllowed(origin, allowlist)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it('rejects a foreign credentialed origin', () => {
|
||||
// With credentials:true a foreign credentialed origin must be rejected.
|
||||
expect(isOriginAllowed('https://evil.example', allowlist)).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects the cleartext http://localhost origin', () => {
|
||||
// The native shell uses the secure scheme (https://localhost) on Android and
|
||||
// the capacitor:// custom scheme on iOS, so cleartext http://localhost must
|
||||
// not be trusted.
|
||||
expect(isOriginAllowed('http://localhost', allowlist)).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a trailing-slash mismatch', () => {
|
||||
expect(isOriginAllowed('https://app.example/', allowlist)).toBe(false);
|
||||
});
|
||||
|
||||
it('rejects a host-case mismatch', () => {
|
||||
expect(isOriginAllowed('https://APP.example', allowlist)).toBe(false);
|
||||
});
|
||||
|
||||
it('allows no-Origin but rejects cross-origin with an empty allowlist', () => {
|
||||
const empty: ReadonlySet<string> = new Set<string>();
|
||||
expect(isOriginAllowed(undefined, empty)).toBe(true);
|
||||
expect(isOriginAllowed('https://app.example', empty)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('buildCorsAllowlist', () => {
|
||||
it('contains the app URL, each configured origin, and all WebView origins', () => {
|
||||
const allowlist = buildCorsAllowlist({
|
||||
appUrl: 'https://app.example',
|
||||
configuredOrigins: ['https://a.example', 'https://b.example'],
|
||||
});
|
||||
|
||||
expect(allowlist.has('https://app.example')).toBe(true);
|
||||
expect(allowlist.has('https://a.example')).toBe(true);
|
||||
expect(allowlist.has('https://b.example')).toBe(true);
|
||||
for (const origin of WEBVIEW_ORIGINS) {
|
||||
expect(allowlist.has(origin)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it('deduplicates when a configured origin coincides with the app URL', () => {
|
||||
const allowlist = buildCorsAllowlist({
|
||||
appUrl: 'https://app.example',
|
||||
configuredOrigins: ['https://app.example'],
|
||||
});
|
||||
|
||||
// app URL + WebView origins, the duplicate configured origin collapses.
|
||||
expect(allowlist.size).toBe(1 + WEBVIEW_ORIGINS.length);
|
||||
});
|
||||
|
||||
it('always includes every WebView origin even with no configured origins', () => {
|
||||
const allowlist = buildCorsAllowlist({
|
||||
appUrl: 'https://app.example',
|
||||
configuredOrigins: [],
|
||||
});
|
||||
|
||||
for (const origin of WEBVIEW_ORIGINS) {
|
||||
expect(allowlist.has(origin)).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
50
apps/server/src/integrations/environment/cors.util.ts
Normal file
50
apps/server/src/integrations/environment/cors.util.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
// CORS trust boundary helpers. `buildCorsAllowlist` produces the exact set of
|
||||
// origins the API trusts, and `isOriginAllowed` is the predicate the enableCors
|
||||
// origin callback uses to accept/reject each request. With credentials:true a
|
||||
// foreign credentialed origin must never be allowed, so anything not in the
|
||||
// allowlist (apart from no-Origin requests) is rejected.
|
||||
|
||||
// Native WebView origins used by the Capacitor/Ionic mobile shell. Always
|
||||
// trusted so the native client can call the API.
|
||||
//
|
||||
// - `capacitor://localhost` — iOS native custom scheme.
|
||||
// - `ionic://localhost` — legacy native custom scheme.
|
||||
// - `https://localhost` — Android default secure scheme.
|
||||
//
|
||||
// The cleartext `http://localhost` origin is intentionally NOT trusted: the
|
||||
// Capacitor shell uses the secure scheme (capacitor.config.ts sets
|
||||
// `cleartext: false` and does not override `androidScheme`, so Capacitor's
|
||||
// default Android scheme is `https` => origin `https://localhost`), and iOS runs
|
||||
// in hosted mode (`server.url` = CAP_SERVER_URL, whose origin is the app URL
|
||||
// already in the allowlist). No native client legitimately uses
|
||||
// `http://localhost`, so allowing it would only widen the credentialed-CORS
|
||||
// surface to arbitrary local http content.
|
||||
const NATIVE_WEBVIEW_ORIGINS = [
|
||||
'capacitor://localhost',
|
||||
'ionic://localhost',
|
||||
'https://localhost',
|
||||
] as const;
|
||||
|
||||
// Build the CORS allowlist: the app URL, all configured cross-origin clients,
|
||||
// and the native WebView origins. Dedup is automatic via Set.
|
||||
export function buildCorsAllowlist(input: {
|
||||
appUrl: string;
|
||||
configuredOrigins: readonly string[];
|
||||
}): Set<string> {
|
||||
return new Set<string>([
|
||||
input.appUrl,
|
||||
...input.configuredOrigins,
|
||||
...NATIVE_WEBVIEW_ORIGINS,
|
||||
]);
|
||||
}
|
||||
|
||||
// Decide whether a request's Origin is allowed. A missing Origin header (curl,
|
||||
// server-to-server, some native WebViews) is allowed; otherwise the origin must
|
||||
// be present in the allowlist.
|
||||
export function isOriginAllowed(
|
||||
origin: string | undefined,
|
||||
allowlist: ReadonlySet<string>,
|
||||
): boolean {
|
||||
if (!origin) return true;
|
||||
return allowlist.has(origin);
|
||||
}
|
||||
@@ -5,6 +5,13 @@ import { EnvironmentService } from './environment.service';
|
||||
describe('EnvironmentService', () => {
|
||||
let service: EnvironmentService;
|
||||
|
||||
// Build a service over a stub ConfigService whose get(key, def) returns
|
||||
// values from the supplied env map (falling back to the provided default).
|
||||
const makeService = (env: Record<string, string>) =>
|
||||
new EnvironmentService({
|
||||
get: (k: string, d?: string) => (k in env ? env[k] : d),
|
||||
} as any);
|
||||
|
||||
beforeEach(() => {
|
||||
service = new EnvironmentService(
|
||||
{} as any, // configService
|
||||
@@ -14,4 +21,72 @@ describe('EnvironmentService', () => {
|
||||
it('should be defined', () => {
|
||||
expect(service).toBeDefined();
|
||||
});
|
||||
|
||||
describe('getCorsAllowedOrigins', () => {
|
||||
it('splits, trims, and drops empty entries', () => {
|
||||
const svc = makeService({
|
||||
CORS_ALLOWED_ORIGINS: 'https://a.com, https://b.com ,, https://c.com',
|
||||
});
|
||||
expect(svc.getCorsAllowedOrigins()).toEqual([
|
||||
'https://a.com',
|
||||
'https://b.com',
|
||||
'https://c.com',
|
||||
]);
|
||||
});
|
||||
|
||||
it('returns an empty array when the var is absent', () => {
|
||||
const svc = makeService({});
|
||||
expect(svc.getCorsAllowedOrigins()).toEqual([]);
|
||||
});
|
||||
|
||||
it('returns an empty array for an empty string', () => {
|
||||
const svc = makeService({ CORS_ALLOWED_ORIGINS: '' });
|
||||
expect(svc.getCorsAllowedOrigins()).toEqual([]);
|
||||
});
|
||||
|
||||
it('returns a single origin unchanged', () => {
|
||||
const svc = makeService({
|
||||
CORS_ALLOWED_ORIGINS: 'https://app.example',
|
||||
});
|
||||
expect(svc.getCorsAllowedOrigins()).toEqual(['https://app.example']);
|
||||
});
|
||||
|
||||
// Adversarial case: leading/trailing/duplicate commas with surrounding
|
||||
// spaces must be dropped, exercising both .map(trim) and .filter(Boolean).
|
||||
it('drops leading/trailing commas with surrounding spaces', () => {
|
||||
const svc = makeService({ CORS_ALLOWED_ORIGINS: ' , a , , b ' });
|
||||
expect(svc.getCorsAllowedOrigins()).toEqual(['a', 'b']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isSwaggerEnabled', () => {
|
||||
// Case-insensitive: "true" in any casing enables Swagger.
|
||||
it.each(['true', 'TRUE', 'True'])('is true for "%s"', (value) => {
|
||||
expect(
|
||||
makeService({ SWAGGER_ENABLED: value }).isSwaggerEnabled(),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it('defaults to false when absent', () => {
|
||||
expect(makeService({}).isSwaggerEnabled()).toBe(false);
|
||||
});
|
||||
|
||||
it('is false for non-"true" values', () => {
|
||||
expect(makeService({ SWAGGER_ENABLED: '0' }).isSwaggerEnabled()).toBe(
|
||||
false,
|
||||
);
|
||||
expect(makeService({ SWAGGER_ENABLED: 'yes' }).isSwaggerEnabled()).toBe(
|
||||
false,
|
||||
);
|
||||
expect(makeService({ SWAGGER_ENABLED: 'false' }).isSwaggerEnabled()).toBe(
|
||||
false,
|
||||
);
|
||||
expect(makeService({ SWAGGER_ENABLED: '' }).isSwaggerEnabled()).toBe(
|
||||
false,
|
||||
);
|
||||
expect(makeService({ SWAGGER_ENABLED: '1' }).isSwaggerEnabled()).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -332,4 +332,19 @@ export class EnvironmentService {
|
||||
.map((o) => o.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
getCorsAllowedOrigins(): string[] {
|
||||
const raw = this.configService.get<string>('CORS_ALLOWED_ORIGINS', '');
|
||||
return raw
|
||||
.split(',')
|
||||
.map((o) => o.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
isSwaggerEnabled(): boolean {
|
||||
const enabled = this.configService
|
||||
.get<string>('SWAGGER_ENABLED', 'false')
|
||||
.toLowerCase();
|
||||
return enabled === 'true';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -146,6 +146,27 @@ describe('getInternalLinkPageName', () => {
|
||||
expect(getInternalLinkPageName('Parent/My%20Page.md')).toBe('My Page');
|
||||
});
|
||||
|
||||
it('keeps the full basename when the path has no extension (#204)', () => {
|
||||
// An extensionless link target must NOT be stripped to an empty string —
|
||||
// there is no extension to drop. Previously `.split('.').slice(0,-1)`
|
||||
// collapsed "My Page" to "" and the internal link rendered with no text.
|
||||
expect(getInternalLinkPageName('Parent/My%20Page')).toBe('My Page');
|
||||
expect(getInternalLinkPageName('Just A Name')).toBe('Just A Name');
|
||||
});
|
||||
|
||||
it('preserves dots in a dotted name that has a real extension (#204)', () => {
|
||||
// "v1.2.md" -> "v1.2": only the final ".md" segment is the extension.
|
||||
expect(getInternalLinkPageName('docs/v1.2.md')).toBe('v1.2');
|
||||
});
|
||||
|
||||
it('documents current behavior: a leading-dot name collapses to empty text', () => {
|
||||
// ".gitignore" -> base ".gitignore", parts ["", "gitignore"]: the leading
|
||||
// dot is treated as a (empty) name + extension, so the name drops to "".
|
||||
// Same bug class as #204, but unreachable via the sole caller (page titles
|
||||
// never start with a dot), so we only pin the behavior — not fix it.
|
||||
expect(getInternalLinkPageName('.gitignore')).toBe('');
|
||||
});
|
||||
|
||||
it('falls back to the raw name without throwing on malformed encoding', () => {
|
||||
// "%E0%A4" is an incomplete escape; decodeURIComponent throws and the
|
||||
// helper returns the raw (still-encoded) name.
|
||||
|
||||
@@ -106,7 +106,16 @@ export function replaceInternalLinks(
|
||||
}
|
||||
|
||||
export function getInternalLinkPageName(path: string, currentFilePath?: string): string {
|
||||
const name = path?.split('/').pop().split('.').slice(0, -1).join('.');
|
||||
// Strip a trailing file extension from the basename, but only when there IS
|
||||
// one: an extensionless link target (e.g. "My Page") has no extension to drop,
|
||||
// so `split('.').slice(0,-1)` would otherwise collapse it to an empty string,
|
||||
// producing an internal link with no visible text (#204 export bug). The last
|
||||
// dot-segment is always treated as an extension and dropped whenever there is
|
||||
// more than one segment, so dots are preserved only in multi-segment names
|
||||
// like `v1.2.md` -> `v1.2`; a bare `v1.2` becomes `v1`.
|
||||
const base = path?.split('/').pop();
|
||||
const parts = base?.split('.');
|
||||
const name = parts && parts.length > 1 ? parts.slice(0, -1).join('.') : base;
|
||||
try {
|
||||
return decodeURIComponent(name);
|
||||
} catch (err) {
|
||||
|
||||
@@ -15,6 +15,11 @@ import { InternalLogFilter } from './common/logger/internal-log-filter';
|
||||
import { EnvironmentService } from './integrations/environment/environment.service';
|
||||
import { resolveFrameHeader } from './common/helpers';
|
||||
import { resolveTrustProxy } from './integrations/environment/trust-proxy.util';
|
||||
import {
|
||||
buildCorsAllowlist,
|
||||
isOriginAllowed,
|
||||
} from './integrations/environment/cors.util';
|
||||
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
|
||||
|
||||
async function bootstrap() {
|
||||
const app = await NestFactory.create<NestFastifyApplication>(
|
||||
@@ -149,8 +154,43 @@ async function bootstrap() {
|
||||
}),
|
||||
);
|
||||
|
||||
app.enableCors();
|
||||
// Configure CORS explicitly (replaces the previous unconfigured enableCors()).
|
||||
// The web client is same-origin in production; an explicit allowlist lets
|
||||
// native/mobile WebView origins (Capacitor) and any configured cross-origin
|
||||
// clients call the API, while everything else is rejected.
|
||||
const corsAllowedOrigins = buildCorsAllowlist({
|
||||
appUrl: environmentService.getAppUrl(),
|
||||
configuredOrigins: environmentService.getCorsAllowedOrigins(),
|
||||
});
|
||||
|
||||
app.enableCors({
|
||||
// Allow requests with no Origin header (curl, server-to-server, some native
|
||||
// WebView requests) and any origin in the allowlist; reject the rest.
|
||||
origin: (
|
||||
origin: string | undefined,
|
||||
callback: (err: Error | null, allow?: boolean) => void,
|
||||
) => {
|
||||
callback(null, isOriginAllowed(origin, corsAllowedOrigins));
|
||||
},
|
||||
credentials: true,
|
||||
methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE', 'OPTIONS'],
|
||||
allowedHeaders: ['Content-Type', 'Authorization'],
|
||||
});
|
||||
|
||||
app.useGlobalInterceptors(new TransformHttpResponseInterceptor(reflector));
|
||||
|
||||
if (environmentService.isSwaggerEnabled()) {
|
||||
// Optional OpenAPI docs to speed up typed mobile-client generation.
|
||||
const swaggerConfig = new DocumentBuilder()
|
||||
.setTitle('Gitmost API')
|
||||
.setDescription('Gitmost REST API (RPC-style POST endpoints).')
|
||||
.setVersion(process.env.APP_VERSION || '0.0.0')
|
||||
.addBearerAuth()
|
||||
.build();
|
||||
const document = SwaggerModule.createDocument(app, swaggerConfig);
|
||||
SwaggerModule.setup('api/docs', app, document);
|
||||
}
|
||||
|
||||
app.enableShutdownHooks();
|
||||
|
||||
const logger = new Logger('NestApplication');
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user