✨ Added caption support to code cards

no issue

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

@@ -35,6 +35,9 @@ export default Component.extend({
     deselectCard() {},
     deleteCard() {},
     registerComponent() {},
+    moveCursorToNextSection() {},
+    moveCursorToPrevSection() {},
+    addParagraphAfterCard() {},
 
     counts: computed('payload.code', function () {
         return {wordCount: countWords(this.payload.code)};
@@ -98,6 +101,10 @@ export default Component.extend({
             this._updatePayloadAttr('code', code);
         },
 
+        updateCaption(caption) {
+            this._updatePayloadAttr('caption', caption);
+        },
+
         enterEditMode() {
             this._addMousemoveHandler();
         },

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

@@ -141,7 +141,7 @@ export default Component.extend({
     },
 
     mouseDown(event) {
-        let {isSelected, isEditing} = this;
+        let {isSelected, isEditing, hasEditMode} = this;
 
         // if we perform an action we want to prevent the mousedown from
         // triggering a cursor position change which can result in multiple
@@ -165,6 +165,14 @@ export default Component.extend({
             // don't trigger edit mode immediately
             this._skipMouseUp = true;
         }
+
+        // don't trigger select->edit transition for clicks in the caption
+        if (isSelected && hasEditMode) {
+            let allowClickthrough = !!event.target.closest('[data-kg-allow-clickthrough]');
+            if (allowClickthrough) {
+                this._skipMouseUp = true;
+            }
+        }
     },
 
     // lazy-click to enter edit mode
@@ -181,7 +189,8 @@ export default Component.extend({
     },
 
     doubleClick() {
-        if (this.hasEditMode && !this.isEditing) {
+        let allowClickthrough = !!event.target.closest('[data-kg-allow-clickthrough]');
+        if (this.hasEditMode && !this.isEditing && !allowClickthrough) {
             this.editCard();
             this.set('showToolbar', true);
         }

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

@@ -12,7 +12,11 @@
     saveCard=(action saveCard)
     onEnterEdit=(action "enterEditMode")
     onLeaveEdit=(action "leaveEditMode")
+    addParagraphAfterCard=addParagraphAfterCard
+    moveCursorToPrevSection=moveCursorToPrevSection
+    moveCursorToNextSection=moveCursorToNextSection
     editor=editor
+    as |card|
 }}
     {{#if isEditing}}
         {{gh-cm-editor payload.code
@@ -42,4 +46,13 @@
         {{/if}}
         <div class="koenig-card-click-overlay"></div>
     {{/if}}
+
+    {{#if (and (not isEditing) (or isSelected (clean-basic-html payload.caption)))}}
+        {{card.captionInput
+            class="z-999"
+            caption=payload.caption
+            update=(action "updateCaption")
+            placeholder="Type caption for image (optional)"
+        }}
+    {{/if}}
 {{/koenig-card}}

lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs

@@ -1,4 +1,4 @@
-<ul class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
+<ul class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}" data-kg-allow-clickthrough="true">
     <li class="ma0 lh-solid">
         <button
             type="button"