FIX: Allow new hashtag HTML to be quoted to markdown (#19117)

Follow up from d3f02a1270

This commit fixes post quoting so that if the new
hashtag-cooked HTML is selected, we convert back to
a regular plain text #hashtag with the correct type and ref.

app/assets/javascripts/discourse/app/lib/to-markdown.js

@@ -315,6 +315,18 @@ export class Tag {
           return text;
         }
 
+        if ("hashtag-cooked" === attr.class) {
+          if (attr["data-ref"]) {
+            return `#${attr["data-ref"]}`;
+          } else {
+            let type = "";
+            if (attr["data-type"]) {
+              type = `::${attr["data-type"]}`;
+            }
+            return `#${attr["data-slug"]}${type}`;
+          }
+        }
+
         let img;
         if (
           ["lightbox", "d-lazyload"].includes(attr.class) &&

app/assets/javascripts/discourse/tests/unit/lib/to-markdown-test.js

@@ -353,6 +353,30 @@ helloWorld();</code>consectetur.`;
     assert.strictEqual(toMarkdown(html), markdown);
   });
 
+  test("keeps hashtag-cooked and converts to bare hashtag with type", function (assert) {
+    const html = `
+      <p dir="ltr">This is <a class="hashtag-cooked" href="/c/ux/14" data-type="category" data-slug="ux">
+      <svg class="fa d-icon d-icon-folder svg-icon svg-node">
+        <use href="#folder"></use>
+      </svg>
+      <span>ux</span>
+      </a> and <a class="hashtag-cooked" href="/tag/design" data-slug="design">
+      <svg class="fa d-icon d-icon-tag svg-icon svg-node">
+        <use href="#tag"></use>
+      </svg>
+      <span>design</span>
+      </a> and <a class="hashtag-cooked" href="/c/uncategorized/design/22" data-type="category" data-slug="design" data-ref="uncategorized:design">
+      <svg class="fa d-icon d-icon-folder svg-icon svg-node">
+        <use href="#folder"></use>
+      </svg>
+      <span>design</span>
+      </a></p>
+    `;
+
+    const markdown = `This is #ux::category and #design and #uncategorized:design`;
+    assert.strictEqual(toMarkdown(html), markdown);
+  });
+
   test("keeps emoji and removes click count", function (assert) {
     const html = `
       <p>

app/assets/javascripts/pretty-text/engines/discourse-markdown/hashtag-autocomplete.js

@@ -25,12 +25,22 @@ function addHashtag(buffer, matches, state) {
   let token;
   if (result) {
     token = new state.Token("link_open", "a", 1);
+
+    // Data attributes here are used later on for things like quoting
+    // HTML-to-markdown
     token.attrs = [
       ["class", "hashtag-cooked"],
       ["href", result.relative_url],
       ["data-type", result.type],
       ["data-slug", result.slug],
     ];
+
+    // Most cases these will be the exact same, one standout is categories
+    // which have a parent:child reference.
+    if (result.slug !== result.ref) {
+      token.attrs.push(["data-ref", result.ref]);
+    }
+
     token.block = false;
     buffer.push(token);
 
@@ -127,6 +137,7 @@ export function setup(helper) {
       "span.hashtag-raw",
       "a[data-type]",
       "a[data-slug]",
+      "a[data-ref]",
     ])
   );
 }