feat(editor): viewport overlay widget extension (#12035)

Closes: BS-3360

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new viewport overlay widget, making it available as part of the workspace and enabling its integration into supported pages.

- **Refactor**
  - Updated internal imports and exports to utilize the new viewport overlay widget package.
  - Streamlined widget registration and extension mechanisms for improved modularity.

- **Chores**
  - Added configuration and project references to support the new viewport overlay widget package in the build system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/root/src/common-specs/index.ts

@@ -7,13 +7,11 @@ import { RootBlockAdapterExtensions } from '../adapters/extension';
 import { clipboardConfigs } from '../clipboard';
 import { builtinToolbarConfig } from '../configs/toolbar';
 import { fallbackKeymap } from '../keyboard/keymap';
-import { viewportOverlayWidget } from './widgets';
 
 export const CommonSpecs: ExtensionType[] = [
   FlavourExtension('affine:page'),
   ...RootBlockAdapterExtensions,
   ...clipboardConfigs,
-  viewportOverlayWidget,
   fallbackKeymap,
 
   ToolbarModuleExtension({
@@ -21,5 +19,3 @@ export const CommonSpecs: ExtensionType[] = [
     config: builtinToolbarConfig,
   }),
 ];
-
-export * from './widgets';

blocksuite/affine/blocks/root/src/common-specs/widgets.ts

@@ -1,10 +0,0 @@
-import { WidgetViewExtension } from '@blocksuite/std';
-import { literal, unsafeStatic } from 'lit/static-html.js';
-
-import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
-
-export const viewportOverlayWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_VIEWPORT_OVERLAY_WIDGET,
-  literal`${unsafeStatic(AFFINE_VIEWPORT_OVERLAY_WIDGET)}`
-);

blocksuite/affine/blocks/root/src/effects.ts

@@ -31,10 +31,6 @@ import {
   AFFINE_PAGE_DRAGGING_AREA_WIDGET,
   AffinePageDraggingAreaWidget,
 } from './widgets/page-dragging-area/page-dragging-area.js';
-import {
-  AFFINE_VIEWPORT_OVERLAY_WIDGET,
-  AffineViewportOverlayWidget,
-} from './widgets/viewport-overlay/viewport-overlay.js';
 
 export function effects() {
   // Register components by category
@@ -59,10 +55,6 @@ function registerWidgets() {
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
     AffinePageDraggingAreaWidget
   );
-  customElements.define(
-    AFFINE_VIEWPORT_OVERLAY_WIDGET,
-    AffineViewportOverlayWidget
-  );
   customElements.define(
     AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
     AffineEdgelessZoomToolbarWidget

blocksuite/affine/blocks/root/src/widgets/index.ts

@@ -1,3 +1,2 @@
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
-export * from './viewport-overlay/viewport-overlay.js';

blocksuite/affine/blocks/root/src/widgets/viewport-overlay/viewport-overlay.ts

@@ -1,83 +0,0 @@
-import type { RootBlockModel } from '@blocksuite/affine-model';
-import { WidgetComponent } from '@blocksuite/std';
-import { css, html } from 'lit';
-import { state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-export const AFFINE_VIEWPORT_OVERLAY_WIDGET = 'affine-viewport-overlay-widget';
-
-export class AffineViewportOverlayWidget extends WidgetComponent<RootBlockModel> {
-  static override styles = css`
-    .affine-viewport-overlay-widget {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: transparent;
-      pointer-events: none;
-      z-index: calc(var(--affine-z-index-popover) - 1);
-    }
-
-    .affine-viewport-overlay-widget.lock {
-      pointer-events: auto;
-    }
-  `;
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.handleEvent(
-      'dragStart',
-      () => {
-        return this._lockViewport;
-      },
-      { global: true }
-    );
-    this.handleEvent(
-      'pointerDown',
-      () => {
-        return this._lockViewport;
-      },
-      { global: true }
-    );
-    this.handleEvent(
-      'click',
-      () => {
-        return this._lockViewport;
-      },
-      { global: true }
-    );
-  }
-
-  lock() {
-    this._lockViewport = true;
-  }
-
-  override render() {
-    const classes = classMap({
-      'affine-viewport-overlay-widget': true,
-      lock: this._lockViewport,
-    });
-    const style = styleMap({
-      width: `${this._lockViewport ? '100vw' : '0'}`,
-      height: `${this._lockViewport ? '100%' : '0'}`,
-    });
-    return html` <div class=${classes} style=${style}></div> `;
-  }
-
-  toggleLock() {
-    this._lockViewport = !this._lockViewport;
-  }
-
-  unlock() {
-    this._lockViewport = false;
-  }
-
-  @state()
-  private accessor _lockViewport = false;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [AFFINE_VIEWPORT_OVERLAY_WIDGET]: AffineViewportOverlayWidget;
-  }
-}