Koenig - Display-only image card with markdown text expansion

refs https://github.com/TryGhost/Ghost/issues/9311
- adds the `koenig-card-image` card that renders an `<img>` element
- adds text expansion to convert markdown images into the new image card

lib/koenig-editor/addon/components/koenig-card-image.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../templates/components/koenig-card-image';
+
+export default Component.extend({
+    tagName: '',
+    layout
+});

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

@@ -1,5 +1,6 @@
 import createComponentCard from '../utils/create-component-card';
 
 export default [
-    createComponentCard('koenig-card-hr')
+    createComponentCard('koenig-card-hr'),
+    createComponentCard('koenig-card-image')
 ];

lib/koenig-editor/addon/options/text-expansions.js

@@ -34,6 +34,7 @@ export default function (editor) {
                 break;
             case ')':
                 matchLink(postEditor, text);
+                matchImage(postEditor, text);
                 break;
             case '~':
                 matchStrikethrough(postEditor, text);
@@ -173,6 +174,41 @@ export default function (editor) {
         }
     }
 
+    function matchImage(editor, text) {
+        let matches = text.match(/^!\[(.*?)\]\((.*?)\)$/);
+        if (matches) {
+            let {range: {head, head: {section}}} = editor;
+            let src = matches[2];
+            let alt = matches[1];
+
+            // skip if cursor is not at end of section
+            if (!head.isTail()) {
+                return;
+            }
+
+            // mobiledoc lists don't support cards
+            if (section.isListItem) {
+                return;
+            }
+
+            editor.run((postEditor) => {
+                let card = postEditor.builder.createCardSection('koenig-card-image', {src, alt});
+                // need to check the section before replacing else it will always
+                // add a trailing paragraph
+                let needsTrailingParagraph = !section.next;
+
+                editor.range.extend(-(matches[0].length));
+                postEditor.replaceSection(editor.range.headSection, card);
+
+                if (needsTrailingParagraph) {
+                    let newSection = editor.builder.createMarkupSection('p');
+                    postEditor.insertSectionAtEnd(newSection);
+                    postEditor.setRange(newSection.tailPosition());
+                }
+            });
+        }
+    }
+
     function matchStrikethrough(editor, text) {
         let {range} = editor;
         let matches = text.match(/~(.+?)~$/);

lib/koenig-editor/addon/templates/components/koenig-card-image.hbs

@@ -0,0 +1 @@
+<img src={{payload.src}} alt={{payload.alt}} />

lib/koenig-editor/app/components/koenig-card-image.js

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

tests/integration/components/koenig-card-image-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-image', function () {
+    setupComponentTest('koenig-card-image', {
+        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-image}}
+        //     template content
+        //   {{/koenig-card-image}}
+        // `);
+
+        this.render(hbs`{{koenig-card-image}}`);
+        expect(this.$()).to.have.length(1);
+    });
+});