@seafile/seafile-editor 0.4.8 → 1.0.0

package/src/extension/plugins/table/helper.js

@@ -0,0 +1,175 @@
+import { Editor, Node, Path, Transforms, insertFragment } from 'slate';
+import { generateTable, generateTableRow } from './model';
+import { CODE_BLOCK, COLUMN, FORMULA, PARAGRAPH, TABLE, TABLE_CELL, TABLE_ROW } from '../../constants/element-types';
+import { focusEditor, generateElement } from '../../core';
+import getEventTransfer from '../../../containers/custom/get-event-transfer';
+import { htmlDeserializer } from '../../../utils/deserialize-html';
+
+export const isDisabled = (editor, readonly) => {
+  const { selection } = editor;
+  if (readonly || !selection) return true;
+  const disableTypes = [TABLE, TABLE_ROW, TABLE_CELL, FORMULA, CODE_BLOCK, COLUMN];
+  const [nodeEntry] = Editor.nodes(editor, {
+    match: n => disableTypes.includes(n.type),
+    mode: 'highest'
+  });
+  if (nodeEntry) return true;
+  return false;
+};
+
+export const isInTable = (editor) => {
+  const { selection } = editor;
+  if (!selection) return false;
+  const [nodeEntry] = getTableEntry(editor);
+  if (!nodeEntry) return false;
+  return true;
+};
+
+export const insertTable = (editor, rowNum, columnNum) => {
+  const table = generateTable({ rowNum, columnNum });
+  Editor.insertNode(editor, table);
+  // Auto focus at the first cell in table
+  const [nodeEntry] = Editor.nodes(editor, {
+    match: node => node.id === table.id,
+    mode: 'highest'
+  });
+  const focusPoint = Editor.start(editor, nodeEntry[1]);
+  focusEditor(editor, focusPoint);
+};
+
+export const getTableFocusingInfos = (editor) => {
+  if (!isInTable(editor)) return null;
+  const nodeEntries = Editor.nodes(editor, {
+    match: n => [TABLE, TABLE_ROW, TABLE_CELL].includes(n.type),
+  });
+  const nodeEntryList = Array.from(nodeEntries);
+  const [tableEntry, rowEntry, cellEntry] = nodeEntryList;
+  const columnIndex = cellEntry[1].at(-1);
+  const rowIndex = cellEntry[1].at(-2);
+  return { cellEntry, tableEntry, rowEntry, columnIndex, rowIndex };
+};
+
+export const selectCellByGrid = (editor, rowIndex, colIndex) => {
+  const { tableEntry: [, tablePath] } = getTableFocusingInfos(editor);
+  const selectRange = Editor.range(editor, tablePath.concat(rowIndex, colIndex));
+  focusEditor(editor, selectRange);
+};
+
+export const getSelectedTableCells = (editor) => {
+  const [tableEntry] = getTableEntry(editor);
+  if (!tableEntry) return [];
+
+  const [tableNode] = tableEntry;
+  const tableRows = tableNode.children;
+  const selectGrid = getSelectGrid(editor);
+
+  const { startRowIndex, endRowIndex, startColIndex, endColIndex } = selectGrid;
+
+  const selectedTableRows = [];
+  for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+    const currentRow = tableRows[rowIndex];
+    let selectedTableCells = [];
+    for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+      const currentCell = currentRow.children[colIndex];
+      selectedTableCells.push(currentCell);
+    }
+
+    selectedTableRows.push(generateTableRow({ childrenOrText: selectedTableCells }));
+    selectedTableCells = [];
+  }
+
+  return [generateTable({ childrenOrText: selectedTableRows })];
+};
+
+export const getSelectGrid = (editor) => {
+  const [tableEntry] = getTableEntry(editor);
+  if (!tableEntry) return null;
+
+  const selectedTableCells = document.querySelectorAll('.selected-cell');
+  if (selectedTableCells.length === 0) return null;
+
+  const selectGrid = Array.from(selectedTableCells).reduce((grid, cell) => {
+    const { startRowIndex, endRowIndex, startColIndex, endColIndex } = grid;
+    const { cellIndex: colIndex } = cell;
+    const { rowIndex } = cell.parentNode;
+    if (endRowIndex === -1 || rowIndex > endRowIndex) grid.endRowIndex = rowIndex;
+    if (startRowIndex === -1 || rowIndex < startRowIndex) grid.startRowIndex = rowIndex;
+    if (endColIndex === -1 || colIndex > endColIndex) grid.endColIndex = colIndex;
+    if (startColIndex === -1 || colIndex < startColIndex) grid.startColIndex = colIndex;
+    return { ...grid };
+  }, { startRowIndex: -1, endRowIndex: -1, startColIndex: -1, endColIndex: -1 });
+
+  return selectGrid;
+};
+
+export const pasteContentIntoTable = (editor, content) => {
+  const data = content;
+  let { fragment, text, type, html } = getEventTransfer(data);
+  const newText = text.replace(/\r\n|\n/g, ' ');
+
+  if (!fragment && type === 'text') {
+    Transforms.insertText(this.editor, newText);
+    return;
+  }
+
+  if (type === 'html') {
+    fragment = htmlDeserializer(html);
+  }
+
+  if (fragment.length === 1) {
+    if (fragment[0].type === TABLE) {
+      const clipboardTable = fragment[0];
+      const {
+        tableEntry: [tableNode, tablePath],
+        rowEntry: [rowNode],
+        rowIndex,
+        columnIndex
+      } = getTableFocusingInfos(editor);
+      const tableWidth = rowNode.children.length;
+      const tableHeight = tableNode.children.length;
+      clipboardTable.children.some((clipRow, clipRowIndex) => {
+        const currentInsertPath = tablePath.concat(rowIndex + clipRowIndex + rowIndex);
+        // Out of table
+        if (rowIndex + clipRowIndex >= tableHeight + 1) return true;
+        clipRow.children.some((clipCol, clipColIndex) => {
+          // Out of table
+          if (columnIndex + clipColIndex >= tableWidth + 1) return true;
+          const currentCellPath = currentInsertPath.concat(columnIndex + clipColIndex);
+          const currentCellChildPath = currentCellPath.concat(0);
+          Transforms.removeNodes(editor, { at: currentCellChildPath });
+          if (clipCol.children.type !== PARAGRAPH) {
+            const text = Node.string(clipCol);
+            const newChild = generateElement(PARAGRAPH, { childrenOrText: text });
+            Transforms.insertNodes(editor, newChild, { at: currentCellChildPath });
+          } else {
+            Transforms.insertNodes(editor, clipCol.children, { at: currentCellChildPath });
+          }
+          return false;
+        });
+        return false;
+      });
+    } else if (fragment[0].type === PARAGRAPH) {
+      insertFragment(editor, fragment);
+    } else {
+      Transforms.insertText(editor, text.replace(/\r\n|\n/g, ' '));
+    }
+  }
+};
+
+export const jumpOutTableInEditor = (editor) => {
+  const [tableEntry] = getTableEntry(editor);
+  if (!tableEntry) return;
+
+  const [, tablePath] = tableEntry;
+  const tableParentPath = Path.parent(tablePath);
+  const insertPath = tableParentPath.concat(tablePath.at(-1) + 1);
+  Transforms.insertNodes(editor, generateElement(PARAGRAPH), { at: insertPath });
+  Transforms.select(editor, { path: insertPath.concat(0), offset: 0 });
+};
+
+export const getTableEntry = (editor) => {
+  return Editor.nodes(editor, {
+    match: n => n.type === TABLE,
+    mode: 'highest'
+  });
+};

package/src/extension/plugins/table/index.js

@@ -0,0 +1,15 @@
+import { TABLE } from '../../constants/element-types';
+import TableMenu from './menu';
+import { AlignmentDropDown, ColumnOperationDropDownList, RowOperationDropDownList, RemoveTableMenu } from './menu/table-operator';
+import withTable from './plugin';
+import RenderTableContainer, { RenderTableCell, RenderTableRow } from './render-elem';
+
+const TablePlugin = {
+  type: TABLE,
+  nodeType: 'element',
+  editorMenus: [TableMenu, AlignmentDropDown, ColumnOperationDropDownList, RowOperationDropDownList, RemoveTableMenu],
+  editorPlugin: withTable,
+  renderElements: [RenderTableCell, RenderTableRow, RenderTableContainer],
+};
+
+export default TablePlugin;

package/src/extension/plugins/table/menu/index.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '../../../commons/menu/menu-item';
+import { MENUS_CONFIG_MAP } from '../../../constants';
+import { TABLE } from '../../../constants/element-types';
+import { isDisabled, isInTable } from '../helper';
+import TableSizeSelector from './table-size-selector';
+
+import './style.css';
+
+const menuConfig = MENUS_CONFIG_MAP[TABLE];
+const propTypes = {
+  editor: PropTypes.object.isRequired,
+  readonly: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  isRichEditor: PropTypes.bool,
+};
+
+const TableMenu = ({ editor, readonly, className, isRichEditor }) => {
+  const [isOpenTableSizeSelector, setIsOpenTableSizeSelector] = useState(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const disabled = useMemo(() => isDisabled(editor, readonly), [editor.selection, readonly]);
+  const isActive = isInTable(editor);
+
+  const onSelectorHide = useCallback(() => {
+    setIsOpenTableSizeSelector(false);
+    unregisterEvent();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsOpenTableSizeSelector]);
+
+  const registerEvent = useCallback(() => {
+    document.addEventListener('click', onSelectorHide);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const unregisterEvent = useCallback(() => {
+    document.removeEventListener('click', onSelectorHide);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onMouseDown = useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setIsOpenTableSizeSelector(true);
+    registerEvent();
+  }, [setIsOpenTableSizeSelector, registerEvent]);
+
+  return (
+    <div className='sf-table-menu-item'>
+      <MenuItem
+        isRichEditor={isRichEditor}
+        className={className}
+        disabled={disabled}
+        isActive={isActive}
+        onMouseDown={onMouseDown}
+        editor={editor}
+        {...menuConfig}
+      />
+      {isOpenTableSizeSelector && (
+        <TableSizeSelector
+          editor={editor}
+        />)}
+    </div>
+  );
+};
+
+TableMenu.propTypes = propTypes;
+
+export default TableMenu;

package/src/extension/plugins/table/menu/style.css

@@ -0,0 +1,32 @@
+.sf-table-menu-item {
+  position: relative;
+}
+
+.sf-table-size-selector-card {
+  position: absolute;
+  z-index: 1;
+  top: 30px;
+  padding: 12px;
+  background-color: #fff;
+
+}
+
+.sf-table-size-selector-card .sf-table-grid-info {
+  margin-bottom: 5px;
+  width: 100%;
+  text-align: center;
+}
+
+.sf-table-size-selector-card .sf-table-selector-cell {
+  height: 15px;
+  width: 20px;
+  border: 1px solid #ccc;
+}
+
+.sf-table-size-selector-card .sf-table-row {
+  display: flex;
+}
+
+.sf-table-size-selector-card .sf-table-selector-cell.selected {
+  background-color: #ffa94d;
+}

package/src/extension/plugins/table/menu/table-operator.js

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import MenuDropDown from '../../../commons/menu/menu-drop-down';
+import { MENUS_CONFIG_MAP, TABLE_SUBMENU_MAP, TEXT_ALIGN } from '../../../constants';
+import MenuItem from '../../../commons/menu/menu-item';
+import { changeCellAlign, insertColumn, insertRow, removeColumn, removeRow, removeTable } from '../table-operations';
+
+const AlignmentDropDown = ({ editor, readonly }) => {
+  const alignmentOperationDropDownList = useMemo(() => [
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_ALIGN_LEFT],
+      handleClick: (item) => changeCellAlign(editor, TEXT_ALIGN.LEFT)
+    },
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_ALIGN_CENTER],
+      handleClick: (item) => changeCellAlign(editor, TEXT_ALIGN.CENTER)
+    },
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_ALIGN_RIGHT],
+      handleClick: (item) => changeCellAlign(editor, TEXT_ALIGN.RIGHT)
+    },
+  ], [editor]);
+
+  return (
+    <MenuDropDown
+      editor={editor}
+      readonly={readonly}
+      isDisabled={false}
+      dropDownList={alignmentOperationDropDownList}
+      isShowListItemIcon={true}
+      {...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_ALIGN_LEFT]}
+    />
+  );
+};
+
+const ColumnOperationDropDownList = ({ editor, readonly }) => {
+  const columnOperationDropDownList = useMemo(() => [
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_INSERT_COLUMN],
+      handleClick: (item) => insertColumn(editor)
+    },
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_REMOVE_COLUMN],
+      handleClick: (item) => removeColumn(editor)
+    },
+  ], [editor]);
+
+  return (
+    <MenuDropDown
+      editor={editor}
+      readonly={readonly}
+      isDisabled={false}
+      dropDownList={columnOperationDropDownList}
+      {...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_INSERT_COLUMN]}
+    />
+  );
+};
+
+const RowOperationDropDownList = ({ editor, readonly }) => {
+  const rowOperationDropDownList = useMemo(() => [
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_INSERT_ROW],
+      handleClick: (item) => insertRow(editor)
+    },
+    {
+      ...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_REMOVE_ROW],
+      handleClick: (item) => removeRow(editor)
+    },
+  ], [editor]);
+
+  return (
+    <MenuDropDown
+      editor={editor}
+      readonly={readonly}
+      isDisabled={false}
+      dropDownList={rowOperationDropDownList}
+      {...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_INSERT_ROW]}
+    />
+  );
+};
+
+const RemoveTableMenu = ({ editor, readonly, className, isRichEditor }) => {
+  return (
+    <MenuItem
+      isRichEditor={isRichEditor}
+      className={className}
+      disabled={false}
+      isActive={false}
+      onMouseDown={() => removeTable(editor)}
+      editor={editor}
+
+      {...MENUS_CONFIG_MAP[TABLE_SUBMENU_MAP.TABLE_DELETE_TABLE]}
+    />
+  );
+};
+
+export {
+  AlignmentDropDown,
+  ColumnOperationDropDownList,
+  RowOperationDropDownList,
+  RemoveTableMenu
+};

package/src/extension/plugins/table/menu/table-size-selector.js

@@ -0,0 +1,71 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import propType from 'prop-types';
+import classNames from 'classnames';
+import { insertTable } from '../helper';
+
+import './style.css';
+
+const TableSizeSelector = ({ editor }) => {
+  const [selectedGridInfo, setSelectedGridInfo] = useState({ row: 0, column: 0 });
+  const [showingGridInfo, setShowingGridInfo] = useState({ row: 4, column: 4 });
+
+  const preRenderTableGrid = useCallback((rowIndex, columnIndex) => {
+    const selectedRowNums = rowIndex + 1;
+    const selectedColumnNums = columnIndex + 1;
+    let preRenderRowNum = selectedRowNums + 1;
+    let preRenderColumnNum = selectedColumnNums + 1;
+    if (preRenderRowNum < 4) {
+      preRenderRowNum = 4;
+    } else if (preRenderRowNum > 10) {
+      preRenderRowNum = 10;
+    }
+    if (preRenderColumnNum < 4) {
+      preRenderColumnNum = 4;
+    } else if (preRenderColumnNum > 10) {
+      preRenderColumnNum = 10;
+    }
+    setSelectedGridInfo({ row: selectedRowNums, column: selectedColumnNums });
+    setShowingGridInfo({ row: preRenderRowNum, column: preRenderColumnNum });
+  }, []);
+
+  const handleClickTableCell = useCallback(() => {
+    insertTable(editor, selectedGridInfo.row, selectedGridInfo.column);
+  }, [editor, selectedGridInfo]);
+
+  const generateTableGrid = useCallback((rowNum, columnNum) => {
+    const { row: selectedRowIndex, column: selectedColumnIndex } = selectedGridInfo;
+    const rowElements = [];
+    for (let rowIndex = 0; rowIndex < rowNum; rowIndex++) {
+      const columnElements = [];
+      for (let columnIndex = 0; columnIndex < columnNum; columnIndex++) {
+        const isCellSelected = selectedRowIndex > rowIndex && selectedColumnIndex > columnIndex;
+        columnElements.push(
+          <div
+            onClick={handleClickTableCell}
+            onMouseEnter={() => preRenderTableGrid(rowIndex, columnIndex)}
+            className={classNames('sf-table-selector-cell', { selected: isCellSelected })}
+            key={`${rowIndex}-${columnIndex}`}
+          ></div>
+        );
+      }
+      rowElements.push(<div className='sf-table-row' key={rowIndex}>{columnElements}</div>);
+    }
+    return rowElements;
+  }, [handleClickTableCell, preRenderTableGrid, selectedGridInfo]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const tableGridElement = useMemo(() => generateTableGrid(showingGridInfo.row, showingGridInfo.column), [generateTableGrid]);
+
+  return (
+    <div className='sf-table-size-selector-card'>
+      <p className='sf-table-grid-info'>{`${selectedGridInfo.row} x ${selectedGridInfo.column}`}</p>
+      {tableGridElement}
+    </div>
+  );
+};
+
+TableSizeSelector.propTypes = {
+  editor: propType.object.isRequired,
+};
+
+export default TableSizeSelector;

package/src/extension/plugins/table/model.js

@@ -0,0 +1,69 @@
+import { generateElement } from '../../core';
+import { TABLE, TABLE_CELL, TABLE_ROW } from '../../constants/element-types';
+import { TEXT_ALIGN } from '../../constants';
+
+/**
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+ * @param {keyof TEXT_ALIGN} [options.align = TEXT_ALIGN.left]
+*/
+const generateTableCell = (options = {}) => {
+  const { align = TEXT_ALIGN.LEFT, childrenOrText = '' } = options;
+  return generateElement(TABLE_CELL, {
+    childrenOrText,
+    props: { align, },
+  });
+};
+
+/**
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+ * @param {number | undefined} columnNum If provide a number,that will generate a table row with the number of cells,or will fill the childrenOrText as cells,or will generate a empty cell(if not provide childrenOrText)
+ */
+const generateTableRow = (options) => {
+  const { columnNum } = options;
+  let { childrenOrText = '' } = options;
+  let cells = [];
+  if (columnNum) {
+    cells = Array.from({ length: columnNum }, () => generateTableCell());
+  } else {
+    // If not type of string,we'll consider it as a cell array,or throw an error
+    if (typeof childrenOrText === 'string') {
+      childrenOrText = [generateTableCell({ childrenOrText })];
+    }
+    if (!Array.isArray(childrenOrText)) {
+      throw Error('childrenOrText must be a string or a Node array!');
+    }
+  }
+  return generateElement(TABLE_ROW, { childrenOrText: columnNum ? cells : childrenOrText, });
+};
+
+/**
+ * @param {Object} options
+ * @param {Node[] | String} [options.childrenOrText = ''] If provide a string,that will generate a text node as children automatically
+ * @param {number | undefined} rowNum If provide a number,that will generate a table with the number of rows,or will fill the childrenOrText as rows,or will generate a empty row(if not provide childrenOrText)
+ * @param {number | undefined} columnNum If provide a number,that will generate a table row with the number of cells,or will fill the childrenOrText as cells,or will generate a empty cell(if not provide childrenOrText)
+ */
+const generateTable = (options) => {
+  const { rowNum, columnNum } = options;
+  let { childrenOrText = '' } = options;
+  let rows = [];
+  if (rowNum) {
+    rows = Array.from({ length: rowNum }, () => generateTableRow({ columnNum }));
+  } else {
+    // If not type of string,we'll consider it as a row array,or throw an error
+    if (typeof childrenOrText === 'string') {
+      childrenOrText = [generateTableRow({ childrenOrText })];
+    }
+    if (!Array.isArray(childrenOrText)) {
+      throw Error('childrenOrText must be a string or a Node array!');
+    }
+  }
+  return generateElement(TABLE, { childrenOrText: rowNum ? rows : childrenOrText, });
+};
+
+export {
+  generateTableCell,
+  generateTableRow,
+  generateTable,
+};

package/src/extension/plugins/table/plugin.js

@@ -0,0 +1,159 @@
+import { Editor, Range, Transforms } from 'slate';
+import isHotKey from 'is-hotkey';
+import { jumpOutTableInEditor, getSelectedTableCells, getTableFocusingInfos, isInTable, pasteContentIntoTable, selectCellByGrid } from './helper';
+import { INSERT_POSITION } from '../../constants';
+import setEventTransfer from '../../../containers/custom/set-event-transfer';
+import { TABLE_CELL } from '../../constants/element-types';
+import { insertRow } from './table-operations';
+import getEventTransfer from '../../../containers/custom/get-event-transfer';
+
+/**
+ * @param {Editor} editor
+ */
+const withTable = (editor) => {
+  const { insertBreak, deleteBackward, onHotKeyDown, insertText, deleteForward, onCopy, insertData } = editor;
+  const newEditor = editor;
+
+  newEditor.insertBreak = () => {
+    const isTableActive = isInTable(newEditor);
+    if (!isTableActive) return insertBreak && insertBreak();
+    insertRow(newEditor);
+    Transforms.collapse(newEditor, { edge: 'end' });
+    Transforms.select(newEditor, editor.selection);
+    return;
+  };
+
+  newEditor.insertText = (text) => {
+    const isTableActive = isInTable(newEditor);
+    if (!isTableActive) return insertText && insertText(text);
+    const { selection } = newEditor;
+    // set element by markdown shortcut;
+    if (text === ' ' && selection && Range.isCollapsed(selection)) {
+      insertText(text);
+      return;
+    }
+    return insertText(text);
+  };
+
+  newEditor.insertData = (data) => {
+    const isTableActive = isInTable(newEditor);
+    if (!isTableActive) return insertData && insertData(data);
+    const { fragment, type, html, text } = getEventTransfer(data);
+    if (type === 'file') {
+      return insertData(data);
+    }
+    return pasteContentIntoTable(newEditor, data);
+
+  };
+
+  newEditor.deleteBackward = (unit) => {
+    const isTableActive = isInTable(newEditor);
+    if (!isTableActive) return deleteBackward(unit);
+    const { selection } = newEditor;
+    // If select range,prevent to delete
+    if (!Range.isRange(selection)) return;
+    const [tableCellEntry] = Editor.nodes(editor, {
+      match: node => node.type === TABLE_CELL,
+      mode: 'lowest'
+    });
+    // If delete empty cell,prevent to delete
+    const isStartOfCellText = Editor.isStart(newEditor, selection.anchor, tableCellEntry[1]);
+    if (isStartOfCellText) return;
+    return deleteBackward && deleteBackward(unit);
+  };
+
+  newEditor.deleteForward = (unit) => {
+    const isTableActive = isInTable(newEditor);
+    if (!isTableActive) return deleteForward(unit);
+    const { selection } = newEditor;
+    // If select range,prevent to delete
+    if (!Range.isRange(selection)) return;
+    const [tableCellEntry] = Editor.nodes(editor, {
+      match: node => node.type === TABLE_CELL,
+      mode: 'lowest'
+    });
+    // If delete empty cell,prevent to delete
+    const isEndOfCellText = Editor.isEnd(newEditor, selection.anchor, tableCellEntry[1]);
+    if (isEndOfCellText) return;
+    return deleteForward(unit);
+  };
+
+  newEditor.onHotKeyDown = (event) => {
+    if (!isInTable(newEditor)) return onHotKeyDown && onHotKeyDown(event);
+
+    if (isHotKey('tab', event)) {
+      event.preventDefault();
+      const {
+        tableEntry: [tableNode],
+        rowEntry: [rowNode],
+        columnIndex,
+        rowIndex
+      } = getTableFocusingInfos(newEditor);
+      let nextColumnIndex, nextRowIndex;
+      // If focus not at end of columns
+      if (columnIndex < rowNode.children.length - 1) {
+        nextColumnIndex = columnIndex + 1;
+        nextRowIndex = rowIndex;
+      } else {
+        // If focus not at end of rows,add new row
+        const shouldAddNewRow = rowIndex === tableNode.children.length - 1;
+        nextColumnIndex = 0;
+        nextRowIndex = rowIndex + 1;
+        shouldAddNewRow && insertRow(newEditor, INSERT_POSITION.AFTER);
+      }
+      selectCellByGrid(newEditor, nextRowIndex, nextColumnIndex);
+      return true;
+    }
+
+    if (isHotKey('shift+tab', event)) {
+      event.preventDefault();
+      const {
+        rowEntry: [rowNode],
+        columnIndex,
+        rowIndex
+      } = getTableFocusingInfos(newEditor);
+      let previousColumnIndex, previousRowIndex;
+      // If focus not at start of columns
+      if (columnIndex > 0) {
+        previousRowIndex = rowIndex;
+        previousColumnIndex = columnIndex - 1;
+      } else {
+        // If focus not at start of rows
+        if (rowIndex > 0) {
+          previousRowIndex = rowIndex - 1;
+          previousColumnIndex = rowNode.children.length - 1;
+        } else {
+          previousRowIndex = 0;
+          previousColumnIndex = 0;
+        }
+      }
+      selectCellByGrid(newEditor, previousRowIndex, previousColumnIndex);
+      return true;
+    }
+
+    if (isHotKey('mod+enter', event)) {
+      event.preventDefault();
+      jumpOutTableInEditor(newEditor);
+      return true;
+    }
+
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+
+  newEditor.onCopy = (event) => {
+    if (!isInTable(newEditor)) {
+      return onCopy && onCopy(event);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const tableNode = getSelectedTableCells(newEditor);
+    if (tableNode) {
+      setEventTransfer(event, 'fragment', tableNode);
+      return true;
+    }
+  };
+
+  return newEditor;
+};
+
+export default withTable;