fix: csv and xlsx import (#315)

Author: maitrakhatri

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@fileverse-dev/dsheet",
   "private": false,
   "description": "DSheet",
-  "version": "1.2.98",
+  "version": "1.2.99",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "exports": {
@@ -35,7 +35,7 @@
   "dependencies": {
     "@fileverse-dev/dsheets-templates": "^0.0.29",
     "@fileverse-dev/formulajs": "4.4.49",
-    "@fileverse-dev/fortune-react": "1.3.0",
+    "@fileverse-dev/fortune-react": "^1.3.1",
     "@fileverse/ui": "^5.0.0",
     "classnames": "^2.5.1",
     "exceljs": "^4.4.0",
@@ -79,4 +79,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }
-}
+}

package.json

@@ -93,6 +93,137 @@ export const useXLSXImport = ({
         //@ts-expect-error, later
         await workbook.xlsx.load(arrayBuffer);
         const worksheet = workbook.getWorksheet(1);
+        // Extract hyperlinks, freeze info, and cell formatting from all worksheets
+        const hyperlinksBySheet: Record<
+          number,
+          Record<string, { linkType: string; linkAddress: string }>
+        > = {};
+        const frozenBySheet: Record<
+          number,
+          {
+            type:
+              | 'row'
+              | 'column'
+              | 'both'
+              | 'rangeRow'
+              | 'rangeColumn'
+              | 'rangeBoth';
+            range: { row_focus: number; column_focus: number };
+          }
+        > = {};
+        const cellStylesBySheet: Record<
+          number,
+          Record<
+            string,
+            {
+              bl?: number;
+              it?: number;
+              fs?: number;
+              ff?: string;
+              fc?: string;
+              bg?: string;
+              un?: number;
+            }
+          >
+        > = {};
+        workbook.eachSheet((ws, sheetIndex) => {
+          const idx = sheetIndex - 1; // exceljs is 1-based
+
+          // Hyperlinks
+          const sheetHyperlinks: Record<
+            string,
+            { linkType: string; linkAddress: string }
+          > = {};
+
+          // Freeze panes from worksheet views
+          const views = ws.views;
+          if (views && views.length > 0) {
+            const view = views[0];
+            if (view.state === 'frozen') {
+              const xSplit = view.xSplit || 0;
+              const ySplit = view.ySplit || 0;
+              let type: 'rangeRow' | 'rangeColumn' | 'rangeBoth' | null = null;
+              if (xSplit > 0 && ySplit > 0) type = 'rangeBoth';
+              else if (ySplit > 0) type = 'rangeRow';
+              else if (xSplit > 0) type = 'rangeColumn';
+              if (type) {
+                frozenBySheet[idx] = {
+                  type,
+                  range: {
+                    row_focus: ySplit - 1,
+                    column_focus: xSplit - 1,
+                  },
+                };
+              }
+            }
+          }
+
+          // Cell-level formatting and hyperlinks
+          const styles: Record<
+            string,
+            {
+              bl?: number;
+              it?: number;
+              fs?: number;
+              ff?: string;
+              fc?: string;
+              bg?: string;
+              un?: number;
+            }
+          > = {};
+          ws.eachRow({ includeEmpty: false }, (row, rowNumber) => {
+            row.eachCell({ includeEmpty: false }, (cell, colNumber) => {
+              const key = `${rowNumber - 1}_${colNumber - 1}`;
+
+              if (cell.hyperlink) {
+                sheetHyperlinks[key] = {
+                  linkType: 'webpage',
+                  linkAddress: cell.hyperlink,
+                };
+              }
+
+              // Extract cell formatting
+              const font = cell.style?.font;
+              const fill = cell.style?.fill;
+              const cellStyle: Record<string, string | number> = {};
+
+              if (font) {
+                if (font.bold) cellStyle.bl = 1;
+                if (font.italic) cellStyle.it = 1;
+                if (font.underline) cellStyle.un = 1;
+                if (font.size) cellStyle.fs = font.size;
+                if (font.name) cellStyle.ff = font.name;
+                if (font.color?.argb) {
+                  const argb = font.color.argb;
+                  const hex = '#' + argb.substring(argb.length - 6);
+                  cellStyle.fc = hex;
+                }
+              }
+              if (
+                fill?.type === 'pattern' &&
+                fill.pattern === 'solid' &&
+                fill.fgColor
+              ) {
+                if (fill.fgColor.argb) {
+                  const argb = fill.fgColor.argb;
+                  const hex = '#' + argb.substring(argb.length - 6);
+                  cellStyle.bg = hex;
+                }
+              }
+              if (Object.keys(cellStyle).length > 0) {
+                styles[key] = cellStyle;
+              }
+            });
+          });
+
+          if (Object.keys(sheetHyperlinks).length > 0) {
+            hyperlinksBySheet[idx] = sheetHyperlinks;
+          }
+          if (Object.keys(styles).length > 0) {
+            cellStylesBySheet[idx] = styles;
+          }
+        });
+
         dropdownInfo =
           worksheet
             ?.getSheetValues()
@@ -154,7 +285,7 @@ export const useXLSXImport = ({
             }
             const sheetArray = ydocRef.current.getArray(dsheetId);
             const localSheetsArray = Array.from(sheetArray) as Sheet[];
-            sheets = sheets.map((sheet) => {
+            sheets = sheets.map((sheet, sheetIndex) => {
               const lastCell = sheet?.celldata?.[sheet.celldata.length - 1];
 
               const lastRow = lastCell?.r ?? 0;
@@ -164,31 +295,63 @@ export const useXLSXImport = ({
               sheet.column = Math.max(lastCol, 36);
 
               if (!sheet.id) {
-                sheet.id = sheetEditorRef.current?.getSettings().generateSheetId();
+                sheet.id = sheetEditorRef.current
+                  ?.getSettings()
+                  .generateSheetId();
               }
               if (sheet.calcChain) {
                 sheet.calcChain = sheet.calcChain.map((chain) => {
-                  delete chain.id
-                  delete chain.index
-                  chain.id = sheet.id
-                  return chain
-                })
+                  delete chain.id;
+                  delete chain.index;
+                  chain.id = sheet.id;
+                  return chain;
+                });
+              }
+              // Attach freeze pane info
+              if (frozenBySheet[sheetIndex]) {
+                sheet.frozen = frozenBySheet[sheetIndex];
+              }
+              // Attach hyperlinks extracted from exceljs for this sheet
+              if (hyperlinksBySheet[sheetIndex]) {
+                sheet.hyperlink = {
+                  ...(sheet.hyperlink || {}),
+                  ...hyperlinksBySheet[sheetIndex],
+                };
               }
-              return sheet
-            })
+              // Apply cell formatting from exceljs (hyperlink styling, bold, italic, bg, etc.)
+              const hlKeys = hyperlinksBySheet[sheetIndex];
+              const styleKeys = cellStylesBySheet[sheetIndex];
+              if ((hlKeys || styleKeys) && sheet.celldata) {
+                for (const cell of sheet.celldata) {
+                  const key = `${cell.r}_${cell.c}`;
+                  if (cell.v) {
+                    // Apply formatting extracted from exceljs
+                    if (styleKeys?.[key]) {
+                      Object.assign(cell.v, styleKeys[key]);
+                    }
+                    // Override font color + underline for hyperlink cells
+                    if (hlKeys?.[key]) {
+                      cell.v.fc = 'rgb(0, 0, 255)';
+                      cell.v.un = 1;
+                    }
+                  }
+                }
+              }
+              return sheet;
+            });
 
             let combinedSheets;
 
             if (importType === 'merge-current-dsheet') {
-              combinedSheets = [...localSheetsArray, ...sheets]
+              combinedSheets = [...localSheetsArray, ...sheets];
             } else {
-              combinedSheets = [...sheets]
+              combinedSheets = [...sheets];
             }
 
             combinedSheets = combinedSheets.map((sheet, index) => {
               sheet.order = index;
-              return sheet
-            })
+              return sheet;
+            });
 
             setSheetData(combinedSheets);
             ydocRef.current.transact(() => {

package/hooks/use-xlsx-import.tsx

@@ -4,7 +4,6 @@ import { Sheet } from '@fileverse-dev/fortune-react';
 import React from 'react';
 import * as Y from 'yjs';
 import { WorkbookInstance } from '@fileverse-dev/fortune-react';
-import { encode } from 'punycode';
 
 export const handleCSVUpload = (
   event: React.ChangeEventHandler<HTMLInputElement> | undefined,
@@ -15,7 +14,7 @@ export const handleCSVUpload = (
   sheetEditorRef: React.RefObject<WorkbookInstance | null>,
   updateDocumentTitle?: (title: string) => void,
   fileArg?: File,
-  importType?: string
+  importType?: string,
 ) => {
   const input = event?.target;
   if (!input?.files?.length && !fileArg) {
@@ -85,33 +84,41 @@ export const handleCSVUpload = (
           // Add data rows
           let maxRow = 0;
           let maxCol = 0;
+          const urlRegex = /^https?:\/\/\S+$/i;
+          const hyperlinkMap: Record<
+            string,
+            { linkType: string; linkAddress: string }
+          > = {};
           results.data.forEach((row, rowIndex) => {
             headers.forEach((header, colIndex) => {
+              const cellValue = (row as Record<string, string | number | null>)[
+                header
+              ];
+              const cellStr =
+                cellValue !== null && cellValue !== undefined
+                  ? cellValue.toString()
+                  : null;
+              const isUrl = cellStr && urlRegex.test(cellStr);
               cellData.push({
                 r: rowIndex + 1, // +1 because header is row 0
                 c: colIndex,
                 v: {
-                  // @ts-expect-error later
-                  m:
-                    (row as Record<string, string | null>)[header] !== null
-                      ? (row as Record<string, string | null>)[
-                        header
-                      ]?.toString()
-                      : null,
+                  m: cellStr,
                   ct: {
                     fa: 'General',
                     t: 'g',
                   },
-                  // @ts-expect-error later
-                  v:
-                    (row as Record<string, string | number | null>)[header] !==
-                      null
-                      ? (row as Record<string, string | number | null>)[
-                        header
-                      ]?.toString()
-                      : null,
+                  v: cellStr,
+                  ...(isUrl && { fc: 'rgb(0, 0, 255)', un: 1 }),
                 },
               });
+              // Detect URLs and store as hyperlinks
+              if (isUrl) {
+                hyperlinkMap[`${rowIndex + 1}_${colIndex}`] = {
+                  linkType: 'webpage',
+                  linkAddress: cellStr,
+                };
+              }
               maxRow = Math.max(maxRow, rowIndex + 1);
               maxCol = Math.max(maxCol, colIndex + 1);
             });
@@ -139,6 +146,9 @@ export const handleCSVUpload = (
             config: {
               merge: {}, // No merge cells for CSV by default
             },
+            ...(Object.keys(hyperlinkMap).length > 0 && {
+              hyperlink: hyperlinkMap,
+            }),
           };
 
           updateDocumentTitle?.(file.name);