From 6a853036a56c84bdb7fd931b07a564831b451446 Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Tue, 25 Oct 2022 22:07:30 +0800
Subject: [PATCH] feat: customize appflowy editor heading style

---
 .../lib/plugins/doc/editor_styles.dart        | 102 +++++++-----------
 1 file changed, 38 insertions(+), 64 deletions(-)

diff --git a/frontend/app_flowy/lib/plugins/doc/editor_styles.dart b/frontend/app_flowy/lib/plugins/doc/editor_styles.dart
index 5d638ea73f..bbc9275444 100644
--- a/frontend/app_flowy/lib/plugins/doc/editor_styles.dart
+++ b/frontend/app_flowy/lib/plugins/doc/editor_styles.dart
@@ -3,16 +3,16 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
+const _baseFontSize = 14.0;
+
 EditorStyle customEditorTheme(BuildContext context) {
   final theme = context.watch<AppTheme>();
-  const baseFontSize = 14.0;
-  const basePadding = 12.0;
 
   var editorStyle = theme.isDark ? EditorStyle.dark : EditorStyle.light;
   editorStyle = editorStyle.copyWith(
     textStyle: editorStyle.textStyle?.copyWith(
       fontFamily: 'poppins',
-      fontSize: baseFontSize,
+      fontSize: _baseFontSize,
     ),
     bold: editorStyle.bold?.copyWith(
       fontWeight: FontWeight.w500,
@@ -23,65 +23,39 @@ EditorStyle customEditorTheme(BuildContext context) {
 
 Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
   final theme = context.watch<AppTheme>();
-
-  return theme.isDark ? darkPlguinStyleExtension : lightPlguinStyleExtension;
+  const basePadding = 12.0;
+  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;
-//             },
-//           },
-//         ),
-//     },
-//   );
-// }