feat(core): mode in query string (#7904)

Author: EYHN

packages/frontend/core/package.json

@@ -81,6 +81,7 @@
     "mixpanel-browser": "^2.49.0",
     "nanoid": "^5.0.7",
     "next-themes": "^0.3.0",
+    "query-string": "^9.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "^4.0.13",

packages/frontend/core/src/modules/workbench/entities/view.ts

@@ -1,5 +1,7 @@
 import { Entity, LiveData } from '@toeverything/infra';
 import type { Location, To } from 'history';
+import { isEqual } from 'lodash-es';
+import queryString from 'query-string';
 import { Observable } from 'rxjs';
 
 import { createNavigableHistory } from '../../../utils/navigable-history';
@@ -77,6 +79,52 @@ export class View extends Entity<{
 
   icon$ = new LiveData(this.props.icon ?? 'allDocs');
 
+  queryString$<T extends Record<string, unknown>>({
+    parseNumbers = true,
+  }: { parseNumbers?: boolean } = {}) {
+    return this.location$.map(
+      location =>
+        queryString.parse(location.search, {
+          parseBooleans: true,
+          parseNumbers: parseNumbers,
+        }) as Partial<T>
+    );
+  }
+
+  updateQueryString<T extends Record<string, unknown>>(
+    patch: Partial<T>,
+    {
+      forceUpdate,
+      parseNumbers,
+      replace,
+    }: {
+      forceUpdate?: boolean;
+      parseNumbers?: boolean;
+      replace?: boolean;
+    } = {}
+  ) {
+    const oldQueryStrings = queryString.parse(location.search, {
+      parseBooleans: true,
+      parseNumbers: parseNumbers,
+    });
+    const newQueryStrings = { ...oldQueryStrings, ...patch };
+
+    if (forceUpdate || !isEqual(oldQueryStrings, newQueryStrings)) {
+      const search = queryString.stringify(newQueryStrings);
+
+      const newState = {
+        ...this.history.location,
+        search,
+      };
+
+      if (replace) {
+        this.history.replace(newState);
+      } else {
+        this.history.push(newState);
+      }
+    }
+  }
+
   push(path: To) {
     this.history.push(path);
   }

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -10,7 +10,7 @@ import type { Editor } from '@affine/core/modules/editor';
 import { EditorService, EditorsService } from '@affine/core/modules/editor';
 import { RecentDocsService } from '@affine/core/modules/quicksearch';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
-import type { PageRootService } from '@blocksuite/blocks';
+import type { DocMode, PageRootService } from '@blocksuite/blocks';
 import {
   BookmarkBlockService,
   customImageProxyMiddleware,
@@ -330,9 +330,25 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
   const docRecordList = docsService.list;
   const docListReady = useLiveData(docRecordList.isReady$);
   const docRecord = useLiveData(docRecordList.doc$(pageId));
+  const viewService = useService(ViewService);
+
+  const queryString = useLiveData(
+    viewService.view.queryString$<{
+      mode?: string;
+    }>()
+  );
+
+  const queryStringMode =
+    queryString.mode && ['edgeless', 'page'].includes(queryString.mode)
+      ? (queryString.mode as DocMode)
+      : null;
+
+  // We only read the querystring mode when entering, so use useState here.
+  const [initialQueryStringMode] = useState(() => queryStringMode);
 
   const [doc, setDoc] = useState<Doc | null>(null);
   const [editor, setEditor] = useState<Editor | null>(null);
+  const editorMode = useLiveData(editor?.mode$);
 
   useLayoutEffect(() => {
     if (!docRecord) {
@@ -351,12 +367,26 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
     }
     const editor = doc.scope
       .get(EditorsService)
-      .createEditor(doc.getPrimaryMode() || 'page');
+      .createEditor(initialQueryStringMode || doc.getPrimaryMode() || 'page');
     setEditor(editor);
     return () => {
       editor.dispose();
     };
-  }, [doc]);
+  }, [doc, initialQueryStringMode]);
+
+  // update editor mode to queryString
+  useEffect(() => {
+    if (editorMode) {
+      viewService.view.updateQueryString(
+        {
+          mode: editorMode,
+        },
+        {
+          replace: true,
+        }
+      );
+    }
+  }, [editorMode, viewService.view]);
 
   // set sync engine priority target
   useEffect(() => {

packages/frontend/graphql/src/schema.ts

@@ -310,6 +310,7 @@ export enum ErrorNames {
   MAILER_SERVICE_IS_NOT_CONFIGURED = 'MAILER_SERVICE_IS_NOT_CONFIGURED',
   MEMBER_QUOTA_EXCEEDED = 'MEMBER_QUOTA_EXCEEDED',
   MISSING_OAUTH_QUERY_PARAMETER = 'MISSING_OAUTH_QUERY_PARAMETER',
+  NOT_FOUND = 'NOT_FOUND',
   NOT_IN_WORKSPACE = 'NOT_IN_WORKSPACE',
   NO_COPILOT_PROVIDER_AVAILABLE = 'NO_COPILOT_PROVIDER_AVAILABLE',
   OAUTH_ACCOUNT_ALREADY_CONNECTED = 'OAUTH_ACCOUNT_ALREADY_CONNECTED',

tests/affine-local/e2e/doc-info-modal.spec.ts

@@ -16,6 +16,7 @@ import {
   filterTags,
   removeSelectedTag,
 } from '@affine-test/kit/utils/properties';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
 import { expect, type Page } from '@playwright/test';
 
 const searchAndCreateTag = async (page: Page, name: string) => {
@@ -64,7 +65,7 @@ test('New a page and open it ,then open info modal in the title bar more action
 });
 
 test('New a page, then open info modal from all doc', async ({ page }) => {
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
 
   await page.getByTestId('all-pages').click();
   const cell = getPageByTitle(page, 'this is a new page');
@@ -83,7 +84,7 @@ test('New a page, then open info modal from all doc', async ({ page }) => {
 test('New a page and add to favourites, then open info modal from sidebar', async ({
   page,
 }) => {
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
 
   await clickPageMoreActions(page);
   await page.getByTestId('editor-option-menu-favorite').click();

tests/affine-local/e2e/drag-page.spec.ts

@@ -8,6 +8,10 @@ import {
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
 import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
+import {
+  getCurrentCollectionIdFromUrl,
+  getCurrentDocIdFromUrl,
+} from '@affine-test/kit/utils/url';
 import type { Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
@@ -32,7 +36,7 @@ const createCollection = async (page: Page, name: string) => {
   await expect(input).toBeVisible();
   await input.fill(name);
   await page.getByTestId('save-collection').click();
-  const newCollectionId = page.url().split('/').reverse()[0];
+  const newCollectionId = getCurrentCollectionIdFromUrl(page);
   const collection = page.getByTestId(`explorer-collection-${newCollectionId}`);
   await expect(collection).toBeVisible();
   return collection;
@@ -85,7 +89,7 @@ test('drag a page from "All pages" list to favourites, then drag to trash', asyn
   const title = 'this is a new page to drag';
   await waitForEditorLoad(page);
   await createPage(page, title);
-  const pageId = page.url().split('/').reverse()[0];
+  const pageId = getCurrentDocIdFromUrl(page);
   await clickSideBarAllPageButton(page);
   await page.waitForTimeout(500);
 
@@ -133,7 +137,7 @@ test('drag a page from favourites to collection', async ({ page }) => {
   const title = 'this is a new page to drag';
   await createPage(page, title);
 
-  const pageId = page.url().split('/').reverse()[0];
+  const pageId = getCurrentDocIdFromUrl(page);
   await clickSideBarAllPageButton(page);
   await page.waitForTimeout(500);
 
@@ -152,7 +156,7 @@ test('drag a collection to favourites', async ({ page }) => {
   await clickSideBarAllPageButton(page);
   await page.waitForTimeout(500);
   const collection = await createCollection(page, 'test collection');
-  const collectionId = page.url().split('/').reverse()[0];
+  const collectionId = getCurrentCollectionIdFromUrl(page);
   await dragToFavourites(page, collection, collectionId, 'collection');
 });
 
@@ -167,7 +171,7 @@ test('items in favourites can be reordered by dragging', async ({ page }) => {
 
   {
     const collection = await createCollection(page, 'test collection');
-    const collectionId = page.url().split('/').reverse()[0];
+    const collectionId = getCurrentCollectionIdFromUrl(page);
     await dragToFavourites(page, collection, collectionId, 'collection');
   }
 

tests/affine-local/e2e/local-first-delete-page.spec.ts

@@ -7,6 +7,7 @@ import {
   getPageOperationButton,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
 import { expect } from '@playwright/test';
 
 test('page delete -> refresh page -> it should be disappear', async ({
@@ -18,7 +19,7 @@ test('page delete -> refresh page -> it should be disappear', async ({
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page delete');
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
   const cell = page.getByRole('cell', {
     name: 'this is a new page delete',
@@ -54,7 +55,7 @@ test('page delete -> create new page -> refresh page -> new page should be appea
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page delete');
-  const newPageDeleteId = page.url().split('/').reverse()[0];
+  const newPageDeleteId = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
   const cellDelete = page.getByRole('cell', {
     name: 'this is a new page delete',
@@ -80,13 +81,13 @@ test('page delete -> create new page -> refresh page -> new page should be appea
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page1');
   await page.waitForTimeout(1000);
-  const newPageId1 = page.url().split('/').reverse()[0];
+  const newPageId1 = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page2');
   await page.waitForTimeout(1000);
-  const newPageId2 = page.url().split('/').reverse()[0];
+  const newPageId2 = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
   await page.reload();
   await getPageItem(page, newPageId1).click();
@@ -109,13 +110,13 @@ test('delete multiple pages -> create multiple pages -> refresh', async ({
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page1');
-  const newPageId1 = page.url().split('/').reverse()[0];
+  const newPageId1 = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
   // create 2nd page
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page2');
-  const newPageId2 = page.url().split('/').reverse()[0];
+  const newPageId2 = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
 
   // 1st cell to be deleted

tests/affine-local/e2e/local-first-favorites-items.spec.ts

@@ -10,6 +10,7 @@ import {
   waitForEditorLoad,
   waitForEmptyEditor,
 } from '@affine-test/kit/utils/page-logic';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
 import { expect } from '@playwright/test';
 
 test('Show favorite items in sidebar', async ({ page, workspace }) => {
@@ -18,7 +19,7 @@ test('Show favorite items in sidebar', async ({ page, workspace }) => {
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page to favorite');
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
   await page.getByTestId('all-pages').click();
   const cell = getPageByTitle(page, 'this is a new page to favorite');
   await expect(cell).toBeVisible();
@@ -50,7 +51,7 @@ test('Show favorite reference in sidebar', async ({ page, workspace }) => {
 
   await createLinkedPage(page, 'Another page');
 
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
 
   await clickPageMoreActions(page);
 
@@ -89,7 +90,7 @@ test("Deleted page's reference will not be shown in sidebar", async ({
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page to favorite');
 
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
 
   // goes to main content
   await page.keyboard.press('Enter', { delay: 50 });
@@ -108,7 +109,7 @@ test("Deleted page's reference will not be shown in sidebar", async ({
     page.locator('.doc-title-container:has-text("Another page")')
   ).toBeVisible();
 
-  const anotherPageId = page.url().split('/').reverse()[0];
+  const anotherPageId = getCurrentDocIdFromUrl(page);
 
   const favItemTestId = 'explorer-doc-' + newPageId;
 

tests/affine-local/e2e/local-first-new-page.spec.ts

@@ -5,14 +5,15 @@ import {
   getBlockSuiteEditorTitle,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
 import { expect } from '@playwright/test';
 
 test('click btn new page', async ({ page, workspace }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
-  const originPageId = page.url().split('/').reverse()[0];
+  const originPageId = getCurrentDocIdFromUrl(page);
   await clickNewPageButton(page);
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
   expect(newPageId).not.toBe(originPageId);
   const currentWorkspace = await workspace.current();
 

tests/affine-local/e2e/local-first-openpage-newtab.spec.ts

@@ -6,6 +6,7 @@ import {
   getPageOperationButton,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
 import { expect } from '@playwright/test';
 
 test('click btn new page and open in tab', async ({ page, workspace }) => {
@@ -15,7 +16,7 @@ test('click btn new page and open in tab', async ({ page, workspace }) => {
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page');
   const newPageUrl = page.url();
-  const newPageId = page.url().split('/').reverse()[0];
+  const newPageId = getCurrentDocIdFromUrl(page);
 
   await page.getByTestId('all-pages').click();