@atlaskit/editor-core 161.0.0 → 162.0.2

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

@@ -432,7 +432,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (this.overflowShadowsObserver) {
           var _this$state$stickyHea;
 
-          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, containsHeaderRow(view.state, getNode()));
+          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, containsHeaderRow(getNode()));
         }
       }
 
@@ -507,7 +507,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
 
       var tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
-      var hasHeaderRow = containsHeaderRow(view.state, node);
+      var hasHeaderRow = containsHeaderRow(node);
       var rowControls = /*#__PURE__*/React.createElement("div", {
         className: ClassName.ROW_CONTROLS_WRAPPER
       }, /*#__PURE__*/React.createElement(TableFloatingControls, {

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

@@ -9,12 +9,6 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
-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; }
-
 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; } }
@@ -25,12 +19,12 @@ import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
-import { getPluginState, pluginKey } from '../pm-plugins/plugin-factory';
+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';
-import { setTableSize } from '../commands';
 import { getFeatureFlags } from '../../feature-flags-context';
 import { EmitterEvents } from '../../../extensibility';
 
@@ -72,7 +66,6 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _defineProperty(_assertThisInitialized(_this), "hasHoveredRows", false);
 
     _this.getPos = props.getPos;
-    _this.editorView = props.view;
     _this.tableRenderOptimization = props.tableRenderOptimization;
     _this.eventDispatcher = props.eventDispatcher;
     return _this;
@@ -81,42 +74,18 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   _createClass(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _window,
-          _this2 = this;
-
       var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
 
       if (rendered.dom) {
         this.table = rendered.dom;
       }
 
-      if (this.tableRenderOptimization && this.table && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-        this.resizeObserver = new ResizeObserver(function (entries) {
-          var _iterator = _createForOfIteratorHelper(entries),
-              _step;
-
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var entry = _step.value;
-              var height = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-              var width = entry.contentRect ? entry.contentRect.width : entry.target.offsetWidth;
-              setTableSize(height, width)(_this2.editorView.state, _this2.editorView.dispatch);
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-        });
-        this.resizeObserver.observe(this.table);
-      }
-
       return rendered;
     }
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this3 = this;
+      var _this2 = this;
 
       if (!this.table) {
         return;
@@ -124,13 +93,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
       var attrs = tableAttributes(node);
       Object.keys(attrs).forEach(function (attr) {
-        _this3.table.setAttribute(attr, attrs[attr]);
+        _this2.table.setAttribute(attr, attrs[attr]);
       });
     }
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this4 = this;
+      var _this3 = this;
 
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
@@ -156,7 +125,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             tableActive: tableActive,
             ordering: pluginState.ordering,
             tableResizingPluginState: tableResizingPluginState,
-            getNode: _this4.getNode,
+            getNode: _this3.getNode,
             containerWidth: containerWidth,
             contentDOM: forwardRef
           });

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

@@ -2,7 +2,7 @@ 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-factory';
+import { pluginKey as tablePluginKey } from '../plugin-key';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
 export var pluginKey = new PluginKey('tableDecorationsPlugin');
 export var getDecorations = function getDecorations(state) {

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

@@ -18,7 +18,8 @@ import { TableCssClassName as ClassName } from '../types';
 import { findControlsHoverDecoration, updateResizeHandles } from '../utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { defaultTableSelection } from './default-table-selection';
-import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
+import { createPluginState, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
 import TableCellNodeView from '../nodeviews/tableCell';
 var isBreakoutEnabled;
 var isDynamicTextSizingEnabled;

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

@@ -4,11 +4,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-import { PluginKey } from 'prosemirror-state';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { handleDocOrSelectionChanged } from '../handlers';
 import reducer from '../reducer';
-export var pluginKey = new PluginKey('tablePlugin');
+import { pluginKey } from './plugin-key';
 
 var _pluginFactory = pluginFactory(pluginKey, reducer, {
   mapping: function mapping(tr, pluginState) {

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

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export var pluginKey = new PluginKey('tablePlugin');

package/dist/esm/plugins/table/pm-plugins/safari-delayed-dom-selection-syncing-workaround.js

@@ -22,6 +22,8 @@ export var createPlugin = function createPlugin() {
           // DOM selection syncing during pointer drag.
           //
           // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+          // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
+          // https://github.com/ProseMirror/prosemirror-view/pull/116
           // This fix removes the selectionToDOM from the view
           // prior to selectionToDOM being called.
           // selectionToDOM checks if there is an "active"

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -6,7 +6,7 @@ import { pluginKey as widthPluginKey } from '../../../../../plugins/width';
 import { mapChildren } from '../../../../../utils/slice';
 import { TableCssClassName as ClassName, TableCssClassName } from '../../../types';
 import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../../../ui/consts';
-import { pluginKey as tablePluginKey } from '../../plugin-factory';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
 import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../../table-resizing/utils/dom';
 import { updateStickyState } from '../commands';
 import { getTop, getTree } from './dom';

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

@@ -80,13 +80,6 @@ export default (function (pluginState, action) {
 
       return _objectSpread(_objectSpread({}, pluginState), action.data);
 
-    case 'SET_TABLE_SIZE':
-      if (pluginState.tableWidth !== action.data.tableWidth || pluginState.tableHeight !== action.data.tableHeight) {
-        return _objectSpread(_objectSpread({}, pluginState), action.data);
-      }
-
-      return pluginState;
-
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':

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

@@ -1,10 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _defineProperty(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; }
-
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '../../messages';
@@ -13,7 +7,6 @@ import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeader
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
-import { checkIfNumberColumnEnabled } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '../analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -214,9 +207,7 @@ export var getToolbarConfig = function getToolbarConfig(config) {
 
     if (tableObject && pluginState.editorHasFocus) {
       var nodeType = state.schema.nodes.table;
-      var menu = getToolbarMenuConfig(config, _objectSpread(_objectSpread({}, pluginState), {}, {
-        isNumberColumnEnabled: checkIfNumberColumnEnabled(state)
-      }), intl);
+      var menu = getToolbarMenuConfig(config, pluginState, intl);
       var cellItems = getCellItems(config, state, intl); // Check if we need to show confirm dialog for delete button
 
       var confirmDialog;

package/dist/esm/plugins/table/transforms/metadata.js

@@ -1,4 +1,4 @@
-import { pluginKey } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
 import { fireAnalytics } from './fix-tables'; // Set metadata on a ProseMirror transaction for debugging purposes in Synchrony
 
 export var setMeta = function setMeta(meta) {

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

@@ -27,7 +27,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
 import { CONTENT_COMPONENT } from '../../../analytics/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../analytics';
-import { tableFloatingCellButtonStyles } from './styles.css';
+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) {

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

@@ -8,9 +8,10 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { getPluginState, pluginKey } from '../../pm-plugins/plugin-factory';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { pluginKey } from '../../pm-plugins/plugin-key';
 import { contextualMenuDropdownWidth, contextualMenuTriggerSize } from '../consts';
-import { tablePopupStyles } from './styles.css';
+import { tablePopupStyles } from './styles';
 import ContextualMenu from './ContextualMenu';
 var MenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), tablePopupStyles); // offset of the contextual menu dropdown
 

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

@@ -127,7 +127,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableContainerWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_CONTAINER));
       var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
-      var hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state);
+      var hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
       return /*#__PURE__*/React.createElement(Popup, _extends({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,

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

@@ -212,9 +212,8 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
           targetRef = _this$props4.targetRef,
           layout = _this$props4.layout,
           isResizing = _this$props4.isResizing,
-          tableWidth = _this$props4.tableWidth,
           stickyHeader = _this$props4.stickyHeader;
-      return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
+      return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
     }
   }]);
 

package/dist/esm/plugins/table/ui/common-styles.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css } from '@emotion/react';
+import { css as deprecatedCss } from 'styled-components';
+import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
+import { fontSize } from '@atlaskit/theme/constants';
+import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
+import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { scrollbarStyles } from '../../../ui/styles';
+import { TableCssClassName as ClassName } from '../types';
+import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
+import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
+var cornerControlHeight = tableToolbarSize + 1;
+var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n  }\n}\n");
+var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n  }\n  &.").concat(ClassName.WITH_CONTROLS, " {\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n    }\n  }\n}");
+export var tableStyles = function tableStyles(props) {
+  var _props$featureFlags;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button*/\n    ", "\n    /* Ends Delete button*/\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 1px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-child,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > h6:first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        opacity: 0.3;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n"])), ClassName.LAYOUT_BUTTON, N20A, N300, ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, B300, tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, stickyRowOffsetTop, stickyRowZIndex, N40A, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, R500, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
+};
+export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
+export var deprecatedTableFullPageEditorStyles = deprecatedCss(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
+export var tableCommentEditorStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles); // TODO remove this after migrated off styled-component
+
+export var deprecatedTableCommentEditorStyles = deprecatedCss(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

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

@@ -0,0 +1,68 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+
+import { css } from '@emotion/react';
+import { tableCellBorderWidth, tableMarginBottom, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
+import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } from './consts';
+import { TableCssClassName as ClassName } from '../types';
+import { borderRadius } from '@atlaskit/theme/constants';
+
+var InsertLine = function InsertLine(cssString) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
+};
+
+var Marker = function Marker(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  position: absolute;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 50%;\n  pointer-events: none;\n"])), tableBorderColor(props), lineMarkerSize, lineMarkerSize);
+};
+
+export var InsertMarker = function InsertMarker(props, cssString) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_MARKER, Marker(props), cssString);
+};
+
+var Button = function Button(cssString) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  border-width: 0px;\n  display: inline-flex;\n  max-width: 100%;\n  text-align: center;\n  margin: 0px;\n  padding: 0px;\n  text-decoration: none;\n  transition: background 0.1s ease-out 0s,\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n  outline: none !important;\n  cursor: none;\n\n  > .", " {\n    display: inline-flex;\n    max-height: 100%;\n    max-width: 100%;\n  }\n  ", "\n"])), borderRadius(), ClassName.CONTROLS_BUTTON_ICON, cssString);
+};
+
+export var HeaderButton = function HeaderButton(props, cssString) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    border: 1px solid ", ";\n    display: block;\n    box-sizing: border-box;\n    padding: 0;\n\n    :focus {\n      outline: none;\n    }\n    ", "\n  }\n\n  .", "::after {\n    content: ' ';\n    background-color: transparent;\n    left: -15px;\n    top: 0;\n    position: absolute;\n    width: 15px;\n    height: 100%;\n    z-index: 1;\n  }\n\n  .active .", " {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), ClassName.CONTROLS_BUTTON, tableToolbarColor(props), tableBorderColor(props), cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, N0, tableToolbarSelectedColor, tableBorderSelectedColor);
+};
+export var HeaderButtonHover = function HeaderButtonHover() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_BUTTON, N0, tableToolbarSelectedColor, tableBorderSelectedColor);
+};
+export var HeaderButtonDanger = function HeaderButtonDanger() {
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex);
+};
+
+var InsertButton = function InsertButton() {
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: 0;\n  }\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    ", "\n  }\n  .", " {\n    display: none;\n  }\n  &:hover .", " {\n    display: flex;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.CONTROLS_INSERT_BUTTON_INNER, ClassName.CONTROLS_INSERT_BUTTON, tableInsertColumnButtonSize, tableInsertColumnButtonSize, ClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: white;\n      box-shadow: 0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A, ";\n      color: ").concat(N300, ";\n    ")), ClassName.CONTROLS_INSERT_LINE, ClassName.CONTROLS_INSERT_LINE);
+};
+
+var InsertButtonHover = function InsertButtonHover() {
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  .", ":hover {\n    background: ", ";\n    color: white;\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON, B300);
+};
+
+export var insertColumnButtonWrapper = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
+export var insertRowButtonWrapper = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
+export var columnControlsLineMarker = function columnControlsLineMarker(props) {
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  .", ".", "\n    table\n    tr:first-child\n    td,\n  .", ".", "\n    table\n    tr:first-child\n    th {\n    position: relative;\n\n    &::before {\n      content: ' ';\n      ", ";\n      top: -", "px;\n      right: -", "px;\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, Marker(props), tableToolbarSize + lineMarkerOffsetFromColumnControls, lineMarkerSize / 2);
+};
+export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: white;\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(N20A, ";\n        color: ").concat(N300, ";\n      ")), ClassName.CONTROLS_DELETE_BUTTON, R300);
+export var OverflowShadow = function OverflowShadow(props) {
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(\n      100% - ", "px\n    );\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n  .", ".", " {\n    .", ", .", " {\n      top: ", "px;\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom + tableToolbarSize - 2, tableMarginTop + tableToolbarSize - 1, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, N40A, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, N40A, ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom - 2, tableMarginTop - 1, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableControlsSpacing);
+};
+
+var columnHeaderButton = function columnHeaderButton(props, cssString) {
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  display: block;\n  box-sizing: border-box;\n  padding: 0;\n\n  :focus {\n    outline: none;\n  }\n\n  ", "\n"])), tableToolbarColor(props), tableBorderColor(props), cssString);
+};
+
+var columnHeaderButtonSelected = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), N0, tableToolbarSelectedColor, tableBorderSelectedColor, columnControlsSelectedZIndex);
+export var columnControlsDecoration = function columnControlsDecoration(props) {
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-child\n    td.", ",\n    table\n    tr:first-child\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-child\n    td.", ",\n    .", "\n    table\n    tr:first-child\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: none;\n        height: ").concat(tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+};
+export var hoveredDeleteButton = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor);
+export var hoveredCell = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor);
+export var hoveredWarningCell = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, Y50, Y200);
+export var resizeHandle = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", ", th.", " {\n      .", "::after {\n        content: ' ';\n        right: ", "px;\n        position: absolute;\n        width: ", "px;\n        height: calc(100% + 1px);\n        background-color: ", ";\n        z-index: ", ";\n        top: 0;\n      }\n    }\n\n    table\n      tr:first-child\n      th.", "\n      .", "::after,\n      table\n      tr:first-child\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);

package/dist/esm/plugins/table/utils/nodes.js

@@ -2,11 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { pluginKey } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
 export var isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
 };
-export var containsHeaderColumn = function containsHeaderColumn(state, table) {
+export var containsHeaderColumn = function containsHeaderColumn(table) {
   var map = TableMap.get(table); // Get cell positions for first column.
 
   var cellPositions = map.cellsInRect({
@@ -20,7 +20,7 @@ export var containsHeaderColumn = function containsHeaderColumn(state, table) {
     try {
       var cell = table.nodeAt(cellPositions[i]);
 
-      if (cell && cell.type !== state.schema.nodes.tableHeader) {
+      if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
         return false;
       }
     } catch (e) {
@@ -30,27 +30,27 @@ export var containsHeaderColumn = function containsHeaderColumn(state, table) {
 
   return true;
 };
-export var containsHeaderRow = function containsHeaderRow(state, table) {
+export var containsHeaderRow = function containsHeaderRow(table) {
   var map = TableMap.get(table);
 
   for (var i = 0; i < map.width; i++) {
     var cell = table.nodeAt(map.map[i]);
 
-    if (cell && cell.type !== state.schema.nodes.tableHeader) {
+    if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
       return false;
     }
   }
 
   return true;
 };
-export var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(state) {
-  return filterNearSelection(state, findTable, containsHeaderColumn, false);
+export var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(selection) {
+  return filterNearSelection(selection, findTable, containsHeaderColumn, false);
 };
-export var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(state) {
-  return filterNearSelection(state, findTable, containsHeaderRow, false);
+export var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(selection) {
+  return filterNearSelection(selection, findTable, containsHeaderRow, false);
 };
-export var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(state) {
-  return filterNearSelection(state, findTable, function (_, table) {
+export var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(selection) {
+  return filterNearSelection(selection, findTable, function (table) {
     return !!table.attrs.isNumberColumnEnabled;
   }, false);
 };
@@ -86,14 +86,14 @@ export var tablesHaveDifferentNoOfColumns = function tablesHaveDifferentNoOfColu
   return prevMap.width !== currentMap.width;
 };
 
-function filterNearSelection(state, findNode, predicate, defaultValue) {
-  var found = findNode(state.selection);
+function filterNearSelection(selection, findNode, predicate, defaultValue) {
+  var found = findNode(selection);
 
   if (!found) {
     return defaultValue;
   }
 
-  return predicate(state, found.node, found.pos);
+  return predicate(found.node, found.pos);
 }
 
 function getTableWidths(node) {

package/dist/esm/plugins/tasks-and-decisions/commands.js

@@ -1,6 +1,8 @@
 import { autoJoin } from 'prosemirror-commands';
+import { NodeRange } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, replaceParentNodeOfType, safeInsert, setTextSelection } from 'prosemirror-utils';
+import { liftTarget } from 'prosemirror-transform';
 import { uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD, USER_CONTEXT } from '../analytics';
 import { GapCursorSelection } from '../selection/gap-cursor-selection';
@@ -220,6 +222,14 @@ export var createListAtSelection = function createListAtSelection(tr, list, item
     }, [item.create({
       localId: uuid.generate()
     }, $from.node($from.depth).content)]);
+    var hasBlockquoteParent = findParentNodeOfType(blockquote)(selection);
+
+    if (hasBlockquoteParent) {
+      var liftedDepth = $from.depth - 1;
+      var range = new NodeRange($from, $to, liftedDepth);
+      tr.lift(range, liftTarget(range));
+    }
+
     var listParent = findParentNodeOfType(taskList)(selection) || findParentNodeOfType(decisionList)(selection);
     var listItem = findParentNodeOfType(taskItem)(selection) || findParentNodeOfType(decisionItem)(selection); // For a selection inside a task/decision list, we can't just simply replace the
     // node type as it will mess up lists with > 1 item
@@ -251,10 +261,12 @@ export var createListAtSelection = function createListAtSelection(tr, list, item
 
     var nodeTypesToReplace = [blockquote];
 
-    if (nodeType === paragraph && childCount > 0) {
+    if (nodeType === paragraph && childCount > 0 || hasBlockquoteParent) {
       // Only convert paragraphs containing content.
       // Empty paragraphs use the default flow.
       // This distinction ensures the text selection remains in the correct location.
+      // We also want to replace the paragraph type when we are inside a blockQuote
+      // to avoid inserting an extra taskList whilst keeping the paragraph
       nodeTypesToReplace.push(paragraph);
     }
 

package/dist/esm/plugins/text-formatting/styles.js

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
-export var textFormattingStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), codeMarkSharedStyles);
+export var textFormattingStyles = function textFormattingStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), codeMarkSharedStyles(props));
+};