feat: editor theme improvement (#2307)

* chore: make editor style adapt to theme data and add toolbar color

* chore: link to local path

* chore: add pop up menu style

* chore: link to editor main branch

* chore: reset editor path

* chore: upgrade appflowy_editor

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

frontend/appflowy_flutter/lib/plugins/document/editor_styles.dart

@@ -1,32 +1,63 @@
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:provider/provider.dart';
 
 EditorStyle customEditorTheme(BuildContext context) {
   final documentStyle = context.watch<DocumentAppearanceCubit>().state;
-  var editorStyle = Theme.of(context).brightness == Brightness.dark
+  final theme = Theme.of(context);
-      ? EditorStyle.dark
+
-      : EditorStyle.light;
+  var editorStyle = EditorStyle(
-  editorStyle = editorStyle.copyWith(
+    // Editor styles
-    padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 0),
+    padding: const EdgeInsets.symmetric(horizontal: 100),
-    textStyle: editorStyle.textStyle?.copyWith(
+    backgroundColor: theme.colorScheme.surface,
+    cursorColor: theme.colorScheme.primary,
+    // Text styles
+    textPadding: const EdgeInsets.symmetric(vertical: 8.0),
+    textStyle: TextStyle(
       fontFamily: 'poppins',
       fontSize: documentStyle.fontSize,
+      color: theme.colorScheme.onBackground,
     ),
-    placeholderTextStyle: editorStyle.placeholderTextStyle?.copyWith(
+    selectionColor: theme.colorScheme.tertiary.withOpacity(0.2),
-      fontFamily: 'poppins',
+    // Selection menu
-      fontSize: documentStyle.fontSize,
+    selectionMenuBackgroundColor: theme.cardColor,
-    ),
+    selectionMenuItemTextColor: theme.iconTheme.color,
-    bold: editorStyle.bold?.copyWith(
+    selectionMenuItemIconColor: theme.colorScheme.onBackground,
-      fontWeight: FontWeight.w600,
+    selectionMenuItemSelectedIconColor: theme.colorScheme.onSurface,
+    selectionMenuItemSelectedTextColor: theme.colorScheme.onSurface,
+    selectionMenuItemSelectedColor: theme.hoverColor,
+    // Toolbar and its item's style
+    toolbarColor: theme.colorScheme.onTertiary,
+    toolbarElevation: 0,
+    lineHeight: 1.5,
+    placeholderTextStyle:
+        TextStyle(fontSize: documentStyle.fontSize, color: theme.hintColor),
+    bold: const TextStyle(
       fontFamily: 'poppins-Bold',
+      fontWeight: FontWeight.w600,
     ),
-    backgroundColor: Theme.of(context).colorScheme.surface,
+    italic: const TextStyle(fontStyle: FontStyle.italic),
-    selectionMenuBackgroundColor: Theme.of(context).cardColor,
+    underline: const TextStyle(decoration: TextDecoration.underline),
-    selectionMenuItemSelectedIconColor: Theme.of(context).colorScheme.onSurface,
+    strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
-    selectionMenuItemSelectedTextColor: Theme.of(context).colorScheme.onSurface,
+    href: TextStyle(
+      color: theme.colorScheme.primary,
+      decoration: TextDecoration.underline,
+    ),
+    highlightColorHex: '0x6000BCF0',
+    code: GoogleFonts.robotoMono(
+      textStyle: TextStyle(
+        fontSize: documentStyle.fontSize,
+        fontWeight: FontWeight.normal,
+        color: Colors.red,
+        backgroundColor: theme.colorScheme.inverseSurface,
+      ),
+    ),
+    popupMenuFGColor: theme.iconTheme.color,
+    popupMenuHoverColor: theme.colorScheme.tertiaryContainer,
   );
+
   return editorStyle;
 }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart

@@ -5,7 +5,7 @@ import 'package:appflowy/plugins/document/presentation/plugins/cover/change_cove
 import 'package:appflowy/plugins/document/presentation/plugins/cover/emoji_popover.dart';
 import 'package:appflowy/plugins/document/presentation/plugins/cover/icon_widget.dart';
 import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picker.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide FlowySvg;
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/emoji_popover.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/workspace/presentation/widgets/emoji_picker/src/default
 import 'package:appflowy/workspace/presentation/widgets/emoji_picker/src/emoji_view_state.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';

frontend/appflowy_flutter/lib/workspace/application/appearance.dart

@@ -225,6 +225,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
       secondaryContainer: theme.selector,
       onSecondaryContainer: theme.topbarBg,
       tertiary: theme.shader7,
+      // Editor: toolbarColor
+      onTertiary: theme.toolbarColor,
       tertiaryContainer: theme.questionBubbleBG,
       background: theme.surface,
       onBackground: theme.text,

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart

@@ -74,6 +74,8 @@ abstract class FlowyColorScheme {
   final Color hoverFG;
   final Color questionBubbleBG;
   final Color progressBarBGcolor;
+  //editor toolbar BG color
+  final Color toolbarColor;
 
   const FlowyColorScheme({
     required this.surface,
@@ -120,6 +122,7 @@ abstract class FlowyColorScheme {
     required this.hoverFG,
     required this.questionBubbleBG,
     required this.progressBarBGcolor,
+    required this.toolbarColor,
   });
 
   factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart

@@ -20,6 +20,7 @@ const _darkShader3 = Color(0xff363D49);
 const _darkShader5 = Color(0xffBBC3CD);
 const _darkShader6 = Color(0xffF2F2F2);
 const _darkMain1 = Color(0xffe21f74);
+const _darkInput = Color(0xff282E3A);
 
 class DandelionColorScheme extends FlowyColorScheme {
   const DandelionColorScheme.light()
@@ -68,6 +69,7 @@ class DandelionColorScheme extends FlowyColorScheme {
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
           progressBarBGcolor: _lightTint9,
+          toolbarColor: _lightShader1,
         );
 
   const DandelionColorScheme.dark()
@@ -106,7 +108,7 @@ class DandelionColorScheme extends FlowyColorScheme {
             topbarBg: _darkShader1,
             icon: _darkShader5,
             text: _darkShader5,
-          input: const Color(0xff282E3A),
+            input: _darkInput,
             hint: _darkShader5,
             primary: _darkMain1,
             onPrimary: _darkShader1,
@@ -116,5 +118,5 @@ class DandelionColorScheme extends FlowyColorScheme {
             hoverFG: _darkShader1,
             questionBubbleBG: _darkShader3,
             progressBarBGcolor: _darkShader3,
-        );
+            toolbarColor: _darkInput);
 }

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart

@@ -18,6 +18,7 @@ const _darkShader3 = Color(0xff363D49);
 const _darkShader5 = Color(0xffBBC3CD);
 const _darkShader6 = Color(0xffF2F2F2);
 const _darkMain1 = Color(0xff00BCF0);
+const _darkInput = Color(0xff282E3A);
 
 class DefaultColorScheme extends FlowyColorScheme {
   const DefaultColorScheme.light()
@@ -66,6 +67,7 @@ class DefaultColorScheme extends FlowyColorScheme {
           questionBubbleBG: _lightSelector,
           hoverBG3: _lightShader6,
           progressBarBGcolor: _lightTint9,
+          toolbarColor: _lightShader1,
         );
 
   const DefaultColorScheme.dark()
@@ -104,7 +106,7 @@ class DefaultColorScheme extends FlowyColorScheme {
           topbarBg: _darkShader1,
           icon: _darkShader5,
           text: _darkShader5,
-          input: const Color(0xff282E3A),
+          input: _darkInput,
           hint: _darkShader5,
           primary: _darkMain1,
           onPrimary: _darkShader1,
@@ -114,5 +116,6 @@ class DefaultColorScheme extends FlowyColorScheme {
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
           progressBarBGcolor: _darkShader3,
+          toolbarColor: _darkInput,
         );
 }

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart

@@ -21,6 +21,7 @@ const _darkShader3 = Color(0xff363D49);
 const _darkShader5 = Color(0xffBBC3CD);
 const _darkShader6 = Color(0xffF2F2F2);
 const _darkMain1 = Color(0xffA652FB);
+const _darkInput = Color(0xff282E3A);
 
 class LavenderColorScheme extends FlowyColorScheme {
   const LavenderColorScheme.light()
@@ -69,6 +70,7 @@ class LavenderColorScheme extends FlowyColorScheme {
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
           progressBarBGcolor: _lightTint9,
+          toolbarColor: _lightShader1,
         );
 
   const LavenderColorScheme.dark()
@@ -117,5 +119,6 @@ class LavenderColorScheme extends FlowyColorScheme {
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
           progressBarBGcolor: _darkShader3,
+          toolbarColor: _darkInput,
         );
 }

frontend/appflowy_flutter/pubspec.lock

@@ -45,10 +45,10 @@ packages:
     dependency: "direct main"
     description:
       name: appflowy_editor
-      sha256: "0768e7aee78c67c6ddd2ee8cbaa182848c9d94a98d495bd415ff0059b491ac08"
+      sha256: a1dbca3d7d33f4669f1d44bfa1e06b6646f46726c219921b8a59d9ee22bf252d
       url: "https://pub.dev"
     source: hosted
-    version: "0.1.5"
+    version: "0.1.9"
   appflowy_popover:
     dependency: "direct main"
     description:

frontend/appflowy_flutter/pubspec.yaml

@@ -42,7 +42,7 @@ dependencies:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-board.git
       ref: a183c57
-  appflowy_editor: ^0.1.5
+  appflowy_editor: "^0.1.9"
   appflowy_popover:
     path: packages/appflowy_popover