docx-diff-editor 1.0.43 → 1.0.45

package/README.md

@@ -257,13 +257,19 @@ await editorRef.current?.setProperties({
 
 ## Parsing HTML to JSON
 
-Convert HTML strings to ProseMirror JSON without visible rendering:
+Convert HTML strings to ProseMirror JSON without visible rendering. **Inline styles are preserved!**
 
 ```tsx
 // Using the ref method (requires editor to be initialized)
 const json = await editorRef.current?.parseHtml('<h1>Title</h1><p>Content here</p>');
 console.log(json); // { type: 'doc', content: [...] }
 
+// Inline styles are converted to marks
+const styledJson = await editorRef.current?.parseHtml(
+  '<p><span style="color: red; font-weight: bold;">styled text</span></p>'
+);
+// Result: text with textStyle mark (color) and bold mark
+
 // Use with other methods
 await editorRef.current?.updateContent(json);
 
@@ -272,6 +278,19 @@ import { parseHtmlToJson } from 'docx-diff-editor';
 const json = await parseHtmlToJson(htmlString, SuperDocClass);
 ```
 
+### Supported Inline Styles
+
+| CSS Property | ProseMirror Mark |
+|--------------|------------------|
+| `color` | `textStyle.color` |
+| `font-size` | `textStyle.fontSize` |
+| `font-family` | `textStyle.fontFamily` |
+| `font-weight: bold` | `bold` |
+| `font-style: italic` | `italic` |
+| `text-decoration: underline` | `underline` |
+| `text-decoration: line-through` | `strike` |
+| `background-color` | `highlight.color` |
+
 ## Customization
 
 ### CSS Variables

package/dist/index.d.mts

@@ -424,6 +424,20 @@ declare function detectContentType(content: DocxContent): 'file' | 'html' | 'jso
 declare function isProseMirrorJSON(content: unknown): boolean;
 /**
  * Parse an HTML string into ProseMirror JSON using a hidden SuperDoc instance.
+ *
+ * IMPORTANT: Uses the "paste" approach instead of the "import" approach.
+ * SuperDoc's import path (via `html` option) calls `stripHtmlStyles()` which
+ * removes all CSS styles except `text-align`. The paste path (via `view.pasteHTML()`)
+ * preserves inline styles like color, font-size, font-family, font-weight, etc.
+ *
+ * Flow:
+ * 1. Create SuperDoc with empty HTML document
+ * 2. Wait for editor to be ready
+ * 3. Select all content and delete it (start fresh)
+ * 4. Use editor.view.pasteHTML(html) - this uses the paste path which preserves styles
+ * 5. Return the resulting JSON
+ *
+ * Falls back to the standard import approach if paste fails.
  */
 declare function parseHtmlToJson(html: string, SuperDoc: SuperDocConstructor): Promise<ProseMirrorJSON>;
 /**

package/dist/index.d.ts

@@ -424,6 +424,20 @@ declare function detectContentType(content: DocxContent): 'file' | 'html' | 'jso
 declare function isProseMirrorJSON(content: unknown): boolean;
 /**
  * Parse an HTML string into ProseMirror JSON using a hidden SuperDoc instance.
+ *
+ * IMPORTANT: Uses the "paste" approach instead of the "import" approach.
+ * SuperDoc's import path (via `html` option) calls `stripHtmlStyles()` which
+ * removes all CSS styles except `text-align`. The paste path (via `view.pasteHTML()`)
+ * preserves inline styles like color, font-size, font-family, font-weight, etc.
+ *
+ * Flow:
+ * 1. Create SuperDoc with empty HTML document
+ * 2. Wait for editor to be ready
+ * 3. Select all content and delete it (start fresh)
+ * 4. Use editor.view.pasteHTML(html) - this uses the paste path which preserves styles
+ * 5. Return the resulting JSON
+ *
+ * Falls back to the standard import approach if paste fails.
  */
 declare function parseHtmlToJson(html: string, SuperDoc: SuperDocConstructor): Promise<ProseMirrorJSON>;
 /**

package/dist/index.js

@@ -490,38 +490,124 @@ async function parseHtmlToJson(html, SuperDoc) {
         }
       }, TIMEOUTS.CLEANUP_DELAY);
     };
+    const createMockPasteEvent = (htmlContent) => {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.setData("text/html", htmlContent);
+      dataTransfer.setData("text/plain", "");
+      const event = new ClipboardEvent("paste", {
+        bubbles: true,
+        cancelable: true,
+        clipboardData: dataTransfer
+      });
+      return event;
+    };
+    const tryPasteApproach = (sd, onSuccess, onFail) => {
+      try {
+        const editor = sd?.activeEditor;
+        if (!editor?.view?.pasteHTML) {
+          onFail();
+          return;
+        }
+        editor.commands.focus?.();
+        if (editor.commands.selectAll && editor.commands.deleteSelection) {
+          editor.commands.selectAll();
+          editor.commands.deleteSelection();
+        }
+        const mockEvent = createMockPasteEvent(html);
+        editor.view.pasteHTML(html, mockEvent);
+        setTimeout(() => {
+          try {
+            const json = editor.getJSON();
+            if (json?.content?.length > 0) {
+              onSuccess(json);
+            } else {
+              onFail();
+            }
+          } catch {
+            onFail();
+          }
+        }, 100);
+      } catch (err) {
+        console.warn("[parseHtmlToJson] Paste approach error:", err);
+        onFail();
+      }
+    };
+    const fallbackToImport = () => {
+      if (superdoc) {
+        try {
+          superdoc.destroy?.();
+        } catch {
+        }
+        superdoc = null;
+      }
+      superdoc = new SuperDoc({
+        selector: container,
+        html,
+        // Use the actual HTML content
+        documentMode: "viewing",
+        rulers: false,
+        user: { name: "Parser", email: "parser@local" },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onReady: ({ superdoc: sd }) => {
+          if (resolved) return;
+          try {
+            const editor = sd?.activeEditor;
+            if (!editor) {
+              throw new Error("No active editor found");
+            }
+            const json = editor.getJSON();
+            resolved = true;
+            cleanup();
+            resolve(json);
+          } catch (err) {
+            resolved = true;
+            cleanup();
+            reject(err);
+          }
+        },
+        onException: ({ error: err }) => {
+          if (resolved) return;
+          resolved = true;
+          cleanup();
+          reject(err);
+        }
+      });
+    };
     setTimeout(async () => {
       if (resolved) return;
       try {
         superdoc = new SuperDoc({
           selector: container,
-          html,
-          documentMode: "viewing",
+          html: "<p></p>",
+          // Minimal empty document
+          documentMode: "editing",
+          // Need editing mode to use paste
           rulers: false,
           user: { name: "Parser", email: "parser@local" },
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onReady: ({ superdoc: sd }) => {
             if (resolved) return;
-            try {
-              const editor = sd?.activeEditor;
-              if (!editor) {
-                throw new Error("No active editor found");
+            tryPasteApproach(
+              sd,
+              // Success callback
+              (json) => {
+                if (resolved) return;
+                resolved = true;
+                cleanup();
+                resolve(json);
+              },
+              // Fail callback - try fallback
+              () => {
+                if (resolved) return;
+                console.warn("[parseHtmlToJson] Paste approach failed, falling back to import");
+                fallbackToImport();
               }
-              const json = editor.getJSON();
-              resolved = true;
-              cleanup();
-              resolve(json);
-            } catch (err) {
-              resolved = true;
-              cleanup();
-              reject(err);
-            }
+            );
           },
           onException: ({ error: err }) => {
             if (resolved) return;
-            resolved = true;
-            cleanup();
-            reject(err);
+            console.warn("[parseHtmlToJson] Paste approach exception, falling back:", err);
+            fallbackToImport();
           }
         });
         setTimeout(() => {
@@ -532,8 +618,12 @@ async function parseHtmlToJson(html, SuperDoc) {
           }
         }, TIMEOUTS.PARSE_TIMEOUT);
       } catch (err) {
-        cleanup();
-        reject(err);
+        try {
+          fallbackToImport();
+        } catch (fallbackErr) {
+          cleanup();
+          reject(fallbackErr);
+        }
       }
     }, 50);
   });