@flexiui/svelte-rich-text 0.0.33 → 0.0.34

package/dist/RichText.svelte

@@ -4,7 +4,7 @@
   import { TableKit } from "@tiptap/extension-table";
   import { CellSelection } from "prosemirror-tables";
 
-	import { NodeLineHeight } from './extensions/NodeLineHeight';
+  import { NodeLineHeight } from "./extensions/NodeLineHeight";
   import { MediaGridExtension } from "./extensions/MediaGrid/MediaGrid";
   import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
   import {
@@ -64,7 +64,7 @@
       docMarginInline?: string;
       docMarginBlock?: string;
       docRadius?: string;
-    }
+    };
   }
 
   let {
@@ -92,24 +92,24 @@
 
   let editor = $state() as Readable<Editor>;
   const defaultEditorConfig = {
-    editorBgColor: 'transparent',
-    editorRadius: '12px',
+    editorBgColor: "transparent",
+    editorRadius: "12px",
     toolbarStickyPosition: 0,
-    toolbarBgColor: '#242424',
+    toolbarBgColor: "#242424",
     toolbarZIndex: 10,
-    toolbarPadding: '8px',
-    toolbarGap: '5px',
-    docMaxWidth: '1024px',
-    docPadding: '2rem',
-    docBg: 'transparent',
-    docMarginInline: 'auto',
-    docMarginBlock: '2rem',
-    docRadius: '0',
+    toolbarPadding: "8px",
+    toolbarGap: "5px",
+    docMaxWidth: "1024px",
+    docPadding: "2rem",
+    docBg: "transparent",
+    docMarginInline: "auto",
+    docMarginBlock: "2rem",
+    docRadius: "0",
   };
 
   let editorConfig = $state({
     ...defaultEditorConfig,
-    ...(config ?? {})
+    ...(config ?? {}),
   });
 
   const extensions = [
@@ -280,61 +280,67 @@
   onMount(() => {
     editor = createEditor({
       extensions,
-      content,
+      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>',
       editorProps: {
         attributes: {
-          class: "fl-rich-text-content-eee",
+          class: "fl-rich-text-content-doc",
         },
         handleKeyDown: (view, event) => {
-  if (event.key === "Enter" && !event.ctrlKey) {
-    enterPressed = true;
-    
-    setTimeout(() => {
-      enterPressed = false;
-      const { from } = view.state.selection;
-      
-      // Obtener el nodo de ProseMirror en la posición actual
-      const pos = view.state.doc.resolve(from);
-      const nodeBefore = pos.node(pos.depth);
-      const parentNode = pos.node(pos.depth - 1);
-      
-      // console.log("Node type:", nodeBefore.type.name);
-      // console.log("Parent node type:", parentNode?.type.name);
-      
-      // Solo ejecutar si estamos en un párrafo Y el padre no es una lista
-      const isInList = parentNode?.type.name === "listItem" || 
-                       parentNode?.type.name === "bulletList" || 
-                       parentNode?.type.name === "orderedList";
-      
-      if (nodeBefore.type.name === "paragraph" && !isInList) {
-        const domAtPos = view.domAtPos(from);
-        let element = domAtPos.node;
-        
-        if (element.nodeType === Node.TEXT_NODE) {
-          element = element.parentElement;
-        }
-        
-        if (element instanceof HTMLElement) {
-          const computedSize = window.getComputedStyle(element).fontSize;
-          const computedLineHeight = window.getComputedStyle(element).lineHeight;
-          // console.log({ computedSize, computedLineHeight });
-
-          const lineHeightPx = parseFloat(computedLineHeight.replace("px", ""))
-          const fontSizePx = parseFloat(computedSize.replace("px", ""))
-
-          const lineHeightUnitless = lineHeightPx / fontSizePx;
-
-          // console.log(lineHeightUnitless.toFixed(2)); // ej: "x.xx"
-
-          fontSize = Math.round(Number(computedSize.replace("px", "")));
-          $editor.chain().focus().unsetFontSize().run();
-
-          $editor.chain().focus().unsetNodeLineHeight().run();
-        }
-      }
-    }, 200);
-  }
-},
+          if (event.key === "Enter" && !event.ctrlKey) {
+            enterPressed = true;
+
+            setTimeout(() => {
+              enterPressed = false;
+              const { from } = view.state.selection;
+
+              // Obtener el nodo de ProseMirror en la posición actual
+              const pos = view.state.doc.resolve(from);
+              const nodeBefore = pos.node(pos.depth);
+              const parentNode = pos.node(pos.depth - 1);
+
+              // console.log("Node type:", nodeBefore.type.name);
+              // console.log("Parent node type:", parentNode?.type.name);
+
+              // Solo ejecutar si estamos en un párrafo Y el padre no es una lista
+              const isInList =
+                parentNode?.type.name === "listItem" ||
+                parentNode?.type.name === "bulletList" ||
+                parentNode?.type.name === "orderedList";
+
+              if (nodeBefore.type.name === "paragraph" && !isInList) {
+                const domAtPos = view.domAtPos(from);
+                let element = domAtPos.node;
+
+                if (element.nodeType === Node.TEXT_NODE) {
+                  element = element.parentElement;
+                }
+
+                if (element instanceof HTMLElement) {
+                  const computedSize =
+                    window.getComputedStyle(element).fontSize;
+                  const computedLineHeight =
+                    window.getComputedStyle(element).lineHeight;
+                  // console.log({ computedSize, computedLineHeight });
+
+                  const lineHeightPx = parseFloat(
+                    computedLineHeight.replace("px", "")
+                  );
+                  const fontSizePx = parseFloat(computedSize.replace("px", ""));
+
+                  const lineHeightUnitless = lineHeightPx / fontSizePx;
+
+                  // console.log(lineHeightUnitless.toFixed(2)); // ej: "x.xx"
+
+                  fontSize = Math.round(Number(computedSize.replace("px", "")));
+                  $editor.chain().focus().unsetFontSize().run();
+
+                  $editor.chain().focus().unsetNodeLineHeight().run();
+                }
+              }
+            }, 200);
+          }
+        },
       },
       onTransaction: ({ editor, transaction }) => {
         editorEvents.onTransaction({ editor, transaction });
@@ -359,11 +365,12 @@
         // Obtener el font-size computado
         if (element instanceof HTMLElement) {
           const computedSize = window.getComputedStyle(element).fontSize;
-          const computedLineHeight = window.getComputedStyle(element).lineHeight;
+          const computedLineHeight =
+            window.getComputedStyle(element).lineHeight;
           // console.log("Get element font size:", computedSize);
           // console.log("Get element line height:", computedLineHeight);
-          const lineHeightPx = parseFloat(computedLineHeight.replace("px", ""))
-          const fontSizePx = parseFloat(computedSize.replace("px", ""))
+          const lineHeightPx = parseFloat(computedLineHeight.replace("px", ""));
+          const fontSizePx = parseFloat(computedSize.replace("px", ""));
           const lineHeightUnitless = lineHeightPx / fontSizePx;
 
           // console.log(lineHeightUnitless.toFixed(2)); // ej: "x.xx"
@@ -385,8 +392,6 @@
           } else {
             lineHeight = Number(lineHeightUnitless.toFixed(2));
           }
-
-
         }
       },
 
@@ -535,9 +540,7 @@
   }
 
   function handleRangeInput(e: any) {
-     
-    $editor.commands.setNodeLineHeight(lineHeight.toString())
-    
+    $editor.commands.setNodeLineHeight(lineHeight.toString());
   }
 
   function addAudio() {
@@ -547,38 +550,39 @@
       alert("Please enter a valid URL");
       return;
     }
-    
-    $editor.chain().focus().setAudio({ src, controls: true }).run()
-    
+
+    $editor.chain().focus().setAudio({ src, controls: true }).run();
   }
 
   function addImage() {
-    const previousSrc = $editor.getAttributes("image").src;  
+    const previousSrc = $editor.getAttributes("image").src;
     const src = window.prompt("Enter the URL of the image:", previousSrc);
 
     if (!src) {
       alert("Please enter a valid URL");
       return;
     }
-    
-    $editor.chain().focus().setImage({ src }).run()
-    
+
+    $editor.chain().focus().setImage({ src }).run();
   }
 
   function addMediaGrid() {
-
-    $editor.chain().focus().insertGrid({ cols: 2 }).run()
-    
+    $editor.chain().focus().insertGrid({ cols: 2 }).run();
   }
 
-  function addTable(){
-    $editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+  function addTable() {
+    $editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
   }
 </script>
 
-<div 
-class="fl-rich-text {className}" class:editable
-style="
+<div
+  class="fl-rich-text {className}"
+  class:editable
+  style="
   --fl-editor-radius: {editorConfig.editorRadius};
   --fl-editor-bg: {editorConfig.editorBgColor};
   --fl-toolbar-sticky-position: {editorConfig.toolbarStickyPosition}px;
@@ -594,7 +598,6 @@ style="
   --fl-doc-radius: {editorConfig.docRadius};
 "
 >
-
   {#if editor}
     <header class="fl-rich-text-toolbar">
       <!-- Undo/Redo -->
@@ -924,35 +927,80 @@ style="
       <!-- Font size editor -->
       <div role="group" class="fl-rich-text-toolbar-group">
         <div class="fl-font-size-editor">
-            <button
-              type="button"
-              aria-label="Decrease font size"
-              onclick={decrementFontSize}
-              class="fl-font-size-editor-button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /></svg>
-              </button
+          <button
+            type="button"
+            aria-label="Decrease font size"
+            onclick={decrementFontSize}
+            class="fl-font-size-editor-button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-minus"
+              ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+                d="M5 12l14 0"
+              /></svg
             >
-            <input type="text" bind:value={fontSize} />
-            <button
-              type="button"
-              aria-label="Increase font size"
-              onclick={incrementFontSize}
-              class="fl-font-size-editor-button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
-              </button
+          </button>
+          <input type="text" bind:value={fontSize} />
+          <button
+            type="button"
+            aria-label="Increase font size"
+            onclick={incrementFontSize}
+            class="fl-font-size-editor-button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-plus"
+              ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+                d="M12 5l0 14"
+              /><path d="M5 12l14 0" /></svg
             >
+          </button>
         </div>
       </div>
 
       <!-- Line height -->
       <div role="group" class="fl-rich-text-toolbar-group">
-        <button 
-        class="fl-font-size-button" 
-        aria-label="Line height" 
-        type="button"
-        onclick={(e) => toogleDropdown(e.currentTarget, "line-height-dropdown")}
+        <button
+          class="fl-font-size-button"
+          aria-label="Line height"
+          type="button"
+          onclick={(e) =>
+            toogleDropdown(e.currentTarget, "line-height-dropdown")}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 8l3 -3l3 3" /><path d="M3 16l3 3l3 -3" /><path d="M6 5l0 14" /><path d="M13 6l7 0" /><path d="M13 12l7 0" /><path d="M13 18l7 0" /></svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"
+            ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+              d="M3 8l3 -3l3 3"
+            /><path d="M3 16l3 3l3 -3" /><path d="M6 5l0 14" /><path
+              d="M13 6l7 0"
+            /><path d="M13 12l7 0" /><path d="M13 18l7 0" /></svg
+          >
 
           <svg
             class="toogle-dropdown-button-icon"
@@ -1277,7 +1325,17 @@ style="
           aria-label="Image"
           class:is-active={$editor.isActive("image")}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z" /></svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="icon icon-tabler icons-tabler-filled icon-tabler-photo"
+            ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+              d="M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
+            /></svg
+          >
         </button>
         <!-- Audio -->
         <button
@@ -1286,7 +1344,7 @@ style="
           aria-label="Audio"
           class:is-active={$editor.isActive("audio")}
         >
-        Audio
+          Audio
         </button>
       </div>
 
@@ -1299,7 +1357,23 @@ style="
           aria-label="Media grid"
           class:is-active={$editor.isActive("MediaGridComponent")}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-layout-grid"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /><path d="M19 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /><path d="M9 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /><path d="M19 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z" /></svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="icon icon-tabler icons-tabler-filled icon-tabler-layout-grid"
+            ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+              d="M9 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+            /><path
+              d="M19 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+            /><path
+              d="M9 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+            /><path
+              d="M19 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+            /></svg
+          >
         </button>
         <!-- Table -->
         <button
@@ -1308,7 +1382,21 @@ style="
           aria-label="Table"
           class:is-active={$editor.isActive("table")}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-table"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14" /><path d="M3 10h18" /><path d="M10 3v18" /></svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="icon icon-tabler icons-tabler-outline icon-tabler-table"
+            ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+              d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14"
+            /><path d="M3 10h18" /><path d="M10 3v18" /></svg
+          >
         </button>
       </div>
 
@@ -1959,12 +2047,18 @@ style="
       {/if}
     </div>
   {:else if activeDropdownType === "line-height-dropdown"}
-   <div class="fl-range-element">
-     <span class="fl-range-element-value">
-       {lineHeight.toFixed(2)}
-     </span>
-     <input oninput={handleRangeInput} type="range" min="0.5" max="4" step="0.05" bind:value={lineHeight}>
-   </div>
-   
+    <div class="fl-range-element">
+      <span class="fl-range-element-value">
+        {lineHeight.toFixed(2)}
+      </span>
+      <input
+        oninput={handleRangeInput}
+        type="range"
+        min="0.5"
+        max="4"
+        step="0.05"
+        bind:value={lineHeight}
+      />
+    </div>
   {/if}
 </div>

package/dist/extensions/MediaGrid/MediaGrid.d.ts

@@ -1,2 +1,19 @@
 import { Node } from '@tiptap/core';
+interface InsertGridOptions {
+    cols?: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        MediaGridComponent: {
+            /**
+             * Añade un elemento de audio personalizado
+             * @example
+             * editor.commands.setAudio({ src: '/audio.mp3', controls: true })
+             */
+            insertGrid: (options?: InsertGridOptions) => ReturnType;
+            addGridItem: () => ReturnType;
+        };
+    }
+}
 export declare const MediaGridExtension: Node<any, any>;
+export {};

package/dist/extensions/MediaGrid/MediaGrid.js

@@ -19,43 +19,43 @@ export const MediaGridExtension = Node.create({
             },
             cols: {
                 default: 2,
-                parseHTML: element => parseInt(element.getAttribute('data-cols') || '2', 10),
+                parseHTML: element => {
+                    return element.dataset.cols;
+                },
                 renderHTML: attrs => ({ 'data-cols': attrs.cols }),
             },
             gap: {
                 default: '1rem',
-                parseHTML: element => element.getAttribute('data-gap') || '1rem',
+                parseHTML: element => element.dataset.gap,
                 renderHTML: attrs => ({ 'data-gap': attrs.gap }),
             },
             showIndicator: {
                 default: false,
-                parseHTML: element => element.getAttribute('data-show-indicator') || false,
+                parseHTML: element => element.dataset.showIndicator,
                 renderHTML: attrs => ({ 'data-show-indicator': attrs.showIndicator }),
             },
             indicatorType: {
                 default: 'numeric', // 'numeric' | 'alphabetic'
-                parseHTML: element => element.getAttribute('data-indicator-type') || 'numeric',
+                parseHTML: element => element.dataset.indicatorType,
                 renderHTML: attrs => ({ 'data-indicator-type': attrs.indicatorType }),
             }
         };
     },
     parseHTML() {
-        return [{ tag: 'media-grid-component' }];
+        return [
+            {
+                tag: 'media-grid-component',
+            }
+        ];
     },
     renderHTML({ HTMLAttributes }) {
-        return ['div', mergeAttributes(HTMLAttributes), 0];
+        return ['media-grid-component', mergeAttributes(HTMLAttributes), 0];
     },
     addCommands() {
         return {
             insertGrid: (options) => ({ tr, state, dispatch }) => {
                 const { schema } = state;
                 const cols = options?.cols || 2;
-                // const items = Array.from({ length: cols }, () =>
-                //   schema.nodes.gridItem.create(
-                //     null,
-                //     schema.nodes.image.create({ src: 'https://placehold.co/800x400' })
-                //   )
-                // )
                 const items = Array.from({ length: cols }, () => schema.nodes.gridItem.create() // 👈 sin contenido
                 );
                 const grid = this.type.create({ cols }, items);

package/dist/extensions/MediaGrid/MediaGrid.svelte

@@ -5,6 +5,7 @@
 
   const { node, updateAttributes, selected, getPos, editor }: NodeViewProps = $props();
 
+  console.log(node);
   let cols = $state(node.attrs.cols || 2);
   let gap = $state(node.attrs.gap || 1);
   let showIndicator = $state(node.attrs.showIndicator || false);
@@ -101,7 +102,7 @@
             oninput={handleShowIndicatorChange}
             type="checkbox"
             id="show-indicator"
-            value={showIndicator}
+            checked={showIndicator}
           />
           Show indicators
         </label>

package/dist/styles.css

@@ -264,14 +264,18 @@
   flex-direction: column;
   text-align: left;
   min-height: 56px;
-  border-radius: var(--fl-doc-radius, 12px);
   box-sizing: border-box;
-  max-width: var(--fl-doc-max-width, 1024px);
+  width: 100%;
+}
+
+.fl-rich-text-content-doc {
   padding: var(--fl-doc-padding, 2rem);
   background: var(--fl-doc-bg, transparent);
+  border-radius: var(--fl-doc-radius, 12px);
+  width: 100%;
+  max-width: var(--fl-doc-max-width, 1024px);
   margin-inline: var(--fl-doc-margin-inline, auto);
   margin-block: var(--fl-doc-margin-block, 2rem);
-
 }
 
 .fl-toolbar-dropdown-panel {
@@ -588,8 +592,8 @@
     position: absolute;
     left: 10px;
     top: 10px;
-    width: 24px;
-    height: 24px;
+    width: 26px;
+    height: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -597,7 +601,10 @@
     border-radius: 100%;
     color: #fff;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 16px;
+    text-align: center;
+    font-family: monospace;
+    text-transform: uppercase;
   }
 }
 

package/package.json

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