FIX: Composer preview not caching inline onebox.

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"];
 

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

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 %>";

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]);
             }
           }

app/assets/javascripts/pretty-text/inline-oneboxer.js.es6

@@ -1,10 +1,9 @@
-let _cache = {};
+import {
+  INLINE_ONEBOX_LOADING_CSS_CLASS,
+  INLINE_ONEBOX_CSS_CLASS
+} from "pretty-text/context/inline-onebox-css-classes";
 
-export const INLINE_ONEBOX_LOADING_CSS_CLASS =
+const _cache = {};
-  "<%= 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 => {
@@ -20,7 +19,8 @@ export function applyInlineOneboxes(inline, ajax) {
         _cache[onebox.url] = onebox;
         let links = inline[onebox.url] || [];
         links.forEach(link => {
-          $(link).text(onebox.title)
+          $(link)
+            .text(onebox.title)
             .addClass(INLINE_ONEBOX_CSS_CLASS)
             .removeClass(INLINE_ONEBOX_LOADING_CSS_CLASS);
         });
@@ -32,3 +32,11 @@ export function applyInlineOneboxes(inline, ajax) {
 export function cachedInlineOnebox(url) {
   return _cache[url];
 }
+
+export function applyCachedInlineOnebox(url, onebox) {
+  return (_cache[url] = onebox);
+}
+
+export function deleteCachedInlineOnebox(url) {
+  return delete _cache[url];
+}

app/assets/javascripts/pretty-text/white-lister.js.es6

@@ -1,7 +1,7 @@
 import {
-  INLINE_ONEBOX_CSS_CLASS,
+  INLINE_ONEBOX_LOADING_CSS_CLASS,
-  INLINE_ONEBOX_LOADING_CSS_CLASS
+  INLINE_ONEBOX_CSS_CLASS
-} from "pretty-text/inline-oneboxer";
+} from "pretty-text/context/inline-onebox-css-classes";
 
 // to match:
 // abcd

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",
+    `Youtube: ${link}`,
-    `<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>`,
+    `<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>`,