feat(editor): add viewport element service (#10727)

blocksuite/affine/shared/src/services/index.ts

@@ -21,4 +21,5 @@ export * from './telemetry-service';
 export * from './theme-service';
 export * from './toolbar-service';
 export * from './user-service';
+export * from './viewport-element-service';
 export * from './virtual-keyboard-service';

blocksuite/affine/shared/src/services/viewport-element-service.ts

@@ -0,0 +1,60 @@
+import { createIdentifier } from '@blocksuite/global/di';
+import { BlockSuiteError } from '@blocksuite/global/exceptions';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { Viewport } from '../types';
+
+export interface ViewportElementService {
+  get viewportElement(): HTMLElement;
+  get viewport(): Viewport;
+}
+
+export const ViewportElementProvider = createIdentifier<ViewportElementService>(
+  'ViewportElementProvider'
+);
+
+export const ViewportElementExtension = (selector: string): ExtensionType => {
+  return {
+    setup: di => {
+      di.override(ViewportElementProvider, () => {
+        const getViewportElement = (): HTMLElement => {
+          const viewportElement = document.querySelector<HTMLElement>(selector);
+          if (!viewportElement) {
+            throw new BlockSuiteError(
+              BlockSuiteError.ErrorCode.ValueNotExists,
+              `ViewportElementProvider: viewport element is not found`
+            );
+          }
+          return viewportElement;
+        };
+        return {
+          get viewportElement() {
+            return getViewportElement();
+          },
+          get viewport() {
+            const viewportElement = getViewportElement();
+            const {
+              scrollLeft,
+              scrollTop,
+              scrollWidth,
+              scrollHeight,
+              clientWidth,
+              clientHeight,
+            } = viewportElement;
+            const { top, left } = viewportElement.getBoundingClientRect();
+            return {
+              top,
+              left,
+              scrollLeft,
+              scrollTop,
+              scrollWidth,
+              scrollHeight,
+              clientWidth,
+              clientHeight,
+            };
+          },
+        };
+      });
+    },
+  };
+};