Switch away from nesting React trees and mangling the DOM (#29586)

* Switch away from nesting React trees and mangling the DOM

By parsing HTML events and manipulating the AST before passing it to React

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use MatrixClientContext in Pill now that we are in the main React tree

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing import

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Break import cycles

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Minimise

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Docs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-03-26 20:25:03 +00:00
committed by GitHub
parent 89e22e00fb
commit 3f47487472
37 changed files with 1488 additions and 1134 deletions

View File

@@ -36,7 +36,14 @@ import TimelinePanel from "../../../../src/components/structures/TimelinePanel";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { isCallEvent } from "../../../../src/components/structures/LegacyCallEventGrouper";
import { filterConsole, flushPromises, mkMembership, mkRoom, stubClient } from "../../../test-utils";
import {
filterConsole,
flushPromises,
mkMembership,
mkRoom,
stubClient,
withClientContextRenderOptions,
} from "../../../test-utils";
import { mkThread } from "../../../test-utils/threads";
import { createMessageEventContent } from "../../../test-utils/events";
import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -206,6 +213,7 @@ describe("TimelinePanel", () => {
manageReadReceipts={true}
ref={(ref) => (timelinePanel = ref)}
/>,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await flushPromises();
await waitFor(() => expect(timelinePanel).toBeTruthy());
@@ -403,7 +411,10 @@ describe("TimelinePanel", () => {
setupPagination(client, timeline, eventsPage1, null);
await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />);
const { container } = render(
<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() => expectEvents(container, [events[1]]));
@@ -420,7 +431,10 @@ describe("TimelinePanel", () => {
const [, room, events] = setupTestData();
await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(<TimelinePanel {...getProps(room, events)} />);
const { container } = render(
<TimelinePanel {...getProps(room, events)} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() => expectEvents(container, [events[0], events[1]]));
@@ -560,6 +574,7 @@ describe("TimelinePanel", () => {
overlayTimelineSet={overlayTimelineSet}
overlayTimelineSetFilter={isCallEvent}
/>,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() =>
expectEvents(container, [
@@ -599,6 +614,7 @@ describe("TimelinePanel", () => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() =>
@@ -630,6 +646,7 @@ describe("TimelinePanel", () => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() =>
@@ -661,6 +678,7 @@ describe("TimelinePanel", () => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() =>
@@ -695,6 +713,7 @@ describe("TimelinePanel", () => {
timelineSet={timelineSet}
overlayTimelineSet={overlayTimelineSet}
/>,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() => expectEvents(container, [overlayEvents[0], events[0]]));
@@ -768,6 +787,7 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() =>
@@ -1027,7 +1047,10 @@ describe("TimelinePanel", () => {
room.getTimelineSets = jest.fn().mockReturnValue([timelineSet]);
await withScrollPanelMountSpy(async () => {
const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />);
const { container } = render(
<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />,
withClientContextRenderOptions(MatrixClientPeg.safeGet()),
);
await waitFor(() => expectEvents(container, [events[1]]));
});