@flexiui/svelte-rich-text 0.0.50 → 0.0.51

package/dist/extensions/Audio.d.ts

@@ -13,6 +13,7 @@ export interface AudioOptions {
     playBtnTextColor: string;
     colorPlay: string;
     maxWidth: string;
+    rewriteStyles: boolean;
 }
 export interface SetAudioOptions {
     src: string;
@@ -29,6 +30,7 @@ export interface SetAudioOptions {
     playBtnTextColor?: string;
     colorPlay?: string;
     maxWidth?: string;
+    rewriteStyles?: boolean;
 }
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {

package/dist/extensions/Audio.js

@@ -24,6 +24,7 @@ export const Audio = Node.create({
             playBtnTextColor: 'currentColor',
             colorPlay: '#5d5d5dc9',
             maxWidth: '100%',
+            rewriteStyles: false,
         };
     },
     inline() {
@@ -84,6 +85,10 @@ export const Audio = Node.create({
                 default: this.options.maxWidth,
                 renderHTML: a => ({ 'data-max-width': a.maxWidth }),
             },
+            rewriteStyles: {
+                default: this.options.rewriteStyles,
+                renderHTML: a => ({ 'data-rewrite-styles': a.rewriteStyles }),
+            },
         };
     },
     parseHTML() {

package/dist/extensions/AudioPlayer.svelte

@@ -5,7 +5,7 @@
 <script lang="ts">
   import { onMount, tick } from "svelte";
   import WaveSurfer from "wavesurfer.js";
-  import { activeAudioId } from "./audioStore";
+  import { activeAudioId, audioAttributes } from "./audioStore";
 
   export let id: string;
   export let src: string;
@@ -22,6 +22,7 @@
   export let playBtnTextColor: string;
   export let colorPlay: string;
   export let maxWidth: string;
+  export let rewriteStyles: boolean | string = false;
 
   let wavesurfer: WaveSurfer | null = null;
   let waveformEl: HTMLDivElement | null = null;
@@ -44,6 +45,18 @@
 
   id = id + "-" + Math.random().toString(36).substring(2, 15);
 
+  audioAttributes.set({
+    bgColor,
+    textColor,
+    borderRadius,
+    accentColor,
+    accentColorPaused,
+    playBtnBgColor,
+    playBtnTextColor,
+    colorPlay,
+    maxWidth,
+  });
+
   function formatTime(seconds: number) {
     if (isNaN(seconds) || seconds < 0) return "0:00";
 
@@ -287,22 +300,22 @@
     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');
+  const rewrite = rewriteStyles === true || rewriteStyles === 'true';
 </script>
 
 <div 
 class="audio-player" 
 {id} 
 class:playing
-style={styleVars}
+style={`
+  ${(bgColor || $audioAttributes.bgColor) && `--player-bg-color: ${rewrite ? bgColor : $audioAttributes.bgColor};`}
+  ${playBtnBgColor && `--player-play-btn-bg: ${playBtnBgColor};`}
+  ${playBtnTextColor && `--player-play-btn-color: ${playBtnTextColor};`}
+  ${`--player-primary-color: ${rewrite ? accentColor : $audioAttributes.accentColor};`}
+  ${accentColorPaused && `--player-progress-default-bg: ${accentColorPaused};`}
+  ${textColor && `--player-text-color: ${textColor};`}
+  ${borderRadius && `--player-border-radius: ${borderRadius};`}
+`}
 >
   <button
     onclick={() => togglePlayPause()}
@@ -539,11 +552,15 @@ style={styleVars}
     color: var(--player-play-btn-color);
     border: 2px solid transparent;
     border-radius: 100%;
-    outline-offset: 4px;
-    outline-color: var(--player-play-btn-bg);
+    outline: none;
     cursor: pointer;
     transition: filter 0.3s ease, transform 0.3s ease, background 0.3s ease;
 
+    &:focus-visible {
+      outline-offset: 4px;
+      outline-color: var(--player-play-btn-bg);
+    }
+
     &:hover {
       /* background: var(--player-primary-color); */
       &:not(.playing) {

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

@@ -16,6 +16,7 @@ declare const __propDef: {
         playBtnTextColor: string;
         colorPlay: string;
         maxWidth: string;
+        rewriteStyles?: boolean | string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/extensions/AudioPlayerWrapper.svelte

@@ -85,6 +85,7 @@
     playBtnTextColor={attrs.playBtnTextColor}
     colorPlay={attrs.colorPlay}
     maxWidth={attrs.maxWidth}
+    rewriteStyles={attrs.rewriteStyles}
     ></AudioPlayer>
 
     {#if selected}

package/dist/extensions/NodeLineHeight.d.ts

@@ -1,7 +1,7 @@
 import { Extension } from "@tiptap/core";
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
+        nodeLineHeight: {
             setNodeLineHeight: (lineHeight: string) => ReturnType;
             unsetNodeLineHeight: () => ReturnType;
         };

package/dist/extensions/NodeLineHeight.js

@@ -1,10 +1,11 @@
 import { Extension } from "@tiptap/core";
+const allowedTypes = ["paragraph", "heading", "h1"];
 export const NodeLineHeight = Extension.create({
     name: "nodeLineHeight",
     addGlobalAttributes() {
         return [
             {
-                types: ["paragraph", "heading"],
+                types: allowedTypes,
                 attributes: {
                     lineHeight: {
                         default: null,
@@ -27,24 +28,26 @@ export const NodeLineHeight = Extension.create({
                 const { $from } = state.selection;
                 for (let d = $from.depth; d > 0; d--) {
                     const node = $from.node(d);
-                    if (node.type.name === "paragraph") {
-                        return commands.updateAttributes("paragraph", {
+                    if (allowedTypes.includes(node.type.name)) {
+                        return commands.updateAttributes(node.type.name, {
                             lineHeight,
                         });
                     }
-                    if (node.type.name === "heading") {
-                        return commands.updateAttributes("heading", {
-                            lineHeight,
+                }
+                return false;
+            },
+            unsetNodeLineHeight: () => ({ state, commands }) => {
+                const { $from } = state.selection;
+                for (let d = $from.depth; d > 0; d--) {
+                    const node = $from.node(d);
+                    if (allowedTypes.includes(node.type.name)) {
+                        return commands.updateAttributes(node.type.name, {
+                            lineHeight: null,
                         });
                     }
                 }
                 return false;
             },
-            unsetNodeLineHeight: () => ({ commands }) => {
-                return commands.updateAttributes("paragraph", {
-                    lineHeight: null,
-                });
-            },
         };
     }
 });

package/dist/extensions/audioStore.d.ts

@@ -1 +1,2 @@
 export declare const activeAudioId: import("svelte/store").Writable<string>;
+export declare const audioAttributes: import("svelte/store").Writable<any>;

package/dist/extensions/audioStore.js

@@ -1,2 +1,3 @@
 import { writable } from "svelte/store";
 export const activeAudioId = writable(null);
+export const audioAttributes = writable({});

package/dist/index.d.ts

@@ -2,4 +2,5 @@ import RichText from './RichText.svelte';
 import { renderHTMLFromJSON } from './renderRichText';
 import { Placeholder as PlaceholderExt } from './extensions/Placeholder';
 import { Audio as AudioExt } from './extensions/Audio';
-export { RichText, PlaceholderExt, AudioExt, renderHTMLFromJSON };
+import { audioAttributes } from './extensions/audioStore';
+export { RichText, PlaceholderExt, AudioExt, renderHTMLFromJSON, audioAttributes, };

package/dist/index.js

@@ -2,4 +2,5 @@ import RichText from './RichText.svelte';
 import { renderHTMLFromJSON } from './renderRichText';
 import { Placeholder as PlaceholderExt } from './extensions/Placeholder';
 import { Audio as AudioExt } from './extensions/Audio';
-export { RichText, PlaceholderExt, AudioExt, renderHTMLFromJSON };
+import { audioAttributes } from './extensions/audioStore';
+export { RichText, PlaceholderExt, AudioExt, renderHTMLFromJSON, audioAttributes, };

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, playBtnBgColor, playBtnTextColor, maxWidth, colorPlay } = node.attrs;
+        const { id, src, controls, bgColor, textColor, borderRadius, accentColor, accentColorPaused, playBtnBgColor, playBtnTextColor, maxWidth, colorPlay, rewriteStyles, } = node.attrs;
         return `
         <fl-audio-player
         class="fl-audio-player"
@@ -45,6 +45,7 @@ const nodeMapping = {
         playBtnTextColor="${playBtnTextColor}"
         maxWidth="${maxWidth}"
         colorPlay="${colorPlay}"
+        rewriteStyles="${rewriteStyles}"
         >
         </fl-audio-player>
         `;