docx-diff-editor 1.0.9 → 1.0.14

package/dist/index.js

@@ -723,6 +723,74 @@ var DocxDiffEditor = react.forwardRef(
       }
       readyRef.current = false;
     }, []);
+    const convertHtmlToDocxBlob = react.useCallback(
+      async (html) => {
+        if (!SuperDocRef.current) {
+          throw new Error("SuperDoc not loaded");
+        }
+        const hiddenContainer = document.createElement("div");
+        hiddenContainer.id = `dde-hidden-${Date.now()}`;
+        hiddenContainer.style.cssText = "position:absolute;top:-9999px;left:-9999px;width:800px;height:600px;visibility:hidden;pointer-events:none;";
+        document.body.appendChild(hiddenContainer);
+        return new Promise((resolve, reject) => {
+          let resolved = false;
+          let tempSuperdoc = null;
+          const cleanup = () => {
+            try {
+              tempSuperdoc?.destroy?.();
+            } catch {
+            }
+            hiddenContainer.parentNode?.removeChild(hiddenContainer);
+          };
+          try {
+            tempSuperdoc = new SuperDocRef.current({
+              selector: `#${hiddenContainer.id}`,
+              html,
+              documentMode: "editing",
+              rulers: false,
+              user: { name: "Converter", email: "converter@local" },
+              onReady: async ({ superdoc: sd }) => {
+                if (resolved) return;
+                try {
+                  const json = sd?.activeEditor?.getJSON() || { type: "doc", content: [] };
+                  const blob = await sd?.activeEditor?.exportDocx({ isFinalDoc: true });
+                  if (!blob) {
+                    throw new Error("Export returned no data");
+                  }
+                  resolved = true;
+                  cleanup();
+                  resolve({ blob, json });
+                } catch (err) {
+                  resolved = true;
+                  cleanup();
+                  reject(err);
+                }
+              },
+              onException: ({ error: err }) => {
+                if (resolved) return;
+                resolved = true;
+                cleanup();
+                reject(err);
+              }
+            });
+            setTimeout(() => {
+              if (!resolved) {
+                resolved = true;
+                cleanup();
+                reject(new Error("HTML to DOCX conversion timed out"));
+              }
+            }, TIMEOUTS.PARSE_TIMEOUT);
+          } catch (err) {
+            if (!resolved) {
+              resolved = true;
+              cleanup();
+              reject(err);
+            }
+          }
+        });
+      },
+      []
+    );
     const createSuperdoc = react.useCallback(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       async (options) => {
@@ -732,25 +800,29 @@ var DocxDiffEditor = react.forwardRef(
         if (!containerRef.current) {
           throw new Error("Container not available");
         }
+        containerRef.current.innerHTML = "";
+        if (toolbarRef.current) {
+          toolbarRef.current.innerHTML = "";
+        }
         containerRef.current.id = editorId;
         if (toolbarRef.current) {
           toolbarRef.current.id = toolbarId;
         }
         return new Promise((resolve, reject) => {
+          let resolved = false;
           try {
             const superdoc = new SuperDocRef.current({
               selector: `#${editorId}`,
               toolbar: showToolbar ? `#${toolbarId}` : void 0,
               document: options.document,
-              html: options.html,
               documentMode: "editing",
               role: "editor",
               rulers: showRulers,
               user: DEFAULT_SUPERDOC_USER,
               permissionResolver,
-              // Enable comments module for track changes sidebar
-              modules: { comments: {} },
               onReady: ({ superdoc: sd }) => {
+                if (resolved) return;
+                resolved = true;
                 superdocRef.current = sd;
                 readyRef.current = true;
                 let json = { type: "doc", content: [] };
@@ -764,18 +836,24 @@ var DocxDiffEditor = react.forwardRef(
                 resolve({ superdoc: sd, json });
               },
               onException: ({ error: err }) => {
+                if (resolved) return;
+                resolved = true;
                 console.error("SuperDoc error:", err);
                 reject(err);
               }
             });
             superdocRef.current = superdoc;
             setTimeout(() => {
-              if (!readyRef.current) {
+              if (!resolved) {
+                resolved = true;
                 reject(new Error("SuperDoc initialization timed out"));
               }
             }, TIMEOUTS.PARSE_TIMEOUT);
           } catch (err) {
-            reject(err);
+            if (!resolved) {
+              resolved = true;
+              reject(err);
+            }
           }
         });
       },
@@ -799,12 +877,15 @@ var DocxDiffEditor = react.forwardRef(
         const { SuperDoc } = await import('superdoc');
         SuperDocRef.current = SuperDoc;
         let initOptions = {};
+        let extractedJson = null;
         if (initialSource) {
           const contentType = detectContentType(initialSource);
           if (contentType === "file") {
             initOptions = { document: initialSource };
           } else if (contentType === "html") {
-            initOptions = { html: initialSource };
+            const { blob, json: htmlJson } = await convertHtmlToDocxBlob(initialSource);
+            initOptions = { document: blob };
+            extractedJson = htmlJson;
           } else if (contentType === "json") {
             initOptions = templateDocx ? { document: templateDocx } : {};
           }
@@ -819,8 +900,9 @@ var DocxDiffEditor = react.forwardRef(
             onSourceLoaded?.(initialSource);
           }
         } else {
-          setSourceJson(json);
-          onSourceLoaded?.(json);
+          const sourceJsonToUse = extractedJson || json;
+          setSourceJson(sourceJsonToUse);
+          onSourceLoaded?.(sourceJsonToUse);
         }
         setIsLoading(false);
         onReady?.();
@@ -839,6 +921,7 @@ var DocxDiffEditor = react.forwardRef(
       onSourceLoaded,
       destroySuperdoc,
       createSuperdoc,
+      convertHtmlToDocxBlob,
       setEditorContent,
       handleError
     ]);
@@ -854,7 +937,10 @@ var DocxDiffEditor = react.forwardRef(
       ref,
       () => ({
         /**
-         * Set the source/base document
+         * Set the source/base document.
+         * 
+         * IMPORTANT: For HTML content, we convert to DOCX first using a hidden
+         * SuperDoc instance. This is required for track bubbles to work properly.
          */
         async setSource(content) {
           if (!SuperDocRef.current) {
@@ -870,8 +956,9 @@ var DocxDiffEditor = react.forwardRef(
               const result = await createSuperdoc({ document: content });
               json = result.json;
             } else if (contentType === "html") {
-              const result = await createSuperdoc({ html: content });
-              json = result.json;
+              const { blob, json: htmlJson } = await convertHtmlToDocxBlob(content);
+              const result = await createSuperdoc({ document: blob });
+              json = htmlJson;
             } else {
               const result = await createSuperdoc(templateDocx ? { document: templateDocx } : {});
               if (result.superdoc?.activeEditor && isProseMirrorJSON(content)) {
@@ -966,11 +1053,24 @@ var DocxDiffEditor = react.forwardRef(
             const merged = mergeDocuments(sourceJson, newJson, diff, author);
             setMergedJson(merged);
             if (superdocRef.current?.activeEditor) {
-              if (superdocRef.current.setDocumentMode) {
-                superdocRef.current.setDocumentMode("suggesting");
-              }
               setEditorContent(superdocRef.current.activeEditor, merged);
               enableReviewMode(superdocRef.current);
+              const sd = superdocRef.current;
+              if (sd.commentsStore?.processLoadedDocxComments) {
+                setTimeout(() => {
+                  try {
+                    sd.commentsStore.processLoadedDocxComments({
+                      superdoc: sd,
+                      editor: sd.activeEditor,
+                      comments: [],
+                      // Empty array - we just want to trigger createCommentForTrackChanges
+                      documentId: sd.activeEditor?.options?.documentId || "primary"
+                    });
+                  } catch (err) {
+                    console.warn("[DocxDiffEditor] Failed to process track changes for bubbles:", err);
+                  }
+                }, 50);
+              }
             }
             const insertions = diff.segments.filter((s) => s.type === "insert").length;
             const deletions = diff.segments.filter((s) => s.type === "delete").length;
@@ -1061,6 +1161,7 @@ var DocxDiffEditor = react.forwardRef(
         author,
         destroySuperdoc,
         createSuperdoc,
+        convertHtmlToDocxBlob,
         setEditorContent,
         enableReviewMode,
         setEditingMode,