fix: properly initialize HTML value when using RTE in dialog (#6638)

Co-authored-by: Serhii Kulykov <[email protected]>

vaadin-rich-text-editor-flow-parent/vaadin-rich-text-editor-flow-integration-tests/src/main/java/com/vaadin/flow/component/richtexteditor/tests/RichTextEditorDialogPage.java

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.richtexteditor.tests;
+
+import com.vaadin.flow.component.dialog.Dialog;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.richtexteditor.RichTextEditor;
+import com.vaadin.flow.router.Route;
+
+@Route("vaadin-rich-text-editor/dialog")
+public class RichTextEditorDialogPage extends Div {
+    public RichTextEditorDialogPage() {
+        RichTextEditor editor = new RichTextEditor();
+        editor.setValue("<ul><li>Item 1</li><li>Item 2</li></ul>");
+
+        Dialog dialog = new Dialog();
+        dialog.add(editor);
+        dialog.open();
+    }
+}

vaadin-rich-text-editor-flow-parent/vaadin-rich-text-editor-flow-integration-tests/src/test/java/com/vaadin/flow/component/richtexteditor/tests/RichTextEditorDialogIT.java

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.richtexteditor.tests;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+
+import com.vaadin.flow.component.richtexteditor.testbench.RichTextEditorElement;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.tests.AbstractComponentIT;
+
+@TestPath("vaadin-rich-text-editor/dialog")
+public class RichTextEditorDialogIT extends AbstractComponentIT {
+    private RichTextEditorElement editor;
+
+    @Before
+    public void init() {
+        open();
+        editor = $(RichTextEditorElement.class).waitForFirst();
+    }
+
+    @Test
+    public void setHtmlValue_correctlyConvertsHtmlToDeltaValue() {
+        // Wait until delta value has been updated
+        waitUntil(driver -> !editor.getPropertyString("value").isEmpty());
+
+        String expectedHtml = "<ul><li>Item 1</li><li>Item 2</li></ul>";
+        String expectedDelta = "[{\"insert\":\"Item 1\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"Item 2\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"}]";
+
+        Assert.assertEquals(expectedHtml,
+                editor.getEditor().getProperty("innerHTML"));
+        Assert.assertEquals(expectedDelta, editor.getProperty("value"));
+    }
+}

vaadin-rich-text-editor-flow-parent/vaadin-rich-text-editor-flow/src/main/java/com/vaadin/flow/component/richtexteditor/RichTextEditor.java

@@ -72,6 +72,8 @@ public class RichTextEditor
     private AsHtml asHtml;
     private AsDelta asDelta;
 
+    private boolean pendingPresentationUpdate = false;
+
     /**
      * Gets the internationalization object previously set for this component.
      * <p>
@@ -218,8 +220,14 @@ protected void setPresentationValue(String newPresentationValue) {
         getElement().setProperty("htmlValue", presentationValue);
         // htmlValue property is not writeable, HTML value needs to be set using
         // method exposed by web component instead
-        getElement().callJsFunction("dangerouslySetHtmlValue",
-                presentationValue);
+        if (!pendingPresentationUpdate) {
+            pendingPresentationUpdate = true;
+            runBeforeClientResponse(ui -> {
+                getElement().callJsFunction("dangerouslySetHtmlValue",
+                        getElement().getProperty("htmlValue"));
+                pendingPresentationUpdate = false;
+            });
+        }
     }
 
     private static String presentationToModel(String htmlValue) {