Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Koenig - Apply link to selected text when pasting a URL
Browse files Browse the repository at this point in the history
refs TryGhost/Ghost#9505
- add a `paste` event handler to the editor element so that we can override the default mobiledoc-kit paste handling when required
- detect a paste when we have a plain text selection and if it's a valid url convert the selection to a link using the pasted url as the `href`
  • Loading branch information
kevinansfield committed Apr 13, 2018
1 parent 2ba0126 commit ee6ca44
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions lib/koenig-editor/addon/components/koenig-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ import defaultCards from '../options/cards';
import layout from '../templates/components/koenig-editor';
import registerKeyCommands from '../options/key-commands';
import registerTextExpansions from '../options/text-expansions';
import validator from 'npm:validator';
import {A} from '@ember/array';
import {MOBILEDOC_VERSION} from 'mobiledoc-kit/renderers/mobiledoc';
import {assign} from '@ember/polyfills';
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 {run} from '@ember/runloop';

export const ADD_CARD_HOOK = 'addComponent';
Expand Down Expand Up @@ -327,6 +329,14 @@ export default Component.extend({
this.didCreateEditor(editor);
},

didInsertElement() {
this._super(...arguments);
let editorElement = this.element.querySelector('.koenig-editor__editor');

this._pasteHandler = run.bind(this, this.handlePaste);
editorElement.addEventListener('paste', this._pasteHandler);
},

// our ember component has rendered, now we need to render the mobiledoc
// editor itself if necessary
didRender() {
Expand All @@ -342,6 +352,9 @@ export default Component.extend({

willDestroyElement() {
let editor = this.get('editor');
let editorElement = this.element.querySelector('.koenig-editor__editor');

editorElement.removeEventListener('paste', this._pasteHandler);
editor.destroy();
this._super(...arguments);
},
Expand Down Expand Up @@ -748,6 +761,27 @@ export default Component.extend({
return false;
},

// if a URL is pasted and we have a selection, make that selection a link
handlePaste(event) {
let editor = this.get('editor');
let range = editor.range;

// only attempt link if we have a text selection in a single section
if (range && !range.isCollapsed && range.headSection === range.tailSection && range.headSection.isMarkerable) {
let {text} = getContentFromPasteEvent(event);
if (text && validator.isURL(text)) {
let linkMarkup = editor.builder.createMarkup('a', {href: text});
editor.run((postEditor) => {
postEditor.addMarkupToRange(range, linkMarkup);
});
editor.selectRange(range.tail);
// prevent mobiledoc's default paste event handler firing
event.preventDefault();
event.stopImmediatePropagation();
}
}
},

selectCard(card, isEditing = false) {
// no-op if card is already selected
if (card === this._selectedCard && isEditing === card.isEditing) {
Expand Down

0 comments on commit ee6ca44

Please sign in to comment.