toeverything · graphite-app · Mar 27, 2024 · Mar 27, 2024
diff --git a/packages/blocks/src/_specs/_specs.ts b/packages/blocks/src/_specs/_specs.ts
@@ -40,6 +40,7 @@ import { AFFINE_EDGELESS_COPILOT_WIDGET } from '../root-block/widgets/edgeless-c
 import { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from '../root-block/widgets/edgeless-remote-selection/index.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../root-block/widgets/edgeless-zoom-toolbar/index.js';
 import { AFFINE_FORMAT_BAR_WIDGET } from '../root-block/widgets/format-bar/format-bar.js';
+import { AFFINE_INNER_MODAL_WIDGET } from '../root-block/widgets/inner-modal/inner-modal.js';
 import { AFFINE_LINKED_DOC_WIDGET } from '../root-block/widgets/linked-doc/index.js';
 import { AFFINE_MODAL_WIDGET } from '../root-block/widgets/modal/modal.js';
 import { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from '../root-block/widgets/page-dragging-area/page-dragging-area.js';
@@ -63,6 +64,7 @@ const DocPageSpec: BlockSpec<PageRootBlockWidgetName> = {
       //   AFFINE_BLOCK_HUB_WIDGET
       // )}`,
       [AFFINE_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`,
+      [AFFINE_INNER_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_INNER_MODAL_WIDGET)}`,
       [AFFINE_SLASH_MENU_WIDGET]: literal`${unsafeStatic(
         AFFINE_SLASH_MENU_WIDGET
       )}`,
@@ -95,6 +97,7 @@ const EdgelessPageSpec: BlockSpec<EdgelessRootBlockWidgetName> = {
       //   AFFINE_BLOCK_HUB_WIDGET
       // )}`,
       [AFFINE_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`,
+      [AFFINE_INNER_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_INNER_MODAL_WIDGET)}`,
       [AFFINE_PIE_MENU_WIDGET]: literal`${unsafeStatic(AFFINE_PIE_MENU_WIDGET)}`,
       [AFFINE_SLASH_MENU_WIDGET]: literal`${unsafeStatic(
         AFFINE_SLASH_MENU_WIDGET

diff --git a/packages/blocks/src/database-block/common/base-data-view.ts b/packages/blocks/src/database-block/common/base-data-view.ts
@@ -10,6 +10,7 @@ import { property } from 'lit/decorators.js';
 
 import type { UniComponent } from '../../_common/components/uni-component/uni-component.js';
 import type { DataViewSelection } from '../../_common/utils/index.js';
+import type { DataViewNative } from '../data-view.js';
 import type { InsertToPosition } from '../types.js';
 import type { DataViewExpose, DataViewProps } from './data-view.js';
 import type { DataViewManager } from './data-view-manager.js';
@@ -27,6 +28,8 @@ export abstract class BaseDataView<
   @property({ attribute: false })
   header!: UniComponent<{ viewMethods: DataViewExpose; view: T }>;
 
+  @property({ attribute: false })
+  dataViewEle!: DataViewNative;
   @property({ attribute: false })
   view!: T;
 

diff --git a/packages/blocks/src/database-block/common/data-view.ts b/packages/blocks/src/database-block/common/data-view.ts
@@ -8,6 +8,7 @@ import type { Doc } from '@blocksuite/store';
 
 import type { UniComponent } from '../../_common/components/uni-component/uni-component.js';
 import type { DataViewSelection } from '../../_common/utils/index.js';
+import type { DataViewNative } from '../data-view.js';
 import type { DatabaseBlockModel } from '../database-model.js';
 import type { InsertToPosition } from '../types.js';
 import type { DataViewManager } from './data-view-manager.js';
@@ -20,6 +21,8 @@ export interface DataViewProps<
   T extends DataViewManager = DataViewManager,
   Selection extends DataViewSelection = DataViewSelection,
 > {
+  dataViewEle: DataViewNative;
+
   header?: DataViewHeaderComponentProp<T>;
 
   view: T;

diff --git a/packages/blocks/src/database-block/common/detail/field.ts b/packages/blocks/src/database-block/common/detail/field.ts
@@ -43,6 +43,7 @@ export class RecordField extends WithDisposable(ShadowlessElement) {
       width: 116px;
       border-radius: 4px;
       cursor: pointer;
+      user-select: none;
     }
 
     .field-left:hover {

diff --git a/packages/blocks/src/database-block/common/detail/layout.ts b/packages/blocks/src/database-block/common/detail/layout.ts
@@ -1,12 +1,16 @@
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
-import { autoUpdate, computePosition, size } from '@floating-ui/dom';
+import {
+  autoUpdate,
+  computePosition,
+  type ReferenceElement,
+  size,
+} from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { createModal } from '../../../_common/components/menu/index.js';
 import { CrossIcon } from '../../../_common/icons/index.js';
-import type { RootBlockComponent } from '../../../index.js';
 import type { DataViewManager } from '../data-view-manager.js';
 import { RecordDetail } from './detail.js';
 
@@ -89,18 +93,18 @@ class SideLayoutModal extends ShadowlessElement {
 }
 
 export const popSideDetail = (ops: {
-  rootElement: RootBlockComponent | null;
+  attachTo: HTMLElement;
+  target: ReferenceElement;
   view: DataViewManager;
   rowId: string;
   onClose?: () => void;
 }) => {
-  const rootElement = ops.rootElement;
+  const rootElement = ops.attachTo;
   assertExists(rootElement);
-  const block = findFirstBlockParent(rootElement) ?? rootElement;
   const modal = createModal(rootElement);
-  // fit to the size of the page element
-  const cancel = autoUpdate(block, modal, () => {
-    computePosition(block, modal, {
+  // fit to the size of the body element
+  const cancel = autoUpdate(ops.target, modal, () => {
+    computePosition(ops.target, modal, {
       middleware: [
         size({
           apply: ({ rects }) => {
@@ -132,9 +136,3 @@ export const popSideDetail = (ops: {
   modal.onclick = close;
   modal.append(sideContainer);
 };
-const findFirstBlockParent = (ele: HTMLElement | null) => {
-  while (ele && ele.computedStyleMap().get('display')?.toString() !== 'block') {
-    ele = ele.parentElement;
-  }
-  return ele;
-};
diff --git a/packages/blocks/src/database-block/data-view.ts b/packages/blocks/src/database-block/data-view.ts
@@ -6,6 +6,7 @@ import './kanban/renderer.js';
 import type { BlockStdScope } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { Slot } from '@blocksuite/global/utils';
+import type { ReferenceElement } from '@floating-ui/dom';
 import { css, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -28,6 +29,7 @@ import type {
 import { viewRendererManager } from './common/data-view.js';
 import type { DataViewManager } from './common/data-view-manager.js';
 import type { DataSource } from './common/datasource/base.js';
+import { popSideDetail } from './common/detail/layout.js';
 import type { SingleViewSource, ViewSource } from './common/view-source.js';
 import { DataViewKanbanManager } from './kanban/kanban-view-manager.js';
 import { DataViewTableManager } from './table/table-view-manager.js';
@@ -60,10 +62,14 @@ export type DataViewNativeConfig = {
   setSelection: (selection: DataViewSelection | undefined) => void;
   dataSource: DataSource;
   viewSource: ViewSource;
+  detailPanelConfig?: {
+    target?: () => ReferenceElement;
+  };
   headerComponent: DataViewProps['header'];
   onDrag?: DataViewProps['onDrag'];
   std: BlockStdScope;
 };
+
 @customElement('affine-data-view-native')
 export class DataViewNative extends WithDisposable(ShadowlessElement) {
   static override styles = css`
@@ -79,6 +85,7 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) {
   public get expose() {
     return this._view.value;
   }
+
   override connectedCallback() {
     super.connectedCallback();
     this.disposables.add(
@@ -152,11 +159,26 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) {
     return this.viewMap[id];
   }
 
+  openDetailPanel = (ops: {
+    view: DataViewManager;
+    rowId: string;
+    onClose?: () => void;
+  }) => {
+    popSideDetail({
+      attachTo: this,
+      target: this.config.detailPanelConfig?.target?.() ?? document.body,
+      view: ops.view,
+      rowId: ops.rowId,
+      onClose: ops.onClose,
+    });
+  };
+
   private renderView(viewData?: ViewProps) {
     if (!viewData) {
       return;
     }
     const props: DataViewProps = {
+      dataViewEle: this,
       view: viewData.view,
       header: this.config.headerComponent,
       selectionUpdated: viewData.selectionUpdated,

diff --git a/packages/blocks/src/database-block/database-block.ts b/packages/blocks/src/database-block/database-block.ts
@@ -6,8 +6,7 @@ import './common/header/tools/tools.js';
 import './common/filter/filter-bar.js';
 import './data-view.js';
 
-import { PathFinder } from '@blocksuite/block-std';
-import { BlockElement, RangeManager } from '@blocksuite/block-std';
+import { BlockElement, PathFinder, RangeManager } from '@blocksuite/block-std';
 import { Slot } from '@blocksuite/global/utils';
 import { Slice } from '@blocksuite/store';
 import { css, nothing, unsafeCSS } from 'lit';
@@ -32,6 +31,8 @@ import {
   captureEventTarget,
   getDropResult,
 } from '../root-block/widgets/drag-handle/utils.js';
+import type { AffineInnerModalWidget } from '../root-block/widgets/inner-modal/inner-modal.js';
+import { AFFINE_INNER_MODAL_WIDGET } from '../root-block/widgets/inner-modal/inner-modal.js';
 import { dataViewCommonStyle } from './common/css-variable.js';
 import type { DataViewProps, DataViewTypes } from './common/data-view.js';
 import { type DataViewExpose } from './common/data-view.js';
@@ -67,18 +68,21 @@ export class DatabaseBlockComponent extends BlockElement<
       background-color: var(--affine-hover-color);
       border-radius: 4px;
     }
+
     .database-ops {
       margin-top: 4px;
       padding: 2px;
       border-radius: 4px;
       display: flex;
       cursor: pointer;
     }
+
     .database-ops svg {
       width: 16px;
       height: 16px;
       color: var(--affine-icon-color);
     }
+
     .database-ops:hover {
       background-color: var(--affine-hover-color);
     }
@@ -169,11 +173,12 @@ export class DatabaseBlockComponent extends BlockElement<
       },
     });
   };
+
   private renderDatabaseOps() {
     if (this.doc.readonly) {
       return nothing;
     }
-    return html`<div class="database-ops" @click="${this._clickDatabaseOps}">
+    return html` <div class="database-ops" @click="${this._clickDatabaseOps}">
       ${MoreHorizontalIcon}
     </div>`;
   }
@@ -292,7 +297,7 @@ export class DatabaseBlockComponent extends BlockElement<
     ></affine-database-title>`;
   };
   private renderReference = () => {
-    return html`<div></div>`;
+    return html` <div></div>`;
   };
 
   headerComponent = defineUniComponent(
@@ -359,6 +364,12 @@ export class DatabaseBlockComponent extends BlockElement<
     };
   };
 
+  get innerModalWidget() {
+    return this.rootElement.widgetElements[
+      AFFINE_INNER_MODAL_WIDGET
+    ] as AffineInnerModalWidget;
+  }
+
   override renderBlock() {
     const config: DataViewNativeConfig = {
       bindHotkey: this._bindHotkey,
@@ -371,6 +382,9 @@ export class DatabaseBlockComponent extends BlockElement<
       headerComponent: this.headerComponent,
       onDrag: this.onDrag,
       std: this.std,
+      detailPanelConfig: {
+        target: () => this.innerModalWidget.target,
+      },
     };
     return html`
       <div contenteditable="false" style="position: relative">
@@ -380,7 +394,7 @@ export class DatabaseBlockComponent extends BlockElement<
         ></affine-data-view-native>
 
         <affine-block-selection
-          .block=${this}
+          .block="${this}"
           style="z-index: 1"
         ></affine-block-selection>
       </div>

diff --git a/packages/blocks/src/database-block/kanban/card.ts b/packages/blocks/src/database-block/kanban/card.ts
@@ -9,8 +9,7 @@ import { html } from 'lit/static-html.js';
 
 import { positionToVRect } from '../../_common/components/menu/index.js';
 import { MoreHorizontalIcon, NewEditIcon } from '../../_common/icons/index.js';
-import { getRootByElement } from '../../_common/utils/query.js';
-import { popSideDetail } from '../common/detail/layout.js';
+import type { DataViewNative } from '../data-view.js';
 import type {
   DataViewKanbanColumnManager,
   DataViewKanbanManager,
@@ -122,6 +121,8 @@ const styles = css`
 export class KanbanCard extends WithDisposable(ShadowlessElement) {
   static override styles = styles;
 
+  @property({ attribute: false })
+  dataViewEle!: DataViewNative;
   @property({ attribute: false })
   view!: DataViewKanbanManager;
   @property({ attribute: false })
@@ -157,9 +158,7 @@ export class KanbanCard extends WithDisposable(ShadowlessElement) {
       if (selection) {
         selection.selection = undefined;
       }
-      const rootElement = getRootByElement(this);
-      popSideDetail({
-        rootElement,
+      this.dataViewEle.openDetailPanel({
         view: this.view,
         rowId: this.cardId,
         onClose: () => {
@@ -266,9 +265,8 @@ export class KanbanCard extends WithDisposable(ShadowlessElement) {
   private clickEdit = (e: MouseEvent) => {
     e.stopPropagation();
     const selection = this.getSelection();
-    const rootElement = getRootByElement(this);
     if (selection) {
-      openDetail(rootElement, this.cardId, selection);
+      openDetail(this.dataViewEle, this.cardId, selection);
     }
   };
 
@@ -290,8 +288,7 @@ export class KanbanCard extends WithDisposable(ShadowlessElement) {
           },
         ],
       };
-      const rootElement = getRootByElement(this);
-      popCardMenu(rootElement, ele, this.cardId, selection);
+      popCardMenu(this.dataViewEle, ele, this.cardId, selection);
     }
   };
   private contextMenu = (e: MouseEvent) => {
@@ -308,9 +305,8 @@ export class KanbanCard extends WithDisposable(ShadowlessElement) {
           },
         ],
       };
-      const rootElement = getRootByElement(this);
       popCardMenu(
-        rootElement,
+        this.dataViewEle,
         positionToVRect(e.x, e.y),
         this.cardId,
         selection

diff --git a/packages/blocks/src/database-block/kanban/group.ts b/packages/blocks/src/database-block/kanban/group.ts
@@ -10,6 +10,7 @@ import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js'
 import { AddCursorIcon } from '../../_common/icons/index.js';
 import { GroupTitle } from '../common/group-by/group-title.js';
 import type { GroupData } from '../common/group-by/helper.js';
+import type { DataViewNative } from '../data-view.js';
 import type { DataViewKanbanManager } from './kanban-view-manager.js';
 
 const styles = css`
@@ -96,6 +97,8 @@ const styles = css`
 export class KanbanGroup extends WithDisposable(ShadowlessElement) {
   static override styles = styles;
 
+  @property({ attribute: false })
+  dataViewEle!: DataViewNative;
   @property({ attribute: false })
   view!: DataViewKanbanManager;
   @property({ attribute: false })
@@ -171,6 +174,7 @@ export class KanbanGroup extends WithDisposable(ShadowlessElement) {
               <affine-data-view-kanban-card
                 data-card-id="${id}"
                 .groupKey="${this.group.key}"
+                .dataViewEle="${this.dataViewEle}"
                 .view="${this.view}"
                 .cardId="${id}"
               ></affine-data-view-kanban-card>

diff --git a/packages/blocks/src/database-block/kanban/kanban-view.ts b/packages/blocks/src/database-block/kanban/kanban-view.ts
@@ -210,6 +210,7 @@ export class DataViewKanban extends BaseDataView<
           group => {
             return html` <affine-data-view-kanban-group
               data-key="${group.key}"
+              .dataViewEle="${this.dataViewEle}"
               .view="${this.view}"
               .group="${group}"
             ></affine-data-view-kanban-group>`;