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

@@ -21,11 +21,14 @@ import {
mkRoomCanonicalAliasEvent,
mkRoomMemberJoinEvent,
stubClient,
withClientContextRenderOptions,
} from "../../../../test-utils";
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
import { Action } from "../../../../../src/dispatcher/actions";
import { type ButtonEvent } from "../../../../../src/components/views/elements/AccessibleButton";
import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg.ts";
import { TestSdkContext } from "../../../TestSdkContext.ts";
describe("<Pill>", () => {
let client: Mocked<MatrixClient>;
@@ -45,6 +48,10 @@ describe("<Pill>", () => {
let pillParentClickHandler: (e: ButtonEvent) => void;
const renderPill = (props: PillProps): void => {
const cli = MatrixClientPeg.safeGet();
const mockSdkContext = new TestSdkContext();
mockSdkContext.client = cli;
const withDefault = {
inMessage: true,
shouldShowPillAvatar: true,
@@ -53,9 +60,12 @@ describe("<Pill>", () => {
// wrap Pill with a div to allow testing of event bubbling
renderResult = render(
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div onClick={pillParentClickHandler}>
<Pill {...withDefault} />
</div>,
<SDKContext.Provider value={mockSdkContext}>
<div onClick={pillParentClickHandler}>
<Pill {...withDefault} />
</div>
</SDKContext.Provider>,
withClientContextRenderOptions(cli),
);
};