DEV: Allow utility class domFromString to take in strings with multiple top level elements (#15548)

Previously only `<div>one top element</div>` was allowed because we use `firstChild` instead of `children`.
We also want `<div>one</div><div>two</div>` to work with this method.

app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js

@@ -2,5 +2,5 @@ export default function domFromString(string) {
   const template = document.createElement("template");
   string = string.trim();
   template.innerHTML = string;
-  return template.content.firstChild;
+  return template.content.children;
 }

app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js

@@ -4,7 +4,10 @@ import domFromString from "discourse-common/lib/dom-from-string";
 
 discourseModule("Unit | Utility | domFromString", function () {
   test("constructing DOM node from a string", function (assert) {
-    const node = domFromString('<div class="foo">foo</div>');
+    const node = domFromString(
-    assert.ok(node.classList.contains("foo"));
+      '<div class="foo">foo</div><div class="boo">boo</div>'
+    );
+    assert.ok(node[0].classList.contains("foo"));
+    assert.ok(node[1].classList.contains("boo"));
   });
 });

app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js

@@ -38,7 +38,7 @@ function shortDateTester(format) {
 }
 
 function strip(html) {
-  return domFromString(html).innerText;
+  return domFromString(html)[0].innerText;
 }
 
 discourseModule("Unit | Utility | formatter", function (hooks) {
@@ -121,12 +121,12 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     );
 
     assert.strictEqual(
-      domFromString(formatDays(0, { format: "medium" })).title,
+      domFromString(formatDays(0, { format: "medium" }))[0].title,
       longDate(new Date())
     );
 
     assert.ok(
-      domFromString(formatDays(0, { format: "medium" })).classList.contains(
+      domFromString(formatDays(0, { format: "medium" }))[0].classList.contains(
         "date"
       )
     );
@@ -226,12 +226,12 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
   test("autoUpdatingRelativeAge", function (assert) {
     let d = moment().subtract(1, "day").toDate();
 
-    let elem = domFromString(autoUpdatingRelativeAge(d));
+    let elem = domFromString(autoUpdatingRelativeAge(d))[0];
     assert.strictEqual(elem.dataset.format, "tiny");
     assert.strictEqual(elem.dataset.time, d.getTime().toString());
     assert.strictEqual(elem.title, "");
 
-    elem = domFromString(autoUpdatingRelativeAge(d, { title: true }));
+    elem = domFromString(autoUpdatingRelativeAge(d, { title: true }))[0];
     assert.strictEqual(elem.title, longDate(d));
 
     elem = domFromString(
@@ -240,14 +240,14 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
         title: true,
         leaveAgo: true,
       })
-    );
+    )[0];
 
     assert.strictEqual(elem.dataset.format, "medium-with-ago");
     assert.strictEqual(elem.dataset.time, d.getTime().toString());
     assert.strictEqual(elem.title, longDate(d));
     assert.strictEqual(elem.innerHTML, "1 day ago");
 
-    elem = domFromString(autoUpdatingRelativeAge(d, { format: "medium" }));
+    elem = domFromString(autoUpdatingRelativeAge(d, { format: "medium" }))[0];
     assert.strictEqual(elem.dataset.format, "medium");
     assert.strictEqual(elem.dataset.time, d.getTime().toString());
     assert.strictEqual(elem.title, "");
@@ -256,7 +256,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
 
   test("updateRelativeAge", function (assert) {
     let d = new Date();
-    let elem = domFromString(autoUpdatingRelativeAge(d));
+    let elem = domFromString(autoUpdatingRelativeAge(d))[0];
     elem.dataset.time = d.getTime() - 2 * 60 * 1000;
 
     updateRelativeAge(elem);
@@ -266,7 +266,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     d = new Date();
     elem = domFromString(
       autoUpdatingRelativeAge(d, { format: "medium", leaveAgo: true })
-    );
+    )[0];
     elem.dataset.time = d.getTime() - 2 * 60 * 1000;
 
     updateRelativeAge(elem);

app/assets/javascripts/discourse/tests/unit/lib/link-mentions-test.js

@@ -40,7 +40,7 @@ module("Unit | Utility | link-mentions", function () {
         <span class="mention">@valid_group</span>
         <span class="mention">@mentionable_group</span>
       </div>
-    `);
+    `)[0];
     await linkSeenMentions(root);
 
     // Ember.Test.registerWaiter is not available here, so we are implementing

app/assets/javascripts/pretty-text/addon/oneboxer.js

@@ -76,7 +76,7 @@ function loadNext(ajax) {
   })
     .then(
       (template) => {
-        const node = domFromString(template);
+        const node = domFromString(template)[0];
         setLocalCache(normalize(url), node);
         elem.replaceWith(node);
         applySquareGenericOnebox(node);