feat: improve performance of document page (#3357)

2024-08-30 18:12:39 +00:00 · 2023-09-12 10:29:41 +08:00 · 2023-09-12 10:29:41 +08:00 · 71071b60b2
commit 71071b60b2
parent 608255fa0f
10 changed files with 68 additions and 26 deletions
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor_bloc.dart
+++ b/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';

--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/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 editorScrollController = EditorScrollController(
+      editorState: widget.editorState,
+      shrinkWrap: widget.shrinkWrap,
+      scrollController: effectiveScrollController,
+    );
+
    final editor = AppFlowyEditor(
      editorState: widget.editorState,
      editable: true,
-      shrinkWrap: widget.shrinkWrap,
-      scrollController: effectiveScrollController,
+      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,
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart
+++ b/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) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
+++ b/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,
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
+++ b/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,
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_copy_command.dart
+++ b/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
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
+++ b/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,
--- a/frontend/appflowy_flutter/pubspec.lock
+++ b/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"
--- a/frontend/appflowy_flutter/pubspec.yaml
+++ b/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