@atlaskit/editor-core 161.0.0 → 162.0.0

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

@@ -5,12 +5,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';
 
@@ -44,31 +44,17 @@ export default class TableView extends ReactNodeView {
     _defineProperty(this, "hasHoveredRows", false);
 
     this.getPos = props.getPos;
-    this.editorView = props.view;
     this.tableRenderOptimization = props.tableRenderOptimization;
     this.eventDispatcher = props.eventDispatcher;
   }
 
   getContentDOM() {
-    var _window;
-
     const 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(entries => {
-        for (let entry of entries) {
-          const height = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-          const width = entry.contentRect ? entry.contentRect.width : entry.target.offsetWidth;
-          setTableSize(height, width)(this.editorView.state, this.editorView.dispatch);
-        }
-      });
-      this.resizeObserver.observe(this.table);
-    }
-
     return rendered;
   }
 

package/dist/es2019/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 const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);

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

@@ -12,7 +12,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';
 let isBreakoutEnabled;
 let isDynamicTextSizingEnabled;

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

@@ -1,8 +1,7 @@
-import { PluginKey } from 'prosemirror-state';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { handleDocOrSelectionChanged } from '../handlers';
 import reducer from '../reducer';
-export const pluginKey = new PluginKey('tablePlugin');
+import { pluginKey } from './plugin-key';
 export const {
   createPluginState,
   createCommand,

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

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

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

@@ -22,6 +22,8 @@ export const 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/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -4,7 +4,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/es2019/plugins/table/reducer.js

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

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

@@ -6,7 +6,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';
@@ -208,9 +207,7 @@ export const getToolbarConfig = config => (state, intl) => {
 
   if (tableObject && pluginState.editorHasFocus) {
     const nodeType = state.schema.nodes.table;
-    const menu = getToolbarMenuConfig(config, { ...pluginState,
-      isNumberColumnEnabled: checkIfNumberColumnEnabled(state)
-    }, intl);
+    const menu = getToolbarMenuConfig(config, pluginState, intl);
     const cellItems = getCellItems(config, state, intl); // Check if we need to show confirm dialog for delete button
 
     let confirmDialog;

package/dist/es2019/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 const setMeta = meta => tr => {

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

@@ -4,7 +4,8 @@ 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 ContextualMenu from './ContextualMenu';

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

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

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

@@ -181,10 +181,9 @@ class LayoutButton extends React.Component {
       targetRef,
       layout,
       isResizing,
-      tableWidth,
       stickyHeader
     } = this.props;
-    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/es2019/plugins/table/ui/common-styles.css.js

@@ -1,4 +1,5 @@
-import { css } from 'styled-components';
+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';
@@ -40,7 +41,10 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
     }
   }
 }`;
-export const tableStyles = css`
+export const tableStyles = props => {
+  var _props$featureFlags;
+
+  return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${N20A};
     color: ${N300};
@@ -54,8 +58,8 @@ export const tableStyles = css`
   }
 
   .ProseMirror {
-    ${tableSharedStyle};
-    ${columnControlsLineMarker};
+    ${tableSharedStyle(props)};
+    ${columnControlsLineMarker(props)};
     ${hoveredDeleteButton};
     ${hoveredCell};
     ${hoveredWarningCell};
@@ -73,7 +77,7 @@ export const tableStyles = css`
       }
 
       td.${ClassName.TABLE_CELL} {
-        background-color: ${tableCellBackgroundColor};
+        background-color: ${tableCellBackgroundColor(props)};
       }
     }
 
@@ -175,7 +179,7 @@ export const tableStyles = css`
 
     tr.sticky th {
       border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor};
+        ${tableBorderColor(props)};
       margin-right: -1px;
     }
 
@@ -183,7 +187,7 @@ export const tableStyles = css`
       border-right-width: 1px;
     }
 
-    /* add left edge for first cell */
+     /* add left edge for first cell */
     .${ClassName.TABLE_STICKY} tr.sticky > th:first-child {
       margin-left: 0px;
     }
@@ -242,16 +246,13 @@ export const tableStyles = css`
       border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid white;
     }
 
-    ${props => {
-  var _props$featureFlags;
-
-  return (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '';
-}}
+    ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
+    ${OverflowShadow(props)}
 
-    ${OverflowShadow}
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
       height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
     }
+
     .less-padding {
       padding: 0 ${tablePadding}px;
 
@@ -288,7 +289,7 @@ export const tableStyles = css`
       width: 100% !important;
     }
 
-    ${columnControlsDecoration};
+    ${columnControlsDecoration(props)};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -299,7 +300,7 @@ export const tableStyles = css`
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
         position: relative;
 
-        ${InsertMarker(`
+        ${InsertMarker(props, `
           left: -11px;
           top: 9px;
         `)};
@@ -308,27 +309,29 @@ export const tableStyles = css`
       .${ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER} {
         position: relative;
 
-        ${InsertMarker(`
+        ${InsertMarker(props, `
           right: -1px;
           top: -12px;
         `)};
       }
     }
+
     .${ClassName.CORNER_CONTROLS}.sticky {
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
         /* sticky row insert dot overlaps other row insert and messes things up */
         display: none !important;
       }
     }
+
     .${ClassName.CONTROLS_CORNER_BUTTON} {
       position: absolute;
       top: 0;
       width: ${tableToolbarSize + 1}px;
       height: ${tableToolbarSize + 1}px;
-      border: 1px solid ${tableBorderColor};
+      border: 1px solid ${tableBorderColor(props)};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableToolbarColor};
+      background: ${tableToolbarColor(props)};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -339,6 +342,7 @@ export const tableStyles = css`
       border-color: ${tableBorderSelectedColor};
       background: ${tableToolbarSelectedColor};
     }
+
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
         width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
@@ -347,11 +351,13 @@ export const tableStyles = css`
         border-right-width: 0;
       }
     }
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
       border-color: ${tableBorderSelectedColor};
       background: ${tableToolbarSelectedColor};
       cursor: pointer;
     }
+
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
       border-color: ${tableBorderDeleteColor};
@@ -365,7 +371,7 @@ export const tableStyles = css`
       display: none;
       position: relative;
 
-      ${InsertMarker(`
+      ${InsertMarker(props, `
         bottom: -1px;
         left: -11px;
       `)};
@@ -387,8 +393,8 @@ export const tableStyles = css`
         z-index: ${akEditorUnitZIndex};
       }
 
-      ${HeaderButton(`
-        border-bottom: 1px solid ${tableBorderColor};
+      ${HeaderButton(props, `
+        border-bottom: 1px solid ${tableBorderColor(props)};
         border-right: 0px;
         border-radius: 0;
         height: 100%;
@@ -406,6 +412,7 @@ export const tableStyles = css`
         }
       `)}
     }
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
       ${HeaderButtonHover()}
       ${HeaderButtonDanger()}
@@ -420,25 +427,27 @@ export const tableStyles = css`
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
+
     .${ClassName.NUMBERED_COLUMN_BUTTON} {
-      border: 1px solid ${tableBorderColor};
+      border: 1px solid ${tableBorderColor(props)};
       box-sizing: border-box;
       margin-top: -1px;
       padding-bottom: 2px;
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableToolbarColor};
-      color: ${tableTextColor};
-      border-color: ${tableBorderColor};
+      background-color: ${tableToolbarColor(props)};
+      color: ${tableTextColor(props)};
+      border-color: ${tableBorderColor(props)};
 
       :first-child {
         margin-top: 0;
       }
       :last-child {
-        border-bottom: 1px solid ${tableBorderColor};
+        border-bottom: 1px solid ${tableBorderColor(props)};
       }
     }
+
     .${ClassName.WITH_CONTROLS} {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
         display: block;
@@ -567,6 +576,7 @@ export const tableStyles = css`
     cursor: col-resize;
   }
 `;
+};
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
@@ -574,10 +584,25 @@ export const tableFullPageEditorStyles = css`
     width: 100%;
   }
 `;
+export const deprecatedTableFullPageEditorStyles = deprecatedCss`
+  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+`;
 export const tableCommentEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
     margin-right: 0;
     ${scrollbarStyles};
   }
+`; // TODO remove this after migrated off styled-component
+
+export const deprecatedTableCommentEditorStyles = deprecatedCss`
+  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+    margin-left: 0;
+    margin-right: 0;
+    ${scrollbarStyles};
+  }
 `;

package/dist/es2019/plugins/table/ui/ui-styles.css.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+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';
@@ -16,17 +16,18 @@ const InsertLine = cssString => css`
   }
 `;
 
-const Marker = css`
-  background-color: ${tableBorderColor};
+const Marker = props => css`
+  background-color: ${tableBorderColor(props)};
   position: absolute;
   height: ${lineMarkerSize}px;
   width: ${lineMarkerSize}px;
   border-radius: 50%;
   pointer-events: none;
 `;
-export const InsertMarker = cssString => css`
+
+export const InsertMarker = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
-    ${Marker};
+    ${Marker(props)};
     ${cssString}
   }
 `;
@@ -52,10 +53,10 @@ const Button = cssString => css`
   ${cssString}
 `;
 
-export const HeaderButton = cssString => css`
+export const HeaderButton = (props, cssString) => css`
   .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableToolbarColor};
-    border: 1px solid ${tableBorderColor};
+    background: ${tableToolbarColor(props)};
+    border: 1px solid ${tableBorderColor(props)};
     display: block;
     box-sizing: border-box;
     padding: 0;
@@ -151,14 +152,14 @@ export const insertRowButtonWrapper = css`
     left: ${tableInsertColumnButtonSize - 1}px;
   `)}
 `;
-export const columnControlsLineMarker = css`
+export const columnControlsLineMarker = props => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child td,
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child th {
     position: relative;
 
     &::before {
       content: ' ';
-      ${Marker};
+      ${Marker(props)};
       top: -${tableToolbarSize + lineMarkerOffsetFromColumnControls}px;
       right: -${lineMarkerSize / 2}px;
     }
@@ -185,57 +186,57 @@ export const DeleteButton = css`
     cursor: pointer;
   }
 `;
-export const OverflowShadow = css`
-.${ClassName.TABLE_RIGHT_SHADOW},
-.${ClassName.TABLE_LEFT_SHADOW}{
-  display: block;
-  height: calc(100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px);
-  position: absolute;
-  pointer-events: none;
-  top: ${tableMarginTop + tableToolbarSize - 1}px;
-  z-index: ${akEditorShadowZIndex};
-  width: 8px;
-}
-.${ClassName.TABLE_LEFT_SHADOW} {
-  background: linear-gradient(
-    to left,
-    rgba(99, 114, 130, 0) 0,
-    ${N40A} 100%
-  );
-  left: 0px;
-}
-.${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
-  left: ${akEditorTableNumberColumnWidth - 1}px;
-}
-.${ClassName.TABLE_RIGHT_SHADOW} {
-  background: linear-gradient(
-    to right,
-    rgba(99, 114, 130, 0) 0,
-    ${N40A} 100%
-  );
-  left: calc(100% + 2px);
-}
-.${ClassName.WITH_CONTROLS} {
+export const OverflowShadow = props => css`
   .${ClassName.TABLE_RIGHT_SHADOW},
   .${ClassName.TABLE_LEFT_SHADOW}{
-    height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-    top: ${tableMarginTop - 1}px;
+    display: block;
+    height: calc(100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px);
+    position: absolute;
+    pointer-events: none;
+    top: ${tableMarginTop + tableToolbarSize - 1}px;
+    z-index: ${akEditorShadowZIndex};
+    width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    border-left: 1px solid ${tableBorderColor};
+    background: linear-gradient(
+      to left,
+      rgba(99, 114, 130, 0) 0,
+      ${N40A} 100%
+    );
+    left: 0px;
   }
-}
-.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-  .${ClassName.TABLE_RIGHT_SHADOW},
-  .${ClassName.TABLE_LEFT_SHADOW} {
-    top: ${tableControlsSpacing}px;
+  .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
+    left: ${akEditorTableNumberColumnWidth - 1}px;
+  }
+  .${ClassName.TABLE_RIGHT_SHADOW} {
+    background: linear-gradient(
+      to right,
+      rgba(99, 114, 130, 0) 0,
+      ${N40A} 100%
+    );
+    left: calc(100% + 2px);
+  }
+  .${ClassName.WITH_CONTROLS} {
+    .${ClassName.TABLE_RIGHT_SHADOW},
+    .${ClassName.TABLE_LEFT_SHADOW}{
+      height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
+      top: ${tableMarginTop - 1}px;
+    }
+    .${ClassName.TABLE_LEFT_SHADOW} {
+      border-left: 1px solid ${tableBorderColor(props)};
+    }
+  }
+  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
+    .${ClassName.TABLE_RIGHT_SHADOW},
+    .${ClassName.TABLE_LEFT_SHADOW} {
+      top: ${tableControlsSpacing}px;
+    }
   }
-}
 `;
 
-const columnHeaderButton = cssString => css`
-  background: ${tableToolbarColor};
-  border: 1px solid ${tableBorderColor};
+const columnHeaderButton = (props, cssString) => css`
+  background: ${tableToolbarColor(props)};
+  border: 1px solid ${tableBorderColor(props)};
   display: block;
   box-sizing: border-box;
   padding: 0;
@@ -253,7 +254,7 @@ const columnHeaderButtonSelected = css`
   border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
 `;
-export const columnControlsDecoration = css`
+export const columnControlsDecoration = props => css`
   .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
     display: none;
     cursor: pointer;
@@ -266,8 +267,8 @@ export const columnControlsDecoration = css`
     &::after {
       content: ' ';
 
-      ${columnHeaderButton(`
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
+      ${columnHeaderButton(props, `
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
         border-bottom: none;
         height: ${tableToolbarSize}px;
         width: 100%;

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

@@ -1,11 +1,11 @@
 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 const isIsolating = node => {
   return !!node.type.spec.isolating;
 };
-export const containsHeaderColumn = (state, table) => {
+export const containsHeaderColumn = table => {
   const map = TableMap.get(table); // Get cell positions for first column.
 
   const cellPositions = map.cellsInRect({
@@ -19,7 +19,7 @@ export const containsHeaderColumn = (state, table) => {
     try {
       const 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) {
@@ -29,22 +29,22 @@ export const containsHeaderColumn = (state, table) => {
 
   return true;
 };
-export const containsHeaderRow = (state, table) => {
+export const containsHeaderRow = table => {
   const map = TableMap.get(table);
 
   for (let i = 0; i < map.width; i++) {
     const 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 const checkIfHeaderColumnEnabled = state => filterNearSelection(state, findTable, containsHeaderColumn, false);
-export const checkIfHeaderRowEnabled = state => filterNearSelection(state, findTable, containsHeaderRow, false);
-export const checkIfNumberColumnEnabled = state => filterNearSelection(state, findTable, (_, table) => !!table.attrs.isNumberColumnEnabled, false);
+export const checkIfHeaderColumnEnabled = selection => filterNearSelection(selection, findTable, containsHeaderColumn, false);
+export const checkIfHeaderRowEnabled = selection => filterNearSelection(selection, findTable, containsHeaderRow, false);
+export const checkIfNumberColumnEnabled = selection => filterNearSelection(selection, findTable, table => !!table.attrs.isNumberColumnEnabled, false);
 export const isLayoutSupported = state => {
   const {
     permittedLayouts
@@ -78,14 +78,14 @@ export const tablesHaveDifferentNoOfColumns = (currentTable, previousTable) => {
   return prevMap.width !== currentMap.width;
 };
 
-function filterNearSelection(state, findNode, predicate, defaultValue) {
-  const found = findNode(state.selection);
+function filterNearSelection(selection, findNode, predicate, defaultValue) {
+  const found = findNode(selection);
 
   if (!found) {
     return defaultValue;
   }
 
-  return predicate(state, found.node, found.pos);
+  return predicate(found.node, found.pos);
 }
 
 function getTableWidths(node) {