fix: table block bugs

lib/src/editor/block_component/table_block_component/table_action_menu.dart

@@ -39,27 +39,19 @@ void showActionMenu(
         height: 230,
         children: [
           _menuItem(context, 'Add after', Icons.last_page, () {
-            final transaction = editorState.transaction;
-            TableActions.add(node, position + 1, transaction, dir);
-            editorState.apply(transaction);
+            TableActions.add(node, position + 1, editorState, dir);
             dismissOverlay();
           }),
           _menuItem(context, 'Add before', Icons.first_page, () {
-            final transaction = editorState.transaction;
-            TableActions.add(node, position, transaction, dir);
-            editorState.apply(transaction);
+            TableActions.add(node, position, editorState, dir);
             dismissOverlay();
           }),
           _menuItem(context, 'Remove', Icons.delete, () {
-            final transaction = editorState.transaction;
-            TableActions.delete(node, position, transaction, dir);
-            editorState.apply(transaction);
+            TableActions.delete(node, position, editorState, dir);
             dismissOverlay();
           }),
           _menuItem(context, 'Duplicate', Icons.content_copy, () {
-            final transaction = editorState.transaction;
-            TableActions.duplicate(node, position, transaction, dir);
-            editorState.apply(transaction);
+            TableActions.duplicate(node, position, editorState, dir);
             dismissOverlay();
           }),
           _menuItem(
@@ -70,33 +62,31 @@ void showActionMenu(
               final cell = dir == TableDirection.col
                   ? getCellNode(node, position, 0)
                   : getCellNode(node, 0, position);
+              final key = dir == TableDirection.col
+                  ? TableCellBlockKeys.colBackgroundColor
+                  : TableCellBlockKeys.rowBackgroundColor;
 
               _showColorMenu(
                 context,
                 (color) {
-                  final transaction = editorState.transaction;
                   TableActions.setBgColor(
                     node,
                     position,
-                    transaction,
+                    editorState,
                     color,
                     dir,
                   );
-                  editorState.apply(transaction);
                 },
                 top: top,
                 bottom: bottom,
                 left: left,
-                selectedColorHex:
-                    cell?.attributes[TableBlockKeys.backgroundColor],
+                selectedColorHex: cell?.attributes[key],
               );
               dismissOverlay();
             },
           ),
           _menuItem(context, 'Clear Content', Icons.clear, () {
-            final transaction = editorState.transaction;
-            TableActions.clear(node, position, transaction, dir);
-            editorState.apply(transaction);
+            TableActions.clear(node, position, editorState, dir);
             dismissOverlay();
           }),
         ],

lib/src/editor/block_component/table_block_component/table_block_component.dart

@@ -2,6 +2,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/block_component/table_block_component/table_node.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+
 import 'table_view.dart';
 
 class TableBlockKeys {
@@ -21,17 +22,7 @@ class TableBlockKeys {
 
   static const String rowsLen = 'rowsLen';
 
-  static const String rowPosition = 'rowPosition';
-
-  static const String colPosition = 'colPosition';
-
-  static const String height = 'height';
-
-  static const String width = 'width';
-
   static const String colsHeight = 'colsHeight';
-
-  static const String backgroundColor = 'backgroundColor';
 }
 
 class TableDefaults {
@@ -265,8 +256,20 @@ SelectionMenuItem tableMenuItem = SelectionMenuItem(
       transaction
         ..insertNode(selection.end.path, tableNode.node)
         ..deleteNode(currentNode);
+      transaction.afterSelection = Selection.collapsed(
+        Position(
+          path: selection.end.path + [0, 0],
+          offset: 0,
+        ),
+      );
     } else {
       transaction.insertNode(selection.end.path.next, tableNode.node);
+      transaction.afterSelection = Selection.collapsed(
+        Position(
+          path: selection.end.path.next + [0, 0],
+          offset: 0,
+        ),
+      );
     }
 
     editorState.apply(transaction);

lib/src/editor/block_component/table_block_component/table_cell_block_component.dart

@@ -8,6 +8,18 @@ class TableCellBlockKeys {
   const TableCellBlockKeys._();
 
   static const String type = 'table/cell';
+
+  static const String rowPosition = 'rowPosition';
+
+  static const String colPosition = 'colPosition';
+
+  static const String height = 'height';
+
+  static const String width = 'width';
+
+  static const String rowBackgroundColor = 'rowBackgroundColor';
+
+  static const String colBackgroundColor = 'colBackgroundColor';
 }
 
 class TableCellBlockComponentBuilder extends BlockComponentBuilder {
@@ -40,8 +52,8 @@ class TableCellBlockComponentBuilder extends BlockComponentBuilder {
   @override
   bool validate(Node node) =>
       node.attributes.isNotEmpty &&
-      node.attributes.containsKey(TableBlockKeys.rowPosition) &&
-      node.attributes.containsKey(TableBlockKeys.colPosition);
+      node.attributes.containsKey(TableCellBlockKeys.rowPosition) &&
+      node.attributes.containsKey(TableCellBlockKeys.colPosition);
 }
 
 class TableCelBlockWidget extends BlockComponentStatefulWidget {
@@ -74,12 +86,17 @@ class _TableCeBlockWidgetState extends State<TableCelBlockWidget> {
           child: Container(
             constraints: BoxConstraints(
               minHeight: context
-                  .select((Node n) => n.attributes[TableBlockKeys.height]),
+                  .select((Node n) => n.attributes[TableCellBlockKeys.height]),
+            ),
+            color: context.select(
+              (Node n) =>
+                  (n.attributes[TableCellBlockKeys.colBackgroundColor]
+                          as String?)
+                      ?.toColor() ??
+                  (n.attributes[TableCellBlockKeys.rowBackgroundColor]
+                          as String?)
+                      ?.toColor(),
             ),
-            color: context.select((Node n) {
-              return (n.attributes[TableBlockKeys.backgroundColor] as String?)
-                  ?.toColor();
-            }),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
@@ -98,22 +115,22 @@ class _TableCeBlockWidgetState extends State<TableCelBlockWidget> {
           visible: _rowActionVisibility,
           node: widget.node.parent!,
           editorState: editorState,
-          position: widget.node.attributes[TableBlockKeys.rowPosition],
+          position: widget.node.attributes[TableCellBlockKeys.rowPosition],
           transform: context.select((Node n) {
-            final int col = n.attributes[TableBlockKeys.colPosition];
+            final int col = n.attributes[TableCellBlockKeys.colPosition];
             double left = -15.0;
             for (var i = 0; i < col; i++) {
               left -= getCellNode(n.parent!, i, 0)
-                  ?.attributes[TableBlockKeys.width] as double;
+                  ?.attributes[TableCellBlockKeys.width] as double;
               left -= n.parent!.attributes['borderWidth'] ??
                   TableDefaults.borderWidth;
             }
 
             return Matrix4.translationValues(left, 0.0, 0.0);
           }),
           alignment: Alignment.centerLeft,
-          height:
-              context.select((Node n) => n.attributes[TableBlockKeys.height]),
+          height: context
+              .select((Node n) => n.attributes[TableCellBlockKeys.height]),
           menuBuilder: widget.menuBuilder,
           dir: TableDirection.row,
         ),

lib/src/editor/block_component/table_block_component/table_col.dart

@@ -41,6 +41,7 @@ class _TableColState extends State<TableCol> {
         TableColBorder(
           resizable: false,
           tableNode: widget.tableNode,
+          editorState: widget.editorState,
           colIdx: widget.colIdx,
           borderColor: widget.borderColor,
           borderHoverColor: widget.borderHoverColor,
@@ -52,7 +53,7 @@ class _TableColState extends State<TableCol> {
       SizedBox(
         width: context.select(
           (Node n) => getCellNode(n, widget.colIdx, 0)
-              ?.attributes[TableBlockKeys.width],
+              ?.attributes[TableCellBlockKeys.width],
         ),
         child: Stack(
           children: [
@@ -77,6 +78,7 @@ class _TableColState extends State<TableCol> {
       TableColBorder(
         resizable: true,
         tableNode: widget.tableNode,
+        editorState: widget.editorState,
         colIdx: widget.colIdx,
         borderColor: widget.borderColor,
         borderHoverColor: widget.borderHoverColor,
@@ -117,9 +119,16 @@ class _TableColState extends State<TableCol> {
   }
 
   void updateRowHeightCallback(int row) =>
-      WidgetsBinding.instance.addPostFrameCallback(
-        (_) => row < widget.tableNode.rowsLen
-            ? widget.tableNode.updateRowHeight(row)
-            : null,
-      );
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (row >= widget.tableNode.rowsLen) {
+          return;
+        }
+
+        final transaction = widget.editorState.transaction;
+        widget.tableNode.updateRowHeight(row, transaction);
+        if (transaction.operations.isNotEmpty) {
+          transaction.afterSelection = transaction.beforeSelection;
+          widget.editorState.apply(transaction);
+        }
+      });
 }

lib/src/editor/block_component/table_block_component/table_col_border.dart

@@ -1,12 +1,13 @@
-import 'package:flutter/material.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/block_component/table_block_component/table_node.dart';
+import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 class TableColBorder extends StatefulWidget {
   const TableColBorder({
     Key? key,
     required this.tableNode,
+    required this.editorState,
     required this.colIdx,
     required this.resizable,
     required this.borderColor,
@@ -16,6 +17,7 @@ class TableColBorder extends StatefulWidget {
   final bool resizable;
   final int colIdx;
   final TableNode tableNode;
+  final EditorState editorState;
 
   final Color borderColor;
   final Color borderHoverColor;
@@ -44,7 +46,7 @@ class _TableColBorderState extends State<TableColBorder> {
       child: GestureDetector(
         onHorizontalDragStart: (_) => setState(() => _borderDragging = true),
         onHorizontalDragEnd: (_) => setState(() => _borderDragging = false),
-        onHorizontalDragUpdate: (DragUpdateDetails details) {
+        onHorizontalDragUpdate: (DragUpdateDetails details) async {
           final RenderBox box =
               _borderKey.currentContext?.findRenderObject() as RenderBox;
           final Offset pos = box.localToGlobal(Offset.zero);
@@ -58,8 +60,15 @@ class _TableColBorderState extends State<TableColBorder> {
           }
 
           final colWidth = widget.tableNode.getColWidth(widget.colIdx);
-          widget.tableNode
-              .setColWidth(widget.colIdx, colWidth + details.delta.dx);
+
+          final transaction = widget.editorState.transaction;
+          widget.tableNode.setColWidth(
+            widget.colIdx,
+            colWidth + details.delta.dx,
+            transaction,
+          );
+          transaction.afterSelection = transaction.beforeSelection;
+          await widget.editorState.apply(transaction);
         },
         child: Container(
           key: _borderKey,

lib/src/editor/block_component/table_block_component/table_commands.dart

@@ -189,8 +189,8 @@ bool _hasSelectionAndTableCell(
 
 Node? _getNextNode(Iterable<Node> nodes, int colDiff, rowDiff) {
   final cell = nodes.first.parent!;
-  final col = cell.attributes[TableBlockKeys.colPosition];
-  final row = cell.attributes[TableBlockKeys.rowPosition];
+  final col = cell.attributes[TableCellBlockKeys.colPosition];
+  final row = cell.attributes[TableCellBlockKeys.rowPosition];
   return cell.parent != null
       ? getCellNode(cell.parent!, col + colDiff, row + rowDiff)
       : null;