Clean up CrossReference

Author: BenjaminCharmes

webapp/src/components/TiptapInline.vue

@@ -374,13 +374,18 @@ export default {
       content: this.modelValue,
       onUpdate: () => this.$emit("update:modelValue", this.editor.getHTML()),
       onFocus: () => (this.showToolbar = true),
-      onBlur: () =>
+      onBlur: () => {
         setTimeout(() => {
-          if (!this.$el.contains(document.activeElement)) {
+          const suggestionEl = document.querySelector(".tiptap-suggestions");
+          if (
+            !this.$el.contains(document.activeElement) &&
+            (!suggestionEl || !suggestionEl.contains(document.activeElement))
+          ) {
             this.showToolbar = false;
             this.showColorPicker = false;
           }
-        }, 150),
+        }, 150);
+      },
     });
 
     this.handleDocumentClick = (e) => this.handleClickOutside(e);

webapp/src/editor/extensions/CrossReferenceInputRule.js

@@ -76,22 +76,6 @@ function createSuggestionPlugin(options, editor) {
       },
     },
 
-    props: {
-      handleKeyDown(view, event) {
-        const state = pluginKey.getState(view.state);
-        if (!state?.active) return false;
-
-        if (event.key === "Backspace" && state.query === "" && state.range) {
-          const tr = view.state.tr.deleteRange(state.range);
-          view.dispatch(tr);
-          hideSuggestions();
-          return true;
-        }
-
-        return false;
-      },
-    },
-
     view() {
       return {
         update(view) {
@@ -142,8 +126,10 @@ function showSuggestions(view, state, options, editor) {
   suggestionEl.style.display = "block";
 
   const input = suggestionEl.querySelector("input");
-  if (input && document.activeElement !== input) {
-    input.focus();
+  if (input) {
+    requestAnimationFrame(() => {
+      input.focus({ preventScroll: true });
+    });
   }
 }