diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-alt-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-alt-input.js
new file mode 100644
index 0000000000..5f1fd4b7e8
--- /dev/null
+++ b/ghost/admin/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;
+ }
+ })
+});
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
index 47f9222b51..596c9f2d86 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
+++ b/ghost/admin/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;
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-alt-input.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-alt-input.hbs
new file mode 100644
index 0000000000..2bacb07cbc
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-alt-input.hbs
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs
index d50105b73b..f278ca684d 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs
+++ b/ghost/admin/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}}
+
+ {{else}}
+
+ {{/if}}
+
+ {{#if isSelected}}
+
+ {{/if}}
{{/if}}
{{#if imageSelector}}
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
index cb58fe6fd7..f02b05d0e7 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
+++ b/ghost/admin/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}}
diff --git a/ghost/admin/lib/koenig-editor/app/components/koenig-alt-input.js b/ghost/admin/lib/koenig-editor/app/components/koenig-alt-input.js
new file mode 100644
index 0000000000..6f01934ecd
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/app/components/koenig-alt-input.js
@@ -0,0 +1 @@
+export {default} from 'koenig-editor/components/koenig-alt-input';