@flexiui/svelte-rich-text 0.0.36 → 0.0.37

package/dist/extensions/Audio.js

@@ -39,59 +39,81 @@ export const Audio = Node.create({
                 parseHTML: el => el.hasAttribute('loop'),
                 renderHTML: attrs => (attrs.loop ? { loop: true } : {}),
             },
-            colorPlay: {
-                default: '#333',
-                parseHTML: el => el.getAttribute('data-color-play') || '#333',
+            id: {
+                default: `fl-audio-player-${Math.random().toString(36).substring(2, 15)}`,
+                parseHTML: el => el.getAttribute('data-id') || null,
                 renderHTML: attrs => ({
-                    'data-color-play': attrs.colorPlay,
+                    'data-id': attrs.id,
+                }),
+            },
+            bgColor: {
+                default: '#8c8c8c45',
+                parseHTML: el => el.getAttribute('data-bg-color'),
+                renderHTML: attrs => ({
+                    'data-bg-color': attrs.bgColor,
                 }),
             },
-            colorBar: {
-                default: '#888',
-                parseHTML: el => el.getAttribute('data-color-bar') || '#888',
+            textColor: {
+                default: 'currentColor',
+                parseHTML: el => el.getAttribute('data-text-color'),
                 renderHTML: attrs => ({
-                    'data-color-bar': attrs.colorBar,
+                    'data-text-color': attrs.textColor,
+                }),
+            },
+            borderRadius: {
+                default: '18px',
+                parseHTML: el => el.getAttribute('data-border-radius'),
+                renderHTML: attrs => ({
+                    'data-border-radius': attrs.borderRadius,
+                }),
+            },
+            accentColor: {
+                default: '#5e17eb',
+                parseHTML: el => el.getAttribute('data-accent-color'),
+                renderHTML: attrs => ({
+                    'data-accent-color': attrs.accentColor,
+                }),
+            },
+            accentColorPaused: {
+                default: '#fff',
+                parseHTML: el => el.getAttribute('data-accent-color-paused'),
+                renderHTML: attrs => ({
+                    'data-accent-color-paused': attrs.accentColorPaused,
+                }),
+            },
+            seekBarBgColor: {
+                default: '#8d8d8d3a',
+                parseHTML: el => el.getAttribute('data-seek-bar-bg-color'),
+                renderHTML: attrs => ({
+                    'data-seek-bar-bg-color': attrs.seekBarBgColor,
+                }),
+            },
+            colorPlay: {
+                default: '#5d5d5dc9',
+                parseHTML: el => el.getAttribute('data-color-play'),
+                renderHTML: attrs => ({
+                    'data-color-play': attrs.colorPlay,
                 }),
             },
             maxWidth: {
                 default: '100%',
-                parseHTML: el => el.getAttribute('data-max-width') || '100%',
+                parseHTML: el => el.getAttribute('data-max-width'),
                 renderHTML: attrs => ({
                     'data-max-width': attrs.maxWidth,
                 }),
             },
-            id: {
-                default: "fl-audio-" + Math.random().toString(36).slice(2),
-                parseHTML: el => el.getAttribute('data-id') || null,
-                renderHTML: attrs => ({
-                    'data-id': attrs.id,
-                }),
-            }
         };
     },
     parseHTML() {
         return [
             {
-                tag: 'audio-player',
-                getAttrs: el => {
-                    if (!(el instanceof HTMLElement))
-                        return false;
-                    return {
-                        src: el.getAttribute('src'),
-                        controls: el.hasAttribute('controls'),
-                        autoplay: el.hasAttribute('autoplay'),
-                        loop: el.hasAttribute('loop'),
-                        colorPlay: el.getAttribute('data-color-play') || '#333',
-                        colorBar: el.getAttribute('data-color-bar') || '#888',
-                        maxWidth: el.getAttribute('data-max-width') || '100%',
-                    };
-                },
+                tag: 'fl-audio-player',
             },
         ];
     },
     renderHTML({ HTMLAttributes }) {
         return [
-            'audio-player',
+            'fl-audio-player',
             mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
         ];
     },

package/dist/extensions/AudioPlayer.svelte

@@ -7,18 +7,27 @@
   import WaveSurfer from "wavesurfer.js";
   import { activeAudioId } from "./audioStore";
 
-  export let id: string = "audio-" + Math.random().toString(36).slice(2);
+  export let id: string;
   export let src: string;
+  export let controls: any
   export let showSeekbar: boolean = true;
   export let config: any = {};
-
   export let playerType: "waveform" | "seekbar" = "waveform";
+  export let bgColor: string;
+  export let textColor: string;
+  export let borderRadius: string;
+  export let accentColor: string;
+  export let accentColorPaused: string;
+  export let colorPlay: string;
+  export let maxWidth: string;
 
   let wavesurfer: WaveSurfer | null = null;
   let waveformEl: HTMLDivElement | null = null;
   let wavesurferReady: boolean = false;
   let loading: boolean = true;
-  let audio: any = null;
+  // let audio: any = null;
+  let audio: HTMLAudioElement | null = null;
+
   let playing: boolean = false;
   let mounted: boolean = false;
   let seekbarEl: HTMLDivElement | null = null;
@@ -31,6 +40,8 @@
   let audioDuration: number = 0;
   let audioCurrentTime: number = 0;
 
+  id = id + "-" + Math.random().toString(36).substring(2, 15);
+
   function formatTime(seconds: number) {
     if (isNaN(seconds) || seconds < 0) return "0:00";
 
@@ -152,10 +163,10 @@
     //   wavesurfer?.stop();
     // });
 
-    audio = new Audio(src);
+    // audio = new Audio(src);
+    // audio.load();
     audio.volume = volume;
     audio.preload = "auto";
-    audio.load();
 
     audio.addEventListener("loadedmetadata", () => {
       audioDuration = audio.duration;
@@ -173,6 +184,19 @@
       }
     });
 
+    audio.onended = () => {
+      playing = false;
+      console.log("Audio playback ended");
+    };
+
+    audio.addEventListener("play", () => {
+      playing = true;
+    });
+
+    audio.addEventListener("pause", () => {
+      playing = false;
+    });
+
     setTimeout(() => {
       loading = false;
     }, 500);
@@ -262,7 +286,19 @@
   }
 </script>
 
-<div class="audio-player" {id} class:playing>
+<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};
+`}
+>
   <button
     onclick={() => togglePlayPause()}
     type="button"
@@ -441,11 +477,12 @@
     </div>
   </div>
 
-  <!-- {#if mounted && !wavesurferReady}
-        <div class="audio-player-time">
-            0:51
-        </div>
-    {/if} -->
+  <!-- Reproductor de audo nativo -->
+  <audio
+    bind:this={audio}
+    src={src}
+    id={'native-audio-' + id}
+  ></audio>
 </div>
 
 <style>
@@ -456,13 +493,14 @@
 
   .audio-player {
     --player-primary-color: #5e17eb;
-    --player-bg-color: #455f7414;
+    --player-bg-color: #8c8c8c45;
     --player-border-radius: 18px;
     --player-seekbar-bg: #8d8d8d3a;
     --player-seekbar-height: 6px;
     --player-progress-default-bg: #f5f5f5;
     --player-play-btn-bg: #8d8d8d26;
     --player-play-btn-color: #fff;
+    --player-text-color: currentColor;
 
     display: flex;
     align-items: center;
@@ -472,6 +510,7 @@
     padding: 12px;
     width: 100%;
     box-sizing: border-box;
+    color: var(--player-text-color);
 
     &.playing {
       .audio-player-wave {
@@ -496,6 +535,16 @@
     border-radius: 100%;
     outline-offset: 4px;
     outline-color: var(--player-play-btn-bg);
+    cursor: pointer;
+    transition: filter 0.3s ease, transform 0.3s ease, background 0.3s ease;
+
+    &:hover {
+      /* background: var(--player-primary-color); */
+      &:not(.playing) {
+        filter: brightness(1.2);
+      }
+      transform: scale(1.06);
+    }
 
     svg {
       width: 20px;
@@ -587,7 +636,7 @@
     margin-right: 4px;
 
     &:hover {
-      background: #0d121612;
+      background: #7a7a7a17;
     }
 
     &:hover .audio-player-seekbar,
@@ -621,6 +670,7 @@
     border: none;
     padding: 4px;
     background: #0d121600;
+    color: currentColor;
     border-radius: 100%;
     height: 36px;
     width: 36px;

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

@@ -1,11 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
+        id: string;
         src: string;
+        controls: any;
         showSeekbar?: boolean;
         config?: any;
         playerType?: "waveform" | "seekbar";
+        bgColor: string;
+        textColor: string;
+        borderRadius: string;
+        accentColor: string;
+        accentColorPaused: string;
+        colorPlay: string;
+        maxWidth: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/extensions/AudioPlayerWrapper.svelte

@@ -62,12 +62,8 @@
 <NodeViewWrapper class="fl-audio-player-wrapper">
   <div
     bind:this={targetElement}
-    class="fl-audio-player"
+    class="fl-audio-player-container"
     class:selected={selected}
-    style="
-      --color-play: {attrs.colorPlay};
-      --color-bar: {attrs.colorBar};
-    "
   >
     <!-- <audio
       src={attrs.src}
@@ -76,7 +72,18 @@
       loop={attrs.loop}
     ></audio> -->
 
-    <AudioPlayer src={attrs.src}></AudioPlayer>
+    <AudioPlayer 
+    id={attrs.id}
+    controls={true}
+    src={attrs.src}
+    bgColor={attrs.bgColor}
+    textColor={attrs.textColor}
+    borderRadius={attrs.borderRadius}
+    accentColor={attrs.accentColor}
+    accentColorPaused={attrs.accentColorPaused}
+    colorPlay={attrs.colorPlay}
+    maxWidth={attrs.maxWidth}
+    ></AudioPlayer>
 
     {#if selected}
         <span
@@ -93,7 +100,7 @@
 </NodeViewWrapper>
 
 <style>
-  .fl-audio-player {
+  .fl-audio-player-container {
     display: flex;
     align-items: center;
     position: relative;

package/dist/renderRichText.d.ts

@@ -1,6 +1,7 @@
 interface RenderOptions {
     json: any;
     customExtensions?: any[];
+    customNodeMapping?: any;
 }
-export declare function renderHTMLFromJSON({ json, customExtensions }: RenderOptions): string;
+export declare function renderHTMLFromJSON({ json, customExtensions, customNodeMapping }: RenderOptions): string;
 export {};

package/dist/renderRichText.js

@@ -1,25 +1,17 @@
 import { renderToHTMLString, serializeChildrenToHTMLString } from "@tiptap/static-renderer";
 import katex from "katex";
 import { getRichTextExtensions } from "./getExtensions";
-export function renderHTMLFromJSON({ json, customExtensions = [] }) {
-    const extensions = getRichTextExtensions({ customExtensions });
-    const html = renderToHTMLString({
-        extensions: extensions, // using your extensions
-        content: json,
-        options: {
-            nodeMapping: {
-                // Aquí le dices cómo renderizar el nodo "mathematics"
-                inlineMath({ node }) {
-                    const latex = node.attrs.latex || '';
-                    // Devuelve el HTML que quieres que se genere
-                    return `<span class="math-inline">${katex.renderToString(latex, { throwOnError: false })}</span>`;
-                },
-                MediaGridComponent({ node, children }) {
-                    const cols = node.attrs.cols || 2;
-                    const gap = node.attrs.gap || '1rem';
-                    const showIndicator = node.attrs.showIndicator || false;
-                    const indicatorType = node.attrs.indicatorType || 'numeric';
-                    return `
+const nodeMapping = {
+    inlineMath({ node }) {
+        const latex = node.attrs.latex || '';
+        return `<span class="math-inline">${katex.renderToString(latex, { throwOnError: false })}</span>`;
+    },
+    MediaGridComponent({ node, children }) {
+        const cols = node.attrs.cols || 2;
+        const gap = node.attrs.gap || '1rem';
+        const showIndicator = node.attrs.showIndicator || false;
+        const indicatorType = node.attrs.indicatorType || 'numeric';
+        return `
             <div 
             class="fl-media-grid" 
             data-cols="${cols}"
@@ -32,21 +24,41 @@ export function renderHTMLFromJSON({ json, customExtensions = [] }) {
             ">
               ${serializeChildrenToHTMLString(children)}
             </div>`;
-                },
-                gridItem({ node, children }) {
-                    return `<div class="fl-grid-item">${serializeChildrenToHTMLString(children)}</div>`;
-                },
-                audio({ node, children }) {
-                    const src = node.attrs.src;
-                    const controls = node.attrs.controls;
-                    return `
-            <fl-audio-player
-            class="fl-audio-player"
-            id="fl-audio-player-${node.attrs.id}" 
-            src="${src}">
-            </fl-audio-player>`;
-                }
-            }
+    },
+    gridItem({ node, children }) {
+        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;
+        return `
+        <fl-audio-player
+        class="fl-audio-player"
+        id="${id}" 
+        src="${src}"
+        controls="${controls}"
+        bgColor="${bgColor}"
+        textColor="${textColor}"
+        borderRadius="${borderRadius}"
+        accentColor="${accentColor}"
+        accentColorPaused="${accentColorPaused}"
+        maxWidth="${maxWidth}"
+        colorPlay="${colorPlay}"
+        >
+        </fl-audio-player>
+        `;
+    },
+};
+export function renderHTMLFromJSON({ json, customExtensions = [], customNodeMapping = {} }) {
+    const extensions = getRichTextExtensions({ customExtensions });
+    const finalNodeMapping = {
+        ...nodeMapping,
+        ...customNodeMapping,
+    };
+    const html = renderToHTMLString({
+        extensions: extensions, // using your extensions
+        content: json,
+        options: {
+            nodeMapping: finalNodeMapping,
         }
     });
     return html;

package/package.json

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