docx-diff-editor 1.0.45 → 1.0.47

package/dist/index.d.mts

@@ -29,6 +29,10 @@ type DocxContent = File | ProseMirrorJSON | string;
 interface DiffSegment {
     type: 'equal' | 'insert' | 'delete';
     text: string;
+    /** Position in docA where this segment starts (for equal/delete segments) */
+    posA?: number;
+    /** Position in docB where this segment starts (for equal/insert segments) */
+    posB?: number;
 }
 /**
  * A format change on unchanged text
@@ -54,6 +58,8 @@ interface DiffResult {
     textB: string;
     /** Human-readable summary */
     summary: string[];
+    /** Text spans from docB with marks (for mark preservation during merge) */
+    spansB?: TextSpan[];
 }
 /**
  * Type of structural change
@@ -365,6 +371,15 @@ interface DocxDiffEditorRef {
     /** Parse HTML string to ProseMirror JSON (uses hidden SuperDoc instance) */
     parseHtml(html: string): Promise<ProseMirrorJSON>;
 }
+/**
+ * Text span with position and marks (used in diffing)
+ */
+interface TextSpan {
+    text: string;
+    from: number;
+    to: number;
+    marks: ProseMirrorMark[];
+}
 
 /**
  * DocxDiffEditor Component
@@ -454,6 +469,10 @@ declare function parseDocxFile(file: File, SuperDoc: SuperDocConstructor): Promi
 /**
  * Diff two ProseMirror JSON documents at the character level.
  * Detects both text changes and formatting changes.
+ *
+ * Now also tracks positions in both documents for mark preservation:
+ * - posA: position in docA (for equal/delete segments)
+ * - posB: position in docB (for equal/insert segments)
  */
 declare function diffDocuments(docA: ProseMirrorJSON, docB: ProseMirrorJSON): DiffResult;
 

package/dist/index.d.ts

@@ -29,6 +29,10 @@ type DocxContent = File | ProseMirrorJSON | string;
 interface DiffSegment {
     type: 'equal' | 'insert' | 'delete';
     text: string;
+    /** Position in docA where this segment starts (for equal/delete segments) */
+    posA?: number;
+    /** Position in docB where this segment starts (for equal/insert segments) */
+    posB?: number;
 }
 /**
  * A format change on unchanged text
@@ -54,6 +58,8 @@ interface DiffResult {
     textB: string;
     /** Human-readable summary */
     summary: string[];
+    /** Text spans from docB with marks (for mark preservation during merge) */
+    spansB?: TextSpan[];
 }
 /**
  * Type of structural change
@@ -365,6 +371,15 @@ interface DocxDiffEditorRef {
     /** Parse HTML string to ProseMirror JSON (uses hidden SuperDoc instance) */
     parseHtml(html: string): Promise<ProseMirrorJSON>;
 }
+/**
+ * Text span with position and marks (used in diffing)
+ */
+interface TextSpan {
+    text: string;
+    from: number;
+    to: number;
+    marks: ProseMirrorMark[];
+}
 
 /**
  * DocxDiffEditor Component
@@ -454,6 +469,10 @@ declare function parseDocxFile(file: File, SuperDoc: SuperDocConstructor): Promi
 /**
  * Diff two ProseMirror JSON documents at the character level.
  * Detects both text changes and formatting changes.
+ *
+ * Now also tracks positions in both documents for mark preservation:
+ * - posA: position in docA (for equal/delete segments)
+ * - posB: position in docB (for equal/insert segments)
  */
 declare function diffDocuments(docA: ProseMirrorJSON, docB: ProseMirrorJSON): DiffResult;
 

package/dist/index.js

@@ -453,6 +453,170 @@ var TIMEOUTS = {
   CLEANUP_DELAY: 100
 };
 
+// src/services/runPropertiesSync.ts
+var PT_TO_TWIPS = 20;
+function ptToTwips(ptValue) {
+  return Math.round(ptValue * PT_TO_TWIPS);
+}
+function stripHashFromColor(color) {
+  return color.replace(/^#/, "");
+}
+function parseFontSizeToPoints(fontSize) {
+  if (typeof fontSize === "number") {
+    return fontSize;
+  }
+  const value = parseFloat(fontSize);
+  if (isNaN(value)) {
+    return null;
+  }
+  if (fontSize.toLowerCase().includes("px")) {
+    return value * 0.75;
+  }
+  return value;
+}
+function cleanFontFamily(fontFamily) {
+  return fontFamily.split(",")[0].trim().replace(/^["']|["']$/g, "");
+}
+function marksToRunProperties(marks) {
+  const runProperties = {};
+  if (!marks || !Array.isArray(marks)) {
+    return runProperties;
+  }
+  for (const mark of marks) {
+    const type = mark.type;
+    const attrs = mark.attrs || {};
+    switch (type) {
+      // Boolean marks: bold, italic, strike
+      case "bold":
+      case "italic":
+      case "strike": {
+        const isNegated = attrs.value === "0" || attrs.value === false;
+        runProperties[type] = !isNegated;
+        break;
+      }
+      // Underline with optional type and color
+      case "underline": {
+        const underlineAttrs = {};
+        if (attrs.underlineType) {
+          underlineAttrs["w:val"] = String(attrs.underlineType);
+        } else {
+          underlineAttrs["w:val"] = "single";
+        }
+        if (attrs.underlineColor) {
+          underlineAttrs["w:color"] = stripHashFromColor(String(attrs.underlineColor));
+        }
+        if (Object.keys(underlineAttrs).length > 0) {
+          runProperties.underline = underlineAttrs;
+        }
+        break;
+      }
+      // Highlight (background color)
+      case "highlight": {
+        if (attrs.color) {
+          const color = String(attrs.color).toLowerCase();
+          if (color === "transparent") {
+            runProperties.highlight = { "w:val": "none" };
+          } else {
+            runProperties.highlight = { "w:val": color };
+          }
+        }
+        break;
+      }
+      // textStyle contains multiple style attributes
+      case "textStyle": {
+        if (attrs.color != null) {
+          runProperties.color = {
+            val: stripHashFromColor(String(attrs.color))
+          };
+        }
+        if (attrs.fontSize != null) {
+          const points = parseFontSizeToPoints(attrs.fontSize);
+          if (points !== null) {
+            runProperties.fontSize = points * 2;
+          }
+        }
+        if (attrs.fontFamily != null) {
+          const cleanedFont = cleanFontFamily(String(attrs.fontFamily));
+          runProperties.fontFamily = {
+            ascii: cleanedFont,
+            eastAsia: cleanedFont,
+            hAnsi: cleanedFont,
+            cs: cleanedFont
+          };
+        }
+        if (attrs.letterSpacing != null) {
+          const ptValue = parseFloat(String(attrs.letterSpacing));
+          if (!isNaN(ptValue)) {
+            runProperties.letterSpacing = ptToTwips(ptValue);
+          }
+        }
+        if (attrs.textTransform != null) {
+          runProperties.textTransform = String(attrs.textTransform);
+        }
+        break;
+      }
+    }
+  }
+  return runProperties;
+}
+function collectMarksRecursively(node, allMarks) {
+  if (node.type === "text" && node.marks && Array.isArray(node.marks)) {
+    allMarks.push(...node.marks);
+  }
+  if (node.content && Array.isArray(node.content)) {
+    for (const child of node.content) {
+      collectMarksRecursively(child, allMarks);
+    }
+  }
+}
+function collectMarksFromRunChildren(runNode) {
+  const allMarks = [];
+  if (!runNode.content || !Array.isArray(runNode.content)) {
+    return allMarks;
+  }
+  for (const child of runNode.content) {
+    collectMarksRecursively(child, allMarks);
+  }
+  const marksByType = /* @__PURE__ */ new Map();
+  for (const mark of allMarks) {
+    marksByType.set(mark.type, mark);
+  }
+  return Array.from(marksByType.values());
+}
+function normalizeNode(node) {
+  if (node.type === "run") {
+    const marks = collectMarksFromRunChildren(node);
+    if (marks.length > 0) {
+      const runPropsFromMarks = marksToRunProperties(marks);
+      const existingRunProps = node.attrs?.runProperties || {};
+      const mergedRunProps = {
+        ...existingRunProps,
+        ...runPropsFromMarks
+      };
+      return {
+        ...node,
+        attrs: {
+          ...node.attrs,
+          runProperties: mergedRunProps
+        },
+        // Also recursively process children (though runs usually just have text)
+        content: node.content?.map(normalizeNode)
+      };
+    }
+  }
+  if (node.content && Array.isArray(node.content)) {
+    return {
+      ...node,
+      content: node.content.map(normalizeNode)
+    };
+  }
+  return node;
+}
+function normalizeRunProperties(doc) {
+  const cloned = JSON.parse(JSON.stringify(doc));
+  return normalizeNode(cloned);
+}
+
 // src/services/contentResolver.ts
 function detectContentType(content) {
   if (content instanceof File) {
@@ -519,7 +683,8 @@ async function parseHtmlToJson(html, SuperDoc) {
           try {
             const json = editor.getJSON();
             if (json?.content?.length > 0) {
-              onSuccess(json);
+              const normalizedJson = normalizeRunProperties(json);
+              onSuccess(normalizedJson);
             } else {
               onFail();
             }
@@ -556,9 +721,10 @@ async function parseHtmlToJson(html, SuperDoc) {
               throw new Error("No active editor found");
             }
             const json = editor.getJSON();
+            const normalizedJson = normalizeRunProperties(json);
             resolved = true;
             cleanup();
-            resolve(json);
+            resolve(normalizedJson);
           } catch (err) {
             resolved = true;
             cleanup();
@@ -836,14 +1002,20 @@ function diffDocuments(docA, docB) {
   const segments = [];
   let insertCount = 0;
   let deleteCount = 0;
+  let posA = 0;
+  let posB = 0;
   for (const [op, text] of diffs) {
     if (op === DIFF_EQUAL) {
-      segments.push({ type: "equal", text });
+      segments.push({ type: "equal", text, posA, posB });
+      posA += text.length;
+      posB += text.length;
     } else if (op === DIFF_INSERT) {
-      segments.push({ type: "insert", text });
+      segments.push({ type: "insert", text, posB });
+      posB += text.length;
       insertCount++;
     } else if (op === DIFF_DELETE) {
-      segments.push({ type: "delete", text });
+      segments.push({ type: "delete", text, posA });
+      posA += text.length;
       deleteCount++;
     }
   }
@@ -868,7 +1040,9 @@ function diffDocuments(docA, docB) {
     formatChanges,
     textA,
     textB,
-    summary
+    summary,
+    spansB
+    // Include docB spans for mark preservation during merge
   };
 }
 
@@ -1350,6 +1524,69 @@ function alignListItems(listA, listB, listPathA, listPathB) {
 function cloneNode(node) {
   return JSON.parse(JSON.stringify(node));
 }
+function getMarkSpansForRange(spansB, start, end) {
+  const result = [];
+  for (const span of spansB) {
+    if (span.to > start && span.from < end) {
+      const overlapStart = Math.max(span.from, start);
+      const overlapEnd = Math.min(span.to, end);
+      result.push({
+        relStart: overlapStart - start,
+        relEnd: overlapEnd - start,
+        marks: span.marks || []
+      });
+    }
+  }
+  return result;
+}
+function createInsertedTextNodes(text, posB, spansB, author, replacementId) {
+  const result = [];
+  const trackMark = createTrackInsertMark(author, replacementId);
+  if (posB === void 0 || spansB.length === 0) {
+    return [{
+      type: "text",
+      text,
+      marks: [trackMark]
+    }];
+  }
+  const markSpans = getMarkSpansForRange(spansB, posB, posB + text.length);
+  if (markSpans.length === 0) {
+    return [{
+      type: "text",
+      text,
+      marks: [trackMark]
+    }];
+  }
+  markSpans.sort((a, b) => a.relStart - b.relStart);
+  let processedUpTo = 0;
+  for (const span of markSpans) {
+    if (span.relStart > processedUpTo) {
+      result.push({
+        type: "text",
+        text: text.substring(processedUpTo, span.relStart),
+        marks: [trackMark]
+      });
+    }
+    if (span.relEnd > span.relStart) {
+      const spanText = text.substring(span.relStart, span.relEnd);
+      const marks = [...span.marks, trackMark];
+      result.push({
+        type: "text",
+        text: spanText,
+        marks
+      });
+      processedUpTo = span.relEnd;
+    }
+  }
+  if (processedUpTo < text.length) {
+    result.push({
+      type: "text",
+      text: text.substring(processedUpTo),
+      marks: [trackMark]
+    });
+  }
+  return result;
+}
 function mergeDocuments(docA, docB, diffResult, author = DEFAULT_AUTHOR) {
   const merged = cloneNode(docA);
   const charStates = [];
@@ -1384,17 +1621,22 @@ function mergeDocuments(docA, docB, diffResult, author = DEFAULT_AUTHOR) {
         insertions.push({
           afterOffset: docAOffset,
           text: nextSegment.text,
-          replacementId
+          replacementId,
+          posB: nextSegment.posB
+          // Capture docB position for mark lookup
         });
         segIdx++;
       }
     } else if (segment.type === "insert") {
       insertions.push({
         afterOffset: docAOffset,
-        text: segment.text
+        text: segment.text,
+        posB: segment.posB
+        // Capture docB position for mark lookup
       });
     }
   }
+  const spansB = diffResult.spansB || [];
   function transformNode(node, nodeOffset, path) {
     if (node.type === "text" && node.text) {
       const text = node.text;
@@ -1405,11 +1647,14 @@ function mergeDocuments(docA, docB, diffResult, author = DEFAULT_AUTHOR) {
         const charState = charStates[charOffset] || { type: "equal" };
         const insertionsHere = insertions.filter((ins) => ins.afterOffset === charOffset);
         for (const ins of insertionsHere) {
-          result.push({
-            type: "text",
-            text: ins.text,
-            marks: [...node.marks || [], createTrackInsertMark(author, ins.replacementId)]
-          });
+          const insertedNodes = createInsertedTextNodes(
+            ins.text,
+            ins.posB,
+            spansB,
+            author,
+            ins.replacementId
+          );
+          result.push(...insertedNodes);
         }
         const currentFormatChange = getFormatChangeAt(nodeOffset + i);
         let j = i + 1;
@@ -1445,11 +1690,14 @@ function mergeDocuments(docA, docB, diffResult, author = DEFAULT_AUTHOR) {
       const endOffset = nodeOffset + text.length;
       const endInsertions = insertions.filter((ins) => ins.afterOffset === endOffset);
       for (const ins of endInsertions) {
-        result.push({
-          type: "text",
-          text: ins.text,
-          marks: [...node.marks || [], createTrackInsertMark(author, ins.replacementId)]
-        });
+        const insertedNodes = createInsertedTextNodes(
+          ins.text,
+          ins.posB,
+          spansB,
+          author,
+          ins.replacementId
+        );
+        result.push(...insertedNodes);
       }
       insertions = insertions.filter(
         (ins) => ins.afterOffset < nodeOffset || ins.afterOffset > endOffset
@@ -1484,18 +1732,19 @@ function mergeDocuments(docA, docB, diffResult, author = DEFAULT_AUTHOR) {
   }
   if (insertions.length > 0) {
     for (const ins of insertions) {
+      const insertedNodes = createInsertedTextNodes(
+        ins.text,
+        ins.posB,
+        spansB,
+        author,
+        ins.replacementId
+      );
       const insertNode = {
         type: "paragraph",
         content: [
           {
             type: "run",
-            content: [
-              {
-                type: "text",
-                text: ins.text,
-                marks: [createTrackInsertMark(author, ins.replacementId)]
-              }
-            ]
+            content: insertedNodes
           }
         ]
       };
@@ -2861,9 +3110,10 @@ var DocxDiffEditor = react.forwardRef(
               }
               newJson = content;
             }
+            const normalizedNewJson = normalizeRunProperties(newJson);
             const structuralResult = mergeWithStructuralAwareness(
               sourceJson,
-              newJson,
+              normalizedNewJson,
               author
             );
             const merged = structuralResult.mergedDoc;