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 <[email protected]>

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
-      ? EditorStyle.dark
-      : EditorStyle.light;
-  editorStyle = editorStyle.copyWith(
-    padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 0),
-    textStyle: editorStyle.textStyle?.copyWith(
-      fontFamily: 'poppins',
-      fontSize: documentStyle.fontSize,
-    ),
-    placeholderTextStyle: editorStyle.placeholderTextStyle?.copyWith(
+  final theme = Theme.of(context);
+
+  var editorStyle = EditorStyle(
+    // Editor styles
+    padding: const EdgeInsets.symmetric(horizontal: 100),
+    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,
     ),
-    bold: editorStyle.bold?.copyWith(
-      fontWeight: FontWeight.w600,
+    selectionColor: theme.colorScheme.tertiary.withOpacity(0.2),
+    // Selection menu
+    selectionMenuBackgroundColor: theme.cardColor,
+    selectionMenuItemTextColor: theme.iconTheme.color,
+    selectionMenuItemIconColor: theme.colorScheme.onBackground,
+    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,
+    ),
+    italic: const TextStyle(fontStyle: FontStyle.italic),
+    underline: const TextStyle(decoration: TextDecoration.underline),
+    strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
+    href: TextStyle(
+      color: theme.colorScheme.primary,
+      decoration: TextDecoration.underline,
     ),
-    backgroundColor: Theme.of(context).colorScheme.surface,
-    selectionMenuBackgroundColor: Theme.of(context).cardColor,
-    selectionMenuItemSelectedIconColor: Theme.of(context).colorScheme.onSurface,
-    selectionMenuItemSelectedTextColor: Theme.of(context).colorScheme.onSurface,
+    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,53 +69,54 @@ class DandelionColorScheme extends FlowyColorScheme {
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
           progressBarBGcolor: _lightTint9,
+          toolbarColor: _lightShader1,
         );
 
   const DandelionColorScheme.dark()
       : super(
-          surface: const Color(0xff292929),
-          hover: const Color(0xff1f1f1f),
-          selector: const Color(0xff333333),
-          red: const Color(0xfffb006d),
-          yellow: const Color(0xffffd667),
-          green: const Color(0xff66cf80),
-          shader1: _white,
-          shader2: _darkShader2,
-          shader3: const Color(0xff828282),
-          shader4: const Color(0xffbdbdbd),
-          shader5: _darkShader5,
-          shader6: _darkShader6,
-          shader7: _white,
-          bg1: const Color(0xFFD5A200),
-          bg2: _black,
-          bg3: const Color(0xff4f4f4f),
-          bg4: const Color(0xff2c144b),
-          tint1: const Color(0xff8738F5),
-          tint2: const Color(0xffE6336E),
-          tint3: const Color(0xffFF2D9E),
-          tint4: const Color(0xffE9973E),
-          tint5: const Color(0xffFBF000),
-          tint6: const Color(0xffC0F000),
-          tint7: const Color(0xff15F74E),
-          tint8: const Color(0xff00F0E2),
-          tint9: const Color(0xff00BCF0),
-          main1: _darkMain1,
-          main2: const Color(0xffe0196f),
-          shadow: _black,
-          sidebarBg: const Color(0xff232B38),
-          divider: _darkShader3,
-          topbarBg: _darkShader1,
-          icon: _darkShader5,
-          text: _darkShader5,
-          input: const Color(0xff282E3A),
-          hint: _darkShader5,
-          primary: _darkMain1,
-          onPrimary: _darkShader1,
-          hoverBG1: _darkMain1,
-          hoverBG2: _darkMain1,
-          hoverBG3: _darkShader3,
-          hoverFG: _darkShader1,
-          questionBubbleBG: _darkShader3,
-          progressBarBGcolor: _darkShader3,
-        );
+            surface: const Color(0xff292929),
+            hover: const Color(0xff1f1f1f),
+            selector: const Color(0xff333333),
+            red: const Color(0xfffb006d),
+            yellow: const Color(0xffffd667),
+            green: const Color(0xff66cf80),
+            shader1: _white,
+            shader2: _darkShader2,
+            shader3: const Color(0xff828282),
+            shader4: const Color(0xffbdbdbd),
+            shader5: _darkShader5,
+            shader6: _darkShader6,
+            shader7: _white,
+            bg1: const Color(0xFFD5A200),
+            bg2: _black,
+            bg3: const Color(0xff4f4f4f),
+            bg4: const Color(0xff2c144b),
+            tint1: const Color(0xff8738F5),
+            tint2: const Color(0xffE6336E),
+            tint3: const Color(0xffFF2D9E),
+            tint4: const Color(0xffE9973E),
+            tint5: const Color(0xffFBF000),
+            tint6: const Color(0xffC0F000),
+            tint7: const Color(0xff15F74E),
+            tint8: const Color(0xff00F0E2),
+            tint9: const Color(0xff00BCF0),
+            main1: _darkMain1,
+            main2: const Color(0xffe0196f),
+            shadow: _black,
+            sidebarBg: const Color(0xff232B38),
+            divider: _darkShader3,
+            topbarBg: _darkShader1,
+            icon: _darkShader5,
+            text: _darkShader5,
+            input: _darkInput,
+            hint: _darkShader5,
+            primary: _darkMain1,
+            onPrimary: _darkShader1,
+            hoverBG1: _darkMain1,
+            hoverBG2: _darkMain1,
+            hoverBG3: _darkShader3,
+            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