feat: integrate appflowy editor dark mode

frontend/app_flowy/lib/plugins/doc/document_page.dart

@@ -93,15 +93,20 @@ class _DocumentPageState extends State<DocumentPage> {
   }
 
   Widget _renderAppFlowyEditor(EditorState editorState) {
+    final theme = Theme.of(context);
     final editor = AppFlowyEditor(
       editorState: editorState,
-      editorStyle: customEditorStyle(context),
       customBuilders: {
         'horizontal_rule': HorizontalRuleWidgetBuilder(),
       },
       shortcutEvents: [
         insertHorizontalRule,
       ],
+      themeData: theme.copyWith(extensions: [
+        ...theme.extensions.values,
+        customEditorTheme(context),
+        ...customPluginTheme(context),
+      ]),
     );
     return Expanded(
       child: SizedBox.expand(

frontend/app_flowy/lib/plugins/doc/editor_styles.dart

@@ -3,77 +3,85 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
-EditorStyle customEditorStyle(BuildContext context) {
+EditorStyle customEditorTheme(BuildContext context) {
   final theme = context.watch<AppTheme>();
   const baseFontSize = 14.0;
   const basePadding = 12.0;
-  var textStyle = theme.isDark
-      ? BuiltInTextStyle.builtInDarkMode()
-      : BuiltInTextStyle.builtIn();
-  textStyle = textStyle.copyWith(
-    defaultTextStyle: textStyle.defaultTextStyle.copyWith(
+
+  var editorStyle = theme.isDark ? EditorStyle.dark : EditorStyle.light;
+  editorStyle = editorStyle.copyWith(
+    textStyle: editorStyle.textStyle?.copyWith(
       fontFamily: 'poppins',
       fontSize: baseFontSize,
     ),
-    bold: textStyle.bold.copyWith(
+    bold: editorStyle.bold?.copyWith(
       fontWeight: FontWeight.w500,
     ),
   );
-  return EditorStyle.defaultStyle().copyWith(
-    padding: const EdgeInsets.symmetric(horizontal: 80),
-    textStyle: textStyle,
-    pluginStyles: {
-      'text/heading': builtInPluginStyle
-        ..update(
-          'textStyle',
-          (_) => (EditorState editorState, Node node) {
-            final headingToFontSize = {
-              'h1': baseFontSize + 12,
-              'h2': baseFontSize + 8,
-              'h3': baseFontSize + 4,
-              'h4': baseFontSize,
-              'h5': baseFontSize,
-              'h6': baseFontSize,
-            };
-            final fontSize =
-                headingToFontSize[node.attributes.heading] ?? baseFontSize;
-            return TextStyle(fontSize: fontSize, fontWeight: FontWeight.w600);
-          },
-        )
-        ..update(
-          'padding',
-          (_) => (EditorState editorState, Node node) {
-            final headingToPadding = {
-              'h1': basePadding + 6,
-              'h2': basePadding + 4,
-              'h3': basePadding + 2,
-              'h4': basePadding,
-              'h5': basePadding,
-              'h6': basePadding,
-            };
-            final padding =
-                headingToPadding[node.attributes.heading] ?? basePadding;
-            return EdgeInsets.only(bottom: padding);
-          },
-        ),
-      'text/number-list': builtInPluginStyle
-        ..addAll(
-          {
-            'numberColor': (EditorState editorState, Node node) {
-              final theme = context.watch<AppTheme>();
-              return theme.isDark ? Colors.white : Colors.black;
-            },
-          },
-        ),
-      'text/bulleted-list': builtInPluginStyle
-        ..addAll(
-          {
-            'bulletColor': (EditorState editorState, Node node) {
-              final theme = context.watch<AppTheme>();
-              return theme.isDark ? Colors.white : Colors.black;
-            },
-          },
-        ),
-    },
-  );
+  return editorStyle;
 }
+
+Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
+  final theme = context.watch<AppTheme>();
+
+  return theme.isDark ? darkPlguinStyleExtension : lightPlguinStyleExtension;
+}
+
+//   return EditorStyle.defaultStyle().copyWith(
+//     padding = const EdgeInsets.symmetric(horizontal: 80),
+//     textStyle = textStyle,
+//     pluginStyles = {
+//       'text/heading': builtInPluginStyle
+//         ..update(
+//           'textStyle',
+//           (_) => (EditorState editorState, Node node) {
+//             final headingToFontSize = {
+//               'h1': baseFontSize + 12,
+//               'h2': baseFontSize + 8,
+//               'h3': baseFontSize + 4,
+//               'h4': baseFontSize,
+//               'h5': baseFontSize,
+//               'h6': baseFontSize,
+//             };
+//             final fontSize =
+//                 headingToFontSize[node.attributes.heading] ?? baseFontSize;
+//             return TextStyle(fontSize: fontSize, fontWeight: FontWeight.w600);
+//           },
+//         )
+//         ..update(
+//           'padding',
+//           (_) => (EditorState editorState, Node node) {
+//             final headingToPadding = {
+//               'h1': basePadding + 6,
+//               'h2': basePadding + 4,
+//               'h3': basePadding + 2,
+//               'h4': basePadding,
+//               'h5': basePadding,
+//               'h6': basePadding,
+//             };
+//             final padding =
+//                 headingToPadding[node.attributes.heading] ?? basePadding;
+//             return EdgeInsets.only(bottom: padding);
+//           },
+//         ),
+//       'text/number-list': builtInPluginStyle
+//         ..addAll(
+//           {
+//             'numberColor': (EditorState editorState, Node node) {
+//               final theme = context.watch<AppTheme>();
+//               return theme.isDark ? Colors.white : Colors.black;
+//             },
+//           },
+//         ),
+//       'text/bulleted-list': builtInPluginStyle
+//         ..addAll(
+//           {
+//             'bulletColor': (EditorState editorState, Node node) {
+//               final theme = context.watch<AppTheme>();
+//               return theme.isDark ? Colors.white : Colors.black;
+//             },
+//           },
+//         ),
+//     },
+//   );
+// }

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

@@ -31,4 +31,5 @@ export 'src/render/rich_text/default_selectable.dart';
 export 'src/render/rich_text/flowy_rich_text.dart';
 export 'src/render/selection_menu/selection_menu_widget.dart';
 export 'src/l10n/l10n.dart';
-export 'src/render/style/built_in_plugin_styles.dart';
+export 'src/render/style/plugin_styles.dart';
+export 'src/render/style/editor_style.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart

@@ -4,7 +4,7 @@ import 'package:appflowy_editor/src/render/rich_text/built_in_text_widget.dart';
 import 'package:appflowy_editor/src/render/rich_text/default_selectable.dart';
 import 'package:appflowy_editor/src/render/rich_text/flowy_rich_text.dart';
 import 'package:appflowy_editor/src/render/selection/selectable.dart';
-import 'package:appflowy_editor/src/render/style/built_in_plugin_styles.dart';
+import 'package:appflowy_editor/src/render/style/plugin_styles.dart';
 import 'package:appflowy_editor/src/service/render_plugin_service.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy_editor/src/extensions/text_style_extension.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/heading_text.dart

@@ -4,7 +4,7 @@ import 'package:appflowy_editor/src/render/rich_text/built_in_text_widget.dart';
 import 'package:appflowy_editor/src/render/rich_text/default_selectable.dart';
 import 'package:appflowy_editor/src/render/rich_text/flowy_rich_text.dart';
 import 'package:appflowy_editor/src/render/selection/selectable.dart';
-import 'package:appflowy_editor/src/render/style/built_in_plugin_styles.dart';
+import 'package:appflowy_editor/src/render/style/plugin_styles.dart';
 import 'package:appflowy_editor/src/service/render_plugin_service.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy_editor/src/extensions/attributes_extension.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart

@@ -4,7 +4,7 @@ import 'package:appflowy_editor/src/render/rich_text/built_in_text_widget.dart';
 import 'package:appflowy_editor/src/render/rich_text/default_selectable.dart';
 import 'package:appflowy_editor/src/render/rich_text/flowy_rich_text.dart';
 import 'package:appflowy_editor/src/render/selection/selectable.dart';
-import 'package:appflowy_editor/src/render/style/built_in_plugin_styles.dart';
+import 'package:appflowy_editor/src/render/style/plugin_styles.dart';
 import 'package:appflowy_editor/src/service/render_plugin_service.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy_editor/src/extensions/attributes_extension.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/quoted_text.dart

@@ -4,7 +4,7 @@ import 'package:appflowy_editor/src/render/rich_text/built_in_text_widget.dart';
 import 'package:appflowy_editor/src/render/rich_text/default_selectable.dart';
 import 'package:appflowy_editor/src/render/rich_text/flowy_rich_text.dart';
 import 'package:appflowy_editor/src/render/selection/selectable.dart';
-import 'package:appflowy_editor/src/render/style/built_in_plugin_styles.dart';
+import 'package:appflowy_editor/src/render/style/plugin_styles.dart';
 import 'package:appflowy_editor/src/service/render_plugin_service.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy_editor/src/extensions/text_style_extension.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart

@@ -4,7 +4,7 @@ Iterable<ThemeExtension<dynamic>> get lightEditorStyleExtension => [
       EditorStyle.light,
     ];
 
-Iterable<ThemeExtension<dynamic>> get dartEditorStyleExtension => [
+Iterable<ThemeExtension<dynamic>> get darkEditorStyleExtension => [
       EditorStyle.dark,
     ];