@flexiui/svelte-rich-text 0.0.58 → 0.0.60

package/dist/RichText.svelte

@@ -27,6 +27,8 @@
     className?: string;
     editable?: boolean;
     content?: string | {type: string, content: any[]} | null;
+    nodesLimit?: number;
+    limitWarningMessage?: string;
     customExtensions?: any[];
     editorEvents?: {
       onTransaction?: (params: any) => void;
@@ -70,6 +72,8 @@
     className,
     editable,
     content,
+    nodesLimit,
+    limitWarningMessage,
     customExtensions = [],
     editorEvents = {
       onTransaction: () => {},
@@ -172,6 +176,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 +259,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 +288,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 +362,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 +425,8 @@
       onCreate: ({ editor }) => {
         editorEvents.onCreate({ editor });
         migrateMathStrings(editor);
+        
+        updateNodeCount();
       },
 
       onUpdate: ({ editor }) => {
@@ -1510,6 +1560,29 @@
   {/if}
 
   <EditorContent editor={$editor} class="fl-rich-text-content" />
+
+  <!-- Warning message for node limit -->
+  {#if showLimitWarning && nodesLimit}
+    <div class="fl-node-limit-warning">
+      {limitWarningMessage || ` No se pueden añadir más elementos a este editor. Max: ${nodesLimit} elementos.`}
+    </div>
+  {/if}
+
+  <!-- Bottom bar showing node count -->
+  {#if nodesLimit}
+    <div class="fl-node-count-bar">
+      <span class="fl-node-count-text">
+        {currentNodeCount} de {nodesLimit} elementos
+      </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
@@ -2793,9 +2866,14 @@
   </div>
 {/if}
 
-
 <style>
   .hidden {
     display: none;
   }
+
+  .fl-node-count-text {
+    strong {
+      margin-right: 4px;
+    }
+  }
 </style>

package/dist/RichText.svelte.d.ts

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

package/dist/styles.css

@@ -92,6 +92,7 @@
   background-color: var(--fl-editor-bg, #242424);
   box-sizing: border-box;
   border-radius: var(--fl-editor-radius);
+  position: relative;
 
   .fl-editor-image-url-input {
     white-space: nowrap;
@@ -490,6 +491,64 @@ button {
   }
 }
 
+/* Node limit styles */
+.fl-node-limit-warning {
+  position: absolute;
+  bottom: 48px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #ff4444;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  animation: slideInTop 0.3s ease-out;
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateX(-50%) translateY(15px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
+.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;
+}
+
+
 .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.58",
+  "version": "0.0.60",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",