[Quill_Html_Converter] Line break are stripped out

[Clashkid155]

trafficstars

I just tried the Html to Delta converter and it seems to work well (for my current use case). I do have one problem, it strips the space/br/newline.

<p>
  must be made before due date<br />
  <br />
  Invoice Number: D7U<br />
  Date: 2023-11-14<br />
  Due Date: 2023-11-25<br />
  <br />
  Bill To: Jane<br />
  Ship To: Road 10<br />
  <br />
  Description of Services&#47;Products: For vehicle and buses<br />
  Quantity: 5<br />
  Unit Price: $20<br />
  Total Amount: $500<br />
  <br />
  Any additional notes or terms: Payments must be made before due date<br />
  <br />
  Thank you for your business.<br />
  <br />
  Sincerely,<br />
  Frank
</p>

The <br /> seems to be stripped while converting.

This is what it looks like:

[singerdmx]

Hello there, on behalf the Flutter Quill Team I would like to thank you for opening your first issue. Your inputs and insights are valuable in shaping a stable and reliable version for all our users. Thank you for being part of the open-source community!

[EchoEllet]

I just tried the Html to Delta converter and it seems to work well (for my current use case). I do have one problem, it strips the space/br/newline.

<p>
  must be made before due date<br />
  <br />
  Invoice Number: D7U<br />
  Date: 2023-11-14<br />
  Due Date: 2023-11-25<br />
  <br />
  Bill To: Jane<br />
  Ship To: Road 10<br />
  <br />
  Description of Services&#47;Products: For vehicle and buses<br />
  Quantity: 5<br />
  Unit Price: $20<br />
  Total Amount: $500<br />
  <br />
  Any additional notes or terms: Payments must be made before due date<br />
  <br />
  Thank you for your business.<br />
  <br />
  Sincerely,<br />
  Frank
</p>

Hi, thank you for the report

Can you explain in a little bit more detail what are you trying to do??

I guess you converted the quill delta to HTML

but the question is did you convert it back to the Quill delta JSON and use it in the document?? if yes then I must inform you the support for this is experimental and will be changed at any time

We will try to fix it soon but for now, we have other changes on our todo for flutter_quill and flutter_quill_extensions

[EchoEllet]

I must inform you the package's porpuse is to convert to/from HTML, but it's not built from scratch, it uses other solutions that are already there, so for now there will be some things that we can't update

[Clashkid155]

Can you explain in a little bit more detail what are you trying to do?

I need to convert from html to delta and vice versa.

I guess you converted the quill delta to HTML

but the question is did you convert it back to the Quill delta JSON and use it in the document?? if yes then I must inform you the support for this is experimental and will be changed at any time

Yes, I converted it using

_controller.document.toDelta().toHtml();

Which I sent to the server, then I used

final doc = Document.fromDelta(DeltaHtmlExt.fromHtml(widget.inputText));
_controller.document = doc;

to insert it into the document.

[EchoEllet]

Can you explain in a little bit more detail what are you trying to do?

I need to convert from html to delta and vice versa.

I guess you converted the quill delta to HTML

but the question is did you convert it back to the Quill delta JSON and use it in the document?? if yes then I must inform you the support for this is experimental and will be changed at any time

Yes, I converted it using

_controller.document.toDelta().toHtml();

Which I sent to the server, then I used

final doc = Document.fromDelta(DeltaHtmlExt.fromHtml(widget.inputText));
_controller.document = doc;

to insert it into the document.

I see, the line breaks are still there in the HTML version but they are not in the Quill delta that converted back from HTML and this is why you have this issue, the implementation is experimental, we will update it shortly as it is on our todo list.

You probably don't have to change anything to get the new improved converting from HTML to Delta

[EchoEllet]

Can you explain in a little bit more detail what are you trying to do?

I need to convert from html to delta and vice versa.

I guess you converted the quill delta to HTML

but the question is did you convert it back to the Quill delta JSON and use it in the document?? if yes then I must inform you the support for this is experimental and will be changed at any time

Yes, I converted it using

_controller.document.toDelta().toHtml();

Which I sent to the server, then I used

final doc = Document.fromDelta(DeltaHtmlExt.fromHtml(widget.inputText));
_controller.document = doc;

to insert it into the document.

A workaround solution is to save the data as delta JSON to the server, when loading it on the web convert it to HTML using any npm package you would like to use as there are too many solutions out there, you could also use this on the server in NodeJs for example

1. Store the data as Quill delta json
2. When a client app requests the data

• If It using flutter quill or quill js then return it and parse it directly
• If it web app or the app needs HTML for some reason then return convert it to HTML using Npm package and use it

Example Npm Package: quill-delta-to-html

[Clashkid155]

The thing is, I don't really have access to the server and I don't know jack about JS world (npm...)

[EchoEllet]

The thing is, I don't really have access to the server and I don't know jack about JS world (npm...)

Can you tell me which backend you are using?? Use typescript for Node js instead of Javascript and install the npm package, typescript provides types support which makes Javascript similar to dart

[dsyrstad]

https://pub.dev/packages/vsc_quill_delta_to_html can convert from Quill Delta JSON format to HTML.

[EchoEllet]

https://pub.dev/packages/vsc_quill_delta_to_html can convert from Quill Delta JSON format to HTML.

It can't convert back to Quill Delta as far as I know, the issue is with converting the HTML back to Quill Delta

[dsyrstad]

It can't convert back to Quill Delta as far as I know, the issue is with converting the HTML back to Quill Delta

Correct, which is why I said it can convert from delta to HTML. You had said to look at "Example Npm Package: quill-delta-to-html" in a previous comment. https://pub.dev/packages/vsc_quill_delta_to_html is a direct port of that JS package.

[EchoEllet]

The thing is, I don't really have access to the server and I don't know jack about JS world (npm...)

I forgot to mention you don't have full access to the backend, you can do this process in the frontend web app

[EchoEllet]

It can't convert back to Quill Delta as far as I know, the issue is with converting the HTML back to Quill Delta

Correct, which is why I said it can convert from delta to HTML. You had said to look at "Example Npm Package: quill-delta-to-html" in a previous comment. https://pub.dev/packages/vsc_quill_delta_to_html is a direct port of that JS package.

Yes, we already mentioned that in README.md but we are here trying to find a solution to this use case. in this specific message, we were telling him to use the original one in the backend (probably NodeJs)

[dsyrstad]

@Clashkid155 Says that he doesn't have access to the backend, and doesn't know anything about JS. I'm saying if he uses the vsc_quill_delta_to_html package directly in Flutter, he'll have as much control over the HTML output as if he did it on the backend with JS.

That said, we don't store HTML on our backend. We store the delta json format. This allows us to retrieve it and edit it. Only when we need HTML do we convert the delta to html. An alternative might be to store both html and delta so you don't have to convert the html back to delta, which will most certainly be lossy.

[EchoEllet]

@Clashkid155 Says that he doesn't have access to the backend, and doesn't know anything about JS. I'm saying if he uses the vsc_quill_delta_to_html package directly in Flutter, he'll have as much control over the HTML output as if he did it on the backend with JS.

That said, we don't store HTML on our backend. We store the delta json format. This allows us to retrieve it and edit it. Only when we need HTML do we convert the delta to html. An alternative might be to store both html and delta so you don't have to convert the html back to delta, which will most certainly be lossy.

Yes it's a pretty good and ideal solution

[Clashkid155]

https://pub.dev/packages/vsc_quill_delta_to_html can convert from Quill Delta JSON format to HTML.

I used your package before jumping to this one. Since this one has to and fro conversion. Aside from that, your package seems not to work well with colours

[Clashkid155]

I forgot to mention you don't have full access to the backend, you can do this process in the frontend web app

I don't have access to any of those, I'm only creating the mobile app with API. It doesn't even look like I'll be paid anymore 😕

[Clashkid155]

I'm saying if he uses the vsc_quill_delta_to_html package directly in Flutter, he'll have as much control over the HTML output as if he did it on the backend with JS.

As long as I can't render the HTML back to delta perfectly, having control over it is pointless.

That said, we don't store HTML on our backend. We store the delta json format. This allows us to retrieve it and edit it. Only when we need HTML do we convert the delta to html. An alternative might be to store both html and delta so you don't have to convert the html back to delta, which will most certainly be lossy.

The thing with my team is, once I tell them I need something to happen on the backend, they just ignore that message. That's why I said I don't really have access to the server/backend.

[EchoEllet]

https://pub.dev/packages/vsc_quill_delta_to_html can convert from Quill Delta JSON format to HTML.

I used your package before jumping to this one. Since this one has to and fro conversion. Aside from that, your package seems not to work well with colours

Yes, it's experimental and doesn't work well

[Clashkid155]

Yes, it's experimental and doesn't work well

This repo's own is, but what he recommended (https://pub.dev/packages/vsc_quill_delta_to_html ) isn't

[EchoEllet]

Yes, it's experimental and doesn't work well

This repo's own is, but what he recommended (https://pub.dev/packages/vsc_quill_delta_to_html ) isn't

Yes, but this package only supports converting to HTML, we are using vsc_quill_delta_to_html in the package that we created for converting to HTML

But when converting back from HTML to Quill The support for this functionality is experimental

[osehmathias]

I am also experiencing this issue.

This is a required feature because react-quill delta is not in the same shape as flutter-quill delta.

vsc_quill_delta_to_html does not convert from HTML to quill delta, and this package strips out the line breaks.

[osehmathias]

As a work around, I have been able to do the following:

in react-quill

  function handleChange(content, delta, source, editor) {
    setNotes(editor.getContents());
  }

and save notes to the database like so:

 notes: JSON.stringify(notes.ops)

and retrieve notes from the database like so:

setNotes({ ops: JSON.parse(sessionsFromApi?.notes) });

 <ReactQuill
style={editorStyles}
theme="snow"
value={notes}
onChange={handleChange}
modules={modules}
/>

Then in flutter, update notes like so:

  String updatedNotes =
            jsonEncode(controller.document.toDelta().toJson());

And load notes like so:

Document.fromJson(json.decode(sessionData!.notes!))

[bradfrizzell]

I found a pretty easy workaround. The converter strips out any
that are not preceded by non-tag content (i.e. if there's some text followed by a
it doesn't get stripped. So just add in an empty width character preceding a
and it won't get removed. You can use the zero-width character ​

What's nice is that this is not visible to users, but make sure to strip it back out later- as it is still a valid character that will be stored.

text = "<p> Foo <br/> <br/> Bar </p>";
text = text.replaceAll(RegExp(r'<br/>'), '&#8203;</br>');
var html = Document.fromHtml(text);
var delta = html.toDelta();

[dbrezack]

FYI Raised a PR for this https://github.com/singerdmx/flutter-quill/pull/1828

[dbrezack]

@singerdmx @Clashkid155 can we close this issue ?

[EchoEllet]

@singerdmx @Clashkid155 can we close this issue ?

Thank you for your contributions, while the issue has been fixed, it wasn't in the original package on pub.dev, can you send PR to their repository so all developers can benefit from the change? The package in this repository is a temporary copy of the original edited to work with the latest versions of Flutter Quill and might be removed in future releases to use the official one instead