vaadin
How to convert from Delta to HTML?
Use case: using RichTextEditor as a blog post editor. First, the user writes the post and the content is saved to the backend in Delta format (to be able to edit it later); when I fetch the Delta from the backend, how do I convert it to HTML to be able to show it formatted (not in the editor)?
I tried to bind the component to HTML intuitively, but that didn't seem to work 🙈 First question was that what is Delta format. We really can't expect that people are using such in their domain model. HTML it should be (at least).
Seems like there is a getHtmlValue method, but I would expect a simple component binding with e.g. a converter. For example:
var rte = new RichTextEditor();
var binder = new Binder<Article>();
binder.forField(rte)
.withConverter(new DeltaToHTMLConverter())
.bind(Article::getContent, Article::setContent);
This way one could also convert from Delta to Markdown, AsciiDoc and such.
I think html should be the default and this Delta something should be an implementation detail.
I'm not sure I agree completely. The RTE should use a rich-text format which can be get/set safely; HTML is problematic since you can express the same appearance in different ways.
I'm fine with Delta, but at least a converter to/from HTML should be provided; also, the Converter API provides a way to handle conversion errors, in case the provided HTML is not supported/valid.
I mean, the component is named RichTextEditor, not HtmlEditor; so maybe it should be named QuillEditor instead 🙂
If Vaadin's choice is to adopt Quill Delta as its rich-text reference format, let it be; just, provide some converters.
Sanitation is easy and safe to do with tools like Jsoup. I have done that for years using older Vaadin versions and TinyMCE. Don't see any problems there. I actually see a change for us to provide something really handy for Vaadin developers here, we could make this somewhat complex thing a oneliner for Vaadin developers.
But I do see a problem using the current alpha version in any real world scenario (especially when doing data binding with Binder).
As the field type is these days bolted into the field implementation, maybe there actually should be a QuillEditor, but with methods like getDeltaFormat/setDeltaFormat and without HasValue implementation. Then maybe actual HasValue implementations for HTML (and maybe also RTF, markdown etc).
Anyways, we certainly both agree there is a really relevant feature missing.
Any additional feedback/milestone for this?
I'm giving another try at the component, but I keep getting stuck when trying to use it to edit existing content: a method to "import" existing HTML, or a utility class to convert HTML to/from Delta is really needed.
We're currently considering making htmlValue read/write also. Quill has dangerouslyPasteHTML API which could be exposed on the client side (with similar name) while the Flow API could have setHtmlValue(...) (with value sanitisation prior to sending it back to client). Would that be an adequate solution for this?
Thank you @tomivirkki for the feedback! I've read the documentation and also some discussions about using Delta vs HTML in Quill; seems like Quill discourages the use of HTML as an anti-pattern, eventually leading to artifacts and collateral effects (and requiring sanitization overhead).
Using the dangerouslyPasteHTML API could be a workaround, but my original issue is how to display stored content (in Delta format, for sane editor usage) outside the editor, i.e. as HTML; for that, I guess a server-side converter is needed (which is out of the component scope).
There are atively maintained AsciiDoc and Markdown tools for Java, but unfortunately not for Delta that I'm aware of 😕
quilljs/quill#993 is a very interesting conversation about this, and after reading it I think the very best solution to this issue is to provide a component which takes Delta and displays HTML, something like:
<vaadin-rich-text delta="..."></vaadin-rich-text>
This way if I have Delta stored on a database I'd be able to display it as plain HTML (i.e. without even loading the editor).
Another possibility could be a readonly theme that hides the editor and just shows the rendered content.
As discussed here, you can already use the editor in readonly mode (with the controls hidden). But a dedicated / more lightweight component just for viewing delta would also be nice!
This is another discussion worth mentioning about Delta "store & display": https://github.com/quilljs/quill/issues/2276
In short: store both Delta and HTML, so you can display the content without loading the editor (e.g. when outside the app); I don't like this much (well, definitely I don't like it) but it's the only workaround I've found since there is no Java library for Delta.
Sure Delta was a dangerous choice for a component which needs a Java integration; it's a good format and I really hope libraries will come soon, but at the moment there aren't any (even the JavaScript ones need to load the editor with dirty tricks and then use its clipboard API).
As much as I see you all loving the idea of using Quill for storing the data, we have a separate tool that accesses the data created by our Vaadin project, and therefore HAVE to store the data in HTML. A conversion tool would be extremely useful.
Currently, we are just using a basic textarea input instead of the RTE because we need to maintain the HTML
@spikeon Just to understand your case a little bit more - aren't you able to store both HTML and Delta in the database, and use the RTE component, or do you prefer to store only the HTML and use textarea?
I fully agree that the tool is needed. I'm just curious to understand the various use cases, so that we can make a better choice.
My use-case is to only store HTML into the database, I'm not using the Delta format at all.
The big problem here is that there is no Delta <-> HTML converter on the server side, which would be really needed to unlock the full potential of Quill with Flow and data binders (e.g. converters).
I think this is solved in Vaadin 23+ since RichTextEditor offers the asHtml() function which provides HasValue view over RTE which holds html String as a value.
In Vaadin 24, HTML is used by default and there is asDelta() for those who need Delta format. Closing as no longer relevant.
