feat: optimize the performance (#442)

Author: LucasXu0

codecov.yml

@@ -0,0 +1,2 @@
+ignore:
+  - "lib/src/flutter/"

example/lib/home_page.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'dart:convert';
 import 'dart:io';
+import 'dart:math';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:example/pages/customize_theme_for_editor.dart';
@@ -51,6 +52,7 @@ class _HomePageState extends State<HomePage> {
     super.initState();
 
     _jsonString = rootBundle.loadString('assets/example.json');
+
     _widgetBuilder = (context) => Editor(
           jsonString: _jsonString,
           onEditorStateChange: (editorState) {
@@ -109,6 +111,20 @@ class _HomePageState extends State<HomePage> {
             final jsonString = rootBundle.loadString('assets/example.json');
             _loadEditor(context, jsonString);
           }),
+          _buildListTile(context, 'With Large Document (10000+ lines)', () {
+            final nodes = List.generate(
+              10000,
+              (index) =>
+                  paragraphNode(text: '$index ${generateRandomString(50)}'),
+            );
+            final editorState = EditorState(
+              document: Document(root: pageNode(children: nodes)),
+            );
+            final jsonString = Future.value(
+              jsonEncode(editorState.document.toJson()),
+            );
+            _loadEditor(context, jsonString);
+          }),
           _buildListTile(context, 'With Example.html', () async {
             final htmlString =
                 await rootBundle.loadString('assets/example.html');
@@ -315,3 +331,10 @@ class _HomePageState extends State<HomePage> {
     }
   }
 }
+
+String generateRandomString(int len) {
+  var r = Random();
+  return String.fromCharCodes(
+    List.generate(len, (index) => r.nextInt(33) + 89),
+  );
+}

example/lib/main.dart

@@ -1,10 +1,8 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:example/home_page.dart';
 import 'package:flutter/material.dart';
-
 import 'package:flutter_localizations/flutter_localizations.dart';
 
-import 'package:appflowy_editor/appflowy_editor.dart';
-
 void main() {
   runApp(const MyApp());
 }

example/lib/pages/editor.dart

@@ -37,7 +37,10 @@ class Editor extends StatelessWidget {
               onEditorStateChange(editorState);
             }
           });
-          final scrollController = ScrollController();
+          final editorScrollController = EditorScrollController(
+            editorState: editorState,
+            shrinkWrap: false,
+          );
           if (PlatformExtension.isDesktopOrWeb) {
             return FloatingToolbar(
               items: [
@@ -54,11 +57,11 @@ class Editor extends StatelessWidget {
                 ...alignmentItems,
               ],
               editorState: editorState,
-              scrollController: scrollController,
+              editorScrollController: editorScrollController,
               child: _buildDesktopEditor(
                 context,
                 editorState,
-                scrollController,
+                editorScrollController,
               ),
             );
           } else if (PlatformExtension.isMobile) {
@@ -68,7 +71,7 @@ class Editor extends StatelessWidget {
                   child: _buildMobileEditor(
                     context,
                     editorState,
-                    scrollController,
+                    editorScrollController,
                   ),
                 ),
                 MobileToolbar(
@@ -99,19 +102,19 @@ class Editor extends StatelessWidget {
   Widget _buildMobileEditor(
     BuildContext context,
     EditorState editorState,
-    ScrollController? scrollController,
+    EditorScrollController? editorScrollController,
   ) {
     return AppFlowyEditor(
       editorStyle: const EditorStyle.mobile(),
       editorState: editorState,
-      scrollController: scrollController,
+      editorScrollController: editorScrollController,
     );
   }
 
   Widget _buildDesktopEditor(
     BuildContext context,
     EditorState editorState,
-    ScrollController? scrollController,
+    EditorScrollController? editorScrollController,
   ) {
     final customBlockComponentBuilders = {
       ...standardBlockComponentBuilderMap,
@@ -127,7 +130,8 @@ class Editor extends StatelessWidget {
     };
     return AppFlowyEditor(
       editorState: editorState,
-      scrollController: scrollController,
+      shrinkWrap: true,
+      editorScrollController: editorScrollController,
       blockComponentBuilders: customBlockComponentBuilders,
       commandShortcutEvents: [
         customToggleHighlightCommand(

example/pubspec.yaml

@@ -42,6 +42,7 @@ dependencies:
   universal_html: ^2.0.8
   highlight: ^0.7.0
   http: ^0.13.5
+  show_fps: ^1.0.6
 
 dev_dependencies:
   flutter_test:

lib/src/core/document/node.dart

@@ -2,7 +2,7 @@ import 'dart:collection';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
-import 'package:nanoid/nanoid.dart';
+import 'package:nanoid/non_secure.dart';
 
 abstract class NodeExternalValues {
   const NodeExternalValues();
@@ -39,8 +39,8 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
             ),
           ), // unlink the given children to avoid the error of "node has already a parent"
         _attributes = attributes,
-        id = id ?? nanoid(10) {
-    for (final child in this.children) {
+        id = id ?? nanoid(6) {
+    for (final child in children) {
       child.parent = this;
     }
   }
@@ -80,7 +80,12 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
 
   /// The children of the node.
   final LinkedList<Node> _children;
-  Iterable<Node> get children => _children.toList(growable: false);
+  List<Node> get children {
+    _cacheChildren ??= _children.toList(growable: false);
+    return _cacheChildren!;
+  }
+
+  List<Node>? _cacheChildren;
 
   /// The attributes of the node.
   Attributes _attributes;
@@ -141,7 +146,9 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
 
     entry.parent = this;
 
-    if (children.isEmpty) {
+    _cacheChildren = null;
+
+    if (_children.isEmpty) {
       _children.add(entry);
       notifyListeners();
       return;
@@ -164,6 +171,8 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
     entry.parent = parent;
     super.insertAfter(entry);
 
+    parent?._cacheChildren = null;
+
     // Notifies the new node.
     parent?.notifyListeners();
   }
@@ -173,6 +182,8 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
     entry.parent = parent;
     super.insertBefore(entry);
 
+    parent?._cacheChildren = null;
+
     // Notifies the new node.
     parent?.notifyListeners();
   }
@@ -185,6 +196,8 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
     Log.editor.debug('delete Node $this from path $path');
     super.unlink();
 
+    parent?._cacheChildren = null;
+
     parent?.notifyListeners();
     parent = null;
   }
@@ -230,12 +243,12 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
   }) {
     final node = Node(
       type: type ?? this.type,
-      id: nanoid(10),
+      id: nanoid(6),
       attributes: attributes ?? {...this.attributes},
       children: children ?? [],
     );
-    if (children == null && this.children.isNotEmpty) {
-      for (final child in this.children) {
+    if (children == null && _children.isNotEmpty) {
+      for (final child in _children) {
         node._children.add(
           child.copyWith()..parent = node,
         );
@@ -246,11 +259,12 @@ final class Node extends ChangeNotifier with LinkedListEntry<Node> {
   }
 
   Path _computePath([Path previous = const []]) {
+    final parent = this.parent;
     if (parent == null) {
       return previous;
     }
-    final index = parent!.children.toList().indexOf(this);
-    return parent!._computePath([index, ...previous]);
+    final index = parent.children.indexOf(this);
+    return parent._computePath([index, ...previous]);
   }
 }
 

lib/src/core/document/path.dart

@@ -1,5 +1,6 @@
 import 'dart:math';
 
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/foundation.dart';
 
 typedef Path = List<int>;
@@ -105,4 +106,10 @@ extension PathExtensions on Path {
     }
     return true;
   }
+
+  bool inSelection(Selection? selection) {
+    return selection != null &&
+        selection.start.path <= this &&
+        this <= selection.end.path;
+  }
 }