yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-04 03:54:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: customize appflowy editor heading style

Browse Source
This commit is contained in:
Lucas.Xu 2022-10-25 22:07:30 +08:00
parent c5cea81be2
commit 6a853036a5
1 changed files with 38 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,16 +3,16 @@ import 'package:flowy_infra/theme.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
const _baseFontSize = 14.0;
EditorStyle customEditorTheme(BuildContext context) { EditorStyle customEditorTheme(BuildContext context) {
final theme = context.watch<AppTheme>(); final theme = context.watch<AppTheme>();
const baseFontSize = 14.0;
const basePadding = 12.0;
var editorStyle = theme.isDark ? EditorStyle.dark : EditorStyle.light; var editorStyle = theme.isDark ? EditorStyle.dark : EditorStyle.light;
editorStyle = editorStyle.copyWith( editorStyle = editorStyle.copyWith(
textStyle: editorStyle.textStyle?.copyWith( textStyle: editorStyle.textStyle?.copyWith(
fontFamily: 'poppins', fontFamily: 'poppins',
fontSize: baseFontSize, fontSize: _baseFontSize,
), ),
bold: editorStyle.bold?.copyWith( bold: editorStyle.bold?.copyWith(
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
@ -23,65 +23,39 @@ EditorStyle customEditorTheme(BuildContext context) {
Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) { Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
final theme = context.watch<AppTheme>(); final theme = context.watch<AppTheme>();
const basePadding = 12.0;
return theme.isDark ? darkPlguinStyleExtension : lightPlguinStyleExtension; var headingPluginStyle =
theme.isDark ? HeadingPluginStyle.dark : HeadingPluginStyle.light;
headingPluginStyle = headingPluginStyle.copyWith(
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);
},
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);
},
);
final pluginTheme =
theme.isDark ? darkPlguinStyleExtension : lightPlguinStyleExtension;
return pluginTheme.toList()
..removeWhere((element) => element is HeadingPluginStyle)
..add(headingPluginStyle);
} }
// 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;
// },
// },
// ),
// },
// );
// }