@flexiui/svelte-rich-text 0.0.79 → 0.0.80

package/dist/RichText.svelte

@@ -135,7 +135,7 @@
   };
 
   let {
-    id = "fl-rich-text-editor",
+    id = `fl-r-text-${crypto.randomUUID().slice(0, 8)}`,
     className,
     editable,
     content,
@@ -237,6 +237,7 @@
   }
 
   let focused = $state(false);
+  let shouldClearSelectionOnFocus = false;
 
   let bubbleOffset =
     $editor?.storage.tableCell.customTableSelection === "column" ? 18 : 8;
@@ -593,29 +594,36 @@
         editorEvents.onSelectionUpdate({ editor });
       },
 
-      onFocus({ editor, event }) {
+      onFocus({ editor }) {
         focused = true;
-        editorEvents.onFocus({ editor, event });
+
+        editorEvents.onFocus({ editor });
       },
       onBlur({ editor, event }) {
         const relatedTarget = event.relatedTarget as HTMLElement;
 
-        const isFontSizeEditor = relatedTarget && relatedTarget.closest(".fl-font-size-editor");
+        const isSameEditor = relatedTarget?.closest(`#${id}`);  // usa el id del editor actual
         
-        if((relatedTarget && relatedTarget.classList.contains("fl-bubble-menu-mark-button")) || isFontSizeEditor) {
+        const isBubbleMenu = relatedTarget?.closest(".fl-bubble-menu");
+        const isToolbarDropdown = relatedTarget?.closest(".fl-toolbar-dropdown-panel");
+        const isFontSizeEditor = relatedTarget?.closest(".fl-font-size-editor");
+
+        if (relatedTarget?.classList.contains("fl-bubble-menu-mark-button") || isFontSizeEditor) {
           return;
         }
 
-        focused = false;
-
-        // const { state, view } = editor;
-
-        // const pos = state.selection.to;
-
-        // const tr = state.tr.setSelection(TextSelection.create(state.doc, pos));
+        // Solo saltar la limpieza si el foco va al MISMO editor
+        if (isSameEditor || isBubbleMenu || isToolbarDropdown) {
+          focused = false;
+          editorEvents.onBlur({ editor, event });
+          return;
+        }
 
-        // view.dispatch(tr);
+        // Foco fue fuera o a OTRO editor → limpiar
+        shouldClearSelectionOnFocus = true;
+        clearSelection(editor);
 
+        focused = false;
         editorEvents.onBlur({ editor, event });
       },
       onDestroy() {
@@ -813,6 +821,19 @@
       }
     }
   }
+
+
+  function clearSelection(editor) {
+    const { state, view } = editor;
+
+    const pos = state.selection.to;
+
+    const tr = state.tr.setSelection(
+      TextSelection.create(state.doc, pos)
+    );
+
+    view.dispatch(tr);
+  }
 </script>
 
 {#if cleanMode}
@@ -832,6 +853,7 @@
   {/if}
 {:else}
   <div
+    id={id}
     class="fl-rich-text {className}"
     class:editable
     style="

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexiui/svelte-rich-text",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",