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

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

@@ -0,0 +1,37 @@
+import { baseTheme } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const numberStyle = style({
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  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',
+});
+
+export const numberInputStyle = style({
+  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',
+  textAlign: 'right',
+  ':focus': {
+    outline: 'none',
+  },
+});

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

@@ -1,12 +1,12 @@
 import { IS_MAC } from '@blocksuite/global/env';
-import { baseTheme } from '@toeverything/theme';
-import { css, html, unsafeCSS } from 'lit';
+import { html } from 'lit';
 import { query } from 'lit/decorators.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 { numberInputStyle, numberStyle } from './cell-renderer.css.js';
 import { numberPropertyModelConfig } from './define.js';
 import type { NumberPropertyDataType } from './types.js';
 import {
@@ -19,93 +19,23 @@ export class NumberCell extends BaseCellRenderer<
   number,
   NumberPropertyDataType
 > {
-  static override styles = css`
-    affine-database-number-cell {
-      display: block;
-      width: 100%;
-    }
+  @query('input')
+  private accessor _inputEle!: HTMLInputElement;
 
-    .affine-database-number {
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      width: 100%;
-      padding: 0;
-      border: none;
-      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-      font-size: var(--data-view-cell-text-size);
-      line-height: var(--data-view-cell-text-line-height);
-      color: var(--affine-text-primary-color);
-      font-weight: 400;
-      background-color: transparent;
-      word-break: break-all;
-    }
-  `;
-
-  private _getFormattedString() {
+  private _getFormattedString(value: number | undefined = this.value) {
     const enableNewFormatting =
       this.view.featureFlags$.value.enable_number_formatting;
     const decimals = this.property.data$.value.decimal ?? 0;
     const formatMode = (this.property.data$.value.format ??
       'number') as NumberFormat;
 
-    return this.value != undefined
+    return value != undefined
       ? enableNewFormatting
-        ? formatNumber(this.value, formatMode, decimals)
-        : this.value.toString()
+        ? formatNumber(value, formatMode, decimals)
+        : value.toString()
       : '';
   }
 
-  override render() {
-    return html` <div class="affine-database-number number">
-      ${this._getFormattedString()}
-    </div>`;
-  }
-}
-
-export class NumberCellEditing extends BaseCellRenderer<
-  number,
-  NumberPropertyDataType
-> {
-  static override styles = css`
-    affine-database-number-cell-editing {
-      display: block;
-      width: 100%;
-      cursor: text;
-    }
-
-    .affine-database-number {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: 0;
-      border: none;
-      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-      font-size: var(--data-view-cell-text-size);
-      line-height: var(--data-view-cell-text-line-height);
-      color: var(--affine-text-primary-color);
-      font-weight: 400;
-      background-color: transparent;
-      text-align: right;
-    }
-
-    .affine-database-number:focus {
-      outline: none;
-    }
-  `;
-
-  private readonly _getFormattedString = (value: number) => {
-    const enableNewFormatting =
-      this.view.featureFlags$.value.enable_number_formatting;
-    const decimals = this.property.data$.value.decimal ?? 0;
-    const formatMode = (this.property.data$.value.format ??
-      'number') as NumberFormat;
-    return enableNewFormatting
-      ? formatNumber(value, formatMode, decimals)
-      : value.toString();
-  };
-
   private readonly _keydown = (e: KeyboardEvent) => {
     const ctrlKey = IS_MAC ? e.metaKey : e.ctrlKey;
 
@@ -121,9 +51,9 @@ export class NumberCellEditing extends BaseCellRenderer<
     }
   };
 
-  private readonly _setValue = (str: string = this._inputEle.value) => {
+  private readonly _setValue = (str: string = this._inputEle?.value) => {
     if (!str) {
-      this.onChange(undefined);
+      this.valueSetNextTick(undefined);
       return;
     }
 
@@ -131,17 +61,23 @@ export class NumberCellEditing extends BaseCellRenderer<
       this.view.featureFlags$.value.enable_number_formatting;
     const value = enableNewFormatting ? parseNumber(str) : parseFloat(str);
     if (isNaN(value)) {
-      this._inputEle.value = this.value
-        ? this._getFormattedString(this.value)
-        : '';
+      if (this._inputEle) {
+        this._inputEle.value = this.value
+          ? this._getFormattedString(this.value)
+          : '';
+      }
       return;
     }
 
-    this._inputEle.value = this._getFormattedString(value);
-    this.onChange(value);
+    if (this._inputEle) {
+      this._inputEle.value = this._getFormattedString(value);
+    }
+    this.valueSetNextTick(value);
   };
 
   focusEnd = () => {
+    if (!this._inputEle) return;
+
     const end = this._inputEle.value.length;
     this._inputEle.focus();
     this._inputEle.setSelectionRange(end, end);
@@ -152,38 +88,39 @@ export class NumberCellEditing extends BaseCellRenderer<
   }
 
   _focus() {
-    if (!this.isEditing) {
+    if (!this.isEditing$.value) {
       this.selectCurrentCell(true);
     }
   }
 
-  override firstUpdated() {
-    requestAnimationFrame(() => {
-      this.focusEnd();
-    });
+  override afterEnterEditingMode() {
+    this.focusEnd();
   }
 
-  override onExitEditMode() {
+  override beforeExitEditingMode() {
     this._setValue();
   }
 
   override render() {
-    const formatted = this.value ? this._getFormattedString(this.value) : '';
+    if (this.isEditing$.value) {
+      const formatted = this.value ? this._getFormattedString(this.value) : '';
 
-    return html`<input
-      type="text"
-      autocomplete="off"
-      .value="${formatted}"
-      @keydown="${this._keydown}"
-      @blur="${this._blur}"
-      @focus="${this._focus}"
-      class="affine-database-number number"
-      @pointerdown="${stopPropagation}"
-    />`;
+      return html`<input
+        type="text"
+        autocomplete="off"
+        .value="${formatted}"
+        @keydown="${this._keydown}"
+        @blur="${this._blur}"
+        @focus="${this._focus}"
+        class="${numberInputStyle} number"
+        @pointerdown="${stopPropagation}"
+      />`;
+    } else {
+      return html` <div class="${numberStyle} number">
+        ${this._getFormattedString()}
+      </div>`;
+    }
   }
-
-  @query('input')
-  private accessor _inputEle!: HTMLInputElement;
 }
 
 export const numberPropertyConfig =
@@ -191,6 +128,5 @@ export const numberPropertyConfig =
     icon: createIcon('NumberIcon'),
     cellRenderer: {
       view: createFromBaseCellRenderer(NumberCell),
-      edit: createFromBaseCellRenderer(NumberCellEditing),
     },
   });