refactor(editor): extract data view block (#9452)

blocksuite/affine/block-data-view/src/block-meta/base.ts

@@ -0,0 +1,36 @@
+import type { PropertyMetaConfig } from '@blocksuite/data-view';
+import type { Disposable } from '@blocksuite/global/utils';
+import type { Block, BlockModel } from '@blocksuite/store';
+
+type PropertyMeta<
+  T extends BlockModel = BlockModel,
+  Value = unknown,
+  ColumnData extends NonNullable<unknown> = NonNullable<unknown>,
+> = {
+  name: string;
+  key: string;
+  metaConfig: PropertyMetaConfig<string, ColumnData, Value>;
+  getColumnData?: (block: T) => ColumnData;
+  setColumnData?: (block: T, data: ColumnData) => void;
+  get: (block: T) => Value;
+  set?: (block: T, value: Value) => void;
+  updated: (block: T, callback: () => void) => Disposable;
+};
+export type BlockMeta<T extends BlockModel = BlockModel> = {
+  selector: (block: Block) => boolean;
+  properties: PropertyMeta<T>[];
+};
+export const createBlockMeta = <T extends BlockModel>(
+  options: Omit<BlockMeta<T>, 'properties'>
+) => {
+  const meta: BlockMeta = {
+    ...options,
+    properties: [],
+  };
+  return {
+    ...meta,
+    addProperty: <Value>(property: PropertyMeta<T, Value>) => {
+      meta.properties.push(property as PropertyMeta);
+    },
+  };
+};

blocksuite/affine/block-data-view/src/block-meta/index.ts

@@ -0,0 +1,6 @@
+import type { BlockMeta } from './base.js';
+import { todoMeta } from './todo.js';
+
+export const blockMetaMap = {
+  todo: todoMeta,
+} satisfies Record<string, BlockMeta>;

blocksuite/affine/block-data-view/src/block-meta/todo.ts

@@ -0,0 +1,60 @@
+import { richTextColumnConfig } from '@blocksuite/affine-block-database';
+import { type ListBlockModel, ListBlockSchema } from '@blocksuite/affine-model';
+import { propertyPresets } from '@blocksuite/data-view/property-presets';
+
+import { createBlockMeta } from './base.js';
+
+export const todoMeta = createBlockMeta<ListBlockModel>({
+  selector: block => {
+    if (block.flavour !== ListBlockSchema.model.flavour) {
+      return false;
+    }
+
+    return (block.model as ListBlockModel).type === 'todo';
+  },
+});
+todoMeta.addProperty({
+  name: 'Content',
+  key: 'todo-title',
+  metaConfig: richTextColumnConfig,
+  get: block => block.text.yText,
+  set: (_block, _value) => {
+    //
+  },
+  updated: (block, callback) => {
+    block.text?.yText.observe(callback);
+    return {
+      dispose: () => {
+        block.text?.yText.unobserve(callback);
+      },
+    };
+  },
+});
+todoMeta.addProperty({
+  name: 'Checked',
+  key: 'todo-checked',
+  metaConfig: propertyPresets.checkboxPropertyConfig,
+  get: block => block.checked,
+  set: (block, value) => {
+    block.checked = value;
+  },
+  updated: (block, callback) => {
+    return block.propsUpdated.on(({ key }) => {
+      if (key === 'checked') {
+        callback();
+      }
+    });
+  },
+});
+
+todoMeta.addProperty({
+  name: 'Source',
+  key: 'todo-source',
+  metaConfig: propertyPresets.textPropertyConfig,
+  get: block => block.doc.meta?.title ?? '',
+  updated: (block, callback) => {
+    return block.doc.collection.meta.docMetaUpdated.on(() => {
+      callback();
+    });
+  },
+});