@flexiui/svelte-rich-text 0.0.71 → 0.0.73

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";
 
@@ -953,6 +954,7 @@ function onOpenChangeHighlight(open: boolean) {
     {/if}
   </div>
 {/if}
+
 <div
   class="fl-toolbar-dropdown-panel"
   bind:this={tooltip}
@@ -1308,7 +1310,13 @@ function onOpenChangeHighlight(open: boolean) {
       }}
       appendTo={document.body}
     >
-      <div data-test-id="bubble-menu" class="fl-bubble-menu flex">
+      <div
+      data-test-id="bubble-menu"
+      class="fl-bubble-menu flex"
+      style="
+      --fl-editor-accent-color: {editorConfig.editorAccentColor};
+      "
+      >
         {#each bubbleMenuGroups as bubbleMenuGroup}
           {#if bubbleMenuGroup.length > 0}
             <div role="group" class="fl-rich-text-toolbar-group">

package/dist/styles.css

@@ -123,66 +123,66 @@
     background: transparent;
     line-height: 1.6;
   }
+}
 
-  .fl-bubble-menu {
-    padding: 6px;
-    background: #242424b0;
-    border: 1px solid #ffffff12;
-    backdrop-filter: blur(16px);
-    border-radius: 14px;
+.fl-bubble-menu {
+  padding: 6px;
+  background: #242424b0;
+  border: 1px solid #ffffff12;
+  backdrop-filter: blur(16px);
+  border-radius: 14px;
+  display: flex;
+  gap: 5px;
+  position: relative;
+  z-index: var(--fl-toolbar-z-index, 10);
+
+
+  .fl-bubble-menu-mark-button {
+    border-radius: 9px;
+    border: none;
     display: flex;
-    gap: 5px;
-    position: relative;
-    z-index: var(--fl-toolbar-z-index, 10);
-
-
-    .fl-bubble-menu-mark-button {
-      border-radius: 9px;
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 6px 11px;
-      min-width: 30px;
-      min-height: 30px;
-      background: rgba(255, 255, 255, 0.1);
-      transition: background 0.3s ease;
-      cursor: pointer;
-
-      &.fl-bubble-menu-mark-button {
-        padding-inline: 6px;
-
-        svg {
-          width: 16px;
-          height: 16px;
-
-          &.toogle-dropdown-button-icon {
-            width: 8px;
-            margin: 0 2px 0 6px;
-          }
+    align-items: center;
+    justify-content: center;
+    padding: 6px 11px;
+    min-width: 30px;
+    min-height: 30px;
+    background: rgba(255, 255, 255, 0.1);
+    transition: background 0.3s ease;
+    cursor: pointer;
+
+    &.fl-bubble-menu-mark-button {
+      padding-inline: 6px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+
+        &.toogle-dropdown-button-icon {
+          width: 8px;
+          margin: 0 2px 0 6px;
         }
       }
+    }
 
-      &.is-active {
-        background: var(--fl-editor-accent-color);
-        color: white;
-
-        &.accent-soft {
-          background: transparent;
-          color: var(--fl-editor-accent-color);
-          position: relative;
-          
-          &::after {
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            left: 0;
-            top: 0;
-            background: var(--fl-editor-accent-color);
-            opacity: 0.15;
-            border-radius: inherit;
-          }
+    &.is-active {
+      background: var(--fl-editor-accent-color);
+      color: white;
+
+      &.accent-soft {
+        background: transparent;
+        color: var(--fl-editor-accent-color);
+        position: relative;
+        
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          background: var(--fl-editor-accent-color);
+          opacity: 0.15;
+          border-radius: inherit;
         }
       }
     }

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.71",
+  "version": "0.0.73",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",