fix(qa): resolve UI bugs from #216 and #218

Public sharing (#218): - Bind public-share content to the requested shareId. getSharedPage now enforces dto.shareId (forwarded from /share/:shareId/p/:slug): the page must be reachable THROUGH that exact share (its own share, or an includeSubPages ancestor that contains it). A forged/mismatched shareId 404s instead of rendering off the slug alone and no longer leaks the real canonical key via redirect. A request with no shareId keeps the legacy slug-capability path. - Trim /shares/page-info: drop internal metadata (creatorId, spaceId, workspaceId, contributorIds, lastUpdated*, parent/position, lock/template flags, timestamps) from the anonymous payload. - Default share-to-web includeSubPages to false (opt-in), so enabling a share no longer silently exposes the whole sub-tree (#216). Editor (#218): - Harden the new-page pre-sync window: the body editor is kept read-only until the collab provider is Connected and synced, so early keystrokes can't land only in local ProseMirror and then be clobbered by the server's empty doc. - Surface a "Connecting… (read-only)" affordance during the static phase so input isn't silently swallowed. Other: - Breadcrumb: resolve from the page's own ancestor data (/pages/breadcrumbs) instead of waiting for the lazily-built sidebar tree, so deep pages don't render a blank breadcrumb for seconds. - Pasting GitHub `> [!type]` callouts now converts to a callout node instead of a literal blockquote (new marked extension wired into markdownToHtml). Tests: editor-sync-state gate (client), getSharedPage share-binding (server), github-callout markdown conversion (editor-ext). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-27 05:54:06 +03:00
parent 904f7b4303
commit 22852be2e2
13 changed files with 540 additions and 27 deletions
@@ -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);
+  });
+});
@@ -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;
+}
@@ -84,6 +84,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;
@@ -440,6 +444,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 +458,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,17 +484,43 @@ export default function PageEditor({
      <PageEmbedLookupProvider>
        <PageEmbedAncestryProvider hostPageId={pageId}>
      {showStatic ? (
-        <EditorProvider
-          editable={false}
-          immediatelyRender={true}
-          extensions={mainExtensions}
-          content={content}
-          editorProps={{
-            attributes: {
-              "aria-label": t("Page content"),
-            },
-          }}
-        />
+        <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}
+            extensions={mainExtensions}
+            content={content}
+            editorProps={{
+              attributes: {
+                "aria-label": t("Page content"),
+              },
+            }}
+          />
+        </div>
      ) : (
        <div className="editor-container" style={{ position: "relative" }}>
          <div ref={menuContainerRef}>