@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

package/lib/plugins/table/index.js

@@ -1,450 +1,245 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.serialization = exports.reactAttributes = exports.parseStyleString = exports["default"] = void 0;
+exports.serialization = exports.reactAttributes = exports.parseStyleString = exports.moveFocusToBeginningOfTable = exports["default"] = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
+
+var _slateEditTable = _interopRequireDefault(require("slate-edit-table"));
+
 var _slate = require("slate");
+
 var _debug = _interopRequireDefault(require("debug"));
+
 var _GridOn = _interopRequireDefault(require("@material-ui/icons/GridOn"));
+
 var _tableToolbar = _interopRequireDefault(require("./table-toolbar"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _slateHyperscript = require("slate-hyperscript");
-var _styles = require("@material-ui/styles");
+
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
 var _reactAttrConverter = _interopRequireDefault(require("react-attr-converter"));
+
 var _toStyle = require("to-style");
-var _get = _interopRequireDefault(require("lodash/get"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _reduce = _interopRequireDefault(require("lodash/reduce"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:table');
-var Table = /*#__PURE__*/_react["default"].forwardRef(function (props) {
-  var nodeAttributes = (0, _omit["default"])(dataToAttributes(props.element.data), 'newTable');
-  var attrs = (0, _omit["default"])(props.attributes, 'newTable');
-  return /*#__PURE__*/_react["default"].createElement("table", (0, _extends2["default"])({}, attrs, nodeAttributes, {
+var Table = (0, _styles.withStyles)(function () {
+  return {
+    table: {}
+  };
+})(function (props) {
+  var nodeAttributes = dataToAttributes(props.node.data);
+  return /*#__PURE__*/_react["default"].createElement("table", (0, _extends2["default"])({
+    className: props.classes.table
+  }, props.attributes, nodeAttributes, {
     onFocus: props.onFocus,
     onBlur: props.onBlur
-  }), props.children);
+  }), /*#__PURE__*/_react["default"].createElement("tbody", null, props.children));
 });
 Table.propTypes = {
   attributes: _propTypes["default"].object,
-  element: _propTypes["default"].object,
   onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
-  node: _propTypes["default"].shape({
-    type: _propTypes["default"].string,
-    children: _propTypes["default"].array,
-    data: _propTypes["default"].object
-  }),
+  node: _slatePropTypes["default"].node,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
 };
-var TableRow = /*#__PURE__*/_react["default"].forwardRef(function (props) {
+
+var TableRow = function TableRow(props) {
   return /*#__PURE__*/_react["default"].createElement("tr", props.attributes, props.children);
-});
-TableRow.propTypes = {
-  attributes: _propTypes["default"].object,
-  onFocus: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
 };
-var TableBody = /*#__PURE__*/_react["default"].forwardRef(function (props) {
-  return /*#__PURE__*/_react["default"].createElement("tbody", props.attributes, props.children);
-});
-TableBody.propTypes = {
+
+TableRow.propTypes = {
   attributes: _propTypes["default"].object,
   onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
 };
-var useCellStyles = (0, _styles.makeStyles)({
-  td: {
-    minWidth: '25px'
-  }
-});
-var TableCell = /*#__PURE__*/_react["default"].forwardRef(function (props) {
-  var classes = useCellStyles();
-  var node = props.node;
-  var Tag = (0, _get["default"])(node, 'data.header') ? 'th' : 'td';
-  var nodeAttributes = dataToAttributes(props.element.data);
+var TableCell = (0, _styles.withStyles)(function () {
+  return {
+    td: {
+      minWidth: '25px'
+    }
+  };
+})(function (props) {
+  var Tag = props.node.data.get('header') ? 'th' : 'td';
+  var nodeAttributes = dataToAttributes(props.node.data);
   delete nodeAttributes.header;
   return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, props.attributes, nodeAttributes, {
-    colSpan: (0, _get["default"])(node, 'data.colspan'),
-    className: classes[Tag],
+    colSpan: props.node.data.get('colspan'),
+    className: props.classes[Tag],
     onFocus: props.onFocus,
     onBlur: props.onBlur
   }), props.children);
 });
 TableCell.propTypes = {
-  node: _propTypes["default"].object,
-  element: _propTypes["default"].object,
   attributes: _propTypes["default"].object,
   onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
 };
-var getAncestorByType = function getAncestorByType(editor, type) {
-  if (!editor || !type) {
-    return null;
-  }
-  var ancestors = _slate.Node.ancestors(editor, _slate.Editor.path(editor, editor.selection), {
-    reverse: true
+
+var moveFocusToBeginningOfTable = function moveFocusToBeginningOfTable(change) {
+  var addedTable = change.value.document.findDescendant(function (d) {
+    return !!d.data && !!d.data.get('newTable');
   });
-  var _iterator = _createForOfIteratorHelper(ancestors),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
-        ancestor = _step$value[0],
-        ancestorPath = _step$value[1];
-      if (ancestor.type === type) {
-        return [ancestor, ancestorPath];
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return null;
-};
-var moveToBeginningOfTable = function moveToBeginningOfTable(editor) {
-  var _getAncestorByType = getAncestorByType(editor, 'table'),
-    _getAncestorByType2 = (0, _slicedToArray2["default"])(_getAncestorByType, 2),
-    tableBlock = _getAncestorByType2[0],
-    tablePath = _getAncestorByType2[1];
-  var firstTdPath;
-  var _iterator2 = _createForOfIteratorHelper(_slate.Node.descendants(tableBlock, {
-      reverse: true
-    })),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var _step2$value = (0, _slicedToArray2["default"])(_step2.value, 2),
-        descendant = _step2$value[0],
-        descendantPath = _step2$value[1];
-      if (descendant.type === 'td') {
-        firstTdPath = descendantPath;
-      }
-    }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
+
+  if (!addedTable) {
+    return;
   }
-  _slate.Transforms.select(editor, [].concat((0, _toConsumableArray2["default"])(tablePath), (0, _toConsumableArray2["default"])(firstTdPath)));
+
+  change.collapseToStartOf(addedTable);
+  var update = addedTable.data.remove('newTable');
+  change.setNodeByKey(addedTable.key, {
+    data: update
+  });
 };
-var TABLE_TYPES = ['tbody', 'tr', 'td', 'table'];
-var _default = function _default(opts, toolbarPlugins /* :  {toolbar: {}}[] */) {
-  var core = {
-    utils: {},
-    rules: function rules(editor) {
-      var normalizeNode = editor.normalizeNode;
-      editor.normalizeNode = function (entry) {
-        var _entry = (0, _slicedToArray2["default"])(entry, 2),
-          tableNode = _entry[0],
-          tablePath = _entry[1];
-        var tableParent = _slate.Node.get(editor, tablePath.slice(0, -1));
-
-        // If the element is a paragraph, ensure its children are valid.
-        if (_slate.Element.isElement(tableNode) && tableNode.type === 'table') {
-          var emptyBlock = {
-            type: 'paragraph',
-            children: [{
-              text: ''
-            }]
-          };
-          var tableIndex = tablePath.slice(-1)[0];
-
-          // if table is the first element, we need to add a space before
-          // so users can focus before the table
-          if (tableIndex === 0) {
-            var beforeTablePath = [].concat((0, _toConsumableArray2["default"])(tablePath.slice(0, -1)), [0]);
-            editor.apply({
-              type: 'insert_node',
-              path: beforeTablePath,
-              node: emptyBlock
-            });
-            editor.continueNormalization();
-            return;
-          }
 
-          // if table is the last element, we add element after it
-          if (tableParent.children.length - 1 === tableIndex) {
-            var afterTablePath = [].concat((0, _toConsumableArray2["default"])(tablePath.slice(0, -1)), [tableIndex + 1]);
-            editor.apply({
-              type: 'insert_node',
-              path: afterTablePath,
-              node: emptyBlock
-            });
-            editor.continueNormalization();
-            return;
-          }
+exports.moveFocusToBeginningOfTable = moveFocusToBeginningOfTable;
 
-          // if table does not have a tbody, we add it
-          if (tableNode.children[0].type !== 'tbody') {
-            var tBodyNode = {
-              type: 'tbody',
-              children: []
-            };
-            _slate.Transforms.wrapNodes(editor, tBodyNode, {
-              at: {
-                anchor: {
-                  path: [].concat((0, _toConsumableArray2["default"])(tablePath), [0]),
-                  offset: 0
-                },
-                focus: {
-                  path: [].concat((0, _toConsumableArray2["default"])(tablePath), [tableNode.children.length]),
-                  offset: 0
-                }
-              }
-            });
-            editor.continueNormalization();
-            return;
-          }
+var _default = function _default(opts, toolbarPlugins
+/* :  {toolbar: {}}[] */
+) {
+  var core = (0, _slateEditTable["default"])({
+    typeContent: 'div'
+  }); // fix outdated schema
+
+  if (core.schema && core.schema.blocks) {
+    Object.keys(core.schema.blocks).forEach(function (key) {
+      var block = core.schema.blocks[key];
+
+      if (block.parent) {
+        if (block.nodes[0].types) {
+          block.nodes[0] = {
+            type: block.nodes[0].types[0]
+          };
         }
 
-        // Fall back to the original `normalizeNode` to enforce other constraints.
-        normalizeNode(entry);
-      };
-      return editor;
-    }
-  };
-  core.utils.createTable = function () {
-    var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
-    var columns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-    var tableRows = [];
-    var rowLength = new Array(row).fill(0).length;
-    var columnsLength = new Array(columns).fill(0).length;
-    for (var i = 0; i < rowLength; i++) {
-      var tableRow = {
-        type: 'tr',
-        children: []
-      };
-      for (var j = 0; j < columnsLength; j++) {
-        tableRow.children.push({
-          type: 'td',
-          children: [{
-            text: ''
-          }]
-        });
+        if (block.nodes[0].objects) {
+          block.nodes[0] = {
+            object: block.nodes[0].objects[0]
+          };
+        }
+
+        block.parent = {
+          type: block.parent.types[0]
+        };
+      } else {
+        block.nodes[0] = {
+          type: block.nodes[0].types[0]
+        };
       }
-      tableRows.push(tableRow);
-    }
-    return {
-      type: 'table',
-      children: [{
-        type: 'tbody',
-        children: tableRows
-      }]
-    };
-  };
-  core.utils.getTableBlock = function (editor) {
-    return getAncestorByType(editor, 'table');
-  };
-  core.utils.isSelectionInTable = function (editor) {
-    return !!core.utils.getTableBlock(editor);
+    });
+  }
+
+  core.utils.getTableBlock = function (containerNode, key) {
+    var node = containerNode.getDescendant(key);
+    var ancestors = containerNode.getAncestors(key).push(node);
+    return ancestors.findLast(function (p) {
+      return p.type === 'table';
+    });
   };
+
   core.utils.createTableWithOptions = function (row, columns, extra) {
     var createdTable = core.utils.createTable(row, columns);
-    var newTable = _objectSpread(_objectSpread({}, createdTable), extra);
+
+    var newTable = _slate.Block.create(_objectSpread(_objectSpread({}, createdTable.toJSON()), extra));
+
     return newTable;
   };
+
   core.toolbar = {
     icon: /*#__PURE__*/_react["default"].createElement(_GridOn["default"], null),
-    onClick: function onClick(editor) {
+    onClick: function onClick(value, onChange) {
       log('insert table');
+      var change = value.change();
       var newTable = core.utils.createTableWithOptions(2, 2, {
         data: {
           border: '1',
           newTable: true
         }
       });
-      editor.insertNode(newTable);
-      moveToBeginningOfTable(editor, newTable);
+      change.insertBlock(newTable);
+      moveFocusToBeginningOfTable(change);
+      onChange(change);
     },
+    supports: function supports(node, value) {
+      return node && node.object === 'block' && core.utils.isSelectionInTable(value);
+    },
+
     /**
      * Note - the node may not be a table node - it may be a node inside a table.
      */
-    customToolbar: function customToolbar(node, nodePath, editor, onToolbarDone) {
+    customToolbar: function customToolbar(node, value, onToolbarDone) {
       log('[customToolbar] node.data: ', node.data);
-      var _core$utils$getTableB = core.utils.getTableBlock(editor),
-        _core$utils$getTableB2 = (0, _slicedToArray2["default"])(_core$utils$getTableB, 1),
-        tableBlock = _core$utils$getTableB2[0];
+      var tableBlock = core.utils.getTableBlock(value.document, node === null || node === void 0 ? void 0 : node.key);
       log('[customToolbar] tableBlock: ', tableBlock);
+
       var hasBorder = function hasBorder() {
-        return (0, _get["default"])(tableBlock, 'data.border') !== '0';
+        return tableBlock.data.get('border') && tableBlock.data.get('border') !== '0';
       };
+
       var addRow = function addRow() {
-        var _getAncestorByType3 = getAncestorByType(editor, 'tr'),
-          _getAncestorByType4 = (0, _slicedToArray2["default"])(_getAncestorByType3, 2),
-          trNode = _getAncestorByType4[0],
-          trPath = _getAncestorByType4[1];
-        log('[addRow]');
-        if (trNode) {
-          var newTr = {
-            type: 'tr',
-            children: []
-          };
-          var columnsLength = trNode.children.length;
-          for (var i = 0; i < columnsLength; i++) {
-            newTr.children.push({
-              type: 'td',
-              children: [{
-                text: ''
-              }]
-            });
-          }
-          _slate.Transforms.insertNodes(editor, [newTr], {
-            at: trPath
-          });
-        }
-      };
-      var removeRow = function removeRow() {
-        var _getAncestorByType5 = getAncestorByType(editor, 'tbody'),
-          _getAncestorByType6 = (0, _slicedToArray2["default"])(_getAncestorByType5, 2),
-          tBodyNode = _getAncestorByType6[0],
-          tBodyPath = _getAncestorByType6[1];
-        log('[removeRow]');
-        if (tBodyPath) {
-          if (tBodyNode.children.length > 1) {
-            var _getAncestorByType7 = getAncestorByType(editor, 'tr'),
-              _getAncestorByType8 = (0, _slicedToArray2["default"])(_getAncestorByType7, 2),
-              trPath = _getAncestorByType8[1];
-            log('[removeRow]');
-            if (trPath) {
-              _slate.Transforms.removeNodes(editor, {
-                at: trPath
-              });
-            }
-          }
-        }
+        var change = core.changes.insertRow(value.change());
+        onToolbarDone(change, false);
       };
+
       var addColumn = function addColumn() {
-        var _getAncestorByType9 = getAncestorByType(editor, 'tbody'),
-          _getAncestorByType10 = (0, _slicedToArray2["default"])(_getAncestorByType9, 2),
-          tBodyNode = _getAncestorByType10[0],
-          tBodyPath = _getAncestorByType10[1];
-        log('[addColumn]');
-        if (tBodyNode) {
-          var emptyTd = {
-            type: 'td',
-            children: [{
-              text: ''
-            }]
-          };
-          var trElements = _slate.Editor.nodes(editor, {
-            at: tBodyPath,
-            // Path of Editor
-            match: function match(node) {
-              return 'tr' === node.type;
-            }
-          });
-          var _iterator3 = _createForOfIteratorHelper(trElements),
-            _step3;
-          try {
-            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-              var _step3$value = (0, _slicedToArray2["default"])(_step3.value, 2),
-                trNode = _step3$value[0],
-                _nodePath = _step3$value[1];
-              _slate.Transforms.insertNodes(editor, [emptyTd], {
-                at: [].concat((0, _toConsumableArray2["default"])(_nodePath), [trNode.children.length])
-              });
-            }
-          } catch (err) {
-            _iterator3.e(err);
-          } finally {
-            _iterator3.f();
-          }
-        }
+        var change = core.changes.insertColumn(value.change());
+        onToolbarDone(change, false);
       };
+
+      var removeRow = function removeRow() {
+        var change = core.changes.removeRow(value.change());
+        onToolbarDone(change, false);
+      };
+
       var removeColumn = function removeColumn() {
-        var _getAncestorByType11 = getAncestorByType(editor, 'tbody'),
-          _getAncestorByType12 = (0, _slicedToArray2["default"])(_getAncestorByType11, 2),
-          tBodyNode = _getAncestorByType12[0],
-          tBodyPath = _getAncestorByType12[1];
-        log('[addColumn]');
-        if (tBodyNode) {
-          var currentPath = _slate.Editor.path(editor, editor.selection);
-          var columnIndex = currentPath[currentPath.length - 2];
-          var trElements = _slate.Editor.nodes(editor, {
-            at: tBodyPath,
-            // Path of Editor
-            match: function match(node) {
-              return 'tr' === node.type;
-            }
-          });
-          var _iterator4 = _createForOfIteratorHelper(trElements),
-            _step4;
-          try {
-            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-              var _step4$value = (0, _slicedToArray2["default"])(_step4.value, 2),
-                trNode = _step4$value[0],
-                _nodePath2 = _step4$value[1];
-              if (trNode.children.length > 1) {
-                _slate.Transforms.removeNodes(editor, {
-                  at: [].concat((0, _toConsumableArray2["default"])(_nodePath2), [columnIndex])
-                });
-              }
-            }
-          } catch (err) {
-            _iterator4.e(err);
-          } finally {
-            _iterator4.f();
-          }
-        }
+        var change = core.changes.removeColumn(value.change());
+        onToolbarDone(change, false);
       };
+
       var removeTable = function removeTable() {
-        var _getAncestorByType13 = getAncestorByType(editor, 'table'),
-          _getAncestorByType14 = (0, _slicedToArray2["default"])(_getAncestorByType13, 2),
-          tableNode = _getAncestorByType14[0],
-          tablePath = _getAncestorByType14[1];
-        editor.apply({
-          type: 'remove_node',
-          path: tablePath,
-          node: tableNode
-        });
+        var change = core.changes.removeTable(value.change());
+        onToolbarDone(change, false);
       };
+
       var toggleBorder = function toggleBorder() {
         var data = tableBlock.data;
-        var update = _objectSpread(_objectSpread({}, data), {}, {
-          border: hasBorder() ? '0' : '1'
-        });
-        var _getAncestorByType15 = getAncestorByType(editor, 'table'),
-          _getAncestorByType16 = (0, _slicedToArray2["default"])(_getAncestorByType15, 2),
-          tablePath = _getAncestorByType16[1];
+        var update = data.set('border', hasBorder() ? '0' : '1');
         log('[toggleBorder] update: ', update);
-        editor.apply({
-          type: 'set_node',
-          path: tablePath,
-          properties: {
-            data: node.data
-          },
-          newProperties: {
-            data: update
-          }
+        var change = value.change().setNodeByKey(tableBlock.key, {
+          data: update
         });
+        onToolbarDone(change, false);
       };
+
       var onDone = function onDone() {
         log('[onDone] call onToolbarDone...');
-        onToolbarDone(true);
+        onToolbarDone(null, true);
       };
+
       var Tb = function Tb() {
         return /*#__PURE__*/_react["default"].createElement(_tableToolbar["default"], {
-          editor: editor,
           plugins: toolbarPlugins,
           onChange: function onChange(c) {
             return onToolbarDone(c, false);
           },
+          value: value,
           onAddRow: addRow,
           onRemoveRow: removeRow,
           onAddColumn: addColumn,
@@ -455,12 +250,11 @@ var _default = function _default(opts, toolbarPlugins /* :  {toolbar: {}}[] */)
           onDone: onDone
         });
       };
+
       return Tb;
     }
   };
-  core.supports = function (node) {
-    return TABLE_TYPES.includes(node.type);
-  };
+
   var Node = function Node(props) {
     switch (props.node.type) {
       case 'table':
@@ -468,49 +262,125 @@ var _default = function _default(opts, toolbarPlugins /* :  {toolbar: {}}[] */)
           onFocus: opts.onFocus,
           onBlur: opts.onBlur
         }));
-      case 'tbody':
-        return /*#__PURE__*/_react["default"].createElement(TableBody, (0, _extends2["default"])({}, props, {
-          onFocus: opts.onFocus,
-          onBlur: opts.onBlur
-        }));
-      case 'tr':
+
+      case 'table_row':
         return /*#__PURE__*/_react["default"].createElement(TableRow, props);
-      case 'td':
+
+      case 'table_cell':
         return /*#__PURE__*/_react["default"].createElement(TableCell, (0, _extends2["default"])({}, props, {
           onFocus: opts.onFocus,
           onBlur: opts.onBlur
         }));
+
       default:
         return null;
     }
   };
+
   Node.propTypes = {
     node: _propTypes["default"].object
   };
+
+  core.normalizeNode = function (node) {
+    if (node.object !== 'document') {
+      return;
+    }
+
+    var tableAdded = node.findDescendant(function (d) {
+      return d.data && d.data.get('newTable');
+    });
+
+    if (!tableAdded) {
+      return;
+    }
+
+    var nodeToSearch = node.getParent(tableAdded.key) || node;
+    var shouldAddTextAfterNode = false;
+    var indexToNotHaveTableOn = nodeToSearch.nodes.size - 1;
+    var indexOfLastTable = nodeToSearch.nodes.findLastIndex(function (d) {
+      return d.type === 'table';
+    }); // if the last table in the document is of type table, we need to do the change
+
+    if (indexOfLastTable === indexToNotHaveTableOn) {
+      shouldAddTextAfterNode = true;
+    }
+
+    if (!shouldAddTextAfterNode) {
+      return;
+    }
+
+    return function (change) {
+      if (shouldAddTextAfterNode) {
+        var tableJSON = tableAdded.toJSON(); // we remove the table node because otherwise we can't add the empty block after it
+        // we need a block that contains text in order to do it
+
+        change.removeNodeByKey(tableAdded.key);
+
+        var newBlock = _slate.Block.create({
+          object: 'block',
+          type: 'div'
+        }); // we add an empty block but that it's going to be normalized
+        // because it will add the empty text to it like it should
+
+
+        change.insertBlock(newBlock);
+        change.withoutNormalization(function () {
+          // we do these changes without normalization
+          // we get the text previous to the new block added
+          var prevText = change.value.document.getPreviousText(newBlock.key);
+
+          if (prevText) {
+            var _prevText$text, _prevText$text2;
+
+            // we move focus to the previous text
+            change.moveFocusTo(prevText.key, (_prevText$text = prevText.text) === null || _prevText$text === void 0 ? void 0 : _prevText$text.length).moveAnchorTo(prevText.key, (_prevText$text2 = prevText.text) === null || _prevText$text2 === void 0 ? void 0 : _prevText$text2.length);
+          } // we insert the table block between the first block with text and the last block with text
+
+
+          change.insertBlock(_objectSpread(_objectSpread({}, tableJSON), {}, {
+            data: _objectSpread(_objectSpread({}, tableJSON.data), {}, {
+              newTable: true
+            })
+          }));
+          moveFocusToBeginningOfTable(change);
+        });
+      }
+    };
+  };
+
   core.renderNode = Node;
   return core;
 };
+
 exports["default"] = _default;
+
 var parseStyleString = function parseStyleString(s) {
   var regex = /([\w-]*)\s*:\s*([^;]*)/g;
   var match;
   var result = {};
+
   while (match = regex.exec(s)) {
     result[match[1]] = match[2].trim();
   }
+
   return result;
 };
+
 exports.parseStyleString = parseStyleString;
+
 var reactAttributes = function reactAttributes(o) {
   return (0, _toStyle.object)(o, {
     camelize: true,
     addUnits: false
   });
 };
+
 exports.reactAttributes = reactAttributes;
+
 var attributesToMap = function attributesToMap(el) {
   return function (acc, attribute) {
     var value = el.getAttribute(attribute);
+
     if (value) {
       if (attribute === 'style') {
         var styleString = el.getAttribute(attribute);
@@ -520,88 +390,107 @@ var attributesToMap = function attributesToMap(el) {
         acc[attribute] = el.getAttribute(attribute);
       }
     }
+
     return acc;
   };
 };
+
 var dataToAttributes = function dataToAttributes(data) {
-  return (0, _reduce["default"])(data, function (acc, v, name) {
+  if (!data || !data.get) {
+    return {};
+  }
+
+  return data.reduce(function (acc, v, name) {
     if (v) {
       acc[(0, _reactAttrConverter["default"])(name)] = v;
     }
+
     return acc;
   }, {});
 };
+
 var attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style'];
 var cellAttributes = ['colspan', 'rowspan', 'class', 'style'];
 var serialization = {
   deserialize: function deserialize(el, next) {
     var tag = el.tagName.toLowerCase();
+
     switch (tag) {
       case 'table':
         {
           var children = el.children.length === 1 && el.children[0].tagName.toLowerCase() === 'tbody' ? el.children[0].children : el.children;
           var c = Array.from(children);
-          return (0, _slateHyperscript.jsx)('element', {
+          return {
+            object: 'block',
             type: 'table',
+            nodes: next(c),
             data: attributes.reduce(attributesToMap(el), {})
-          }, next(c));
-        }
-      case 'tbody':
-        {
-          return (0, _slateHyperscript.jsx)('element', {
-            type: 'tbody'
-          }, next(el.childNodes));
+          };
         }
+
       case 'th':
         {
-          return (0, _slateHyperscript.jsx)('element', {
-            type: 'th',
+          return {
+            object: 'block',
+            type: 'table_cell',
+            nodes: next(el.childNodes),
             data: cellAttributes.reduce(attributesToMap(el), {
               header: true
             })
-          }, next(el.childNodes));
+          };
         }
+
       case 'tr':
         {
-          return (0, _slateHyperscript.jsx)('element', {
-            type: 'tr'
-          }, next(Array.from(el.children)));
+          return {
+            object: 'block',
+            type: 'table_row',
+            nodes: next(Array.from(el.children))
+          };
         }
+
       case 'td':
         {
-          return (0, _slateHyperscript.jsx)('element', {
-            type: 'td',
+          return {
+            object: 'block',
+            type: 'table_cell',
+            nodes: next(Array.from(el.childNodes)),
             data: cellAttributes.reduce(attributesToMap(el), {
-              header: true
+              header: false
             })
-          }, next(el.childNodes));
+          };
         }
     }
   },
   serialize: function serialize(object, children) {
+    if (object.object !== 'block') {
+      return;
+    }
+
     switch (object.type) {
       case 'table':
         {
           var _attributes = dataToAttributes(object.data);
-          return /*#__PURE__*/_react["default"].createElement("table", _attributes, children);
-        }
-      case 'tbody':
-        {
-          return /*#__PURE__*/_react["default"].createElement("tbody", null, children);
+
+          return /*#__PURE__*/_react["default"].createElement("table", _attributes, /*#__PURE__*/_react["default"].createElement("tbody", null, children));
         }
-      case 'tr':
+
+      case 'table_row':
         {
           return /*#__PURE__*/_react["default"].createElement("tr", null, children);
         }
-      case 'td':
+
+      case 'table_cell':
         {
           var _attributes2 = dataToAttributes(object.data);
-          return /*#__PURE__*/_react["default"].createElement("td", _attributes2, children);
-        }
-      case 'th':
-        {
-          var _attributes3 = dataToAttributes(object.data);
-          return /*#__PURE__*/_react["default"].createElement("th", _attributes3, children);
+
+          delete _attributes2.header;
+
+          if (object.data.get('header')) {
+            return /*#__PURE__*/_react["default"].createElement("th", _attributes2, children);
+          } else {
+            return /*#__PURE__*/_react["default"].createElement("td", _attributes2, children);
+          }
         }
     }
   }