feat: add normal html parsing support for copy and paste (#1675)

* feat: add normal html parsing support for copy and paste

* Update apps/nextjs-app/src/features/app/utils/clipboard.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Boris <boris2code@outlook.com>

* Update packages/core/src/utils/clipboard.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Boris <boris2code@outlook.com>

---------

Signed-off-by: Boris <boris2code@outlook.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: boris-w

apps/nestjs-backend/test/selection.e2e-spec.ts

@@ -54,8 +54,7 @@ describe('OpenAPI SelectionController (e2e)', () => {
   });
 
   afterEach(async () => {
-    const result = await permanentDeleteTable(baseId, table.id);
-    console.log('clear table: ', result);
+    await permanentDeleteTable(baseId, table.id);
   });
 
   afterAll(async () => {
@@ -726,4 +725,31 @@ describe('OpenAPI SelectionController (e2e)', () => {
       ).toEqual([user2Info.id, user1Info.id]);
     });
   });
+
+  it('paste content end with newline', async () => {
+    await apiPaste(table.id, {
+      viewId: table.defaultViewId!,
+      content: 'test\ntest2',
+      ranges: [
+        [0, 0],
+        [0, 0],
+      ],
+    });
+    await apiPaste(table.id, {
+      viewId: table.defaultViewId!,
+      content: 'test3\n',
+      ranges: [
+        [0, 0],
+        [0, 0],
+      ],
+    });
+    const records = await getRecords(table.id, {
+      viewId: table.defaultViewId!,
+    });
+    expect(records.data.records.map((r) => r.fields[table.fields[0].name])).toEqual([
+      'test3',
+      'test2',
+      undefined,
+    ]);
+  });
 });

apps/nextjs-app/src/features/app/blocks/view/grid/utils/copyAndPaste.ts

@@ -9,6 +9,7 @@ import {
   extractHtmlHeader,
   serializerHtml,
   isTeableHTML,
+  parseNormalHtml,
 } from '@/features/app/utils/clipboard';
 import { uploadFiles } from '@/features/app/utils/uploadFile';
 import { getSelectionCell } from './selection';
@@ -112,14 +113,18 @@ export const textPasteHandler = async (
     ? e.clipboardData.getData(ClipboardTypes.text)
     : '';
 
-  const cellValues = extractTableContent(html);
+  const cellValues = hasHtml
+    ? isTeableHTML(html)
+      ? extractTableContent(html)
+      : parseNormalHtml(html)
+    : [];
 
   if (header.error) {
     throw new Error(header.error);
   }
 
   await requestPaste(
-    isTeableHTML(html) ? cellValues : text,
+    hasHtml ? cellValues : text,
     rangeTypes[selection.type],
     selection.serialize(),
     header.result

apps/nextjs-app/src/features/app/utils/clipboard.ts

@@ -112,3 +112,14 @@ export const extractTableContent = (html: string) => {
   });
   return content;
 };
+
+export const parseNormalHtml = (html: string) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const table = doc.querySelector('table');
+  const rows = Array.from(table?.rows || []);
+  return rows.map((row) => {
+    const cells = Array.from(row.cells);
+    return cells.map((cell) => cell.textContent || '');
+  });
+};

packages/core/src/utils/clipboard.spec.ts

@@ -79,6 +79,20 @@ describe('clipboard', () => {
       const data = parseClipboardText('text1"\r\ntext2');
       expect(data).toEqual([['text1"'], ['text2']]);
     });
+
+    it('content start or end with newline', () => {
+      const data = parseClipboardText('text1\n');
+      expect(data).toEqual([['text1']]);
+
+      const data2 = parseClipboardText('\ntext1');
+      expect(data2).toEqual([['text1']]);
+
+      const data3 = parseClipboardText('tex"t1\n');
+      expect(data3).toEqual([['tex"t1']]);
+
+      const data4 = parseClipboardText('\ntex"t1');
+      expect(data4).toEqual([['tex"t1']]);
+    });
   });
 
   describe('stringify', () => {

packages/core/src/utils/clipboard.ts

@@ -5,6 +5,13 @@ const windowsNewline = '\r\n';
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export const parseClipboardText = (content: string) => {
   const _newline = content.includes(windowsNewline) ? windowsNewline : newline;
+  // remove the last newline or windows newline
+  if (content.endsWith(_newline)) {
+    content = content.slice(0, -1 * _newline.length);
+  }
+  if (content.startsWith(_newline)) {
+    content = content.slice(_newline.length);
+  }
   if (!content.includes('"')) {
     return content.split(_newline).map((row) => row.split(delimiter));
   }