Merge pull request #1380 from LucasXu0/appflowy_editor_0_0_7

appflowy editor 0.0.7

Author: LucasXu0

frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md

@@ -16,7 +16,6 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
-        editorStyle: EditorStyle.defaultStyle(),
         shortcutEvents: const [],
         customBuilders: const {},
       ),
@@ -93,7 +92,7 @@ ShortcutEventHandler _underscoreToItalicHandler = (editorState, event) {
   // Delete the previous 'underscore',
   // update the style of the text surrounded by the two underscores to 'italic',
   // and update the cursor position.
-  TransactionBuilder(editorState)
+  final transaction = editorState.transaction
     ..deleteText(textNode, firstUnderscore, 1)
     ..formatText(
       textNode,
@@ -108,8 +107,8 @@ ShortcutEventHandler _underscoreToItalicHandler = (editorState, event) {
         path: textNode.path,
         offset: selection.end.offset - 1,
       ),
-    )
-    ..commit();
+    );
+  editorState.apply(transaction);
 
   return KeyEventResult.handled;
 };
@@ -125,7 +124,6 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
-        editorStyle: EditorStyle.defaultStyle(),
         customBuilders: const {},
         shortcutEvents: [
           underscoreToItalic,
@@ -138,7 +136,7 @@ Widget build(BuildContext context) {
 
 ![After](./images/customize_a_shortcut_event_after.gif)
 
-Check out the [complete code](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/underscore_to_italic.dart) file of this example.
+Check out the [complete code](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/markdown_syntax_to_styled_text.dart) file of this example.
 
 
 ## Customizing a Component
@@ -156,7 +154,6 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
-        editorStyle: EditorStyle.defaultStyle(),
         shortcutEvents: const [],
         customBuilders: const {},
       ),
@@ -180,7 +177,7 @@ We'll use `network_image` in this case. And we add `network_image_src` to the `a
 
 Then, we create a class that inherits [NodeWidgetBuilder](../lib/src/service/render_plugin_service.dart). As shown in the autoprompt, we need to implement two functions:
 1. one returns a widget 
-2. the other verifies the correctness of the [Node](../lib/src/document/node.dart).
+2. the other verifies the correctness of the [Node](../lib/src/core/document/node.dart).
 
 
 ```dart
@@ -308,7 +305,7 @@ return AppFlowyEditor(
 
 Check out the [complete code](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/network_image_node_widget.dart) file of this example.
 
-## Customizing a Theme (New Feature in 0.0.5, Alpha)
+## Customizing a Theme (New Feature in 0.0.7)
 
 We will use a simple example to illustrate how to quickly customize a theme.
 
@@ -322,7 +319,6 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
-        editorStyle: EditorStyle.defaultStyle(),
         shortcutEvents: const [],
         customBuilders: const {},
       ),
@@ -338,44 +334,41 @@ At this point, the editor looks like ...
 Next, we will customize the `EditorStyle`.
 
 ```dart
-EditorStyle _customizedStyle() {
-  final editorStyle = EditorStyle.defaultStyle();
-  return editorStyle.copyWith(
-    cursorColor: Colors.white,
-    selectionColor: Colors.blue.withOpacity(0.3),
-    textStyle: editorStyle.textStyle.copyWith(
-      defaultTextStyle: GoogleFonts.poppins().copyWith(
-        color: Colors.white,
-        fontSize: 14.0,
-      ),
-      defaultPlaceholderTextStyle: GoogleFonts.poppins().copyWith(
-        color: Colors.white.withOpacity(0.5),
-        fontSize: 14.0,
-      ),
-      bold: const TextStyle(fontWeight: FontWeight.w900),
-      code: TextStyle(
-        fontStyle: FontStyle.italic,
-        color: Colors.red[300],
-        backgroundColor: Colors.grey.withOpacity(0.3),
-      ),
-      highlightColorHex: '0x6FFFEB3B',
+ThemeData customizeEditorTheme(BuildContext context) {
+  final dark = EditorStyle.dark;
+  final editorStyle = dark.copyWith(
+    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 150),
+    cursorColor: Colors.red.shade600,
+    selectionColor: Colors.yellow.shade600.withOpacity(0.5),
+    textStyle: GoogleFonts.poppins().copyWith(
+      fontSize: 14,
+      color: Colors.white,
+    ),
+    placeholderTextStyle: GoogleFonts.poppins().copyWith(
+      fontSize: 14,
+      color: Colors.grey.shade400,
     ),
-    pluginStyles: {
-      'text/quote': builtInPluginStyle
-        ..update(
-          'textStyle',
-          (_) {
-            return (EditorState editorState, Node node) {
-              return TextStyle(
-                color: Colors.blue[200],
-                fontStyle: FontStyle.italic,
-                fontSize: 12.0,
-              );
-            };
-          },
-        ),
-    },
+    code: dark.code?.copyWith(
+      backgroundColor: Colors.lightBlue.shade200,
+      fontStyle: FontStyle.italic,
+    ),
+    highlightColorHex: '0x60FF0000', // red
   );
+
+  final quote = QuotedTextPluginStyle.dark.copyWith(
+    textStyle: (_, __) => GoogleFonts.poppins().copyWith(
+      fontSize: 14,
+      color: Colors.blue.shade400,
+      fontStyle: FontStyle.italic,
+      fontWeight: FontWeight.w700,
+    ),
+  );
+
+  return Theme.of(context).copyWith(extensions: [
+    editorStyle,
+    ...darkPlguinStyleExtension,
+    quote,
+  ]);
 }
 ```
 
@@ -389,7 +382,7 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
-        editorStyle: _customizedStyle(),
+        themeData: customizeEditorTheme(context),
         shortcutEvents: const [],
         customBuilders: const {},
       ),

frontend/app_flowy/packages/appflowy_editor/documentation/images/customizing_a_theme_after.png

@@ -1,13 +1,14 @@
 import 'dart:convert';
 import 'dart:io';
 
-import 'package:example/plugin/code_block_node_widget.dart';
-import 'package:example/plugin/horizontal_rule_node_widget.dart';
-import 'package:example/plugin/tex_block_node_widget.dart';
+import 'package:example/plugin/editor_theme.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import 'package:example/plugin/code_block_node_widget.dart';
+import 'package:example/plugin/horizontal_rule_node_widget.dart';
+import 'package:example/plugin/tex_block_node_widget.dart';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:path_provider/path_provider.dart';
@@ -26,22 +27,16 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      localizationsDelegates: const [
+    return const MaterialApp(
+      localizationsDelegates: [
         GlobalMaterialLocalizations.delegate,
         GlobalCupertinoLocalizations.delegate,
         GlobalWidgetsLocalizations.delegate,
         AppFlowyEditorLocalizations.delegate,
       ],
-      supportedLocales: const [Locale('en', 'US')],
+      supportedLocales: [Locale('en', 'US')],
       debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-        // extensions: [HeadingPluginStyle.light],
-      ),
-      darkTheme: ThemeData.dark(),
-      themeMode: ThemeMode.dark,
-      home: const MyHomePage(title: 'AppFlowyEditor Example'),
+      home: MyHomePage(title: 'AppFlowyEditor Example'),
     );
   }
 }
@@ -60,25 +55,13 @@ class _MyHomePageState extends State<MyHomePage> {
   bool darkMode = false;
   Future<String>? _jsonString;
 
+  ThemeData? _editorThemeData;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       extendBodyBehindAppBar: true,
       body: _buildEditor(context),
-      // body: Center(
-      //   child: ContextMenu(editorState: EditorState.empty(), items: [
-      //     [
-      //       ContextMenuItem(name: 'ABCDEFGHIJKLM', onPressed: (editorState) {}),
-      //       ContextMenuItem(name: 'A', onPressed: (editorState) {}),
-      //       ContextMenuItem(name: 'A', onPressed: (editorState) {})
-      //     ],
-      //     [
-      //       ContextMenuItem(name: 'B', onPressed: (editorState) {}),
-      //       ContextMenuItem(name: 'B', onPressed: (editorState) {}),
-      //       ContextMenuItem(name: 'B', onPressed: (editorState) {})
-      //     ]
-      //   ]),
-      // ),
       floatingActionButton: _buildExpandableFab(),
     );
   }
@@ -92,10 +75,6 @@ class _MyHomePageState extends State<MyHomePage> {
         rootBundle.loadString('assets/example.json'),
       );
     } else if (_pageIndex == 1) {
-      return _buildEditorWithJsonString(
-        rootBundle.loadString('assets/big_document.json'),
-      );
-    } else if (_pageIndex == 2) {
       return _buildEditorWithJsonString(
         Future.value(
           jsonEncode(EditorState.empty().document.toJson()),
@@ -126,32 +105,19 @@ class _MyHomePageState extends State<MyHomePage> {
           _editorState!.transactionStream.listen((event) {
             debugPrint('Transaction: ${event.toJson()}');
           });
-          final themeData = darkMode
-              ? ThemeData.dark().copyWith(extensions: [
-                  HeadingPluginStyle.dark,
-                  CheckboxPluginStyle.dark,
-                  NumberListPluginStyle.dark,
-                  QuotedTextPluginStyle.dark,
-                  BulletedListPluginStyle.dark,
-                  EditorStyle.dark,
-                ])
-              : ThemeData.light().copyWith(
-                  extensions: [
-                    HeadingPluginStyle.light,
-                    CheckboxPluginStyle.light,
-                    NumberListPluginStyle.light,
-                    QuotedTextPluginStyle.light,
-                    BulletedListPluginStyle.light,
-                    EditorStyle.light,
-                  ],
-                );
+          _editorThemeData ??= Theme.of(context).copyWith(extensions: [
+            if (darkMode) ...darkEditorStyleExtension,
+            if (darkMode) ...darkPlguinStyleExtension,
+            if (!darkMode) ...lightEditorStyleExtension,
+            if (!darkMode) ...lightPlguinStyleExtension,
+          ]);
           return Container(
             color: darkMode ? Colors.black : Colors.white,
             width: MediaQuery.of(context).size.width,
             child: AppFlowyEditor(
               editorState: _editorState!,
-              themeData: themeData,
               editable: true,
+              themeData: _editorThemeData,
               customBuilders: {
                 'text/code_block': CodeBlockNodeWidgetBuilder(),
                 'tex': TeXBlockNodeWidgetBuidler(),
@@ -190,10 +156,6 @@ class _MyHomePageState extends State<MyHomePage> {
           icon: const Icon(Icons.abc),
           onPressed: () => _switchToPage(1),
         ),
-        ActionButton(
-          icon: const Icon(Icons.abc),
-          onPressed: () => _switchToPage(2),
-        ),
         ActionButton(
           icon: const Icon(Icons.print),
           onPressed: () => _exportDocument(_editorState!),
@@ -203,13 +165,22 @@ class _MyHomePageState extends State<MyHomePage> {
           onPressed: () async => await _importDocument(),
         ),
         ActionButton(
-          icon: const Icon(Icons.color_lens),
+          icon: const Icon(Icons.dark_mode),
           onPressed: () {
             setState(() {
               darkMode = !darkMode;
             });
           },
         ),
+        ActionButton(
+          icon: const Icon(Icons.color_lens),
+          onPressed: () {
+            setState(() {
+              _editorThemeData = customizeEditorTheme(context);
+              darkMode = true;
+            });
+          },
+        ),
       ],
     );
   }
@@ -269,6 +240,7 @@ class _MyHomePageState extends State<MyHomePage> {
   void _switchToPage(int pageIndex) {
     if (pageIndex != _pageIndex) {
       setState(() {
+        _editorThemeData = null;
         _editorState = null;
         _pageIndex = pageIndex;
       });

frontend/app_flowy/packages/appflowy_editor/documentation/images/customizing_a_theme_before.png

@@ -0,0 +1,40 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+ThemeData customizeEditorTheme(BuildContext context) {
+  final dark = EditorStyle.dark;
+  final editorStyle = dark.copyWith(
+    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 150),
+    cursorColor: Colors.red.shade600,
+    selectionColor: Colors.yellow.shade600.withOpacity(0.5),
+    textStyle: GoogleFonts.poppins().copyWith(
+      fontSize: 14,
+      color: Colors.white,
+    ),
+    placeholderTextStyle: GoogleFonts.poppins().copyWith(
+      fontSize: 14,
+      color: Colors.grey.shade400,
+    ),
+    code: dark.code?.copyWith(
+      backgroundColor: Colors.lightBlue.shade200,
+      fontStyle: FontStyle.italic,
+    ),
+    highlightColorHex: '0x60FF0000', // red
+  );
+
+  final quote = QuotedTextPluginStyle.dark.copyWith(
+    textStyle: (_, __) => GoogleFonts.poppins().copyWith(
+      fontSize: 14,
+      color: Colors.blue.shade400,
+      fontStyle: FontStyle.italic,
+      fontWeight: FontWeight.w700,
+    ),
+  );
+
+  return Theme.of(context).copyWith(extensions: [
+    editorStyle,
+    ...darkPlguinStyleExtension,
+    quote,
+  ]);
+}

frontend/app_flowy/packages/appflowy_editor/example/lib/main.dart

@@ -15,6 +15,7 @@ import 'package:intl/intl.dart';
 import 'package:intl/message_lookup_by_library.dart';
 import 'package:intl/src/intl_helpers.dart';
 
+import 'messages_bn_BN.dart' as messages_bn_bn;
 import 'messages_ca.dart' as messages_ca;
 import 'messages_cs-CZ.dart' as messages_cs_cz;
 import 'messages_de-DE.dart' as messages_de_de;
@@ -39,6 +40,7 @@ import 'messages_zh-TW.dart' as messages_zh_tw;
 
 typedef Future<dynamic> LibraryLoader();
 Map<String, LibraryLoader> _deferredLibraries = {
+  'bn_BN': () => new Future.value(null),
   'ca': () => new Future.value(null),
   'cs_CZ': () => new Future.value(null),
   'de_DE': () => new Future.value(null),
@@ -64,6 +66,8 @@ Map<String, LibraryLoader> _deferredLibraries = {
 
 MessageLookupByLibrary? _findExact(String localeName) {
   switch (localeName) {
+    case 'bn_BN':
+      return messages_bn_bn.messages;
     case 'ca':
       return messages_ca.messages;
     case 'cs_CZ':