Skip to content

Commit

Permalink
Merge pull request #1903 from epam/fix-pasting-tables-from
Browse files Browse the repository at this point in the history 
[SlateEditor] Fix paste tables from word
  • Loading branch information
@AlekseyManetov
AlekseyManetov authored Jan 4, 2024
2 parents 9c69781 + 773ec73 commit 72cee51
Show file tree
Hide file tree
Showing 16 changed files with 778 additions and 113 deletions.
404 changes: 404 additions & 0 deletions uui-editor/src/__tests__/__snapshots__/serialization.test.tsx.snap
View file

Large diffs are not rendered by default.

83 changes: 83 additions & 0 deletions uui-editor/src/__tests__/serialization.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import fs from 'fs';
import path from 'path';
import { createTempEditor } from '../serialization';
import {
baseMarksPlugin,
headerPlugin,
colorPlugin,
superscriptPlugin,
listPlugin,
toDoListPlugin,
quotePlugin,
linkPlugin,
notePlugin,
uploadFilePlugin,
attachmentPlugin,
imagePlugin,
videoPlugin,
iframePlugin,
separatorPlugin,
tablePlugin,
codeBlockPlugin,
} from '../plugins';
import { defaultPlugins } from '../defaultPlugins';
import { createPlateEditor } from '@udecode/plate-core';

export const readTestFile = (filepath: string): string => {
const absoluteFilepath = path.resolve(__dirname, filepath);
return fs.readFileSync(absoluteFilepath, 'utf8');
};

export const createClipboardData = (html: string, rtf?: string): DataTransfer =>
({
getData: (format: string) => (format === 'text/html' ? html : rtf),
} as any);

const plugins = [
...defaultPlugins,
baseMarksPlugin(),
headerPlugin(),
colorPlugin(),
superscriptPlugin(),
listPlugin(),
toDoListPlugin(),
quotePlugin(),
linkPlugin(),
notePlugin(),
uploadFilePlugin({}),
attachmentPlugin(),
imagePlugin(),
videoPlugin(),
iframePlugin(),
separatorPlugin(),
tablePlugin(),
codeBlockPlugin(),
// placeholderPlugin(),
];

const initEditor = () => {
const editor = createTempEditor(plugins);
editor.children = [
{
data: {},
type: 'paragraph',
children: [
{
text: '',
},
],
},
];
return createPlateEditor({ editor, plugins });
};

describe('serialization', () => {
it('should paste data with tables', async () => {
const editor = initEditor();

const data = createClipboardData(readTestFile('./tables.html'));
editor.insertData(data);

expect(editor.children).toMatchSnapshot();
});
});
248 changes: 248 additions & 0 deletions uui-editor/src/__tests__/tables.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>
</title>
<style>
body {
font-family: Calibri;
font-size: 12pt
}

h1,
p {
margin: 0pt
}

li,
table {
margin-top: 0pt;
margin-bottom: 0pt
}

h1 {
margin-top: 12pt;
margin-left: 39.6pt;
margin-bottom: 6pt;
text-indent: -21.6pt;
page-break-inside: auto;
page-break-after: avoid;
widows: 0;
orphans: 0;
font-family: 'Liberation Sans';
font-size: 18pt;
font-weight: bold;
color: #000000
}

.BodyText {
margin-bottom: 7pt;
line-height: 120%;
widows: 0;
orphans: 0;
font-family: 'Liberation Serif';
font-size: 12pt
}

.TableContents {
widows: 0;
orphans: 0;
font-family: 'Liberation Serif';
font-size: 12pt
}

span.BodyTextChar {
font-family: 'Liberation Serif'
}

span.Heading1Char {
font-family: 'Liberation Sans';
font-size: 18pt;
font-weight: bold
}
</style>
</head>

<body>
<p>
&#xa0;
</p>
<p>
&#xa0;
</p>
<table style="border:0.75pt solid #000000; border-collapse:collapse">
<tr>
<td
style="width:210.6pt; border-right:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; background-color:#ffff00">
<p>
Sinple
</p>
</td>
<td
style="width:210.6pt; border-left:0.75pt solid #000000; border-bottom:0.75pt solid #4472c4; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; background-color:#ffff00">
<p>
Table
</p>
</td>
</tr>
<tr>
<td
style="width:210.6pt; border-top:0.75pt solid #000000; border-right:0.75pt solid #000000; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top">
<p>
With yellow
</p>
</td>
<td
style="width:210.6pt; border-top:0.75pt solid #4472c4; border-left:0.75pt solid #000000; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top">
<p>
back
</p>
</td>
</tr>
</table>
<p class="BodyText"
style="margin-bottom:11.25pt; text-align:justify; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">&#xa0;</span>
</p>
<table style="margin-left:2.75pt; border:0.75pt solid #000000; border-collapse:collapse">
<tr style="height:22.5pt">
<td
style="width:30.5pt; border-right:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">&#xa0;</span>
</p>
</td>
<td
style="width:278pt; border-right:0.75pt solid #000000; border-left:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Lorem ipsum</span>
</p>
</td>
<td
style="width:72.5pt; border-right:0.75pt solid #000000; border-left:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Lorem ipsum</span>
</p>
</td>
<td
style="width:79.25pt; border-left:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Lorem ipsum</span>
</p>
</td>
</tr>
<tr>
<td
style="width:30.5pt; border-top:0.75pt solid #000000; border-right:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">1</span>
</p>
</td>
<td style="width:278pt; border:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">In eleifend velit vitae libero sollicitudin euismod.</span>
</p>
</td>
<td style="width:72.5pt; border:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Lorem</span>
</p>
</td>
<td
style="width:79.25pt; border-top:0.75pt solid #000000; border-left:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">&#xa0;</span>
</p>
</td>
</tr>
<tr>
<td colspan="4"
style="width:476.75pt; border-top:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">2</span>
</p>
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Cras fringilla ipsum magna, in fringilla dui commodo
a.</span>
</p>
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Ipsum</span>
</p>
</td>
</tr>
<tr>
<td
style="width:30.5pt; border-top:0.75pt solid #000000; border-right:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">3</span>
</p>
</td>
<td colspan="2" style="width:356pt; border:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Aliquam erat volutpat. </span>
</p>
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Lorem</span>
</p>
</td>
<td
style="width:79.25pt; border-top:0.75pt solid #000000; border-left:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">&#xa0;</span>
</p>
</td>
</tr>
<tr>
<td colspan="4"
style="width:476.75pt; border-top:0.75pt solid #000000; border-bottom:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">4</span>
</p>
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Fusce vitae vestibulum velit. </span>
</p>
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Lorem</span>
</p>
</td>
</tr>
<tr>
<td
style="width:30.5pt; border-top:0.75pt solid #000000; border-right:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">5</span>
</p>
</td>
<td
style="width:278pt; border-top:0.75pt solid #000000; border-right:0.75pt solid #000000; border-left:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="BodyText"
style="margin-bottom:11.25pt; line-height:120%; widows:2; orphans:2; font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Etiam vehicula luctus fermentum.</span>
</p>
</td>
<td
style="width:72.5pt; border-top:0.75pt solid #000000; border-right:0.75pt solid #000000; border-left:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">Ipsum</span>
</p>
</td>
<td
style="width:79.25pt; border-top:0.75pt solid #000000; border-left:0.75pt solid #000000; padding:2.75pt 2.38pt; vertical-align:top">
<p class="TableContents" style="font-size:10.5pt">
<span style="font-family:'DejaVu Sans'">&#xa0;</span>
</p>
</td>
</tr>
</table>
</body>

</html>
1 change: 0 additions & 1 deletion uui-editor/src/implementation/PositionedToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { useLayer } from '@epam/uui-core';

interface ToolbarProps {
editor: any;
plugins?: any;
children: any;
isImage?: boolean;
isTable?: boolean;
Expand Down
10 changes: 5 additions & 5 deletions uui-editor/src/implementation/Toolbars.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React from 'react';
import { useEventPlateId, useEditorRef, useEditorState, isEditorFocused, PlateEditor } from '@udecode/plate-common';
import { useEventPlateId, useEditorRef, useEditorState, isEditorFocused, PlateEditor, WithPlatePlugin } from '@udecode/plate-common';
import { StickyToolbar } from './StickyToolbar';
import { PositionedToolbar } from './PositionedToolbar';
import { WithPlatePlugin } from '@udecode/plate-core';

interface ToolbarButtonProps {
editor: PlateEditor;
}
export interface IHasToolbarButton {
floatingBarButton?: React.ComponentType<ToolbarButtonProps>,
bottomBarButton?: React.ComponentType<ToolbarButtonProps>
name?: string;
}
export function MarksToolbar() {
const editorRef = useEditorRef();

return (
<PositionedToolbar isImage={ false } editor={ editorRef } plugins={ [] }>
<PositionedToolbar isImage={ false } editor={ editorRef }>
{ editorRef?.plugins.map((p: WithPlatePlugin<IHasToolbarButton>) => {
const Button = p.options?.floatingBarButton;
return Button && <Button editor={ editorRef } />;
return Button && <Button key={ p.options.name } editor={ editorRef } />;
}) }
</PositionedToolbar>
);
Expand All @@ -36,7 +36,7 @@ export function MainToolbar() {
<StickyToolbar isReadonly={ false }>
{ editor?.plugins.map((p: WithPlatePlugin<IHasToolbarButton>) => {
const Button = p.options?.bottomBarButton;
return Button && <Button editor={ editor } />;
return Button && <Button key={ p.options.name } editor={ editor } />;
}) }
</StickyToolbar>
);
Expand Down
Loading

0 comments on commit 72cee51

Please sign in to comment.