✨ Added ability to edit alt text for image cards

no issue

- adds an "Alt" button that is displayed in the caption input whilst an image card is selected, clicking it toggles between the rich-text caption input and a plain-text alt text input

lib/koenig-editor/addon/components/koenig-alt-input.js

@@ -0,0 +1,84 @@
+import Component from '@ember/component';
+import layout from '../templates/components/koenig-alt-input';
+import {action, computed} from '@ember/object';
+import {kgStyle} from '../helpers/kg-style';
+import {inject as service} from '@ember/service';
+
+export default Component.extend({
+    koenigUi: service(),
+
+    tagName: 'figcaption',
+    classNameBindings: ['figCaptionClass'],
+    layout,
+
+    alt: '',
+    placeholder: '',
+
+    update() {},
+    addParagraphAfterCard() {},
+    moveCursorToNextSection() {},
+    moveCursorToPrevSection() {},
+
+    figCaptionClass: computed(function () {
+        return `${kgStyle(['figcaption'])} w-100 relative`;
+    }),
+
+    didInsertElement() {
+        this._super(...arguments);
+        this.element.querySelector('input').focus();
+    },
+
+    willDestroyElement() {
+        this._super(...arguments);
+        this.koenigUi.captionLostFocus(this);
+    },
+
+    onInput: action(function (event) {
+        this.update(event.target.value);
+    }),
+
+    onKeydown: action(function (event) {
+        let {selectionStart, selectionEnd, value} = event.target;
+        let noSelection = selectionStart === selectionEnd;
+
+        let {altKey, ctrlKey, metaKey, shiftKey} = event;
+        let hasModifier = altKey || ctrlKey || metaKey || shiftKey;
+
+        if (hasModifier) {
+            return;
+        }
+
+        switch (event.key) {
+        case 'Enter':
+            event.preventDefault();
+            event.target.blur();
+            this.addParagraphAfterCard();
+            break;
+
+        case 'Escape':
+            event.target.blur();
+            break;
+
+        case 'ArrowUp':
+        case 'ArrowLeft':
+            if (noSelection && selectionStart === 0) {
+                event.preventDefault();
+                event.target.blur();
+                this.moveCursorToPrevSection();
+            }
+            break;
+
+        case 'ArrowRight':
+        case 'ArrowDown':
+            if (noSelection && selectionEnd === value.length) {
+                event.preventDefault();
+                event.target.blur();
+                this.moveCursorToNextSection();
+            }
+            break;
+
+        default:
+            break;
+        }
+    })
+});

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

@@ -5,7 +5,7 @@ import {
     IMAGE_EXTENSIONS,
     IMAGE_MIME_TYPES
 } from 'ghost-admin/components/gh-image-uploader';
-import {computed, set, setProperties} from '@ember/object';
+import {action, computed, set, setProperties} from '@ember/object';
 import {utils as ghostHelperUtils} from '@tryghost/helpers';
 import {htmlSafe} from '@ember/string';
 import {isEmpty} from '@ember/utils';
@@ -29,6 +29,7 @@ export default Component.extend({
 
     // properties
     handlesDragDrop: true,
+    isEditingAlt: false,
 
     // closure actions
     selectCard() {},
@@ -139,6 +140,11 @@ export default Component.extend({
                 delete this.payload.files;
             });
         }
+
+        // switch back to displaying caption when card is not selected
+        if (!this.isSelected) {
+            this.set('isEditingAlt', false);
+        }
     },
 
     actions: {
@@ -151,10 +157,6 @@ export default Component.extend({
             });
         },
 
-        updateCaption(caption) {
-            this._updatePayloadAttr('caption', caption);
-        },
-
         /**
          * Opens a file selection dialog - Triggered by "Upload Image" buttons,
          * searches for the hidden file input within the .gh-setting element
@@ -214,6 +216,18 @@ export default Component.extend({
         }
     },
 
+    updateCaption: action(function (caption) {
+        this._updatePayloadAttr('caption', caption);
+    }),
+
+    toggleAltEditing: action(function () {
+        this.toggleProperty('isEditingAlt');
+    }),
+
+    updateAlt: action(function (alt) {
+        this._updatePayloadAttr('alt', alt);
+    }),
+
     dragOver(event) {
         if (!event.dataTransfer) {
             return;

lib/koenig-editor/addon/templates/components/koenig-alt-input.hbs

@@ -0,0 +1,9 @@
+<input
+    type="text"
+    placeholder={{this.placeholder}}
+    class="miw-100 tc bn form-text bg-transparent tracked-2"
+    name="alt"
+    value={{this.alt}}
+    {{on "input" this.onInput}}
+    {{on "keydown" this.onKeydown}}
+>

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

@@ -65,11 +65,27 @@
     {{/gh-uploader}}
 
     {{#if (or isSelected (clean-basic-html payload.caption))}}
-        {{card.captionInput
-            caption=payload.caption
-            update=(action "updateCaption")
-            placeholder="Type caption for image (optional)"
-        }}
+        {{#if this.isEditingAlt}}
+            <card.altInput
+                @alt={{this.payload.alt}}
+                @update={{this.updateAlt}}
+                @placeholder="Type alt text for image (optional)" />
+        {{else}}
+            <card.captionInput
+                @caption={{payload.caption}}
+                @update={{this.updateCaption}}
+                @placeholder="Type caption for image (optional)" />
+        {{/if}}
+
+        {{#if isSelected}}
+            <button
+                title="Toggle between editing alt text and caption"
+                class="absolute right-0 bottom-0 ma2 pl1 pr1 ba br3 f7 sans-serif fw4 lh-title tracked-2 {{if this.isEditingAlt "bg-blue b--blue white" "b--midlightgrey midlightgrey"}}"
+                {{on "click" this.toggleAltEditing passive=true}}
+            >
+                Alt
+            </button>
+        {{/if}}
     {{/if}}
 
     {{#if imageSelector}}

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

@@ -4,12 +4,19 @@
     {{/sticky-element}}
 {{/if}}
 
-{{yield (hash captionInput=(component "koenig-caption-input"
-    captureInput=isSelected
-    addParagraphAfterCard=addParagraphAfterCard
-    moveCursorToPrevSection=moveCursorToPrevSection
-    moveCursorToNextSection=moveCursorToNextSection
-))}}
+{{yield (hash
+    captionInput=(component "koenig-caption-input"
+        captureInput=isSelected
+        addParagraphAfterCard=addParagraphAfterCard
+        moveCursorToPrevSection=moveCursorToPrevSection
+        moveCursorToNextSection=moveCursorToNextSection
+    )
+    altInput=(component "koenig-alt-input"
+        addParagraphAfterCard=addParagraphAfterCard
+        moveCursorToPrevSection=moveCursorToPrevSection
+        moveCursorToNextSection=moveCursorToNextSection
+    )
+)}}
 
 {{#if toolbar}}
     {{#kg-action-bar class="absolute" style=toolbarStyle isVisible=shouldShowToolbar}}

lib/koenig-editor/app/components/koenig-alt-input.js

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