@flexiui/svelte-rich-text 0.0.76 → 0.0.77

package/dist/RichText.svelte

@@ -127,6 +127,13 @@
   type ToolbarConfig = ToolbarItem[] | ToolbarItem[][];
   type BubbleMenuConfig = ToolbarItem[] | ToolbarItem[][];
 
+  type BubbleMenuOptions = {
+    placement?: "top" | "right" | "bottom" | "left";
+    strategy?: "absolute" | "fixed";
+    offset?: number;
+    flip?: boolean;
+  };
+
   let {
     id = "fl-rich-text-editor",
     className,
@@ -142,6 +149,7 @@
     uniqueH1 = false,
     toolbarConfig = undefined,
     bubbleMenuConfig = undefined,
+    bubbleMenuOptions = {},
     customExtensions = [],
     editorEvents = {
       onTransaction: () => {},
@@ -233,6 +241,18 @@
   let bubbleOffset =
     $editor?.storage.tableCell.customTableSelection === "column" ? 18 : 8;
 
+  const defaultBubbleMenuOptions = {
+    placement: "bottom" as const,
+    strategy: "absolute" as const,
+    offset: bubbleOffset,
+    flip: true,
+  };
+
+  let mergedBubbleMenuOptions = $derived({
+    ...defaultBubbleMenuOptions,
+    ...bubbleMenuOptions,
+  });
+
   let tooltipVisible = $state(false);
   let tooltipX = $state(0);
   let tooltipY = $state(0);
@@ -578,6 +598,14 @@
         editorEvents.onFocus({ editor, event });
       },
       onBlur({ editor, event }) {
+        const relatedTarget = event.relatedTarget as HTMLElement;
+
+        const isFontSizeEditor = relatedTarget && relatedTarget.closest(".fl-font-size-editor");
+        
+        if((relatedTarget && relatedTarget.classList.contains("fl-bubble-menu-mark-button")) || isFontSizeEditor) {
+          return;
+        }
+
         focused = false;
 
         const { state, view } = editor;
@@ -957,6 +985,9 @@
   </div>
 {/if}
 
+<pre>
+Focused: {focused}
+</pre>
 <div
   class="fl-toolbar-dropdown-panel"
   bind:this={tooltip}
@@ -1277,15 +1308,10 @@
   {/if}
 </div>
 
-{#if editor && focused}
+  {#if editor && focused}
   <div class="hidden">
     <BubbleMenu
-      options={{
-        placement: "top",
-        strategy: "absolute",
-        offset: bubbleOffset,
-        flip: false,
-      }}
+      options={mergedBubbleMenuOptions}
       editor={$editor}
       shouldShow={() => {
         const emptySelection = $editor.state.selection.empty;

package/dist/Toolbar/dropdown-buttons/LineHeightDropdownBtn.svelte

@@ -14,5 +14,7 @@
   onclick={handleClick}
 >
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 8l3 -3l3 3"/><path d="M3 16l3 3l3 -3"/><path d="M6 5l0 14"/><path d="M13 6l7 0"/><path d="M13 12l7 0"/><path d="M13 18l7 0"/></svg>
-    <svg class="toogle-dropdown-button-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><use href="#dropdown-arrow"></use></svg>
+    <svg class="toogle-dropdown-button-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"></path>
+    </svg>
 </button>

package/package.json

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