From dfed04166e29a9dc61ff645bd4b0ad6f7f9595f3 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 11 Feb 2022 19:47:24 -0600 Subject: [PATCH] Fix missing reply text when message body is parsed as HTML in [`linkedom`](https://github.com/WebReflection/linkedom) (SSR). MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - [`linkedom`](https://github.com/WebReflection/linkedom) is being used https://github.com/matrix-org/matrix-public-archive to server-side render (SSR) Hydrogen (`hydrogen-view-sdk`) - This is being fixed by using a explicit HTML wrapper boilerplate with `DOMParser` to get a matching result in the browser and `linkedom`. Currently `parseHTML` is only used for HTML content bodies in events. Events with replies have content bodies that look like `Hello What's up` so they're parsed as HTML to strip out the `` part. Before | After --- | --- ![](https://user-images.githubusercontent.com/558581/153692011-2f0e7114-fcb4-481f-b217-49f461b1740a.png) | ![](https://user-images.githubusercontent.com/558581/153692016-52582fdb-abd9-439d-9dce-3f04da6959db.png) Before: ```js // Browser (Chrome, Firefox) new DOMParser().parseFromString(`
foo
`, "text/html").body.outerHTML; // '
foo
' // `linkedom` ❌ new DOMParser().parseFromString(`
foo
`, "text/html").body.outerHTML; // '' ``` After (consistent matching output): ```js // Browser (Chrome, Firefox) new DOMParser().parseFromString(`
foo
`, "text/html").body.outerHTML; // '
foo
' // `linkedom` new DOMParser().parseFromString(`
foo
`, "text/html").body.outerHTML; // '
foo
' ``` `linkedom` goal is to be close to the current DOM standard, but [not too close](https://github.com/WebReflection/linkedom#faq). Focused on the streamlined cases for server-side rendering (SSR). Here is some context around getting `DOMParser` to interpret things better. The conclusion was to only support the explicit standard cases with a `` specified instead of adding the magic HTML document creation and massaging that the browser does. - https://github.com/WebReflection/linkedom/issues/106 - https://github.com/WebReflection/linkedom/pull/108 --- Part of https://github.com/vector-im/hydrogen-web/pull/653 to support server-side rendering Hydrogen for the [`matrix-public-archive`](https://github.com/matrix-org/matrix-public-archive) project. --- src/platform/web/parsehtml.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/parsehtml.js b/src/platform/web/parsehtml.js index 21c8f39a..e80ec995 100644 --- a/src/platform/web/parsehtml.js +++ b/src/platform/web/parsehtml.js @@ -64,6 +64,6 @@ export function parseHTML(html) { // If DOMPurify uses DOMParser, can't we just get the built tree from it // instead of re-parsing? const sanitized = DOMPurify.sanitize(html, sanitizeConfig); - const bodyNode = new DOMParser().parseFromString(sanitized, "text/html").body; + const bodyNode = new DOMParser().parseFromString(`${sanitized}`, "text/html").body; return new HTMLParseResult(bodyNode); }