Create `QuillToolbarSelectHeaderStyleDropdownButton` #1575

MacDeveloper1 · 2023-12-07T12:01:54Z

Description

The alternative widget QuillToolbarSelectHeaderStyleDropdownButton for heading style is created. Also the list of available headings is expanded to H6. So the new widget supports headings H1..H6. Font sizes,line heights and spacing are updated from this link. Basically standard HTML values are used.

P.S. Also some translations (uk and ru) are updated.

Images

Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I titled the PR using Conventional Commits.
I did not modify the CHANGELOG.md nor the plugin version in pubspec.yaml files.
I have run the commands in ./scripts/before-push.sh and it all passed successfully

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

Yes, this is a breaking change (please indicate that with a ! in the title as explained in Conventional Commits).
No, this is not a breaking change.

EchoEllet · 2023-12-07T12:31:18Z

Description

The alternative widget QuillToolbarSelectHeaderStyleDropdownButton for heading style is created. Also the list of available headings is expanded to H6. So the new widget supports headings H1..H6. Font sizes,line heights and spacing are updated from this link. Basically standard HTML values are used.

P.S. Also some translations (uk and ru) are updated.

Images

Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.

I titled the PR using Conventional Commits.

I did not modify the CHANGELOG.md nor the plugin version in pubspec.yaml files.

I have run the commands in ./scripts/before-push.sh and it all passed successfully

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

Yes, this is a breaking change (please indicate that with a ! in the title as explained in Conventional Commits).

No, this is not a breaking change.

Hi, I appreciate your efforts but we already did that in the dev branch, we will look into some solution don't worry we will try to merge your PR

EchoEllet · 2023-12-12T20:26:51Z

Description

The alternative widget QuillToolbarSelectHeaderStyleDropdownButton for heading style is created. Also the list of available headings is expanded to H6. So the new widget supports headings H1..H6. Font sizes,line heights and spacing are updated from this link. Basically standard HTML values are used.

P.S. Also some translations (uk and ru) are updated.

Images

Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.

I titled the PR using Conventional Commits.

I did not modify the CHANGELOG.md nor the plugin version in pubspec.yaml files.

I have run the commands in ./scripts/before-push.sh and it all passed successfully

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

Yes, this is a breaking change (please indicate that with a ! in the title as explained in Conventional Commits).

No, this is not a breaking change.

Can you fix Ci failure by doing it aginst the latest master branch?

EchoEllet · 2023-12-12T20:28:38Z

Besides the header styles for the new ones
We need to ask @singerdmx first because that's up this library is a port of react js so it needs to be the same otherwise quill delta will not work on quill js

And that's the whole idea behind the repo or the port

MacDeveloper1 · 2023-12-13T08:08:57Z

@freshtechtips and @singerdmx I tested this new class and it works. See images. All headings are shown correctly. Qulll does not care on how many H is specified in configuration. Configuration is customizable.
Please look at this.
In any case this is new widget which does not affect the old one with H1...H3. ;)

EchoEllet · 2023-12-13T08:12:28Z

@freshtechtips and @singerdmx I tested this new class and it works. See images. All headings are shown correctly. Qulll does not care on how many H is specified in configuration. Configuration is customizable.
Please look at this.

I'm not sure but I think you are right, but can at least do it with the new class that was added before you sent this PR but to the dev branch, and now it's merged with the master

MacDeveloper1 · 2023-12-13T08:18:56Z

The example code which I've just took from this.

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  // <------------------------------ headers

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

The aim of Quill I think is to keep rich text which can be converted to HTML which in its turn supports H1...H6.

MacDeveloper1 · 2023-12-13T08:20:52Z

but can at least do it with the new class that was added before you sent this PR but to the dev branch, and now it's merged with the master

It seems I didn't catch what do you mean.

EchoEllet · 2023-12-13T08:27:43Z

The example code which I've just took from this.

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  // <------------------------------ headers

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

The aim of Quill I think is to keep rich text which can be converted to HTML which in its turn supports H1...H6.

Sure but that's not the problem, the problem we already have restored the deleted button from the past in 2022, I restored it with fewer features, and yours contains more features, do you want to fix the conflicts or let me handle it?

MacDeveloper1 · 2023-12-13T08:34:50Z

the problem we already have restored the deleted button from the past in 2022, I restored it with fewer features, and yours contains more features, do you want to fix the conflicts or let me handle it?

I will appreciate you if you can do this. And I think I could not do it by myself because of Only those with [write access] to this repository can merge pull requests. Resolve conflicts button is disabled for me.

MacDeveloper1 · 2023-12-13T08:42:58Z

I think there are not many places of default package code which must be changed. The new widget and config are new files.

It is required to update Attributes to add new ones from H4 to H6 and expand switch statements to handle new headers. Also DefaultStyles are updated for H1...H6.

EchoEllet · 2023-12-13T08:47:02Z

I think there are not many places of default package code which must be changed. The new widget and config are new files.

It is required to update Attributes to add new ones from H4 to H6 and expand switch statements to handle new headers. Also DefaultStyles are updated for H1...H6.

Do you want me to carry the changes to a separate PR or fetch and edit this PR? What do you prefer?
if you want me to choose I would choose the first because of the too many conflicts

MacDeveloper1 · 2023-12-13T09:02:44Z

Do you want me to carry the changes to a separate PR or fetch and edit this PR? What do you prefer? if you want me to choose I would choose the first because of the too many conflicts

Please do as you feel comfortable. The important thing is correct work of my app which already uses this new widget my own branch. :)

EchoEllet · 2023-12-13T09:50:56Z

Do you want me to carry the changes to a separate PR or fetch and edit this PR? What do you prefer? if you want me to choose I would choose the first because of the too many conflicts

Please do as you feel comfortable. The important thing is correct work of my app which already uses this new widget my own branch. :)

Just one thing, is the header styles always up to h6 from h1 or the developer can override it?

EchoEllet · 2023-12-07T17:48:00Z

lib/src/l10n/generated/quill_localizations.dart

+
+  /// 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:


This file is auto-generated, please edit the the quill_en.arb instead
and run the script we mentioned in the development notes

Sorry. I was to hurry. I think I can update translations after merge the PR with new widget.

EchoEllet · 2023-12-07T17:48:18Z

lib/src/l10n/generated/quill_localizations_ru.dart

+  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';
+      'Запишите видео, используя вдеокамеру';



Same here, you should update the quill_ru.arb file

EchoEllet · 2023-12-07T17:48:34Z

lib/src/l10n/generated/quill_localizations_uk.dart

+  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 =>


quill_uk.arb file

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

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

EchoEllet · 2023-12-07T17:51:56Z

lib/src/models/documents/attribute.dart

+  /// "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);


@singerdmx
What do you think of this?

EchoEllet · 2023-12-07T17:52:54Z

lib/src/widgets/default_styles.dart

-              color: defaultTextStyle.style.color!.withOpacity(0.70),
-              height: 1.15,
-              fontWeight: FontWeight.w300,
+              color: defaultTextStyle.style.color,
+              letterSpacing: -1,
+              height: 1,
+              fontWeight: FontWeight.bold,


May I ask why this change?

As I added new heading I need to have som wide used values for heading so I searched the Internet and find a few links which suggest such values. The link with data which I used you may find in the start post.
Usually headers are used for highlighting some titles but opacity do the reading hard making usual text more higlighted then header. Usually defautt values for text black or white depending on theme brightness.

EchoEllet · 2023-12-07T17:53:48Z

lib/src/widgets/default_styles.dart

+              fontSize: 30,
+              color: defaultTextStyle.style.color,
+              letterSpacing: -0.8,
+              height: 1.067,
+              fontWeight: FontWeight.bold,


The new default values from HTML?

I took the data from here

Get started with Boosted, a Bootstrap fork — the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

.

EchoEllet · 2023-12-13T10:45:24Z

This pull request has been moved to

Feature/headers dropdown #1598

MacDeveloper1 · 2023-12-13T13:27:50Z

Just one thing, is the header styles always up to h6 from h1 or the developer can override it?

It is fixed list from H1 to H6 and then Normal. I thought it is logical. It is shown in the image I post in start topic.

EchoEllet · 2023-12-13T13:43:04Z

Just one thing, is the header styles always up to h6 from h1 or the developer can override it?

It is fixed list from H1 to H6 and then Normal. I thought it is logical. It is shown in the image I post in start topic.

I add the ability to edit it

MacDeveloper1 · 2023-12-13T13:46:49Z

I add the ability to edit it

Why do think it is necessary? To place more large font somewhere in middle? I think it not good idea. Or do you mean moving only Normal options to top or bottom?

EchoEllet · 2023-12-13T13:48:30Z

I add the ability to edit it

Why do think it is necessary? To place more large font somewhere in middle? Or do you mean moving only Normal options to top or bottom?

No, it's just one variable, which is a list that has default value, and you can change it back to previous value, it's necessary otherwise this can be considered as a breaking change

EchoEllet · 2023-12-16T20:44:39Z

We already carried the changes of this PR, thank you

* Restore correct feel&look of `QuillToolbarIconButton` * Export `QuillToolbarSelectAlignmentButtons` * Restore old call of `QuillToolbarIconButton` * Restore old call of `QuillToolbarIconButton` * Resore original button PR #1575 * Restore old feel&look of buttons * Restore original `QuillToolbarSelectAlignmentButton` * Restore original `QuillToolbarLinkStyleButton2` * Make `options` optional * Restore old `QuillToolbarFontFamilyButton` build * Restore old build of `QuillToolbarFontSizeButton` * Change `textStyle` to `style` * Remove redundant export --------- Co-authored-by: Ellet Hnewa <73608287+ellet0@users.noreply.github.com>

MacDeveloper1 added 17 commits December 6, 2023 15:24

Add QuillToolbarSelectHeaderStyleDropdownButton

09cc386

Update widget

7f60504

File refactoring

8bba105

Update header style

cb77385

Fix argument exception

e712890

Implement renderItemTextStyle

a9711b8

Fix init of headerTextStyles

520a4e4

Fix getting of QuillStyles

80861b4

FIx headerTextStyles

49d4679

Fix DefaultStyles

53ae93d

Minor comment change

177afea

Fix headers

fd2a941

Remove initialValue

a2cc5d2

Add asseert for header style

9966d17

Fix _headerTextStyles

e748ad7

Change heading sorting in editor

b4b917f

Update russian and ukrainian translations

70e954f

EchoEllet reviewed Dec 13, 2023

View reviewed changes

This was referenced Dec 13, 2023

Feature/headers dropdown #1597

Closed

Feature/headers dropdown #1598

Merged

EchoEllet closed this Dec 16, 2023

This was referenced Dec 19, 2023

Latest version is REALLY BREAKING (Quill Simple toolbar looks different) #1616

Closed

feat: Add conditional rendering for toolbar header style options #1613

Merged

MacDeveloper1 added a commit to MacDeveloper1/flutter-quill that referenced this pull request Dec 19, 2023

Resore original button PR singerdmx#1575

fce1458

Create QuillToolbarSelectHeaderStyleDropdownButton #1575

Create QuillToolbarSelectHeaderStyleDropdownButton #1575

Conversation

MacDeveloper1 commented Dec 7, 2023 • edited Loading

Description

Images

Checklist

Breaking Change

EchoEllet commented Dec 7, 2023

Description

Images

Checklist

Breaking Change

EchoEllet commented Dec 12, 2023

Description

Images

Checklist

Breaking Change

EchoEllet commented Dec 12, 2023

MacDeveloper1 commented Dec 13, 2023 • edited Loading

EchoEllet commented Dec 13, 2023

MacDeveloper1 commented Dec 13, 2023

MacDeveloper1 commented Dec 13, 2023

EchoEllet commented Dec 13, 2023

MacDeveloper1 commented Dec 13, 2023

MacDeveloper1 commented Dec 13, 2023 • edited Loading

EchoEllet commented Dec 13, 2023 • edited Loading

MacDeveloper1 commented Dec 13, 2023 • edited Loading

EchoEllet commented Dec 13, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EchoEllet commented Dec 13, 2023 • edited Loading

MacDeveloper1 commented Dec 13, 2023 • edited Loading

EchoEllet commented Dec 13, 2023

MacDeveloper1 commented Dec 13, 2023 • edited Loading

EchoEllet commented Dec 13, 2023

EchoEllet commented Dec 16, 2023

Create `QuillToolbarSelectHeaderStyleDropdownButton` #1575

Create `QuillToolbarSelectHeaderStyleDropdownButton` #1575

MacDeveloper1 commented Dec 7, 2023 •

edited

Loading

MacDeveloper1 commented Dec 13, 2023 •

edited

Loading

MacDeveloper1 commented Dec 13, 2023 •

edited

Loading

EchoEllet commented Dec 13, 2023 •

edited

Loading

MacDeveloper1 commented Dec 13, 2023 •

edited

Loading

EchoEllet commented Dec 13, 2023 •

edited

Loading

MacDeveloper1 commented Dec 13, 2023 •

edited

Loading

MacDeveloper1 commented Dec 13, 2023 •

edited

Loading