@flexiui/svelte-rich-text 0.0.32 → 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 {
@@ -50,6 +50,21 @@
       onSelectionUpdate?: (params: any) => void;
       onPaste?: (params: any) => void;
     };
+    config?: {
+      editorBgColor?: string;
+      editorRadius?: string;
+      toolbarStickyPosition?: number;
+      toolbarZIndex?: number;
+      toolbarBgColor?: string;
+      toolbarPadding?: string;
+      toolbarGap?: string;
+      docMaxWidth?: string;
+      docPadding?: string;
+      docBg?: string;
+      docMarginInline?: string;
+      docMarginBlock?: string;
+      docRadius?: string;
+    };
   }
 
   let {
@@ -72,9 +87,30 @@
       onSelectionUpdate: () => {},
       onPaste: () => {},
     },
+    config,
   }: Props = $props();
 
   let editor = $state() as Readable<Editor>;
+  const defaultEditorConfig = {
+    editorBgColor: "transparent",
+    editorRadius: "12px",
+    toolbarStickyPosition: 0,
+    toolbarBgColor: "#242424",
+    toolbarZIndex: 10,
+    toolbarPadding: "8px",
+    toolbarGap: "5px",
+    docMaxWidth: "1024px",
+    docPadding: "2rem",
+    docBg: "transparent",
+    docMarginInline: "auto",
+    docMarginBlock: "2rem",
+    docRadius: "0",
+  };
+
+  let editorConfig = $state({
+    ...defaultEditorConfig,
+    ...(config ?? {}),
+  });
 
   const extensions = [
     // Color.configure({ types: [TextStyle.name, ListItem.name] }),
@@ -244,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 });
@@ -323,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"
@@ -349,8 +392,6 @@
           } else {
             lineHeight = Number(lineHeightUnitless.toFixed(2));
           }
-
-
         }
       },
 
@@ -499,9 +540,7 @@
   }
 
   function handleRangeInput(e: any) {
-     
-    $editor.commands.setNodeLineHeight(lineHeight.toString())
-    
+    $editor.commands.setNodeLineHeight(lineHeight.toString());
   }
 
   function addAudio() {
@@ -511,37 +550,54 @@
       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>
-
+<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;
+  --fl-toolbar-z-index: {editorConfig.toolbarZIndex};
+  --fl-toolbar-padding: {editorConfig.toolbarPadding};
+  --fl-toolbar-gap: {editorConfig.toolbarGap};
+  --fl-toolbar-bg: {editorConfig.toolbarBgColor};
+  --fl-doc-max-width: {editorConfig.docMaxWidth};
+  --fl-doc-padding: {editorConfig.docPadding};
+  --fl-doc-bg: {editorConfig.docBg};
+  --fl-doc-margin-inline: {editorConfig.docMarginInline};
+  --fl-doc-margin-block: {editorConfig.docMarginBlock};
+  --fl-doc-radius: {editorConfig.docRadius};
+"
+>
   {#if editor}
     <header class="fl-rich-text-toolbar">
       <!-- Undo/Redo -->
@@ -871,35 +927,80 @@
       <!-- 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"
@@ -1224,7 +1325,17 @@
           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
@@ -1233,7 +1344,7 @@
           aria-label="Audio"
           class:is-active={$editor.isActive("audio")}
         >
-        Audio
+          Audio
         </button>
       </div>
 
@@ -1246,7 +1357,23 @@
           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
@@ -1255,7 +1382,21 @@
           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>
 
@@ -1906,12 +2047,18 @@
       {/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

@@ -6,9 +6,21 @@
     --gray-1: #f0f0f0;
     --gray-2: #e0e0e0;
     --gray-3: #c0c0c0;
-    --toolbar-gap: 5px;
-    --toolbar-padding: 6px;
+
     --fl-editor-radius: 12px;
+    --fl-editor-bg: #242424;
+    --fl-toolbar-sticky-position: 0;
+    --fl-toolbar-z-index: 10;
+    --fl-toolbar-padding: 6px;
+    --fl-toolbar-gap: 5px;
+    --fl-toolbar-bg: #242424;
+
+    --fl-doc-max-width: 1024px;
+    --fl-doc-padding: 2rem;
+    --fl-doc-bg: transparent;
+    --fl-doc-margin-inline: auto;
+    --fl-doc-margin-block: 2rem;
+    --fl-doc-radius: 0;
 }
 
 /* Basic editor styles */
@@ -252,9 +264,18 @@
   flex-direction: column;
   text-align: left;
   min-height: 56px;
-  padding: 2rem;
-  background: #242424;
-  border-radius: 0 0 var(--fl-editor-radius) var(--fl-editor-radius);
+  box-sizing: border-box;
+  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 {
@@ -265,7 +286,7 @@
   backdrop-filter: blur(42px);
   border-radius: 14px;
   min-width: auto;
-  z-index: 10;
+  z-index: 1000;
   box-sizing: border-box;
 
   &.fl-toolbar-dropdown-panel--table {
@@ -296,7 +317,7 @@
     width: 100%;
     height: 100%;
     min-height: 56px;
-    background-color: var(--fl-bg-color, #242424);
+    background-color: var(--fl-editor-bg, #242424);
     color: var(--text-color);
     box-sizing: border-box;
     border-radius: var(--fl-editor-radius);
@@ -307,10 +328,10 @@
     flex-wrap: nowrap;
     overflow: auto;
     align-items: center;
-    gap: var(--toolbar-gap);
-    padding: var(--toolbar-padding);
+    gap: var(--fl-toolbar-gap);
+    padding: var(--fl-toolbar-padding);
     position: sticky;
-    top: var(--sticky-position, 0);
+    top: var(--fl-toolbar-sticky-position, 0);
     z-index: var(--fl-toolbar-z-index, 10);
     background: var(--fl-toolbar-bg, #242424);
     border-radius: var(--fl-editor-radius);
@@ -319,7 +340,7 @@
   .fl-rich-text-toolbar-group {
     display: flex;
     flex-wrap: nowrap;
-    gap: var(--toolbar-gap);
+    gap: var(--fl-toolbar-gap);
 
     button {
       padding: 8px 8px;
@@ -374,7 +395,7 @@
     font-weight: 500;
     border: none;
     padding: 0px;
-    font-size: 12px;
+    font-size: 11px;
     border-radius: 3px;
     outline: 1px dashed #818181;
     scale: 1.1;
@@ -571,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;
@@ -580,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.32",
+  "version": "0.0.34",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",