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

2
src/components/structures/MatrixChat.tsx
View file

@ -136,9 +136,9 @@ import { SdkContextClass, SDKContext } from "../../contexts/SDKContext";
import { viewUserDeviceSettings } from "../../actions/handlers/viewUserDeviceSettings";
import { cleanUpBroadcasts, VoiceBroadcastResumer } from "../../voice-broadcast";
import GenericToast from "../views/toasts/GenericToast";
import { Linkify } from "../views/elements/Linkify";
import RovingSpotlightDialog, { Filter } from "../views/dialogs/spotlight/SpotlightDialog";
import { findDMForUser } from "../../utils/dm/findDMForUser";
import { Linkify } from "../../HtmlUtils";
// legacy export
export { default as Views } from "../../Views";

35
src/components/structures/SpaceHierarchy.tsx
View file

@ -51,7 +51,7 @@ import TextWithTooltip from "../views/elements/TextWithTooltip";
import { useStateToggle } from "../../hooks/useStateToggle";
import { getChildOrder } from "../../stores/spaces/SpaceStore";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { linkifyElement, topicToHtml } from "../../HtmlUtils";
import { Linkify, topicToHtml } from "../../HtmlUtils";
import { useDispatcher } from "../../hooks/useDispatcher";
import { Action } from "../../dispatcher/actions";
import { IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex";
@ -210,6 +210,25 @@ const Tile: React.FC<ITileProps> = ({
topic = room.topic;
}
let topicSection: ReactNode | undefined;
if (topic) {
topicSection = (
<Linkify
options={{
attributes: {
onClick(ev: MouseEvent) {
// prevent clicks on links from bubbling up to the room tile
ev.stopPropagation();
},
},
}}
>
{" · "}
{topic}
</Linkify>
);
}
let joinedSection: ReactElement | undefined;
if (joinedRoom) {
joinedSection = <div className="mx_SpaceHierarchy_roomTile_joined">{_t("Joined")}</div>;
@ -231,19 +250,9 @@ const Tile: React.FC<ITileProps> = ({
{joinedSection}
{suggestedSection}
</div>
<div
className="mx_SpaceHierarchy_roomTile_info"
ref={(e) => e && linkifyElement(e)}
onClick={(ev) => {
// prevent clicks on links from bubbling up to the room tile
if ((ev.target as HTMLElement).tagName === "A") {
ev.stopPropagation();
}
}}
>
<div className="mx_SpaceHierarchy_roomTile_info">
{description}
{topic && " · "}
{topic}
{topicSection}
</div>
</div>
<div className="mx_SpaceHierarchy_actions">