FIX: Resolve short URLs after diffHTML was loaded (#14296)

FIX: Resolve short URLs after diffHTML was loaded (#14296)

Short URLs were resolved before diffHTML was loaded and content was swapped by it, which meant that no URLs were found and the URLs remained unsolved. This caused image elements to be blank.

  • DEV: Updated diffHTML to 1.0.0-beta.20
diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index 09b90e5..318a969 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/app/assets/javascripts/discourse/app/components/d-editor.js
@@ -390,6 +390,8 @@ export default Component.extend(TextareaTextManipulation, {
 
       this.set("preview", cooked);
 
+      let previewPromise = Promise.resolve();
+
       if (this.siteSettings.enable_diffhtml_preview) {
         const cookedElement = document.createElement("div");
         cookedElement.innerHTML = cooked;
@@ -407,40 +409,34 @@ export default Component.extend(TextareaTextManipulation, {
           true
         );
 
-        loadScript("/javascripts/diffhtml.min.js").then(() => {
-          // changing the contents of the preview element between two uses of
-          // diff.innerHTML did not apply the diff correctly
-          window.diff.release(this.element.querySelector(".d-editor-preview"));
+        previewPromise = loadScript("/javascripts/diffhtml.min.js").then(() => {
           window.diff.innerHTML(
             this.element.querySelector(".d-editor-preview"),
-            cookedElement.innerHTML,
-            {
-              parser: {
-                rawElements: ["script", "noscript", "style", "template"],
-              },
-            }
+            cookedElement.innerHTML
           );
         });
       }
 
-      schedule("afterRender", () => {
-        if (this._state !== "inDOM" || !this.element) {
-          return;
-        }
+      previewPromise.then(() => {
+        schedule("afterRender", () => {
+          if (this._state !== "inDOM" || !this.element) {
+            return;
+          }
 
-        const preview = this.element.querySelector(".d-editor-preview");
-        if (!preview) {
-          return;
-        }
+          const preview = this.element.querySelector(".d-editor-preview");
+          if (!preview) {
+            return;
+          }
 
-        // prevents any tab focus in preview
-        preview.querySelectorAll("a").forEach((anchor) => {
-          anchor.setAttribute("tabindex", "-1");
-        });
+          // prevents any tab focus in preview
+          preview.querySelectorAll("a").forEach((anchor) => {
+            anchor.setAttribute("tabindex", "-1");
+          });
 
-        if (this.previewUpdated) {
-          this.previewUpdated($(preview));
-        }
+          if (this.previewUpdated) {
+            this.previewUpdated($(preview));
+          }
+        });
       });
     });
   },
diff --git a/app/assets/javascripts/discourse/app/lib/public-js-versions.js b/app/assets/javascripts/discourse/app/lib/public-js-versions.js
index f3bb8cd..cf3a3ba 100644
--- a/app/assets/javascripts/discourse/app/lib/public-js-versions.js
+++ b/app/assets/javascripts/discourse/app/lib/public-js-versions.js
@@ -7,7 +7,7 @@ export const PUBLIC_JS_VERSIONS = {
   "Chart.min.js": "chart.js/3.5.1/Chart.min.js",
   "chartjs-plugin-datalabels.min.js":
     "chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js",
-  "diffhtml.min.js": "diffhtml/1.0.0-beta.18/diffhtml.min.js",
+  "diffhtml.min.js": "diffhtml/1.0.0-beta.20/diffhtml.min.js",
   "jquery.magnific-popup.min.js":
     "magnific-popup/1.1.0/jquery.magnific-popup.min.js",
   "pikaday.js": "pikaday/1.8.0/pikaday.js",
diff --git a/package.json b/package.json
index 18021b9..c1302be 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "author": "Discourse",
   "license": "GPL-2.0-only",
   "dependencies": {
+    "@discourse/itsatrap": "^2.0.10",
     "@fortawesome/fontawesome-free": "5.11.2",
     "@highlightjs/cdn-assets": "^10.6.0",
     "@json-editor/json-editor": "^2.5.2",
@@ -21,7 +22,7 @@
     "bootstrap": "v3.4.1",
     "chart.js": "3.5.1",
     "chartjs-plugin-datalabels": "^2.0.0",
-    "diffhtml": "^1.0.0-beta.18",
+    "diffhtml": "^1.0.0-beta.20",
     "eslint-config-discourse": "^1.1.8",
     "handlebars": "^4.7.7",
     "jquery": "3.5.1",
@@ -41,8 +42,7 @@
     "workbox-expiration": "^4.3.1",
     "workbox-routing": "^4.3.1",
     "workbox-strategies": "^4.3.1",
-    "workbox-sw": "^4.3.1",
-    "@discourse/itsatrap": "^2.0.10"
+    "workbox-sw": "^4.3.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.2",
diff --git a/public/javascripts/diffhtml.min.js b/public/javascripts/diffhtml.min.js
index 292f265..d81e24a 100644
--- a/public/javascripts/diffhtml.min.js
+++ b/public/javascripts/diffhtml.min.js
@@ -1 +1 @@

[... diff too long, it was truncated ...]

GitHub sha: 76f0cf10e6685b54af88bb5bbe30657489886c4a

This commit appears in #14296 which was approved by pmusaraj. It was merged by nbianca.