Remove 'blur' causing issue with toggle markdown

Author: BenjaminCharmes

webapp/src/components/TiptapInline.vue

@@ -2,6 +2,7 @@
   <div ref="editorContainer" class="position-relative" v-bind="$attrs">
     <div
       v-if="editor && (showToolbar || markdownMode)"
+      ref="toolbarContainer"
       class="btn-toolbar mb-2 border rounded p-2 shadow-sm bg-white sticky-top overflow-auto flex-wrap"
       style="z-index: 10; gap: 0.5rem"
     >
@@ -31,6 +32,7 @@
           type="checkbox"
           class="custom-control-input"
           @change="toggleMarkdownView"
+          @mousedown.prevent.stop
         />
         <label class="custom-control-label" for="markdownToggleSwitch">
           {{ markdownMode ? "Markdown" : "Preview" }}
@@ -642,30 +644,8 @@ export default {
 
     this.editor.on("update", () => this.$emit("update:modelValue", this.editor.getHTML()));
     this.editor.on("focus", () => {
-      if (!this.markdownMode) {
-        this.showToolbar = true;
-      }
-    });
-
-    this.editor.on("blur", () => {
-      if (!this.markdownMode) {
-        setTimeout(() => {
-          const suggestionEl = document.querySelector(".tiptap-suggestions");
-          const editorHasFocus = this.$refs.editorContainer?.contains(document.activeElement);
-          const hasSelection = this.editor && !this.editor.state.selection.empty;
-
-          if (
-            !editorHasFocus &&
-            !hasSelection &&
-            (!suggestionEl || !suggestionEl.contains(document.activeElement))
-          ) {
-            this.showToolbar = false;
-            this.showColorPicker = false;
-          }
-        }, 50);
-      }
+      this.showToolbar = true;
     });
-
     this.editor.view.dom.addEventListener(
       "mousedown",
       (e) => {
@@ -705,10 +685,13 @@ export default {
     },
     handleClickOutside(event) {
       const editorElement = this.$refs.editorContainer;
-      if (editorElement && !editorElement.contains(event.target)) {
-        if (this.editor && !this.editor.state.selection.empty) {
-          return;
-        }
+      const toolbarElement = this.$refs.toolbarContainer;
+      if (
+        editorElement &&
+        !editorElement.contains(event.target) &&
+        !(toolbarElement && toolbarElement.contains(event.target))
+      ) {
+        if (this.editor && !this.editor.state.selection.empty) return;
         this.showToolbar = false;
         this.showColorPicker = false;
       }