Create QuillToolbarSelectHeaderStyleDropdownButton

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/l10n/generated/quill_localizations_ru.dart

@@ -229,22 +229,43 @@ class FlutterQuillLocalizationsRu extends FlutterQuillLocalizations {
   String get insertImage => 'Вставить изображение';
 
   @override
-  String get pickAPhotoFromYourGallery => 'Pick a photo from your gallery';
+  String get pickAPhotoFromYourGallery => 'Выберите фотографю из вашей галереи';
 
   @override
   String get takeAPhotoUsingYourCamera =>
-      'Take a photo using your phone camera';
+      'Создайте фотографю, использую фотокамеру';
 
   @override
-  String get pasteAPhotoUsingALink => 'Paste a photo using a link';
+  String get pasteAPhotoUsingALink => 'Вставьте фотографию, используя ссылку';
 
   @override
-  String get pickAVideoFromYourGallery => 'Pick a video from your gallery';
+  String get pickAVideoFromYourGallery => 'Выберете видео из вашей галереи';
 
   @override
   String get recordAVideoUsingYourCamera =>
-      'Record a video using your phone camera';
+      'Запишите видео, используя вдеокамеру';
 
   @override
-  String get pasteAVideoUsingALink => 'Paste a video using a link';
+  String get pasteAVideoUsingALink => 'Вставьте видео, используя ссылку';
+
+  @override
+  String get normal => 'Обычный';
+
+  @override
+  String get heading1 => 'Заголовок 1';
+
+  @override
+  String get heading2 => 'Заголовок 2';
+
+  @override
+  String get heading3 => 'Заголовок 3';
+
+  @override
+  String get heading4 => 'Заголовок 4';
+
+  @override
+  String get heading5 => 'Заголовок 5';
+
+  @override
+  String get heading6 => 'Заголовок 6';
 }

lib/src/l10n/generated/quill_localizations_uk.dart

@@ -231,22 +231,44 @@ class FlutterQuillLocalizationsUk extends FlutterQuillLocalizations {
   String get insertImage => 'Вставити зображення';
 
   @override
-  String get pickAPhotoFromYourGallery => 'Pick a photo from your gallery';
+  String get pickAPhotoFromYourGallery => 'Оберіть фотографію з вашої галереї';
 
   @override
   String get takeAPhotoUsingYourCamera =>
-      'Take a photo using your phone camera';
+      'Створіть фотографію, використовуючи фотокамеру';
 
   @override
-  String get pasteAPhotoUsingALink => 'Paste a photo using a link';
+  String get pasteAPhotoUsingALink =>
+      'Вставте фотографію, використовуючи посилання';
 
   @override
-  String get pickAVideoFromYourGallery => 'Pick a video from your gallery';
+  String get pickAVideoFromYourGallery => 'Оберіть відео з вашої галереї';
 
   @override
   String get recordAVideoUsingYourCamera =>
-      'Record a video using your phone camera';
+      'Запишіть відео, використовуючи відеокамеру';
 
   @override
-  String get pasteAVideoUsingALink => 'Paste a video using a link';
+  String get pasteAVideoUsingALink => 'Вставте відео, використовуючи посилання';
+
+  @override
+  String get normal => 'Звичайний';
+
+  @override
+  String get heading1 => 'Заголовок 1';
+
+  @override
+  String get heading2 => 'Заголовок 2';
+
+  @override
+  String get heading3 => 'Заголовок 3';
+
+  @override
+  String get heading4 => 'Заголовок 4';
+
+  @override
+  String get heading5 => 'Заголовок 5';
+
+  @override
+  String get heading6 => 'Заголовок 6';
 }

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

@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+
+import '../../../../widgets/controller.dart';
+import '../../../documents/attribute.dart';
+import '../../../themes/quill_icon_theme.dart';
+import '../../quill_configurations.dart';
+
+class QuillToolbarSelectHeaderStyleDropdownButtonExtraOptions
+    extends QuillToolbarBaseButtonExtraOptions {
+  const QuillToolbarSelectHeaderStyleDropdownButtonExtraOptions({
+    required this.currentValue,
+    required super.controller,
+    required super.context,
+    required super.onPressed,
+  });
+  final Attribute currentValue;
+}
+
+class QuillToolbarSelectHeaderStyleDropdownButtonOptions
+    extends QuillToolbarBaseButtonOptions<
+        QuillToolbarSelectHeaderStyleDropdownButtonOptions,
+        QuillToolbarSelectHeaderStyleDropdownButtonExtraOptions> {
+  const QuillToolbarSelectHeaderStyleDropdownButtonOptions({
+    super.controller,
+    super.iconData,
+    super.afterButtonPressed,
+    super.tooltip,
+    super.iconTheme,
+    super.childBuilder,
+    this.iconSize,
+    this.iconButtonFactor,
+    this.fillColor,
+    this.hoverElevation = 1,
+    this.highlightElevation = 1,
+    this.onSelected,
+    this.attributes,
+    this.padding,
+    this.style,
+    this.width,
+    this.labelOverflow = TextOverflow.visible,
+    this.itemHeight,
+    this.itemPadding,
+    this.defaultItemColor,
+    this.renderItemTextStyle = false,
+  });
+
+  final double? iconSize;
+  final double? iconButtonFactor;
+  final Color? fillColor;
+  final double hoverElevation;
+  final double highlightElevation;
+  final ValueChanged<String>? onSelected;
+  final List<Attribute>? attributes;
+  final EdgeInsetsGeometry? padding;
+  final TextStyle? style;
+  final double? width;
+  final TextOverflow labelOverflow;
+  final double? itemHeight;
+  final EdgeInsets? itemPadding;
+  final Color? defaultItemColor;
+  final bool renderItemTextStyle;
+
+  QuillToolbarSelectHeaderStyleDropdownButtonOptions copyWith({
+    Color? fillColor,
+    double? hoverElevation,
+    double? highlightElevation,
+    List<PopupMenuEntry<String>>? items,
+    ValueChanged<String>? onSelected,
+    List<Attribute>? attributes,
+    EdgeInsetsGeometry? padding,
+    TextStyle? style,
+    double? width,
+    TextOverflow? labelOverflow,
+    bool? renderFontFamilies,
+    bool? overrideTooltipByFontFamily,
+    double? itemHeight,
+    EdgeInsets? itemPadding,
+    Color? defaultItemColor,
+    double? iconSize,
+    double? iconButtonFactor,
+    QuillController? controller,
+    IconData? iconData,
+    VoidCallback? afterButtonPressed,
+    String? tooltip,
+    QuillIconTheme? iconTheme,
+    bool? renderItemTextStyle,
+  }) {
+    return QuillToolbarSelectHeaderStyleDropdownButtonOptions(
+      attributes: attributes ?? this.attributes,
+      controller: controller ?? this.controller,
+      iconData: iconData ?? this.iconData,
+      afterButtonPressed: afterButtonPressed ?? this.afterButtonPressed,
+      tooltip: tooltip ?? this.tooltip,
+      iconTheme: iconTheme ?? this.iconTheme,
+      onSelected: onSelected ?? this.onSelected,
+      padding: padding ?? this.padding,
+      style: style ?? this.style,
+      width: width ?? this.width,
+      labelOverflow: labelOverflow ?? this.labelOverflow,
+      itemHeight: itemHeight ?? this.itemHeight,
+      itemPadding: itemPadding ?? this.itemPadding,
+      defaultItemColor: defaultItemColor ?? this.defaultItemColor,
+      iconSize: iconSize ?? this.iconSize,
+      iconButtonFactor: iconButtonFactor ?? this.iconButtonFactor,
+      fillColor: fillColor ?? this.fillColor,
+      hoverElevation: hoverElevation ?? this.hoverElevation,
+      highlightElevation: highlightElevation ?? this.highlightElevation,
+      renderItemTextStyle: renderItemTextStyle ?? this.renderItemTextStyle,
+    );
+  }
+}

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

@@ -29,12 +29,14 @@ class QuillToolbarSelectHeaderStyleButtonsOptions
   });
 
   /// Default value:
+  /// ```dart
   /// const [
   ///   Attribute.header,
   ///   Attribute.h1,
   ///   Attribute.h2,
   ///   Attribute.h3,
   /// ]
+  /// ```
   final List<Attribute>? attributes;
 
   /// By default we will the toolbar axis from [QuillToolbarConfigurations]

lib/src/models/config/toolbar/toolbar_configurations.dart

@@ -10,6 +10,7 @@ import 'buttons/base.dart';
 import 'buttons/clear_format.dart';
 import 'buttons/color.dart';
 import 'buttons/custom_button.dart';
+import 'buttons/dropdown_header_style.dart';
 import 'buttons/font_family.dart';
 import 'buttons/font_size.dart';
 import 'buttons/history.dart';
@@ -37,6 +38,7 @@ export './buttons/link_style2.dart';
 export './buttons/search.dart';
 export './buttons/select_alignment.dart';
 export './buttons/select_header_style.dart';
+export './buttons/dropdown_header_style.dart';
 export './buttons/toggle_check_list.dart';
 export './buttons/toggle_style.dart';
 
@@ -63,6 +65,17 @@ enum LinkStyleType {
   bool get isAlternative => this == LinkStyleType.alternative;
 }
 
+enum HeaderStyleType {
+  /// Defines the original [QuillToolbarSelectHeaderStyleButtons].
+  original,
+
+  /// Defines the alternative [QuillToolbarSelectHeaderStyleDropdownButton].
+  dropdown;
+
+  bool get isOriginal => this == HeaderStyleType.original;
+  bool get isDropdown => this == HeaderStyleType.dropdown;
+}
+
 /// The configurations for the toolbar widget of flutter quill
 @immutable
 class QuillToolbarConfigurations extends QuillSharedToolbarProperties {
@@ -105,6 +118,7 @@ class QuillToolbarConfigurations extends QuillSharedToolbarProperties {
     this.showSubscript = true,
     this.showSuperscript = true,
     this.linkStyleType = LinkStyleType.original,
+    this.headerStyleType = HeaderStyleType.original,
     super.customButtons = const [],
 
     /// The decoration to use for the toolbar.
@@ -208,6 +222,9 @@ class QuillToolbarConfigurations extends QuillSharedToolbarProperties {
   /// Defines which dialog is used for applying link attribute.
   final LinkStyleType linkStyleType;
 
+  /// Defines which dialog is used for applying header attribute.
+  final HeaderStyleType headerStyleType;
+
   @override
   List<Object?> get props => [
         buttonOptions,
@@ -255,6 +272,8 @@ class QuillToolbarButtonOptions extends Equatable {
     this.search = const QuillToolbarSearchButtonOptions(),
     this.selectHeaderStyleButtons =
         const QuillToolbarSelectHeaderStyleButtonsOptions(),
+    this.headerStyleButton =
+        const QuillToolbarSelectHeaderStyleDropdownButtonOptions(),
     this.linkStyle = const QuillToolbarLinkStyleButtonOptions(),
     this.linkStyle2 = const QuillToolbarLinkStyleButton2Options(),
     this.customButtons = const QuillToolbarCustomButtonOptions(),
@@ -300,6 +319,7 @@ class QuillToolbarButtonOptions extends Equatable {
   /// for all the header style buttons and not just one, you still
   /// can customize it and you also have child builder
   final QuillToolbarSelectHeaderStyleButtonsOptions selectHeaderStyleButtons;
+  final QuillToolbarSelectHeaderStyleDropdownButtonOptions headerStyleButton;
 
   final QuillToolbarLinkStyleButtonOptions linkStyle;
   final QuillToolbarLinkStyleButton2Options linkStyle2;

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');