Don't pillify code blocks (#7861)

* Don't pillify code blocks

Signed-off-by: Robin Townsend <robin@robin.town>

* Test that pills do not appear in code blocks

Signed-off-by: Robin Townsend <robin@robin.town>

* Use snapshot instead for test

Signed-off-by: Robin Townsend <robin@robin.town>

src/utils/pillify.tsx

@@ -44,7 +44,11 @@ export function pillifyLinks(nodes: ArrayLike<Element>, mxEvent: MatrixEvent, pi
     while (node) {
         let pillified = false;
 
-        if (node.tagName === "A" && node.getAttribute("href")) {
+        if (node.tagName === "PRE" || node.tagName === "CODE") {
+            // Skip code blocks
+            node = node.nextSibling as Element;
+            continue;
+        } else if (node.tagName === "A" && node.getAttribute("href")) {
             const href = node.getAttribute("href");
             const parts = parsePermalink(href);
             // If the link is a (localised) matrix.to link, replace it with a pill

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

@@ -222,6 +222,26 @@ describe("<TextualBody />", () => {
                 '</span></span>');
         });
 
+        it("pills do not appear in code blocks", () => {
+            const ev = mkEvent({
+                type: "m.room.message",
+                room: "room_id",
+                user: "sender",
+                content: {
+                    body: "`@room`\n```\n@room\n```",
+                    msgtype: "m.text",
+                    format: "org.matrix.custom.html",
+                    formatted_body: "<p><code>@room</code></p>\n<pre><code>@room\n</code></pre>\n",
+                },
+                event: true,
+            });
+
+            const wrapper = mount(<TextualBody mxEvent={ev} />);
+            expect(wrapper.text()).toBe("@room\n1@room\n\n");
+            const content = wrapper.find(".mx_EventTile_body");
+            expect(content.html()).toMatchSnapshot();
+        });
+
         it("pills do not appear for event permalinks", () => {
             const ev = mkEvent({
                 type: "m.room.message",

test/components/views/messages/__snapshots__/TextualBody-test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextualBody /> renders formatted m.text correctly pills do not appear in code blocks 1`] = `
+"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\"><p><code>@room</code></p>
+<div class=\\"mx_EventTile_pre_container\\"><pre class=\\"mx_EventTile_collapsedCodeBlock\\"><span class=\\"mx_EventTile_lineNumbers\\"><span>1</span></span><code>@room
+</code><span></span></pre><span class=\\"mx_EventTile_button mx_EventTile_copyButton \\"></span></div>
+</span>"
+`;