From 83bd62a6dbc0adae494fecbc006c4fcbd1552f66 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 26 Dec 2023 14:36:12 +0300 Subject: [PATCH 1/7] fix colSpan rowSpan from old data object --- uui-editor/src/plugins/tablePlugin/TableCellElement.tsx | 5 +++++ uui-editor/src/plugins/tablePlugin/types.ts | 3 --- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx index 94c44fb700..ad397b85ce 100644 --- a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx +++ b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx @@ -8,6 +8,7 @@ import { import css from './TableCell.module.scss'; import { ResizeHandle } from '../../implementation/Resizable'; +import { ExtendedTTableCellElement } from './types'; export interface TableCellElementProps extends PlateElementProps { @@ -21,6 +22,10 @@ TableCellElementProps >(({ children, className, style, hideBorder, ...props }, ref) => { const { element } = props; + const el = element as ExtendedTTableCellElement; + element.colSpan = element.colSpan || el?.data.colSpan; + element.rowSpan = element.rowSpan || el?.data.rowSpan; + const { colIndex, rowIndex, diff --git a/uui-editor/src/plugins/tablePlugin/types.ts b/uui-editor/src/plugins/tablePlugin/types.ts index 30b1df146b..ba87540848 100644 --- a/uui-editor/src/plugins/tablePlugin/types.ts +++ b/uui-editor/src/plugins/tablePlugin/types.ts @@ -1,9 +1,6 @@ import { TTableCellElement } from '@udecode/plate-table'; export type ExtendedTTableCellElement = TTableCellElement & { - rowSpan?: number; - colIndex?: number; - rowIndex?: number; data: { colSpan?: number; rowSpan?: number; From 5d02cc8378a3f262a2ca15d220040b66cdefb38b Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 26 Dec 2023 17:45:11 +0300 Subject: [PATCH 2/7] prepare for header fix from plate --- uui-editor/src/plugins/tablePlugin/TableCellElement.tsx | 6 ++++-- uui-editor/src/plugins/tablePlugin/tablePlugin.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx index ad397b85ce..bb8d8ffeab 100644 --- a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx +++ b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx @@ -1,7 +1,8 @@ import React from 'react'; import cx from 'classnames'; -import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; +import { PlateElement, PlateElementProps, Value, getPluginType, useEditorRef } from '@udecode/plate-common'; import { + ELEMENT_TH, TTableCellElement, useTableCellElement, useTableCellElementResizable, useTableCellElementResizableState, useTableCellElementState, } from '@udecode/plate-table'; @@ -20,6 +21,7 @@ const TableCellElement = React.forwardRef< React.ElementRef, TableCellElementProps >(({ children, className, style, hideBorder, ...props }, ref) => { + const editor = useEditorRef(); const { element } = props; const el = element as ExtendedTTableCellElement; @@ -45,7 +47,7 @@ TableCellElementProps colSpan, }); const { rightProps, bottomProps, leftProps, hiddenLeft } = useTableCellElementResizable(resizableState); - const isHeader = element.type === 'table_header_cell'; + const isHeader = element.type === getPluginType(editor, ELEMENT_TH); const Cell = isHeader ? 'th' : 'td'; return ( diff --git a/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx b/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx index fbd933f674..cadc5e730e 100644 --- a/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx +++ b/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx @@ -9,7 +9,7 @@ import { ReactComponent as TableIcon } from '../../icons/table-add.svg'; import { PositionedToolbar } from '../../implementation/PositionedToolbar'; import { ToolbarButton } from '../../implementation/ToolbarButton'; -import { PlateEditor, getPluginOptions, getPluginType, insertNodes, someNode, useEditorRef, withoutNormalizing } from '@udecode/plate-common'; +import { PlateEditor, getPluginType, insertNodes, someNode, useEditorRef, withoutNormalizing } from '@udecode/plate-common'; import { ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TR, TablePlugin, createTablePlugin, getTableGridAbove, useTableMergeState } from '@udecode/plate-table'; import { MergeToolbarContent } from './MergeToolbarContent'; import { TableToolbarContent } from './ToolbarContent'; From 785b18562bf3b42280d677989023d4338f031e48 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 26 Dec 2023 18:31:36 +0300 Subject: [PATCH 3/7] add merged cells to example --- uui-docs/src/demoData/slateInitialValue.ts | 190 +++++++++++++++++---- 1 file changed, 157 insertions(+), 33 deletions(-) diff --git a/uui-docs/src/demoData/slateInitialValue.ts b/uui-docs/src/demoData/slateInitialValue.ts index 7d349546af..e81fd69844 100644 --- a/uui-docs/src/demoData/slateInitialValue.ts +++ b/uui-docs/src/demoData/slateInitialValue.ts @@ -840,7 +840,7 @@ export const slateInitialValue = { type: 'table', data: { cellSizes: [ - 200, 200, 183, 161, + 130, 200, 200, 183, 161, ], }, nodes: [ @@ -852,7 +852,7 @@ export const slateInitialValue = { { object: 'block', type: 'table_header_cell', - data: {}, + data: { }, nodes: [ { object: 'block', @@ -861,22 +861,34 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Name', + text: 'Department', marks: [], }, + ], }, ], - }, { + }, + { object: 'block', type: 'table_header_cell', - data: {}, + data: { colSpan: 2 }, nodes: [ { object: 'block', type: 'paragraph', data: {}, nodes: [ + { + object: 'text', + text: 'Name', + marks: [], + }, + { + object: 'text', + text: ' & ', + marks: [], + }, { object: 'text', text: 'Title', @@ -885,7 +897,9 @@ export const slateInitialValue = { ], }, ], - }, { + }, + + { object: 'block', type: 'table_header_cell', data: {}, @@ -897,16 +911,24 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Department', + text: 'Tasks', marks: [], }, ], }, ], - }, { + }, + ], + }, + { + object: 'block', + type: 'table_row', + data: {}, + nodes: [ + { object: 'block', - type: 'table_header_cell', - data: {}, + type: 'table_cell', + data: { rowSpan: 2 }, nodes: [ { object: 'block', @@ -915,19 +937,13 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Tasks', + text: 'RnD', marks: [], }, ], }, ], }, - ], - }, { - object: 'block', - type: 'table_row', - data: {}, - nodes: [ { object: 'block', type: 'table_cell', @@ -946,7 +962,8 @@ export const slateInitialValue = { ], }, ], - }, { + }, + { object: 'block', type: 'table_cell', data: {}, @@ -958,7 +975,66 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Primary HR', + text: 'Design', + marks: [], + }, + ], + }, + ], + }, + { + object: 'block', + type: 'table_cell', + data: {}, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Ok', + marks: [ + { + object: 'mark', + type: 'uui-richTextEditor-span-mark', + data: { + style: { + color: '#9BC837', + }, + }, + }, { + object: 'mark', + type: 'uui-richTextEditor-bold', + data: {}, + }, + ], + }, + ], + }, + ], + }, + ], + }, + { + object: 'block', + type: 'table_row', + data: {}, + nodes: [ + { + object: 'block', + type: 'table_cell', + data: {}, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Bob Blue', marks: [], }, ], @@ -976,7 +1052,7 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'People', + text: 'Developer', marks: [], }, ], @@ -1016,7 +1092,8 @@ export const slateInitialValue = { ], }, ], - }, { + }, + { object: 'block', type: 'table_row', data: {}, @@ -1024,7 +1101,7 @@ export const slateInitialValue = { { object: 'block', type: 'table_cell', - data: {}, + data: { rowSpan: 1 }, nodes: [ { object: 'block', @@ -1033,16 +1110,17 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Bob Blue', + text: 'People', marks: [], }, ], }, ], - }, { + }, + { object: 'block', type: 'table_cell', - data: {}, + data: { rowSpan: 1 }, nodes: [ { object: 'block', @@ -1051,16 +1129,17 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Developer', + text: 'Ann Chovey', marks: [], }, ], }, ], - }, { + }, + { object: 'block', type: 'table_cell', - data: {}, + data: { rowSpan: 1 }, nodes: [ { object: 'block', @@ -1069,16 +1148,17 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'RnD', + text: 'Primary HR', marks: [], }, ], }, ], - }, { + }, + { object: 'block', type: 'table_cell', - data: {}, + data: { rowSpan: 1 }, nodes: [ { object: 'block', @@ -1087,14 +1167,14 @@ export const slateInitialValue = { nodes: [ { object: 'text', - text: 'Ok', + text: 'In progress', marks: [ { object: 'mark', type: 'uui-richTextEditor-span-mark', data: { style: { - color: '#9BC837', + color: '#8A7CBB', }, }, }, { @@ -1110,6 +1190,50 @@ export const slateInitialValue = { }, ], }, + { + object: 'block', + type: 'table_row', + data: {}, + nodes: [ + { + object: 'block', + type: 'table_cell', + data: { }, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: '', + }, + ], + }, + ], + }, + { + object: 'block', + type: 'table_cell', + data: { colSpan: 3 }, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Footer', + marks: [], + }, + ], + }, + ], + }, + ], + }, ], }, ], From 08bde7df66f4d9ba0ba28192db83784379a779da Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 28 Dec 2023 13:43:18 +0300 Subject: [PATCH 4/7] add migration for cell spans --- .../__snapshots__/migration.test.ts.snap | 97 ++++++++++++++ uui-editor/src/__tests__/data.ts | 125 ++++++++++++++++++ uui-editor/src/__tests__/migration.test.ts | 10 ++ uui-editor/src/migration.ts | 13 +- 4 files changed, 237 insertions(+), 8 deletions(-) create mode 100644 uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap create mode 100644 uui-editor/src/__tests__/data.ts create mode 100644 uui-editor/src/__tests__/migration.test.ts diff --git a/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap b/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap new file mode 100644 index 0000000000..d372e1f647 --- /dev/null +++ b/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap @@ -0,0 +1,97 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`migrate should migrate correctly 1`] = ` +Array [ + Object { + "children": Array [ + Object { + "text": "All queries and requests for should be sent initially to privacy@epam.com or by post to EPAM Legal Team (Privacy), EPAM Systems Ltd, 2 Finsbury Avenue 5th floor London, EC2M 2PG. +", + }, + ], + "data": Object {}, + "type": "paragraph", + }, + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "Country", + }, + ], + "data": Object {}, + "type": "paragraph", + }, + ], + "data": Object {}, + "type": "table_header_cell", + }, + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "Name and address of supervisory authority", + }, + ], + "data": Object {}, + "type": "paragraph", + }, + ], + "data": Object {}, + "type": "table_header_cell", + }, + ], + "data": Object {}, + "type": "table_row", + }, + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "Belgium", + }, + ], + "data": Object {}, + "type": "paragraph", + }, + Object { + "children": Array [ + Object { + "text": "Data Protection Authority +", + }, + ], + "data": Object {}, + "type": "paragraph", + }, + ], + "colSpan": 2, + "data": Object { + "colSpan": 2, + }, + "type": "table_cell", + }, + ], + "data": Object {}, + "type": "table_row", + }, + ], + "data": Object { + "cellSizes": Array [ + 112, + 288, + ], + }, + "type": "table", + }, +] +`; diff --git a/uui-editor/src/__tests__/data.ts b/uui-editor/src/__tests__/data.ts new file mode 100644 index 0000000000..e02f019c4d --- /dev/null +++ b/uui-editor/src/__tests__/data.ts @@ -0,0 +1,125 @@ +export const initialValue = { + object: 'value', + document: { + object: 'document', + data: {}, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'All queries and requests for should be sent initially to privacy@epam.com or by post to EPAM Legal Team (Privacy), EPAM Systems Ltd, 2 Finsbury Avenue 5th floor London, EC2M 2PG.\r', + marks: [], + }, + ], + }, + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'block', + type: 'table', + data: { + cellSizes: [ + 112, + 288, + ], + }, + nodes: [ + { + object: 'block', + type: 'table_row', + data: {}, + nodes: [ + { + object: 'block', + type: 'table_header_cell', + data: {}, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Country', + marks: [], + }, + ], + }, + ], + }, + { + object: 'block', + type: 'table_header_cell', + data: {}, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Name and address of supervisory authority', + marks: [], + }, + ], + }, + ], + }, + ], + }, + { + object: 'block', + type: 'table_row', + data: {}, + nodes: [ + { + object: 'block', + type: 'table_cell', + data: { colSpan: 2 }, + nodes: [ + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Belgium', + marks: [], + }, + + ], + }, + { + object: 'block', + type: 'paragraph', + data: {}, + nodes: [ + { + object: 'text', + text: 'Data Protection Authority\r', + marks: [], + }, + ], + }, + ], + }, + + ], + }, + ], + }, + ], + }, + ], + }, +}; diff --git a/uui-editor/src/__tests__/migration.test.ts b/uui-editor/src/__tests__/migration.test.ts new file mode 100644 index 0000000000..ac4d50cf32 --- /dev/null +++ b/uui-editor/src/__tests__/migration.test.ts @@ -0,0 +1,10 @@ +import { migrateSchema } from '../migration'; +import { initialValue } from './data'; + +describe('migrate', () => { + it('should migrate correctly', () => { + const migrated = migrateSchema(initialValue); + + expect(migrated).toMatchSnapshot(); + }); +}); diff --git a/uui-editor/src/migration.ts b/uui-editor/src/migration.ts index 47c4ec71b1..7de700bb83 100644 --- a/uui-editor/src/migration.ts +++ b/uui-editor/src/migration.ts @@ -8,6 +8,8 @@ * https://github.com/react-page/react-page/blob/b6c83a8650cfe9089e0c3eaf471ab58a0f7db761/packages/plugins/content/slate/src/migrations/v004.ts */ +const mediaTypes = ['image', 'iframe']; + const migrateTextNode = (oldNode: any) => { return { text: oldNode.text, @@ -37,8 +39,6 @@ const migrateTable = (oldTable: any) => { }; const migrateElementNode = (node: any) => { - const mediaTypes = ['image', 'iframe']; - if (node.type === 'paragraph' && node.nodes?.[0]?.type === 'table') { const tableNode = node.nodes[0]; node = migrateTable(tableNode); @@ -49,6 +49,8 @@ const migrateElementNode = (node: any) => { type: node.type, ...(mediaTypes.includes(node.type) ? { url: node.data?.src } : {}), ...(node?.data?.url ? { url: node.data.url } : {}), + ...(node?.data?.colSpan ? { colSpan: node.data.colSpan } : {}), + ...(node?.data?.rowSpan ? { rowSpan: node.data.rowSpan } : {}), children: node.nodes?.map(migrateNode).flat() ?? [], }; }; @@ -62,16 +64,11 @@ export const migrateNode = (oldNode: any) => { }; export const migrateSchema = (oldSchema: any) => { - let migratedSchema; try { - migratedSchema = oldSchema?.document?.nodes.map(migrateNode); + return oldSchema?.document?.nodes.map(migrateNode); } catch (e) { console.error("Can't migrate schema", e); } - if (migratedSchema) { - return migratedSchema; - } - return oldSchema; }; From 78c90d64ab5f0aa03370a94114a0cd9f89689fc7 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 28 Dec 2023 20:02:17 +0300 Subject: [PATCH 5/7] fix an issue with new format --- uui-editor/src/migration.ts | 7 ++++++- uui-editor/src/plugins/tablePlugin/TableCellElement.tsx | 4 ++-- uui-editor/src/plugins/tablePlugin/types.ts | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/uui-editor/src/migration.ts b/uui-editor/src/migration.ts index 7de700bb83..32db80bec0 100644 --- a/uui-editor/src/migration.ts +++ b/uui-editor/src/migration.ts @@ -64,11 +64,16 @@ export const migrateNode = (oldNode: any) => { }; export const migrateSchema = (oldSchema: any) => { + let migratedSchema; try { - return oldSchema?.document?.nodes.map(migrateNode); + migratedSchema = oldSchema?.document?.nodes.map(migrateNode); } catch (e) { console.error("Can't migrate schema", e); } + if (migratedSchema) { + return migratedSchema; + } + return oldSchema; }; diff --git a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx index bb8d8ffeab..fe7556dce0 100644 --- a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx +++ b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx @@ -25,8 +25,8 @@ TableCellElementProps const { element } = props; const el = element as ExtendedTTableCellElement; - element.colSpan = element.colSpan || el?.data.colSpan; - element.rowSpan = element.rowSpan || el?.data.rowSpan; + element.colSpan = el.colSpan || el?.data?.colSpan; + element.rowSpan = el.rowSpan || el?.data?.rowSpan; const { colIndex, diff --git a/uui-editor/src/plugins/tablePlugin/types.ts b/uui-editor/src/plugins/tablePlugin/types.ts index ba87540848..30f9647ad5 100644 --- a/uui-editor/src/plugins/tablePlugin/types.ts +++ b/uui-editor/src/plugins/tablePlugin/types.ts @@ -1,7 +1,7 @@ import { TTableCellElement } from '@udecode/plate-table'; export type ExtendedTTableCellElement = TTableCellElement & { - data: { + data?: { colSpan?: number; rowSpan?: number; colIndex?: number; From 7f1e3c6ffa47e427e02e527a740cb0d950a59151 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 28 Dec 2023 20:05:03 +0300 Subject: [PATCH 6/7] adjust test content --- uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap | 2 +- uui-editor/src/__tests__/data.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap b/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap index d372e1f647..9e0b6196ce 100644 --- a/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap +++ b/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap @@ -5,7 +5,7 @@ Array [ Object { "children": Array [ Object { - "text": "All queries and requests for should be sent initially to privacy@epam.com or by post to EPAM Legal Team (Privacy), EPAM Systems Ltd, 2 Finsbury Avenue 5th floor London, EC2M 2PG. + "text": "All queries and requests for should be sent initially to some@email.com. ", }, ], diff --git a/uui-editor/src/__tests__/data.ts b/uui-editor/src/__tests__/data.ts index e02f019c4d..3baa7266ae 100644 --- a/uui-editor/src/__tests__/data.ts +++ b/uui-editor/src/__tests__/data.ts @@ -11,7 +11,7 @@ export const initialValue = { nodes: [ { object: 'text', - text: 'All queries and requests for should be sent initially to privacy@epam.com or by post to EPAM Legal Team (Privacy), EPAM Systems Ltd, 2 Finsbury Avenue 5th floor London, EC2M 2PG.\r', + text: 'All queries and requests for should be sent initially to some@email.com.\r', marks: [], }, ], From 18cedf220b183b9c581ec0bddbf4ba72f63bb70f Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Fri, 29 Dec 2023 13:10:16 +0300 Subject: [PATCH 7/7] remove date prop from cell elements on migration --- .../__snapshots__/migration.test.ts.snap | 7 +---- uui-editor/src/__tests__/migration.test.ts | 29 +++++++++++++++++-- uui-editor/src/migration.ts | 21 +++++++++++++- .../plugins/tablePlugin/TableCellElement.tsx | 12 +++----- uui-editor/src/plugins/tablePlugin/types.ts | 1 - 5 files changed, 52 insertions(+), 18 deletions(-) diff --git a/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap b/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap index 9e0b6196ce..6c34bf3455 100644 --- a/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap +++ b/uui-editor/src/__tests__/__snapshots__/migration.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`migrate should migrate correctly 1`] = ` +exports[`migrate should migrate content correctly 1`] = ` Array [ Object { "children": Array [ @@ -28,7 +28,6 @@ Array [ "type": "paragraph", }, ], - "data": Object {}, "type": "table_header_cell", }, Object { @@ -43,7 +42,6 @@ Array [ "type": "paragraph", }, ], - "data": Object {}, "type": "table_header_cell", }, ], @@ -75,9 +73,6 @@ Array [ }, ], "colSpan": 2, - "data": Object { - "colSpan": 2, - }, "type": "table_cell", }, ], diff --git a/uui-editor/src/__tests__/migration.test.ts b/uui-editor/src/__tests__/migration.test.ts index ac4d50cf32..1e78bf191c 100644 --- a/uui-editor/src/__tests__/migration.test.ts +++ b/uui-editor/src/__tests__/migration.test.ts @@ -1,10 +1,35 @@ -import { migrateSchema } from '../migration'; +import { TTableCellElement } from '@udecode/plate-table'; +import { migrateSchema, migrateTableCell } from '../migration'; import { initialValue } from './data'; describe('migrate', () => { - it('should migrate correctly', () => { + it('should migrate content correctly', () => { const migrated = migrateSchema(initialValue); expect(migrated).toMatchSnapshot(); }); + + it('should migrate table cell correctly', () => { + const element: TTableCellElement = { + type: 'table-cell', + colSpan: 2, + rowSpan: 1, + data: { + colSpan: 3, + rowSpan: 2, + }, + attributes: {}, + children: [], + }; + + const migrated = migrateTableCell(element); + + expect(migrated).toEqual({ + type: 'table-cell', + colSpan: 3, + rowSpan: 2, + attributes: {}, + children: [], + }); + }); }); diff --git a/uui-editor/src/migration.ts b/uui-editor/src/migration.ts index 32db80bec0..c065487e83 100644 --- a/uui-editor/src/migration.ts +++ b/uui-editor/src/migration.ts @@ -8,6 +8,9 @@ * https://github.com/react-page/react-page/blob/b6c83a8650cfe9089e0c3eaf471ab58a0f7db761/packages/plugins/content/slate/src/migrations/v004.ts */ +import { ExtendedTTableCellElement } from './plugins/tablePlugin/types'; +import { TTableCellElement } from '@udecode/plate-table'; + const mediaTypes = ['image', 'iframe']; const migrateTextNode = (oldNode: any) => { @@ -24,6 +27,20 @@ const migrateTextNode = (oldNode: any) => { }; }; +export const migrateTableCell = (element: TTableCellElement): TTableCellElement => { + const oldElem = element as ExtendedTTableCellElement; + if (oldElem.data) { + if (oldElem.data.colSpan) { + element.colSpan = oldElem.data.colSpan; + } + if (oldElem.data.rowSpan) { + element.rowSpan = oldElem.data.rowSpan; + } + delete element.data; + } + return element; +}; + const migrateTable = (oldTable: any) => { oldTable.nodes.forEach((row: any) => { const newRowNodes: any[] = []; @@ -44,8 +61,10 @@ const migrateElementNode = (node: any) => { node = migrateTable(tableNode); } + const omitData = node.type === 'table_cell' || node.type === 'table_header_cell'; + const dataProps = omitData ? {} : { data: node.data ?? {} }; return { - data: node.data ?? {}, + ...dataProps, type: node.type, ...(mediaTypes.includes(node.type) ? { url: node.data?.src } : {}), ...(node?.data?.url ? { url: node.data.url } : {}), diff --git a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx index fe7556dce0..c922cc78d3 100644 --- a/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx +++ b/uui-editor/src/plugins/tablePlugin/TableCellElement.tsx @@ -9,7 +9,7 @@ import { import css from './TableCell.module.scss'; import { ResizeHandle } from '../../implementation/Resizable'; -import { ExtendedTTableCellElement } from './types'; +import { migrateTableCell } from '../../migration'; export interface TableCellElementProps extends PlateElementProps { @@ -22,11 +22,7 @@ React.ElementRef, TableCellElementProps >(({ children, className, style, hideBorder, ...props }, ref) => { const editor = useEditorRef(); - const { element } = props; - - const el = element as ExtendedTTableCellElement; - element.colSpan = el.colSpan || el?.data?.colSpan; - element.rowSpan = el.rowSpan || el?.data?.rowSpan; + props.element = migrateTableCell(props.element); const { colIndex, @@ -47,7 +43,7 @@ TableCellElementProps colSpan, }); const { rightProps, bottomProps, leftProps, hiddenLeft } = useTableCellElementResizable(resizableState); - const isHeader = element.type === getPluginType(editor, ELEMENT_TH); + const isHeader = props.element.type === getPluginType(editor, ELEMENT_TH); const Cell = isHeader ? 'th' : 'td'; return ( @@ -76,7 +72,7 @@ TableCellElementProps { ...cellProps } style={ { - '--cellBackground': element.background, + '--cellBackground': props.element.background, ...style, } as React.CSSProperties } diff --git a/uui-editor/src/plugins/tablePlugin/types.ts b/uui-editor/src/plugins/tablePlugin/types.ts index 30f9647ad5..3f916a5747 100644 --- a/uui-editor/src/plugins/tablePlugin/types.ts +++ b/uui-editor/src/plugins/tablePlugin/types.ts @@ -4,7 +4,6 @@ export type ExtendedTTableCellElement = TTableCellElement & { data?: { colSpan?: number; rowSpan?: number; - colIndex?: number; }, attributes?: { colspan?: number;