feat: support add column/row

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/shared_widget.dart

@@ -0,0 +1,73 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/table/simple_table_constants.dart';
+import 'package:flutter/material.dart';
+
+class SimpleTableAddRowButton extends StatelessWidget {
+  const SimpleTableAddRowButton({
+    super.key,
+    this.onTap,
+  });
+
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: onTap,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: Container(
+          height: SimpleTableConstants.addRowButtonHeight,
+          margin: const EdgeInsets.symmetric(
+            vertical: SimpleTableConstants.addRowButtonPadding,
+          ),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(
+              SimpleTableConstants.addRowButtonRadius,
+            ),
+            color: SimpleTableConstants.addRowButtonBackgroundColor,
+          ),
+          child: const FlowySvg(
+            FlowySvgs.add_s,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class SimpleTableAddColumnButton extends StatelessWidget {
+  const SimpleTableAddColumnButton({
+    super.key,
+    this.onTap,
+  });
+
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: onTap,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: Container(
+          width: SimpleTableConstants.addColumnButtonWidth,
+          margin: const EdgeInsets.symmetric(
+            horizontal: SimpleTableConstants.addColumnButtonPadding,
+          ),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(
+              SimpleTableConstants.addColumnButtonRadius,
+            ),
+            color: SimpleTableConstants.addColumnButtonBackgroundColor,
+          ),
+          child: const FlowySvg(
+            FlowySvgs.add_s,
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/simple_table_block_component.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/table/shared_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/table/simple_table_constants.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/table/simple_table_row_block_component.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -137,18 +138,17 @@ class _SimpleTableBlockWidgetState extends State<SimpleTableBlockWidget>
 
   final tableKey = GlobalKey();
 
+  final ValueNotifier<bool> isHovering = ValueNotifier(false);
+
+  @override
+  void dispose() {
+    super.dispose();
+    isHovering.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    // IntrinsicWidth and IntrinsicHeight are used to make the table size fit the content.
-    Widget child = IntrinsicWidth(
-      child: IntrinsicHeight(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: _buildRows(),
-        ),
-      ),
-    );
+    Widget child = _buildTable();
 
     child = Padding(
       padding: padding,
@@ -178,6 +178,70 @@ class _SimpleTableBlockWidgetState extends State<SimpleTableBlockWidget>
     return child;
   }
 
+  Widget _buildTable() {
+    const bottomPadding = SimpleTableConstants.addRowButtonHeight +
+        2 * SimpleTableConstants.addRowButtonPadding;
+    const rightPadding = SimpleTableConstants.addColumnButtonWidth +
+        2 * SimpleTableConstants.addColumnButtonPadding;
+    // IntrinsicWidth and IntrinsicHeight are used to make the table size fit the content.
+    return MouseRegion(
+      onEnter: (event) => isHovering.value = true,
+      onExit: (event) => isHovering.value = false,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(
+              bottom: bottomPadding,
+              right: rightPadding,
+            ),
+            child: IntrinsicWidth(
+              child: IntrinsicHeight(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: _buildRows(),
+                ),
+              ),
+            ),
+          ),
+          ValueListenableBuilder(
+            valueListenable: isHovering,
+            builder: (context, value, child) {
+              return value
+                  ? Positioned(
+                      bottom: 0,
+                      left: 0,
+                      right: rightPadding,
+                      child: SimpleTableAddRowButton(
+                        onTap: () {
+                          debugPrint('add row');
+                        },
+                      ),
+                    )
+                  : const SizedBox.shrink();
+            },
+          ),
+          ValueListenableBuilder(
+            valueListenable: isHovering,
+            builder: (context, value, child) {
+              return Positioned(
+                top: 0,
+                bottom: bottomPadding,
+                right: 0,
+                child: SimpleTableAddColumnButton(
+                  onTap: () {
+                    debugPrint('add column');
+                  },
+                ),
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
   List<Widget> _buildRows() {
     final List<Widget> rows = [];
     rows.add(
@@ -195,6 +259,7 @@ class _SimpleTableBlockWidgetState extends State<SimpleTableBlockWidget>
         ),
       );
     }
+
     return rows;
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/simple_table_cell_block_component.dart

@@ -78,12 +78,7 @@ class _SimpleTableCellBlockWidgetState extends State<SimpleTableCellBlockWidget>
       children: node.children
           .map(
             (e) => Container(
-              decoration: const BoxDecoration(
-                  // border: Border.all(
-                  //   color: SimpleTableConstants.borderColor,
-                  //   strokeAlign: BorderSide.strokeAlignCenter,
-                  // ),
-                  ),
+              padding: SimpleTableConstants.cellEdgePadding,
               constraints: const BoxConstraints(
                 minWidth: SimpleTableConstants.minimumColumnWidth,
               ),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/simple_table_constants.dart

@@ -1,7 +1,22 @@
-import 'dart:ui';
+import 'package:flutter/material.dart';
 
 class SimpleTableConstants {
   static const defaultColumnWidth = 120.0;
   static const minimumColumnWidth = 50.0;
   static const borderColor = Color(0xFFE4E5E5);
+
+  static const addRowButtonHeight = 16.0;
+  static const addRowButtonPadding = 2.0;
+  static const addRowButtonBackgroundColor = Color(0xFFF2F3F5);
+  static const addRowButtonRadius = 4.0;
+
+  static const addColumnButtonWidth = 16.0;
+  static const addColumnButtonPadding = 2.0;
+  static const addColumnButtonBackgroundColor = Color(0xFFF2F3F5);
+  static const addColumnButtonRadius = 4.0;
+
+  static const cellEdgePadding = EdgeInsets.symmetric(
+    horizontal: 8.0,
+    vertical: 2.0,
+  );
 }