fix: standardize the copy html structure to avoid too many meaningles…

…s dom node attributes (#570)
teableio · Apr 15, 2024 · 9cfe841 · 9cfe841
1 parent 6a81790
commit 9cfe841
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 38 deletions.
diff --git a/apps/nextjs-app/src/features/app/utils/clipboard.spec.ts b/apps/nextjs-app/src/features/app/utils/clipboard.spec.ts
@@ -26,7 +26,7 @@ vi.mock('@teable/core', () => {
 
 describe('clipboard', () => {
  const html =
- '<table data-teable-html-marker="1"><thead><tr><td id="%22fldziUf9QuQjkbfMuG5%22" name="%22Name%22" isPrimary="true" columnMeta="%7B%22viwE0sl0GqGdWaBqwFi%22%3A%7B%22order%22%3A0.5%7D%7D" dbFieldName="%22Name_fldziUf9QuQjkbfMuG5%22" dbFieldType="%22TEXT%22" type="%22singleLineText%22" options="%7B%7D" cellValueType="%22string%22">Name</td><td id="%22fldpsQvHI4ugP2luizP%22" name="%22Count%22" columnMeta="%7B%22viwE0sl0GqGdWaBqwFi%22%3A%7B%22order%22%3A1%7D%7D" dbFieldName="%22Count_fldpsQvHI4ugP2luizP%22" dbFieldType="%22REAL%22" type="%22number%22" options="%7B%22formatting%22%3A%7B%22type%22%3A%22decimal%22%2C%22precision%22%3A0%7D%7D" cellValueType="%22number%22">Count</td><td id="%22fldGTKfZvXNXeMJ6nqu%22" name="%22Status%22" columnMeta="%7B%22viwE0sl0GqGdWaBqwFi%22%3A%7B%22order%22%3A2%7D%7D" dbFieldName="%22Status_fldGTKfZvXNXeMJ6nqu%22" dbFieldType="%22TEXT%22" options="%7B%22choices%22%3A%5B%7B%22name%22%3A%22light%22%2C%22id%22%3A%22cho2caYhPrI%22%2C%22color%22%3A%22grayBright%22%7D%2C%7B%22name%22%3A%22medium%22%2C%22id%22%3A%22chor2ob8aU7%22%2C%22color%22%3A%22yellowBright%22%7D%2C%7B%22name%22%3A%22heavy%22%2C%22id%22%3A%22choArPr57sO%22%2C%22color%22%3A%22tealBright%22%7D%5D%7D" type="%22singleSelect%22" cellValueType="%22string%22">Status</td></tr></thead><tbody><tr><td>John</td><td>20</td><td>light</td></tr><tr><td>Tom</td><td>30</td><td>medium</td></tr><tr><td>Bob</td><td>40</td><td>heavy</td></tr></tbody></table>';
+ '<table data-teable-html-marker="1"><thead><tr><td id="fldziUf9QuQjkbfMuG5" data-field="%7B%22id%22%3A%22fldziUf9QuQjkbfMuG5%22%2C%22name%22%3A%22Name%22%2C%22isPrimary%22%3Atrue%2C%22columnMeta%22%3A%7B%22viwE0sl0GqGdWaBqwFi%22%3A%7B%22order%22%3A0.5%7D%7D%2C%22dbFieldName%22%3A%22Name_fldziUf9QuQjkbfMuG5%22%2C%22dbFieldType%22%3A%22TEXT%22%2C%22type%22%3A%22singleLineText%22%2C%22options%22%3A%7B%7D%2C%22cellValueType%22%3A%22string%22%7D">Name</td><td id="fldpsQvHI4ugP2luizP" data-field="%7B%22id%22%3A%22fldpsQvHI4ugP2luizP%22%2C%22name%22%3A%22Count%22%2C%22columnMeta%22%3A%7B%22viwE0sl0GqGdWaBqwFi%22%3A%7B%22order%22%3A1%7D%7D%2C%22dbFieldName%22%3A%22Count_fldpsQvHI4ugP2luizP%22%2C%22dbFieldType%22%3A%22REAL%22%2C%22type%22%3A%22number%22%2C%22options%22%3A%7B%22formatting%22%3A%7B%22type%22%3A%22decimal%22%2C%22precision%22%3A0%7D%7D%2C%22cellValueType%22%3A%22number%22%7D">Count</td><td id="fldGTKfZvXNXeMJ6nqu" data-field="%7B%22id%22%3A%22fldGTKfZvXNXeMJ6nqu%22%2C%22name%22%3A%22Status%22%2C%22columnMeta%22%3A%7B%22viwE0sl0GqGdWaBqwFi%22%3A%7B%22order%22%3A2%7D%7D%2C%22dbFieldName%22%3A%22Status_fldGTKfZvXNXeMJ6nqu%22%2C%22dbFieldType%22%3A%22TEXT%22%2C%22options%22%3A%7B%22choices%22%3A%5B%7B%22name%22%3A%22light%22%2C%22id%22%3A%22cho2caYhPrI%22%2C%22color%22%3A%22grayBright%22%7D%2C%7B%22name%22%3A%22medium%22%2C%22id%22%3A%22chor2ob8aU7%22%2C%22color%22%3A%22yellowBright%22%7D%2C%7B%22name%22%3A%22heavy%22%2C%22id%22%3A%22choArPr57sO%22%2C%22color%22%3A%22tealBright%22%7D%5D%7D%2C%22type%22%3A%22singleSelect%22%2C%22cellValueType%22%3A%22string%22%7D">Status</td></tr></thead><tbody><tr><td>John</td><td>20</td><td>light</td></tr><tr><td>Tom</td><td>30</td><td>medium</td></tr><tr><td>Bob</td><td>40</td><td>heavy</td></tr></tbody></table>';
 
  const expectedHeader = [
  {

diff --git a/apps/nextjs-app/src/features/app/utils/clipboard.ts b/apps/nextjs-app/src/features/app/utils/clipboard.ts
@@ -1,5 +1,4 @@
 import { fieldVoSchema, parseClipboardText, type IFieldVo } from '@teable/core';
-import { mapValues } from 'lodash';
 import { fromZodError } from 'zod-validation-error';
 
 const teableHtmlMarker = 'data-teable-html-marker';
@@ -13,10 +12,7 @@ export const serializerHtml = (data: string, headers: IFieldVo[]) => {
  .join('');
  const headerContent = headers
  .map((header) => {
- const attrs = Object.entries(header)
- .map(([key, value]) => `${key}="${encodeURIComponent(JSON.stringify(value))}"`)
- .join(' ');
- return `<td ${attrs}>${header.name}</td>`;
+ return `<td id="${header.id}" data-field="${encodeURIComponent(JSON.stringify(header))}">${header.name}</td>`;
  })
  .join('');
 
@@ -36,38 +32,9 @@ export const extractTableHeader = (html?: string) => {
  const headers = Array.from(headerCells);
  let error = '';
  const result = headers.map((cell) => {
- const id = cell.getAttribute('id');
- const name = cell.getAttribute('name');
- const isPrimary = cell.getAttribute('isPrimary');
- const columnMeta = cell.getAttribute('columnMeta');
- const dbFieldName = cell.getAttribute('dbFieldName');
- const dbFieldType = cell.getAttribute('dbFieldType');
- const type = cell.getAttribute('type');
- const options = cell.getAttribute('options');
- const cellValueType = cell.getAttribute('cellValueType');
- const isComputed = cell.getAttribute('isComputed');
- const isLookup = cell.getAttribute('isLookup');
- const isMultipleCellValue = cell.getAttribute('isMultipleCellValue');
- const fieldVo = mapValues(
- {
- id,
- name,
- isPrimary,
- columnMeta,
- dbFieldName,
- dbFieldType,
- type,
- options,
- cellValueType,
- isComputed,
- isLookup,
- isMultipleCellValue,
- },
- (value) => {
- const encodeValue = value ? decodeURIComponent(value) : undefined;
- return encodeValue ? JSON.parse(encodeValue) : undefined;
- }
- );
+ const fieldVoStr = cell.getAttribute('data-field');
+ const fieldVo = fieldVoStr ? JSON.parse(decodeURIComponent(fieldVoStr)) : undefined;
+
  const validate = fieldVoSchema.safeParse(fieldVo);
  if (validate.success) {
  return fieldVo;