Merge pull request #684 from Harbour-Enterprises/custom-selection-fix

fix: selections is lost when toolbar dropdown item is clicked

Author: harbournick

packages/super-editor/src/components/SuperEditor.vue

@@ -1,7 +1,7 @@
 <script setup>
 import 'tippy.js/dist/tippy.css';
 import { NSkeleton } from 'naive-ui';
-import { ref, onMounted, onBeforeUnmount, computed, shallowRef, reactive, nextTick, markRaw } from 'vue';
+import { ref, onMounted, onBeforeUnmount, shallowRef, reactive, markRaw, onDeactivated } from 'vue';
 import { Editor } from '@/index.js';
 import { getStarterExtensions } from '@extensions/index.js';
 import SlashMenu from './slash-menu/SlashMenu.vue';
@@ -223,9 +223,26 @@ const handleSuperEditorClick = (event) => {
   }
 };
 
+const handleClickOutside = (event) => {
+  const pmElement = editorElem.value?.querySelector('.ProseMirror');
+  const isInsideEditor = pmElement?.contains(event.target);
+
+  if (!isInsideEditor) {
+    editor.value.setOptions({
+      focusTarget: event.target,
+    });
+  }
+};
+
 onMounted(() => {
   initializeData();
   if (props.options?.suppressSkeletonLoader || !props.options?.collaborationProvider) editorReady.value = true;
+
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onDeactivated(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
 });
 
 const handleMarginClick = (event) => {

packages/super-editor/src/core/Editor.js

@@ -240,6 +240,8 @@ export class Editor extends EventEmitter {
 
     isHeaderFooterChanged: false,
     isCustomXmlChanged: false,
+
+    focusTarget: null,
   };
 
   /**

packages/super-editor/src/extensions/custom-selection/custom-selection.js

@@ -34,7 +34,8 @@ export const CustomSelection = Extension.create({
       props: {
         handleDOMEvents: {
           focusout: (view, event) => {
-            if (document.activeElement && !event.relatedTarget) {
+            const isDropDownOption = this.editor.options.focusTarget.getAttribute('data-dropdown-option');
+            if (document.activeElement && !event.relatedTarget && !view.state.selection.empty && !isDropDownOption) {
               this.editor.setOptions({
                 lastSelection: view.state.selection,
               });