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

Switch to linkify-react for element Linkification as it handles React subtrees without exploding (#10060

Browse source 
* Switch to linkify-react instead of our faulty implementation

Fixes a series of soft crashes where errors include "The node to be removed is not a child of this node."

* Improve types

* Fix types

* Update snapshots

* Add test

* Fix test
This commit is contained in:
Michael Telatynski 2023-02-03 08:59:21 +00:00 • committed by GitHub
parent 089557005a
commit 2bde31dcff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 101 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/views/rooms/LinkPreviewWidget.tsx
View file

@ -19,7 +19,7 @@ import { decode } from "html-entities";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { IPreviewUrlResponse } from "matrix-js-sdk/src/client";
import { linkifyElement } from "../../../HtmlUtils";
import { Linkify } from "../../../HtmlUtils";
import SettingsStore from "../../../settings/SettingsStore";
import Modal from "../../../Modal";
import * as ImageUtils from "../../../ImageUtils";
@ -35,21 +35,8 @@ interface IProps {
}
export default class LinkPreviewWidget extends React.Component<IProps> {
private readonly description = createRef<HTMLDivElement>();
private image = createRef<HTMLImageElement>();
public componentDidMount(): void {
if (this.description.current) {
linkifyElement(this.description.current);
}
}
public componentDidUpdate(): void {
if (this.description.current) {
linkifyElement(this.description.current);
}
}
private onImageClick = (ev): void => {
const p = this.props.preview;
if (ev.button != 0 || ev.metaKey) return;
@ -155,8 +142,8 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
<span className="mx_LinkPreviewWidget_siteName">{" - " + p["og:site_name"]}</span>
)}
</div>
<div className="mx_LinkPreviewWidget_description" ref={this.description}>
{description}
<div className="mx_LinkPreviewWidget_description">
<Linkify>{description}</Linkify>
</div>
</div>
</div>