feat: optimzie the hover block action (#2607)

* feat: optimzie the hover block action

* fix: duplicate view CI error

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_add_button.dart

@@ -12,7 +12,7 @@ class BlockAddButton extends StatelessWidget {
   }) : super(key: key);
 
   final BlockComponentContext blockComponentContext;
-  final BlockComponentState blockComponentState;
+  final BlockComponentActionState blockComponentState;
 
   final EditorState editorState;
   final VoidCallback showSlashMenu;

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_list.dart

@@ -15,7 +15,7 @@ class BlockActionList extends StatelessWidget {
   });
 
   final BlockComponentContext blockComponentContext;
-  final BlockComponentState blockComponentState;
+  final BlockComponentActionState blockComponentState;
   final List<OptionAction> actions;
   final VoidCallback showSlashMenu;
   final EditorState editorState;

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart

@@ -17,7 +17,7 @@ class BlockOptionButton extends StatelessWidget {
   }) : super(key: key);
 
   final BlockComponentContext blockComponentContext;
-  final BlockComponentState blockComponentState;
+  final BlockComponentActionState blockComponentState;
   final List<OptionAction> actions;
   final EditorState editorState;
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart

@@ -16,7 +16,7 @@ class OptionActionList extends StatelessWidget {
   }) : super(key: key);
 
   final BlockComponentContext blockComponentContext;
-  final BlockComponentState blockComponentState;
+  final BlockComponentActionState blockComponentState;
   final List<OptionAction> actions;
   final EditorState editorState;
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_node_widget.dart

@@ -20,12 +20,17 @@ class BoardBlockComponentBuilder extends BlockComponentBuilder {
   final BlockComponentConfiguration configuration;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return BoardBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -36,16 +41,15 @@ class BoardBlockComponentBuilder extends BlockComponentBuilder {
       node.attributes[DatabaseBlockKeys.kViewID] is String;
 }
 
-class BoardBlockComponentWidget extends StatefulWidget {
+class BoardBlockComponentWidget extends BlockComponentStatefulWidget {
   const BoardBlockComponentWidget({
     super.key,
-    required this.configuration,
-    required this.node,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
   });
 
-  final Node node;
-  final BlockComponentConfiguration configuration;
-
   @override
   State<BoardBlockComponentWidget> createState() =>
       _BoardBlockComponentWidgetState();
@@ -62,7 +66,7 @@ class _BoardBlockComponentWidgetState extends State<BoardBlockComponentWidget>
   @override
   Widget build(BuildContext context) {
     final editorState = Provider.of<EditorState>(context, listen: false);
-    return BuiltInPageWidget(
+    Widget child = BuiltInPageWidget(
       node: widget.node,
       editorState: editorState,
       builder: (viewPB) {
@@ -72,5 +76,15 @@ class _BoardBlockComponentWidgetState extends State<BoardBlockComponentWidget>
         );
       },
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: widget.node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart

@@ -65,12 +65,17 @@ class CalloutBlockComponentBuilder extends BlockComponentBuilder {
   final BlockComponentConfiguration configuration;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return CalloutBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -84,16 +89,15 @@ class CalloutBlockComponentBuilder extends BlockComponentBuilder {
 }
 
 // the main widget for rendering the callout block
-class CalloutBlockComponentWidget extends StatefulWidget {
+class CalloutBlockComponentWidget extends BlockComponentStatefulWidget {
   const CalloutBlockComponentWidget({
     super.key,
-    required this.node,
-    required this.configuration,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
   });
 
-  final Node node;
-  final BlockComponentConfiguration configuration;
-
   @override
   State<CalloutBlockComponentWidget> createState() =>
       _CalloutBlockComponentWidgetState();
@@ -135,7 +139,7 @@ class _CalloutBlockComponentWidgetState
   // build the callout block widget
   @override
   Widget build(BuildContext context) {
-    return Container(
+    Widget child = Container(
       decoration: BoxDecoration(
         borderRadius: const BorderRadius.all(Radius.circular(8.0)),
         color: backgroundColor,
@@ -168,6 +172,16 @@ class _CalloutBlockComponentWidgetState
         ],
       ),
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: widget.node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   // build the richtext child

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart

@@ -59,13 +59,18 @@ class CodeBlockComponentBuilder extends BlockComponentBuilder {
   final EdgeInsets padding;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return CodeBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
       padding: padding,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -73,16 +78,16 @@ class CodeBlockComponentBuilder extends BlockComponentBuilder {
   bool validate(Node node) => node.delta != null;
 }
 
-class CodeBlockComponentWidget extends StatefulWidget {
+class CodeBlockComponentWidget extends BlockComponentStatefulWidget {
   const CodeBlockComponentWidget({
-    Key? key,
-    required this.node,
-    this.configuration = const BlockComponentConfiguration(),
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
     this.padding = const EdgeInsets.all(0),
-  }) : super(key: key);
+  });
 
-  final Node node;
-  final BlockComponentConfiguration configuration;
   final EdgeInsets padding;
 
   @override
@@ -166,7 +171,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    Widget child = Container(
       decoration: BoxDecoration(
         borderRadius: const BorderRadius.all(Radius.circular(8.0)),
         color: Colors.grey.withOpacity(0.1),
@@ -181,6 +186,16 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
         ],
       ),
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: widget.node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   Widget _buildCodeBlock(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/divider/divider_node_widget.dart

@@ -24,13 +24,18 @@ class DividerBlockComponentBuilder extends BlockComponentBuilder {
   final Color lineColor;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return DividerBlockComponentWidget(
       key: node.key,
       node: node,
       padding: padding,
       lineColor: lineColor,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -38,15 +43,17 @@ class DividerBlockComponentBuilder extends BlockComponentBuilder {
   bool validate(Node node) => node.children.isEmpty;
 }
 
-class DividerBlockComponentWidget extends StatefulWidget {
+class DividerBlockComponentWidget extends BlockComponentStatefulWidget {
   const DividerBlockComponentWidget({
-    Key? key,
-    required this.node,
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
     this.padding = const EdgeInsets.symmetric(vertical: 8.0),
     this.lineColor = Colors.grey,
-  }) : super(key: key);
+  });
 
-  final Node node;
   final EdgeInsets padding;
   final Color lineColor;
 
@@ -61,13 +68,27 @@ class _DividerBlockComponentWidgetState
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    Widget child = Padding(
       padding: widget.padding,
       child: Container(
-        height: 1,
-        color: widget.lineColor,
+        height: 10,
+        alignment: Alignment.center,
+        child: Divider(
+          color: widget.lineColor,
+          thickness: 1,
+        ),
       ),
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: widget.node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   @override

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_node_widget.dart

@@ -20,12 +20,17 @@ class GridBlockComponentBuilder extends BlockComponentBuilder {
   final BlockComponentConfiguration configuration;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return GridBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -36,16 +41,15 @@ class GridBlockComponentBuilder extends BlockComponentBuilder {
       node.attributes[DatabaseBlockKeys.kViewID] is String;
 }
 
-class GridBlockComponentWidget extends StatefulWidget {
+class GridBlockComponentWidget extends BlockComponentStatefulWidget {
   const GridBlockComponentWidget({
     super.key,
-    required this.configuration,
-    required this.node,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
   });
 
-  final Node node;
-  final BlockComponentConfiguration configuration;
-
   @override
   State<GridBlockComponentWidget> createState() =>
       _GridBlockComponentWidgetState();
@@ -62,7 +66,7 @@ class _GridBlockComponentWidgetState extends State<GridBlockComponentWidget>
   @override
   Widget build(BuildContext context) {
     final editorState = Provider.of<EditorState>(context, listen: false);
-    return BuiltInPageWidget(
+    Widget child = BuiltInPageWidget(
       node: widget.node,
       editorState: editorState,
       builder: (viewPB) {
@@ -72,5 +76,15 @@ class _GridBlockComponentWidgetState extends State<GridBlockComponentWidget>
         );
       },
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: widget.node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/math_equation/math_equation_block_component.dart

@@ -61,12 +61,17 @@ class MathEquationBlockComponentBuilder extends BlockComponentBuilder {
   final BlockComponentConfiguration configuration;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return MathEquationBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -76,15 +81,14 @@ class MathEquationBlockComponentBuilder extends BlockComponentBuilder {
       node.attributes[MathEquationBlockKeys.formula] is String;
 }
 
-class MathEquationBlockComponentWidget extends StatefulWidget {
+class MathEquationBlockComponentWidget extends BlockComponentStatefulWidget {
   const MathEquationBlockComponentWidget({
-    Key? key,
-    required this.node,
-    this.configuration = const BlockComponentConfiguration(),
-  }) : super(key: key);
-
-  final Node node;
-  final BlockComponentConfiguration configuration;
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
+  });
 
   @override
   State<MathEquationBlockComponentWidget> createState() =>
@@ -116,7 +120,7 @@ class _MathEquationBlockComponentWidgetState
   }
 
   Widget _buildMathEquation(BuildContext context) {
-    return Container(
+    Widget child = Container(
       width: double.infinity,
       constraints: const BoxConstraints(minHeight: 50),
       padding: padding,
@@ -139,6 +143,16 @@ class _MathEquationBlockComponentWidgetState
               ),
       ),
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   void showEditingDialog() {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/auto_completion_node_widget.dart

@@ -56,11 +56,16 @@ class AutoCompletionBlockComponentBuilder extends BlockComponentBuilder {
   AutoCompletionBlockComponentBuilder();
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return AutoCompletionBlockComponent(
       key: node.key,
       node: node,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -72,14 +77,15 @@ class AutoCompletionBlockComponentBuilder extends BlockComponentBuilder {
   }
 }
 
-class AutoCompletionBlockComponent extends StatefulWidget {
+class AutoCompletionBlockComponent extends BlockComponentStatefulWidget {
   const AutoCompletionBlockComponent({
     super.key,
-    required this.node,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
   });
 
-  final Node node;
-
   @override
   State<AutoCompletionBlockComponent> createState() =>
       _AutoCompletionBlockComponentState();

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_node_widget.dart

@@ -46,11 +46,16 @@ class SmartEditBlockComponentBuilder extends BlockComponentBuilder {
   SmartEditBlockComponentBuilder();
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return SmartEditBlockComponentWidget(
       key: node.key,
       node: node,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -60,14 +65,15 @@ class SmartEditBlockComponentBuilder extends BlockComponentBuilder {
       node.attributes[SmartEditBlockKeys.content] is String;
 }
 
-class SmartEditBlockComponentWidget extends StatefulWidget {
+class SmartEditBlockComponentWidget extends BlockComponentStatefulWidget {
   const SmartEditBlockComponentWidget({
-    required super.key,
-    required this.node,
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
   });
 
-  final Node node;
-
   @override
   State<SmartEditBlockComponentWidget> createState() =>
       _SmartEditBlockComponentWidgetState();

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart

@@ -44,13 +44,18 @@ class ToggleListBlockComponentBuilder extends BlockComponentBuilder {
   final EdgeInsets padding;
 
   @override
-  Widget build(BlockComponentContext blockComponentContext) {
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return ToggleListBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
       padding: padding,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
     );
   }
 
@@ -58,16 +63,16 @@ class ToggleListBlockComponentBuilder extends BlockComponentBuilder {
   bool validate(Node node) => node.delta != null;
 }
 
-class ToggleListBlockComponentWidget extends StatefulWidget {
+class ToggleListBlockComponentWidget extends BlockComponentStatefulWidget {
   const ToggleListBlockComponentWidget({
-    Key? key,
-    required this.node,
-    this.configuration = const BlockComponentConfiguration(),
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
     this.padding = const EdgeInsets.all(0),
-  }) : super(key: key);
+  });
 
-  final Node node;
-  final BlockComponentConfiguration configuration;
   final EdgeInsets padding;
 
   @override

frontend/appflowy_flutter/pubspec.lock

@@ -53,8 +53,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "21f686"
-      resolved-ref: "21f686d6a43137cf6c6d7d040463a1679d13f858"
+      ref: "25eb16"
+      resolved-ref: "25eb1653252efa0c2695a49e7e7493c4030c11e4"
       url: "https://github.com/LucasXu0/appflowy-editor.git"
     source: git
     version: "0.1.12"

frontend/appflowy_flutter/pubspec.yaml

@@ -47,7 +47,7 @@ dependencies:
     # path: /Users/lucas.xu/Desktop/appflowy-editor
     git:
       url: https://github.com/LucasXu0/appflowy-editor.git
-      ref: 21f686
+      ref: 25eb16
   appflowy_popover:
     path: packages/appflowy_popover
 

frontend/appflowy_flutter/test/util.dart

@@ -54,8 +54,10 @@ class AppFlowyUnitTest {
       password: password,
       email: userEmail,
     );
-    return result.fold(
-      (error) {},
+    result.fold(
+      (error) {
+        assert(false, 'Error: $error');
+      },
       (user) {
         userProfile = user;
         userService = UserBackendService(userId: userProfile.id);

frontend/rust-lib/flowy-core/src/deps_resolve/folder2_deps.rs

@@ -19,6 +19,7 @@ use flowy_folder2::manager::Folder2Manager;
 use flowy_folder2::view_ext::{ViewDataProcessor, ViewDataProcessorMap};
 use flowy_folder2::ViewLayout;
 use flowy_user::services::UserSession;
+use lib_dispatch::prelude::ToBytes;
 use lib_infra::future::FutureResult;
 
 pub struct Folder2DepsResolver();
@@ -99,8 +100,8 @@ impl ViewDataProcessor for DocumentViewDataProcessor {
     let view_id = view_id.to_string();
     FutureResult::new(async move {
       let document = manager.get_document(view_id)?;
-      let data = document.lock().get_document()?;
-      let data_bytes = serde_json::to_string(&data)?.as_bytes().to_vec();
+      let data: DocumentDataPB = DocumentDataWrapper(document.lock().get_document()?).into();
+      let data_bytes = data.into_bytes().map_err(|_| FlowyError::invalid_data())?;
       Ok(Bytes::from(data_bytes))
     })
   }