FIX: Composer preview not caching inline onebox.

FIX: Composer preview not caching inline onebox.

diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index 347b939..616a022 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -41,7 +41,7 @@ import {
 import {
   INLINE_ONEBOX_LOADING_CSS_CLASS,
   INLINE_ONEBOX_CSS_CLASS
-} from "pretty-text/inline-oneboxer";
+} from "pretty-text/context/inline-onebox-css-classes";
 
 const REBUILD_SCROLL_MAP_EVENTS = ["composer:resized", "composer:typed-reply"];
 
diff --git a/app/assets/javascripts/pretty-text-bundle.js b/app/assets/javascripts/pretty-text-bundle.js
index 23dc012..3887f90 100644
--- a/app/assets/javascripts/pretty-text-bundle.js
+++ b/app/assets/javascripts/pretty-text-bundle.js
@@ -10,5 +10,6 @@
 //= require ./pretty-text/white-lister
 //= require ./pretty-text/sanitizer
 //= require ./pretty-text/oneboxer
+//= require ./pretty-text/context/inline-onebox-css-classes
 //= require ./pretty-text/inline-oneboxer
 //= require ./pretty-text/upload-short-url
diff --git a/app/assets/javascripts/pretty-text/context/inline-onebox-css-classes.js.es6.erb b/app/assets/javascripts/pretty-text/context/inline-onebox-css-classes.js.es6.erb
new file mode 100644
index 0000000..a252fb2
--- /dev/null
+++ b/app/assets/javascripts/pretty-text/context/inline-onebox-css-classes.js.es6.erb
@@ -0,0 +1,5 @@
+export const INLINE_ONEBOX_LOADING_CSS_CLASS =
+  "<%= CookedPostProcessor::INLINE_ONEBOX_LOADING_CSS_CLASS %>";
+
+export const INLINE_ONEBOX_CSS_CLASS =
+  "<%= CookedPostProcessor::INLINE_ONEBOX_CSS_CLASS %>";
diff --git a/app/assets/javascripts/pretty-text/engines/discourse-markdown/onebox.js.es6 b/app/assets/javascripts/pretty-text/engines/discourse-markdown/onebox.js.es6
index c367f87..ddd4a1b 100644
--- a/app/assets/javascripts/pretty-text/engines/discourse-markdown/onebox.js.es6
+++ b/app/assets/javascripts/pretty-text/engines/discourse-markdown/onebox.js.es6
@@ -1,10 +1,10 @@
 import { lookupCache } from "pretty-text/oneboxer";
+import { cachedInlineOnebox } from "pretty-text/inline-oneboxer";
 
 import {
-  cachedInlineOnebox,
   INLINE_ONEBOX_LOADING_CSS_CLASS,
   INLINE_ONEBOX_CSS_CLASS
-} from "pretty-text/inline-oneboxer";
+} from "pretty-text/context/inline-onebox-css-classes";
 
 const ONEBOX = 1;
 const INLINE = 2;
@@ -105,7 +105,7 @@ function applyOnebox(state, silent) {
             if (onebox && onebox.title) {
               text.content = onebox.title;
               attrs.push(["class", INLINE_ONEBOX_CSS_CLASS]);
-            } else {
+            } else if (!onebox) {
               attrs.push(["class", INLINE_ONEBOX_LOADING_CSS_CLASS]);
             }
           }
diff --git a/app/assets/javascripts/pretty-text/inline-oneboxer.js.es6 b/app/assets/javascripts/pretty-text/inline-oneboxer.js.es6
new file mode 100644
index 0000000..6fe6cf3
--- /dev/null
+++ b/app/assets/javascripts/pretty-text/inline-oneboxer.js.es6
@@ -0,0 +1,42 @@
+import {
+  INLINE_ONEBOX_LOADING_CSS_CLASS,
+  INLINE_ONEBOX_CSS_CLASS
+} from "pretty-text/context/inline-onebox-css-classes";
+
+const _cache = {};
+
+export function applyInlineOneboxes(inline, ajax) {
+  Object.keys(inline).forEach(url => {
+    // cache a blank locally, so we never trigger a lookup
+    _cache[url] = {};
+  });
+
+  return ajax("/inline-onebox", {
+    data: { urls: Object.keys(inline) }
+  }).then(result => {
+    result["inline-oneboxes"].forEach(onebox => {
+      if (onebox.title) {
+        _cache[onebox.url] = onebox;
+        let links = inline[onebox.url] || [];
+        links.forEach(link => {
+          $(link)
+            .text(onebox.title)
+            .addClass(INLINE_ONEBOX_CSS_CLASS)
+            .removeClass(INLINE_ONEBOX_LOADING_CSS_CLASS);
+        });
+      }
+    });
+  });
+}
+
+export function cachedInlineOnebox(url) {
+  return _cache[url];
+}
+
+export function applyCachedInlineOnebox(url, onebox) {
+  return (_cache[url] = onebox);
+}
+
+export function deleteCachedInlineOnebox(url) {
+  return delete _cache[url];
+}
diff --git a/app/assets/javascripts/pretty-text/inline-oneboxer.js.es6.erb b/app/assets/javascripts/pretty-text/inline-oneboxer.js.es6.erb
deleted file mode 100644
index 9f66c03..0000000
--- a/app/assets/javascripts/pretty-text/inline-oneboxer.js.es6.erb
+++ /dev/null
@@ -1,34 +0,0 @@
-let _cache = {};
-
-export const INLINE_ONEBOX_LOADING_CSS_CLASS =
-  "<%= CookedPostProcessor::INLINE_ONEBOX_LOADING_CSS_CLASS %>";
-
-export const INLINE_ONEBOX_CSS_CLASS =
-  "<%= CookedPostProcessor::INLINE_ONEBOX_CSS_CLASS %>";
-
-export function applyInlineOneboxes(inline, ajax) {
-  Object.keys(inline).forEach(url => {
-    // cache a blank locally, so we never trigger a lookup
-    _cache[url] = {};
-  });
-
-  return ajax("/inline-onebox", {
-    data: { urls: Object.keys(inline) }
-  }).then(result => {
-    result["inline-oneboxes"].forEach(onebox => {
-      if (onebox.title) {
-        _cache[onebox.url] = onebox;
-        let links = inline[onebox.url] || [];
-        links.forEach(link => {
-          $(link).text(onebox.title)
-            .addClass(INLINE_ONEBOX_CSS_CLASS)
-            .removeClass(INLINE_ONEBOX_LOADING_CSS_CLASS);
-        });
-      }
-    });
-  });
-}
-
-export function cachedInlineOnebox(url) {
-  return _cache[url];
-}
diff --git a/app/assets/javascripts/pretty-text/white-lister.js.es6 b/app/assets/javascripts/pretty-text/white-lister.js.es6
index f864126..40918c4 100644
--- a/app/assets/javascripts/pretty-text/white-lister.js.es6
+++ b/app/assets/javascripts/pretty-text/white-lister.js.es6
@@ -1,7 +1,7 @@
 import {
-  INLINE_ONEBOX_CSS_CLASS,
-  INLINE_ONEBOX_LOADING_CSS_CLASS
-} from "pretty-text/inline-oneboxer";
+  INLINE_ONEBOX_LOADING_CSS_CLASS,
+  INLINE_ONEBOX_CSS_CLASS
+} from "pretty-text/context/inline-onebox-css-classes";
 
 // to match:
 // abcd
diff --git a/test/javascripts/lib/pretty-text-test.js.es6 b/test/javascripts/lib/pretty-text-test.js.es6
index 90c503f..7974e05 100644
--- a/test/javascripts/lib/pretty-text-test.js.es6
+++ b/test/javascripts/lib/pretty-text-test.js.es6
@@ -2,7 +2,11 @@ import Quote from "discourse/lib/quote";
 import Post from "discourse/models/post";
 import { default as PrettyText, buildOptions } from "pretty-text/pretty-text";
 import { IMAGE_VERSION as v } from "pretty-text/emoji/version";
-import { INLINE_ONEBOX_LOADING_CSS_CLASS } from "pretty-text/inline-oneboxer";
+import { INLINE_ONEBOX_LOADING_CSS_CLASS } from "pretty-text/context/inline-onebox-css-classes";
+import {
+  applyCachedInlineOnebox,
+  deleteCachedInlineOnebox
+} from "pretty-text/inline-oneboxer";
 
 QUnit.module("lib:pretty-text");
 
@@ -196,12 +200,25 @@ QUnit.test("Links", assert => {
     "autolinks a URL"
   );
 
+  const link = "http://www.youtube.com/watch?v=1MrpeBRkM5A";
+
   assert.cooked(
-    "Youtube: http://www.youtube.com/watch?v=1MrpeBRkM5A",
-    `<p>Youtube: <a href="http://www.youtube.com/watch?v=1MrpeBRkM5A" class="${INLINE_ONEBOX_LOADING_CSS_CLASS}">http://www.youtube.com/watch?v=1MrpeBRkM5A</a></p>`,
+    `Youtube: ${link}`,
+    `<p>Youtube: <a href="${link}" class="${INLINE_ONEBOX_LOADING_CSS_CLASS}">${link}</a></p>`,
     "allows links to contain query params"
   );
 
+  try {
+    applyCachedInlineOnebox(link, {});
+
+    assert.cooked(
+      `Youtube: ${link}`,
+      `<p>Youtube: <a href="${link}">${link}</a></p>`
+    );
+  } finally {
+    deleteCachedInlineOnebox(link);
+  }
+
   assert.cooked(
     "Derpy: http://derp.com?__test=1",
     `<p>Derpy: <a href="http://derp.com?__test=1" class="${INLINE_ONEBOX_LOADING_CSS_CLASS}">http://derp.com?__test=1</a></p>`,

GitHub sha: bd538f74

1 Like

Fix the build.