Koenig - Initial code card with MD expansion

refs https://github.com/TryGhost/Ghost/issues/9623
- `code` card that uses CodeMirror for the edit view and outputs `<pre><code>...</code></pre>` for the rendered view
- adds triple-backtick text expansion for creating code cards

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

@@ -0,0 +1,84 @@
+import Component from '@ember/component';
+import Ember from 'ember';
+import layout from '../templates/components/koenig-card-code';
+import {computed} from '@ember/object';
+import {htmlSafe} from '@ember/string';
+import {isBlank} from '@ember/utils';
+import {run} from '@ember/runloop';
+import {set} from '@ember/object';
+
+const {Handlebars} = Ember;
+
+export default Component.extend({
+    layout,
+
+    // attrs
+    payload: null,
+    isSelected: false,
+    isEditing: false,
+    headerOffset: 0,
+
+    // closure actions
+    editCard() {},
+    saveCard() {},
+    selectCard() {},
+    deleteCard() {},
+
+    toolbar: computed('isEditing', function () {
+        if (!this.isEditing) {
+            return {
+                items: [{
+                    buttonClass: 'fw4 flex items-center white',
+                    icon: 'koenig/kg-edit-v2',
+                    iconClass: 'stroke-white',
+                    title: 'Edit',
+                    text: '',
+                    action: run.bind(this, this.editCard)
+                }]
+            };
+        }
+    }),
+
+    escapedCode: computed('payload.code', function () {
+        let escapedCode = Handlebars.Utils.escapeExpression(this.payload.code);
+        return htmlSafe(escapedCode);
+    }),
+
+    init() {
+        this._super(...arguments);
+        let payload = this.payload || {};
+
+        // CodeMirror errors on a `null` or `undefined` value
+        if (!payload.code) {
+            set(payload, 'code', '');
+        }
+
+        this.set('payload', payload);
+    },
+
+    actions: {
+        updateCode(code) {
+            this._updatePayloadAttr('code', code);
+        },
+
+        leaveEditMode() {
+            if (isBlank(this.payload.code)) {
+                // afterRender is required to avoid double modification of `isSelected`
+                // TODO: see if there's a way to avoid afterRender
+                run.scheduleOnce('afterRender', this, function () {
+                    this.deleteCard();
+                });
+            }
+        }
+    },
+
+    _updatePayloadAttr(attr, value) {
+        let payload = this.payload;
+        let save = this.saveCard;
+
+        set(payload, attr, value);
+
+        // update the mobiledoc and stay in edit mode
+        save(payload, false);
+    }
+});

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

@@ -52,7 +52,8 @@ export const CARD_COMPONENT_MAP = {
     image: 'koenig-card-image',
     markdown: 'koenig-card-markdown',
     'card-markdown': 'koenig-card-markdown', // backwards-compat with markdown editor
-    html: 'koenig-card-html'
+    html: 'koenig-card-html',
+    code: 'koenig-card-code'
 };
 
 export const CURSOR_BEFORE = -1;

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

@@ -5,5 +5,6 @@ export default [
     createComponentCard('image', {hasEditMode: false}),
     createComponentCard('markdown'),
     createComponentCard('card-markdown'), // backwards-compat with markdown editor
-    createComponentCard('html')
+    createComponentCard('html'),
+    createComponentCard('code')
 ];

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

@@ -76,6 +76,26 @@ export default function (editor, koenig) {
         }
     });
 
+    editor.onTextInput({
+        name: 'md_code',
+        match: /^```$/,
+        run(editor) {
+            let {range: {head, head: {section}}} = editor;
+
+            // Skip if cursor is not at end of section
+            if (!head.isTail()) {
+                return;
+            }
+
+            // Skip if section is a list item
+            if (section.isListItem) {
+                return;
+            }
+
+            koenig.send('replaceWithCardSection', 'code', section.toRange());
+        }
+    }),
+
     /* inline markdown ------------------------------------------------------ */
 
     // We don't want to run all our content rules on every text entry event,

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

@@ -0,0 +1,24 @@
+{{#koenig-card
+    class=(concat "ba b--white relative kg-card-hover miw-100 relative" (if isEditing "pt1 pb1 pl6 nl6 pr6 nr6"))
+    headerOffset=headerOffset
+    toolbar=toolbar
+    isSelected=isSelected
+    isEditing=isEditing
+    selectCard=(action selectCard)
+    editCard=(action editCard)
+    onLeaveEdit=(action "leaveEditMode")
+}}
+    {{#if isEditing}}
+        {{gh-cm-editor payload.code
+            class="koenig-card-html--editor"
+            autofocus=true
+            lineWrapping=true
+            update=(action "updateCode")
+        }}
+    {{else}}
+        <div class="koenig-card-html-rendered">
+            <pre><code class="line-numbers {{if payload.language (concat "language-" payload.language)}}">{{escapedCode}}</code></pre>
+        </div>
+        <div class="koenig-card-click-overlay"></div>
+    {{/if}}
+{{/koenig-card}}

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

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