@flexiui/svelte-rich-text 0.0.57 → 0.0.59

package/dist/RichText.svelte

@@ -27,6 +27,7 @@
     className?: string;
     editable?: boolean;
     content?: string | {type: string, content: any[]} | null;
+    nodesLimit?: number;
     customExtensions?: any[];
     editorEvents?: {
       onTransaction?: (params: any) => void;
@@ -70,6 +71,7 @@
     className,
     editable,
     content,
+    nodesLimit,
     customExtensions = [],
     editorEvents = {
       onTransaction: () => {},
@@ -172,6 +174,8 @@
   let enterPressed = $state(false);
   let fontSize = $state(16) as number;
   let lineHeight = $state(null) as number;
+  let currentNodeCount = $state(0);
+  let showLimitWarning = $state(false);
 
   const TEXT_COLOR_PALETTE = [
     editorConfig.editorAccentColor,
@@ -253,6 +257,25 @@
   const isCellSelection = () =>
     $editor && $editor.state.selection instanceof CellSelection;
 
+  // función para contar nodos en el documento
+  function countNodes(doc: any): number {
+    // Solo contar los nodos de primer nivel (hijos directos del doc)
+    console.log(doc);
+    if (doc.type === 'doc' && doc.content) {
+      return doc.content.length;
+    }
+    return 0;
+  }
+
+  // función para actualizar el contador de nodos
+  function updateNodeCount() {
+    if ($editor) {
+
+      currentNodeCount = countNodes($editor.getJSON());
+      
+    }
+  }
+
   onMount(() => {
     editor = createEditor({
       extensions,
@@ -263,8 +286,27 @@
         },
         handleKeyDown: (view, event) => {
           if (event.key === "Enter" && !event.ctrlKey) {
+            // Verificar si hay límite de nodos y si se ha alcanzado
             enterPressed = true;
 
+            if (nodesLimit) {
+              const currentCount = currentNodeCount;
+              if (currentCount >= nodesLimit) {
+
+                if(!showLimitWarning){
+                  showLimitWarning = true;
+                  setTimeout(() => {
+                    showLimitWarning = false;
+                  }, 3000);
+                }
+
+                event.preventDefault();
+                event.stopPropagation();
+                return true;
+
+              }
+            }
+
             setTimeout(() => {
               enterPressed = false;
               const { from } = view.state.selection;
@@ -318,14 +360,18 @@
         },
       },
       onTransaction: ({ editor, transaction }) => {
-        editorEvents.onTransaction({ editor, transaction });
-        editor = editor;
+
+        // Actualizar contador de nodos
+
+        updateNodeCount();
 
         if (enterPressed) {
-          // console.log("Enter pressed");
           return;
         }
 
+        editorEvents.onTransaction({ editor, transaction });
+        editor = editor;
+
         const { from } = editor.state.selection;
 
         // Obtener el elemento DOM
@@ -377,6 +423,8 @@
       onCreate: ({ editor }) => {
         editorEvents.onCreate({ editor });
         migrateMathStrings(editor);
+        
+        updateNodeCount();
       },
 
       onUpdate: ({ editor }) => {
@@ -461,7 +509,7 @@
         });
       }, 100);
     } catch (e) {
-      console.log(e.message);
+      // console.log(e.message);
     }
   }
 
@@ -1510,6 +1558,22 @@
   {/if}
 
   <EditorContent editor={$editor} class="fl-rich-text-content" />
+
+  <!-- Bottom bar showing node count -->
+  {#if nodesLimit}
+    <div class="fl-node-count-bar">
+      <span class="fl-node-count-text">
+        <strong>Límite:</strong> {currentNodeCount} de {nodesLimit} nodos
+      </span>
+      <div class="fl-node-count-progress">
+        <div 
+          class="fl-node-count-progress-bar" 
+          style="width: {Math.min((currentNodeCount / nodesLimit) * 100, 100)}%"
+        ></div>
+      </div>
+    </div>
+  {/if}
+
 </div>
 
 <div
@@ -2107,9 +2171,9 @@
 
         // ⛔️ Ocultar si hay flag de selección completa por fila/columna
         if (isRow || isColumn) {
-          console.log(
-            "Ocultar si hay flag de selección completa por fila/columna"
-          );
+          // console.log(
+          //   "Ocultar si hay flag de selección completa por fila/columna"
+          // );
           return false;
         }
 
@@ -2793,9 +2857,21 @@
   </div>
 {/if}
 
+<!-- Warning message for node limit -->
+{#if showLimitWarning && nodesLimit}
+  <div class="fl-node-limit-warning">
+    No se pueden añadir más elementos. Límite alcanzado: {nodesLimit} elementos.
+  </div>
+{/if}
 
 <style>
   .hidden {
     display: none;
   }
+
+  .fl-node-count-text {
+    strong {
+      margin-right: 4px;
+    }
+  }
 </style>

package/dist/RichText.svelte.d.ts

@@ -9,6 +9,7 @@ export interface Props {
         type: string;
         content: any[];
     } | null;
+    nodesLimit?: number;
     customExtensions?: any[];
     editorEvents?: {
         onTransaction?: (params: any) => void;

package/dist/extensions/AudioPlayer.svelte

@@ -46,7 +46,7 @@
   id = id + "-" + Math.random().toString(36).substring(2, 15);
 
   audioAttributes.subscribe((value) => {
-    console.log({ value });
+    // console.log({ value });
   });
 
   // audioAttributes.set({
@@ -73,7 +73,7 @@
 
   function togglePlayPause() {
     playing = !playing;
-    console.log({ playing });
+    // console.log({ playing });
 
     if (playing) {
       activeAudioId.set(id);
@@ -130,15 +130,15 @@
         wavesurfer?.pause();
       }
     });
-    console.log({ src });
-    console.log({ WaveSurfer });
+    // console.log({ src });
+    // console.log({ WaveSurfer });
 
     if (WaveSurfer) {
         
         setTimeout(() => {
           const identifier = "waveform-" + id;
-          console.log({ identifier });
-          console.log({ waveformEl });
+          // console.log({ identifier });
+          // console.log({ waveformEl });
 
           wavesurfer = WaveSurfer?.create({
             container: waveformEl,
@@ -193,7 +193,7 @@
 
     audio.onended = () => {
       playing = false;
-      console.log("Audio playback ended");
+      // console.log("Audio playback ended");
     };
 
     audio.addEventListener("timeupdate", () => {
@@ -205,7 +205,7 @@
 
     audio.onended = () => {
       playing = false;
-      console.log("Audio playback ended");
+      // console.log("Audio playback ended");
     };
 
     audio.addEventListener("play", () => {

package/dist/extensions/MediaGrid/MediaGrid.svelte

@@ -5,7 +5,7 @@
 
   const { node, updateAttributes, selected, getPos, editor }: NodeViewProps = $props();
 
-  console.log(node);
+  // console.log(node);
   let cols = $state(node.attrs.cols || 2);
   let gap = $state(node.attrs.gap || 1);
   let showIndicator = $state(node.attrs.showIndicator || false);

package/dist/extensions/MediaGrid/MediaGridItem.svelte

@@ -119,10 +119,10 @@
   }
 
   async function handleDragOver(e: any) {
-    console.log(e);
+    // console.log(e);
     dragging = true;
     e.preventDefault();
-    console.log("Drag over");
+    // console.log("Drag over");
   }
 
   async function handleDrop(e: DragEvent) {
@@ -140,18 +140,18 @@
       );
 
       if (files.length > 0) {
-        console.log("Dropped local files:", files);
+        // console.log("Dropped local files:", files);
         await uploadFiles(files);
       }
     } else {
       dragging = false;
-      console.log("Dropped external content:", types);
+      // console.log("Dropped external content:", types);
 
       // puede ser desde navegador (ejemplo: arrastrar imagen desde otra pestaña)
       if (types.includes("text/uri-list")) {
         const url = e.dataTransfer?.getData("text/uri-list");
         if (url) {
-          console.log("Dropped image URL:", url);
+          // console.log("Dropped image URL:", url);
           insertImage(url);
         }
       }
@@ -159,19 +159,19 @@
   }
 
   function handleDragEnter(e: any) {
-    console.log("Drag enter");
+    // console.log("Drag enter");
     dragging = true;
   }
 
   function handleDragLeave(e: any) {
-    console.log("Drag leave");
+    // console.log("Drag leave");
     dragging = false;
   }
 
   function handleFileChange(e: any) {
-    console.log("File change");
+    // console.log("File change");
     const files = [...e.target.files];
-    console.log(files);
+    // console.log(files);
 
     uploadFiles(files);
   }
@@ -200,7 +200,7 @@
       // console.log({ errorMessage: docs.message });
 
       if (json.error === "Token expired") {
-        console.log("Token expired: MediaModal.svelte");
+        // console.log("Token expired: MediaModal.svelte");
         // return Astro.redirect('/admin/logout');
         const refreshTokenData = await refreshUserToken(refreshToken);
 
@@ -217,7 +217,7 @@
           console.error({ error, message });
         }
       } else if (json.error === "Token missing or invalid") {
-        console.log("Token missing or invalid");
+        // console.log("Token missing or invalid");
       }
     }
 
@@ -246,9 +246,9 @@
   }
 
   function dragAreaClickHandler(e) {
-    console.log("Clicked drag area");
+    // console.log("Clicked drag area");
     if (addGridMediaIconEl) {
-      console.log("Add grid Media icon el: ", addGridMediaIconEl);
+      // console.log("Add grid Media icon el: ", addGridMediaIconEl);
       showTooltip(addGridMediaIconEl);
     }
   }

package/dist/extensions/Table/CustomTableCell.js

@@ -15,7 +15,7 @@ export const CustomTableCell = TableCell.extend({
     },
     addNodeView() {
         const editor = this.editor; // ✅ aquí lo tienes disponible
-        console.log('Editor:', editor);
+        // console.log('Editor:', editor)
         return SvelteNodeViewRenderer(TableCellNodeView, {
             as: 'td',
             stopEvent: () => false,
@@ -34,7 +34,7 @@ export const CustomTableCell = TableCell.extend({
                     this.storage.prevGripSelectionIsInFirstRow = isFirst; // ✅ nuevo flag
                     tr.setSelection(rowSel);
                     dispatch(tr);
-                    console.log('Row selected. Is first row?', isFirst);
+                    // console.log('Row selected. Is first row?', isFirst);
                 }
                 return true;
             },
@@ -49,7 +49,7 @@ export const CustomTableCell = TableCell.extend({
                     this.storage.prevGripSelectionIsInFirstRow = isFirst; // ✅ nuevo flag
                     tr.setSelection(colSel);
                     dispatch(tr);
-                    console.log('Column selected. Is first row?', isFirst);
+                    // console.log('Column selected. Is first row?', isFirst);
                 }
                 return true;
             },

package/dist/styles.css

@@ -411,7 +411,7 @@ button {
 }
 
 .fl-range-element input {
-  accent-color: #ffffff;
+  accent-color: var(--fl-editor-accent-color);
 }
 
 .fl-range-element-value {
@@ -490,6 +490,64 @@ button {
   }
 }
 
+/* Node limit styles */
+.fl-node-limit-warning {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #ff4444;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
+  z-index: 1000;
+  animation: slideInRight 0.3s ease-out;
+}
+
+.fl-node-count-bar {
+  background: var(--fl-toolbar-bg, #242424);
+  border-top: 1px solid #333;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--fl-toolbar-text-color, currentColor);
+}
+
+.fl-node-count-text {
+  font-weight: 500;
+  min-width: fit-content;
+}
+
+.fl-node-count-progress {
+  flex: 1;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.fl-node-count-progress-bar {
+  height: 100%;
+  background: var(--fl-editor-accent-color, #535bf2);
+  transition: width 0.2s ease;
+  border-radius: 2px;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 .media-grid-item-view-content > div {
   display: flex;
   height: 100%;

package/package.json

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