@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/esm/plugins/table/nodeviews/table.js

@@ -0,0 +1,235 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _get from "@babel/runtime/helpers/get";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { DOMSerializer } from 'prosemirror-model';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { pluginConfig as getPluginConfig } from '../create-plugin-config';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
+import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
+import { generateColgroup } from '../pm-plugins/table-resizing/utils';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import TableComponent from './TableComponent';
+
+var tableAttributes = function tableAttributes(node) {
+  return {
+    'data-number-column': node.attrs.isNumberColumnEnabled,
+    'data-layout': node.attrs.layout,
+    'data-autosize': node.attrs.__autoSize,
+    'data-table-local-id': node.attrs.localId || ''
+  };
+};
+
+var toDOM = function toDOM(node, props) {
+  var colgroup = '';
+
+  if (props.allowColumnResizing) {
+    colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroup(node)));
+  }
+
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
+};
+
+var TableView = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(TableView, _ReactNodeView);
+
+  var _super = _createSuper(TableView);
+
+  function TableView(props) {
+    var _this;
+
+    _classCallCheck(this, TableView);
+
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getNode", function () {
+      return _this.node;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hasHoveredRows", false);
+
+    _this.getPos = props.getPos;
+    _this.tableRenderOptimization = props.tableRenderOptimization;
+    _this.eventDispatcher = props.eventDispatcher;
+    return _this;
+  }
+
+  _createClass(TableView, [{
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+
+      if (rendered.dom) {
+        this.table = rendered.dom;
+      }
+
+      return rendered;
+    }
+  }, {
+    key: "setDomAttrs",
+    value: function setDomAttrs(node) {
+      var _this2 = this;
+
+      if (!this.table) {
+        return;
+      }
+
+      var attrs = tableAttributes(node);
+      Object.keys(attrs).forEach(function (attr) {
+        _this2.table.setAttribute(attr, attrs[attr]);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render(props, forwardRef) {
+      var _this3 = this;
+
+      // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+      var fakePluginKey = {
+        key: 'widthPlugin$',
+        getState: function getState(state) {
+          return state['widthPlugin$'];
+        }
+      };
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          pluginState: pluginKey,
+          tableResizingPluginState: tableResizingPluginKey,
+          widthPlugin: fakePluginKey // mediaState: mediaPluginKey,
+
+        },
+        editorView: props.view,
+        render: function render(pluginStates) {
+          var tableResizingPluginState = pluginStates.tableResizingPluginState,
+              pluginState = pluginStates.pluginState; // const mediaState = {};
+
+          var mediaState = {
+            isFullscreen: false
+          };
+          var tableActive = props.getPos() === pluginState.tablePos;
+          var containerWidth = props.getEditorContainerWidth();
+          return /*#__PURE__*/React.createElement(TableComponent, {
+            view: props.view,
+            allowColumnResizing: props.allowColumnResizing,
+            eventDispatcher: props.eventDispatcher,
+            getPos: props.getPos,
+            isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+            options: props.options,
+            allowControls: pluginState.pluginConfig.allowControls,
+            isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
+            isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
+            tableActive: tableActive,
+            ordering: pluginState.ordering,
+            tableResizingPluginState: tableResizingPluginState,
+            getNode: _this3.getNode,
+            containerWidth: containerWidth,
+            contentDOM: forwardRef,
+            getEditorFeatureFlags: props.getEditorFeatureFlags
+          });
+        }
+      });
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this.tableRenderOptimization) {
+        var _getPluginState = getPluginState(this.view.state),
+            hoveredRows = _getPluginState.hoveredRows;
+
+        var hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
+
+        if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+          this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
+          return true;
+        }
+
+        var _node = this.getNode();
+
+        if (_typeof(_node.attrs) !== _typeof(nextNode.attrs)) {
+          return true;
+        }
+
+        var attrKeys = Object.keys(_node.attrs);
+        var nextAttrKeys = Object.keys(nextNode.attrs);
+
+        if (attrKeys.length !== nextAttrKeys.length) {
+          return true;
+        }
+
+        var tableMap = TableMap.get(_node);
+        var nextTableMap = TableMap.get(nextNode);
+
+        if (tableMap.width !== nextTableMap.width) {
+          return true;
+        }
+
+        return attrKeys.some(function (key) {
+          return _node.attrs[key] !== nextNode.attrs[key];
+        });
+      }
+
+      return _get(_getPrototypeOf(TableView.prototype), "viewShouldUpdate", this).call(this, nextNode);
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation() {
+      return true;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$eventDispatcher;
+
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+
+      (_this$eventDispatcher = this.eventDispatcher) === null || _this$eventDispatcher === void 0 ? void 0 : _this$eventDispatcher.emit('TABLE_DELETED', this.node);
+
+      _get(_getPrototypeOf(TableView.prototype), "destroy", this).call(this);
+    }
+  }]);
+
+  return TableView;
+}(ReactNodeView);
+
+export { TableView as default };
+export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) {
+  var _getPluginState2 = getPluginState(view.state),
+      pluginConfig = _getPluginState2.pluginConfig;
+
+  var _getPluginConfig = getPluginConfig(pluginConfig),
+      allowColumnResizing = _getPluginConfig.allowColumnResizing;
+
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+      tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
+
+  return new TableView({
+    node: node,
+    view: view,
+    allowColumnResizing: allowColumnResizing,
+    portalProviderAPI: portalProviderAPI,
+    eventDispatcher: eventDispatcher,
+    getPos: getPos,
+    options: options,
+    tableRenderOptimization: tableRenderOptimization,
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
+  }).init();
+};

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -0,0 +1,111 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import uuid from 'uuid';
+import { DOMSerializer } from 'prosemirror-model';
+import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
+
+var TableCellNodeView = /*#__PURE__*/function () {
+  function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
+    _classCallCheck(this, TableCellNodeView);
+
+    this.view = view;
+    this.node = node;
+
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
+
+    this.getPos = getPos;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
+
+    if (mouseMoveOptimization && observer) {
+      this.contentDOM.id = uuid();
+      this.mouseMoveOptimization = mouseMoveOptimization;
+      this.observer = observer;
+      observer.observe(this.contentDOM);
+    }
+  }
+
+  _createClass(TableCellNodeView, [{
+    key: "updateNodeView",
+    value: function updateNodeView(node) {
+      var _this = this;
+
+      if (this.node.type !== node.type) {
+        return false;
+      }
+
+      var attrs = getCellDomAttrs(this.node);
+      var nextAttrs = getCellDomAttrs(node);
+
+      var _getCellAttrs = getCellAttrs(this.dom),
+          colspan = _getCellAttrs.colspan,
+          rowspan = _getCellAttrs.rowspan; // need to rerender when colspan/rowspan in dom are different from the node attrs
+      // this can happen when undoing merge cells
+
+
+      var defaultColspan = 1,
+          defaultRowspan = 1;
+
+      if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+        return false;
+      } // added + changed attributes
+
+
+      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            value = _ref2[1];
+
+        return attrs[key] !== value;
+      });
+      var removedAttrs = Object.keys(attrs).filter(function (key) {
+        return !nextAttrs.hasOwnProperty(key);
+      });
+
+      if (addedAttrs.length || removedAttrs.length) {
+        addedAttrs.forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+              key = _ref4[0],
+              value = _ref4[1];
+
+          return _this.dom.setAttribute(key, value || '');
+        });
+        removedAttrs.forEach(function (key) {
+          return _this.dom.removeAttribute(key);
+        });
+        return true;
+      } // Return true to not re-render this node view
+
+
+      if (this.node.sameMarkup(node)) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      var didUpdate = this.updateNodeView(node);
+      this.node = node;
+      return didUpdate;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.mouseMoveOptimization && this.observer) {
+        this.observer.unobserve(this.contentDOM);
+      }
+    }
+  }]);
+
+  return TableCellNodeView;
+}();
+
+export { TableCellNodeView as default };

package/dist/esm/plugins/table/nodeviews/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/table/nodeviews/update-overflow-shadows.js

@@ -0,0 +1,54 @@
+import { TableCssClassName as ClassName } from '../types';
+export var updateShadowListForStickyStyles = function updateShadowListForStickyStyles(heightStyle, shadows) {
+  Array.from(shadows).forEach(function (shadow) {
+    if (shadow.classList.contains(ClassName.TABLE_STICKY_SHADOW)) {
+      if (shadow instanceof HTMLElement && shadow.style.height !== heightStyle) {
+        shadow.style.height = heightStyle;
+      }
+    }
+  });
+};
+/**
+ * Update overflow shadows for a given wrapper & table.
+ * if `overflowShadowOptimization` is enabled, this will exit early.
+ */
+
+export var updateOverflowShadows = function updateOverflowShadows(getEditorFeatureFlags) {
+  return function (editorState, wrapper, table, rightShadows, leftShadows) {
+    var _getEditorFeatureFlag;
+
+    if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
+      return false;
+    } // Right shadow
+
+
+    if (table && wrapper) {
+      var stickyRow = wrapper.querySelector('tr.sticky');
+      var stickyCell = stickyRow && stickyRow.firstElementChild;
+
+      if (rightShadows) {
+        var diff = table.offsetWidth - wrapper.offsetWidth;
+
+        for (var i = 0; i < rightShadows.length; i++) {
+          var rightShadow = rightShadows[i];
+          rightShadow.style.display = diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
+
+          if (rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) && stickyCell) {
+            rightShadow.style.height = "".concat(stickyCell.clientHeight + 1, "px");
+          }
+        }
+      }
+
+      if (leftShadows) {
+        for (var _i = 0; _i < leftShadows.length; _i++) {
+          var leftShadow = leftShadows[_i];
+          leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
+
+          if (leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) && stickyCell) {
+            leftShadow.style.height = "".concat(stickyCell.clientHeight + 1, "px");
+          }
+        }
+      }
+    }
+  };
+};

package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js

@@ -0,0 +1,58 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { DecorationSet } from 'prosemirror-view';
+import { pluginKey as tablePluginKey } from '../plugin-key';
+import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
+export var pluginKey = new PluginKey('tableDecorationsPlugin');
+export var getDecorations = function getDecorations(state) {
+  return pluginKey.getState(state);
+};
+export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState) {
+  if (tr.docChanged || tr.selection instanceof CellSelection) {
+    return buildColumnControlsDecorations({
+      decorationSet: decorationSet,
+      tr: tr
+    });
+  } else if (tr.selectionSet) {
+    var isTransactionFromMouseClick = !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
+
+    if (isTransactionFromMouseClick || oldState.selection instanceof CellSelection) {
+      return maybeUpdateColumnControlsSelectedDecoration({
+        decorationSet: decorationSet,
+        tr: tr
+      });
+    }
+  }
+
+  return decorationSet;
+};
+export var createPlugin = function createPlugin() {
+  return new SafePlugin({
+    state: {
+      init: function init() {
+        return DecorationSet.empty;
+      },
+      apply: function apply(tr, decorationSet, oldState) {
+        var pluginState = decorationSet;
+        var meta = tr.getMeta(tablePluginKey);
+
+        if (meta && meta.data && meta.data.decorationSet) {
+          pluginState = meta.data.decorationSet;
+        }
+
+        if (tr.docChanged || tr.selectionSet) {
+          return handleDocOrSelectionChanged(tr, pluginState, oldState);
+        }
+
+        return pluginState;
+      }
+    },
+    key: pluginKey,
+    props: {
+      decorations: function decorations(state) {
+        return getDecorations(state);
+      }
+    }
+  });
+};

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -0,0 +1,71 @@
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { DecorationSet } from 'prosemirror-view';
+import { TableDecorations } from '../../../types';
+import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
+import { composeDecorations } from './compose-decorations';
+
+var isColumnSelected = function isColumnSelected(tr) {
+  return tr.selection instanceof CellSelection && tr.selection.isColSelection();
+}; // @see: https://product-fabric.atlassian.net/browse/ED-3796
+
+
+var removeControlsHoverDecoration = function removeControlsHoverDecoration(_ref) {
+  var decorationSet = _ref.decorationSet;
+  return decorationSet.remove(findControlsHoverDecoration(decorationSet));
+};
+
+var maybeUpdateColumnSelectedDecoration = function maybeUpdateColumnSelectedDecoration(_ref2) {
+  var decorationSet = _ref2.decorationSet,
+      tr = _ref2.tr;
+
+  if (!isColumnSelected(tr)) {
+    return decorationSet;
+  }
+
+  return updateDecorations(tr.doc, decorationSet, createColumnSelectedDecoration(tr), TableDecorations.COLUMN_SELECTED);
+};
+
+var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDecoration(_ref3) {
+  var decorationSet = _ref3.decorationSet,
+      tr = _ref3.tr;
+  var table = findTable(tr.selection);
+
+  if (!table) {
+    return decorationSet;
+  }
+
+  return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+}; // @see: https://product-fabric.atlassian.net/browse/ED-7304
+
+
+var removeColumnControlsSelectedDecoration = function removeColumnControlsSelectedDecoration(_ref4) {
+  var decorationSet = _ref4.decorationSet;
+  return decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
+};
+
+var hasColumnSelectedDecorations = function hasColumnSelectedDecorations(decorationSet) {
+  return !!findColumnControlSelectedDecoration(decorationSet).length;
+};
+
+export var maybeUpdateColumnControlsSelectedDecoration = function maybeUpdateColumnControlsSelectedDecoration(_ref5) {
+  var decorationSet = _ref5.decorationSet,
+      tr = _ref5.tr;
+
+  if (!hasColumnSelectedDecorations(decorationSet)) {
+    return decorationSet;
+  }
+
+  return removeColumnControlsSelectedDecoration({
+    decorationSet: decorationSet,
+    tr: tr
+  });
+};
+export var buildColumnControlsDecorations = function buildColumnControlsDecorations(_ref6) {
+  var decorationSet = _ref6.decorationSet,
+      tr = _ref6.tr;
+  return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
+    decorationSet: DecorationSet.empty,
+    tr: tr
+  });
+};

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-resizing.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { TableDecorations } from '../../../types';
+import { createResizeHandleDecoration, updateDecorations } from '../../../utils/decoration';
+import { composeDecorations } from './compose-decorations';
+var emptyDecorations = [[], []];
+
+var updateColumnResizeHandle = function updateColumnResizeHandle(columnResizesDecorations) {
+  return function (_ref) {
+    var decorationSet = _ref.decorationSet,
+        tr = _ref.tr;
+    return updateDecorations(tr.doc, decorationSet, columnResizesDecorations, TableDecorations.COLUMN_RESIZING_HANDLE);
+  };
+};
+
+var updateLastCellElement = function updateLastCellElement(lastCellElementsDecorations) {
+  return function (_ref2) {
+    var decorationSet = _ref2.decorationSet,
+        tr = _ref2.tr;
+    return updateDecorations(tr.doc, decorationSet, lastCellElementsDecorations, TableDecorations.LAST_CELL_ELEMENT);
+  };
+};
+
+export var buildColumnResizingDecorations = function buildColumnResizingDecorations(columnEndIndex) {
+  return function (_ref3) {
+    var tr = _ref3.tr,
+        decorationSet = _ref3.decorationSet;
+
+    var _ref4 = columnEndIndex < 0 ? emptyDecorations : createResizeHandleDecoration(tr, {
+      right: columnEndIndex
+    }),
+        _ref5 = _slicedToArray(_ref4, 2),
+        columnResizesDecorations = _ref5[0],
+        lastCellElementsDecorations = _ref5[1];
+
+    return composeDecorations([updateColumnResizeHandle(columnResizesDecorations), updateLastCellElement(lastCellElementsDecorations)])({
+      decorationSet: decorationSet,
+      tr: tr
+    });
+  };
+};

package/dist/esm/plugins/table/pm-plugins/decorations/utils/compose-decorations.js

@@ -0,0 +1,12 @@
+export var composeDecorations = function composeDecorations(transformers) {
+  return function (_ref) {
+    var decorationSet = _ref.decorationSet,
+        tr = _ref.tr;
+    return transformers.reduce(function (decorationSet, transform) {
+      return transform({
+        decorationSet: decorationSet,
+        tr: tr
+      });
+    }, decorationSet);
+  };
+};

package/dist/esm/plugins/table/pm-plugins/decorations/utils/index.js

@@ -0,0 +1,3 @@
+export { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './column-controls';
+export { buildColumnResizingDecorations } from './column-resizing';
+export { composeDecorations } from './compose-decorations';

package/dist/esm/plugins/table/pm-plugins/decorations/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/table/pm-plugins/default-table-selection.js

@@ -0,0 +1,5 @@
+export var defaultTableSelection = {
+  hoveredColumns: [],
+  hoveredRows: [],
+  isInDanger: false
+};

package/dist/esm/plugins/table/pm-plugins/keymap.js

@@ -0,0 +1,36 @@
+import { keymap } from 'prosemirror-keymap';
+import { chainCommands } from 'prosemirror-commands';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { addRowAroundSelection, emptyMultipleCellsWithAnalytics, deleteTableIfSelectedWithAnalytics } from '../commands-with-analytics';
+import { addColumnAfter, addColumnBefore } from '../commands/insert';
+import { withEditorAnalyticsAPI } from '../utils/analytics';
+
+var createTableWithAnalytics = function createTableWithAnalytics(editorAnalyticsAPI) {
+  return withEditorAnalyticsAPI({
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+    attributes: {
+      inputMethod: INPUT_METHOD.SHORTCUT
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(editorAnalyticsAPI)(createTable());
+};
+
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI) {
+  var list = {};
+  keymaps.bindKeymapWithCommand(keymaps.nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
+  keymaps.bindKeymapWithCommand(keymaps.previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
+  keymaps.bindKeymapWithCommand(keymaps.toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, moveCursorBackward, list); // Add row/column shortcuts
+
+  keymaps.bindKeymapWithCommand(keymaps.addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+  keymaps.bindKeymapWithCommand(keymaps.addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+  keymaps.bindKeymapWithCommand(keymaps.addColumnBefore.common, triggerUnlessTableHeader(addColumnBefore(getEditorContainerWidth)), list);
+  keymaps.bindKeymapWithCommand(keymaps.addColumnAfter.common, addColumnAfter(getEditorContainerWidth), list);
+  return keymap(list);
+}
+export default keymapPlugin;