@mirrormedia/lilith-draft-editor/lib/draft-js/buttons/table.js

## Installation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableButton = TableButton;

var _react = _interopRequireDefault(require("react"));

var _draftJs = require("draft-js");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function TableButton(props) {
  const {
    editorState,
    onChange,
    className
  } = props;

  const onClick = () => {
    const rawDarftContentState = {
      blocks: [],
      entityMap: {}
    };
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity('TABLE', 'IMMUTABLE', {
      // `tableStyles` is to used to store custom React CSS inline styles.
      // Therefore, please make sure the style name needs to be camelCase.
      tableStyles: {
        // We can customize the inline styles of each row.
        rows: [// thead has different background color.
        {
          backgroundColor: '#f2f2f2'
        }, {}, {}],
        // TODO: add column styles and cell styles if needed
        columns: [],
        cells: []
      },
      // We use two dimensions array to store the data.
      // The items of the array represent the rows,
      // and each item is also an array, which represents the columns.
      // Take the following array as example.
      // It is a
      // row: 3
      // column: 2
      // sheet data stored in a 2 dimensions arrary.
      tableData: [[rawDarftContentState, rawDarftContentState], [rawDarftContentState, rawDarftContentState], [rawDarftContentState, rawDarftContentState]]
    });
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

    const newEditorState = _draftJs.EditorState.set(editorState, {
      currentContent: contentStateWithEntity
    }); // The third parameter here is a space string, not an empty string
    // If you set an empty string, you will get an error: Unknown DraftEntity key: null


    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    onClick: onClick,
    className: className
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "fa fa-table"
  }), /*#__PURE__*/_react.default.createElement("span", null, "Table"));
}