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

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

@@ -0,0 +1,18 @@
+import { baseTheme } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const selectStyle = style({
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  width: '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',
+  wordBreak: 'break-all',
+});

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

@@ -1,5 +1,5 @@
 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';
@@ -7,48 +7,26 @@ import type { SelectTag } from '../../core/index.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
+import { selectStyle } from './cell-renderer.css.js';
 import {
   type SelectPropertyData,
   selectPropertyModelConfig,
 } from './define.js';
 
-export class SelectCell extends BaseCellRenderer<string[], SelectPropertyData> {
-  override render() {
-    const value = this.value ? [this.value] : [];
-    return html`
-      <affine-multi-tag-view
-        .value="${value}"
-        .options="${this.property.data$.value.options}"
-      ></affine-multi-tag-view>
-    `;
-  }
-}
-
-export class SelectCellEditing extends BaseCellRenderer<
-  string,
-  SelectPropertyData
-> {
+export class SelectCell 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,
-          mode: 'single',
-          options: this.options$,
-          onOptionsChange: this._onOptionsChange,
-          value: signal(this._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,
+      mode: 'single',
+      options: this.options$,
+      onOptionsChange: this._onOptionsChange,
+      value: this._value$,
+      onChange: v => {
+        this.valueSetImmediate(v[0]);
+      },
+      onComplete: this._editComplete,
+      minWidth: 400,
     });
   };
 
@@ -56,10 +34,6 @@ export class SelectCellEditing extends BaseCellRenderer<
     this.selectCurrentCell(false);
   };
 
-  _onChange = ([id]: string[]) => {
-    this.onChange(id);
-  };
-
   _onOptionsChange = (options: SelectTag[]) => {
     this.property.dataUpdate(data => {
       return {
@@ -73,21 +47,30 @@ export class SelectCellEditing extends BaseCellRenderer<
     return this.property.data$.value.options;
   });
 
-  get _value() {
+  _value$ = computed(() => {
     const value = this.value;
     return value ? [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="${selectStyle}">
+        <affine-multi-tag-view
+          .value="${this._value$.value}"
+          .options="${this.options$.value}"
+        ></affine-multi-tag-view>
+      </div>
     `;
   }
 }
@@ -97,6 +80,5 @@ export const selectPropertyConfig =
     icon: createIcon('SingleSelectIcon'),
     cellRenderer: {
       view: createFromBaseCellRenderer(SelectCell),
-      edit: createFromBaseCellRenderer(SelectCellEditing),
     },
   });