✨ Insert Link styling (#598)

closes: https://github.com/TryGhost/Ghost/issues/8109
- adds styling for the insert link toolbar component.

app/styles/addons/gh-koenig/koenig-toolbar.css

@@ -29,6 +29,18 @@
     border-top: color(var(--darkgrey) l(-10%)) 8px solid;
 }
 
+.gh-toolbar.is-link {
+    width: 263px;
+    height: 40px;
+}
+.gh-toolbar.is-link input {
+    width: 100%;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    padding:5px;
+}
+
 .gh-toolbar-btn {
     display: flex;
     justify-content: center;

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

@@ -9,7 +9,7 @@ import Tools from '../options/default-tools';
 export default Component.extend({
     layout,
     classNames: ['gh-toolbar'],
-    classNameBindings: ['isVisible'],
+    classNameBindings: ['isVisible', 'isLink'],
     isVisible: false,
     tools: [],
     hasRendered: false,
@@ -83,14 +83,14 @@ export default Component.extend({
         linkKeyDown(event) {
             // if escape close link
             if (event.keyCode === 27) {
-                this.set('isLink', false);
+                this.send('closeLink');
             }
         },
 
         linkKeyPress(event) {
             // if enter run link
             if (event.keyCode === 13) {
-                this.set('isLink', false);
+                this.send('closeLink');
                 this.set('isVisible', false);
                 this.editor.run((postEditor) => {
                     let markup = postEditor.builder.createMarkup('a', {href: event.target.value});
@@ -100,6 +100,10 @@ export default Component.extend({
                 this.set('linkRange', null);
                 event.stopPropagation();
             }
+        },
+
+        closeLink() {
+            this.set('isLink', false);
         }
     },
     doLink(range) {

lib/gh-koenig/addon/templates/components/koenig-toolbar.hbs

@@ -1,5 +1,6 @@
 {{#if isLink}}
     {{input keyDown=(action "linkKeyDown") keyPress=(action "linkKeyPress") autofocus=true placeholder="Enter a link"}}
+    <button class="gh-toolbar-btn" {{action 'closeLink'}}>x</button>
 {{else}}
     {{#each toolbar as |tool|}}
         {{koenig-toolbar-button tool=tool editor=editor iconURL=iconURL assetPath=assetPath}}