@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/esm/plugins/selection/pm-plugins/selection-main.js

@@ -1,6 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common/utils';
 import { createPluginState, getPluginState } from '../plugin-factory';
 import { selectionPluginKey } from '../types';
 import { getDecorations, shouldRecalcDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../utils';
@@ -118,27 +117,12 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
           return false;
         },
         keydown: function keydown(editorView, event) {
-          var state = editorView.state; // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
-          // contenteditable="false". (See https://product-fabric.atlassian.net/browse/ED-9452)
-          // On keypress, if the head of cursor selection touches a node with contenteditable="false",
-          // we temporarily remove the attribute, wait one tick, then restore it with its original value.
-
-          if (browser.gecko) {
-            var node = editorView.nodeDOM(editorView.state.selection.head);
-
-            if (node instanceof HTMLElement && node.getAttribute('contenteditable') === 'false') {
-              node.removeAttribute('contenteditable');
-              requestAnimationFrame(function () {
-                node.setAttribute('contenteditable', 'false');
-              });
-            }
-          } // Bugfix for block ReactNodeViews like table and extension
+          // Bugfix for block ReactNodeViews like table and extension
           // They could not be selected with Shift + ArrowDown/ArrowUp
           // Fixed when contenteditable = false, but then you couldn't edit their contents
           // Therefore, briefly set contenteditable=false to allow the selection through, then set it back to true
-
-
           if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            var state = editorView.state;
             var pos;
 
             if (event.key === 'ArrowDown') {
@@ -151,11 +135,11 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
               }
             }
 
-            var _node = editorView.nodeDOM(pos);
+            var node = editorView.nodeDOM(pos);
 
-            if (_node instanceof HTMLDivElement && _node.className.includes('View-content-wrap') // class added by ReactNodeView
+            if (node instanceof HTMLDivElement && node.className.includes('View-content-wrap') // class added by ReactNodeView
             ) {
-              toggleContentEditable(_node, true);
+              toggleContentEditable(node, true);
             }
           }
 

package/dist/esm/plugins/status/index.js

@@ -23,27 +23,24 @@ var baseStatusPlugin = function baseStatusPlugin(options) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'status',
-        plugin: function plugin(_ref) {
-          var dispatch = _ref.dispatch,
-              portalProviderAPI = _ref.portalProviderAPI,
-              eventDispatcher = _ref.eventDispatcher;
-          return createStatusPlugin(dispatch, portalProviderAPI, eventDispatcher, options);
+        plugin: function plugin(pmPluginFactoryParams) {
+          return createStatusPlugin(pmPluginFactoryParams, options);
         }
       }, {
         name: 'statusKeymap',
         plugin: keymapPlugin
       }];
     },
-    contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView;
+    contentComponent: function contentComponent(_ref) {
+      var editorView = _ref.editorView;
       var domAtPos = editorView.domAtPos.bind(editorView);
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           statusState: pluginKey
         },
-        render: function render(_ref3) {
-          var _ref3$statusState = _ref3.statusState,
-              statusState = _ref3$statusState === void 0 ? {} : _ref3$statusState;
+        render: function render(_ref2) {
+          var _ref2$statusState = _ref2.statusState,
+              statusState = _ref2$statusState === void 0 ? {} : _ref2$statusState;
           var showStatusPickerAt = statusState.showStatusPickerAt;
 
           if (typeof showStatusPickerAt !== 'number') {
@@ -92,8 +89,8 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
   }
 
   plugin.pluginsOptions = {
-    quickInsert: function quickInsert(_ref4) {
-      var formatMessage = _ref4.formatMessage;
+    quickInsert: function quickInsert(_ref3) {
+      var formatMessage = _ref3.formatMessage;
       return [{
         id: 'status',
         title: formatMessage(messages.status),

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

@@ -1,133 +1,55 @@
-import _get from "@babel/runtime/helpers/get";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-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 _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
-
-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; } }
+var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Status } from '@atlaskit/status/element';
-import { ReactNodeView } from '../../../nodeviews';
 import { messages } from './messages';
-export var StyledStatus = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: ", ";\n"])), function (props) {
-  return props.placeholderStyle ? 0.5 : 1;
-});
-
-var StatusContainerView = /*#__PURE__*/function (_React$Component) {
-  _inherits(StatusContainerView, _React$Component);
-
-  var _super = _createSuper(StatusContainerView);
-
-  function StatusContainerView(props) {
-    var _this;
-
-    _classCallCheck(this, StatusContainerView);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
-      if (event.nativeEvent.stopImmediatePropagation) {
-        event.nativeEvent.stopImmediatePropagation();
-      } // handling of popup is done in plugin.apply on selection change.
-
-    });
+var styledStatus = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: 1;\n"])));
+var styledStatusPlaceholder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  opacity: 0.5;\n"])));
+
+var StatusContainerView = function StatusContainerView(props) {
+  var text = props.text,
+      color = props.color,
+      localId = props.localId,
+      style = props.style,
+      formatMessage = props.intl.formatMessage;
+  var statusText = text ? text : formatMessage(messages.placeholder);
+
+  var handleClick = function handleClick(event) {
+    if (event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    } // handling of popup is done in plugin.apply on selection change.
 
-    return _this;
-  }
-
-  _createClass(StatusContainerView, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          text = _this$props.text,
-          color = _this$props.color,
-          localId = _this$props.localId,
-          style = _this$props.style,
-          formatMessage = _this$props.intl.formatMessage;
-      var statusText = text ? text : formatMessage(messages.placeholder);
-      return /*#__PURE__*/React.createElement(StyledStatus, {
-        placeholderStyle: !text
-      }, /*#__PURE__*/React.createElement(Status, {
-        text: statusText,
-        color: color,
-        localId: localId,
-        style: style,
-        onClick: this.handleClick
-      }));
-    }
-  }]);
-
-  return StatusContainerView;
-}(React.Component);
+  };
 
-_defineProperty(StatusContainerView, "displayName", 'StatusContainerView');
+  return jsx("span", {
+    css: text ? styledStatus : styledStatusPlaceholder
+  }, jsx(Status, {
+    text: statusText,
+    color: color,
+    localId: localId,
+    style: style,
+    onClick: handleClick
+  }));
+};
 
 export var IntlStatusContainerView = injectIntl(StatusContainerView);
-export var StatusNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(StatusNodeView, _ReactNodeView);
-
-  var _super2 = _createSuper(StatusNodeView);
-
-  function StatusNodeView() {
-    _classCallCheck(this, StatusNodeView);
-
-    return _super2.apply(this, arguments);
-  }
-
-  _createClass(StatusNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return _get(_getPrototypeOf(StatusNodeView.prototype), "createDomRef", this).call(this);
-    }
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var _node$attrs = node.attrs,
-          color = _node$attrs.color,
-          localId = _node$attrs.localId,
-          style = _node$attrs.style;
-      element.dataset.color = color;
-      element.dataset.localId = localId;
-      element.dataset.style = style;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var options = props.options;
-      var _this$node$attrs = this.node.attrs,
-          text = _this$node$attrs.text,
-          color = _this$node$attrs.color,
-          localId = _this$node$attrs.localId,
-          style = _this$node$attrs.style;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(IntlStatusContainerView, {
-        view: this.view,
-        text: text,
-        color: color,
-        style: style,
-        localId: localId
-      }), options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE);
-    }
-  }]);
-
-  return StatusNodeView;
-}(ReactNodeView);
-export default function statusNodeView(portalProviderAPI, eventDispatcher, options) {
-  return function (node, view, getPos) {
-    var hasIntlContext = true;
-    return new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      options: options
-    }, undefined, undefined, undefined, hasIntlContext).init();
-  };
-}
+export var StatusNodeView = function StatusNodeView(props) {
+  var view = props.view;
+  var _props$node$attrs = props.node.attrs,
+      text = _props$node$attrs.text,
+      color = _props$node$attrs.color,
+      localId = _props$node$attrs.localId,
+      style = _props$node$attrs.style;
+  return jsx(IntlStatusContainerView, {
+    view: view,
+    text: text,
+    color: color,
+    style: style,
+    localId: localId
+  });
+};

package/dist/esm/plugins/status/plugin.js

@@ -6,12 +6,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import statusNodeView from './nodeviews/status';
+import { getInlineNodeViewProducer } from '../../nodeviews/getInlineNodeViewProducer';
+import { StatusNodeView } from './nodeviews/status';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
 export { pluginKey, pluginKeyName } from './plugin-key';
 
-var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispatcher, options) {
+var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
   return new SafePlugin({
     state: {
       init: function init() {
@@ -26,7 +27,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
         if (meta) {
           var newState = _objectSpread(_objectSpread({}, state), meta);
 
-          dispatch(pluginKey, newState);
+          pmPluginFactoryParams.dispatch(pluginKey, newState);
           return newState;
         }
 
@@ -42,7 +43,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
           });
 
           if (_newState.showStatusPickerAt !== state.showStatusPickerAt) {
-            dispatch(pluginKey, _newState);
+            pmPluginFactoryParams.dispatch(pluginKey, _newState);
             return _newState;
           }
         }
@@ -63,7 +64,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
               showStatusPickerAt: _showStatusPickerAt
             });
 
-            dispatch(pluginKey, _newState2);
+            pmPluginFactoryParams.dispatch(pluginKey, _newState2);
             return _newState2;
           }
         }
@@ -112,7 +113,13 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
     key: pluginKey,
     props: {
       nodeViews: {
-        status: statusNodeView(portalProviderAPI, eventDispatcher, options)
+        status: getInlineNodeViewProducer({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: StatusNodeView,
+          extraComponentProps: {
+            options: options
+          }
+        })
       }
     }
   });

package/dist/esm/plugins/status/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var statusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default\n    // as it will make all inline nodes inline-block by default\n    display: inline-block;\n    user-select: all;\n\n    > span {\n      display: inline-block;\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);
+export var statusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    > span {\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);

package/dist/esm/plugins/status/ui/statusPicker.js

@@ -13,8 +13,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
@@ -34,7 +35,7 @@ export var InputMethod;
   InputMethod["enterKey"] = "enterKey";
 })(InputMethod || (InputMethod = {}));
 
-var PickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), N0, gridSize(), borderRadius(), dropShadow);
+var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), N0, gridSize(), borderRadius(), dropShadow);
 export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   _inherits(StatusPickerWithoutAnalytcs, _React$Component);
 
@@ -228,16 +229,17 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
       var _this$state3 = this.state,
           color = _this$state3.color,
           text = _this$state3.text;
-      return target && /*#__PURE__*/React.createElement(PopupWithListeners, {
+      return target && jsx(PopupWithListeners, {
         target: target,
         offset: [0, 8],
         handleClickOutside: this.handleClickOutside,
         handleEscapeKeydown: this.handleEscapeKeydown,
         zIndex: akEditorFloatingDialogZIndex,
         fitHeight: 40
-      }, /*#__PURE__*/React.createElement(PickerContainer, {
+      }, jsx("div", {
+        css: pickerContainer,
         onClick: this.handlePopupClick
-      }, /*#__PURE__*/React.createElement(AkStatusPicker, {
+      }, jsx(AkStatusPicker, {
         autoFocus: isNew,
         selectedColor: color,
         text: text,

package/dist/esm/plugins/table/commands/insert.js

@@ -4,7 +4,6 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { addColumnAt as addColumnAtPMUtils, addRowAt, createTable as createTableNode, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
 import { safeInsert } from 'prosemirror-utils';
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 import { rescaleColumns } from '../transforms/column-width';
@@ -133,10 +132,6 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
 };
 export var createTable = function createTable() {
   return function (state, dispatch) {
-    if (!getPluginState(state)) {
-      return false;
-    }
-
     var table = createTableNode({
       schema: state.schema
     });

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

@@ -230,7 +230,7 @@ var tablesPlugin = function tablesPlugin(options) {
           id: 'table',
           title: formatMessage(messages.table),
           description: formatMessage(messages.tableDescription),
-          keywords: ['cell'],
+          keywords: ['cell', 'table'],
           priority: 600,
           keyshortcut: tooltip(toggleTable),
           icon: function icon() {

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

@@ -15,12 +15,18 @@ import { createTableView } from '../nodeviews/table';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
-import { findControlsHoverDecoration, updateResizeHandles } from '../utils';
+import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, updateResizeHandles } from '../utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import TableCellNodeView from '../nodeviews/tableCell';
+import { transformSliceRemoveCellBackgroundColor, transformSliceToRemoveColumnsWidths, transformSliceToAddTableHeaders } from '../commands/misc';
+import { transformSliceToRemoveOpenLayoutNodes } from '../../layout/utils';
+import { transformSliceToRemoveOpenExpand } from '../../expand/utils';
+import { transformSliceToRemoveOpenBodiedExtension } from '../../extension/actions';
+import { insideTable } from '../../../utils';
+import { isHeaderRowRequired } from '../utils/paste';
 var isBreakoutEnabled;
 var isDynamicTextSizingEnabled;
 var isFullWidthModeEnabled;
@@ -60,6 +66,18 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   var invalidTableIds = [];
+  var editorViewRef = null;
+
+  var getCurrentEditorState = function getCurrentEditorState() {
+    var editorView = editorViewRef;
+
+    if (!editorView) {
+      return null;
+    }
+
+    return editorView.state;
+  };
+
   return new SafePlugin({
     state: state,
     key: pluginKey,
@@ -103,6 +121,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     },
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
+      editorViewRef = editorView;
       return {
         update: function update(view) {
           var state = view.state,
@@ -152,6 +171,48 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       };
     },
     props: {
+      transformPasted: function transformPasted(slice) {
+        var editorState = getCurrentEditorState();
+
+        if (!editorState) {
+          return slice;
+        }
+
+        var schema = editorState.schema; // if we're pasting to outside a table or outside a table
+        // header, ensure that we apply any table headers to the first
+        // row of content we see, if required
+
+        if (!insideTable(editorState) && isHeaderRowRequired(editorState)) {
+          slice = transformSliceToAddTableHeaders(slice, schema);
+        }
+
+        slice = transformSliceToFixHardBreakProblemOnCopyFromCell(slice, schema); // We do this separately, so it also applies to drag/drop events
+        // This needs to go before `transformSliceToRemoveOpenExpand`
+
+        slice = transformSliceToRemoveOpenLayoutNodes(slice, schema); // If a partial paste of expand, paste only the content
+        // This needs to go before `transformSliceToRemoveOpenTable`
+
+        slice = transformSliceToRemoveOpenExpand(slice, schema);
+        /** If a partial paste of table, paste only table's content */
+
+        slice = transformSliceToRemoveOpenTable(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        slice = transformSliceToCorrectEmptyTableCells(slice, schema);
+
+        if (!pluginConfig.allowColumnResizing) {
+          slice = transformSliceToRemoveColumnsWidths(slice, schema);
+        } // If we don't allow background on cells, we need to remove it
+        // from the paste slice
+
+
+        if (!pluginConfig.allowBackgroundColor) {
+          slice = transformSliceRemoveCellBackgroundColor(slice, schema);
+        }
+
+        return slice;
+      },
       handleClick: function handleClick(_ref2, _pos, event) {
         var state = _ref2.state,
             dispatch = _ref2.dispatch;

package/dist/esm/plugins/table/ui/FloatingContextualButton/index.js

@@ -5,18 +5,16 @@ 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 _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
 
 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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -29,7 +27,6 @@ import { CONTENT_COMPONENT } from '../../../analytics/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../analytics';
 import { tableFloatingCellButtonStyles } from './styles';
 import { ErrorBoundary } from '../../../../ui/ErrorBoundary';
-var ButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), tableFloatingCellButtonStyles);
 export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
   _inherits(FloatingContextualButtonInner, _React$Component);
 
@@ -108,12 +105,14 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
 
       var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
       var labelCellOptions = formatMessage(messages.cellOptions);
-      var button = /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+      var button = jsx("div", {
+        css: tableFloatingCellButtonStyles
+      }, jsx(ToolbarButton, {
         className: ClassName.CONTEXTUAL_MENU_BUTTON,
         selected: isContextualMenuOpen,
         title: labelCellOptions,
         onClick: this.handleClick,
-        iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
+        iconBefore: jsx(ExpandIcon, {
           label: ""
         }),
         "aria-label": labelCellOptions
@@ -122,7 +121,7 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
 
       if (this.props.stickyHeader && parentSticky) {
         var pos = targetCellRef.getBoundingClientRect();
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           style: {
             position: 'fixed',
             top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
@@ -132,7 +131,7 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
         }, button);
       }
 
-      return /*#__PURE__*/React.createElement(Popup, {
+      return jsx(Popup, {
         alignX: "right",
         alignY: "start",
         target: targetCellRef,
@@ -159,9 +158,9 @@ _defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextua
 
 var FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return jsx(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
+  }, jsx(FloatingContextualButton, props));
 }

package/dist/esm/plugins/table/ui/FloatingContextualButton/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N0, N20 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';