@flexiui/svelte-rich-text 0.0.80 → 0.0.82

package/dist/RichText.svelte

@@ -508,6 +508,51 @@
             }, 200);
           }
         },
+        transformPastedText(text) {
+          return text;
+        },
+        transformPastedHTML(html: string) {
+          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),
+            );
+          };
+
+          Array.from(div.children).forEach((child) =>
+            cleanNode(child as HTMLElement),
+          );
+
+          return div.innerHTML;
+        },
       },
       onTransaction: ({ editor, transaction }) => {
         // Actualizar contador de nodos
@@ -602,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;
         }
 
@@ -822,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);
   }
@@ -853,7 +903,7 @@
   {/if}
 {:else}
   <div
-    id={id}
+    {id}
     class="fl-rich-text {className}"
     class:editable
     style="
@@ -1327,7 +1377,7 @@
   {/if}
 </div>
 
-  {#if editor && focused}
+{#if editor && focused}
   <div class="hidden">
     <BubbleMenu
       options={mergedBubbleMenuOptions}

package/dist/getExtensions.js

@@ -100,7 +100,7 @@ export function getRichTextExtensions(options) {
             listKeymap: false,
         }),
         EnhancedLink,
-        Image.configure({ inline: true }),
+        Image.configure({ inline: false }),
         Audio.configure({
             HTMLAttributes: { class: "audio-player" },
         }),

package/package.json

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