upstream-affine/blocksuite/playground/apps/starter/data/database.ts

import {
  DatabaseBlockDataSource,
  databaseBlockProperties,
} from '@blocksuite/affine/blocks/database';
import {
  type DatabaseBlockModel,
  type ListType,
  type ParagraphType,
} from '@blocksuite/affine/model';
import { Text, type Workspace } from '@blocksuite/affine/store';
import { groupTraitKey } from '@blocksuite/data-view';
import { propertyPresets } from '@blocksuite/data-view/property-presets';
import { viewPresets } from '@blocksuite/data-view/view-presets';

import type { InitFn } from './utils.js';

export const database: InitFn = (collection: Workspace, id: string) => {
  const doc = collection.createDoc(id);
  const store = doc.getStore();

  doc.load(() => {
    // Add root block and surface block at root level
    const rootId = store.addBlock('affine:page', {
      title: new Text('BlockSuite Playground'),
    });
    store.addBlock('affine:surface', {}, rootId);

    // Add note block inside root block
    const noteId = store.addBlock('affine:note', {}, rootId);
    const pId = store.addBlock('affine:paragraph', {}, noteId);
    const model = store.getModelById(pId);
    if (!model) {
      throw new Error('model is not found');
    }
    const addDatabase = (title: string, group = true) => {
      const databaseId = store.addBlock(
        'affine:database',
        {
          columns: [],
          cells: {},
        },
        noteId
      );
      const database = store.getModelById(databaseId) as DatabaseBlockModel;
      const datasource = new DatabaseBlockDataSource(database);
      datasource.viewManager.viewAdd('table');
      database.props.title = new Text(title);
      const richTextId = datasource.propertyAdd('end', {
        type: databaseBlockProperties.richTextColumnConfig.type,
        name: 'Rich Text',
      });
      Object.values([
        propertyPresets.multiSelectPropertyConfig,
        propertyPresets.datePropertyConfig,
        propertyPresets.numberPropertyConfig,
        databaseBlockProperties.linkColumnConfig,
        propertyPresets.checkboxPropertyConfig,
        propertyPresets.progressPropertyConfig,
      ]).forEach(column => {
        datasource.propertyAdd('end', {
          type: column.type,
          name: column.config.name,
        });
      });
      if (group) {
        const groupTrait =
          datasource.viewManager.currentView$.value?.traitGet(groupTraitKey);
        groupTrait?.changeGroup(database.props.columns[1].id);
      }
      const paragraphTypes: ParagraphType[] = [
        'text',
        'quote',
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
      ];
      paragraphTypes.forEach(type => {
        const id = store.addBlock(
          'affine:paragraph',
          { type: type, text: new Text(`Paragraph type ${type}`) },
          databaseId
        );
        if (richTextId) {
          datasource.cellValueChange(
            id,
            richTextId,
            new Text(`Paragraph type ${type}`)
          );
        }
      });
      const listTypes: ListType[] = ['numbered', 'bulleted', 'todo', 'toggle'];

      listTypes.forEach(type => {
        const id = store.addBlock(
          'affine:list',
          { type: type, text: new Text(`List type ${type}`) },
          databaseId
        );
        if (richTextId) {
          datasource.cellValueChange(
            id,
            richTextId,
            new Text(`List type ${type}`)
          );
        }
      });
      // Add a paragraph after database
      store.addBlock('affine:paragraph', {}, noteId);
      store.addBlock('affine:paragraph', {}, noteId);
      store.addBlock('affine:paragraph', {}, noteId);
      store.addBlock('affine:paragraph', {}, noteId);
      store.addBlock('affine:paragraph', {}, noteId);
      datasource.viewManager.viewAdd(viewPresets.kanbanViewMeta.type);

      store.resetHistory();
    };
    // Add database block inside note block
    addDatabase('Database 1', false);
    addDatabase('Database 2');
    addDatabase('Database 3');
    addDatabase('Database 4');
    addDatabase('Database 5');
    addDatabase('Database 6');
    addDatabase('Database 7');
    addDatabase('Database 8');
    addDatabase('Database 9');
    addDatabase('Database 10');
  });
};

database.id = 'database';
database.displayName = 'Database Example';
database.description = 'Database block basic example';