Fix issues with /me emote two liner (#33081)

* Fix issues with me emote liner

* Fix Prettier
This commit is contained in:
Zack 2026-04-09 14:13:02 +02:00 committed by GitHub
parent 1721b69017
commit 70e40009a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 2 deletions

View File

@ -1378,6 +1378,10 @@ $left-gutter: 64px;
display: flex;
}
.mx_EventTile_annotatedInline {
display: inline-flex;
}
.mx_EventTile_footer {
display: flex;
gap: var(--cpd-space-2x);

View File

@ -301,6 +301,9 @@ class InnerTextualBody extends React.Component<Props> {
const isCaption = [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(
content.msgtype as MsgType,
);
const annotatedClassName = isEmote
? "mx_EventTile_annotated mx_EventTile_annotatedInline"
: "mx_EventTile_annotated";
const willHaveWrapper =
this.props.replacingEventId || this.props.isSeeingThroughMessageHiddenForModeration || isEmote;
@ -315,7 +318,7 @@ class InnerTextualBody extends React.Component<Props> {
if (this.props.replacingEventId) {
body = (
<div dir="auto" className="mx_EventTile_annotated">
<div dir="auto" className={annotatedClassName}>
{body}
{this.renderEditedMarker()}
</div>
@ -323,7 +326,7 @@ class InnerTextualBody extends React.Component<Props> {
}
if (this.props.isSeeingThroughMessageHiddenForModeration) {
body = (
<div dir="auto" className="mx_EventTile_annotated">
<div dir="auto" className={annotatedClassName}>
{body}
{this.renderPendingModerationMarker()}
</div>

View File

@ -146,6 +146,28 @@ describe("<TextualBody />", () => {
expect(content).toMatchSnapshot();
});
it("keeps edited emote bodies inline with the sender", () => {
DMRoomMap.makeShared(defaultMatrixClient);
const ev = mkEvent({
type: "m.room.message",
room: room1Id,
user: "sender",
content: {
body: "winks",
msgtype: "m.emote",
},
event: true,
});
jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
const { container } = getComponent({ mxEvent: ev, replacingEventId: ev.getId() });
const annotated = container.querySelector(".mx_MEmoteBody > .mx_EventTile_annotatedInline");
expect(annotated).not.toBeNull();
expect(annotated?.tagName).toBe("DIV");
});
it("renders m.notice correctly", () => {
DMRoomMap.makeShared(defaultMatrixClient);