@flexiui/svelte-rich-text 0.0.37 → 0.0.39

package/dist/extensions/Audio.js

@@ -88,6 +88,20 @@ export const Audio = Node.create({
                     'data-seek-bar-bg-color': attrs.seekBarBgColor,
                 }),
             },
+            playBtnBgColor: {
+                default: '#8d8d8d26',
+                parseHTML: el => el.getAttribute('data-play-btn-bg-color'),
+                renderHTML: attrs => ({
+                    'data-play-btn-bg-color': attrs.playBtnBgColor,
+                }),
+            },
+            playBtnTextColor: {
+                default: 'currentColor',
+                parseHTML: el => el.getAttribute('data-play-btn-text-color'),
+                renderHTML: attrs => ({
+                    'data-play-btn-text-color': attrs.playBtnTextColor,
+                }),
+            },
             colorPlay: {
                 default: '#5d5d5dc9',
                 parseHTML: el => el.getAttribute('data-color-play'),

package/dist/extensions/AudioPlayer.svelte

@@ -18,6 +18,8 @@
   export let borderRadius: string;
   export let accentColor: string;
   export let accentColorPaused: string;
+  export let playBtnBgColor: string;
+  export let playBtnTextColor: string;
   export let colorPlay: string;
   export let maxWidth: string;
 
@@ -284,20 +286,23 @@
     window.removeEventListener("mousemove", onVolumeGrabMouseMove);
     window.removeEventListener("mouseup", onVolumeGrabMouseUp);
   }
+
+const styleVars = [
+  bgColor && `--player-bg-color: ${bgColor};`,
+  playBtnBgColor && `--player-play-btn-bg: ${playBtnBgColor};`,
+  playBtnTextColor && `--player-play-btn-color: ${playBtnTextColor};`,
+  accentColor && `--player-primary-color: ${accentColor};`,
+  accentColorPaused && `--player-progress-default-bg: ${accentColorPaused};`,
+  textColor && `--player-text-color: ${textColor};`,
+  borderRadius && `--player-border-radius: ${borderRadius};`,
+].filter(Boolean).join('\n');
 </script>
 
 <div 
 class="audio-player" 
 {id} 
 class:playing
-style={`
-  --player-bg-color: ${bgColor};
-  --player-play-btn-bg: ${colorPlay};
-  --player-primary-color: ${accentColor};
-  --player-progress-default-bg: ${accentColorPaused};
-  --player-text-color: ${textColor};
-  --player-border-radius: ${borderRadius};
-`}
+style={styleVars}
 >
   <button
     onclick={() => togglePlayPause()}

package/dist/extensions/AudioPlayer.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         borderRadius: string;
         accentColor: string;
         accentColorPaused: string;
+        playBtnBgColor: string;
+        playBtnTextColor: string;
         colorPlay: string;
         maxWidth: string;
     };

package/dist/extensions/AudioPlayerWrapper.svelte

@@ -81,6 +81,8 @@
     borderRadius={attrs.borderRadius}
     accentColor={attrs.accentColor}
     accentColorPaused={attrs.accentColorPaused}
+    playBtnBgColor={attrs.playBtnBgColor}
+    playBtnTextColor={attrs.playBtnTextColor}
     colorPlay={attrs.colorPlay}
     maxWidth={attrs.maxWidth}
     ></AudioPlayer>

package/dist/renderRichText.js

@@ -29,7 +29,7 @@ const nodeMapping = {
         return `<div class="fl-grid-item">${serializeChildrenToHTMLString(children)}</div>`;
     },
     audio({ node, children }) {
-        const { id, src, controls, bgColor, textColor, borderRadius, accentColor, accentColorPaused, maxWidth, colorPlay } = node.attrs;
+        const { id, src, controls, bgColor, textColor, borderRadius, accentColor, accentColorPaused, playBtnBgColor, playBtnTextColor, maxWidth, colorPlay } = node.attrs;
         return `
         <fl-audio-player
         class="fl-audio-player"
@@ -41,6 +41,8 @@ const nodeMapping = {
         borderRadius="${borderRadius}"
         accentColor="${accentColor}"
         accentColorPaused="${accentColorPaused}"
+        playBtnBgColor="${playBtnBgColor}"
+        playBtnTextColor="${playBtnTextColor}"
         maxWidth="${maxWidth}"
         colorPlay="${colorPlay}"
         >

package/package.json

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