fix(editor): block can be null in widget (#10959)

Closes: [BS-2826](https://linear.app/affine-design/issue/BS-2826/typeerror-thisblock-is-null)

blocksuite/affine/blocks/block-root/src/edgeless/components/note-slicer/index.ts

@@ -143,7 +143,7 @@ export class NoteSlicer extends WidgetComponent<
   }
 
   get selectedRectEle() {
-    return this.block.selectedRectWidget;
+    return this.block?.selectedRectWidget;
   }
 
   private _sliceNote() {
@@ -266,6 +266,10 @@ export class NoteSlicer extends WidgetComponent<
 
     this._updateDivingLineAndBlockIds();
 
+    if (!block) {
+      return;
+    }
+
     disposables.add(
       block.slots.elementResizeStart.subscribe(() => {
         this._isResizing = true;
@@ -343,7 +347,7 @@ export class NoteSlicer extends WidgetComponent<
   }
 
   override firstUpdated() {
-    if (!this.block.service) return;
+    if (!this.block?.service) return;
     this.disposables.add(
       this.block.service.uiEventDispatcher.add('wheel', () => {
         this._hidden = true;

blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts

@@ -33,6 +33,9 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent<
   `;
 
   override render() {
+    if (!this.block) {
+      return nothing;
+    }
     const rect = this.block.gfx.tool.draggingViewArea$.value;
     const tool = this.block.gfx.tool.currentTool$.value;
 

blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts

@@ -477,7 +477,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     this._scaleDirection = undefined;
     this._updateMode();
 
-    this.block.slots.elementResizeEnd.next();
+    this.block?.slots.elementResizeEnd.next();
 
     this.frameOverlay.clear();
   };
@@ -606,7 +606,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     const rotation = this._resizeManager.rotation;
 
     this._dragEndCallback = [];
-    this.block.slots.elementResizeStart.next();
+    this.block?.slots.elementResizeStart.next();
     this.selection.selectedElements.forEach(el => {
       el.stash('xywh');
 
@@ -846,7 +846,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
   }
 
   get edgelessSlots() {
-    return this.block.slots;
+    return this.block?.slots;
   }
 
   get frameOverlay() {
@@ -1327,41 +1327,46 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
       selection.slots.updated.subscribe(this._updateOnSelectionChange)
     );
 
-    _disposables.add(
-      block.slots.readonlyUpdated.subscribe(() => this.requestUpdate())
-    );
+    if (block) {
+      _disposables.add(
+        block.slots.readonlyUpdated.subscribe(() => this.requestUpdate())
+      );
+
+      _disposables.add(
+        block.slots.elementResizeStart.subscribe(
+          () => (this._isResizing = true)
+        )
+      );
+      _disposables.add(
+        block.slots.elementResizeEnd.subscribe(() => (this._isResizing = false))
+      );
+
+      block.handleEvent(
+        'keyDown',
+        ctx => {
+          const event = ctx.get('defaultState').event;
+          if (event instanceof KeyboardEvent) {
+            this._shift(event);
+          }
+        },
+        { global: true }
+      );
+
+      block.handleEvent(
+        'keyUp',
+        ctx => {
+          const event = ctx.get('defaultState').event;
+          if (event instanceof KeyboardEvent) {
+            this._shift(event);
+          }
+        },
+        { global: true }
+      );
+    }
 
-    _disposables.add(
-      block.slots.elementResizeStart.subscribe(() => (this._isResizing = true))
-    );
-    _disposables.add(
-      block.slots.elementResizeEnd.subscribe(() => (this._isResizing = false))
-    );
     _disposables.add(() => {
       this._propDisposables.forEach(disposable => disposable.unsubscribe());
     });
-
-    this.block.handleEvent(
-      'keyDown',
-      ctx => {
-        const event = ctx.get('defaultState').event;
-        if (event instanceof KeyboardEvent) {
-          this._shift(event);
-        }
-      },
-      { global: true }
-    );
-
-    this.block.handleEvent(
-      'keyUp',
-      ctx => {
-        const event = ctx.get('defaultState').event;
-        if (event instanceof KeyboardEvent) {
-          this._shift(event);
-        }
-      },
-      { global: true }
-    );
   }
 
   private _shift(event: KeyboardEvent) {

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/edgeless-toolbar.ts

@@ -335,6 +335,9 @@ export class EdgelessToolbarWidget extends WidgetComponent<
   }
 
   private get _quickTools() {
+    if (!this.block) {
+      return [];
+    }
     return getQuickTools({ edgeless: this.block });
   }
 
@@ -376,6 +379,9 @@ export class EdgelessToolbarWidget extends WidgetComponent<
   }
 
   private get _seniorTools() {
+    if (!this.block) {
+      return [];
+    }
     return getSeniorTools({
       edgeless: this.block,
       toolbarContainer: this.toolbarContainer,
@@ -573,6 +579,9 @@ export class EdgelessToolbarWidget extends WidgetComponent<
         .get(ThemeProvider)
         .theme$.subscribe(mode => this._themeProvider.setValue(mode))
     );
+    if (!this.block) {
+      return;
+    }
     this._disposables.add(
       this.block.bindHotKey(
         {
@@ -603,6 +612,9 @@ export class EdgelessToolbarWidget extends WidgetComponent<
 
   override firstUpdated() {
     const { _disposables, block, gfx } = this;
+    if (!block) {
+      return;
+    }
 
     _disposables.add(
       gfx.viewport.viewportUpdated.subscribe(() => this.requestUpdate())

blocksuite/affine/blocks/block-root/src/widgets/edgeless-zoom-toolbar/index.ts

@@ -48,7 +48,7 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
 
     this.disposables.add(
       effect(() => {
-        const currentTool = this.edgeless.gfx.tool.currentToolName$.value;
+        const currentTool = this.edgeless?.gfx.tool.currentToolName$.value;
 
         if (currentTool !== 'frameNavigator') {
           this._hide = false;

blocksuite/affine/blocks/block-root/src/widgets/image-toolbar/index.ts

@@ -37,6 +37,9 @@ export class AffineImageToolbarWidget extends WidgetComponent<
       this,
       ({ abortController }) => {
         const imageBlock = this.block;
+        if (!imageBlock) {
+          return null;
+        }
         const selection = this.host.selection;
 
         const textSelection = selection.find(TextSelection);
@@ -103,6 +106,9 @@ export class AffineImageToolbarWidget extends WidgetComponent<
     );
 
     const imageBlock = this.block;
+    if (!imageBlock) {
+      return;
+    }
     this._hoverController.setReference(imageBlock);
     this._hoverController.onAbort = () => {
       // If the more menu is opened, don't close it.

blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/index.ts

@@ -22,7 +22,7 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<
     if (blur) {
       if (document.activeElement === this._docTitle?.inlineEditorContainer) {
         this._docTitle?.inlineEditor?.setInlineRange(null);
-      } else if (document.activeElement === this.block.rootComponent) {
+      } else if (document.activeElement === this.block?.rootComponent) {
         this.std.selection.clear();
       }
     }
@@ -46,7 +46,7 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<
   override connectedCallback(): void {
     super.connectedCallback();
 
-    const { rootComponent } = this.block;
+    const rootComponent = this.block?.rootComponent;
     if (rootComponent) {
       this.disposables.addFromEvent(rootComponent, 'focus', () => {
         this._show$.value = true;
@@ -79,7 +79,7 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<
 
     if (!this._show$.value) return nothing;
 
-    if (!this.block.rootComponent) return nothing;
+    if (!this.block?.rootComponent) return nothing;
 
     return html`<blocksuite-portal
       .shadowDom=${false}

blocksuite/affine/blocks/block-root/src/widgets/linked-doc/index.ts

@@ -72,7 +72,7 @@ export class AffineLinkedDocWidget extends WidgetComponent<
   }
 
   private readonly _renderLinkedDocMenu = () => {
-    if (!this.block.rootComponent) return nothing;
+    if (!this.block?.rootComponent) return nothing;
 
     return html`<affine-mobile-linked-doc-menu
       .context=${this._context}

blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts

@@ -114,7 +114,7 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent<
     });
     this._lastPointerState = state;
 
-    if (shouldAutoScroll) {
+    if (shouldAutoScroll && this.scrollContainer) {
       const rect = this.scrollContainer.getBoundingClientRect();
       const result = autoScroll(this.scrollContainer, state.raw.y - rect.top);
       if (!result) {
@@ -173,6 +173,9 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent<
   }
 
   private get scrollContainer() {
+    if (!this.block) {
+      return null;
+    }
     return getScrollContainer(this.block);
   }
 

blocksuite/affine/blocks/block-root/src/widgets/surface-ref-toolbar/surface-ref-toolbar.ts

@@ -49,6 +49,9 @@ export class AffineSurfaceRefToolbar extends WidgetComponent<
     this,
     ({ abortController }) => {
       const surfaceRefBlock = this.block;
+      if (!surfaceRefBlock) {
+        return null;
+      }
       const selection = this.host.selection;
 
       const textSelection = selection.find(TextSelection);
@@ -100,6 +103,9 @@ export class AffineSurfaceRefToolbar extends WidgetComponent<
     super.connectedCallback();
 
     this.moreGroups = getMoreMenuConfig(this.std).configure(this.moreGroups);
+    if (!this.block) {
+      return;
+    }
     this._hoverController.setReference(this.block);
   }
 }