refactor(editor): remove edit view of database block properties (#10748)

blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.css.ts

@@ -0,0 +1,17 @@
+import { baseTheme } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const multiSelectStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  padding: '0',
+  border: 'none',
+  fontFamily: baseTheme.fontSansFamily,
+  fontSize: 'var(--data-view-cell-text-size)',
+  lineHeight: 'var(--data-view-cell-text-line-height)',
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: '400',
+  backgroundColor: 'transparent',
+});

blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts

@@ -1,53 +1,33 @@
 import { popupTargetFromElement } from '@blocksuite/affine-components/context-menu';
-import { computed, signal } from '@preact/signals-core';
+import { computed } from '@preact/signals-core';
 import { html } from 'lit/static-html.js';
 
 import { popTagSelect } from '../../core/component/tags/multi-tag-select.js';
 import type { SelectTag } from '../../core/index.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
+import { stopPropagation } from '../../core/utils/event.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
 import type { SelectPropertyData } from '../select/define.js';
+import { multiSelectStyle } from './cell-renderer.css.js';
 import { multiSelectPropertyModelConfig } from './define.js';
 
 export class MultiSelectCell extends BaseCellRenderer<
   string[],
   SelectPropertyData
 > {
-  override render() {
-    return html`
-      <affine-multi-tag-view
-        .value="${Array.isArray(this.value) ? this.value : []}"
-        .options="${this.property.data$.value.options}"
-      ></affine-multi-tag-view>
-    `;
-  }
-}
-
-export class MultiSelectCellEditing extends BaseCellRenderer<
-  string[],
-  SelectPropertyData
-> {
+  closePopup?: () => void;
   private readonly popTagSelect = () => {
-    const value = signal(this._value);
-    this._disposables.add({
-      dispose: popTagSelect(
-        popupTargetFromElement(
-          this.querySelector('affine-multi-tag-view') ?? this
-        ),
-        {
-          name: this.cell.property.name$.value,
-          options: this.options$,
-          onOptionsChange: this._onOptionsChange,
-          value: value,
-          onChange: v => {
-            this._onChange(v);
-            value.value = v;
-          },
-          onComplete: this._editComplete,
-          minWidth: 400,
-        }
-      ),
+    this.closePopup = popTagSelect(popupTargetFromElement(this), {
+      name: this.cell.property.name$.value,
+      options: this.options$,
+      onOptionsChange: this._onOptionsChange,
+      value: this._value$,
+      onChange: v => {
+        this.valueSetImmediate(v);
+      },
+      onComplete: this._editComplete,
+      minWidth: 400,
     });
   };
 
@@ -55,10 +35,6 @@ export class MultiSelectCellEditing extends BaseCellRenderer<
     this.selectCurrentCell(false);
   };
 
-  _onChange = (ids: string[]) => {
-    this.onChange(ids);
-  };
-
   _onOptionsChange = (options: SelectTag[]) => {
     this.property.dataUpdate(data => {
       return {
@@ -71,21 +47,32 @@ export class MultiSelectCellEditing extends BaseCellRenderer<
   options$ = computed(() => {
     return this.property.data$.value.options;
   });
-
-  get _value() {
+  _value$ = computed(() => {
     return this.value ?? [];
+  });
+
+  override afterEnterEditingMode() {
+    if (!this.closePopup) {
+      this.popTagSelect();
+    }
   }
 
-  override firstUpdated() {
-    this.popTagSelect();
+  override beforeExitEditingMode() {
+    this.closePopup?.();
+    this.closePopup = undefined;
   }
 
   override render() {
     return html`
-      <affine-multi-tag-view
-        .value="${this._value}"
-        .options="${this.options$.value}"
-      ></affine-multi-tag-view>
+      <div
+        class="${multiSelectStyle}"
+        @pointerdown="${this.isEditing$.value ? stopPropagation : undefined}"
+      >
+        <affine-multi-tag-view
+          .value="${this._value$.value}"
+          .options="${this.options$.value}"
+        ></affine-multi-tag-view>
+      </div>
     `;
   }
 }
@@ -95,6 +82,5 @@ export const multiSelectPropertyConfig =
     icon: createIcon('MultiSelectIcon'),
     cellRenderer: {
       view: createFromBaseCellRenderer(MultiSelectCell),
-      edit: createFromBaseCellRenderer(MultiSelectCellEditing),
     },
   });