imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/messages/TextualBody.tsx
View file

@ -432,11 +432,17 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
* to start with (e.g. pills, links in the content).
*/
private onBodyLinkClick = (e: MouseEvent): void => {
const target = e.target as Element;
if (target.nodeName !== "A" || target.classList.contains(linkifyOpts.className)) return;
const { href } = target as HTMLLinkElement;
const localHref = tryTransformPermalinkToLocalHref(href);
if (localHref !== href) {
let target = e.target as HTMLLinkElement;
// links processed by linkifyjs have their own handler so don't handle those here
if (target.classList.contains(linkifyOpts.className)) return;
if (target.nodeName !== "A") {
// Jump to parent as the `<a>` may contain children, e.g. an anchor wrapping an inline code section
target = target.closest<HTMLLinkElement>("a");
}
if (!target) return;
const localHref = tryTransformPermalinkToLocalHref(target.href);
if (localHref !== target.href) {
// it could be converted to a localHref -> therefore handle locally
e.preventDefault();
window.location.hash = localHref;

20
src/utils/tooltipify.tsx
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);
}