Use papaParse, support multi-line paste

Author: XingY

packages/components/package-lock.json

@@ -75,7 +75,8 @@
     "react-select": "~5.10.2",
     "react-treebeard": "~3.2.4",
     "vis-data": "~8.0.3",
-    "vis-network": "~10.0.2"
+    "vis-network": "~10.0.2",
+    "papaparse": "5.5.3"
   },
   "devDependencies": {
     "@labkey/build": "9.0.0",

packages/components/package.json

@@ -1137,6 +1137,31 @@ describe('insertPastedData', () => {
         );
     });
 
+    test('pasting multi-line value', async () => {
+        const em = baseEditorModel.applyChanges({
+            selectionCells: [genCellKey(fkOne, 0)],
+            selectedColIdx: 0,
+            selectedRowIdx: 2,
+        });
+        const changes = await validateAndInsertPastedData(
+            em,
+            '"line1\nline2"',
+            undefined,
+            true,
+            true,
+            undefined,
+            true
+        );
+        const cellValues = changes.cellValues;
+        expect(cellValues.get(genCellKey(fkOne, 2))).toEqual(
+            List([
+                { display: 'line1\nline2', raw: 'line1\nline2' }
+            ]));
+
+        const cellMessages = changes.cellMessages;
+        expect(cellMessages.get(genCellKey(fkOne, 2))).toBeUndefined();
+    });
+
     test('pasting multi values', async () => {
         const em = baseEditorModel.applyChanges({
             selectionCells: [genCellKey(mvtc, 0)],
@@ -1248,24 +1273,33 @@ describe('insertPastedData', () => {
             selectedColIdx: 3,
             selectedRowIdx: 0,
         });
-        const changes = await validateAndInsertPastedData(em, 'A,B', undefined, true, true, undefined, true);
-        // 'A,B' exactly matches a validValue, treated as a single value (not split on comma)
+        const changes = await validateAndInsertPastedData(em, '"A,B"', undefined, true, true, undefined, true);
         expect(changes.cellValues.get(genCellKey(mvtc, 0))).toEqual(List([{ display: 'A,B', raw: 'A,B' }]));
         expect(changes.cellMessages.get(genCellKey(mvtc, 0))).toBeUndefined();
     });
 
-    test('pasting exactly A,B,C without quote into mvtc matches single valid value', async () => {
+    test('pasting exactly A,B,C into mvtc matches single valid value', async () => {
         const em = baseEditorModel.applyChanges({
             selectionCells: [genCellKey(mvtc, 0)],
             selectedColIdx: 3,
             selectedRowIdx: 0,
         });
-        const changes = await validateAndInsertPastedData(em, 'A,B,C', undefined, true, true, undefined, true);
-        // 'A,B' exactly matches a validValue, treated as a single value (not split on comma)
+        const changes = await validateAndInsertPastedData(em, '"A,B,C"', undefined, true, true, undefined, true);
         expect(changes.cellValues.get(genCellKey(mvtc, 0))).toEqual(List([{ display: 'A,B,C', raw: 'A,B,C' }]));
         expect(changes.cellMessages.get(genCellKey(mvtc, 0))).toBeUndefined();
     });
 
+    test('pasting escaped "A,B,C" into mvtc matches single valid value', async () => {
+        const em = baseEditorModel.applyChanges({
+            selectionCells: [genCellKey(mvtc, 0)],
+            selectedColIdx: 3,
+            selectedRowIdx: 0,
+        });
+        const changes = await validateAndInsertPastedData(em, '"""A,B,C"""', undefined, true, true, undefined, true);
+        expect(changes.cellValues.get(genCellKey(mvtc, 0))).toEqual(List([{ display: '"A,B,C"', raw: '"A,B,C"' }]));
+        expect(changes.cellMessages.get(genCellKey(mvtc, 0))).toBeUndefined();
+    });
+
     test('pasting A, B with space into mvtc parses as two values', async () => {
         const em = baseEditorModel.applyChanges({
             selectionCells: [genCellKey(mvtc, 0)],
@@ -1317,7 +1351,7 @@ describe('insertPastedData', () => {
         });
         const changes = await validateAndInsertPastedData(
             em,
-            'A,B\n"A,B",cc\nA,B,cc',
+            '"A,B"\n"A,B",cc\nA,B,cc',
             undefined,
             true,
             true,

packages/components/src/internal/components/editable/actions.test.ts

@@ -1,6 +1,7 @@
 import { Filter, getServerContext, QueryKey, Utils } from '@labkey/api';
 import { fromJS, List, Map, OrderedMap } from 'immutable';
 import { addDays, subDays } from 'date-fns';
+import Papa from 'papaparse';
 
 import { ExtendedMap } from '../../../public/ExtendedMap';
 import { QueryColumn, QueryLookup } from '../../../public/QueryColumn';
@@ -11,6 +12,7 @@ import {
     caseInsensitive,
     isFloat,
     isInteger,
+    isSimpleQuotedMultiLine,
     joinMultiValueForExport,
     parseScientificInt,
     quoteValueWithDelimiters,
@@ -1303,7 +1305,8 @@ export function dragFillEvent(
         forUpdate,
         targetContainerPath,
         false,
-        selectionToFill
+        selectionToFill,
+        true
     );
 }
 
@@ -1418,20 +1421,40 @@ function parsePaste(value: string): ParsePastePayload {
     let numCols = 0;
     let data = List<List<string>>();
 
-    if (value === undefined || value === null || typeof value !== 'string') {
+    if (value === undefined || value == null || typeof value !== 'string') {
         return { data, numCols, numRows: 0 };
     }
 
     // remove trailing newline from pasted data to avoid creating an empty row of cells
     if (value.endsWith('\n')) value = value.substring(0, value.length - 1);
 
-    value.split('\n').forEach(rv => {
-        const columns = List(rv.split('\t'));
-        if (numCols < columns.size) {
-            numCols = columns.size;
+    if (value.indexOf('"') === -1 || isSimpleQuotedMultiLine(value)) {
+        // parse tsv ONLY if the copied string doesn't contain "
+        // quoteChar will be stripped during TSV parsing, resulting in incorrect parsed data
+        const rows = Papa.parse(value, { delimiter: '\t' }).data;
+        if (!rows || rows.length === 0) {
+            return { data, numCols, numRows: 0 };
         }
-        data = data.push(columns);
-    });
+
+        rows.forEach(row => {
+            const columns : List<string> = List(row)
+            if (numCols < columns.size) {
+                numCols = columns.size;
+            }
+            data = data.push(columns);
+        });
+    }
+    else {
+        // fall back to line by line processing without parsing, to preserver quotes
+        value.split('\n').forEach(rv => {
+            const columns = List(rv.split('\t'));
+            if (numCols < columns.size) {
+                numCols = columns.size;
+            }
+            data = data.push(columns);
+        });
+    }
+
 
     // Normalize the number columns in each row in case a user pasted rows with different numbers of columns in them
     data = data
@@ -1530,7 +1553,7 @@ async function insertPastedData(
                     const unmatched: string[] = [];
                     const values: ValueDescriptor[] = [];
 
-                    const parsedValues = splitMultiValueForImport(val).sort(caseSensitiveNaturalSort);
+                    const parsedValues = splitMultiValueForImport(val, ',', true, true).sort(caseSensitiveNaturalSort);
                     const foundValues = new Set<string>();
 
                     // GitHub Issue 942: Add error for duplicate values

packages/components/src/internal/components/editable/actions.ts

@@ -47,7 +47,6 @@ export const isSelectAll = (event: KeyboardEvent<any>): boolean => isMetaKeyEven
 
 export function setCopyValue(event: any, value: string): boolean {
     if (isEvent(event)) {
-        console.log(value);
         (event.clipboardData || window['clipboardData']).setData('text/plain', value);
         return true;
     }