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

🐜 🐝 Create link from toolbar (#586)

closes https://github.com/TryGhost/Ghost/issues/8163

Previously when you created a link the toolbar component would re-render and dissapear.

This update ensures that the logic that must happen on first render does not happen on subsequent renders.
This commit is contained in:
Ryan McCarvill 2017-03-16 03:55:20 +13:00 committed by Kevin Ansfield
parent 88da7bc335
commit 715fe52793

View file

@ -12,7 +12,7 @@ export default Component.extend({
classNameBindings: ['isVisible'], classNameBindings: ['isVisible'],
isVisible: false, isVisible: false,
tools: [], tools: [],
hasRendered: false,
isLink: computed({ isLink: computed({
get() { get() {
return this._isLink; return this._isLink;
@ -58,19 +58,21 @@ export default Component.extend({
}, },
didRender() { didRender() {
let $this = this.$(); if (this.get('hasRendered')) {
return;
}
let toolbar = this.$();
let {editor} = this; let {editor} = this;
let $editor = $(this.get('containerSelector')); // TODO - this element is part of ghost-admin, we need to separate them more. let $editor = $(this.get('containerSelector')); // TODO - this element is part of ghost-admin, we need to separate them more.
let isMousedown = false; let isMousedown = false;
if (!editor.range || editor.range.head.isBlank) {
this.set('isVisible', false);
}
$editor.mousedown(() => isMousedown = true); $editor.mousedown(() => isMousedown = true);
$editor.mouseup(() => { $editor.mouseup(() => {
isMousedown = false; isMousedown = false;
updateToolbarToRange(this, $this, $editor, isMousedown); updateToolbarToRange(this, toolbar, $editor, isMousedown);
}); });
editor.cursorDidChange(() => updateToolbarToRange(this, $this, $editor, isMousedown)); editor.cursorDidChange(() => updateToolbarToRange(this, toolbar, $editor, isMousedown));
this.set('hasRendered', true);
}, },
willDestroyElement() { willDestroyElement() {
@ -89,7 +91,7 @@ export default Component.extend({
// if enter run link // if enter run link
if (event.keyCode === 13) { if (event.keyCode === 13) {
this.set('isLink', false); this.set('isLink', false);
this.set('isVisible', false);
this.editor.run((postEditor) => { this.editor.run((postEditor) => {
let markup = postEditor.builder.createMarkup('a', {href: event.target.value}); let markup = postEditor.builder.createMarkup('a', {href: event.target.value});
postEditor.addMarkupToRange(this.get('linkRange'), markup); postEditor.addMarkupToRange(this.get('linkRange'), markup);