Koenig - Textarea-only markdown card

refs https://github.com/TryGhost/Ghost/issues/9311
- add `{{koenig-card-markdown}}` component that renders an auto expanding textarea with the markdown card value
- add `{{card-markdown}}` that is an alias of `{{koenig-card-markdown}}` for backwards compatibility - all of our pre-1.0 alpha cards and our current markdown implementation do not have the `koenig-` prefix in their card names

ghost/admin/app/styles/components/koenig.css

@@ -204,6 +204,12 @@
 
 /* Menu items --------------------------------------------------------------- */
 
+/* Cards -------------------------------------------------------------------- */
+
+textarea.koenig-card-markdown {
+    max-width: 100%;
+}
+
 /* mobiledoc-kit base styles ------------------------------------------------
  * NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css
  */
@@ -285,6 +291,7 @@
  * Cards
  */
 
+
 /**
  * Tooltips
  */

ghost/admin/lib/koenig-editor/addon/components/card-markdown.js

@@ -0,0 +1,5 @@
+import KoenigCardMarkdownComponent from './koenig-card-markdown';
+
+export default KoenigCardMarkdownComponent.extend({
+    // this is just an alias for backwards compatibility
+});

ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js

@@ -0,0 +1,23 @@
+import Component from '@ember/component';
+import layout from '../templates/components/koenig-card-markdown';
+import {set} from '@ember/object';
+
+export default Component.extend({
+    tagName: '',
+    layout,
+
+    payload: null,
+    saveCard: null,
+
+    actions: {
+        updateMarkdown(markdown) {
+            let payload = this.get('payload');
+            let save = this.get('saveCard');
+
+            set(payload, 'markdown', markdown);
+
+            // update the mobiledoc and stay in edit mode
+            save(payload, false);
+        }
+    }
+});

ghost/admin/lib/koenig-editor/addon/options/cards.js

@@ -2,5 +2,8 @@ import createComponentCard from '../utils/create-component-card';
 
 export default [
     createComponentCard('koenig-card-hr'),
-    createComponentCard('koenig-card-image')
+    createComponentCard('koenig-card-image'),
+    createComponentCard('koenig-card-markdown'),
+    // alias of koenig-card-markdown for backwards compat
+    createComponentCard('card-markdown')
 ];

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs

@@ -0,0 +1,5 @@
+{{gh-textarea
+    class="koenig-card-markdown"
+    value=payload.markdown
+    update=(action "updateMarkdown")
+    autoExpand=".gh-koenig-editor"}}

ghost/admin/lib/koenig-editor/app/components/card-markdown.js

@@ -0,0 +1 @@
+export {default} from 'koenig-editor/components/card-markdown';

ghost/admin/lib/koenig-editor/app/components/koenig-card-markdown.js

@@ -0,0 +1 @@
+export {default} from 'koenig-editor/components/koenig-card-markdown';

ghost/admin/tests/integration/components/koenig-card-markdown-test.js

@@ -0,0 +1,24 @@
+import hbs from 'htmlbars-inline-precompile';
+import {describe, it} from 'mocha';
+import {expect} from 'chai';
+import {setupComponentTest} from 'ember-mocha';
+
+describe('Integration: Component: koenig-card-markdown', function () {
+    setupComponentTest('koenig-card-markdown', {
+        integration: true
+    });
+
+    it('renders', function () {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.on('myAction', function(val) { ... });
+        // Template block usage:
+        // this.render(hbs`
+        //   {{#koenig-card-markdown}}
+        //     template content
+        //   {{/koenig-card-markdown}}
+        // `);
+
+        this.render(hbs`{{koenig-card-markdown}}`);
+        expect(this.$()).to.have.length(1);
+    });
+});