Converting html to delta - colour issues

[JamesAllgood]

Trying to use this package to convert this html text

<p><span style="color:#F06292FF">This is just pink </span><br/><br/><span style="color:#4DD0E1FF">This is just blue</span></p>

into delta again but the colour doesn't seem to want to convert?

Using this in my code to convert it. Using the latest version but might be doing something stupid sorry?

var delta = HtmlToDelta().convert(Text);
_quillController.document` = Document.fromDelta(delta);

[CatHood0]

You don't have to apologize or anything like that. I test this using the same HTML using the flutter tests:

 test('Paragraph with colors', () {
    const html =
          '<p><span style="color:#F06292FF">This is just pink </span><br/><br/><span style="color:#4DD0E1FF">This is just  blue</span> </p>';

     final converter = HtmlToDelta();
     final delta = converter.convert(html);

     final expectedDelta = Delta()
     ..insert('This is just pink ', {"color": "#F06292FF"})
     ..insert('\n\n')
     ..insert( "This is just blue", {"color": "#4DD0E1FF"})
     ..insert('\n');

     expect(delta, expectedDelta);
 });

And this is the Delta result that it gives:

[
    {"insert": "This is just pink" , "attributes": {"color": "#F06292FF"}},
    {"insert": "\n\n"},
    {"insert": "This is just blue", "attributes": {"color": "#4DD0E1FF"}},
    {"insert": "\n"}
]

It tells us that the format is correct and that there is not a problem with this package. You could try to report this directly in Flutter Quill, or directly provide me with any errors that the debugger has shown you to have more context of where the error might be.

[CatHood0]

Since this issue has not response of the author, it will be closed

[JamesAllgood]

Sorry didn't get any notifications for this ticket.

So this is what the html is and when I print the delta I get this displayed.

flutter:

This is just pink

This is just blue

I don't get any errors in the flutter console

flutter: insert⟨ This is just pink ⟩ + {color: #BA68C8FF} insert⟨ ⏎⏎ ⟩ insert⟨ This is just blue ⟩ + {color: #42A5F5FF} insert⟨ ⏎ ⟩

Somehow... even when I use your example code it displays it wrong in the flutter quill text entry screen still. So it could be a bug with flutter_quill display colours wrong I guess?

[CatHood0]

This is a issue coming from flutter_quill this package just translate HTML to Quill Deltas

[Psycoguana]

Modifying this method worked for me, I just removed hexA. Not sure if it's a proper fix, but it's definitely better than before.

https://github.com/CatHood0/flutter_quill_delta_from_html/blob/master/lib/parser/colors.dart

String _toHex(int r, int g, int b, int? a) {
  String hexR = r.toRadixString(16).padLeft(2, '0');
  String hexG = g.toRadixString(16).padLeft(2, '0');
  String hexB = b.toRadixString(16).padLeft(2, '0');
  String? hexA = (a == null) ? null : a.toRadixString(16).padLeft(2, '0');

  return '#$hexR$hexG$hexB${a != null ? hexA : ''}';
}

Then you call it like this

String rgbToHex(String rgb) {
  rgb = rgb.replaceAll('rgb(', '').replaceAll(')', '');
  List<String> rgbValues = rgb.split(',');
  int r = int.parse(rgbValues[0].trim());
  int g = int.parse(rgbValues[1].trim());
  int b = int.parse(rgbValues[2].trim());
  return _toHex(r, g, b, null);
}

Thanks for the library btw, it's super useful!

[JamesAllgood]

How can I implement this?

[CatHood0]

@Psycoguana thanks for your suggestion. I'll take care about this part of the code as soon as possible.

[JamesAllgood]

is there any update about merging this into the main code

[CatHood0]

Due to things I have to do I haven't had the time to update the code. As soon as I can I will add it