From 6164e7bd708f71096c515979a9b2e2091810602e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Tue, 22 Nov 2022 15:44:54 -0300 Subject: [PATCH 1/2] copy cell styles --- .../roosterjs-editor-dom/lib/table/pasteTable.ts | 15 ++++++++++++--- .../test/table/pasteTableTest.ts | 10 ++++++++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/roosterjs-editor-dom/lib/table/pasteTable.ts b/packages/roosterjs-editor-dom/lib/table/pasteTable.ts index 1e8928d4312..3d9a290a45b 100644 --- a/packages/roosterjs-editor-dom/lib/table/pasteTable.ts +++ b/packages/roosterjs-editor-dom/lib/table/pasteTable.ts @@ -48,12 +48,21 @@ export default function pasteTable( for (let j = cursorCol; j < columns; j++) { let cell = currentTable.getCell(i, j); let newCell = newTable.getTd(i - cursorRow, j - cursorCol); - if (cell.td) { - moveChildNodes(cell.td, newCell!); + if (cell.td && newCell) { + moveChildNodes(cell.td, newCell); + copyCellStyle(cell.td, newCell); } else { cell.td = document.createElement('td'); } } } - currentTable.writeBack(); + + currentTable.writeBack(true /* skipApplyFormat*/); +} + +function copyCellStyle(cell: HTMLTableCellElement, styledCell: HTMLTableCellElement) { + const styles = styledCell.getAttribute('style'); + if (styles) { + cell.setAttribute('style', styles); + } } diff --git a/packages/roosterjs-editor-dom/test/table/pasteTableTest.ts b/packages/roosterjs-editor-dom/test/table/pasteTableTest.ts index e1bcf8f3ba5..4186a8d7a5b 100644 --- a/packages/roosterjs-editor-dom/test/table/pasteTableTest.ts +++ b/packages/roosterjs-editor-dom/test/table/pasteTableTest.ts @@ -5,14 +5,14 @@ const ID = 'id1'; const TABLE123 = '
123
456
789
'; + ">123456789"; /* |1|2|3| |4|5|6| |7|8|9| */ const TABLEABC = - '
abc
def
ghi
'; + "
abc
def
ghi
"; /* |a|b|c| |d|e|f| @@ -61,4 +61,10 @@ describe('PasteTable', () => { expect(node.childNodes.length).toEqual(5); expect(node.childNodes[0].childNodes.length).toEqual(5); }); + + it('Paste table | copy styles', () => { + runTest(TABLE123, TABLEABC, 0, 0); + const pivotCell = document.getElementById('pivotCell') as HTMLTableCellElement; + expect(pivotCell.style.color).toEqual('red'); + }); }); From 00257dae8c0d6fccfe7b72fe836c4a01fdcf2c97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Wed, 23 Nov 2022 18:23:57 -0300 Subject: [PATCH 2/2] save metadata --- .../lib/table/cloneCellStyles.ts | 19 +++++++++++++++++++ .../lib/table/pasteTable.ts | 12 +++--------- .../test/table/cloneCellStylesTest.ts | 16 ++++++++++++++++ 3 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 packages/roosterjs-editor-dom/lib/table/cloneCellStyles.ts create mode 100644 packages/roosterjs-editor-dom/test/table/cloneCellStylesTest.ts diff --git a/packages/roosterjs-editor-dom/lib/table/cloneCellStyles.ts b/packages/roosterjs-editor-dom/lib/table/cloneCellStyles.ts new file mode 100644 index 00000000000..5b0b37c6675 --- /dev/null +++ b/packages/roosterjs-editor-dom/lib/table/cloneCellStyles.ts @@ -0,0 +1,19 @@ +import { saveTableCellMetadata } from './tableCellInfo'; +/** + * Clone css styles from a element an set to another. + * @param cell cell that will receive the styles + * @param styledCell cell where the styles will be clone + */ + +export default function cloneCellStyles( + cell: HTMLTableCellElement, + styledCell: HTMLTableCellElement +) { + const styles = styledCell.getAttribute('style'); + if (styles) { + cell.setAttribute('style', styles); + saveTableCellMetadata(cell, { + bgColorOverride: true, + }); + } +} diff --git a/packages/roosterjs-editor-dom/lib/table/pasteTable.ts b/packages/roosterjs-editor-dom/lib/table/pasteTable.ts index 3d9a290a45b..684ffe05da0 100644 --- a/packages/roosterjs-editor-dom/lib/table/pasteTable.ts +++ b/packages/roosterjs-editor-dom/lib/table/pasteTable.ts @@ -1,3 +1,4 @@ +import cloneCellStyles from './cloneCellStyles'; import moveChildNodes from '../utils/moveChildNodes'; import VTable from './VTable'; import { NodePosition, TableOperation } from 'roosterjs-editor-types'; @@ -50,19 +51,12 @@ export default function pasteTable( let newCell = newTable.getTd(i - cursorRow, j - cursorCol); if (cell.td && newCell) { moveChildNodes(cell.td, newCell); - copyCellStyle(cell.td, newCell); + cloneCellStyles(cell.td, newCell); } else { cell.td = document.createElement('td'); } } } - currentTable.writeBack(true /* skipApplyFormat*/); -} - -function copyCellStyle(cell: HTMLTableCellElement, styledCell: HTMLTableCellElement) { - const styles = styledCell.getAttribute('style'); - if (styles) { - cell.setAttribute('style', styles); - } + currentTable.writeBack(); } diff --git a/packages/roosterjs-editor-dom/test/table/cloneCellStylesTest.ts b/packages/roosterjs-editor-dom/test/table/cloneCellStylesTest.ts new file mode 100644 index 00000000000..1e2aecb10d3 --- /dev/null +++ b/packages/roosterjs-editor-dom/test/table/cloneCellStylesTest.ts @@ -0,0 +1,16 @@ +import cloneCellStyles from '../../lib/table/cloneCellStyles'; + +describe('cloneCellStyles', () => { + function runTest(style: string) { + const cell = document.createElement('td'); + const styledCell = document.createElement('td'); + styledCell.setAttribute('style', style); + cloneCellStyles(cell, styledCell); + expect(cell.getAttribute('style')).toEqual(style); + expect(cell.getAttribute('data-editing-info')).toBe('{"bgColorOverride":true}'); + } + + it('cloneCellStyles | should clone style and add metadata', () => { + runTest('color: red'); + }); +});