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>
2024-08-30 18:12:39 +00:00 · 2023-04-21 06:26:55 -05:00 · 2023-04-21 06:26:55 -05:00 · d804e3ed6d
commit d804e3ed6d
parent 40e266f5ce
10 changed files with 110 additions and 67 deletions
--- a/frontend/appflowy_flutter/lib/plugins/document/editor_styles.dart
+++ b/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(
+  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,
    ),
-    placeholderTextStyle: editorStyle.placeholderTextStyle?.copyWith(
-      fontFamily: 'poppins',
-      fontSize: documentStyle.fontSize,
-    ),
-    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,
    ),
-    backgroundColor: Theme.of(context).colorScheme.surface,
-    selectionMenuBackgroundColor: Theme.of(context).cardColor,
-    selectionMenuItemSelectedIconColor: Theme.of(context).colorScheme.onSurface,
-    selectionMenuItemSelectedTextColor: Theme.of(context).colorScheme.onSurface,
+    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,
+    ),
+    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;
 }

--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart
+++ b/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';
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/emoji_popover.dart
+++ b/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';
--- a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart
+++ b/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,
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
+++ b/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) {
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
+++ b/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);
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/pubspec.lock
+++ b/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:
--- a/frontend/appflowy_flutter/pubspec.yaml
+++ b/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