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';