Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-21 12:02:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zzj3720
2025-03-10 16:24:44 +00:00
parent 4a45cc9ba4
commit db707dff7f
49 changed files with 1387 additions and 1782 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/data-view/src/property-presets/text/cell-renderer.css.ts
+42
View File
@@ -0,0 +1,42 @@
import { baseTheme } from '@toeverything/theme';
import { style } from '@vanilla-extract/css';
export const textStyle = style({
display: 'flex',
alignItems: 'center',
height: '100%',
width: '100%',
padding: '0',
border: 'none',
fontFamily: baseTheme.fontSansFamily,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
color: 'var(--affine-text-primary-color)',
fontWeight: '400',
backgroundColor: 'transparent',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});
export const textInputStyle = style({
display: 'flex',
alignItems: 'center',
height: '100%',
width: '100%',
padding: '0',
border: 'none',
fontFamily: baseTheme.fontSansFamily,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
color: 'var(--affine-text-primary-color)',
fontWeight: '400',
backgroundColor: 'transparent',
cursor: 'text',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
':focus': {
outline: 'none',
},
});
blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts
+22 -77
View File
@@ -1,74 +1,15 @@
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 { createIcon } from '../../core/utils/uni-icon.js';
import { textInputStyle, textStyle } from './cell-renderer.css.js';
import { textPropertyModelConfig } from './define.js';
export class TextCell extends BaseCellRenderer<string> {
static override styles = css`
affine-database-text-cell {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.affine-database-text {
display: flex;
align-items: center;
height: 100%;
width: 100%;
padding: 0;
border: none;
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
font-size: var(--affine-font-base);
line-height: var(--affine-line-height);
color: var(--affine-text-primary-color);
font-weight: 400;
background-color: transparent;
}
`;
override render() {
return html` <div class="affine-database-text">${this.value ?? ''}</div>`;
}
}
export class TextCellEditing extends BaseCellRenderer<string> {
static override styles = css`
affine-database-text-cell-editing {
display: block;
width: 100%;
height: 100%;
cursor: text;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.affine-database-text {
display: flex;
align-items: center;
height: 100%;
width: 100%;
padding: 0;
border: none;
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
font-size: var(--affine-font-base);
line-height: var(--affine-line-height);
color: var(--affine-text-primary-color);
font-weight: 400;
background-color: transparent;
}
.affine-database-text:focus {
outline: none;
}
`;
@query('input')
private accessor _inputEle!: HTMLInputElement;
private readonly _keydown = (e: KeyboardEvent) => {
if (e.key === 'Enter' && !e.isComposing) {
@@ -79,35 +20,40 @@ export class TextCellEditing extends BaseCellRenderer<string> {
}
};
private readonly _setValue = (str: string = this._inputEle.value) => {
this._inputEle.value = `${this.value ?? ''}`;
this.onChange(str);
private readonly _setValue = (str: string = this._inputEle?.value) => {
if (this._inputEle) {
this._inputEle.value = `${this.value ?? ''}`;
}
this.valueSetNextTick(str);
};
focusEnd = () => {
if (!this._inputEle) return;
const end = this._inputEle.value.length;
this._inputEle.focus();
this._inputEle.setSelectionRange(end, end);
};
override firstUpdated() {
override afterEnterEditingMode() {
this.focusEnd();
}
override onExitEditMode() {
override beforeExitEditingMode() {
this._setValue();
}
override render() {
return html`<input
.value="${this.value ?? ''}"
@keydown="${this._keydown}"
class="affine-database-text"
/>`;
if (this.isEditing$.value) {
return html`<input
.value="${this.value ?? ''}"
@keydown="${this._keydown}"
class="${textInputStyle}"
/>`;
} else {
return html`<div class="${textStyle}">${this.value ?? ''}</div>`;
}
}
@query('input')
private accessor _inputEle!: HTMLInputElement;
}
export const textPropertyConfig = textPropertyModelConfig.createPropertyMeta({
@@ -115,6 +61,5 @@ export const textPropertyConfig = textPropertyModelConfig.createPropertyMeta({
cellRenderer: {
view: createFromBaseCellRenderer(TextCell),
edit: createFromBaseCellRenderer(TextCellEditing),
},
});