Merge pull request #1054 from LucasXu0/feature/theme

feat: implement theme customizer

Author: LucasXu0

frontend/app_flowy/packages/appflowy_editor/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.0.5
+* Support customize the hotkeys for a shortcut on different platforms.
+* Support customize a theme.
+* Support localizations.
+* Support insert numbered lists.
+* Fix some bugs.
+
 ## 0.0.4
 * Support more shortcut events.
 * Fix some bugs.

frontend/app_flowy/packages/appflowy_editor/README.md

@@ -36,8 +36,8 @@ and the Flutter guide for
 * Design and modify an ever expanding list of customizable features including
   * components (such as form input controls, numbered lists, and rich text widgets)
   * shortcut events
+  * themes
   * menu options (**coming soon!**)
-  * themes (**coming soon!**)
 * [Test-coverage](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/testing.md) and on-going maintenance by AppFlowy's core team and community of more than 1,000 builders
 
 ## Getting Started
@@ -54,23 +54,36 @@ flutter pub get
 Start by creating a new empty AppFlowyEditor object. 
 
 ```dart
+final editorStyle = EditorStyle.defaultStyle();
 final editorState = EditorState.empty(); // an empty state
 final editor = AppFlowyEditor(
     editorState: editorState,
-    keyEventHandlers: const [],
+    shortcutEvents: const [],
     customBuilders: const {},
+    editorStyle: editorStyle,
 );
 ```
 
 You can also create an editor from a JSON object in order to configure your initial state.
 
 ```dart
 final json = ...;
+final editorStyle = EditorStyle.defaultStyle();
 final editorState = EditorState(StateTree.fromJson(data));
 final editor = AppFlowyEditor(
     editorState: editorState,
-    keyEventHandlers: const [],
+    shortcutEvents: const [],
     customBuilders: const {},
+    editorStyle: editorStyle,
+);
+```
+
+> Note: The parameters `localizationsDelegates` need to be assigned in MaterialApp widget
+```dart
+MaterialApp(
+    localizationsDelegates: const [
+        AppFlowyEditorLocalizations.delegate,
+    ]，
 );
 ```
 

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

@@ -16,7 +16,9 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
+        editorStyle: EditorStyle.defaultStyle(),
         shortcutEvents: const [],
+        customBuilders: const {},
       ),
     ),
   );
@@ -116,6 +118,8 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
+        editorStyle: EditorStyle.defaultStyle(),
+        customBuilders: const {},
         shortcutEvents: [
             _underscoreToItalicHandler,
         ],
@@ -145,7 +149,9 @@ Widget build(BuildContext context) {
       alignment: Alignment.topCenter,
       child: AppFlowyEditor(
         editorState: EditorState.empty(),
-        keyEventHandlers: const [],
+        editorStyle: EditorStyle.defaultStyle(),
+        shortcutEvents: const [],
+        customBuilders: const {},
       ),
     ),
   );
@@ -283,6 +289,8 @@ final editorState = EditorState(
 );
 return AppFlowyEditor(
   editorState: editorState,
+  editorStyle: EditorStyle.defaultStyle(),
+  shortcutEvents: const [],
   customBuilders: {
     'network_image': NetworkImageNodeWidgetBuilder(),
   },
@@ -292,3 +300,95 @@ return AppFlowyEditor(
 ![Whew!](./images/customizing_a_component.gif)
 
 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)
+
+We will use a simple example to illustrate how to quickly customize a theme.
+
+Let's start with a blank document:
+
+```dart
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Container(
+      alignment: Alignment.topCenter,
+      child: AppFlowyEditor(
+        editorState: EditorState.empty(),
+        editorStyle: EditorStyle.defaultStyle(),
+        shortcutEvents: const [],
+        customBuilders: const {},
+      ),
+    ),
+  );
+}
+```
+
+At this point, the editor looks like ...
+![Before](./images/customizing_a_theme_before.png)
+
+
+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',
+    ),
+    pluginStyles: {
+      'text/quote': builtInPluginStyle
+        ..update(
+          'textStyle',
+          (_) {
+            return (EditorState editorState, Node node) {
+              return TextStyle(
+                color: Colors.blue[200],
+                fontStyle: FontStyle.italic,
+                fontSize: 12.0,
+              );
+            };
+          },
+        ),
+    },
+  );
+}
+```
+
+Now our 'customize style' function is done and the only task left is to inject it into the AppFlowyEditor.
+
+```dart
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Container(
+      alignment: Alignment.topCenter,
+      child: AppFlowyEditor(
+        editorState: EditorState.empty(),
+        editorStyle: _customizedStyle(),
+        shortcutEvents: const [],
+        customBuilders: const {},
+      ),
+    ),
+  );
+}
+```
+
+![After](./images/customizing_a_theme_after.png)

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

@@ -22,19 +22,19 @@ editor.insertTextNode(text);
 
 // Insert the same text, but with the heading style.
 editor.insertTextNode(text, attributes: {
-    StyleKey.subtype: StyleKey.heading,
-    StyleKey.heading: StyleKey.h1,
+    BuiltInAttributeKey.subtype: BuiltInAttributeKey.heading,
+    BuiltInAttributeKey.heading: BuiltInAttributeKey.h1,
 });
 
 // Insert our text with the bulleted list style and the bold style.
 // If you want to modify the style of the inserted text, you need to use the Delta parameter.
 editor.insertTextNode(
     '',
     attributes: {
-        StyleKey.subtype: StyleKey.bulletedList,
+        BuiltInAttributeKey.subtype: BuiltInAttributeKey.bulletedList,
     },
     delta: Delta([
-        TextInsert(text, {StyleKey.bold: true}),
+        TextInsert(text, {BuiltInAttributeKey.bold: true}),
     ]),
 );
 ```

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

@@ -56,7 +56,7 @@
       {
         "type": "text",
         "attributes": { "subtype": "quote" },
-        "delta": [{ "insert": "Here is an exmaple you can give it a try" }]
+        "delta": [{ "insert": "Here is an example you can give a try" }]
       },
       { "type": "text", "delta": [] },
       {

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

@@ -4,6 +4,8 @@ import 'dart:io';
 import 'package:example/plugin/underscore_to_italic_key_event_handler.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:google_fonts/google_fonts.dart';
 
 import 'package:path_provider/path_provider.dart';
 
@@ -21,6 +23,13 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
+      localizationsDelegates: const [
+        GlobalMaterialLocalizations.delegate,
+        GlobalCupertinoLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+        AppFlowyEditorLocalizations.delegate,
+      ],
+      supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
         primarySwatch: Colors.blue,
@@ -40,7 +49,9 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   int _pageIndex = 0;
-  late EditorState _editorState;
+  EditorState? _editorState;
+  bool darkMode = false;
+  EditorStyle _editorStyle = EditorStyle.defaultStyle();
   Future<String>? _jsonString;
 
   @override
@@ -78,24 +89,29 @@ class _MyHomePageState extends State<MyHomePage> {
     return FutureBuilder<String>(
       future: jsonString,
       builder: (_, snapshot) {
-        if (snapshot.hasData) {
-          _editorState = EditorState(
+        if (snapshot.hasData &&
+            snapshot.connectionState == ConnectionState.done) {
+          _editorState ??= EditorState(
             document: StateTree.fromJson(
               Map<String, Object>.from(
                 json.decode(snapshot.data!),
               ),
             ),
           );
-          _editorState.logConfiguration
+          _editorState!.logConfiguration
             ..level = LogLevel.all
             ..handler = (message) {
               debugPrint(message);
             };
-          return SizedBox(
+          _editorState!.operationStream.listen((event) {
+            debugPrint('Operation: ${event.toJson()}');
+          });
+          return Container(
+            color: darkMode ? Colors.black : Colors.white,
             width: MediaQuery.of(context).size.width,
             child: AppFlowyEditor(
-              editorState: _editorState,
-              editorStyle: const EditorStyle.defaultStyle(),
+              editorState: _editorState!,
+              editorStyle: _editorStyle,
               shortcutEvents: [
                 underscoreToItalicEvent,
               ],
@@ -127,12 +143,23 @@ class _MyHomePageState extends State<MyHomePage> {
           onPressed: () => _switchToPage(2),
         ),
         ActionButton(
-            icon: const Icon(Icons.print),
-            onPressed: () => {_exportDocument(_editorState)}),
+          icon: const Icon(Icons.print),
+          onPressed: () => _exportDocument(_editorState!),
+        ),
         ActionButton(
           icon: const Icon(Icons.import_export),
           onPressed: () => _importDocument(),
         ),
+        ActionButton(
+          icon: const Icon(Icons.color_lens),
+          onPressed: () {
+            setState(() {
+              _editorStyle =
+                  darkMode ? EditorStyle.defaultStyle() : _customizedStyle();
+              darkMode = !darkMode;
+            });
+          },
+        ),
       ],
     );
   }
@@ -166,8 +193,49 @@ class _MyHomePageState extends State<MyHomePage> {
   void _switchToPage(int pageIndex) {
     if (pageIndex != _pageIndex) {
       setState(() {
+        _editorState = null;
         _pageIndex = pageIndex;
       });
     }
   }
+
+  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',
+      ),
+      pluginStyles: {
+        'text/quote': builtInPluginStyle
+          ..update(
+            'textStyle',
+            (_) {
+              return (EditorState editorState, Node node) {
+                return TextStyle(
+                  color: Colors.blue[200],
+                  fontStyle: FontStyle.italic,
+                  fontSize: 12.0,
+                );
+              };
+            },
+          ),
+      },
+    );
+  }
 }

frontend/app_flowy/packages/appflowy_editor/example/assets/example.json

@@ -39,8 +39,10 @@ dependencies:
   url_launcher: ^6.1.5
   video_player: ^2.4.5
   pod_player: 0.0.8
-  flutter_inappwebview: ^5.4.3+7
   path_provider: ^2.0.11
+  google_fonts: ^3.0.1
+  flutter_localizations:
+    sdk: flutter
 
 dev_dependencies:
   flutter_test:

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

@@ -26,3 +26,5 @@ export 'src/service/input_service.dart';
 export 'src/service/shortcut_event/keybinding.dart';
 export 'src/service/shortcut_event/shortcut_event.dart';
 export 'src/service/shortcut_event/shortcut_event_handler.dart';
+export 'src/extensions/attributes_extension.dart';
+export 'src/l10n/l10n.dart';