Update header style

lib/src/l10n/generated/quill_localizations.dart

@@ -636,6 +636,48 @@ abstract class FlutterQuillLocalizations {
   /// In en, this message translates to:
   /// **'Paste a video using a link'**
   String get pasteAVideoUsingALink;
+
+  /// No description provided for @normal.
+  ///
+  /// In en, this message translates to:
+  /// **'Normal'**
+  String get normal => 'Normal';
+
+  /// No description provided for @heading1.
+  ///
+  /// In en, this message translates to:
+  /// **'Heading 1'**
+  String get heading1 => 'Heading 1';
+
+  /// No description provided for @heading2.
+  ///
+  /// In en, this message translates to:
+  /// **'Heading 2'**
+  String get heading2 => 'Heading 2';
+
+  /// No description provided for @heading3.
+  ///
+  /// In en, this message translates to:
+  /// **'Heading 3'**
+  String get heading3 => 'Heading 3';
+
+  /// No description provided for @heading4.
+  ///
+  /// In en, this message translates to:
+  /// **'Heading 4'**
+  String get heading4 => 'Heading 4';
+
+  /// No description provided for @heading5.
+  ///
+  /// In en, this message translates to:
+  /// **'Heading 5'**
+  String get heading5 => 'Heading 5';
+
+  /// No description provided for @heading6.
+  ///
+  /// In en, this message translates to:
+  /// **'Heading 6'**
+  String get heading6 => 'Heading 6';
 }
 
 class _FlutterQuillLocalizationsDelegate

lib/src/models/config/toolbar/buttons/dropdown_header_style.dart

@@ -32,7 +32,6 @@ class QuillToolbarSelectHeaderStyleDropdownButtonOptions
     this.fillColor,
     this.hoverElevation = 1,
     this.highlightElevation = 1,
-    this.rawItemsMap,
     this.onSelected,
     this.attributes,
     this.padding,
@@ -50,7 +49,6 @@ class QuillToolbarSelectHeaderStyleDropdownButtonOptions
   final Color? fillColor;
   final double hoverElevation;
   final double highlightElevation;
-  final Map<String, String>? rawItemsMap;
   final ValueChanged<String>? onSelected;
   final List<Attribute>? attributes;
   final EdgeInsetsGeometry? padding;
@@ -67,7 +65,6 @@ class QuillToolbarSelectHeaderStyleDropdownButtonOptions
     double? hoverElevation,
     double? highlightElevation,
     List<PopupMenuEntry<String>>? items,
-    Map<String, String>? rawItemsMap,
     ValueChanged<String>? onSelected,
     List<Attribute>? attributes,
     EdgeInsetsGeometry? padding,
@@ -91,7 +88,6 @@ class QuillToolbarSelectHeaderStyleDropdownButtonOptions
   }) {
     return QuillToolbarSelectHeaderStyleDropdownButtonOptions(
       attributes: attributes ?? this.attributes,
-      rawItemsMap: rawItemsMap ?? this.rawItemsMap,
       controller: controller ?? this.controller,
       iconData: iconData ?? this.iconData,
       afterButtonPressed: afterButtonPressed ?? this.afterButtonPressed,

lib/src/models/documents/attribute.dart

@@ -158,12 +158,24 @@ class Attribute<T> extends Equatable {
     Attribute.video.key,
   };
 
+  /// "attributes":{"header": 1 }
   static const Attribute<int?> h1 = HeaderAttribute(level: 1);
 
+  /// "attributes":{"header": 2 }
   static const Attribute<int?> h2 = HeaderAttribute(level: 2);
 
+  /// "attributes":{"header": 3 }
   static const Attribute<int?> h3 = HeaderAttribute(level: 3);
 
+  /// "attributes":{"header": 4 }
+  static const Attribute<int?> h4 = HeaderAttribute(level: 4);
+
+  /// "attributes":{"header": 5 }
+  static const Attribute<int?> h5 = HeaderAttribute(level: 5);
+
+  /// "attributes":{"header": 6 }
+  static const Attribute<int?> h6 = HeaderAttribute(level: 6);
+
   // "attributes":{"align":"left"}
   static const Attribute<String?> leftAlignment = AlignAttribute('left');
 

lib/src/widgets/default_styles.dart

@@ -144,6 +144,9 @@ class DefaultStyles {
     this.h1,
     this.h2,
     this.h3,
+    this.h4,
+    this.h5,
+    this.h6,
     this.paragraph,
     this.bold,
     this.subscript,
@@ -170,6 +173,9 @@ class DefaultStyles {
   final DefaultTextBlockStyle? h1;
   final DefaultTextBlockStyle? h2;
   final DefaultTextBlockStyle? h3;
+  final DefaultTextBlockStyle? h4;
+  final DefaultTextBlockStyle? h5;
+  final DefaultTextBlockStyle? h6;
   final DefaultTextBlockStyle? paragraph;
   final TextStyle? bold;
   final TextStyle? subscript;
@@ -220,9 +226,10 @@ class DefaultStyles {
         h1: DefaultTextBlockStyle(
             defaultTextStyle.style.copyWith(
               fontSize: 34,
-              color: defaultTextStyle.style.color!.withOpacity(0.70),
-              height: 1.15,
-              fontWeight: FontWeight.w300,
+              color: defaultTextStyle.style.color,
+              letterSpacing: -1,
+              height: 1,
+              fontWeight: FontWeight.bold,
               decoration: TextDecoration.none,
             ),
             const VerticalSpacing(16, 0),
@@ -230,37 +237,84 @@ class DefaultStyles {
             null),
         h2: DefaultTextBlockStyle(
             defaultTextStyle.style.copyWith(
-              fontSize: 24,
-              color: defaultTextStyle.style.color!.withOpacity(0.70),
-              height: 1.15,
-              fontWeight: FontWeight.normal,
+              fontSize: 30,
+              color: defaultTextStyle.style.color,
+              letterSpacing: -0.8,
+              height: 1.067,
+              fontWeight: FontWeight.bold,
               decoration: TextDecoration.none,
             ),
             const VerticalSpacing(8, 0),
             const VerticalSpacing(0, 0),
             null),
         h3: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 24,
+            color: defaultTextStyle.style.color,
+            letterSpacing: -0.5,
+            height: 1.083,
+            fontWeight: FontWeight.bold,
+            decoration: TextDecoration.none,
+          ),
+          const VerticalSpacing(8, 0),
+          const VerticalSpacing(0, 0),
+          null,
+        ),
+        h4: DefaultTextBlockStyle(
           defaultTextStyle.style.copyWith(
             fontSize: 20,
-            color: defaultTextStyle.style.color!.withOpacity(0.70),
-            height: 1.25,
-            fontWeight: FontWeight.w500,
+            color: defaultTextStyle.style.color,
+            letterSpacing: -0.4,
+            height: 1.1,
+            fontWeight: FontWeight.bold,
+            decoration: TextDecoration.none,
+          ),
+          const VerticalSpacing(8, 0),
+          const VerticalSpacing(0, 0),
+          null,
+        ),
+        h5: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 18,
+            color: defaultTextStyle.style.color,
+            letterSpacing: -0.2,
+            height: 1.11,
+            fontWeight: FontWeight.bold,
+            decoration: TextDecoration.none,
+          ),
+          const VerticalSpacing(8, 0),
+          const VerticalSpacing(0, 0),
+          null,
+        ),
+        h6: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 16,
+            color: defaultTextStyle.style.color,
+            letterSpacing: -0.1,
+            height: 1.125,
+            fontWeight: FontWeight.bold,
             decoration: TextDecoration.none,
           ),
           const VerticalSpacing(8, 0),
           const VerticalSpacing(0, 0),
           null,
         ),
-        paragraph: DefaultTextBlockStyle(baseStyle, const VerticalSpacing(0, 0),
-            const VerticalSpacing(0, 0), null),
+        paragraph: DefaultTextBlockStyle(
+          baseStyle,
+          const VerticalSpacing(0, 0),
+          const VerticalSpacing(0, 0),
+          null,
+        ),
         bold: const TextStyle(fontWeight: FontWeight.bold),
         subscript: const TextStyle(
           fontFeatures: [
+            FontFeature.liningFigures(),
             FontFeature.subscripts(),
           ],
         ),
         superscript: const TextStyle(
           fontFeatures: [
+            FontFeature.liningFigures(),
             FontFeature.superscripts(),
           ],
         ),
@@ -274,9 +328,12 @@ class DefaultStyles {
           style: inlineCodeStyle,
           header1: inlineCodeStyle.copyWith(
             fontSize: 32,
-            fontWeight: FontWeight.w300,
+            fontWeight: FontWeight.w500,
+          ),
+          header2: inlineCodeStyle.copyWith(
+            fontSize: 22,
+            fontWeight: FontWeight.w500,
           ),
-          header2: inlineCodeStyle.copyWith(fontSize: 22),
           header3: inlineCodeStyle.copyWith(
             fontSize: 18,
             fontWeight: FontWeight.w500,

lib/src/widgets/toolbar/buttons/dropdown_header_style.dart

@@ -27,11 +27,14 @@ class _QuillToolbarSelectHeaderStyleDropdownButtonState
 
   Style get _selectionStyle => controller.getSelectionStyle();
 
-  final _valueToText = <Attribute, String>{
-    Attribute.header: 'Normal',
-    Attribute.h1: 'H1',
-    Attribute.h2: 'H2',
-    Attribute.h3: 'H3',
+  late final _valueToText = <Attribute, String>{
+    Attribute.header: context.loc.normal,
+    Attribute.h1: context.loc.heading1,
+    Attribute.h2: context.loc.heading2,
+    Attribute.h3: context.loc.heading3,
+    Attribute.h4: context.loc.heading4,
+    Attribute.h5: context.loc.heading5,
+    Attribute.h6: context.loc.heading6,
   };
 
   QuillToolbarSelectHeaderStyleDropdownButtonOptions get options {
@@ -74,13 +77,7 @@ class _QuillToolbarSelectHeaderStyleDropdownButtonState
   }
 
   List<Attribute> get _attrbuites {
-    return options.attributes ??
-        const [
-          Attribute.header,
-          Attribute.h1,
-          Attribute.h2,
-          Attribute.h3,
-        ];
+    return options.attributes ?? _valueToText.keys.toList();
   }
 
   @override
@@ -103,18 +100,13 @@ class _QuillToolbarSelectHeaderStyleDropdownButtonState
   @override
   void initState() {
     super.initState();
-    _selectedAttribute = _getHeaderValue();
     controller.addListener(_didChangeEditingValue);
+    _selectedAttribute = _getHeaderValue();
   }
 
   @override
   Widget build(BuildContext context) {
-    assert(
-      _attrbuites.every(
-        (element) => _valueToText.keys.contains(element),
-      ),
-      'All attributes must be one of them: header, h1, h2 or h3',
-    );
+    assert(_attrbuites.every((element) => _valueToText.keys.contains(element)));
 
     final baseButtonConfigurations =
         context.requireQuillToolbarBaseButtonOptions;
@@ -189,7 +181,7 @@ class _QuillToolbarSelectHeaderStyleDropdownButtonState
             enabled: hasFinalWidth,
             wrapper: (child) => Expanded(child: child),
             child: Text(
-              _selectedAttribute!.key,
+              _valueToText[_selectedAttribute]!,
               overflow: options.labelOverflow,
               style: options.style ??
                   TextStyle(
@@ -240,7 +232,9 @@ class _QuillToolbarSelectHeaderStyleDropdownButtonState
             child: Text(
               header.value,
               style: TextStyle(
-                color: header.value == 'N' ? options.defaultItemColor : null,
+                color: header.key == Attribute.header
+                    ? options.defaultItemColor
+                    : null,
               ),
             ),
           ),