docx-diff-editor 1.0.43 → 1.0.44

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,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>;
 /**

package/dist/index.js

@@ -495,8 +495,10 @@ async function parseHtmlToJson(html, SuperDoc) {
       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
@@ -507,10 +509,26 @@ async function parseHtmlToJson(html, SuperDoc) {
               if (!editor) {
                 throw new Error("No active editor found");
               }
-              const json = editor.getJSON();
-              resolved = true;
-              cleanup();
-              resolve(json);
+              const view = editor.view;
+              if (!view) {
+                throw new Error("No editor view found");
+              }
+              editor.commands.selectAll();
+              editor.commands.deleteSelection();
+              view.pasteHTML(html);
+              setTimeout(() => {
+                if (resolved) return;
+                try {
+                  const json = editor.getJSON();
+                  resolved = true;
+                  cleanup();
+                  resolve(json);
+                } catch (err) {
+                  resolved = true;
+                  cleanup();
+                  reject(err);
+                }
+              }, 50);
             } catch (err) {
               resolved = true;
               cleanup();