0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00

Koenig - Ctrl/Cmd+K shortcut has same behaviour as toolbar link button

no issue
- override mobiledoc-kit's default <kbd>Ctrl/Cmd+K</kbd> shortcut to trigger our own link editing component
This commit is contained in:
Kevin Ansfield 2018-04-26 17:04:40 +01:00
parent 483ab830b0
commit 1a2e345957
4 changed files with 56 additions and 24 deletions

View file

@ -20,6 +20,7 @@ import {camelize, capitalize} from '@ember/string';
import {computed} from '@ember/object';
import {copy} from '@ember/object/internals';
import {getContentFromPasteEvent} from 'mobiledoc-kit/utils/parse-utils';
import {getLinkMarkupFromRange} from '../utils/markup-utils';
import {run} from '@ember/runloop';
const UNDO_DEPTH = 50;
@ -242,7 +243,7 @@ export default Component.extend({
// set up key commands and text expansions (MD conversion)
// TODO: this will override any passed in options, we should allow the
// default behaviour to be overridden by addon consumers
registerKeyCommands(editor);
registerKeyCommands(editor, this);
registerTextExpansions(editor, this);
editor.registerKeyCommand({
@ -427,7 +428,10 @@ export default Component.extend({
// component renders it will re-select when finished which should
// trigger the normal toolbar
editLink(range) {
this.set('linkRange', range);
let linkMarkup = getLinkMarkupFromRange(range);
if ((!range.isCollapsed || linkMarkup) && range.headSection.isMarkerable) {
this.set('linkRange', range);
}
},
cancelEditLink() {

View file

@ -2,6 +2,7 @@ import Component from '@ember/component';
import layout from '../templates/components/koenig-link-input';
import {TOOLBAR_MARGIN} from './koenig-toolbar';
import {computed} from '@ember/object';
import {getLinkMarkupFromRange} from '../utils/markup-utils';
import {htmlSafe} from '@ember/string';
import {run} from '@ember/runloop';
@ -144,13 +145,10 @@ export default Component.extend({
// if we have a single link or a slice of a single link selected, grab the
// href and adjust our linkRange to encompass the whole link
_getHrefFromMarkup() {
let {headMarker, tailMarker} = this._linkRange;
if (headMarker === tailMarker || headMarker.next === tailMarker) {
let linkMarkup = tailMarker.markups.findBy('tagName', 'a');
if (linkMarkup) {
this.set('href', linkMarkup.attributes.href);
this._linkRange = this._linkRange.expandByMarker(marker => !!marker.markups.includes(linkMarkup));
}
let linkMarkup = getLinkMarkupFromRange(this._linkRange);
if (linkMarkup) {
this.set('href', linkMarkup.attributes.href);
this._linkRange = this._linkRange.expandByMarker(marker => !!marker.markups.includes(linkMarkup));
}
},

View file

@ -1,20 +1,44 @@
import Browser from 'mobiledoc-kit/utils/browser';
// Key commands will run any time a particular key or key combination is pressed
// https://github.com/bustlelabs/mobiledoc-kit#configuring-hot-keys
export default function (editor) {
let softReturnKeyCommand = {
str: 'SHIFT+ENTER',
run(editor) {
if (!editor.range.headSection.isMarkerable) {
return;
}
editor.run((postEditor) => {
let softReturn = postEditor.builder.createAtom('soft-return');
postEditor.insertMarkers(editor.range.head, [softReturn]);
});
export const DEFAULT_KEY_COMMANDS = [{
str: 'SHIFT+ENTER',
run(editor) {
if (!editor.range.headSection.isMarkerable) {
return;
}
};
editor.registerKeyCommand(softReturnKeyCommand);
editor.run((postEditor) => {
let softReturn = postEditor.builder.createAtom('soft-return');
postEditor.insertMarkers(editor.range.head, [softReturn]);
});
}
}, {
str: 'CTRL+K',
run(editor, koenig) {
if (Browser.isWin()) {
return koenig.send('editLink', editor.range);
}
// default behaviour for Mac is delete to end of section
return false;
}
}, {
str: 'META+K',
run(editor, koenig) {
return koenig.send('editLink', editor.range);
}
}];
export default function registerKeyCommands(editor, koenig) {
DEFAULT_KEY_COMMANDS.forEach((keyCommand) => {
editor.registerKeyCommand({
str: keyCommand.str,
run() {
keyCommand.run(editor, koenig);
}
});
});
}

View file

@ -0,0 +1,6 @@
export function getLinkMarkupFromRange(range) {
let {headMarker, tailMarker} = range;
if (headMarker === tailMarker || headMarker.next === tailMarker) {
return tailMarker.markups.findBy('tagName', 'a');
}
}