FEATURE: Add base62 sha1 to cooked data attribute

* FEATURE: Add base62 sha1 to data attribute in `Post#cooked`.

* FIX: Use `Upload#short_url` when quoting an image.

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

@@ -230,7 +230,9 @@ export class Tag {
         const e = this.element;
         const attr = e.attributes;
         const pAttr = (e.parent && e.parent.attributes) || {};
-        const src = attr.src || pAttr.src;
+        let src = attr.src || pAttr.src;
+        const base62SHA1 = attr["data-base62-sha1"];
+        if (base62SHA1) src = `upload://${base62SHA1}`;
         const cssClass = attr.class || pAttr.class;
 
         if (cssClass && cssClass.includes("emoji")) {

app/assets/javascripts/pretty-text/engines/discourse-markdown/upload-protocol.js.es6

@@ -45,6 +45,7 @@ function rule(state) {
         case "img":
           if (mapped) {
             token.attrs[srcIndex][1] = mapped.url;
+            token.attrs.push(["data-base62-sha1", mapped.base62_sha1]);
           } else {
             token.attrs[srcIndex][1] = state.md.options.discourse.getURL(
               "/images/transparent.png"
@@ -73,7 +74,12 @@ function rule(state) {
 export function setup(helper) {
   const opts = helper.getOptions();
   if (opts.previewing) helper.whiteList(["img.resizable"]);
-  helper.whiteList(["img[data-orig-src]", "a[data-orig-href]"]);
+
+  helper.whiteList([
+    "img[data-orig-src]",
+    "img[data-base62-sha1]",
+    "a[data-orig-href]"
+  ]);
 
   helper.registerPlugin(md => {
     md.core.ruler.push("upload-protocol", rule);

lib/pretty_text/helpers.rb

@@ -73,7 +73,8 @@ module PrettyText
             short_urls.each do |short_url|
               result[short_url] = {
                 url: url,
-                short_path: Upload.short_path(sha1: sha1, extension: extension)
+                short_path: Upload.short_path(sha1: sha1, extension: extension),
+                base62_sha1: Upload.base62_sha1(sha1)
               }
             end
           end

spec/components/cooked_post_processor_spec.rb

@@ -1040,7 +1040,7 @@ describe CookedPostProcessor do
 
         expect(cpp.html).to match_html <<~HTML
           <p>This post has a local emoji <img src="https://local.cdn.com/images/emoji/twitter/+1.png?v=#{Emoji::EMOJI_VERSION}" title=":+1:" class="emoji" alt=":+1:"> and an external upload</p>
-          <p><img src="https://s3.cdn.com/#{stored_path}" alt="smallest.png" width="10" height="20"></p>
+          <p><img src="https://s3.cdn.com/#{stored_path}" alt="smallest.png" data-base62-sha1="#{upload.base62_sha1}" width="10" height="20"></p>
         HTML
       end
 

spec/components/pretty_text_spec.rb

@@ -1270,6 +1270,8 @@ HTML
       raw = <<~RAW
       ![upload](#{upload.short_url})
 
+      ![upload](#{upload.short_url} "some title to test")
+
       - ![upload](#{upload.short_url})
 
       - test
@@ -1285,19 +1287,20 @@ HTML
       RAW
 
       cooked = <<~HTML
-        <p><img src="#{upload.url}" alt="upload"></p>
+        <p><img src="#{upload.url}" alt="upload" data-base62-sha1="#{upload.base62_sha1}"></p>
+        <p><img src="#{upload.url}" alt="upload" title="some title to test" data-base62-sha1="#{upload.base62_sha1}"></p>
         <ul>
         <li>
-        <p><img src="#{upload.url}" alt="upload"></p>
+        <p><img src="#{upload.url}" alt="upload" data-base62-sha1="#{upload.base62_sha1}"></p>
         </li>
         <li>
         <p>test</p>
         <ul>
-        <li><img src="#{upload.url}" alt="upload"></li>
+        <li><img src="#{upload.url}" alt="upload" data-base62-sha1="#{upload.base62_sha1}"></li>
         </ul>
         </li>
         </ul>
-        <p><img src="#{upload.url}" alt="upload"></p>
+        <p><img src="#{upload.url}" alt="upload" data-base62-sha1="#{upload.base62_sha1}"></p>
         <p><a href="#{upload.short_path}">some attachment</a></p>
         <p><a class="attachment" href="#{upload.short_path}">some attachment</a></p>
         <p><a href="#{upload.short_path}">some attachment|random</a></p>

test/javascripts/lib/to-markdown-test.js.es6

@@ -163,12 +163,19 @@ QUnit.test(
 
 QUnit.test("converts img tag", assert => {
   const url = "https://example.com/image.png";
+  const base62SHA1 = "q16M6GR110R47Z9p9Dk3PMXOJoE";
   let html = `<img src="${url}" width="100" height="50">`;
   assert.equal(toMarkdown(html), `![|100x50](${url})`);
 
   html = `<img src="${url}" width="100" height="50" title="some title">`;
   assert.equal(toMarkdown(html), `![|100x50](${url} "some title")`);
 
+  html = `<img src="${url}" width="100" height="50" title="some title" data-base62-sha1="${base62SHA1}">`;
+  assert.equal(
+    toMarkdown(html),
+    `![|100x50](upload://${base62SHA1} "some title")`
+  );
+
   html = `<div><span><img src="${url}" alt="description" width="50" height="100" /></span></div>`;
   assert.equal(toMarkdown(html), `![description|50x100](${url})`);