1.1.3 - upgrading csv parsing/sanitization process

Author: OvidijusParsiunas

component/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",

component/package.json

@@ -7,11 +7,24 @@ export class CSVImport {
     return rowsOfData.map((row) => row.concat(Array(largestRowLength).fill('')).slice(0, largestRowLength));
   }
 
-  private static parseDataFromRow(row: string, rowsOfData: string[][], largestRowLength: number) {
-    const data = row.split(',');
-    if (data.length > 0) {
-      rowsOfData.push(data);
-      if (data.length > largestRowLength) largestRowLength = data.length;
+  private static splitRow(row: string) {
+    // Matches commas outside of double-quotes
+    const regex = /("[^"]*"|[^,]+)(,|$)/g;
+    const rowCells: string[] = [];
+    row.replace(regex, (_, value) => {
+      rowCells.push(value);
+      // Return an empty string to continue the iteration
+      return '';
+    });
+
+    return rowCells;
+  }
+
+  private static parseDataFromRow(row: string, cells: string[][], largestRowLength: number) {
+    const rowCells = CSVImport.splitRow(row);
+    if (rowCells.length > 0) {
+      cells.push(rowCells);
+      if (rowCells.length > largestRowLength) largestRowLength = rowCells.length;
     }
     return largestRowLength;
   }
@@ -20,12 +33,12 @@ export class CSVImport {
   private static parseCSV(csvText: string) {
     try {
       const rows = csvText.split(/\r\n|\n/) as string[];
-      const rowsOfData: string[][] = [];
+      const cells: string[][] = [];
       let largestRowLength = 0;
       rows.forEach((row) => {
-        largestRowLength = CSVImport.parseDataFromRow(row, rowsOfData, largestRowLength);
+        largestRowLength = CSVImport.parseDataFromRow(row, cells, largestRowLength);
       });
-      return CSVImport.getPaddedArray(rowsOfData, largestRowLength);
+      return CSVImport.getPaddedArray(cells, largestRowLength);
     } catch (errorMessage) {
       console.error('Incorrect format');
       return null;

component/src/utils/outerTableComponents/files/CSV/CSVImport.ts

@@ -13,7 +13,7 @@ export class OverwriteCellsViaCSVOnPaste {
 
   // prettier-ignore
   public static overwrite(at: ActiveTable,
-      clipboardText: string, event: ClipboardEvent, rowIndex: number, columnIndex: number,) {
+      clipboardText: string, event: ClipboardEvent, rowIndex: number, columnIndex: number) {
     event.preventDefault();
     const CSV = ParseCSVClipboardText.parse(clipboardText);
     OverwriteCellsViaCSVOnPaste.focusOriginalCellAfterProcess(at,

component/src/utils/paste/CSV/overwriteCellsViaCSVOnPaste.ts

@@ -35,7 +35,9 @@ export class ParseCSVClipboardText {
     const linesOfText: string[] = processedText.split(newLine);
     return linesOfText.map((lineOfText: string) => {
       // row indexes in worksheets end with \\t\\t\\t\\t\\t
-      return lineOfText.split(tab);
+      const cells = lineOfText.split(tab);
+      // when pasting data with ", it is parsed as \\"
+      return cells.map((cell) => cell.replace(/\\"/g, ''));
     });
   }
 }

component/src/utils/paste/CSV/parseCSVClipboardText.ts

@@ -1,6 +1,6 @@
 {
   "name": "active-table-react",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Active Table wrapper for React",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",

other-packages/react/package-lock.json

@@ -19,5 +19,5 @@ npm install active-table-react
 Access the component via CDN:
 
 ```
-https://unpkg.com/[email protected].2/dist/activeTable.bundle.js
+https://unpkg.com/[email protected].3/dist/activeTable.bundle.js
 ```

other-packages/react/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "^2.3.0",
     "@docusaurus/theme-search-algolia": "^2.3.1",
     "@mdx-js/react": "^1.6.22",
-    "active-table-react": "^1.1.2",
+    "active-table-react": "^1.1.3",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",