refactor(editor): extract drag handle widget (#9415)

blocksuite/blocks/src/root-block/page/page-root-block.ts

@@ -1,6 +1,7 @@
 import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import type { NoteBlockModel, RootBlockModel } from '@blocksuite/affine-model';
 import { NoteDisplayMode } from '@blocksuite/affine-model';
+import { PageViewportService } from '@blocksuite/affine-shared/services';
 import type { Viewport } from '@blocksuite/affine-shared/types';
 import {
   focusTitle,
@@ -141,10 +142,6 @@ export class PageRootBlockComponent extends BlockComponent<
     return getScrollContainer(this);
   }
 
-  get slots() {
-    return this.service.slots;
-  }
-
   get viewport(): Viewport | null {
     if (!this.viewportElement) {
       return null;
@@ -172,9 +169,9 @@ export class PageRootBlockComponent extends BlockComponent<
 
   get viewportElement(): HTMLDivElement | null {
     if (this._viewportElement) return this._viewportElement;
-    this._viewportElement = this.host.closest(
+    this._viewportElement = this.host.closest<HTMLDivElement>(
       '.affine-page-viewport'
-    ) as HTMLDivElement | null;
+    );
     return this._viewportElement;
   }
 
@@ -198,12 +195,14 @@ export class PageRootBlockComponent extends BlockComponent<
     if (!viewport || !viewportElement) {
       return;
     }
+
+    const viewportService = this.std.get(PageViewportService);
     // when observe viewportElement resize, emit viewport update event
     const resizeObserver = new ResizeObserver(
       (entries: ResizeObserverEntry[]) => {
         for (const { target } of entries) {
           if (target === viewportElement) {
-            this.slots.viewportUpdated.emit(viewport);
+            viewportService.emit(viewport);
             break;
           }
         }

blocksuite/blocks/src/root-block/page/page-root-spec.ts

@@ -4,8 +4,10 @@ import {
   DocDisplayMetaService,
   DocModeService,
   EmbedOptionService,
+  PageViewportServiceExtension,
   ThemeService,
 } from '@blocksuite/affine-shared/services';
+import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
 import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
 import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
 import {
@@ -20,7 +22,6 @@ import { literal, unsafeStatic } from 'lit/static-html.js';
 import { ExportManagerExtension } from '../../_common/export-manager/export-manager.js';
 import { RootBlockAdapterExtensions } from '../adapters/extension.js';
 import { commands } from '../commands/index.js';
-import { AFFINE_DRAG_HANDLE_WIDGET } from '../widgets/drag-handle/consts.js';
 import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
 import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
 import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
@@ -74,6 +75,7 @@ export const PageRootBlockSpec: ExtensionType[] = [
   WidgetViewMapExtension('affine:page', pageRootWidgetViewMap),
   ExportManagerExtension,
   DNDAPIExtension,
+  PageViewportServiceExtension,
   DocDisplayMetaService,
   RootBlockAdapterExtensions,
   FileDropExtension,