singerdmx / flutter-quill

Rich text editor for Flutter
https://pub.dev/packages/flutter_quill
MIT License
2.52k stars 806 forks source link

Delta displays wrong colour in text input screen #2069

Open JamesAllgood opened 1 month ago

JamesAllgood commented 1 month ago

Is there an existing issue for this?

Flutter Quill version

10.1.0

Steps to reproduce

The following delta data doesn't display its colours correctly in the text input screen

Use the following code to setup a text display for quill and it sets the text to the wrong colours

Expected results

"This is just pink" should have pink text colour

"this is just blue" should be blue text colour

Actual results

The colour blue is only display and that's for the first item. Not the second that is actually blue?

Screenshot 2024-07-25 at 19 53 42

Code sample

Code sample ```dart final deletadata = Delta() ..insert('This is just pink ', {"color": "#F06292FF"}) ..insert('\n\n') ..insert( "This is just blue", {"color": "#4DD0E1FF"}) ..insert('\n'); _quillController.document = Document.fromDelta(deletadata); ```

Additional Context

Screenshots / Video demonstration [Upload media here]
Logs ```console [Paste your logs here] ```
CatHood0 commented 1 month ago

I don't really know why this could be happening. The part encharged to parse any String to Flutter Color is this:

var hex = s.replaceFirst('#', '');
hex = hex.length == 6 ? 'ff$hex' : hex;
final val = int.parse(hex, radix: 16);
return Color(val);

This validate if the hex already contains opacity values, and parse it to a int valid for a Color using a int.parse from native Dart

Transforming the hex to a int using int.parse is the default implementation to solve this easily. You can see the same at this article

JamesAllgood commented 1 month ago

Its strange because if you swaped the lines around the colour swaps.

almost like its only taking the last colour seen and setting that

AtlasAutocode commented 1 month ago

I think the problem might be that colors are expressed as ARGB whereas your values are RGBA.

4DD0E1FF is red=D0, green=E1, blue=FF with an opacity of 4D - that is a very pale blue.

If you use #FFF06292 you get pink and with #FF4DD0E1 you get blue

JamesAllgood commented 1 month ago

That makes sense!

When saving the delta to html its saving as 8bit colour mode.

Is there a way for the quill code to account for both ARGB and RGBA I guess?

AtlasAutocode commented 1 month ago

Can't help you with html. I suggest you look at the code you are using to convert delta to html and then html to delta. One of them is flipping the byte order, or not flipping when it should.