Show an HTML diff with Wikipedia styling included if the backend has …

…an HTML of the suggestion context
bperel · May 21, 2020 · 267e9d7 · 267e9d7
1 parent 7e55570
commit 267e9d7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 35 deletions.
diff --git a/public/diff.css b/public/diff.css
@@ -0,0 +1,6 @@
+ins {
+    background: #e6ffe6;
+}
+del {
+    background: #ffe6e6;
+}
diff --git a/src/components/SuggestionDiff.vue b/src/components/SuggestionDiff.vue
@@ -1,5 +1,6 @@
 <template>
-  <pre class="html-diff" v-html="htmlDiff"></pre>
+  <b-spinner v-if="!htmlDiff" label="Loading"></b-spinner>
+  <iframe v-else :srcdoc="htmlDiff"></iframe>
 </template>
 <script>
 import axios from "axios";
@@ -10,33 +11,34 @@ import DiffMatchPatch, {
 } from "diff-match-patch";
 import { mapState } from "vuex";
 
-const diffToHtml = function (diffs) {
-  const html = [];
+const diffToHtml = (diffs) => {
   const pattern_amp = /&/g;
   const pattern_lt = /</g;
   const pattern_gt = />/g;
   const pattern_para = /\n/g;
-  for (let x = 0; x < diffs.length; x++) {
-    const op = diffs[x][0]; // Operation (insert, delete, equal)
-    const data = diffs[x][1]; // Text of change.
-    const text = data
-      .replace(pattern_amp, "&amp;")
-      .replace(pattern_lt, "&lt;")
-      .replace(pattern_gt, "&gt;")
-      .replace(pattern_para, "<br>");
-    switch (op) {
-      case DIFF_INSERT:
-        html[x] = `<ins>${text}</ins>`;
-        break;
-      case DIFF_DELETE:
-        html[x] = `<del>${text}</del>`;
-        break;
-      case DIFF_EQUAL:
-        html[x] = `<span>${text}</span>`;
-        break;
-    }
-  }
-  return html.join("");
+  return diffs
+    .map(([op, data]) => {
+      const text = data
+        .replace(pattern_amp, "&amp;")
+        .replace(pattern_lt, "&lt;")
+        .replace(pattern_gt, "&gt;")
+        .replace(pattern_para, "<br>");
+      switch (op) {
+        case DIFF_INSERT:
+          return `<ins>${text}</ins>`;
+        case DIFF_DELETE:
+          return `<del>${text}</del>`;
+        case DIFF_EQUAL:
+          return `<span>${text}</span>`;
+      }
+    })
+    .join("");
+};
+
+const diffCssMarkup = '<link rel="stylesheet" href="diff.css" />';
+
+String.prototype.toEscapedRegExp = function () {
+  return new RegExp(this.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&"), "g");
 };
 
 export default {
@@ -64,6 +66,13 @@ export default {
         let diff = dmp.diff_main(data.originalWikitext, data.suggestedWikitext);
         dmp.diff_cleanupSemantic(diff);
         vm.htmlDiff = diffToHtml(diff);
+        if (data.originalHtml) {
+          vm.htmlDiff = data.originalHtml
+            .replace(data.originalWikitext.toEscapedRegExp(), vm.htmlDiff)
+            .replace("</head>", `${diffCssMarkup}</head>`);
+        } else {
+          vm.htmlDiff = `<html><head>${diffCssMarkup}</head><body>${vm.htmlDiff}</body></html>`;
+        }
         this.$emit("suggestion-diff-loaded");
       })
       .catch(() => {
@@ -75,14 +84,9 @@ export default {
 </script>
 
 <style lang="scss">
-.html-diff {
-  white-space: pre-wrap;
-
-  ins {
-    background: #e6ffe6;
-  }
-  del {
-    background: #ffe6e6;
-  }
+iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
 }
 </style>
diff --git a/src/components/TileList.vue b/src/components/TileList.vue
@@ -122,7 +122,7 @@ export default {
   width: 100%;
   margin: 20px 0 !important;
 
-  a {
+  a.external {
     font-size: 0.8em;
   }
 
@@ -131,7 +131,7 @@ export default {
     color: #111111;
     background-color: #fffff8;
 
-    a {
+    a.external {
       color: #2966b8;
     }
   }