survive empty urls

webapp/components/Editor/ContextMenu.vue

@@ -19,7 +19,7 @@ export default {
         arrow: true,
         arrowType: 'round',
         content: content,
-        // duration: [400, 200],
+        duration: [400, 200],
         inertia: true,
         interactive: true,
         placement: 'top-start',
@@ -27,9 +27,10 @@ export default {
         theme: 'dark',
         trigger,
         onMount(instance) {
-          instance.popper.querySelector('input').focus()
+          instance.popper.querySelector('input').focus({ preventScroll: true })
         },
       })
+
       // we have to update tippy whenever the DOM is updated
       if (MutationObserver) {
         this.observer = new MutationObserver(() => {

webapp/components/Editor/Editor.vue

@@ -14,7 +14,6 @@
     <link-input
       v-show="isLinkInputActive"
       ref="linkInput"
-      :linkUrl="linkUrl"
       :editor-command="editor.commands.link"
       :toggle-link-input="toggleLinkInput"
       :set-link-url="setLinkUrl"
@@ -60,7 +59,6 @@ export default {
     return {
       lastValueHash: null,
       editor: null,
-      linkUrl: null,
       isLinkInputActive: false,
       suggestionType: '',
       query: null,
@@ -251,26 +249,26 @@ export default {
     },
     toggleLinkInput(attrs, element) {
       if (!this.isLinkInputActive && attrs && element) {
-        this.linkUrl = attrs.href
+        this.$refs.linkInput.linkUrl = attrs.href
         this.isLinkInputActive = true
         this.$refs.contextMenu.displayContextMenu(element, this.$refs.linkInput.$el, 'link')
       } else {
         this.$refs.contextMenu.hideContextMenu()
-        this.linkUrl = null
         this.isLinkInputActive = false
         this.editor.focus()
       }
     },
-    setLinkUrl(command, url) {
-      const links = linkify().match(url)
-      if (links) {
+    setLinkUrl(url) {
+      const normalizedLinks = url ? linkify().match(url) : null
+      const command = this.editor.commands.link
+      if (normalizedLinks) {
         // add valid link
         command({
-          href: links.pop().url,
+          href: normalizedLinks.pop().url,
         })
         this.toggleLinkInput()
         this.editor.focus()
-      } else if (!url) {
+      } else {
         // remove link
         command({ href: null })
       }

webapp/components/Editor/LinkInput.vue

@@ -3,12 +3,11 @@
     <ds-input
       id="linkInputId"
       v-model="linkUrl"
-      autofocus
       class="editor-menu-link-input"
       placeholder="https://"
       @blur.native.capture="toggleLinkInput()"
       @keydown.native.esc.prevent="toggleLinkInput()"
-      @keydown.native.enter.prevent="setLinkUrl(editorCommand, linkUrl)"
+      @keydown.native.enter.prevent="enterLink()"
     />
   </div>
 </template>
@@ -16,10 +15,19 @@
 <script>
 export default {
   props: {
-    linkUrl: String,
-    editorCommand: Function,
     toggleLinkInput: Function,
     setLinkUrl: Function,
   },
+  data() {
+    return {
+      linkUrl: null,
+    }
+  },
+  methods: {
+    enterLink() {
+      this.setLinkUrl(this.linkUrl)
+      this.linkUrl = null
+    },
+  },
 }
 </script>