@flexiui/svelte-rich-text 0.0.70 → 0.0.72

package/dist/RichText.svelte

@@ -953,6 +953,7 @@ function onOpenChangeHighlight(open: boolean) {
     {/if}
   </div>
 {/if}
+
 <div
   class="fl-toolbar-dropdown-panel"
   bind:this={tooltip}
@@ -1308,7 +1309,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/package.json

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