Fixed background refetches closing the React editor

apps/admin/src/editor/editor-refetch.acceptance.test.tsx

@@ -1,18 +1,23 @@
 import { describe, expect, it, onTestFinished } from 'vitest';
 import { userEvent } from 'vitest/browser';
+import { postsDataType } from '@tryghost/admin-x-framework/api/posts';
 import { buildLexicalParagraph } from '@tryghost/test-data';
 
 import {
   currentRoute,
+  currentUserResponse,
   editorReadLanded,
   fakeAdminEndpoint,
   fakeEditorChrome,
+  fakePostsListScreen,
   post,
   renderAdminApp,
+  staffRole,
   submittedPost,
   unsavedChangesGuarded,
   withoutAutosave,
   type Post,
+  type RenderAdminAppOptions,
 } from '@test-utils/acceptance';
 import { editorScreen } from '@/editor/editor.screen';
 import { deferred } from '@/utils/deferred';
@@ -23,6 +28,9 @@ const LOADED_AT = '2026-01-01T00:00:00.000Z';
 const MY_SAVE_AT = '2026-01-01T00:00:01.000Z';
 const THEIR_SAVE_AT = '2026-01-01T00:00:02.000Z';
 const READ_ROUTE = new RegExp(`^/posts/${POST_ID}/\\?`);
+const CURRENT_USER_ID = String(currentUserResponse().users[0].id);
+const MOBILEDOC =
+  '{"version":"0.3.1","atoms":[],"cards":[],"markups":[],"sections":[[1,"p",[[0,[],0,"Legacy"]]]]}';
 
 const UPDATE_COLLISION = {
   errors: [
@@ -34,11 +42,39 @@ const UPDATE_COLLISION = {
   ],
 };
 
+// Core's refusal of a write the role no longer allows, checked before the collision token.
+const NO_PERMISSION = {
+  errors: [
+    {
+      type: 'NoPermissionError',
+      message: 'Permission error, cannot edit post.',
+      context: 'You do not have permission to perform this action',
+    },
+  ],
+};
+
+type Role = 'Author' | 'Contributor';
+
+function bootAs(role: Role): RenderAdminAppOptions {
+  const me = currentUserResponse();
+  me.users[0].roles = [staffRole({ name: role })];
+  return { ...FLAG_ON, boot: { browseMe: { response: me } } };
+}
+
+/** Core's rule for these roles: only posts they author, and for a Contributor only drafts. */
+function mayEdit(role: Role, stored: Post): boolean {
+  const authorIds = (stored.authors as Array<{ id: string }> | undefined)?.map(({ id }) => id);
+  return !!authorIds?.includes(CURRENT_USER_ID) && (role === 'Author' || stored.status === 'draft');
+}
+
 /**
  * A post two writers share: reads serve the stored copy and a save on a stale token is refused.
  * Core is laxer: it refuses one only when a posts-row column or its tags, authors or tiers change.
  */
-function fakeSharedPost(overrides: Partial<Post> = {}) {
+function fakeSharedPost(
+  overrides: Partial<Post> = {},
+  { canSave = () => true }: { canSave?: (stored: Post) => boolean } = {},
+) {
   fakeEditorChrome();
   fakeAdminEndpoint('GET', /^\/slugs\/post\//, ({ url }) => ({
     slugs: [{ slug: decodeURIComponent(url.split('/slugs/post/')[1].split('/')[0]) }],
@@ -70,6 +106,9 @@ function fakeSharedPost(overrides: Partial<Post> = {}) {
   });
   const saveApi = fakeAdminEndpoint('PUT', READ_ROUTE, ({ body }) => {
     const submitted = (body as { posts: Partial<Post>[] }).posts[0];
+    if (!canSave(stored)) {
+      return Response.json(NO_PERMISSION, { status: 403 });
+    }
     if (submitted.updated_at !== stored.updated_at) {
       return Response.json(UPDATE_COLLISION, { status: 409 });
     }
@@ -108,7 +147,14 @@ async function appendToBody(text: string) {
 }
 
 /** This tab's title save lands; the other writer's save lands before its refetch is read. */
-async function saveThenTheySave(shared: SharedPost, save: () => Promise<void>) {
+async function saveThenTheySave(
+  shared: SharedPost,
+  save: () => Promise<void>,
+  theirChanges: Partial<Post> = {
+    title: 'Their title',
+    lexical: buildLexicalParagraph('Their words'),
+  },
+) {
   await expect.element(editorScreen.titleInput()).toHaveValue('Hello from React');
   const releaseReads = shared.holdReads();
 
@@ -117,10 +163,7 @@ async function saveThenTheySave(shared: SharedPost, save: () => Promise<void>) {
   await expect.poll(() => shared.saveApi.requests.length).toBe(1);
   await expect.poll(() => shared.readApi.requests.length).toBe(2);
 
-  shared.theySave({
-    title: 'Their title',
-    lexical: buildLexicalParagraph('Their words'),
-  });
+  shared.theySave(theirChanges);
   return releaseReads;
 }
 
@@ -243,6 +286,83 @@ describe('Post editor refetch', () => {
     await expect(editorScreen.conflictBanner()).toHaveCount(0);
     expect(shared.stored().lexical).toContain('Hello from React and more');
   });
+
+  it.each<[string, Role, Partial<Post>]>([
+    [
+      'publishes a Contributor’s draft',
+      'Contributor',
+      { status: 'published', published_at: '2026-01-01T00:00:02.000Z' },
+    ],
+    ['drops the Author from its authors', 'Author', { authors: [{ id: 'other-user' }] }],
+  ])(
+    'keeps the editor and the unsaved text when another writer %s, and the next save is refused',
+    async (_change, role, theirChanges) => {
+      const shared = fakeSharedPost(
+        { authors: [{ id: CURRENT_USER_ID }] },
+        { canSave: (stored) => mayEdit(role, stored) },
+      );
+      const { queryClient } = await renderAdminApp(`/editor/post/${POST_ID}`, bootAs(role));
+      const releaseReads = await saveThenTheySave(shared, saveShortcut, theirChanges);
+      const editor = editorScreen.root().element();
+      await appendToBody(' and mine');
+
+      releaseReads();
+      await editorReadLanded(queryClient, shared.stored());
+
+      expect(editor.isConnected).toBe(true);
+      expect(currentRoute()).toBe(`/editor/post/${POST_ID}`);
+      await expect.element(editorScreen.body()).toHaveTextContent('Hello from React and mine');
+
+      await saveShortcut();
+
+      await expect
+        .element(editorScreen.saveErrorBanner())
+        .toHaveTextContent('You do not have permission to perform this action');
+      expect(shared.saveApi.requests).toHaveLength(2);
+      await expect.element(editorScreen.titleInput()).toHaveValue('My title');
+      await expect.element(editorScreen.body()).toHaveTextContent('Hello from React and mine');
+    },
+  );
+
+  it('returns an Author to the list when the refetch of a reopened post finds them removed', async () => {
+    fakePostsListScreen();
+    const shared = fakeSharedPost(
+      { authors: [{ id: CURRENT_USER_ID }] },
+      { canSave: (stored) => mayEdit('Author', stored) },
+    );
+    const { queryClient } = await renderAdminApp(`/editor/post/${POST_ID}`, bootAs('Author'));
+    await expect.element(editorScreen.titleInput()).toHaveValue('Hello from React');
+    await editorScreen.backLink('post').click();
+    await expect(editorScreen.root()).toHaveCount(0);
+
+    shared.theySave({ authors: [{ id: 'other-user' }] });
+    // A save to any post marks every post read stale, so the reopen starts from the cached copy.
+    await queryClient.invalidateQueries({ queryKey: [postsDataType] });
+    window.location.hash = `/editor/post/${POST_ID}`;
+
+    await expect.poll(() => shared.readApi.requests.length).toBeGreaterThan(1);
+    await expect.poll(currentRoute).toBe('/posts');
+    await expect(editorScreen.root()).toHaveCount(0);
+  });
+
+  it('keeps the editor open when a refetch brings a version stored only as mobiledoc', async () => {
+    const shared = fakeSharedPost();
+    const { queryClient } = await renderAdminApp(`/editor/post/${POST_ID}`, FLAG_ON);
+    const releaseReads = await saveThenTheySave(shared, saveShortcut, {
+      lexical: null,
+      mobiledoc: MOBILEDOC,
+    });
+    const editor = editorScreen.root().element();
+    await appendToBody(' and mine');
+
+    releaseReads();
+    await editorReadLanded(queryClient, shared.stored());
+
+    expect(editor.isConnected).toBe(true);
+    await expect.element(editorScreen.body()).toHaveTextContent('Hello from React and mine');
+    // A conversion would be a second write.
+    expect(shared.saveApi.requests).toHaveLength(1);
+  });
 });
 
 /** A read at the version this tab holds brings another writer's alt text and caption. */

apps/admin/src/editor/editor-screen.tsx

@@ -493,6 +493,9 @@ function useLexicalConversion(postType: PostType) {
 function EditorLoader({ postType, id }: { postType: PostType; id?: string }) {
   // A create replaces the URL with the id it acquired; the load must not restart.
   const [openedId] = useState(id);
+  // Access and conversion are judged until the opening read settles. Later
+  // reads belong to the session; unmounting the editor would dispose it.
+  const [openedWith, setOpenedWith] = useState<EditorRecord>();
   const navigate = useNavigate();
   const { data: currentUser } = useCurrentUser({ requestOptions: EDITOR_REQUEST_OPTIONS });
   const postQuery = useEditorPost(openedId ?? '', {
@@ -510,27 +513,33 @@ function EditorLoader({ postType, id }: { postType: PostType; id?: string }) {
     postType === 'page' ? pageQuery.data?.pages[0] : postQuery.data?.posts[0];
   const { state: conversion, convert } = useLexicalConversion(postType);
   const listPath = postType === 'page' ? '/pages' : '/posts';
+  // A failed refetch keeps the last post read; unmounting the editor would dispose its session.
+  const loadError = openedWith || loaded ? null : query.error;
 
-  const returnToList = !!currentUser && !!loaded && shouldReturnToList(currentUser, loaded);
+  const opening = openedWith ? undefined : loaded;
+  const returnToList = !!currentUser && !!opening && shouldReturnToList(currentUser, opening);
   useEffect(() => {
     if (returnToList) {
       navigate(listPath, { replace: true });
     }
   }, [returnToList, navigate, listPath]);
 
-  const needsConversion = !!currentUser && !!loaded?.mobiledoc && !loaded.lexical && !returnToList;
+  const needsConversion =
+    !!currentUser && !!opening?.mobiledoc && !opening.lexical && !returnToList;
   useEffect(() => {
-    if (needsConversion && loaded && conversion?.id !== loaded.id) {
-      void convert(loaded);
+    if (needsConversion && opening && conversion?.id !== opening.id) {
+      void convert(opening);
     }
-  }, [needsConversion, loaded, conversion?.id, convert]);
+  }, [needsConversion, opening, conversion?.id, convert]);
 
   if (!openedId) {
     return <EditorSurface createdId={id} postType={postType} />;
   }
 
-  // A failed refetch keeps the last post read; unmounting the editor would dispose its session.
-  const loadError = loaded ? null : query.error;
+  if (openedWith) {
+    return <EditorSurface postType={postType} record={openedWith} />;
+  }
+
   const notFound = loadError instanceof APIError && loadError.response?.status === 404;
   if (notFound) {
     return <NotFound />;
@@ -573,6 +582,11 @@ function EditorLoader({ postType, id }: { postType: PostType; id?: string }) {
     record = converted.record;
   }
 
+  // Latched while rendering once the read settles: a reopened post's cached
+  // copy may be stale, so the refetch in flight still decides.
+  if (!query.isFetching) {
+    setOpenedWith(record);
+  }
   return <EditorSurface postType={postType} record={record} />;
 }
 

apps/admin/src/editor/session/README.md

@@ -342,6 +342,16 @@ Once the post is on screen, a refetch that fails leaves the editor, the session
 and the unsaved content where they are, and the next save reports a deleted
 post, an expired session or a collision itself.
 
+The read that opens the post also decides whether the writer may edit it, and
+whether a post stored only as mobiledoc must be converted first. An Author or
+Contributor who is not among its authors, or a Contributor on a post that is no
+longer a draft, is returned to the list. A post reopened from a stale cached copy
+shows that copy while its refetch runs, and the refetch decides. Once that read
+has settled, later reads decide neither: a refetch that takes away the writer's
+access, or that brings a version stored only as mobiledoc, leaves the editor and
+the unsaved content where they are, and the next save shows the server's refusal
+or the collision.
+
 What a halted queue looks like is the session's caller's decision, not the
 engine's: `reauth-pending` and `conflict` are states, not UI. The writer gets a
 way back in and the content stays untouched.