get link input to work

webapp/components/Editor/ContextMenu.vue

@@ -7,21 +7,28 @@ export default {
     node: Object,
   },
   methods: {
-    displayContextMenu(target, content, trigger) {
+    displayContextMenu(target, content, type) {
+      const trigger = type === 'link' ? 'click' : 'mouseenter'
+      const showOnInit = type !== 'link'
+
       if (this.menu) {
         return
       }
+
       this.menu = tippy(target, {
-        content: content,
-        trigger: trigger || 'mouseenter',
-        interactive: true,
-        theme: 'dark',
-        placement: 'top-start',
-        inertia: true,
-        duration: [400, 200],
-        showOnInit: true,
         arrow: true,
         arrowType: 'round',
+        content: content,
+        // duration: [400, 200],
+        inertia: true,
+        interactive: true,
+        placement: 'top-start',
+        showOnInit,
+        theme: 'dark',
+        trigger,
+        onMount(instance) {
+          instance.popper.querySelector('input').focus()
+        },
       })
       // we have to update tippy whenever the DOM is updated
       if (MutationObserver) {

webapp/components/Editor/Editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="editor">
-    <menu-bar :editor="editor" :showLinkMenu="showLinkMenu" />
+    <menu-bar :editor="editor" :toggleLinkInput="toggleLinkInput" />
     <editor-content ref="editor" :editor="editor" />
     <context-menu ref="contextMenu" />
     <suggestion-list
@@ -11,7 +11,14 @@
       :query="query"
       :select-item="selectItem"
     />
-    <link-input v-show="linkMenuIsActive" ref="linkMenu" :editorCommand="editor.commands.link" />
+    <link-input
+      v-show="isLinkInputActive"
+      ref="linkInput"
+      :linkUrl="linkUrl"
+      :editor-command="editor.commands.link"
+      :toggle-link-input="toggleLinkInput"
+      :set-link-url="setLinkUrl"
+    />
   </div>
 </template>
 
@@ -54,7 +61,7 @@ export default {
       lastValueHash: null,
       editor: null,
       linkUrl: null,
-      linkMenuIsActive: false,
+      isLinkInputActive: false,
       suggestionType: '',
       query: null,
       suggestionRange: null,
@@ -242,23 +249,17 @@ export default {
         this.$emit('input', content)
       }
     },
-    showLinkMenu(attrs, element) {
+    toggleLinkInput(attrs, element) {
+      if (!this.isLinkInputActive && attrs && element) {
         this.linkUrl = attrs.href
-      this.linkMenuIsActive = true
+        this.isLinkInputActive = true
-      this.$refs.contextMenu.displayContextMenu(element, this.$refs.linkMenu.$el, 'click')
+        this.$refs.contextMenu.displayContextMenu(element, this.$refs.linkInput.$el, 'link')
-      this.$nextTick(() => {
+      } else {
-        try {
-          const input = this.$refs.linkMenu.$el.querySelector('input')
-          input.focus()
-          input.select()
-        } catch (err) {}
-      })
-    },
-    hideLinkMenu() {
         this.$refs.contextMenu.hideContextMenu()
         this.linkUrl = null
-      this.linkMenuIsActive = false
+        this.isLinkInputActive = false
         this.editor.focus()
+      }
     },
     setLinkUrl(command, url) {
       const links = linkify().match(url)
@@ -267,7 +268,7 @@ export default {
         command({
           href: links.pop().url,
         })
-        this.hideLinkMenu()
+        this.toggleLinkInput()
         this.editor.focus()
       } else if (!url) {
         // remove link

webapp/components/Editor/LinkInput.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
     <ds-input
+      id="linkInputId"
       v-model="linkUrl"
+      autofocus
       class="editor-menu-link-input"
       placeholder="https://"
-      @blur.native.capture="hideLinkMenu()"
+      @blur.native.capture="toggleLinkInput()"
-      @keydown.native.esc.prevent="hideLinkMenu()"
+      @keydown.native.esc.prevent="toggleLinkInput()"
       @keydown.native.enter.prevent="setLinkUrl(editorCommand, linkUrl)"
     />
   </div>
@@ -13,11 +15,11 @@
 
 <script>
 export default {
-  props: ['hideLinkMenu', 'setLinkUrl', 'editorCommand'],
+  props: {
-  data() {
+    linkUrl: String,
-    return {
+    editorCommand: Function,
-      linkUrl: null,
+    toggleLinkInput: Function,
-    }
+    setLinkUrl: Function,
   },
 }
 </script>

webapp/components/Editor/MenuBar.vue

@@ -8,7 +8,7 @@
       <menu-bar-button
         ref="linkButton"
         :isActive="isActive.link()"
-        :onClick="event => showLinkMenu(getMarkAttrs('link'), event.currentTarget)"
+        :onClick="event => toggleLinkInput(getMarkAttrs('link'), event.currentTarget)"
         icon="link"
       />
 
@@ -68,7 +68,7 @@ export default {
   },
   props: {
     editor: Object,
-    showLinkMenu: Function,
+    toggleLinkInput: Function,
   },
 }
 </script>

webapp/components/Editor/MenuBarButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-button size="small" :ghost="!isActive" @click="onClick" :icon="icon">
+  <ds-button size="small" :ghost="!isActive" @click.prevent="onClick" :icon="icon">
     <span v-if="label">{{ label }}</span>
   </ds-button>
 </template>