Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: integrate appflowy editor dark mode

Browse Source
This commit is contained in:
Lucas.Xu 2022-10-25 21:58:44 +08:00
parent dde50d32d6
commit c5cea81be2
9 changed files with 85 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/app_flowy/lib/plugins/doc/document_page.dart
View File

@ -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(

136
frontend/app_flowy/lib/plugins/doc/editor_styles.dart
View File

@ -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;
// },
// },
// ),
// },
// );
// }

3
frontend/app_flowy/packages/appflowy_editor/lib/appflowy_editor.dart
View File

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

@ -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';

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

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

0
frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/built_in_plugin_styles.dart → frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/plugin_styles.dart
View File