Fix edited reply quote collapse (#33487)

* Fix edited reply quote collapse * Add regression test for edited reply quotes
2026-05-13 12:23:56 +02:00
parent 85aca65a81
commit 8400f56004
4 changed files with 85 additions and 2 deletions
@@ -66,6 +66,12 @@ Please see LICENSE files in the repository root for full details.
            display: inline;
        }

+        // The annotation wrapper is flex in normal timeline messages, but that stops
+        // -webkit-line-clamp from trimming long edited quotes down to two lines.
+        [data-textual-body-annotation-wrapper] {
+            display: contents;
+        }
+
        // Hide line numbers and edited indicator
        .mx_EventTile_lineNumbers,
        [data-textual-body-edited-marker] {
@@ -59,4 +59,78 @@ describe("ReplyChain", () => {
        await waitFor(() => expect(setQuoteExpanded).toHaveBeenCalledWith(false));
        expect(asFragment()).toMatchSnapshot();
    });
+
+    it("keeps long edited reply quotes collapsible", async () => {
+        // Jest/JSDOM won't set clientHeight/scrollHeight for us so we have to synthesise it
+        jest.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(100);
+        jest.spyOn(Element.prototype, "scrollHeight", "get").mockReturnValue(150);
+
+        const cli = stubClient();
+        const { room_id: roomId } = await cli.createRoom({});
+        const room = cli.getRoom(roomId)!;
+        const longBody = Array.from({ length: 80 }, (_, index) => `word${index}`).join(" ");
+        const editedLongBody = `${longBody} edited`;
+
+        const targetEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event1",
+            content: {
+                body: longBody,
+                msgtype: "m.text",
+            },
+        });
+        const editEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event1-edit",
+            content: {
+                "body": `* ${editedLongBody}`,
+                "msgtype": "m.text",
+                "m.new_content": {
+                    body: editedLongBody,
+                    msgtype: "m.text",
+                },
+            },
+        });
+        jest.spyOn(targetEv, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
+        targetEv.makeReplaced(editEv);
+        jest.spyOn(room, "findEventById").mockReturnValue(targetEv);
+
+        const parentEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event2",
+            content: {
+                "body": "Reply",
+                "msgtype": "m.text",
+                "m.relates_to": {
+                    "m.in_reply_to": {
+                        event_id: "$event1",
+                    },
+                },
+            },
+        });
+        const setQuoteExpanded = jest.fn();
+        const { container } = render(
+            <ReplyChain parentEv={parentEv} setQuoteExpanded={setQuoteExpanded} />,
+            withClientContextRenderOptions(cli),
+        );
+
+        await waitFor(() => expect(setQuoteExpanded).toHaveBeenCalledWith(false));
+        await waitFor(() => expect(container).toHaveTextContent(editedLongBody));
+
+        const replyTile = container.querySelector(".mx_ReplyTile");
+        expect(replyTile).not.toBeNull();
+        const annotationWrapper = replyTile!.querySelector("[data-textual-body-annotation-wrapper]");
+        expect(annotationWrapper).not.toBeNull();
+        expect(annotationWrapper).toContainElement(replyTile!.querySelector(".mx_EventTile_body"));
+        expect(annotationWrapper).toContainElement(replyTile!.querySelector("[data-textual-body-edited-marker]"));
+    });
 });
@@ -255,14 +255,16 @@ export function TextualBodyView({
            [styles.annotatedInline]: kind === TextualBodyViewKind.EMOTE,
        });

+        // Reply quotes need to tweak this wrapper so long edited messages still clamp nicely.
+        // Keep this hook stable so app CSS doesn't have to reach into CSS-module class names.
        renderedBody =
            kind === TextualBodyViewKind.EMOTE ? (
-                <span dir="auto" className={annotatedClasses}>
+                <span dir="auto" className={annotatedClasses} data-textual-body-annotation-wrapper="">
                    {renderedBody}
                    {markers}
                </span>
            ) : (
-                <div dir="auto" className={annotatedClasses}>
+                <div dir="auto" className={annotatedClasses} data-textual-body-annotation-wrapper="">
                    {renderedBody}
                    {markers}
                </div>
@@ -33,6 +33,7 @@ exports[`TextualBodyView > renders emote messages with annotations 1`] = `
     
    <span
      class="TextualBody-module_annotated TextualBody-module_annotatedInline"
+      data-textual-body-annotation-wrapper=""
      dir="auto"
    >
      <span>