Merge pull request #10372 from matrix-org/backport-10370-to-staging

Roll back pillify everything (#10370)

Author: andybalaam

src/components/views/messages/TextualBody.tsx

@@ -92,8 +92,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         const showLineNumbers = SettingsStore.getValue("showCodeLineNumbers");
         this.activateSpoilers([content]);
 
-        HtmlUtils.linkifyElement(content);
+        // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
+        // are still sent as plaintext URLs. If these are ever pillified in the composer,
+        // we should be pillify them here by doing the linkifying BEFORE the pillifying.
         pillifyLinks([content], this.props.mxEvent, this.pills);
+        HtmlUtils.linkifyElement(content);
 
         this.calculateUrlPreview();
 

test/components/views/messages/TextualBody-test.tsx

@@ -147,21 +147,21 @@ describe("<TextualBody />", () => {
             );
         });
 
-        it("pillification of MXIDs get applied correctly into the DOM", () => {
+        it("should not pillify MXIDs", () => {
             const ev = mkRoomTextMessage("Chat with @user:example.com");
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span>"`,
+                `"Chat with <a href="https://matrix.to/#/@user:example.com" class="linkified" rel="noreferrer noopener">@user:example.com</a>"`,
             );
         });
 
-        it("pillification of room aliases get applied correctly into the DOM", () => {
+        it("should not pillify room aliases", () => {
             const ev = mkRoomTextMessage("Visit #room:example.com");
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><span class="mx_Pill_linkText">#room:example.com</span></a></bdi></span>"`,
+                `"Visit <a href="https://matrix.to/#/#room:example.com" class="linkified" rel="noreferrer noopener">#room:example.com</a>"`,
             );
         });
     });