fix: delay parsing htmlValue when RTE is attached but not rendered

[DiegoCardoso]

Description

In Firefox, the styles won't be computed properly if an element is attached to the DOM, but not rendered (e.g., it's placed as a child element of another element that does not define a slot). That leads to an issue with RTE if the component is added as a child of a Lit element. The reason is that a LitElement renders its DOM asynchronously, so for a brief moment, their children are attached while the template is not yet ready.

That's problematic for RTE while using dangerouslySetHtmlValue before the element is fully rendered in the page because this method uses the clipboard Quill feature, that in turn, uses getComputedStyle to parse the HTML snipped provided into the delta format used by Quill. Since getComputedStyle won't return the correct styles in the mentioned scenario, the parsed HTML will return unexpected results.

This fix aims to work around this issue, by checking whether the getComputedStyle returns empty and, if so, creates an IntersectionObserver that will be triggered once the element is visible and in the viewport to then proceed with the HTML parsing.

One downside of this approach is that in cases like the one described, the setting of the value property will happen asynchronously.

Fixes vaadin/flow-components#6653

Type of change

• Bugfix
• Feature

[web-padawan]

There seems to be something wrong about the test: it passes locally on main branch using the Firefox Playwright (which has an older version of Firefox) but fails when running it manually in the latest Firefox.

Also, I was able to reproduce the same issue with the simpler case (see attach helper below):

  async function attach(shadow = false) {
    const parent = fixtureSync('<div></div>');
    if (shadow) {
      parent.attachShadow({ mode: 'open' });
    }
    parent.appendChild(rte);
    await nextRender();
    flushValueDebouncer();
  }

  it('should have the html value when attached to lazily rendered parent', async () => {
    await attach(true);
    console.warn(`display: ${getComputedStyle(rte).display}`); // shows "display: flex" in Playwright
    rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
    rte.parentNode.shadowRoot.innerHTML = '<slot></slot>';
    flushValueDebouncer();

    expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
  });

The above test also passes on main in Playwright but fails when running manually. Adding the console.warn shows that Firefox Playwright sets display: flex. Not really sure what to do about this until we upgrade Playwright 😕

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud