Resize a Table in the Editor
Environment
| Product Version | 3.0.0 |
| Product | Progress® KendoReact |
Description
How to make the table elements inside the Editor resizable?
Solution
There is an already made plugin for table column resizing from ProseMirror.
We have made an example of KendoReact Editor that uses the columnResizing plugin. The plugin has to be added to the plugins collection on the onMount event:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Editor, EditorTools, ProseMirror } from '@progress/kendo-react-editor';
import { columnResizing } from 'prosemirror-tables';
const { EditorState, EditorView } = ProseMirror;
const {
InsertTable,
AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
DeleteRow, DeleteColumn, DeleteTable,
MergeCells, SplitCell,
Undo, Redo
} = EditorTools;
const content =
`<p>some paragraph</p>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>`;
class App extends React.Component {
onMount = event => {
const state = event.viewProps.state;
const plugins = [
...state.plugins,
columnResizing({})
];
return new EditorView(
{ mount: event.dom }, {
...event.viewProps,
state: EditorState.create({ doc: state.doc, plugins })
}
);
}
render() {
return (
<Editor
tools={[
[ InsertTable ],
[ AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter ],
[ DeleteRow, DeleteColumn, DeleteTable ],
[ MergeCells, SplitCell ],
[ Undo, Redo ]
]}
defaultEditMode="div"
onMount={this.onMount}
contentStyle={{ height: 300 }}
defaultContent={content}
/>
);
}
}