@extend-ai/react-docx 0.6.2 → 0.6.4

package/dist/index.d.cts

@@ -712,6 +712,7 @@ interface DocxEditorController {
     documentLoadNonce: number;
     fileName: string;
     status: string;
+    importError?: Error;
     isImporting: boolean;
     documentTheme: DocxDocumentTheme;
     selection: DocxEditorSelection;

package/dist/index.d.ts

@@ -712,6 +712,7 @@ interface DocxEditorController {
     documentLoadNonce: number;
     fileName: string;
     status: string;
+    importError?: Error;
     isImporting: boolean;
     documentTheme: DocxDocumentTheme;
     selection: DocxEditorSelection;

package/dist/index.js

@@ -12178,76 +12178,7 @@ var defaultStarterModel = {
   nodes: [
     {
       type: "paragraph",
-      style: { headingLevel: 1, styleId: "Heading1", styleName: "Heading 1" },
-      children: [
-        { type: "text", text: "React DOCX WYSIWYG", style: { bold: true } }
-      ]
-    },
-    {
-      type: "paragraph",
-      children: [
-        {
-          type: "text",
-          text: "Import a .docx, edit styles from the toolbar, and export.",
-          style: { highlight: "yellow" }
-        }
-      ]
-    },
-    {
-      type: "table",
-      style: {
-        borders: createDefaultEditorTableBorders()
-      },
-      rows: [
-        {
-          type: "table-row",
-          cells: [
-            {
-              type: "table-cell",
-              style: { backgroundColor: "#eef2ff" },
-              nodes: [
-                {
-                  type: "paragraph",
-                  children: [{ type: "text", text: "Header A" }]
-                }
-              ]
-            },
-            {
-              type: "table-cell",
-              style: { backgroundColor: "#eef2ff" },
-              nodes: [
-                {
-                  type: "paragraph",
-                  children: [{ type: "text", text: "Header B" }]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "table-row",
-          cells: [
-            {
-              type: "table-cell",
-              nodes: [
-                {
-                  type: "paragraph",
-                  children: [{ type: "text", text: "Row 1" }]
-                }
-              ]
-            },
-            {
-              type: "table-cell",
-              nodes: [
-                {
-                  type: "paragraph",
-                  children: [{ type: "text", text: "Value" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
+      children: [{ type: "text", text: "" }]
     }
   ],
   metadata: {
@@ -12330,6 +12261,9 @@ var defaultStarterModel = {
     defaultParagraphStyleId: "Normal"
   }
 };
+function createBlankDocumentModel() {
+  return cloneDocModel(defaultStarterModel);
+}
 function textRuns2(paragraph) {
   return paragraph.children.filter(
     (child) => child.type === "text"
@@ -24888,6 +24822,7 @@ function useDocxEditor(options = {}) {
   const [status, setStatus] = React.useState(
     options.initialStatus ?? "Ready"
   );
+  const [importError, setImportError] = React.useState();
   const [isImporting, setIsImporting] = React.useState(false);
   const [documentTheme, setDocumentThemeState] = React.useState(options.initialDocumentTheme ?? "light");
   const [showTrackedChanges, setShowTrackedChangesState] = React.useState(options.initialShowTrackedChanges ?? false);
@@ -25405,13 +25340,35 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
+  const replaceDocumentWithImportError = React.useCallback(
+    (fileName2, error) => {
+      unloadEmbeddedFonts();
+      setModel(createBlankDocumentModel());
+      setDocumentLoadNonce((current) => current + 1);
+      setHistory({ past: [], future: [] });
+      setHistoryRestoreRequest(void 0);
+      setBasePackage(void 0);
+      setFileName(fileName2);
+      setSelection({ kind: "paragraph", nodeIndex: 0 });
+      setActiveTextRangeState(void 0);
+      setPendingRunStyle(void 0);
+      setSelectedFormFieldLocation(void 0);
+      setImportError(error);
+      setStatus(`Failed to load file: ${error.message}`);
+    },
+    [unloadEmbeddedFonts]
+  );
   const importDocxFile = React.useCallback(
     async (file) => {
       if (!/\.docx$/i.test(file.name)) {
-        setStatus("Only .docx files are supported");
+        replaceDocumentWithImportError(
+          file.name,
+          new Error("Only .docx files are supported")
+        );
         return;
       }
       setIsImporting(true);
+      setImportError(void 0);
       setStatus(`Loading ${file.name}...`);
       try {
         const buffer = await file.arrayBuffer();
@@ -25428,16 +25385,16 @@ function useDocxEditor(options = {}) {
         setActiveTextRangeState(void 0);
         setPendingRunStyle(void 0);
         setSelectedFormFieldLocation(void 0);
+        setImportError(void 0);
         setStatus(`Loaded ${file.name}`);
       } catch (error) {
-        setStatus(
-          `Failed to load file: ${error instanceof Error ? error.message : "Unknown error"}`
-        );
+        const nextError = error instanceof Error ? error : new Error("Unknown error");
+        replaceDocumentWithImportError(file.name, nextError);
       } finally {
         setIsImporting(false);
       }
     },
-    [loadEmbeddedFontsFromPackage]
+    [loadEmbeddedFontsFromPackage, replaceDocumentWithImportError]
   );
   const newDocument = React.useCallback(() => {
     unloadEmbeddedFonts();
@@ -25451,6 +25408,7 @@ function useDocxEditor(options = {}) {
     setSelectedFormFieldLocation(void 0);
     setHistory({ past: [], future: [] });
     setHistoryRestoreRequest(void 0);
+    setImportError(void 0);
     setStatus("Created new document");
   }, [unloadEmbeddedFonts]);
   const exportDocx = React.useCallback(() => {
@@ -28359,6 +28317,7 @@ function useDocxEditor(options = {}) {
     documentLoadNonce,
     fileName,
     status,
+    importError,
     isImporting,
     documentTheme,
     trackedChanges,
@@ -45338,6 +45297,35 @@ ${currentText.slice(end)}`;
             children: "Drop .docx anywhere to replace current document"
           }
         ) : null,
+        editor.importError ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            "data-docx-import-error": "true",
+            style: {
+              position: "absolute",
+              top: 24,
+              left: "50%",
+              transform: "translateX(-50%)",
+              zIndex: 80,
+              width: "min(520px, calc(100% - 32px))",
+              display: "grid",
+              gap: 6,
+              padding: "12px 14px",
+              borderRadius: 8,
+              border: `1px solid ${editor.documentTheme === "dark" ? "rgba(248, 113, 113, 0.42)" : "rgba(185, 28, 28, 0.26)"}`,
+              backgroundColor: editor.documentTheme === "dark" ? "rgba(69, 10, 10, 0.96)" : "rgba(254, 242, 242, 0.98)",
+              color: editor.documentTheme === "dark" ? "#fee2e2" : "#7f1d1d",
+              boxShadow: editor.documentTheme === "dark" ? "0 12px 28px rgba(2, 6, 23, 0.44)" : "0 12px 28px rgba(127, 29, 29, 0.12)",
+              fontSize: 13,
+              lineHeight: 1.35
+            },
+            children: [
+              /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children: "Failed to load DOCX" }),
+              /* @__PURE__ */ jsx("span", { style: { overflowWrap: "anywhere" }, children: editor.importError.message })
+            ]
+          }
+        ) : null,
         tableMoveDropPreview && !isReadOnly ? /* @__PURE__ */ jsx(
           "div",
           {