2022-10-22 21:57:44 +08:00
|
|
|
import 'package:appflowy_editor/appflowy_editor.dart';
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
2022-10-25 22:07:30 +08:00
|
|
|
const _baseFontSize = 14.0;
|
|
|
|
|
2022-10-25 21:58:44 +08:00
|
|
|
EditorStyle customEditorTheme(BuildContext context) {
|
2022-11-10 14:22:18 +08:00
|
|
|
var editorStyle = Theme.of(context).brightness == Brightness.dark
|
|
|
|
? EditorStyle.dark
|
|
|
|
: EditorStyle.light;
|
2022-10-25 21:58:44 +08:00
|
|
|
editorStyle = editorStyle.copyWith(
|
2022-11-22 20:06:54 +08:00
|
|
|
padding: const EdgeInsets.all(0),
|
2022-10-25 21:58:44 +08:00
|
|
|
textStyle: editorStyle.textStyle?.copyWith(
|
2022-10-22 21:57:44 +08:00
|
|
|
fontFamily: 'poppins',
|
2022-10-25 22:07:30 +08:00
|
|
|
fontSize: _baseFontSize,
|
2022-10-22 21:57:44 +08:00
|
|
|
),
|
2022-10-26 14:51:39 +08:00
|
|
|
placeholderTextStyle: editorStyle.placeholderTextStyle?.copyWith(
|
|
|
|
fontFamily: 'poppins',
|
|
|
|
fontSize: _baseFontSize,
|
|
|
|
),
|
2022-10-25 21:58:44 +08:00
|
|
|
bold: editorStyle.bold?.copyWith(
|
2022-10-22 21:57:44 +08:00
|
|
|
fontWeight: FontWeight.w500,
|
|
|
|
),
|
2022-11-14 15:31:39 +08:00
|
|
|
backgroundColor: Theme.of(context).colorScheme.surface,
|
2022-10-22 21:57:44 +08:00
|
|
|
);
|
2022-10-25 21:58:44 +08:00
|
|
|
return editorStyle;
|
2022-10-22 21:57:44 +08:00
|
|
|
}
|
2022-10-25 21:58:44 +08:00
|
|
|
|
|
|
|
Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
|
2022-10-25 22:07:30 +08:00
|
|
|
const basePadding = 12.0;
|
2022-11-10 14:22:18 +08:00
|
|
|
var headingPluginStyle = Theme.of(context).brightness == Brightness.dark
|
|
|
|
? HeadingPluginStyle.dark
|
|
|
|
: HeadingPluginStyle.light;
|
2022-10-25 22:07:30 +08:00
|
|
|
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);
|
|
|
|
},
|
|
|
|
);
|
2022-11-10 14:22:18 +08:00
|
|
|
final pluginTheme = Theme.of(context).brightness == Brightness.dark
|
|
|
|
? darkPlguinStyleExtension
|
|
|
|
: lightPlguinStyleExtension;
|
2022-10-25 22:07:30 +08:00
|
|
|
return pluginTheme.toList()
|
|
|
|
..removeWhere((element) => element is HeadingPluginStyle)
|
|
|
|
..add(headingPluginStyle);
|
2022-10-25 21:58:44 +08:00
|
|
|
}
|