refactor(editor): add runtime type checks to database cell values (#10770)

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

@@ -13,6 +13,7 @@ import { multiSelectStyle } from './cell-renderer.css.js';
 import { multiSelectPropertyModelConfig } from './define.js';
 
 export class MultiSelectCell extends BaseCellRenderer<
+  string[],
   string[],
   SelectPropertyData
 > {

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

@@ -4,40 +4,29 @@ 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';
+import { SelectPropertySchema } from '../select/define.js';
 export const multiSelectPropertyType = propertyType('multi-select');
+
 export const multiSelectPropertyModelConfig =
-  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: () => ({
+  multiSelectPropertyType.modelConfig({
+    name: 'Multi-select',
+    propertyData: {
+      schema: SelectPropertySchema,
+      default: () => ({
         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 }) => {
+    },
+    jsonValue: {
+      schema: zod.array(zod.string()),
+      isEmpty: ({ value }) => value.length === 0,
+      type: ({ data }) => t.array.instance(t.tag.instance(data.options)),
+    },
+    rawValue: {
+      schema: zod.array(zod.string()),
+      default: () => [],
+      toString: ({ value, data }) =>
+        value.map(id => data.options.find(v => v.id === id)?.value).join(','),
+      fromString: ({ value: oldValue, data }) => {
         const optionMap = Object.fromEntries(
           data.options.map(v => [v.value, v])
         );
@@ -66,11 +55,22 @@ export const multiSelectPropertyModelConfig =
           data: data,
         };
       },
-      cellToJson: ({ value }) => value ?? null,
-      cellFromJson: ({ value }) =>
+      toJson: ({ value }) => value ?? null,
+      fromJson: ({ value }) =>
         Array.isArray(value) && value.every(v => typeof v === 'string')
           ? value
           : undefined,
-      isEmpty: ({ value }) => value == null || value.length === 0,
-    }
-  );
+    },
+    addGroup: ({ text, oldData }) => {
+      return {
+        options: [
+          ...(oldData.options ?? []),
+          {
+            id: nanoid(),
+            value: text,
+            color: getTagColor(),
+          },
+        ],
+      };
+    },
+  });