refactor(core): optimize editor params synchronization (#8346)

packages/frontend/core/src/modules/editor/entities/editor.ts

@@ -10,7 +10,7 @@ import type {
 import type { InlineEditor } from '@blocksuite/inline';
 import type { DocService, WorkspaceService } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
-import { isEqual } from 'lodash-es';
+import { defaults, isEqual, omit } from 'lodash-es';
 
 import { paramsParseOptions, preprocessParams } from '../../navigation/utils';
 import type { WorkbenchView } from '../../workbench';
@@ -64,22 +64,24 @@ export class Editor extends Entity {
    * sync editor params with view query string
    */
   bindWorkbenchView(view: WorkbenchView) {
-    // eslint-disable-next-line rxjs/finnish
-    const viewParams$ = view
-      .queryString$<
-        ReferenceParams & { refreshKey?: string }
-      >(paramsParseOptions)
-      .map(preprocessParams);
-
     const stablePrimaryMode = this.doc.getPrimaryMode();
 
+    // eslint-disable-next-line rxjs/finnish
+    const viewParams$ = view
+      .queryString$<ReferenceParams & { refreshKey?: string }>(
+        paramsParseOptions
+      )
+      .map(preprocessParams)
+      .map(params =>
+        defaults(params, {
+          mode: stablePrimaryMode || ('page' as DocMode),
+        })
+      );
+
     const editorParams$ = LiveData.computed(get => {
-      const selector = get(this.selector$);
       return {
         mode: get(this.mode$),
-        blockIds: selector?.blockIds,
+        ...get(this.selector$),
-        elementIds: selector?.elementIds,
-        refreshKey: selector?.refreshKey,
       };
     });
 
@@ -91,22 +93,14 @@ export class Editor extends Entity {
       updating = true;
       // when view params changed, sync to editor
       try {
-        const mode =
+        const editorParams = editorParams$.value;
-          viewParams$.value.mode || stablePrimaryMode || ('page' as DocMode);
+        if (params.mode !== editorParams.mode) {
-        if (mode !== editorParams$.value.mode) {
+          this.setMode(params.mode);
-          this.setMode(mode);
         }
-        const newSelector = {
+
-          blockIds: params.blockIds,
+        const selector = omit(params, ['mode']);
-          elementIds: params.elementIds,
+        if (!isEqual(selector, omit(editorParams, ['mode']))) {
-          refreshKey: params.refreshKey,
+          this.setSelector(selector);
-        };
-        if (!isEqual(newSelector, editorParams$.value)) {
-          this.setSelector({
-            blockIds: params.blockIds,
-            elementIds: params.elementIds,
-            refreshKey: params.refreshKey,
-          });
         }
       } finally {
         updating = false;
@@ -118,28 +112,13 @@ export class Editor extends Entity {
       updating = true;
       try {
         // when editor params changed, sync to view
-        const newQueryString: any = {};
+        if (!isEqual(params, viewParams$.value)) {
-        let updated = false;
+          const newQueryString: Record<string, string> = {};
-        if (params.mode !== viewParams$.value.mode) {
+
-          newQueryString.mode = params.mode;
+          Object.entries(params).forEach(([k, v]) => {
-          updated = true;
+            newQueryString[k] = Array.isArray(v) ? v.join(',') : v;
-        }
+          });
-        const stringBlockIds = params.blockIds?.join(',');
-        const stringElementIds = params.elementIds?.join(',');
-        const stringViewBlockIds = viewParams$.value.blockIds?.join(',');
-        const stringViewElementIds = viewParams$.value.elementIds?.join(',');
-        if (
-          stringBlockIds !== stringViewBlockIds ||
-          stringElementIds !== stringViewElementIds ||
-          params.refreshKey !== viewParams$.value.refreshKey
-        ) {
-          newQueryString.blockIds = stringBlockIds;
-          newQueryString.elementIds = stringElementIds;
-          newQueryString.refreshKey = params.refreshKey;
-          updated = true;
-        }
 
-        if (updated) {
           view.updateQueryString(newQueryString, { replace: true });
         }
       } finally {