refactor(editor): flat data for table block

toeverything · Feb 7, 2025 · bb29f77 · bb29f77
1 parent b9ad53a
commit bb29f77
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 54 deletions.
diff --git a/blocksuite/affine/block-table/src/commands.ts b/blocksuite/affine/block-table/src/commands.ts
@@ -1,7 +1,12 @@
-import { TableModelFlavour } from '@blocksuite/affine-model';
-import { generateFractionalIndexingKeyBetween } from '@blocksuite/affine-shared/utils';
+import {
+  type TableBlockModel,
+  TableModelFlavour,
+} from '@blocksuite/affine-model';
 import type { Command } from '@blocksuite/block-std';
-import { type BlockModel, nanoid, Text } from '@blocksuite/store';
+import { type BlockModel } from '@blocksuite/store';
+
+import { TableDataManager } from './table-data-manager';
+
 export const insertTableBlockCommand: Command<
   {
     place?: 'after' | 'before';
@@ -22,41 +27,25 @@ export const insertTableBlockCommand: Command<
 
   if (!targetModel) return;
 
-  const row1Id = nanoid();
-  const row2Id = nanoid();
-  const col1Id = nanoid();
-  const col2Id = nanoid();
-  const order1 = generateFractionalIndexingKeyBetween(null, null);
-  const order2 = generateFractionalIndexingKeyBetween(order1, null);
-
-  const initialTableData = {
-    rows: {
-      [row1Id]: { rowId: row1Id, order: order1 },
-      [row2Id]: { rowId: row2Id, order: order2 },
-    },
-    columns: {
-      [col1Id]: { columnId: col1Id, order: order1 },
-      [col2Id]: { columnId: col2Id, order: order2 },
-    },
-    cells: {
-      [`${row1Id}:${col1Id}`]: { text: new Text() },
-      [`${row1Id}:${col2Id}`]: { text: new Text() },
-      [`${row2Id}:${col1Id}`]: { text: new Text() },
-      [`${row2Id}:${col2Id}`]: { text: new Text() },
-    },
-  };
-
   const result = std.store.addSiblingBlocks(
     targetModel,
-    [{ flavour: TableModelFlavour, ...initialTableData }],
+    [{ flavour: TableModelFlavour }],
     place
   );
   const blockId = result[0];
 
   if (blockId == null) return;
 
-  if (removeEmptyLine && targetModel.text?.length === 0) {
-    std.store.deleteBlock(targetModel);
+  const model = std.store.getBlock(blockId)?.model as TableBlockModel;
+  if (model == null) return;
+
+  const dataManager = new TableDataManager(model);
+
+  dataManager.addNRow(2);
+  dataManager.addNColumn(2);
+
+  if (removeEmptyLine && model.text?.length === 0) {
+    std.store.deleteBlock(model);
   }
 
   next({ insertedTableBlockId: blockId });

diff --git a/blocksuite/affine/block-table/src/table-data-manager.ts b/blocksuite/affine/block-table/src/table-data-manager.ts
@@ -76,12 +76,13 @@ export class TableDataManager {
     const order = this.getOrder(this.rows$.value, after);
     const rowId = nanoid();
     this.model.doc.transact(() => {
-      this.model.rows[rowId] = {
+      this.model.props.rows[rowId] = {
         rowId,
         order,
       };
+
       this.columns$.value.forEach(column => {
-        this.model.cells[`${rowId}:${column.columnId}`] = {
+        this.model.props.cells[`${rowId}:${column.columnId}`] = {
           text: new Text(),
         };
       });
@@ -145,12 +146,12 @@ export class TableDataManager {
     const order = this.getOrder(this.columns$.value, after);
     const columnId = nanoid();
     this.model.doc.transact(() => {
-      this.model.columns[columnId] = {
+      this.model.props.columns[columnId] = {
         columnId,
         order,
       };
       this.rows$.value.forEach(row => {
-        this.model.cells[`${row.rowId}:${columnId}`] = {
+        this.model.props.cells[`${row.rowId}:${columnId}`] = {
           text: new Text(),
         };
       });
@@ -162,12 +163,12 @@ export class TableDataManager {
     this.model.doc.transact(() => {
       Object.keys(this.model.rows).forEach(id => {
         if (id === rowId) {
-          delete this.model.rows[id];
+          delete this.model.props.rows[id];
         }
       });
       Object.keys(this.model.cells).forEach(id => {
         if (id.startsWith(rowId)) {
-          delete this.model.cells[id];
+          delete this.model.props.cells[id];
         }
       });
     });
@@ -177,53 +178,53 @@ export class TableDataManager {
     this.model.doc.transact(() => {
       Object.keys(this.model.columns).forEach(id => {
         if (id === columnId) {
-          delete this.model.columns[id];
+          delete this.model.props.columns[id];
         }
       });
       Object.keys(this.model.cells).forEach(id => {
         if (id.endsWith(`:${columnId}`)) {
-          delete this.model.cells[id];
+          delete this.model.props.cells[id];
         }
       });
     });
   }
 
   updateRowOrder(rowId: string, newOrder: string) {
     this.model.doc.transact(() => {
-      if (this.model.rows[rowId]) {
-        this.model.rows[rowId].order = newOrder;
+      if (this.model.props.rows[rowId]) {
+        this.model.props.rows[rowId].order = newOrder;
       }
     });
   }
 
   updateColumnOrder(columnId: string, newOrder: string) {
     this.model.doc.transact(() => {
-      if (this.model.columns[columnId]) {
-        this.model.columns[columnId].order = newOrder;
+      if (this.model.props.columns[columnId]) {
+        this.model.props.columns[columnId].order = newOrder;
       }
     });
   }
 
   setRowBackgroundColor(rowId: string, color?: string) {
     this.model.doc.transact(() => {
-      if (this.model.rows[rowId]) {
-        this.model.rows[rowId].backgroundColor = color;
+      if (this.model.props.rows[rowId]) {
+        this.model.props.rows[rowId].backgroundColor = color;
       }
     });
   }
 
   setColumnBackgroundColor(columnId: string, color?: string) {
     this.model.doc.transact(() => {
-      if (this.model.columns[columnId]) {
-        this.model.columns[columnId].backgroundColor = color;
+      if (this.model.props.columns[columnId]) {
+        this.model.props.columns[columnId].backgroundColor = color;
       }
     });
   }
 
   setColumnWidth(columnId: string, width: number) {
     this.model.doc.transact(() => {
-      if (this.model.columns[columnId]) {
-        this.model.columns[columnId].width = width;
+      if (this.model.props.columns[columnId]) {
+        this.model.props.columns[columnId].width = width;
       }
     });
   }
@@ -305,7 +306,7 @@ export class TableDataManager {
     if (!column) return;
     const order = this.getOrder(columns, after);
     this.model.doc.transact(() => {
-      const realColumn = this.model.columns[column.columnId];
+      const realColumn = this.model.props.columns[column.columnId];
       if (realColumn) {
         realColumn.order = order;
       }
@@ -318,7 +319,7 @@ export class TableDataManager {
     if (!row) return;
     const order = this.getOrder(rows, after);
     this.model.doc.transact(() => {
-      const realRow = this.model.rows[row.rowId];
+      const realRow = this.model.props.rows[row.rowId];
       if (realRow) {
         realRow.order = order;
       }
@@ -331,7 +332,7 @@ export class TableDataManager {
     const order = this.getOrder(this.columns$.value, index);
     const newColumnId = nanoid();
     this.model.doc.transact(() => {
-      this.model.columns[newColumnId] = {
+      this.model.props.columns[newColumnId] = {
         ...oldColumn,
         columnId: newColumnId,
         order,
@@ -354,15 +355,15 @@ export class TableDataManager {
     const order = this.getOrder(this.rows$.value, index);
     const newRowId = nanoid();
     this.model.doc.transact(() => {
-      this.model.rows[newRowId] = {
+      this.model.props.rows[newRowId] = {
         ...oldRow,
         rowId: newRowId,
         order,
       };
       this.columns$.value.forEach(column => {
-        this.model.cells[`${newRowId}:${column.columnId}`] = {
+        this.model.props.cells[`${newRowId}:${column.columnId}`] = {
           text:
-            this.model.cells[
+            this.model.props.cells[
               `${oldRow.rowId}:${column.columnId}`
             ]?.text.clone() ?? new Text(),
         };

diff --git a/blocksuite/affine/model/src/blocks/table/table-model.ts b/blocksuite/affine/model/src/blocks/table/table-model.ts
@@ -48,6 +48,7 @@ export const TableBlockSchema = defineBlockSchema({
     cells: {},
   }),
   metadata: {
+    isFlatData: true,
     role: 'content',
     version: 1,
     parent: ['affine:note'],