Fixes around URL tooltips and in-app matrix.to link handling (#9139)

* Add regression test for tooltipify exposing raw HTML

* Handle m.to links involving children better

* Comments

* Fix mistaken assertion
This commit is contained in:
Michael Telatynski 2022-08-09 15:37:55 +01:00 committed by GitHub
parent 48ae16b5a5
commit e63072e21f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 19 deletions

View file

@ -39,9 +39,7 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
let node = rootNodes[0];
while (node) {
let tooltipified = false;
if (ignoredNodes.indexOf(node) >= 0) {
if (ignoredNodes.includes(node) || containers.includes(node)) {
node = node.nextSibling as Element;
continue;
}
@ -49,20 +47,18 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
if (node.tagName === "A" && node.getAttribute("href")
&& node.getAttribute("href") !== node.textContent.trim()
) {
const container = document.createElement("span");
const href = node.getAttribute("href");
// The node's innerHTML was already sanitized before being rendered in the first place, here we are just
// wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
// without the superfluous span but this is not something React trivially supports at this time.
const tooltip = <LinkWithTooltip tooltip={new URL(href, window.location.href).toString()}>
{ node.innerHTML }
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>;
ReactDOM.render(tooltip, container);
node.replaceChildren(container);
containers.push(container);
tooltipified = true;
}
if (node.childNodes?.length && !tooltipified) {
ReactDOM.render(tooltip, node);
containers.push(node);
} else if (node.childNodes?.length) {
tooltipifyLinks(node.childNodes as NodeListOf<Element>, ignoredNodes, containers);
}