refactor(editor): remove unused modal widget (#11713)

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

@@ -45,7 +45,7 @@ import { RootBlockAdapterExtensions } from '../adapters/extension';
 import { clipboardConfigs } from '../clipboard';
 import { builtinToolbarConfig } from '../configs/toolbar';
 import { fallbackKeymap } from '../keyboard/keymap';
-import { modalWidget, viewportOverlayWidget } from './widgets';
+import { viewportOverlayWidget } from './widgets';
 
 /**
  * Why do we add these extensions into CommonSpecs?
@@ -84,7 +84,6 @@ export const CommonSpecs: ExtensionType[] = [
   ...clipboardConfigs,
   ...EdgelessElementViews,
   ...EdgelessElementRendererExtension,
-  modalWidget,
   SlashMenuExtension,
   linkedDocWidget,
   dragHandleWidget,

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

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

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

@@ -29,7 +29,6 @@ import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import {
-  AffineModalWidget,
   EdgelessRootBlockComponent,
   EdgelessRootPreviewBlockComponent,
   PageRootBlockComponent,
@@ -45,8 +44,6 @@ import {
 } from './widgets/edgeless-zoom-toolbar/index.js';
 import { ZoomBarToggleButton } from './widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
 import { EdgelessZoomToolbar } from './widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
-import { AffineCustomModal } from './widgets/modal/custom-modal.js';
-import { AFFINE_MODAL_WIDGET } from './widgets/modal/modal.js';
 import {
   AFFINE_PAGE_DRAGGING_AREA_WIDGET,
   AffinePageDraggingAreaWidget,
@@ -92,7 +89,6 @@ function registerGfxEffects() {
 }
 
 function registerWidgets() {
-  customElements.define(AFFINE_MODAL_WIDGET, AffineModalWidget);
   customElements.define(
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
     AffinePageDraggingAreaWidget
@@ -123,9 +119,6 @@ function registerEdgelessToolbarComponents() {
 }
 
 function registerMiscComponents() {
-  // Modal and menu components
-  customElements.define('affine-custom-modal', AffineCustomModal);
-
   // Toolbar and UI components
   customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
   customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);

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

@@ -1,5 +1,4 @@
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
-export { AffineModalWidget } from './modal/modal.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
 export * from './viewport-overlay/viewport-overlay.js';
 export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';

blocksuite/affine/blocks/root/src/widgets/modal/custom-modal.ts

@@ -1,144 +0,0 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { ref } from 'lit/directives/ref.js';
-import { repeat } from 'lit/directives/repeat.js';
-
-type ModalButton = {
-  text: string;
-  type?: 'primary';
-  onClick: () => Promise<void> | void;
-};
-
-type ModalOptions = {
-  footer: null | ModalButton[];
-};
-
-export class AffineCustomModal extends LitElement {
-  static override styles = css`
-    :host {
-      z-index: calc(var(--affine-z-index-modal) + 3);
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-    }
-
-    .modal-background {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      align-items: center;
-      background-color: var(--affine-background-modal-color);
-      justify-content: center;
-      display: flex;
-    }
-
-    .modal-window {
-      width: 70%;
-      min-width: 500px;
-      height: 80%;
-      overflow-y: scroll;
-      background-color: var(--affine-background-overlay-panel-color);
-      border-radius: 12px;
-      box-shadow: var(--affine-shadow-3);
-      position: relative;
-    }
-
-    .modal-main {
-      height: 100%;
-    }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      gap: 20px;
-      padding: 24px;
-      position: absolute;
-      box-sizing: border-box;
-      bottom: 0;
-      right: 0;
-    }
-
-    .modal-footer .button {
-      align-items: center;
-      background: var(--affine-white);
-      border: 1px solid;
-      border-color: var(--affine-border-color);
-      border-radius: 8px;
-      color: var(--affine-text-primary-color);
-      cursor: pointer;
-      display: inline-flex;
-      font-size: var(--affine-font-sm);
-      font-weight: 500;
-      justify-content: center;
-      outline: 0;
-      padding: 12px 18px;
-      touch-action: manipulation;
-      transition: all 0.3s;
-      user-select: none;
-    }
-
-    .modal-footer .primary {
-      background: var(--affine-primary-color);
-      border-color: var(--affine-black-10);
-      box-shadow: var(--affine-button-inner-shadow);
-      color: var(--affine-pure-white);
-    }
-  `;
-
-  onOpen!: (div: HTMLDivElement) => void;
-
-  options!: ModalOptions;
-
-  close() {
-    this.remove();
-  }
-
-  modalRef(modal: Element | undefined) {
-    if (modal) this.onOpen?.(modal as HTMLDivElement);
-  }
-
-  override render() {
-    const { options } = this;
-
-    return html`<div class="modal-background">
-      <div class="modal-window">
-        <div class="modal-main" ${ref(this.modalRef)}></div>
-        <div class="modal-footer">
-          ${options.footer
-            ? repeat(
-                options.footer,
-                button => button.text,
-                button => html`
-                  <button
-                    class="button ${button.type ?? ''}"
-                    @click=${button.onClick}
-                  >
-                    ${button.text}
-                  </button>
-                `
-              )
-            : nothing}
-        </div>
-      </div>
-    </div>`;
-  }
-}
-
-type CreateModalOption = ModalOptions & {
-  entry: (div: HTMLDivElement) => void;
-};
-
-export function createCustomModal(
-  options: CreateModalOption,
-  container: HTMLElement = document.body
-) {
-  const modal = new AffineCustomModal();
-
-  modal.onOpen = options.entry;
-  modal.options = options;
-
-  container.append(modal);
-
-  return modal;
-}

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

@@ -1,22 +0,0 @@
-import { WidgetComponent } from '@blocksuite/std';
-import { nothing } from 'lit';
-
-import { createCustomModal } from './custom-modal.js';
-
-export const AFFINE_MODAL_WIDGET = 'affine-modal-widget';
-
-export class AffineModalWidget extends WidgetComponent {
-  open(options: Parameters<typeof createCustomModal>[0]) {
-    return createCustomModal(options, this.ownerDocument.body);
-  }
-
-  override render() {
-    return nothing;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [AFFINE_MODAL_WIDGET]: AffineModalWidget;
-  }
-}