UX: avoid auto-linking clash with code marks on rich editor (#32365)

Avoid auto-linking URLs within code marks

Avoid auto-linking URLs when there's a `` ` `` just before the matched
URL, assuming the user is about to type a closing `` ` `` to create a
code mark instead.

app/assets/javascripts/discourse/app/static/prosemirror/extensions/link.js

@@ -194,8 +194,9 @@ const extension = {
               !node.isText ||
               node.marks.some(
                 (mark) =>
-                  mark.type.name === "link" &&
-                  !AUTO_LINKS.includes(mark.attrs.markup)
+                  (mark.type.name === "link" &&
+                    !AUTO_LINKS.includes(mark.attrs.markup)) ||
+                  mark.type.name === "code"
               )
             ) {
               return true;
@@ -270,6 +271,11 @@ const extension = {
               .getLinkify()
               .match(fullText)
               ?.forEach((match) => {
+                // small exception when we're typing `www.link.com
+                if (fullText[match.index - 1] === "`") {
+                  return;
+                }
+
                 tr.addMark(
                   startPos + match.index,
                   startPos + match.index + match.raw.length,

spec/system/composer/prosemirror_editor_spec.rb

@@ -576,12 +576,12 @@ describe "Composer - ProseMirror editor", type: :system do
       open_composer_and_toggle_rich_editor
 
       cdp.copy_paste(<<~HTML, html: true)
-          <img src="https://example.com/image.png" alt="alt
-          with new
-          lines" title="title
-          with new
-          lines">
-        HTML
+        <img src="https://example.com/image.png" alt="alt
+        with new
+        lines" title="title
+        with new
+        lines">
+      HTML
 
       expect(rich).to have_css("img[alt='alt with new lines'][title='title with new lines']")
 
@@ -651,6 +651,27 @@ describe "Composer - ProseMirror editor", type: :system do
 
       expect(rich).to have_css("a", text: "https://example.c")
     end
+
+    it "doesn't auto-link immediately following a `" do
+      open_composer_and_toggle_rich_editor
+
+      composer.type_content("`https://example.com`")
+
+      expect(rich).to have_css("code", text: "https://example.com")
+      expect(rich).to have_no_css("a", text: "https://example.com")
+    end
+
+    it "doesn't auto-link within code marks" do
+      open_composer_and_toggle_rich_editor
+
+      composer.type_content("`code mark`")
+      composer.send_keys(:left)
+
+      composer.type_content(" https://example.com")
+
+      expect(rich).to have_css("code", text: "code mark https://example.com")
+      expect(rich).to have_no_css("a", text: "https://example.com")
+    end
   end
 
   describe "uploads" do