fix(editor): table block readonly support (#10224)

close: BS-2597

blocksuite/affine/block-table/src/selection-controller.ts

@@ -29,6 +29,9 @@ export class SelectionController implements ReactiveController {
     this.host.addController(this);
   }
   hostConnected() {
+    if (this.dataManager.readonly$.value) {
+      return;
+    }
     this.dragListener();
     this.host.handleEvent('copy', this.onCopy);
     this.host.handleEvent('cut', this.onCut);
@@ -340,7 +343,6 @@ export class SelectionController implements ReactiveController {
   };
   onCopy = () => {
     const selection = this.getSelected();
-    console.log('selection', selection);
     if (!selection || selection.type !== 'area') {
       return false;
     }

blocksuite/affine/block-table/src/table-block.ts

@@ -171,7 +171,7 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
                 }
               )}
             </tbody>
-            ${IS_MOBILE
+            ${IS_MOBILE || this.dataManager.readonly$.value
               ? nothing
               : html`<affine-table-add-button
                   style="display: contents;"

blocksuite/affine/block-table/src/table-cell.ts

@@ -68,8 +68,9 @@ export class TableCell extends SignalWatcher(
   @property({ attribute: false })
   accessor text: Text | undefined = undefined;
 
-  @property({ type: Boolean })
+  get readonly() {
-  accessor readonly = false;
+    return this.dataManager.readonly$.value;
+  }
 
   @property({ attribute: false })
   accessor dataManager!: TableDataManager;
@@ -644,6 +645,9 @@ export class TableCell extends SignalWatcher(
 
   override connectedCallback() {
     super.connectedCallback();
+    if (this.readonly) {
+      return;
+    }
     const selectAll = (e: KeyboardEvent) => {
       if (e.key === 'a' && (IS_MAC ? e.metaKey : e.ctrlKey)) {
         e.stopPropagation();
@@ -666,6 +670,9 @@ export class TableCell extends SignalWatcher(
   }
 
   override firstUpdated() {
+    if (this.readonly) {
+      return;
+    }
     this.richText$.value?.updateComplete
       .then(() => {
         this.disposables.add(

blocksuite/affine/block-table/src/table-data-manager.ts

@@ -1,40 +1,45 @@
 import type { TableBlockModel, TableCell } from '@blocksuite/affine-model';
 import { generateFractionalIndexingKeyBetween } from '@blocksuite/affine-shared/utils';
 import { nanoid, Text } from '@blocksuite/store';
-import { computed, signal } from '@preact/signals-core';
+import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 
 import type { TableAreaSelection } from './selection-schema';
 
 export class TableDataManager {
   constructor(private readonly model: TableBlockModel) {}
-  ui = {
+  readonly readonly$: ReadonlySignal<boolean> = computed(() => {
+    return this.model.doc.readonly;
+  });
+  readonly ui = {
     columnIndicatorIndex$: signal<number>(),
     rowIndicatorIndex$: signal<number>(),
   };
-  hoverColumnIndex$ = signal<number>();
+  readonly hoverColumnIndex$ = signal<number>();
-  hoverRowIndex$ = signal<number>();
+  readonly hoverRowIndex$ = signal<number>();
-  hoverDragHandleColumnId$ = signal<string>();
+  readonly hoverDragHandleColumnId$ = signal<string>();
-  widthAdjustColumnId$ = signal<string>();
+  readonly widthAdjustColumnId$ = signal<string>();
-  virtualColumnCount$ = signal<number>(0);
+  readonly virtualColumnCount$ = signal<number>(0);
-  virtualRowCount$ = signal<number>(0);
+  readonly virtualRowCount$ = signal<number>(0);
-  virtualWidth$ = signal<{ columnId: string; width: number } | undefined>();
+  readonly virtualWidth$ = signal<
-  cellCountTips$ = computed(
+    { columnId: string; width: number } | undefined
+  >();
+  readonly cellCountTips$ = computed(
     () =>
       `${this.virtualRowCount$.value + this.rows$.value.length} x ${this.virtualColumnCount$.value + this.columns$.value.length}`
   );
-  rows$ = computed(() => {
+  readonly rows$ = computed(() => {
     return Object.values(this.model.props.rows$.value).sort((a, b) =>
       a.order > b.order ? 1 : -1
     );
   });
 
-  columns$ = computed(() => {
+  readonly columns$ = computed(() => {
     return Object.values(this.model.props.columns$.value).sort((a, b) =>
       a.order > b.order ? 1 : -1
     );
   });
 
-  uiRows$ = computed(() => {
+  readonly uiRows$ = computed(() => {
     const virtualRowCount = this.virtualRowCount$.value;
     const rows = this.rows$.value;
     if (virtualRowCount === 0) {
@@ -52,7 +57,7 @@ export class TableDataManager {
     return rows.slice(0, rows.length + virtualRowCount);
   });
 
-  uiColumns$ = computed(() => {
+  readonly uiColumns$ = computed(() => {
     const virtualColumnCount = this.virtualColumnCount$.value;
     const columns = this.columns$.value;
     if (virtualColumnCount === 0) {