Don't linkify code blocks (#7859)

* Don't linkify code blocks

Signed-off-by: Robin Townsend <[email protected]>

* Put the linkify ignoreTags option in the right place

Signed-off-by: Robin Townsend <[email protected]>

* Add code to list of ignored linkification tags as well

Signed-off-by: Robin Townsend <[email protected]>

* Test that code blocks skip linkification

Signed-off-by: Robin Townsend <[email protected]>

* Move test to the right spot

Signed-off-by: Robin Townsend <[email protected]>

* Use a snapshot instead for test

Signed-off-by: Robin Townsend <[email protected]>

Author: robintown

src/linkify-matrix.ts

@@ -225,6 +225,8 @@ export const options = {
         rel: 'noreferrer noopener',
     },
 
+    ignoreTags: ['pre', 'code'],
+
     className: 'linkified',
 
     target: function(href: string, type: Type | string): string {

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

@@ -216,6 +216,26 @@ describe("<TextualBody />", () => {
                 '</span></span></span>');
         });
 
+        it("linkification is not applied to code blocks", () => {
+            const ev = mkEvent({
+                type: "m.room.message",
+                room: "room_id",
+                user: "sender",
+                content: {
+                    body: "Visit `https://matrix.org/`\n```\nhttps://matrix.org/\n```",
+                    msgtype: "m.text",
+                    format: "org.matrix.custom.html",
+                    formatted_body: "<p>Visit <code>https://matrix.org/</code></p>\n<pre>https://matrix.org/\n</pre>\n",
+                },
+                event: true,
+            });
+
+            const wrapper = getComponent({ mxEvent: ev }, matrixClient);
+            expect(wrapper.text()).toBe("Visit https://matrix.org/\n1https://matrix.org/\n\n");
+            const content = wrapper.find(".mx_EventTile_body");
+            expect(content.html()).toMatchSnapshot();
+        });
+
         // If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
         it("pills get injected correctly into the DOM", () => {
             const ev = mkEvent({

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

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<TextualBody /> renders formatted m.text correctly linkification is not applied to code blocks 1`] = `
+"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\"><p>Visit <code>https://matrix.org/</code></p>
+<div class=\\"mx_EventTile_pre_container\\"><pre class=\\"mx_EventTile_collapsedCodeBlock\\"><span class=\\"mx_EventTile_lineNumbers\\"><span>1</span></span><code>https://matrix.org/
+</code><span></span></pre><span class=\\"mx_EventTile_button mx_EventTile_copyButton \\"></span></div>
+</span>"
+`;
+
 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