@flexiui/svelte-rich-text 0.0.35 → 0.0.37

package/dist/RichText.svelte

@@ -1,12 +1,4 @@
 <script lang="ts">
-  import { CustomTableHeader } from "./extensions/Table/CustomTableHeader";
-  import { CustomTableCell } from "./extensions/Table/CustomTableCell";
-  import { TableKit } from "@tiptap/extension-table";
-  import { CellSelection } from "prosemirror-tables";
-
-  import { NodeLineHeight } from "./extensions/NodeLineHeight";
-  import { MediaGridExtension } from "./extensions/MediaGrid/MediaGrid";
-  import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
   import {
     Mathematics,
     migrateMathStrings,
@@ -20,15 +12,8 @@
 
   import { createEditor, Editor, EditorContent } from "svelte-tiptap";
 
-  import StarterKit from "@tiptap/starter-kit";
-  import Highlight from "@tiptap/extension-highlight";
-  import TextAlign from "@tiptap/extension-text-align";
-  import Image from "@tiptap/extension-image";
-  import { Audio } from "./extensions/Audio";
-  import { ListKit } from "@tiptap/extension-list";
-  import { TextStyleKit } from "@tiptap/extension-text-style";
-  import { EnhancedLink } from "./extensions/EnhancedLink";
   import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
+  import { getRichTextExtensions } from "./getExtensions";
 
   declare interface Props {
     id?: string;
@@ -112,85 +97,123 @@
     ...(config ?? {}),
   });
 
-  const extensions = [
-    // Color.configure({ types: [TextStyle.name, ListItem.name] }),
-    Highlight.configure({ multicolor: true }),
-    TextStyleKit,
-    StarterKit.configure({
-      // Disable an included extension
-      trailingNode: false,
-      link: false,
-      bulletList: false,
-      listItem: false,
-      orderedList: false,
-      listKeymap: false,
-    }),
-    EnhancedLink,
-    Audio.configure({
-      HTMLAttributes: { class: "audio-player" },
-    }),
-    Image.configure({
-      inline: true,
-    }),
-    ListKit,
-    TextAlign.configure({
-      types: [
-        "heading",
-        "paragraph",
-        "bulletList",
-        "taskList",
-        "listItem",
-        "blockquote",
-      ],
-    }),
-    Mathematics.configure({
-      inlineOptions: {
-        onClick: (node, pos) => {
-          // you can do anything on click, e.g. open a dialog to edit the math node
-          // or just a prompt to edit the LaTeX code for a quick prototype
-          const katex = prompt(
-            "Update math LaTeX expression:",
-            node.attrs.latex
-          );
-          if (katex) {
-            $editor
-              .chain()
-              .setNodeSelection(pos)
-              .updateInlineMath({ latex: katex })
-              .focus()
-              .run();
-          }
+  // const extensions = [
+  //   // Color.configure({ types: [TextStyle.name, ListItem.name] }),
+  //   Highlight.configure({ multicolor: true }),
+  //   TextStyleKit,
+  //   StarterKit.configure({
+  //     // Disable an included extension
+  //     trailingNode: false,
+  //     link: false,
+  //     bulletList: false,
+  //     listItem: false,
+  //     orderedList: false,
+  //     listKeymap: false,
+  //   }),
+  //   EnhancedLink,
+  //   Audio.configure({
+  //     HTMLAttributes: { class: "audio-player" },
+  //   }),
+  //   Image.configure({
+  //     inline: true,
+  //   }),
+  //   ListKit,
+  //   TextAlign.configure({
+  //     types: [
+  //       "heading",
+  //       "paragraph",
+  //       "bulletList",
+  //       "taskList",
+  //       "listItem",
+  //       "blockquote",
+  //     ],
+  //   }),
+  //   Mathematics.configure({
+  //     inlineOptions: {
+  //       onClick: (node, pos) => {
+  //         // you can do anything on click, e.g. open a dialog to edit the math node
+  //         // or just a prompt to edit the LaTeX code for a quick prototype
+  //         const katex = prompt(
+  //           "Update math LaTeX expression:",
+  //           node.attrs.latex
+  //         );
+  //         if (katex) {
+  //           $editor
+  //             .chain()
+  //             .setNodeSelection(pos)
+  //             .updateInlineMath({ latex: katex })
+  //             .focus()
+  //             .run();
+  //         }
+  //       },
+  //     },
+  //     blockOptions: {
+  //       // optional options for the block math node
+  //     },
+  //     katexOptions: {
+  //       displayMode: false,
+  //       throwOnError: false,
+  //       macros: {
+  //         "\\RR": "\\mathbb{R}",
+  //         "\\ZZ": "\\mathbb{Z}",
+  //       },
+  //     },
+  //   }),
+  //   NodeLineHeight,
+  //   MediaGridExtension,
+  //   MediaGridItemExtension,
+  //   TableKit.configure({
+  //     table: {
+  //       HTMLAttributes: { class: "fl-table-editable" },
+  //       resizable: true,
+  //     },
+  //   }),
+  //   CustomTableCell.configure({
+  //     HTMLAttributes: { class: "fl-cell-editable" },
+  //   }),
+  //   CustomTableHeader.configure({
+  //     HTMLAttributes: { class: "fl-cell-editable" },
+  //   }),
+  //   ...customExtensions,
+  // ];
+  
+  const extensions = getRichTextExtensions({
+    editable: true, 
+    customExtensions: [
+      ...customExtensions, 
+      Mathematics.configure({
+        inlineOptions: {
+          onClick: (node, pos) => {
+            // you can do anything on click, e.g. open a dialog to edit the math node
+            // or just a prompt to edit the LaTeX code for a quick prototype
+            const katex = prompt(
+              "Update math LaTeX expression:",
+              node.attrs.latex
+            );
+            if (katex) {
+              $editor
+                .chain()
+                .setNodeSelection(pos)
+                .updateInlineMath({ latex: katex })
+                .focus()
+                .run();
+            }
+          },
         },
-      },
-      blockOptions: {
-        // optional options for the block math node
-      },
-      katexOptions: {
-        displayMode: false,
-        throwOnError: false,
-        macros: {
-          "\\RR": "\\mathbb{R}",
-          "\\ZZ": "\\mathbb{Z}",
+        blockOptions: {
+          // optional options for the block math node
         },
-      },
-    }),
-    NodeLineHeight,
-    MediaGridExtension,
-    MediaGridItemExtension,
-    TableKit.configure({
-      table: {
-        HTMLAttributes: { class: "fl-table-editable" },
-        resizable: true,
-      },
-    }),
-    CustomTableCell.configure({
-      HTMLAttributes: { class: "fl-cell-editable" },
-    }),
-    CustomTableHeader.configure({
-      HTMLAttributes: { class: "fl-cell-editable" },
-    }),
-    ...customExtensions,
-  ];
+        katexOptions: {
+          displayMode: false,
+          throwOnError: false,
+          macros: {
+            "\\RR": "\\mathbb{R}",
+            "\\ZZ": "\\mathbb{Z}",
+          },
+        },
+      })
+    ]
+  });
 
   let tooltipVisible = $state(false);
   let tooltipX = $state(0);
@@ -200,6 +223,8 @@
   let currentTriggerEl: HTMLElement | null = null;
   let activeDropdownType = $state(null);
   let enterPressed = $state(false);
+  let fontSize = $state(16) as number;
+  let lineHeight = $state(null) as number;
 
   const TEXT_COLOR_PALETTE = [
     "rgb(94, 23, 235)",
@@ -517,9 +542,6 @@
     }
   }
 
-  let fontSize = $state(16) as number;
-  let lineHeight = $state(null) as number;
-
   function decrementFontSize() {
     fontSize = fontSize - 1;
     $editor

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,17 +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;
@@ -30,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";
 
@@ -105,8 +117,12 @@
     if (WaveSurfer) {
         
         setTimeout(() => {
+          const identifier = "waveform-" + id;
+          console.log({ identifier });
+          console.log({ waveformEl });
+
           wavesurfer = WaveSurfer?.create({
-            container: "#waveform-" + id,
+            container: waveformEl,
             height: 46,
             normalize: false,
             waveColor: "#b0b0b0",
@@ -147,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;
@@ -168,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);
@@ -257,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"
@@ -296,6 +337,7 @@
   <!-- <span class="media-item-number">{index+1}</span> -->
 
   <div
+    bind:this={waveformEl}
     class="audio-player-wave"
     id={"waveform-" + id}
     class:hidden={mounted && !wavesurferReady}
@@ -435,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>
@@ -450,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;
@@ -466,6 +510,7 @@
     padding: 12px;
     width: 100%;
     box-sizing: border-box;
+    color: var(--player-text-color);
 
     &.playing {
       .audio-player-wave {
@@ -490,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;
@@ -581,7 +636,7 @@
     margin-right: 4px;
 
     &:hover {
-      background: #0d121612;
+      background: #7a7a7a17;
     }
 
     &:hover .audio-player-seekbar,
@@ -615,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/getExtensions.d.ts

@@ -0,0 +1,4 @@
+export declare function getRichTextExtensions(options?: {
+    editable?: boolean;
+    customExtensions?: any[];
+}): any[];

package/dist/getExtensions.js

@@ -0,0 +1,66 @@
+// getExtensions.ts
+import StarterKit from "@tiptap/starter-kit";
+import Highlight from "@tiptap/extension-highlight";
+import TextAlign from "@tiptap/extension-text-align";
+import Image from "@tiptap/extension-image";
+import { ListKit } from "@tiptap/extension-list";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import { Mathematics } from "@tiptap/extension-mathematics";
+import { TableKit } from "@tiptap/extension-table";
+import { Audio } from "./extensions/Audio";
+import { NodeLineHeight } from "./extensions/NodeLineHeight";
+import { MediaGridExtension } from "./extensions/MediaGrid/MediaGrid";
+import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
+import { CustomTableCell } from "./extensions/Table/CustomTableCell";
+import { CustomTableHeader } from "./extensions/Table/CustomTableHeader";
+import { EnhancedLink } from "./extensions/EnhancedLink";
+export function getRichTextExtensions(options) {
+    const { editable = false, customExtensions = [] } = options ?? {};
+    return [
+        Highlight.configure({ multicolor: true }),
+        TextStyleKit,
+        StarterKit.configure({
+            trailingNode: false,
+            link: false,
+            bulletList: false,
+            listItem: false,
+            orderedList: false,
+            listKeymap: false,
+        }),
+        EnhancedLink,
+        Image.configure({ inline: true }),
+        Audio.configure({
+            HTMLAttributes: { class: "audio-player" },
+        }),
+        ListKit,
+        TextAlign.configure({
+            types: [
+                "heading",
+                "paragraph",
+                "bulletList",
+                "taskList",
+                "listItem",
+                "blockquote",
+            ],
+        }),
+        NodeLineHeight,
+        MediaGridExtension,
+        MediaGridItemExtension,
+        TableKit.configure({
+            table: {
+                HTMLAttributes: { class: "fl-table-editable" },
+                resizable: true,
+            },
+            tableCell: false,
+            tableHeader: false,
+        }),
+        CustomTableCell.configure({
+            HTMLAttributes: { class: "fl-cell-editable" },
+        }),
+        CustomTableHeader.configure({
+            HTMLAttributes: { class: "fl-cell-editable" },
+        }),
+        !editable ? Mathematics : null,
+        ...customExtensions,
+    ];
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import RichText from './RichText.svelte';
-export { RichText };
+import { renderHTMLFromJSON } from './renderRichText';
+export { RichText, renderHTMLFromJSON };

package/dist/index.js

@@ -1,2 +1,3 @@
 import RichText from './RichText.svelte';
-export { RichText };
+import { renderHTMLFromJSON } from './renderRichText';
+export { RichText, renderHTMLFromJSON };

package/dist/renderRichText.d.ts

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

package/dist/renderRichText.js

@@ -0,0 +1,65 @@
+import { renderToHTMLString, serializeChildrenToHTMLString } from "@tiptap/static-renderer";
+import katex from "katex";
+import { getRichTextExtensions } from "./getExtensions";
+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}"
+            data-gap="${gap}"
+            data-show-indicator="${showIndicator}"
+            data-indicator-type="${indicatorType}"
+            style="
+              --fl-grid-cols: ${cols};
+              --fl-grid-gap: ${gap};
+            ">
+              ${serializeChildrenToHTMLString(children)}
+            </div>`;
+    },
+    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.35",
+  "version": "0.0.37",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",