Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

All Font Settings and Styles are Lost on Enter Press #1119

Closed
saconger opened this issue Feb 25, 2023 · 54 comments
Closed

All Font Settings and Styles are Lost on Enter Press #1119

saconger opened this issue Feb 25, 2023 · 54 comments
Assignees
Labels
bug Something isn't working

Comments

@saconger
Copy link

saconger commented Feb 25, 2023

The issue happens on all platforms.

When you change the font the font family, size, color, bold, etc are all dropped when enter is pressed.

For example,

Line 1: You type the first line in the default font.
Line 2: Then you type the second line with a newly selected font. (press enter)
Line 3: This third line returns to the first line default font, instead of continuing the second line font settings.

By default font, I simply mean whatever is set by your app theme or QuillEditor(customStyle: ).

I've run into a few issues flutter_quill but this is the only one that seems to stop me from really utilizing the editor. Advice or a fix would be great. Thank you.

@saconger saconger changed the title [Web] & [Mobile] All Font Setting Lost on Enter Press [Web] & [Mobile] All Font Settings Lost on Enter Press Feb 25, 2023
@saconger
Copy link
Author

saconger commented Sep 4, 2023

This still appears to be an issue. I use flutter quill live in my apps. This is probably the main feedback I get from people who download my apps and use the page I have quill on. They definitely like quill but retaining the font line to line after pressing enter, is the main negative I get feedback on.

@adnan-nazir
Copy link

adnan-nazir commented Nov 14, 2023

I just tried the latest version flutter_quill: ^8.5.3 but it's still not resolved. @freshtechtips

@EchoEllet EchoEllet reopened this Nov 14, 2023
@EchoEllet
Copy link
Collaborator

I just tried the latest version flutter_quill: ^8.5.3 but it's still not resolved. @freshtechtips

Thank you for sharing that info. The issue hasn't been resolved, but we have to close it as there are no interactions with it for a while

Reopened.

@EchoEllet EchoEllet added the bug Something isn't working label Nov 15, 2023
@adnan-nazir
Copy link

Thank you @freshtechtips for considering and re-epening this. Just wanted to check when you are releasing a new version with this fix. It would be great if you can give any rough idea.

@EchoEllet
Copy link
Collaborator

Thank you @freshtechtips for considering and re-epening this. Just wanted to check when you are releasing a new version with this fix. It would be great if you can give any rough idea.

It's on the to-do list but we can't right now because of the lack of time, don't worry we will try to fix it soon.

@adnan-nazir
Copy link

Hey @freshtechtips, any update on this issue?

@EchoEllet EchoEllet self-assigned this Dec 6, 2023
@EchoEllet
Copy link
Collaborator

Hey @freshtechtips, any update on this issue?

Unfotunley I can't fix it, the only way is to remake the quill raw editor and the controller and my time is not enough for this

I will wait until someone else fixes it, if not then I will myself but it will take a while

@saconger
Copy link
Author

saconger commented Dec 7, 2023

Thank you for explaining. I do believe this is fairly important for the viability of the editor but I can certainly understand being busy with other things. Hopefully some time down the line we can get a fix for this. Thanks again for the update.

@EchoEllet
Copy link
Collaborator

The bug has been fixed for both font family/ font size
It avaliable only on the dev branch

@EchoEllet
Copy link
Collaborator

Thank you for explaining. I do believe this is fairly important for the viability of the editor but I can certainly understand being busy with other things. Hopefully some time down the line we can get a fix for this. Thanks again for the update.

Can you confirm if the bug is fixed in the latest dev version?

@saconger
Copy link
Author

Thank you for attempting to fix this. It is appreciated.

I have updated from version 8.6.4 to version 9.0.0-dev-9. The font and size now continue when the enter key is pressed, but this only works for the currently selected font and size. If you scroll up to another part of the document where there is a different font and press enter, it will insert the new font, not the one from that particular sentence.

However, this change did not work for bold, italic, underline, color, etc.

Side notes:

  1. Due to the addition of com.superlist.super_native_extensions, the minSDK is now 23.
  2. My toolbar is now bigger and misformatted. This may or may not be due to the changes. I quickly "fixed" the breaking changes and haven't had a chance to see if the dev version caused this or if my quick upgrade did.

@EchoEllet EchoEllet pinned this issue Dec 10, 2023
@EchoEllet
Copy link
Collaborator

EchoEllet commented Dec 10, 2023

2. My toolbar is now bigger and misformatted. This may or may not be due to the changes. I quickly "fixed" the breaking changes and haven't had a chance to see if the dev version caused this or if my quick upgrade did.

Yes, that's because of the update, fixed in 9.0.1

@EchoEllet
Copy link
Collaborator

I have updated from version 8.6.4 to version 9.0.0-dev-9. The font and size now continue when the enter key is pressed, but this only works for the currently selected font and size. If you scroll up to another part of the document where there is a different font and press enter, it will insert the new font, not the one from that particular sentence.

Do you expect the font family and font size to be static?? you choose it once and it will be the same no matter which text you select

let me know what you prefer

@EchoEllet
Copy link
Collaborator

  • Due to the addition of com.superlist.super_native_extensions, the minSDK is now 23.

We couldn't find any alternative, the pasteboard is outdated as most of them and it doesn't support paste text with different formats

@Usama-Naseer
Copy link

Hey @freshtechtips , Did you find any solution for this?

@EchoEllet
Copy link
Collaborator

Hey @freshtechtips , Did you find any solution for this?

Already did for the font size and font family

@thanglq1
Copy link

Hope this issue will be fix soon.

@EchoEllet
Copy link
Collaborator

EchoEllet commented Dec 13, 2023

Hope this issue will be fix soon.

Already fixed for the font family and font size

@thanglq1
Copy link

Hope this issue will be fix soon.

Already fixed for the font family and font size

Yes, fixed for the font family and font size. I mean others font settings not yet such as bold, italic, underline, strike through, text color, text background color etc.

@EchoEllet
Copy link
Collaborator

Hope this issue will be fix soon.

Already fixed for the font family and font size

Yes, fixed for the font family and font size. I mean others font settings not yet such as bold, italic, underline, strike through, text color, text background color etc.

It will be fixed soon.

@EchoEllet EchoEllet changed the title [Web] & [Mobile] All Font Settings Lost on Enter Press All Font Settings and Formats Lost on Enter Press Dec 13, 2023
@EchoEllet
Copy link
Collaborator

EchoEllet commented Dec 13, 2023

If you scroll up to another part of the document where there is a different font and press enter, it will insert the new font, not the one from that particular sentence.

Do you mean you want the one from the selected or the one from the other part of the document?

@EchoEllet
Copy link
Collaborator

EchoEllet commented Dec 13, 2023

It turns out there is already a property called keepStyleOnNewLine in the controller so no need for a custom solution like we did, but still can anyone test it and give us his feedback?

@EchoEllet
Copy link
Collaborator

The keepStyleOnNewLine:

Screen.Recording.2023-12-13.at.10.44.48.AM.mov

The new solution:

Screen.Recording.2023-12-13.at.10.48.51.AM.mov

Which one you prefer, this for the font size

@thanglq1
Copy link

The keepStyleOnNewLine:

Screen.Recording.2023-12-13.at.10.44.48.AM.mov
The new solution:

Screen.Recording.2023-12-13.at.10.48.51.AM.mov
Which one you prefer, this for the font size

What's the new solution?

@EchoEllet
Copy link
Collaborator

The keepStyleOnNewLine:
Screen.Recording.2023-12-13.at.10.44.48.AM.mov
The new solution:
Screen.Recording.2023-12-13.at.10.48.51.AM.mov
Which one you prefer, this for the font size

What's the new solution?

I'm showing you the differences, the new solution doesn't care about the text selection, it always will be the same

the old one, when you jump to new line it will always choose the selected style from the current line and not the chooses one in the toolbar

@thanglq1
Copy link

The keepStyleOnNewLine:
Screen.Recording.2023-12-13.at.10.44.48.AM.mov
The new solution:
Screen.Recording.2023-12-13.at.10.48.51.AM.mov
Which one you prefer, this for the font size

What's the new solution?

I'm showing you the differences, the new solution doesn't care about the text selection, it always will be the same

the old one, when you jump to new line it will always choose the selected style from the current line and not the chooses one in the toolbar

ah okay. I prefer keepStyleOnNewLine : true because user selected the style so they can change if they want. I think we shouldn't change the style on new line. That's my opinion.

@EchoEllet
Copy link
Collaborator

The keepStyleOnNewLine:
Screen.Recording.2023-12-13.at.10.44.48.AM.mov
The new solution:
Screen.Recording.2023-12-13.at.10.48.51.AM.mov
Which one you prefer, this for the font size

What's the new solution?

I'm showing you the differences, the new solution doesn't care about the text selection, it always will be the same
the old one, when you jump to new line it will always choose the selected style from the current line and not the chooses one in the toolbar

ah okay. I prefer keepStyleOnNewLine : true because user selected the style so they can change if they want. I think we shouldn't change the style on new line. That's my opinion.

You mean the new solution and not the existing, to make this clear I will merge and release so you can try it out yourself, try the pre-release

@EchoEllet
Copy link
Collaborator

You can test the new pre-release, feedbacks will be more than welcomed

@thanglq1
Copy link

The keepStyleOnNewLine:
Screen.Recording.2023-12-13.at.10.44.48.AM.mov
The new solution:
Screen.Recording.2023-12-13.at.10.48.51.AM.mov
Which one you prefer, this for the font size

What's the new solution?

I'm showing you the differences, the new solution doesn't care about the text selection, it always will be the same
the old one, when you jump to new line it will always choose the selected style from the current line and not the chooses one in the toolbar

ah okay. I prefer keepStyleOnNewLine : true because user selected the style so they can change if they want. I think we shouldn't change the style on new line. That's my opinion.

You mean the new solution and not the existing, to make this clear I will merge and release so you can try it out yourself, try the pre-release

I mean the old one is reset style on new line. I don't like that because user already selected style. They can change if they want so I prefer keep style on new line use keepStyleOnNewLine : true

@EchoEllet
Copy link
Collaborator

EchoEllet commented Dec 13, 2023

I mean the old one is reset style on new line. I don't like that because user already selected style. They can change if they want so I prefer keep style on new line use keepStyleOnNewLine : true

There is a little bit of confusion, keepStyleOnNewLine will get the style from the selection text and paste it into the new line

The solution I made is more static, it will always prefer the style that the user selects

Please try the pre-release and tell me what you need to be changed or solved

@EchoEllet
Copy link
Collaborator

The issue happens on all platforms.

When you change the font the font family, size, color, bold, etc are all dropped when enter is pressed.

For example,

Line 1: You type the first line in the default font. Line 2: Then you type the second line with a newly selected font. (press enter) Line 3: This third line returns to the first line default font, instead of continuing the second line font settings.

By default font, I simply mean whatever is set by your app theme or QuillEditor(customStyle: ).

I've run into a few issues flutter_quill but this is the only one that seems to stop me from really utilizing the editor. Advice or a fix would be great. Thank you.

Hi again, should I close this issue? please confirm if it's not fixed

@EchoEllet EchoEllet unpinned this issue Dec 19, 2023
@EchoEllet
Copy link
Collaborator

This issue has been fixed. If you are still facing it, please let us know

Feel free to ask us questions

@Usama-Naseer
Copy link

Usama-Naseer commented Dec 20, 2023

@ellet0 We are unable to test this on latest flutter version check this #1498 (comment)

@EchoEllet
Copy link
Collaborator

@ellet0 We are unable to test this on latest flutter version check this #1498 (comment)

Please upgrade flutter

@EchoEllet
Copy link
Collaborator

Hi @saconger,
Can you confirm if the issue is fixed or not?

@saconger
Copy link
Author

saconger commented Dec 30, 2023

Thank you for working on this. I appreciate it.

I re-updated from v8.6.4 to v9.1.1. Is that the version you are asking me to look at?

v9.1.1 behaves like I described above in my post about 9.0.0-dev-9. However, now it does include font, font size, bold, underline, italic, color, etc. So that is a good improvement. Thank you.

Also, the toolbar size and malformed caused in 9.0.0-dev-9 seems to be resolved.

In general it does seem to behave like the "keepStyleOnNewLine : true" now. I was unaware that that flag existed until reading it above. It still has some of the quirks I mentioned about 9.0.0-dev-9.

I am happy with the direction you are headed. Thank you.

I do have to rollback to 8.6.4 though because this does appear to break a couple things.

Below is a snippet of code that works in 8.6.4:

showAlignmentButtons: journalType,
showLeftAlignment: true,
showCenterAlignment: true,
showRightAlignment: false,
showJustifyAlignment: false,

Now when journalType is true, all four buttons show up but right and justified should not. If journalType is false, no buttons show which is correct.

Below is my map for my fonts that worked correctly in 8.6.4:

_fontFamilies = {
  'Amatic': GoogleFonts.amaticSc().fontFamily!,
  'Annie': GoogleFonts.annieUseYourTelescope().fontFamily!,
  'Formal': GoogleFonts.petitFormalScript().fontFamily!,
  'Roboto': GoogleFonts.roboto().fontFamily!
};

The toolbar dropdown displays the short name (Amatic, Annie, Formal, Roboto) which is correct. But when I select a font, it displays the technical long name like AmaticSC_regular, which would be incorrect.

The third thing I ran into is code I can't figure out the equivalent to. In the below code, QuillIconTheme changed to use MaterialProperty which is fine but no matter how I re-code the below using the new way it just returns white and dark gray icons which is roughly my theme but the below code added selection color and background toogles. I will look at this further but haven't figured it out yet, so it "might" be broken but I can say for sure, yet.

return fq.QuillSimpleToolbar(
  configurations: fq.QuillSimpleToolbarConfigurations(
    …
    buttonOptions: fq.QuillSimpleToolbarButtonOptions(
      …
      base: fq.QuillToolbarBaseButtonOptions(
        iconTheme: fq.QuillIconTheme(
          iconSelectedColor: _theme.scaffoldBackgroundColor, iconSelectedFillColor: _theme.colorScheme.primary,
          iconUnselectedColor: _theme.colorScheme.primary, iconUnselectedFillColor: _theme.scaffoldBackgroundColor))
    )
  ));

Do you want me to open up these three as new issues?

@EchoEllet
Copy link
Collaborator

EchoEllet commented Dec 30, 2023

My apologies about the new bugs, I will fix them

They are simple

It just there are too much right now and I can't keep track of everything I see

@EchoEllet
Copy link
Collaborator

I just fixed the first two issues, now let's fix the third

@EchoEllet
Copy link
Collaborator

@saconger
Does the following do what you wants?

  QuillToolbar.simple(
            configurations: QuillSimpleToolbarConfigurations(
              controller: _controller,
              buttonOptions: QuillSimpleToolbarButtonOptions(
                base: QuillToolbarBaseButtonOptions(
                  iconTheme: QuillIconTheme(
                    iconButtonSelectedData: IconButtonData(
                      style: IconButton.styleFrom(
                        foregroundColor: Colors.red,
                        backgroundColor: Colors.amberAccent,
                      ),
                    ),
                    iconButtonUnselectedData: IconButtonData(
                      style: IconButton.styleFrom(
                        foregroundColor: Colors.red,
                        backgroundColor: Colors.amberAccent,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

@saconger
Copy link
Author

saconger commented Dec 30, 2023

Unfortunately, that has no impact on the icon colors.

And this didn't either:

              iconButtonSelectedStyle: IconButton.styleFrom(
                  foregroundColor: _theme.scaffoldBackgroundColor,
                  backgroundColor: _theme.colorScheme.primary,
              ),
              iconButtonUnselectedStyle: IconButton.styleFrom(
                  foregroundColor: _theme.colorScheme.primary,
                  backgroundColor: _theme.scaffoldBackgroundColor,
              ),

@EchoEllet
Copy link
Collaborator

Unfortunately, that has no impact on the icon colors.

And this didn't either:

              iconButtonSelectedStyle: IconButton.styleFrom(
                  foregroundColor: _theme.scaffoldBackgroundColor,
                  backgroundColor: _theme.colorScheme.primary,
              ),
              iconButtonUnselectedStyle: IconButton.styleFrom(
                  foregroundColor: _theme.colorScheme.primary,
                  backgroundColor: _theme.scaffoldBackgroundColor,
              ),

I tried it and it seems to working, maybe we miss something?

image

@saconger
Copy link
Author

saconger commented Dec 30, 2023

I have some fairly robust theming in my app. Users can select what theme they want to use. So it took me a moment to work through it. Most of my themes start like this:

ThemeData defaultDarkTheme = ThemeData.dark(useMaterial3: false).copyWith(

"useMaterial3: false" is what prevents it from working. If I set that to true, iconButtonSelectedData & iconButtonUnselectedData works. iconButtonSelectStyle does too. But iconButtonUnselectStyle does not.

I don't know if that is worth addressing in Quill. Most apps should be moving toward Material3 at this point. Mine app has it turn off until I fix some things that don't look right in Material3 but I can fix those soon enough.

I've retested with v9.2.0 and I see your other fixes. The showAlignmentButtons & font dropdown selection works good now. Thank you!

I believe the font size dropdown has the same issue as the font name dropdown had. Below is my map.

_fontSizes = {
  '14': '14.0',
  '16': '16.0',
  '18': '18.0',
  '20': '20.0',
  '22': '22.0',
  '24': '24.0',
  '26': '26.0',
  '28': '28.0',
  '30': '30.0',
  '35': '35.0',
  '40': '40.0'
};

If I select 18, it will display '18.0'. Or if you use wording like:

  'small': '14.0',
  'medium': '16.0',
  'large': '18.0',

Small, medium, large would show on dropdown but the collapsed list would show 14.0.

This is minor for my app, as I can probably temporarily remove the decimal point. But someone using words, may prefer this to be fixed as well.

Thanks again for all your hard work on this. I think v9.2.0 is good forward progress. Thank you! I'm content switching my production app from using 8.6.4 Quill to 9.2.0 now. :)

@EchoEllet
Copy link
Collaborator

I have some fairly robust theming in my app. Users can select what theme they want to use. So it took me a moment to work through it. Most of my themes start like this:

ThemeData defaultDarkTheme = ThemeData.dark(useMaterial3: false).copyWith(

"useMaterial3: false" is what prevents it from working. If I set that to true, iconButtonSelectedData & iconButtonUnselectedData works. iconButtonSelectStyle does too. But iconButtonUnselectStyle does not.

I don't know if that is worth addressing in Quill. Most apps should be moving toward Material3 at this point. Mine app has it turn off until I fix some things that don't look right in Material3 but I can fix those soon enough.

I've retested with v9.2.0 and I see your other fixes. The showAlignmentButtons & font dropdown selection works good now. Thank you!

I believe the font size dropdown has the same issue as the font name dropdown had. Below is my map.

_fontSizes = {
  '14': '14.0',
  '16': '16.0',
  '18': '18.0',
  '20': '20.0',
  '22': '22.0',
  '24': '24.0',
  '26': '26.0',
  '28': '28.0',
  '30': '30.0',
  '35': '35.0',
  '40': '40.0'
};

If I select 18, it will display '18.0'. Or if you use wording like:

  'small': '14.0',
  'medium': '16.0',
  'large': '18.0',

Small, medium, large would show on dropdown but the collapsed list would show 14.0.

This is minor for my app, as I can probably temporarily remove the decimal point. But someone using words, my prefer this to be fixed as well.

Thanks again for all your hard work on this. I think v9.2.0 is good forward progress. Thank you! I'm content switching my production app from using 8.6.4 Quill to 9.2.0 now. :)

I will fix the other issue with font size soon, maybe in the next year!

@EchoEllet
Copy link
Collaborator

image
Is that what you expected?

@5566
Copy link

5566 commented Feb 26, 2024

Why I changed the font size,then start input, but the font size of input string is not use the selected font size。。。。。and when I selected some string,then change the font size,the font size of selected strings will changed

@5566
Copy link

5566 commented Feb 26, 2024

I just tried the latest version flutter_quill: ^9.3.1 but it's still not resolved. 。。。

@szuwest
Copy link

szuwest commented Mar 8, 2024

I just tried the latest version flutter_quill: ^9.3.1 but it's still not resolved. 。。。

You have to use Material3 themeData. I have spent much time to find this problem.

@5566
Copy link

5566 commented Mar 8, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants