🐛 fix missing meta description preview (#719)

refs #718, refs TryGhost/Ghost#8305

- meta description preview in the PSM was relying on the `html` field which is no longer queried - see #718 and TryGhost/Ghost#8305
- restores live preview that was in LTS but removed whilst implementing mobiledoc because we had no quick way of rendering mobiledoc->text
- adds a boolean argument to the `formatMarkdown` util that can disable the replacement of `<script>` and `<iframe>` tags so that the inserted text isn't rendered when converting HTML to text

app/components/gh-post-settings-menu.js

@@ -3,6 +3,7 @@ import Ember from 'ember';
 import SettingsMenuMixin from 'ghost-admin/mixins/settings-menu-component';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import computed, {alias} from 'ember-computed';
+import formatMarkdown from 'ghost-admin/utils/format-markdown';
 import injectService from 'ember-service/inject';
 import isNumber from 'ghost-admin/utils/isNumber';
 import moment from 'moment';
@@ -70,17 +71,20 @@ export default Component.extend(SettingsMenuMixin, {
         return metaTitle;
     }),
 
-    seoDescription: computed('model.html', 'metaDescriptionScratch', function () {
+    seoDescription: computed('model.scratch', 'metaDescriptionScratch', function () {
         let metaDescription = this.get('metaDescriptionScratch') || '';
+        let mobiledoc = this.get('model.scratch');
+        let markdown = mobiledoc.cards && mobiledoc.cards[0][1].markdown;
         let placeholder;
 
         if (metaDescription.length > 0) {
             placeholder = metaDescription;
         } else {
-            let html = this.get('model.html');
+            let div = document.createElement('div');
+            div.innerHTML = formatMarkdown(markdown, false);
 
             // Strip HTML
-            placeholder = this.$('<div />', {html}).text();
+            placeholder = div.textContent;
             // Replace new lines and trim
             placeholder = placeholder.replace(/\n+/g, ' ').trim();
         }

app/utils/format-markdown.js

@@ -27,18 +27,20 @@ let md = markdownit({
     }
 });
 
-export default function formatMarkdown(_markdown) {
+export default function formatMarkdown(_markdown, replaceJS = true) {
     let markdown = _markdown || '';
     let escapedhtml = '';
 
     // convert markdown to HTML
     escapedhtml = md.render(markdown);
 
     // replace script and iFrame
-    escapedhtml = escapedhtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
-        '<pre class="js-embed-placeholder">Embedded JavaScript</pre>');
-    escapedhtml = escapedhtml.replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi,
-        '<pre class="iframe-embed-placeholder">Embedded iFrame</pre>');
+    if (replaceJS) {
+        escapedhtml = escapedhtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+            '<pre class="js-embed-placeholder">Embedded JavaScript</pre>');
+        escapedhtml = escapedhtml.replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi,
+            '<pre class="iframe-embed-placeholder">Embedded iFrame</pre>');
+    }
 
     // sanitize html
     escapedhtml = html_sanitize(escapedhtml, cajaSanitizers.url, cajaSanitizers.id);

tests/unit/components/gh-post-settings-menu-test.js

@@ -196,9 +196,23 @@ describe.skip('Unit: Component: post-settings-menu', function () {
             expect(component.get('seoDescription')).to.equal('a description');
         });
 
-        it.skip('should be generated from the rendered markdown if not explicitly set', function () {
-            // can't test right now because the rendered markdown is being pulled
-            // from the DOM via jquery
+        it('should be generated from the rendered mobiledoc if not explicitly set', function () {
+            let component = this.subject({
+                model: EmberObject.extend({
+                    author: RSVP.resolve(),
+                    metaDescription: null,
+                    metaDescriptionScratch: boundOneWay('metaDescription'),
+                    scratch: {
+                        cards: [
+                            ['markdown-card', {
+                                markdown: '# This is a <strong>test</strong> <script>foo</script>'
+                            }]
+                        ]
+                    }
+                }).create()
+            });
+
+            expect(component.get('seoDescription')).to.equal('This is a test');
         });
 
         it('should truncate to 156 characters with an appended ellipsis', function () {