@flexiui/svelte-rich-text 0.0.72 → 0.0.74

package/dist/RichText.svelte

@@ -21,10 +21,11 @@
     createEditor,
     Editor,
     // EditorContent,
-    BubbleMenu,
+    // BubbleMenu,
   } from "svelte-tiptap";
 
   import EditorContent from "./svelte-tiptap-extends/EditorContent.svelte";
+  import BubbleMenu from "./svelte-tiptap-extends/BubbleMenu.svelte";
   import { getRichTextExtensions } from "./getExtensions";
   import { rgbToHex } from "./utils";
 
@@ -226,6 +227,8 @@
     editorConfig.toolbarJustifyContent = "flex-end";
   }
 
+  let focused = $state(false);
+
   let bubbleOffset =
     $editor?.storage.tableCell.customTableSelection === "column" ? 18 : 8;
 
@@ -570,9 +573,11 @@
       },
 
       onFocus({ editor, event }) {
+        focused = true;
         editorEvents.onFocus({ editor, event });
       },
       onBlur({ editor, event }) {
+        focused = false;
         editorEvents.onBlur({ editor, event });
       },
       onDestroy() {
@@ -1273,7 +1278,7 @@ function onOpenChangeHighlight(open: boolean) {
   {/if}
 </div>
 
-{#if editor}
+{#if editor && focused}
   <div class="hidden">
     <BubbleMenu
       options={{

package/dist/svelte-tiptap-extends/BubbleMenu.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { BubbleMenuPlugin, type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+
+  import type { ComponentInputProps } from './types';
+  import { invariant } from './utils';
+
+  type Props = ComponentInputProps<BubbleMenuPluginProps>;
+
+  const {
+    editor,
+    options = {},
+    pluginKey = 'SvelteTiptapBubbleMenu',
+    shouldShow = null,
+    updateDelay = 250,
+    appendTo = null,
+    children,
+    class: className,
+  }: Props = $props();
+
+  invariant(editor, 'Missing editor instance.');
+
+  let element: HTMLElement;
+
+  onMount(() => {
+    element.style.visibility = 'hidden';
+    element.style.position = 'absolute';
+
+    const plugin = BubbleMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      options,
+      shouldShow,
+      updateDelay,
+      appendTo,
+    });
+
+    editor.registerPlugin(plugin);
+
+    return () => {
+      editor?.unregisterPlugin(pluginKey);
+      window.requestAnimationFrame(() => {
+        if (element && element.parentNode) {
+          element.parentNode.removeChild(element);
+        }
+      });
+    };
+  });
+</script>
+
+<div bind:this={element} class={className} style="visibility: hidden;">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/svelte-tiptap-extends/BubbleMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BubbleMenuProps = typeof __propDef.props;
+export type BubbleMenuEvents = typeof __propDef.events;
+export type BubbleMenuSlots = typeof __propDef.slots;
+export default class BubbleMenu extends SvelteComponentTyped<BubbleMenuProps, BubbleMenuEvents, BubbleMenuSlots> {
+}
+export {};

package/dist/svelte-tiptap-extends/utils.d.ts

@@ -0,0 +1,4 @@
+type Invariant = (condition: unknown, message?: string) => asserts condition;
+export declare const invariant: Invariant;
+export declare const runIfFn: <T>(value: T | ((...args: unknown[]) => T), ...args: unknown[]) => T;
+export {};

package/dist/svelte-tiptap-extends/utils.js

@@ -0,0 +1,8 @@
+export const invariant = (condition, msg) => {
+    if (!condition) {
+        throw new Error(msg);
+    }
+};
+export const runIfFn = (value, ...args) => {
+    return typeof value === 'function' ? value(...args) : value;
+};

package/package.json

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