refactor(editor): add schema for value of database block properties (#10749)

This commit is contained in:
zzj3720
2025-03-11 02:12:40 +00:00
parent db707dff7f
commit 77e4b9aa8e
17 changed files with 198 additions and 172 deletions
@@ -36,7 +36,7 @@ todoMeta.addProperty({
metaConfig: propertyPresets.checkboxPropertyConfig,
get: block => block.checked,
set: (block, value) => {
block.checked = value;
block.checked = value ?? false;
},
updated: (block, callback) => {
return block.propsUpdated.on(({ key }) => {
@@ -10,7 +10,9 @@ export const queryBlockColumns = [
propertyPresets.multiSelectPropertyConfig,
propertyPresets.checkboxPropertyConfig,
];
export const queryBlockHiddenColumns = [richTextColumnConfig];
export const queryBlockHiddenColumns: PropertyMetaConfig<string, any, any>[] = [
richTextColumnConfig,
];
const queryBlockAllColumns = [...queryBlockColumns, ...queryBlockHiddenColumns];
export const queryBlockAllColumnMap = Object.fromEntries(
queryBlockAllColumns.map(v => [v.type, v as PropertyMetaConfig])
@@ -8,6 +8,5 @@ export * from './detail-panel/block-renderer';
export * from './detail-panel/note-renderer';
export * from './properties';
export * from './properties/rich-text/cell-renderer';
export * from './properties/utils';
export * from './selection.js';
export * from './utils/block-utils';
@@ -1,8 +1,9 @@
import { propertyType, t } from '@blocksuite/data-view';
import zod from 'zod';
export const linkColumnType = propertyType('link');
export const linkPropertyModelConfig = linkColumnType.modelConfig<string>({
export const linkPropertyModelConfig = linkColumnType.modelConfig({
name: 'Link',
valueSchema: zod.string().optional(),
type: () => t.string.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => value?.toString() ?? '',
@@ -2,56 +2,68 @@ import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
import { propertyType, t } from '@blocksuite/data-view';
import type { DeltaInsert } from '@blocksuite/inline';
import { Text } from '@blocksuite/store';
import * as Y from 'yjs';
import zod from 'zod';
import { HostContextKey } from '../../context/host-context.js';
import { isLinkedDoc } from '../../utils/title-doc.js';
import { type RichTextCellType, toYText } from '../utils.js';
export const richTextColumnType = propertyType('rich-text');
export type RichTextCellType = Text | Text['yText'];
export const toYText = (text?: RichTextCellType): undefined | Text['yText'] => {
if (text instanceof Text) {
return text.yText;
}
return text;
};
export const richTextPropertyModelConfig =
richTextColumnType.modelConfig<RichTextCellType>({
name: 'Text',
type: () => t.richText.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => value?.toString() ?? '',
cellFromString: ({ value }) => {
return {
value: new Text(value),
};
},
cellToJson: ({ value, dataSource }) => {
if (!value) return null;
const host = dataSource.contextGet(HostContextKey);
if (host) {
const collection = host.std.workspace;
const yText = toYText(value);
const deltas = yText.toDelta();
const text = deltas
.map((delta: DeltaInsert<AffineTextAttributes>) => {
if (isLinkedDoc(delta)) {
const linkedDocId = delta.attributes?.reference?.pageId as string;
return collection.getDoc(linkedDocId)?.meta?.title;
}
return delta.insert;
})
.join('');
return text;
}
return value?.toString() ?? null;
},
cellFromJson: ({ value }) =>
typeof value !== 'string' ? undefined : new Text(value),
onUpdate: ({ value, callback }) => {
export const richTextPropertyModelConfig = richTextColumnType.modelConfig({
name: 'Text',
valueSchema: zod
.custom<RichTextCellType>(
data => data instanceof Text || data instanceof Y.Text
)
.optional(),
type: () => t.richText.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => value?.toString() ?? '',
cellFromString: ({ value }) => {
return {
value: new Text(value),
};
},
cellToJson: ({ value, dataSource }) => {
if (!value) return null;
const host = dataSource.contextGet(HostContextKey);
if (host) {
const collection = host.std.workspace;
const yText = toYText(value);
yText.observe(callback);
callback();
return {
dispose: () => {
yText.unobserve(callback);
},
};
},
isEmpty: ({ value }) => value == null || value.length === 0,
values: ({ value }) => (value?.toString() ? [value.toString()] : []),
});
const deltas = yText?.toDelta();
const text = deltas
.map((delta: DeltaInsert<AffineTextAttributes>) => {
if (isLinkedDoc(delta)) {
const linkedDocId = delta.attributes?.reference?.pageId as string;
return collection.getDoc(linkedDocId)?.meta?.title;
}
return delta.insert;
})
.join('');
return text;
}
return value?.toString() ?? null;
},
cellFromJson: ({ value }) =>
typeof value !== 'string' ? undefined : new Text(value),
onUpdate: ({ value, callback }) => {
const yText = toYText(value);
yText?.observe(callback);
callback();
return {
dispose: () => {
yText?.unobserve(callback);
},
};
},
isEmpty: ({ value }) => value == null || value.length === 0,
values: ({ value }) => (value?.toString() ? [value.toString()] : []),
});
@@ -1,13 +1,15 @@
import { propertyType, t } from '@blocksuite/data-view';
import { Text } from '@blocksuite/store';
import zod from 'zod';
import { HostContextKey } from '../../context/host-context.js';
import { isLinkedDoc } from '../../utils/title-doc.js';
export const titleColumnType = propertyType('title');
export const titlePropertyModelConfig = titleColumnType.modelConfig<Text>({
export const titlePropertyModelConfig = titleColumnType.modelConfig({
name: 'Title',
valueSchema: zod.custom<Text>(data => data instanceof Text).optional(),
fixed: {
defaultData: {},
defaultShow: true,
@@ -42,22 +44,22 @@ export const titlePropertyModelConfig = titleColumnType.modelConfig<Text>({
cellFromJson: ({ value }) =>
typeof value !== 'string' ? undefined : new Text(value),
onUpdate: ({ value, callback }) => {
value.yText.observe(callback);
value?.yText.observe(callback);
callback();
return {
dispose: () => {
value.yText.unobserve(callback);
value?.yText.unobserve(callback);
},
};
},
valueUpdate: ({ value, newValue }) => {
const v = newValue as unknown;
if (typeof v === 'string') {
value.replace(0, value.length, v);
value?.replace(0, value.length, v);
return value;
}
if (v == null) {
value.replace(0, value.length, '');
value?.replace(0, value.length, '');
return value;
}
return newValue;
@@ -1,9 +0,0 @@
import { Text } from '@blocksuite/store';
export type RichTextCellType = Text | Text['yText'];
export const toYText = (text: RichTextCellType): Text['yText'] => {
if (text instanceof Text) {
return text.yText;
}
return text;
};
@@ -197,7 +197,7 @@ export abstract class DataSourceBase implements DataSource {
return computed(() => this.propertyReadonlyGet(propertyId));
}
abstract propertyTypeGet(propertyId: string): string;
abstract propertyTypeGet(propertyId: string): string | undefined;
propertyTypeGet$(propertyId: string): ReadonlySignal<string | undefined> {
return computed(() => this.propertyTypeGet(propertyId));
@@ -1,4 +1,5 @@
import type { Disposable } from '@blocksuite/global/slot';
import type { ZodType } from 'zod';
import type { DataSource } from '../data-source/base.js';
import type { TypeInstance } from '../logical/type.js';
@@ -15,6 +16,7 @@ export type PropertyConfig<
Value = unknown,
> = {
name: string;
valueSchema: ZodType<Value>;
hide?: boolean;
fixed?: {
defaultData: Data;
@@ -1,6 +1,7 @@
import zod from 'zod';
import { t } from '../../core/logical/type-presets.js';
import { propertyType } from '../../core/property/property-config.js';
export const checkboxPropertyType = propertyType('checkbox');
const FALSE_VALUES = new Set([
@@ -18,18 +19,17 @@ const FALSE_VALUES = new Set([
'关闭',
]);
export const checkboxPropertyModelConfig =
checkboxPropertyType.modelConfig<boolean>({
name: 'Checkbox',
type: () => t.boolean.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => (value ? 'True' : 'False'),
cellFromString: ({ value }) => ({
value: !FALSE_VALUES.has((value?.trim() ?? '').toLowerCase()),
}),
cellToJson: ({ value }) => value ?? null,
cellFromJson: ({ value }) =>
typeof value !== 'boolean' ? undefined : value,
isEmpty: () => false,
minWidth: 34,
});
export const checkboxPropertyModelConfig = checkboxPropertyType.modelConfig({
name: 'Checkbox',
valueSchema: zod.boolean().optional(),
type: () => t.boolean.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => (value ? 'True' : 'False'),
cellFromString: ({ value }) => ({
value: !FALSE_VALUES.has((value?.trim() ?? '').toLowerCase()),
}),
cellToJson: ({ value }) => value ?? null,
cellFromJson: ({ value }) => (typeof value !== 'boolean' ? undefined : value),
isEmpty: () => false,
minWidth: 34,
});
@@ -1,15 +1,17 @@
import { format } from 'date-fns/format';
import { parse } from 'date-fns/parse';
import zod from 'zod';
import { t } from '../../core/logical/type-presets.js';
import { propertyType } from '../../core/property/property-config.js';
export const datePropertyType = propertyType('date');
export const datePropertyModelConfig = datePropertyType.modelConfig<number>({
export const datePropertyModelConfig = datePropertyType.modelConfig({
name: 'Date',
type: () => t.date.instance(),
valueSchema: zod.number().optional(),
defaultData: () => ({}),
cellToString: ({ value }) => format(value, 'yyyy-MM-dd'),
cellToString: ({ value }) =>
value != null ? format(value, 'yyyy-MM-dd') : '',
cellFromString: ({ value }) => {
const date = parse(value, 'yyyy-MM-dd', new Date());
@@ -1,10 +1,12 @@
import zod from 'zod';
import { t } from '../../core/logical/type-presets.js';
import { propertyType } from '../../core/property/property-config.js';
export const imagePropertyType = propertyType('image');
export const imagePropertyModelConfig = imagePropertyType.modelConfig<string>({
export const imagePropertyModelConfig = imagePropertyType.modelConfig({
name: 'image',
valueSchema: zod.string().optional(),
hide: true,
type: () => t.image.instance(),
defaultData: () => ({}),
@@ -1,69 +1,76 @@
import { nanoid } from '@blocksuite/store';
import zod from 'zod';
import { getTagColor } from '../../core/component/tags/colors.js';
import { type SelectTag, t } from '../../core/index.js';
import { propertyType } from '../../core/property/property-config.js';
import type { SelectPropertyData } from '../select/define.js';
export const multiSelectPropertyType = propertyType('multi-select');
export const multiSelectPropertyModelConfig =
multiSelectPropertyType.modelConfig<string[], SelectPropertyData>({
name: 'Multi-select',
type: ({ data }) => t.array.instance(t.tag.instance(data.options)),
defaultData: () => ({
options: [],
}),
addGroup: ({ text, oldData }) => {
return {
options: [
...(oldData.options ?? []),
{
id: nanoid(),
value: text,
color: getTagColor(),
},
],
};
},
formatValue: ({ value }) => {
if (Array.isArray(value)) {
return value.filter(v => v != null);
}
return [];
},
cellToString: ({ value, data }) =>
value?.map(id => data.options.find(v => v.id === id)?.value).join(','),
cellFromString: ({ value: oldValue, data }) => {
const optionMap = Object.fromEntries(data.options.map(v => [v.value, v]));
const optionNames = oldValue
.split(',')
.map(v => v.trim())
.filter(v => v);
const value: string[] = [];
optionNames.forEach(name => {
if (!optionMap[name]) {
const newOption: SelectTag = {
id: nanoid(),
value: name,
color: getTagColor(),
};
data.options.push(newOption);
value.push(newOption.id);
} else {
value.push(optionMap[name].id);
multiSelectPropertyType.modelConfig<string[] | undefined, SelectPropertyData>(
{
name: 'Multi-select',
valueSchema: zod.array(zod.string()).optional(),
type: ({ data }) => t.array.instance(t.tag.instance(data.options)),
defaultData: () => ({
options: [],
}),
addGroup: ({ text, oldData }) => {
return {
options: [
...(oldData.options ?? []),
{
id: nanoid(),
value: text,
color: getTagColor(),
},
],
};
},
formatValue: ({ value }) => {
if (Array.isArray(value)) {
return value.filter(v => v != null);
}
});
return [];
},
cellToString: ({ value, data }) =>
value
?.map(id => data.options.find(v => v.id === id)?.value)
.join(',') ?? '',
cellFromString: ({ value: oldValue, data }) => {
const optionMap = Object.fromEntries(
data.options.map(v => [v.value, v])
);
const optionNames = oldValue
.split(',')
.map(v => v.trim())
.filter(v => v);
return {
value,
data: data,
};
},
cellToJson: ({ value }) => value ?? null,
cellFromJson: ({ value }) =>
Array.isArray(value) && value.every(v => typeof v === 'string')
? value
: undefined,
isEmpty: ({ value }) => value == null || value.length === 0,
});
const value: string[] = [];
optionNames.forEach(name => {
if (!optionMap[name]) {
const newOption: SelectTag = {
id: nanoid(),
value: name,
color: getTagColor(),
};
data.options.push(newOption);
value.push(newOption.id);
} else {
value.push(optionMap[name].id);
}
});
return {
value,
data: data,
};
},
cellToJson: ({ value }) => value ?? null,
cellFromJson: ({ value }) =>
Array.isArray(value) && value.every(v => typeof v === 'string')
? value
: undefined,
isEmpty: ({ value }) => value == null || value.length === 0,
}
);
@@ -1,14 +1,16 @@
import zod from 'zod';
import { t } from '../../core/logical/type-presets.js';
import { propertyType } from '../../core/property/property-config.js';
import type { NumberPropertyDataType } from './types.js';
export const numberPropertyType = propertyType('number');
export const numberPropertyModelConfig = numberPropertyType.modelConfig<
number,
number | undefined,
NumberPropertyDataType
>({
name: 'Number',
valueSchema: zod.number().optional(),
type: () => t.number.instance(),
defaultData: () => ({ decimal: 0, format: 'number' }),
cellToString: ({ value }) => value?.toString() ?? '',
@@ -1,24 +1,25 @@
import zod from 'zod';
import { t } from '../../core/logical/type-presets.js';
import { propertyType } from '../../core/property/property-config.js';
export const progressPropertyType = propertyType('progress');
export const progressPropertyModelConfig =
progressPropertyType.modelConfig<number>({
name: 'Progress',
type: () => t.number.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => value?.toString() ?? '',
cellFromString: ({ value }) => {
const num = value ? Number(value) : NaN;
return {
value: isNaN(num) ? null : num,
};
},
cellToJson: ({ value }) => value ?? null,
cellFromJson: ({ value }) => {
if (typeof value !== 'number') return undefined;
return value;
},
isEmpty: () => false,
});
export const progressPropertyModelConfig = progressPropertyType.modelConfig({
name: 'Progress',
valueSchema: zod.number().optional(),
type: () => t.number.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => value?.toString() ?? '',
cellFromString: ({ value }) => {
const num = value ? Number(value) : NaN;
return {
value: isNaN(num) ? null : num,
};
},
cellToJson: ({ value }) => value ?? null,
cellFromJson: ({ value }) => {
if (typeof value !== 'number') return undefined;
return value;
},
isEmpty: () => false,
});
@@ -1,19 +1,20 @@
import { nanoid } from '@blocksuite/store';
import zod from 'zod';
import { getTagColor } from '../../core/component/tags/colors.js';
import { type SelectTag, t } from '../../core/index.js';
import { propertyType } from '../../core/property/property-config.js';
export const selectPropertyType = propertyType('select');
export type SelectPropertyData = {
options: SelectTag[];
};
export const selectPropertyModelConfig = selectPropertyType.modelConfig<
string,
string | undefined,
SelectPropertyData
>({
name: 'Select',
valueSchema: zod.string().optional(),
type: ({ data }) => t.tag.instance(data.options),
defaultData: () => ({
options: [],
@@ -1,10 +1,12 @@
import zod from 'zod';
import { t } from '../../core/index.js';
import { propertyType } from '../../core/property/property-config.js';
export const textPropertyType = propertyType('text');
export const textPropertyModelConfig = textPropertyType.modelConfig<string>({
export const textPropertyModelConfig = textPropertyType.modelConfig({
name: 'Plain-Text',
valueSchema: zod.string().optional(),
type: () => t.string.instance(),
defaultData: () => ({}),
cellToString: ({ value }) => value ?? '',