@flexiui/svelte-rich-text 0.0.78 → 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/dist/Toolbar/action-buttons/ClearFormatting.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <button
+  class="fl-bubble-menu-mark-button"
   aria-label={ariaLabel}
   type="button"
   onclick={() => $editor.chain().focus().unsetAllMarks().run()}

package/dist/Toolbar/action-buttons/ClearNodes.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <button
+class="fl-bubble-menu-mark-button"
 type="button"
 onclick={() => $editor.chain().focus().clearNodes().run()}
 aria-label={ariaLabel}

package/dist/Toolbar/action-buttons/marks/FontSize.svelte

@@ -4,7 +4,7 @@
   let { 
     editor, 
     accenSoft = false,
-    ariaLabel = "Blockquote",
+    ariaLabel = "Font size",
     fontSize
   } = $props();
 
@@ -50,7 +50,7 @@
   
 </script>
 
-<div class="fl-font-size-editor">
+<div class="fl-font-size-editor fl-bubble-menu-mark-button">
   <button
     type="button"
     aria-label="Decrease font size"

package/dist/Toolbar/action-buttons/marks/TextAlign.svelte

@@ -15,6 +15,7 @@
 <!-- Text align -->
 <button
   type="button"
+  class="fl-bubble-menu-mark-button"
   onclick={() => $editor.chain().focus().toggleTextAlign(position).run()}
   class:is-active={$editor.isActive({ textAlign: position })}
   class:accent-soft={accenSoft}

package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte

@@ -3,9 +3,10 @@
 </script>
 
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={() => $editor.chain().focus().toggleBlockquote().run()}
-  class={$editor.isActive("blockquote") ? "is-active" : ""}
+  class:is-active={$editor.isActive("blockquote")}
   aria-label={ariaLabel}
   class:accent-soft={accenSoft}
 >

package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte

@@ -4,9 +4,10 @@
 
 <!-- Code block -->
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={() => $editor.chain().focus().toggleCodeBlock().run()}
-  class={$editor.isActive("codeBlock") ? "is-active" : ""}
+  class:is-active={$editor.isActive("codeBlock")}
   aria-label={ariaLabel}
   class:accent-soft={accenSoft}
 >

package/dist/Toolbar/action-buttons/nodes/HorizontalRule.svelte

@@ -4,6 +4,7 @@
 
 <!-- Horizontal rule -->
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={() => $editor.chain().focus().setHorizontalRule().run()}
   aria-label={ariaLabel}

package/dist/Toolbar/action-buttons/nodes/Image.svelte

@@ -40,6 +40,7 @@
 
 <!-- Image -->
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={addImage}
   aria-label={ariaLabel}

package/dist/Toolbar/action-buttons/nodes/InlineMath.svelte

@@ -28,6 +28,7 @@
 </script>
 
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={addInlineMath}
   aria-label={ariaLabel}

package/dist/Toolbar/action-buttons/nodes/ListBtn.svelte

@@ -33,6 +33,7 @@
 </script>
 
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={() => $editor.chain().focus().toggleList(type, itemType).run()}
   class:is-active={$editor.isActive(type)}

package/dist/Toolbar/action-buttons/nodes/MediaGridBtn.svelte

@@ -32,6 +32,7 @@
 
 <!-- Grid -->
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={addMediaGrid}
   aria-label={ariaLabel}

package/dist/Toolbar/action-buttons/nodes/Table.svelte

@@ -36,6 +36,7 @@
 
 <!-- Table -->
 <button
+  class="fl-bubble-menu-mark-button"
   type="button"
   onclick={addTable}
   aria-label={ariaLabel}

package/package.json

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