@flexiui/svelte-rich-text 0.0.81 → 0.0.82

package/dist/RichText.svelte

@@ -509,17 +509,49 @@
           }
         },
         transformPastedText(text) {
-          return text
+          return text;
         },
         transformPastedHTML(html: string) {
-          // Crear un div temporal para parsear el HTML
-          const div = document.createElement('div')
-          div.innerHTML = html
+          const div = document.createElement("div");
+          div.innerHTML = html;
+
+          const cleanNode = (node: HTMLElement) => {
+            // 1. Eliminar atributos que generan "basura"
+            node.removeAttribute("style");
+            node.removeAttribute("class");
+            node.removeAttribute("id");
+
+            // 2. Opcional: eliminar atributos específicos
+            [...node.attributes].forEach((attr) => {
+              if (
+                attr.name.startsWith("data-") ||
+                attr.name.startsWith("aria-")
+              ) {
+                node.removeAttribute(attr.name);
+              }
+            });
+
+            // 3. Reemplazar tags innecesarios (span, font...) por su contenido
+            if (["SPAN", "FONT"].includes(node.tagName)) {
+              const parent = node.parentNode;
+              while (node.firstChild) {
+                parent?.insertBefore(node.firstChild, node);
+              }
+              parent?.removeChild(node);
+              return;
+            }
+
+            // 4. Recursivo
+            Array.from(node.children).forEach((child) =>
+              cleanNode(child as HTMLElement),
+            );
+          };
 
-          // Obtener solo el texto con saltos de línea
-          const text = div.innerText || div.textContent || ''
+          Array.from(div.children).forEach((child) =>
+            cleanNode(child as HTMLElement),
+          );
 
-          return text
+          return div.innerHTML;
         },
       },
       onTransaction: ({ editor, transaction }) => {
@@ -615,13 +647,21 @@
       onBlur({ editor, event }) {
         const relatedTarget = event.relatedTarget as HTMLElement;
 
-        const isSameEditor = relatedTarget?.closest(`#${id}`);  // usa el id del editor actual
-        
-        const isBubbleMenu = relatedTarget?.closest(".fl-bubble-menu");
-        const isToolbarDropdown = relatedTarget?.closest(".fl-toolbar-dropdown-panel");
+        const isSameEditor = relatedTarget?.closest(`#${id}`); // usa el id del editor actual
+
+        const isBubbleMenu =
+          relatedTarget?.closest(".fl-bubble-menu") ||
+          relatedTarget?.classList.contains("fl-bubble-menu-mark-button");
+        const isToolbarDropdown = relatedTarget?.closest(
+          ".fl-toolbar-dropdown-panel",
+        );
         const isFontSizeEditor = relatedTarget?.closest(".fl-font-size-editor");
 
-        if (relatedTarget?.classList.contains("fl-bubble-menu-mark-button") || isFontSizeEditor) {
+        if (
+          relatedTarget?.classList.contains("fl-bubble-menu-mark-button") ||
+          isFontSizeEditor ||
+          isBubbleMenu
+        ) {
           return;
         }
 
@@ -835,15 +875,12 @@
     }
   }
 
-
   function clearSelection(editor) {
     const { state, view } = editor;
 
     const pos = state.selection.to;
 
-    const tr = state.tr.setSelection(
-      TextSelection.create(state.doc, pos)
-    );
+    const tr = state.tr.setSelection(TextSelection.create(state.doc, pos));
 
     view.dispatch(tr);
   }
@@ -866,7 +903,7 @@
   {/if}
 {:else}
   <div
-    id={id}
+    {id}
     class="fl-rich-text {className}"
     class:editable
     style="
@@ -1340,7 +1377,7 @@
   {/if}
 </div>
 
-  {#if editor && focused}
+{#if editor && focused}
   <div class="hidden">
     <BubbleMenu
       options={mergedBubbleMenuOptions}

package/package.json

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