🐝 Fix editor toolbar link focus issues. (#599)

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

When the toolbar is toggled into link mode the link input field should always focus, however this only happens on the first time which leads to issues with mobiledoc having focus but not the range.

This fix means that the toolbar always focuses.

ghost/admin/lib/gh-koenig/addon/components/koenig-toolbar.js

@@ -101,14 +101,18 @@ export default Component.extend({
                 event.stopPropagation();
             }
         },
-
-        closeLink() {
-            this.set('isLink', false);
-        }
-    },
         doLink(range) {
             this.set('isLink', true);
             this.set('linkRange', range);
+            run.schedule('afterRender', this,
+                () => {
+                    this.$('input').focus();
+                }
+            );
+        },
+        closeLink() {
+            this.set('isLink', false);
+        }
     }
 });
 
@@ -140,7 +144,7 @@ function updateToolbarToRange(self, $holder, $editor, isMouseDown) {
             }
         );
 
-        self.set('isLink', false);
+        self.send('closeLink');
 
         self.tools.forEach((tool) => {
             if (tool.hasOwnProperty('checkElements')) {
@@ -152,7 +156,7 @@ function updateToolbarToRange(self, $holder, $editor, isMouseDown) {
     } else {
         if (self.isVisible) {
             self.set('isVisible', false);
-            self.set('isLink', false);
+            self.send('closeLink');
         }
     }
 

ghost/admin/lib/gh-koenig/addon/options/default-tools.js

@@ -182,7 +182,7 @@ export default function (editor, toolbar) {
             type: 'markup',
             visibility: 'primary',
             onClick: (editor) => {
-                toolbar.doLink(editor.range);
+                toolbar.send('doLink', editor.range);
             },
             checkElements(elements) {
                 set(this, 'selected', elements.filter((element) => element.tagName === 'a').length > 0);