@flexiui/svelte-rich-text 0.0.34 → 0.0.36

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)",
@@ -280,8 +305,7 @@
   onMount(() => {
     editor = createEditor({
       extensions,
-      content:
-        '<h2 style="line-height: 1;"><span style="font-size: 22px;">Aquí tens algunes expressions bàsiques en català. Llegeix-les, escolta-les i repeteix-les.</span></h2><table class="fl-table-editable" style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th class="fl-cell-editable" colspan="1" rowspan="1"><p></p></th><th class="fl-cell-editable" colspan="1" rowspan="1"><p></p></th><th class="fl-cell-editable" colspan="1" rowspan="1"><p></p></th></tr><tr><td class="fl-cell-editable" colspan="1" rowspan="1"><p></p></td><td class="fl-cell-editable" colspan="1" rowspan="1"><p></p></td><td class="fl-cell-editable" colspan="1" rowspan="1"><p></p></td></tr><tr><td class="fl-cell-editable" colspan="1" rowspan="1"><p></p></td><td class="fl-cell-editable" colspan="1" rowspan="1"><p></p></td><td class="fl-cell-editable" colspan="1" rowspan="1"><p></p></td></tr></tbody></table><ul><li><p style="line-height: 1.5;">Hola!</p></li><li><p style="line-height: 1.5;">Com estàs?</p></li><li><p style="line-height: 1.5;">Com et dius?</p></li><li><p style="line-height: 1.5;">Com es diu agua en català?</p></li><li><p style="line-height: 1.5;">Què vol dir rentadora?</p></li><li><p style="line-height: 1.5;">Com s\'escriu bolígraf?</p></li><li><p style="line-height: 1.5;">Com es pronuncia aquesta paraula?</p></li><li><p style="line-height: 1.5;">M\'ho pots repetir, si us plau?</p></li><li><p style="line-height: 1.5;">A poc a poc, si us plau.</p></li><li><p style="line-height: 1.5;">Com?</p></li><li><p style="line-height: 1.5;">No t\'entenc.</p></li><li><p style="line-height: 1.5;">Gràcies.</p></li><li><p style="line-height: 1.5;">De res.</p></li><li><p style="line-height: 1.5;">Perdona.</p></li><li><p style="line-height: 1.5;">I tant!</p></li><li><p style="line-height: 1.5;">Edited</p></li></ul><pre><code>const name = "Alex";\nconsole.log(`Hello ${name}`)</code></pre><media-grid-component class="fl-media-grid" data-cols="3" data-gap="1.5rem" data-show-indicator="false" data-indicator-type="numeric"><div data-type="grid-item" class="fl-grid-item"><img src="https://img2.rtve.es/n/16848600?w=1600"></div><div data-type="grid-item" class="fl-grid-item"><img src="https://img2.rtve.es/n/16848600?w=1600"></div><div data-type="grid-item" class="fl-grid-item"><img src="https://img2.rtve.es/n/16848600?w=1600"></div></media-grid-component><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/audio-festa-major.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>- Hola! Com estàs?<br>- Molt bé, i tu?</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>- Com et dius?<br>- Em dic Sara, i tu?</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>Com es diu mesa en català?</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>Què vol dir rentadora?</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>Com s\'escriu &nbsp;bolígraf?</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>Com es pronuncia això?</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>- No t\'entenc. A poc a poc, si us plau.<br>- Ostres, perdona.</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>- Com? M\'ho pots repetir, si us plau?<br>- Sí, i tant!</p></blockquote><audio-player class="audio-player" src="https://pub-503cb197f1134814ac02f257b9cde1c1.r2.dev/uploads/dictat-buscar-habitatge.mp3" controls="true" data-color-play="#333" data-color-bar="#888" data-max-width="100%" data-id="fl-audio-4i336em9v43"></audio-player><blockquote><p>- Gràcies.<br>- De res!</p></blockquote>',
+      content,
       editorProps: {
         attributes: {
           class: "fl-rich-text-content-doc",
@@ -518,9 +542,6 @@
     }
   }
 
-  let fontSize = $state(16) as number;
-  let lineHeight = $state(null) as number;
-
   function decrementFontSize() {
     fontSize = fontSize - 1;
     $editor

package/dist/extensions/AudioPlayer.svelte

@@ -15,6 +15,7 @@
   export let playerType: "waveform" | "seekbar" = "waveform";
 
   let wavesurfer: WaveSurfer | null = null;
+  let waveformEl: HTMLDivElement | null = null;
   let wavesurferReady: boolean = false;
   let loading: boolean = true;
   let audio: any = null;
@@ -105,8 +106,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",
@@ -296,6 +301,7 @@
   <!-- <span class="media-item-number">{index+1}</span> -->
 
   <div
+    bind:this={waveformEl}
     class="audio-player-wave"
     id={"waveform-" + id}
     class:hidden={mounted && !wavesurferReady}

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,6 @@
+interface RenderOptions {
+    json: any;
+    customExtensions?: any[];
+}
+export declare function renderHTMLFromJSON({ json, customExtensions }: RenderOptions): string;
+export {};

package/dist/renderRichText.js

@@ -0,0 +1,53 @@
+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 `
+            <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 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>`;
+                }
+            }
+        }
+    });
+    return html;
+}

package/package.json

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