{this.renderContextMenu()}
{replyChain}
- {renderTile(
- TimelineRenderingType.Thread,
- {
- ...this.props,
+ {renderTile(TimelineRenderingType.Thread, {
+ ...this.props,
- // overrides
- ref: this.tile,
- isSeeingThroughMessageHiddenForModeration,
+ // overrides
+ ref: this.tile,
+ isSeeingThroughMessageHiddenForModeration,
- // appease TS
- highlights: this.props.highlights,
- highlightLink: this.props.highlightLink,
- permalinkCreator: this.props.permalinkCreator!,
- },
- this.context.showHiddenEvents,
- )}
+ // appease TS
+ highlights: this.props.highlights,
+ highlightLink: this.props.highlightLink,
+ permalinkCreator: this.props.permalinkCreator!,
+ showHiddenEvents: this.context.showHiddenEvents,
+ })}
{actionBar}
{timestamp}
@@ -1383,22 +1380,19 @@ export class UnwrappedEventTile extends React.Component
,
{this.renderContextMenu()}
- {renderTile(
- TimelineRenderingType.File,
- {
- ...this.props,
+ {renderTile(TimelineRenderingType.File, {
+ ...this.props,
- // overrides
- ref: this.tile,
- isSeeingThroughMessageHiddenForModeration,
+ // overrides
+ ref: this.tile,
+ isSeeingThroughMessageHiddenForModeration,
- // appease TS
- highlights: this.props.highlights,
- highlightLink: this.props.highlightLink,
- permalinkCreator: this.props.permalinkCreator,
- },
- this.context.showHiddenEvents,
- )}
+ // appease TS
+ highlights: this.props.highlights,
+ highlightLink: this.props.highlightLink,
+ permalinkCreator: this.props.permalinkCreator,
+ showHiddenEvents: this.context.showHiddenEvents,
+ })}
,
],
);
@@ -1433,23 +1427,20 @@ export class UnwrappedEventTile extends React.Component
{groupTimestamp}
{groupPadlock}
{replyChain}
- {renderTile(
- this.context.timelineRenderingType,
- {
- ...this.props,
+ {renderTile(this.context.timelineRenderingType, {
+ ...this.props,
- // overrides
- ref: this.tile,
- isSeeingThroughMessageHiddenForModeration,
- timestamp: bubbleTimestamp,
+ // overrides
+ ref: this.tile,
+ isSeeingThroughMessageHiddenForModeration,
+ timestamp: bubbleTimestamp,
- // appease TS
- highlights: this.props.highlights,
- highlightLink: this.props.highlightLink,
- permalinkCreator: this.props.permalinkCreator,
- },
- this.context.showHiddenEvents,
- )}
+ // appease TS
+ highlights: this.props.highlights,
+ highlightLink: this.props.highlightLink,
+ permalinkCreator: this.props.permalinkCreator,
+ showHiddenEvents: this.context.showHiddenEvents,
+ })}
{actionBar}
{this.props.layout === Layout.IRC && (
<>
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index 2db56e397e..cf80b38272 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -163,6 +163,7 @@ export default class ReplyTile extends React.PureComponent {
highlights: this.props.highlights,
highlightLink: this.props.highlightLink,
permalinkCreator: this.props.permalinkCreator,
+ showHiddenEvents: false,
},
false /* showHiddenEvents shouldn't be relevant */,
)}
diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx
index 0d91ded160..9d0daadb80 100644
--- a/src/events/EventTileFactory.tsx
+++ b/src/events/EventTileFactory.tsx
@@ -26,7 +26,6 @@ import { TimelineRenderingType } from "../contexts/RoomContext";
import MessageEvent from "../components/views/messages/MessageEvent";
import LegacyCallEvent from "../components/views/messages/LegacyCallEvent";
import { CallEvent } from "../components/views/messages/CallEvent";
-import TextualEvent from "../components/views/messages/TextualEvent";
import EncryptionEvent from "../components/views/messages/EncryptionEvent";
import { RoomPredecessorTile } from "../components/views/messages/RoomPredecessorTile";
import RoomAvatarEvent from "../components/views/messages/RoomAvatarEvent";
@@ -44,6 +43,8 @@ import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline";
import { ElementCall } from "../models/Call";
import { type IBodyProps } from "../components/views/messages/IBodyProps";
import ModuleApi from "../modules/Api";
+import { TextualEventViewModel } from "../viewmodels/event-tiles/TextualEventViewModel";
+import { TextualEvent } from "../shared-components/event-tiles/TextualEvent";
// Subset of EventTile's IProps plus some mixins
export interface EventTileTypeProps
@@ -67,6 +68,7 @@ export interface EventTileTypeProps
maxImageHeight?: number; // pixels
overrideBodyTypes?: Record>;
overrideEventTypes?: Record>;
+ showHiddenEvents: boolean;
}
type FactoryProps = Omit;
@@ -77,7 +79,10 @@ const LegacyCallEventFactory: Factory
);
const CallEventFactory: Factory = (ref, props) => ;
-export const TextualEventFactory: Factory = (ref, props) => ;
+export const TextualEventFactory: Factory = (ref, props) => {
+ const vm = new TextualEventViewModel(props);
+ return ;
+};
const VerificationReqFactory: Factory = (_ref, props) => ;
const HiddenEventFactory: Factory = (ref, props) => ;
@@ -252,12 +257,11 @@ export function pickFactory(
export function renderTile(
renderType: TimelineRenderingType,
props: EventTileTypeProps,
- showHiddenEvents: boolean,
cli?: MatrixClient,
): Optional {
cli = cli ?? MatrixClientPeg.safeGet(); // because param defaults don't do the correct thing
- const factory = pickFactory(props.mxEvent, cli, showHiddenEvents);
+ const factory = pickFactory(props.mxEvent, cli, props.showHiddenEvents);
if (!factory) {
// If we don't have a factory for this event, attempt
// to find a custom component that can render it.
@@ -286,6 +290,7 @@ export function renderTile(
isSeeingThroughMessageHiddenForModeration,
timestamp,
inhibitInteraction,
+ showHiddenEvents,
} = props;
switch (renderType) {
@@ -309,6 +314,7 @@ export function renderTile(
isSeeingThroughMessageHiddenForModeration,
permalinkCreator,
inhibitInteraction,
+ showHiddenEvents,
}),
);
default:
@@ -332,6 +338,7 @@ export function renderTile(
isSeeingThroughMessageHiddenForModeration,
timestamp,
inhibitInteraction,
+ showHiddenEvents,
}),
);
}
@@ -394,6 +401,7 @@ export function renderReplyTile(
getRelationsForEvent,
isSeeingThroughMessageHiddenForModeration,
permalinkCreator,
+ showHiddenEvents,
}),
);
}
diff --git a/src/shared-components/MockViewModel.ts b/src/shared-components/MockViewModel.ts
new file mode 100644
index 0000000000..28a1456a5d
--- /dev/null
+++ b/src/shared-components/MockViewModel.ts
@@ -0,0 +1,23 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type ViewModel } from "./ViewModel";
+
+/**
+ * A mock view model that returns a static snapshot passed in the constructor, with no updates.
+ */
+export class MockViewModel implements ViewModel {
+ public constructor(private snapshot: T) {}
+
+ public getSnapshot = (): T => {
+ return this.snapshot;
+ };
+
+ public subscribe(listener: () => void): () => void {
+ return () => undefined;
+ }
+}
diff --git a/src/shared-components/ViewModel.ts b/src/shared-components/ViewModel.ts
new file mode 100644
index 0000000000..9f088c4300
--- /dev/null
+++ b/src/shared-components/ViewModel.ts
@@ -0,0 +1,23 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * The interface for a generic View Model passed to the shared components.
+ * The snapshot is of type T which is a type specifying a snapshot for the view in question.
+ */
+export interface ViewModel {
+ /**
+ * The current snapshot of the view model.
+ */
+ getSnapshot: () => T;
+
+ /**
+ * Subscribes to changes in the view model.
+ * The listener will be called whenever the snapshot changes.
+ */
+ subscribe: (listener: () => void) => () => void;
+}
diff --git a/src/shared-components/event-tiles/TextualEvent/TextualEvent.stories.tsx b/src/shared-components/event-tiles/TextualEvent/TextualEvent.stories.tsx
new file mode 100644
index 0000000000..1746bc14b2
--- /dev/null
+++ b/src/shared-components/event-tiles/TextualEvent/TextualEvent.stories.tsx
@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { type Meta, type StoryFn } from "@storybook/react-vite";
+
+import { TextualEvent as TextualEventComponent } from "./TextualEvent";
+import { MockViewModel } from "../../MockViewModel";
+
+export default {
+ title: "Event/TextualEvent",
+ component: TextualEventComponent,
+ tags: ["autodocs"],
+ args: {
+ vm: new MockViewModel("Dummy textual event text"),
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ;
+
+export const Default = Template.bind({});
diff --git a/src/shared-components/event-tiles/TextualEvent/TextualEvent.test.tsx b/src/shared-components/event-tiles/TextualEvent/TextualEvent.test.tsx
new file mode 100644
index 0000000000..b1ef5e8f52
--- /dev/null
+++ b/src/shared-components/event-tiles/TextualEvent/TextualEvent.test.tsx
@@ -0,0 +1,21 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { composeStories } from "@storybook/react-vite";
+import { render } from "jest-matrix-react";
+import React from "react";
+
+import * as stories from "./TextualEvent.stories.tsx";
+
+const { Default } = composeStories(stories);
+
+describe("TextualEvent", () => {
+ it("renders a textual event", () => {
+ const { container } = render();
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/src/shared-components/event-tiles/TextualEvent/TextualEvent.tsx b/src/shared-components/event-tiles/TextualEvent/TextualEvent.tsx
new file mode 100644
index 0000000000..1dec80905e
--- /dev/null
+++ b/src/shared-components/event-tiles/TextualEvent/TextualEvent.tsx
@@ -0,0 +1,23 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type ReactNode, type JSX } from "react";
+
+import { type ViewModel } from "../../ViewModel";
+import { useViewModel } from "../../useViewModel";
+
+export type TextualEventViewSnapshot = string | ReactNode;
+
+export interface Props {
+ vm: ViewModel;
+}
+
+export function TextualEvent({ vm }: Props): JSX.Element {
+ const contents = useViewModel(vm);
+
+ return {contents}
;
+}
diff --git a/src/shared-components/event-tiles/TextualEvent/__snapshots__/TextualEvent.test.tsx.snap b/src/shared-components/event-tiles/TextualEvent/__snapshots__/TextualEvent.test.tsx.snap
new file mode 100644
index 0000000000..186e5f0afd
--- /dev/null
+++ b/src/shared-components/event-tiles/TextualEvent/__snapshots__/TextualEvent.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextualEvent renders a textual event 1`] = `
+
+
+ Dummy textual event text
+
+