[FIX] composer: fix get/setText of the content editable helper

The recent use of the property "plaintext-only" came with a change of
behaviour in the composers, specifically in Firefox.

How to reproduce in FF:
- write a single character in a grid composer
- delete the character

-> a new line is inserted

Apparently, when setting the attribute `contentEditable` to
`plaintext-only`, deleting the single character does not delete the span
that encapsulates it if the latter has a class attribute. This couples
with a recent refactoring of the content editable helper to handle new
line characters and the empty composer is not detected as such

What happens currently?

Consider the composer content after inputing the letter 'W':

```html
<p>
  <span class="">
    w
  </span>
</p>
```

The cursor is set just after the letter W.

In a chromium-based browser, hitting the `Delete` key yeilds the
following result:

```html
<p>
  <span>
    <br>
  </span>
</p>
```

The letter is replaced by `<br>` which could be interpreted as a
newline, except that in this situation, we do not want a newline to
appear as we meerly deleted the single character of the composer, so
we do not want new characters.

Also, we introduced some logic to fight this side-effect when we
introduced the support of newlines of pasted content (#6467)

However, it turns out that in firefox, hitting `Delete` will yield this
result

```html
<p>
  <span class="">
    <br>
  </span>
</p>
```
The class attribute is not cleared up! And unfortunately, the logic that
counteracts the presence of the unwelcome `<br>` would test against the
exact form seen in a chromium-based browser, so it did not work on
Firefox.

This commit extends the check to work on both Firefox-based and
Chromium-based browsers.

Note that other leads were investigated and it seems that if we stopped
using paragraphs to represent new lines, this issue with the `<br>`
doesn't seem to occur. An improvement (and good cleanup) could be
achieved by dropping that paragraph strategy and rely on spans and br
characters.

closes #7331

Task: 5082601
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>

Author: rrahir

src/components/composer/content_editable_helper.ts

@@ -249,9 +249,7 @@ export class ContentEditableHelper {
         } else {
           text += NEWLINE;
         }
-        emptyParagraph = ["<br>", "<span><br></span>"].includes(
-          (current.value as HTMLElement).innerHTML
-        );
+        emptyParagraph = isEmptyParagraph(current.value);
         continue;
       }
       if (!current.value.hasChildNodes()) {
@@ -274,3 +272,17 @@ function compareContentToSpanElement(content: HtmlContent, node: HTMLElement): b
   const sameContent = node.innerText === content.value;
   return sameColor && sameClass && sameContent;
 }
+
+const doc = new DOMParser();
+const brNode = doc.parseFromString("<br>", "text/html").body.firstChild;
+const spanBrNode = doc.parseFromString("<span><br></span>", "text/html").body.firstChild;
+
+function isEmptyParagraph(node: Node) {
+  if (node.childNodes.length > 1) return false;
+  const node2 = node.firstChild?.cloneNode(true);
+  if (!node2) return true;
+  if (!(node2 instanceof Element)) return false;
+  node2.removeAttribute("class");
+  node2.removeAttribute("style");
+  return node2.isEqualNode(brNode) || node2.isEqualNode(spanBrNode) || false;
+}

tests/composer/content_editable_helpers.test.ts

@@ -133,6 +133,15 @@ describe("ContentEditableHelper", () => {
 
       div.innerHTML = "hello<br>test<br>";
       expect(helper.getText()).toBe("hello\ntest\n");
+
+      div.innerHTML = "<br><br><br>";
+      expect(helper.getText()).toBe("\n\n\n");
+
+      div.innerHTML = "<br>";
+      expect(helper.getText()).toBe("\n");
+
+      div.innerHTML = "<span><br></span>";
+      expect(helper.getText()).toBe("\n");
     });
 
     test("Paste multiline <p>", () => {