RichTextEditor looses newlines when placed inside Dialog

vt512 commented 1 month ago

Description

Short description: Setting HTML text via asHtml().setValue() to a RichTextEditor which is displayed in a Dialog doesn't display the HTML text correctly in Firefox.

Longer description: I'm adding a RichTextEditor inside a Dialog and set an HTML value via asHtml().setValue(html). The text is displayed in the editor, but styling is corrupt (e.g. bullet list is missing) and newlines are lost. When placing the RichTextEditor directly on the view everything is fine.

The same error occurs, when placing the RichTextEditor inside a com.github.appreciated.layout.GridLayout (org.vaadin.addons.componentfactory:vaadin-css-grid-layout:3.0.0).

The error occurs only in Firefox. In Chromium the HTML text is displayed correctly.

I debugged the setValue() call in Firefox. In RichTextEditorMixin the dangerouslySetHtmlValue(htmlValue) is called with the correct htmlValue. Inside that function the htmlValue is converted via this._editor.clipboard.convert(htmlValue). The resulting deltaFromHtml doesn't contain the newline characters which exist in the working case.

Expected outcome

The RichTextEditor should display the HTML text inside a Dialog correctly in the same way as it does on a View directly.

Minimal reproducible example

    private static final String HTML_TEXT = "Start<ul><li>P1</li><li>P2</li></ul>End";

    private RichTextEditor rte() {
        RichTextEditor editor = new RichTextEditor();
        editor.asHtml().setValue(HTML_TEXT);
        return editor;
    }

    private void createUI(VerticalLayout layout) {
        layout.add(rte());  // HTML text is displayed correctly

        final Button button = new Button("open dialog");
        button.addClickListener(openClickEvent -> {
            final Dialog dialog = new Dialog();
            dialog.setHeaderTitle("RichText");
            dialog.add(rte());  // HTML text is corrupt
            dialog.getFooter().add(new Button("cancel", cancelClickEvent -> dialog.close()));
            dialog.open();
        });
        layout.add(button);
    }

Steps to reproduce

Execute the minimal example above.

The RichTextEditor which is placed directly on the layout displays the given HTML text correctly with a bullet list of two bullet points.
Click the "open dialog" button. A Dialog is opened with a RichTextEditor that displays the HTML text in one line without line breaks and no bullet list.

Environment

Vaadin version(s): 24.4.11, (in Vaadin 23 the HTML text is displayed correctly also inside a Dialog) OS: Linux

Browsers

Firefox

sissbruecker commented 1 month ago

I can reproduce this behavior with the web component if the element is not attached to the DOM when dangerouslySetHtmlValue is called:

<vaadin-rich-text-editor></vaadin-rich-text-editor>

<script type="module">
  import '@vaadin/rich-text-editor';

  const rte = document.querySelector('vaadin-rich-text-editor');
  const htmlText = "Start<ul><li>P1</li><li>P2</li></ul>End";

  rte.remove();
  rte.dangerouslySetHtmlValue(htmlText);
  document.body.append(rte);
</script>

When debugging this in combination with Dialog, I can see that the element is already added to vaadin-dialog at that point, so there must be something else that causes the same issue.

sissbruecker commented 1 month ago

Seems to be a regression from https://github.com/vaadin/flow-components/pull/4538

vt512 commented 1 month ago

The given patch from #6638 fixes the issue, when the RichTextEditor is placed inside a Dialog. But it is still not fixed, when it is placed inside a com.github.appreciated.layout.GridLayout (org.vaadin.addons.componentfactory:vaadin-css-grid-layout:3.0.0).

sissbruecker commented 1 month ago

@vt512 Please create a new issue with a reproduction.

vaadin / flow-components