From c5cea81be2cddf2b13ee274b2b3b6d039210d625 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 25 Oct 2022 21:58:44 +0800 Subject: [PATCH] feat: integrate appflowy editor dark mode --- .../lib/plugins/doc/document_page.dart | 7 +- .../lib/plugins/doc/editor_styles.dart | 136 +++++++++--------- .../appflowy_editor/lib/appflowy_editor.dart | 3 +- .../render/rich_text/bulleted_list_text.dart | 2 +- .../src/render/rich_text/heading_text.dart | 2 +- .../render/rich_text/number_list_text.dart | 2 +- .../lib/src/render/rich_text/quoted_text.dart | 2 +- .../lib/src/render/style/editor_style.dart | 2 +- ..._plugin_styles.dart => plugin_styles.dart} | 0 9 files changed, 85 insertions(+), 71 deletions(-) rename frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/{built_in_plugin_styles.dart => plugin_styles.dart} (100%) diff --git a/frontend/app_flowy/lib/plugins/doc/document_page.dart b/frontend/app_flowy/lib/plugins/doc/document_page.dart index fec32ca76f..7e68111f0a 100644 --- a/frontend/app_flowy/lib/plugins/doc/document_page.dart +++ b/frontend/app_flowy/lib/plugins/doc/document_page.dart @@ -93,15 +93,20 @@ class _DocumentPageState extends State { } 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( diff --git a/frontend/app_flowy/lib/plugins/doc/editor_styles.dart b/frontend/app_flowy/lib/plugins/doc/editor_styles.dart index 09437ff36d..5d638ea73f 100644 --- a/frontend/app_flowy/lib/plugins/doc/editor_styles.dart +++ b/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(); 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(); - return theme.isDark ? Colors.white : Colors.black; - }, - }, - ), - 'text/bulleted-list': builtInPluginStyle - ..addAll( - { - 'bulletColor': (EditorState editorState, Node node) { - final theme = context.watch(); - return theme.isDark ? Colors.white : Colors.black; - }, - }, - ), - }, - ); + return editorStyle; } + +Iterable> customPluginTheme(BuildContext context) { + final theme = context.watch(); + + 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(); +// return theme.isDark ? Colors.white : Colors.black; +// }, +// }, +// ), +// 'text/bulleted-list': builtInPluginStyle +// ..addAll( +// { +// 'bulletColor': (EditorState editorState, Node node) { +// final theme = context.watch(); +// return theme.isDark ? Colors.white : Colors.black; +// }, +// }, +// ), +// }, +// ); +// } diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/appflowy_editor.dart b/frontend/app_flowy/packages/appflowy_editor/lib/appflowy_editor.dart index 50d6e80aae..29cb9f87f6 100644 --- a/frontend/app_flowy/packages/appflowy_editor/lib/appflowy_editor.dart +++ b/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'; diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart index 52fa095f39..77092f75b3 100644 --- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart +++ b/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'; diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/heading_text.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/heading_text.dart index 0ab06bcb6f..60803a7fe9 100644 --- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/heading_text.dart +++ b/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'; diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart index bb9d1bd535..cb2a1a68cd 100644 --- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart +++ b/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'; diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/quoted_text.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/quoted_text.dart index a8176219cf..3182ba9eae 100644 --- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/quoted_text.dart +++ b/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'; diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart index 28fa5f95e5..47d64ac373 100644 --- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart +++ b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart @@ -4,7 +4,7 @@ Iterable> get lightEditorStyleExtension => [ EditorStyle.light, ]; -Iterable> get dartEditorStyleExtension => [ +Iterable> get darkEditorStyleExtension => [ EditorStyle.dark, ]; diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/built_in_plugin_styles.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/plugin_styles.dart similarity index 100% rename from frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/built_in_plugin_styles.dart rename to frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/plugin_styles.dart