From bb79c6086a6680d376d984a1922292ea052fb3d8 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Feb 2022 06:46:34 -0500
Subject: [PATCH] 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                         |  6 +++++-
 .../views/messages/TextualBody-test.js        | 20 +++++++++++++++++++
 .../__snapshots__/TextualBody-test.js.snap    |  8 ++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 test/components/views/messages/__snapshots__/TextualBody-test.js.snap

diff --git a/src/utils/pillify.tsx b/src/utils/pillify.tsx
index 396ddd5dbf9..2032d86b690 100644
--- a/src/utils/pillify.tsx
+++ b/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
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index 26d7726f082..5018663febb 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/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",
diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.js.snap b/test/components/views/messages/__snapshots__/TextualBody-test.js.snap
new file mode 100644
index 00000000000..9d481765e1d
--- /dev/null
+++ b/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>"
+`;