Adding Table Support to Draft-js Text Editor: Exploring the draft-js-table-plugin Library

Question

In our project, we are using the draft-js text editor. I am currently attempting to add table support to the text editor.

After trying to implement it myself and realizing that the task was too complex, I started exploring the use of an open-source library.

I decided to use the "draft-js-table-plugin" library, but unfortunately, there is no documentation available for it.

I would greatly appreciate a simple example of how to use this library or any suggestions for using an alternative library.

My code

import React from "react";
import ReactDOM from "react-dom";
import { EditorState } from "draft-js";
import Editor from "draft-js-plugins-editor";
import { tableCreator } from "draft-js-table-plugin";
import createTablePlugin from "draft-js-table-plugin";
import "draft-js-table-plugin/lib/plugin.css";

class EditorWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(editorState) {
    this.setState({ editorState });
  }

  render() {
    const TableCreator = tableCreator(Editor);
    const tablePlugin = createTablePlugin(Editor);
    return (
      <div className="editor-container" style={style}>
        <TableCreator editorState={this.state.editorState} onChange={this.onChange}/>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={[tablePlugin]}
        />
      </div>
    );
  }
}

export default EditorWrapper;

Package.json

  "dependencies": {
    "draft-js":"0.11.4",
    "draft-js-table-plugin": "1.0.4",
    "draft-js-plugins-editor":"3.0.0"
  }