feat: improve performance of document page (#3357)

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor_bloc.dart

@@ -2,10 +2,10 @@ import 'dart:async';
 
 import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database_view/application/cell/checklist_cell_service.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/checklist_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
 import 'package:dartz/dartz.dart';
-import 'package:appflowy_backend/log.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -150,11 +150,16 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     final (bool autoFocus, Selection? selection) =
         _computeAutoFocusParameters();
 
-    final editor = AppFlowyEditor(
+    final editorScrollController = EditorScrollController(
       editorState: widget.editorState,
-      editable: true,
       shrinkWrap: widget.shrinkWrap,
       scrollController: effectiveScrollController,
+    );
+
+    final editor = AppFlowyEditor(
+      editorState: widget.editorState,
+      editable: true,
+      editorScrollController: editorScrollController,
       // setup the auto focus parameters
       autoFocus: widget.autoFocus ?? autoFocus,
       focusedSelection: selection,
@@ -171,18 +176,12 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     );
 
     return Center(
-      child: ConstrainedBox(
-        constraints: const BoxConstraints(
-          maxWidth: double.infinity,
-          maxHeight: double.infinity,
-        ),
-        child: FloatingToolbar(
-          style: styleCustomizer.floatingToolbarStyleBuilder(),
-          items: toolbarItems,
-          editorState: widget.editorState,
-          scrollController: effectiveScrollController,
-          child: editor,
-        ),
+      child: FloatingToolbar(
+        style: styleCustomizer.floatingToolbarStyleBuilder(),
+        items: toolbarItems,
+        editorState: widget.editorState,
+        editorScrollController: editorScrollController,
+        child: editor,
       ),
     );
   }

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

@@ -1,12 +1,12 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/option_action.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
-import 'package:flutter/material.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 
 class BlockOptionButton extends StatelessWidget {
   const BlockOptionButton({
@@ -42,9 +42,11 @@ class BlockOptionButton extends StatelessWidget {
       actions: popoverActions,
       onPopupBuilder: () => blockComponentState.alwaysShowActions = true,
       onClosed: () {
-        editorState.selectionType = null;
-        editorState.selection = null;
-        blockComponentState.alwaysShowActions = false;
+        WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+          editorState.selectionType = null;
+          editorState.selection = null;
+          blockComponentState.alwaysShowActions = false;
+        });
       },
       onSelected: (action, controller) {
         if (action is OptionActionWrapper) {

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

@@ -195,6 +195,17 @@ class _CalloutBlockComponentWidgetState
       child: child,
     );
 
+    child = BlockSelectionContainer(
+      node: node,
+      delegate: this,
+      listenable: editorState.selectionNotifier,
+      blockColor: editorState.editorStyle.selectionColor,
+      supportTypes: const [
+        BlockSelectionType.block,
+      ],
+      child: child,
+    );
+
     if (widget.showActions && widget.actionBuilder != null) {
       child = BlockComponentActionWrapper(
         node: widget.node,
@@ -212,6 +223,7 @@ class _CalloutBlockComponentWidgetState
       padding: padding,
       child: AppFlowyRichText(
         key: forwardKey,
+        delegate: this,
         node: widget.node,
         editorState: editorState,
         placeholderText: placeholderText,
@@ -221,6 +233,8 @@ class _CalloutBlockComponentWidgetState
         placeholderTextSpanDecorator: (textSpan) => textSpan.updateTextStyle(
           placeholderTextStyle,
         ),
+        cursorColor: editorState.editorStyle.cursorColor,
+        selectionColor: editorState.editorStyle.selectionColor,
       ),
     );
   }

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

@@ -204,6 +204,17 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
       child: child,
     );
 
+    child = BlockSelectionContainer(
+      node: node,
+      delegate: this,
+      listenable: editorState.selectionNotifier,
+      blockColor: editorState.editorStyle.selectionColor,
+      supportTypes: const [
+        BlockSelectionType.block,
+      ],
+      child: child,
+    );
+
     if (widget.showActions && widget.actionBuilder != null) {
       child = BlockComponentActionWrapper(
         node: widget.node,
@@ -235,6 +246,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
       padding: widget.padding,
       child: AppFlowyRichText(
         key: forwardKey,
+        delegate: this,
         node: widget.node,
         editorState: editorState,
         placeholderText: placeholderText,
@@ -246,6 +258,8 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
         placeholderTextSpanDecorator: (textSpan) => TextSpan(
           style: textStyle,
         ),
+        cursorColor: editorState.editorStyle.cursorColor,
+        selectionColor: editorState.editorStyle.selectionColor,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_copy_command.dart

@@ -28,7 +28,7 @@ CommandShortcutEventHandler _copyCommandHandler = (editorState) {
   // plain text.
   final text = editorState.getTextInSelection(selection).join('\n');
 
-  final nodes = editorState.getSelectedNodes(selection);
+  final nodes = editorState.getSelectedNodes(selection: selection);
   final document = Document.blank()..insert([0], nodes);
 
   // in app json

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart

@@ -6,7 +6,6 @@ import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picke
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
-
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flutter/material.dart';
@@ -202,7 +201,7 @@ class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
       child: Container(
         alignment: Alignment.bottomLeft,
         width: double.infinity,
-        padding: const EdgeInsets.symmetric(horizontal: 80),
+        padding: const EdgeInsets.symmetric(horizontal: 40),
         child: SizedBox(
           height: 28,
           child: Row(

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

@@ -171,6 +171,7 @@ class _ToggleListBlockComponentWidgetState
           Expanded(
             child: AppFlowyRichText(
               key: forwardKey,
+              delegate: this,
               node: widget.node,
               editorState: editorState,
               placeholderText: placeholderText,
@@ -183,6 +184,8 @@ class _ToggleListBlockComponentWidgetState
                 placeholderTextStyle,
               ),
               textDirection: textDirection,
+              cursorColor: editorState.editorStyle.cursorColor,
+              selectionColor: editorState.editorStyle.selectionColor,
             ),
           ),
         ],
@@ -195,6 +198,17 @@ class _ToggleListBlockComponentWidgetState
       child: child,
     );
 
+    child = BlockSelectionContainer(
+      node: node,
+      delegate: this,
+      listenable: editorState.selectionNotifier,
+      blockColor: editorState.editorStyle.selectionColor,
+      supportTypes: const [
+        BlockSelectionType.block,
+      ],
+      child: child,
+    );
+
     if (widget.showActions && widget.actionBuilder != null) {
       child = BlockComponentActionWrapper(
         node: node,

frontend/appflowy_flutter/pubspec.lock

@@ -54,8 +54,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "3f2db9b"
-      resolved-ref: "3f2db9b416f7c7512acba397e0cbb342fabaf7a2"
+      ref: "4a92c88"
+      resolved-ref: "4a92c88b6611af95909e4618be3970cc20f6d930"
       url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
     source: git
     version: "1.3.0"

frontend/appflowy_flutter/pubspec.yaml

@@ -48,7 +48,7 @@ dependencies:
   appflowy_editor:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: 3f2db9b
+      ref: 4a92c88
   appflowy_popover:
     path: packages/appflowy_popover