diff --git a/packages/fleather/lib/src/widgets/editor.dart b/packages/fleather/lib/src/widgets/editor.dart index f0f357a6..cb55ec73 100644 --- a/packages/fleather/lib/src/widgets/editor.dart +++ b/packages/fleather/lib/src/widgets/editor.dart @@ -81,11 +81,12 @@ typedef FleatherEmbedBuilder = Widget Function( /// Only supports "horizontal rule" embeds. Widget defaultFleatherEmbedBuilder(BuildContext context, EmbedNode node) { if (node.value.type == 'hr') { - final theme = FleatherTheme.of(context)!; + final fleatherThemeData = FleatherTheme.of(context)!; + return Divider( - height: theme.paragraph.style.fontSize! * theme.paragraph.style.height!, - thickness: 2, - color: Colors.grey.shade200, + height: fleatherThemeData.horizontalRule.height, + thickness: fleatherThemeData.horizontalRule.thickness, + color: fleatherThemeData.horizontalRule.color, ); } throw UnimplementedError( diff --git a/packages/fleather/lib/src/widgets/theme.dart b/packages/fleather/lib/src/widgets/theme.dart index 76fd5211..156c538d 100644 --- a/packages/fleather/lib/src/widgets/theme.dart +++ b/packages/fleather/lib/src/widgets/theme.dart @@ -104,6 +104,9 @@ class FleatherThemeData { /// Style theme for code blocks. final TextBlockTheme code; + /// Style theme for horizontal rule. + final HorizontalRuleThemeData horizontalRule; + FleatherThemeData({ required this.bold, required this.italic, @@ -121,6 +124,7 @@ class FleatherThemeData { required this.lists, required this.quote, required this.code, + required this.horizontalRule, }); factory FleatherThemeData.fallback(BuildContext context) { @@ -158,8 +162,8 @@ class FleatherThemeData { underline: const TextStyle(decoration: TextDecoration.underline), strikethrough: const TextStyle(decoration: TextDecoration.lineThrough), inlineCode: InlineCodeThemeData( - backgroundColor: Colors.grey.shade100, - radius: const Radius.circular(3), + backgroundColor: themeData.colorScheme.surfaceContainerHigh, + radius: const Radius.circular(2), style: inlineCodeStyle, heading1: inlineCodeStyle.copyWith( fontSize: 32, @@ -245,23 +249,31 @@ class FleatherThemeData { lineSpacing: const VerticalSpacing(top: 6, bottom: 2), decoration: BoxDecoration( border: BorderDirectional( - start: BorderSide(width: 4, color: Colors.grey.shade300), + start: BorderSide( + width: 4, + color: themeData.colorScheme.surfaceContainerHigh, + ), ), ), ), code: TextBlockTheme( style: TextStyle( - color: Colors.blue.shade900.withOpacity(0.9), + color: themeData.colorScheme.primary.withOpacity(0.8), fontFamily: fontFamily, fontSize: 13.0, height: 1.4, ), spacing: baseSpacing, decoration: BoxDecoration( - color: Colors.grey.shade50, + color: themeData.colorScheme.surfaceContainerHigh, borderRadius: BorderRadius.circular(2), ), ), + horizontalRule: HorizontalRuleThemeData( + height: baseStyle.fontSize! * baseStyle.height!, + thickness: 2, + color: themeData.colorScheme.surfaceContainerHigh, + ), ); } @@ -282,6 +294,7 @@ class FleatherThemeData { TextBlockTheme? lists, TextBlockTheme? quote, TextBlockTheme? code, + HorizontalRuleThemeData? horizontalRuleThemeData, }) { return FleatherThemeData( bold: bold ?? this.bold, @@ -300,6 +313,7 @@ class FleatherThemeData { lists: lists ?? this.lists, quote: quote ?? this.quote, code: code ?? this.code, + horizontalRule: horizontalRuleThemeData ?? horizontalRule, ); } @@ -410,3 +424,21 @@ class InlineCodeThemeData { int get hashCode => Object.hash(style, heading1, heading2, heading3, backgroundColor, radius); } + +/// Theme data for horizontal rule. +class HorizontalRuleThemeData { + /// Height for horizontal rule. + final double height; + + /// Thickness for horizontal rule. + final double thickness; + + /// Color for horizontal rule. + final Color color; + + HorizontalRuleThemeData({ + required this.height, + required this.thickness, + required this.color, + }); +} diff --git a/packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart b/packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart index c6a87dd2..0b048fc4 100644 --- a/packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart +++ b/packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart @@ -99,32 +99,35 @@ void main() { when(() => editorState.textEditingValue) .thenReturn(initialTextEditingValue); when(() => editorState.themeData).thenReturn(FleatherThemeData( - bold: const TextStyle(), - italic: const TextStyle(), - underline: const TextStyle(), - strikethrough: const TextStyle(), - inlineCode: InlineCodeThemeData(style: const TextStyle()), - link: const TextStyle(), - paragraph: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - heading1: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - heading2: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - heading3: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - heading4: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - heading5: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - heading6: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - lists: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - quote: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()), - code: TextBlockTheme( - style: const TextStyle(), spacing: const VerticalSpacing()))); + bold: const TextStyle(), + italic: const TextStyle(), + underline: const TextStyle(), + strikethrough: const TextStyle(), + inlineCode: InlineCodeThemeData(style: const TextStyle()), + link: const TextStyle(), + paragraph: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + heading1: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + heading2: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + heading3: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + heading4: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + heading5: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + heading6: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + lists: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + quote: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + code: TextBlockTheme( + style: const TextStyle(), spacing: const VerticalSpacing()), + horizontalRule: HorizontalRuleThemeData( + height: 0, thickness: 0, color: Colors.transparent), + )); when(() => rawEditor.controller).thenReturn(controller); when(() => rawEditor.readOnly).thenReturn(false); when(() => rawEditor.autocorrect).thenReturn(true); diff --git a/packages/fleather/test/widgets/theme_test.dart b/packages/fleather/test/widgets/theme_test.dart index e50ed023..fc540cfc 100644 --- a/packages/fleather/test/widgets/theme_test.dart +++ b/packages/fleather/test/widgets/theme_test.dart @@ -48,6 +48,8 @@ void main() { style: TextStyle( color: Colors.blue.shade900.withOpacity(0.9), fontSize: 13.0), spacing: const VerticalSpacing(top: 6.0, bottom: 10.0)), + horizontalRule: + HorizontalRuleThemeData(height: 2, thickness: 2, color: Colors.red), ); final theme2 = FleatherThemeData( @@ -92,6 +94,8 @@ void main() { style: TextStyle( color: Colors.blue.shade800.withOpacity(0.9), fontSize: 12.0), spacing: const VerticalSpacing(top: 4.0, bottom: 8.0)), + horizontalRule: HorizontalRuleThemeData( + height: 4, thickness: 4, color: Colors.green), ); // Merge the two instances