docx-diff-editor 1.0.42 → 1.0.44

package/README.md

@@ -6,8 +6,9 @@ A React component for DOCX document comparison with track changes visualization.
 
 - 📄 Compare two DOCX documents side by side
 - 🔍 Character-level diff with track changes
-- 📊 **Block-level diffing** for tables, lists, and images
-- ✅ Accept/reject individual changes
+- 📊 **Block-level structural diffing** for tables, lists, paragraphs, and images
+- 🔄 **Structure-aware merge** - inserted/deleted blocks appear in the editor with track marks
+- ✅ Accept/reject individual changes (both text and structural)
 - 🎨 Visual track changes (insert, delete, format)
 - 📋 **Structural Changes Pane** for table rows, list items, images
 - 🤖 Extract enriched change context for LLM processing
@@ -256,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);
 
@@ -271,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
@@ -312,6 +332,18 @@ The component supports three types of track changes:
 
 When comparing documents with structural differences (tables, lists, images), a floating pane appears showing these changes with Accept/Reject controls.
 
+### How It Works
+
+The component uses a **structure-aware merge** approach:
+
+1. **Block alignment**: Documents are aligned at the block level (paragraphs, tables, lists) using content fingerprinting
+2. **Recursive merge**: Tables and lists are merged recursively (row-by-row, item-by-item)
+3. **Character-level diff**: Within matched blocks, character-level diffing is applied
+4. **Insert/delete marking**: New blocks get `trackInsert` marks; deleted blocks are preserved with `trackDelete` marks
+5. **Shared IDs**: Each structural change has a unique ID linking the track marks to the pane entry
+
+This means inserted tables, paragraphs, and list items actually appear in the editor (with green highlighting), and deleted content remains visible (with red strikethrough) until you accept or reject the changes.
+
 ### What's Detected
 
 | Change Type | Description |

package/dist/index.d.mts

@@ -424,6 +424,18 @@ 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
  */
 declare function parseHtmlToJson(html: string, SuperDoc: SuperDocConstructor): Promise<ProseMirrorJSON>;
 /**

package/dist/index.d.ts

@@ -424,6 +424,18 @@ 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
  */
 declare function parseHtmlToJson(html: string, SuperDoc: SuperDocConstructor): Promise<ProseMirrorJSON>;
 /**