Vaadin and Quill Editor: Issues with saving the current content

I am having an issue with integrating the Quill Editor into my Vaadin application. When I change the content of the editor and save it, I do not get the current content of the editor but the previous content instead. I have tried to get the content using CompletableFuture and executeJs, but it still doesn’t work as expected. When I try to save the new content, setValue is called, but futureContent.get() returns null.

Here is the relevant code:

@JsModule("./js/quill.js")
public class QuillEditor extends AbstractSinglePropertyField<QuillEditor, String> {

  public QuillEditor() {
        super("value", "", false);
        getElement().executeJs("createQuillEditor($0)", getElement());

        getElement().addEventListener("text-change", event ->
                fireEvent(new ComponentValueChangeEvent<>(this, this, getEmptyValue(), false)));
    }

    @Override
    public String getValue() {
        CompletableFuture<String> futureContent = new CompletableFuture<>();

        ui.access(() -> {
            PendingJavaScriptResult pendingResult = getElement().executeJs("return getHtmlContent($0)", getElement());
            pendingResult.then(jsonValue -> futureContent.complete(jsonValue.asString()));
        });

        try {
            return futureContent.get();
        } catch (InterruptedException e) {
            e.printStackTrace();
        } catch (ExecutionException e) {
            throw new RuntimeException(e);
        }
        return null;
    }

    @Override
    public void setValue(String htmlContent) {
        getElement().executeJs("setQuillEditorHtmlContent($0, $1)", getElement(), htmlContent);
    }
}

quill.js

window.createQuillEditor = function (element) {
    const quill = new Quill(element, {
        theme: 'snow',
        modules: {
...... etc.

window.getHtmlContent = function (element) {
    const quill = Quill.find(element);
    console.log('Current content:', quill.root.innerHTML);
    return quill.root.innerHTML;
};

window.setQuillEditorHtmlContent = function (element, htmlContent) {
    const quill = Quill.find(element);
    quill.setContents(quill.clipboard.convert(htmlContent));
    console.log('HTML Content:', quill.root.innerHTML);
};
}

I have added various console.log() statements to check the content of the editor, and it seems that the JavaScript code is correctly retrieving the current content. However, the new content is not being properly passed to the Java code.

Does anyone have experience with integrating the Quill Editor and Vaadin or have an idea how I can fix this issue? Any help is greatly appreciated!

Thank you in advance!

In my other class, I have implemented the following binding:

binder.forField(quillEditor).bind(CustomTextblock::getContent, CustomTextblock::setContent);