refactor(editor): remove readonly in awareness (#9597)

blocksuite/affine/components/src/virtual-keyboard/controller.ts

@@ -1,8 +1,11 @@
 import { IS_IOS } from '@blocksuite/global/env';
+import type * as GlobalTypes from '@blocksuite/global/types';
 import { DisposableGroup } from '@blocksuite/global/utils';
 import { signal } from '@preact/signals-core';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
+declare type _GLOBAL_ = typeof GlobalTypes;
+
 function notSupportedWarning() {
   console.warn('VirtualKeyboard API and VisualViewport API are not supported');
 }

blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts

@@ -154,7 +154,7 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
 
     let readonly = doc.readonly;
     this.disposables.add(
-      doc.awarenessStore.slots.update.on(() => {
+      effect(() => {
         if (readonly !== doc.readonly) {
           readonly = doc.readonly;
           slots.readonlyUpdated.emit(readonly);

blocksuite/framework/global/src/types/index.ts

@@ -1,4 +1 @@
-export interface BlockSuiteFlags {
-  readonly: Record<string, boolean>;
-}
 export * from './virtual-keyboard.js';

blocksuite/framework/store/shim.d.ts

@@ -1,20 +0,0 @@
-declare module 'y-protocols/awareness.js' {
-  import { Awareness as _Awareness } from 'y-protocols/awareness';
-  type UnknownRecord = Record<string, unknown>;
-  export class Awareness<
-    State extends UnknownRecord = UnknownRecord,
-  > extends _Awareness {
-    constructor<State extends UnknownRecord = UnknownRecord>(
-      doc: Y.Doc
-    ): Awareness<State>;
-
-    getLocalState(): State;
-    getStates(): Map<number, State>;
-    setLocalState(state: State): void;
-    setLocalStateField<Field extends keyof State>(
-      field: Field,
-      value: State[Field]
-    ): void;
-  }
-  export { applyAwarenessUpdate, encodeAwarenessUpdate, modifyAwarenessUpdate, removeAwarenessStates } from 'y-protocols/awareness'
-}

blocksuite/framework/store/src/__tests__/doc.unit.spec.ts

@@ -259,7 +259,7 @@ test('local readonly', () => {
 
   expect(doc1.readonly).toBeTruthy();
   expect(doc2?.readonly).toBeTruthy();
-  expect(doc3?.readonly).toBeTruthy();
+  expect(doc3?.readonly).toBeFalsy();
 
   doc1.readonly = false;
 

blocksuite/framework/store/src/index.ts

@@ -1,6 +1,3 @@
-// oxlint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../shim.d.ts" />
-
 export * from './adapter';
 export * from './extension';
 export * from './model';

blocksuite/framework/store/src/model/doc.ts

@@ -54,7 +54,6 @@ export interface Doc {
   clearQuery(query: Query, readonly?: boolean): void;
 
   get loaded(): boolean;
-  get readonly(): boolean;
   get awarenessStore(): AwarenessStore;
 
   get workspace(): Workspace;

blocksuite/framework/store/src/model/store/store.ts

@@ -47,7 +47,7 @@ export class Store {
     mode: 'loose',
   };
 
-  protected _readonly?: boolean;
+  protected _readonly = signal(false);
 
   protected readonly _schema: Schema;
 
@@ -175,10 +175,16 @@ export class Store {
   }
 
   get canRedo() {
+    if (this.readonly) {
+      return false;
+    }
     return this._doc.canRedo;
   }
 
   get canUndo() {
+    if (this.readonly) {
+      return false;
+    }
     return this._doc.canUndo;
   }
 
@@ -214,18 +220,16 @@ export class Store {
     return this._doc.meta;
   }
 
+  get readonly$() {
+    return this._readonly;
+  }
+
   get readonly() {
-    if (this._doc.readonly) {
+    return this._readonly.value === true;
-      return true;
-    }
-    return this._readonly === true;
   }
 
   set readonly(value: boolean) {
-    this._doc.awarenessStore.setReadonly(this._doc, value);
+    this._readonly.value = value;
-    if (this._readonly !== undefined && this._readonly !== value) {
-      this._readonly = value;
-    }
   }
 
   get ready() {
@@ -233,6 +237,11 @@ export class Store {
   }
 
   get redo() {
+    if (this.readonly) {
+      return () => {
+        console.error('cannot undo in readonly mode');
+      };
+    }
     return this._doc.redo.bind(this._doc);
   }
 
@@ -263,6 +272,11 @@ export class Store {
   }
 
   get undo() {
+    if (this.readonly) {
+      return () => {
+        console.error('cannot undo in readonly mode');
+      };
+    }
     return this._doc.undo.bind(this._doc);
   }
 
@@ -300,7 +314,9 @@ export class Store {
 
     this._crud = new DocCRUD(this._yBlocks, doc.schema);
     this._schema = schema;
-    this._readonly = readonly;
+    if (readonly !== undefined) {
+      this._readonly.value = readonly;
+    }
     if (query) {
       this._query = query;
     }

blocksuite/framework/store/src/test/test-doc.ts

@@ -1,4 +1,4 @@
-import { type Disposable, Slot } from '@blocksuite/global/utils';
+import { Slot } from '@blocksuite/global/utils';
 import { signal } from '@preact/signals-core';
 import * as Y from 'yjs';
 
@@ -17,8 +17,6 @@ type DocOptions = {
 };
 
 export class TestDoc implements Doc {
-  private _awarenessUpdateDisposable: Disposable | null = null;
-
   private readonly _canRedo$ = signal(false);
 
   private readonly _canUndo$ = signal(false);
@@ -86,8 +84,8 @@ export class TestDoc implements Doc {
   private _shouldTransact = true;
 
   private readonly _updateCanUndoRedoSignals = () => {
-    const canRedo = this.readonly ? false : this._history.canRedo();
+    const canRedo = this._history.canRedo();
-    const canUndo = this.readonly ? false : this._history.canUndo();
+    const canUndo = this._history.canUndo();
     if (this._canRedo$.peek() !== canRedo) {
       this._canRedo$.value = canRedo;
     }
@@ -164,10 +162,6 @@ export class TestDoc implements Doc {
     return this.workspace.meta.getDocMeta(this.id);
   }
 
-  get readonly(): boolean {
-    return this.awarenessStore.isReadonly(this);
-  }
-
   get ready() {
     return this._ready;
   }
@@ -272,7 +266,6 @@ export class TestDoc implements Doc {
 
   dispose() {
     this.slots.historyUpdated.dispose();
-    this._awarenessUpdateDisposable?.dispose();
 
     if (this.ready) {
       this._yBlocks.unobserveDeep(this._handleYEvents);
@@ -322,13 +315,6 @@ export class TestDoc implements Doc {
       this._handleYBlockAdd(id);
     });
 
-    this._awarenessUpdateDisposable = this.awarenessStore.slots.update.on(
-      () => {
-        // change readonly state will affect the undo/redo state
-        this._updateCanUndoRedoSignals();
-      }
-    );
-
     initFn?.();
 
     this._ready = true;
@@ -337,18 +323,10 @@ export class TestDoc implements Doc {
   }
 
   redo() {
-    if (this.readonly) {
-      console.error('cannot modify data in readonly mode');
-      return;
-    }
     this._history.redo();
   }
 
   undo() {
-    if (this.readonly) {
-      console.error('cannot modify data in readonly mode');
-      return;
-    }
     this._history.undo();
   }
 

blocksuite/framework/store/src/test/test-workspace.ts

@@ -1,5 +1,4 @@
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-import type { BlockSuiteFlags } from '@blocksuite/global/types';
 import { NoopLogger, Slot } from '@blocksuite/global/utils';
 import {
   AwarenessEngine,
@@ -11,8 +10,6 @@ import {
   MemoryBlobSource,
   NoopDocSource,
 } from '@blocksuite/sync';
-import clonedeep from 'lodash.clonedeep';
-import merge from 'lodash.merge';
 import { Awareness } from 'y-protocols/awareness.js';
 import * as Y from 'yjs';
 
@@ -26,7 +23,7 @@ import type {
 } from '../model/index.js';
 import type { Schema } from '../schema/index.js';
 import { type IdGenerator, nanoid } from '../utils/id-generator.js';
-import { AwarenessStore, type RawAwarenessState } from '../yjs/index.js';
+import { AwarenessStore } from '../yjs/index.js';
 import { TestDoc } from './test-doc.js';
 import { TestMeta } from './test-meta.js';
 
@@ -34,7 +31,6 @@ export type DocCollectionOptions = {
   schema: Schema;
   id?: string;
   idGenerator?: IdGenerator;
-  defaultFlags?: Partial<BlockSuiteFlags>;
   docSources?: {
     main: DocSource;
     shadows?: DocSource[];
@@ -46,10 +42,6 @@ export type DocCollectionOptions = {
   awarenessSources?: AwarenessSource[];
 };
 
-const FLAGS_PRESET = {
-  readonly: {},
-} satisfies BlockSuiteFlags;
-
 /**
  * Test only
  * Do not use this in production
@@ -95,7 +87,6 @@ export class TestWorkspace implements Workspace {
     id,
     schema,
     idGenerator,
-    defaultFlags,
     awarenessSources = [],
     docSources = {
       main: new NoopDocSource(),
@@ -108,10 +99,7 @@ export class TestWorkspace implements Workspace {
 
     this.id = id || '';
     this.doc = new Y.Doc({ guid: id });
-    this.awarenessStore = new AwarenessStore(
+    this.awarenessStore = new AwarenessStore(new Awareness(this.doc));
-      new Awareness<RawAwarenessState>(this.doc),
-      merge(clonedeep(FLAGS_PRESET), defaultFlags)
-    );
 
     const logger = new NoopLogger();
 

blocksuite/framework/store/src/yjs/awareness.ts

@@ -1,11 +1,5 @@
-import type { BlockSuiteFlags } from '@blocksuite/global/types';
 import { Slot } from '@blocksuite/global/utils';
-import { type Signal, signal } from '@preact/signals-core';
+import type { Awareness } from 'y-protocols/awareness.js';
-import clonedeep from 'lodash.clonedeep';
-import merge from 'lodash.merge';
-import type { Awareness as YAwareness } from 'y-protocols/awareness.js';
-
-import type { Doc } from '../model/doc.js';
 
 export interface UserInfo {
   name: string;
@@ -17,7 +11,6 @@ type UserSelection = Array<Record<string, unknown>>;
 export type RawAwarenessState = {
   user?: UserInfo;
   color?: string;
-  flags: BlockSuiteFlags;
   // use v2 to avoid crush on old clients
   selectionV2: Record<string, UserSelection>;
 };
@@ -29,18 +22,14 @@ export interface AwarenessEvent {
 }
 
 export class AwarenessStore {
-  private readonly _flags: Signal<BlockSuiteFlags>;
-
   private readonly _onAwarenessChange = (diff: {
     added: number[];
     removed: number[];
     updated: number[];
   }) => {
-    this._flags.value = this.awareness.getLocalState()?.flags ?? {};
-
     const { added, removed, updated } = diff;
 
-    const states = this.awareness.getStates();
+    const states = this.getStates();
     added.forEach(id => {
       this.slots.update.emit({
         id,
@@ -63,30 +52,16 @@ export class AwarenessStore {
     });
   };
 
-  readonly awareness: YAwareness<RawAwarenessState>;
+  readonly awareness: Awareness;
 
   readonly slots = {
     update: new Slot<AwarenessEvent>(),
   };
 
-  constructor(
+  constructor(awareness: Awareness) {
-    awareness: YAwareness<RawAwarenessState>,
-    defaultFlags: BlockSuiteFlags
-  ) {
-    this._flags = signal(defaultFlags);
     this.awareness = awareness;
     this.awareness.on('change', this._onAwarenessChange);
     this.awareness.setLocalStateField('selectionV2', {});
-    this._initFlags(defaultFlags);
-  }
-
-  private _initFlags(defaultFlags: BlockSuiteFlags) {
-    const upstreamFlags = this.awareness.getLocalState()?.flags;
-    const flags = clonedeep(defaultFlags);
-    if (upstreamFlags) {
-      merge(flags, upstreamFlags);
-    }
-    this.awareness.setLocalStateField('flags', flags);
   }
 
   destroy() {
@@ -95,10 +70,6 @@ export class AwarenessStore {
     this.awareness.destroy();
   }
 
-  getFlag<Key extends keyof BlockSuiteFlags>(field: Key) {
-    return this._flags.value[field];
-  }
-
   getLocalSelection(
     selectionManagerId: string
   ): ReadonlyArray<Record<string, unknown>> {
@@ -109,24 +80,22 @@ export class AwarenessStore {
   }
 
   getStates(): Map<number, RawAwarenessState> {
-    return this.awareness.getStates();
+    return this.awareness.getStates() as Map<number, RawAwarenessState>;
   }
 
-  isReadonly(blockCollection: Doc): boolean {
+  getLocalState(): RawAwarenessState {
-    const rd = this.getFlag('readonly');
+    return this.awareness.getLocalState() as RawAwarenessState;
-    if (rd && typeof rd === 'object') {
-      return Boolean((rd as Record<string, boolean>)[blockCollection.id]);
-    } else {
-      return false;
-    }
   }
 
-  setFlag<Key extends keyof BlockSuiteFlags>(
+  setLocalState(state: RawAwarenessState): void {
-    field: Key,
+    this.awareness.setLocalState(state);
-    value: BlockSuiteFlags[Key]
+  }
-  ) {
+
-    const oldFlags = this.awareness.getLocalState()?.flags ?? {};
+  setLocalStateField<Field extends keyof RawAwarenessState>(
-    this.awareness.setLocalStateField('flags', { ...oldFlags, [field]: value });
+    field: Field,
+    value: RawAwarenessState[Field]
+  ): void {
+    this.awareness.setLocalStateField(field, value);
   }
 
   setLocalSelection(selectionManagerId: string, selection: UserSelection) {
@@ -136,12 +105,4 @@ export class AwarenessStore {
       [selectionManagerId]: selection,
     });
   }
-
-  setReadonly(blockCollection: Doc, value: boolean): void {
-    const flags = this.getFlag('readonly') ?? {};
-    this.setFlag('readonly', {
-      ...flags,
-      [blockCollection.id]: value,
-    } as BlockSuiteFlags['readonly']);
-  }
 }

blocksuite/presets/src/fragments/doc-title/doc-title.ts

@@ -3,6 +3,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import type { RichText, RootBlockModel } from '@blocksuite/blocks';
 import { assertExists, WithDisposable } from '@blocksuite/global/utils';
 import type { Store } from '@blocksuite/store';
+import { effect } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
@@ -111,7 +112,7 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
 
     this._isReadonly = this.doc.readonly;
     this._disposables.add(
-      this.doc.awarenessStore.slots.update.on(() => {
+      effect(() => {
         if (this._isReadonly !== this.doc.readonly) {
           this._isReadonly = this.doc.readonly;
           this.requestUpdate();

blocksuite/tests-legacy/edgeless/basic.spec.ts

@@ -19,7 +19,6 @@ import {
   Shape,
   shiftClickView,
   switchEditorMode,
-  toggleEditorReadonly,
   ZOOM_BAR_RESPONSIVE_SCREEN_WIDTH,
   zoomByMouseWheel,
   zoomResetByKeyboard,
@@ -33,6 +32,7 @@ import {
   focusRichText,
   initEmptyEdgelessState,
   redoByClick,
+  switchReadonly,
   type,
   undoByClick,
   waitNextFrame,
@@ -203,7 +203,7 @@ test('zoom by pinch when edgeless is readonly', async ({ page }) => {
   await zoomResetByKeyboard(page);
   await assertZoomLevel(page, 100);
 
-  await toggleEditorReadonly(page);
+  await switchReadonly(page);
 
   const from = [
     { x: CENTER_X - 100, y: CENTER_Y },
@@ -217,7 +217,8 @@ test('zoom by pinch when edgeless is readonly', async ({ page }) => {
   await multiTouchMove(page, from, to);
   await multiTouchUp(page, to);
 
-  await toggleEditorReadonly(page);
+  await switchReadonly(page, false);
+  await waitNextFrame(page);
   await assertZoomLevel(page, 50);
 });
 

blocksuite/tests-legacy/utils/actions/click.ts

@@ -1,5 +1,6 @@
 import type { IPoint } from '@blocksuite/global/utils';
 import type { Page } from '@playwright/test';
+import type { Store } from '@store/index.js';
 
 import { toViewCoord } from './edgeless.js';
 import { waitNextFrame } from './misc.js';
@@ -110,14 +111,12 @@ export async function clickTestOperationsMenuItem(page: Page, name: string) {
 export async function switchReadonly(page: Page, value = true) {
   await page.evaluate(_value => {
     const defaultPage = document.querySelector(
-      'affine-page-root'
+      'affine-page-root,affine-edgeless-root'
     ) as HTMLElement & {
-      doc: {
+      doc: Store;
-        awarenessStore: { setFlag: (key: string, value: unknown) => void };
-      };
     };
     const doc = defaultPage.doc;
-    doc.awarenessStore.setFlag('readonly', { 'doc:home': _value });
+    doc.readonly = _value;
   }, value);
 }
 

blocksuite/tests-legacy/utils/actions/misc.ts

@@ -85,9 +85,6 @@ async function initEmptyEditor({
           await new Promise(resolve => doc.slots.rootAdded.once(resolve));
         }
 
-        for (const [key, value] of Object.entries(flags)) {
-          doc.awarenessStore.setFlag(key as keyof typeof flags, value);
-        }
         // add app root from https://github.com/toeverything/blocksuite/commit/947201981daa64c5ceeca5fd549460c34e2dabfa
         const appRoot = document.querySelector('#app');
         if (!appRoot) {
@@ -95,6 +92,11 @@ async function initEmptyEditor({
         }
         const createEditor = () => {
           const editor = document.createElement('affine-editor-container');
+          for (const [key, value] of Object.entries(flags)) {
+            doc
+              .get(window.$blocksuite.blocks.FeatureFlagService)
+              .setFlag(key, value);
+          }
           doc
             .get(window.$blocksuite.blocks.FeatureFlagService)
             .setFlag('enable_advanced_block_visibility', true);

packages/frontend/core/src/modules/workspace/impls/doc.ts

@@ -1,5 +1,5 @@
 import { SpecProvider } from '@blocksuite/affine/blocks';
-import { type Disposable, Slot } from '@blocksuite/affine/global/utils';
+import { Slot } from '@blocksuite/affine/global/utils';
 import {
   type AwarenessStore,
   type Doc,
@@ -20,8 +20,6 @@ type DocOptions = {
 };
 
 export class DocImpl implements Doc {
-  private _awarenessUpdateDisposable: Disposable | null = null;
-
   private readonly _canRedo = signal(false);
 
   private readonly _canUndo = signal(false);
@@ -89,8 +87,8 @@ export class DocImpl implements Doc {
   private _shouldTransact = true;
 
   private readonly _updateCanUndoRedoSignals = () => {
-    const canRedo = this.readonly ? false : this._history.canRedo();
+    const canRedo = this._history.canRedo();
-    const canUndo = this.readonly ? false : this._history.canUndo();
+    const canUndo = this._history.canUndo();
     if (this._canRedo.peek() !== canRedo) {
       this._canRedo.value = canRedo;
     }
@@ -159,10 +157,6 @@ export class DocImpl implements Doc {
     return this.workspace.meta.getDocMeta(this.id);
   }
 
-  get readonly(): boolean {
-    return this.awarenessStore.isReadonly(this);
-  }
-
   get ready() {
     return this._ready;
   }
@@ -267,7 +261,6 @@ export class DocImpl implements Doc {
 
   dispose() {
     this.slots.historyUpdated.dispose();
-    this._awarenessUpdateDisposable?.dispose();
 
     if (this.ready) {
       this._yBlocks.unobserveDeep(this._handleYEvents);
@@ -320,13 +313,6 @@ export class DocImpl implements Doc {
       this._handleYBlockAdd(id);
     });
 
-    this._awarenessUpdateDisposable = this.awarenessStore.slots.update.on(
-      () => {
-        // change readonly state will affect the undo/redo state
-        this._updateCanUndoRedoSignals();
-      }
-    );
-
     initFn?.();
 
     this._ready = true;
@@ -335,18 +321,10 @@ export class DocImpl implements Doc {
   }
 
   redo() {
-    if (this.readonly) {
-      console.error('cannot modify data in readonly mode');
-      return;
-    }
     this._history.redo();
   }
 
   undo() {
-    if (this.readonly) {
-      console.error('cannot modify data in readonly mode');
-      return;
-    }
     this._history.undo();
   }
 

packages/frontend/core/src/modules/workspace/impls/workspace.ts

@@ -2,7 +2,6 @@ import {
   BlockSuiteError,
   ErrorCode,
 } from '@blocksuite/affine/global/exceptions';
-import type { BlockSuiteFlags } from '@blocksuite/affine/global/types';
 import { NoopLogger, Slot } from '@blocksuite/affine/global/utils';
 import {
   AwarenessStore,
@@ -33,10 +32,6 @@ type WorkspaceOptions = {
   blobSource?: BlobSource;
 };
 
-const FLAGS_PRESET = {
-  readonly: {},
-} satisfies BlockSuiteFlags;
-
 export class WorkspaceImpl implements Workspace {
   protected readonly _schema: Schema;
 
@@ -73,10 +68,7 @@ export class WorkspaceImpl implements Workspace {
 
     this.id = id || '';
     this.doc = new Y.Doc({ guid: id });
-    this.awarenessStore = new AwarenessStore(new Awareness(this.doc), {
+    this.awarenessStore = new AwarenessStore(new Awareness(this.doc));
-      ...FLAGS_PRESET,
-      readonly: {},
-    });
 
     blobSource = blobSource ?? new MemoryBlobSource();
     const logger = new NoopLogger();