@atlaskit/editor-core 159.0.1 → 162.0.0

package/dist/es2019/plugins/table/commands/misc.js

@@ -13,7 +13,7 @@ import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { fixAutoSizedTable } from '../transforms';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
-import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, isIsolating } from '../utils/nodes';
+import { checkIfNumberColumnEnabled, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations'; // #endregion
 // #endregion
 // #region Commands
@@ -40,8 +40,9 @@ export const setTableRef = ref => createCommand(state => {
       tablePos,
       tableWrapperTarget,
       layout: layout || 'default',
-      isHeaderRowEnabled: checkIfHeaderRowEnabled(state),
-      isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state),
+      isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
+      isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
+      isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
       decorationSet,
       resizeHandleColumnIndex: undefined
     }
@@ -110,7 +111,7 @@ export const triggerUnlessTableHeader = command => (state, dispatch, view) => {
   if (selection instanceof CellSelection) {
     const rect = getSelectionRect(selection);
 
-    if (!checkIfHeaderRowEnabled(state) || rect && rect.top > 0) {
+    if (!checkIfHeaderRowEnabled(selection) || rect && rect.top > 0) {
       return command(state, dispatch, view);
     }
   }
@@ -382,13 +383,6 @@ export const addResizeHandleDecorations = columnIndex => createCommand(state =>
     }
   };
 }, tr => tr.setMeta('addToHistory', false));
-export const setTableSize = (tableHeight, tableWidth) => createCommand({
-  type: 'SET_TABLE_SIZE',
-  data: {
-    tableHeight,
-    tableWidth
-  }
-}, tr => tr.setMeta('addToHistory', false));
 export const autoSizeTable = (view, node, table, basePos, opts) => {
   view.dispatch(fixAutoSizedTable(view, node, table, basePos, opts));
   return true;

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -313,7 +313,7 @@ export const toggleNumberColumnWithAnalytics = () => withAnalytics(state => {
     actionSubject: ACTION_SUBJECT.TABLE,
     actionSubjectId: null,
     attributes: {
-      newState: !checkIfNumberColumnEnabled(state),
+      newState: !checkIfNumberColumnEnabled(state.selection),
       totalRowCount,
       totalColumnCount
     },

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

@@ -6,8 +6,9 @@ import { isTableCollapsible } from './utils/collapse';
 import { defaultTableSelection } from './pm-plugins/default-table-selection';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableSortStep } from '@atlaskit/adf-schema/steps';
-
 // #endregion
+import { checkIfNumberColumnEnabled, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled } from './utils/nodes';
+
 const nextTableSorting = (tr, table) => {
   const tableSortStep = tr.steps.find(step => step instanceof TableSortStep);
   return tableSortStep && table && table.pos === tableSortStep.pos ? tableSortStep.next : undefined;
@@ -63,7 +64,10 @@ const updateTableNodePluginState = ({
     ...defaultTableSelection,
     tableNode,
     ordering: nextTableSorting(tr, table),
-    resizeHandleColumnIndex: nextResizeHandleColumnIndex(tr, pluginState.resizeHandleColumnIndex)
+    resizeHandleColumnIndex: nextResizeHandleColumnIndex(tr, pluginState.resizeHandleColumnIndex),
+    isNumberColumnEnabled: checkIfNumberColumnEnabled(tr.selection),
+    isHeaderColumnEnabled: checkIfHeaderColumnEnabled(tr.selection),
+    isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection)
   };
 };
 

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

@@ -15,7 +15,7 @@ import { createPlugin as createDecorationsPlugin } from './pm-plugins/decoration
 import { keymapPlugin } from './pm-plugins/keymap';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin } from './pm-plugins/main';
-import { pluginKey } from './pm-plugins/plugin-factory';
+import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
 import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { getToolbarConfig } from './toolbar';
@@ -25,7 +25,6 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
-import { getFeatureFlags } from '../feature-flags-context';
 import { ErrorBoundary } from '../../ui/ErrorBoundary';
 
 const tablesPlugin = options => ({
@@ -111,6 +110,8 @@ const tablesPlugin = options => ({
     }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
     // causing issues with table selections in Safari
     // 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
 
     if (browser.safari) {
       plugins.push({
@@ -162,15 +163,11 @@ const tablesPlugin = options => ({
           insertRowButtonIndex,
           isHeaderColumnEnabled,
           isHeaderRowEnabled,
-          tableWrapperTarget,
-          tableWidth
+          tableWrapperTarget
         } = tablePluginState;
         const {
           allowControls
         } = pluginConfig;
-        const {
-          tableRenderOptimization
-        } = getFeatureFlags(state) || {};
         const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
         return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
           isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
@@ -220,7 +217,6 @@ const tablesPlugin = options => ({
           targetRef: tableWrapperTarget,
           layout: layout,
           isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
-          tableWidth: tableRenderOptimization ? tableWidth : undefined,
           stickyHeader: stickyHeader
         }));
       }

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

@@ -417,7 +417,7 @@ class TableComponent extends 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()));
       }
     }
 
@@ -490,7 +490,7 @@ class TableComponent extends React.Component {
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
 
     const tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
-    const hasHeaderRow = containsHeaderRow(view.state, node);
+    const hasHeaderRow = containsHeaderRow(node);
     const rowControls = /*#__PURE__*/React.createElement("div", {
       className: ClassName.ROW_CONTROLS_WRAPPER
     }, /*#__PURE__*/React.createElement(TableFloatingControls, {

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { createRef } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -34,6 +34,20 @@ class LayoutButton extends React.Component {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "stickyButtonRef", /*#__PURE__*/createRef());
+
+    _defineProperty(this, "resizeObserver", new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        const resizeButton = this.stickyButtonRef.current;
+        const tableWrapper = this.props.targetRef;
+
+        if (resizeButton && tableWrapper) {
+          const clientRect = tableWrapper.getBoundingClientRect();
+          resizeButton.style.left = `${clientRect.right}px`;
+        }
+      });
+    }));
+
     _defineProperty(this, "handleClick", () => {
       const {
         state,
@@ -83,20 +97,22 @@ class LayoutButton extends React.Component {
     return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
   }
 
-  renderSticky(button, targetRef) {
+  renderSticky(button, targetRef, tableRef) {
     const title = this.getTitle();
 
-    if (!targetRef || !(targetRef instanceof HTMLElement)) {
+    if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
       return null;
     }
 
     const pos = targetRef.getBoundingClientRect();
+    const tablePos = tableRef.getBoundingClientRect();
     return /*#__PURE__*/React.createElement("div", {
+      ref: this.stickyButtonRef,
       "aria-label": title,
       style: {
         position: 'fixed',
         top: pos.top + 22,
-        left: pos.right + 10
+        left: tablePos.right
       }
     }, button);
   }
@@ -135,22 +151,39 @@ class LayoutButton extends React.Component {
     const button = this.toolbarButton();
     const stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
 
-    if (stickyTargetRef) {
-      return this.renderSticky(button, stickyTargetRef);
+    if (stickyTargetRef && this.props.targetRef) {
+      return this.renderSticky(button, stickyTargetRef, this.props.targetRef);
     } else {
       return this.renderPopup(button);
     }
   }
 
+  componentDidMount() {
+    const dom = this.props.editorView.dom;
+    const scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
+
+    if (scrollPanel instanceof HTMLElement) {
+      this.resizeObserver.observe(scrollPanel);
+    }
+  }
+
+  componentWillUnmount() {
+    const dom = this.props.editorView.dom;
+    const scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
+
+    if (scrollPanel instanceof HTMLElement) {
+      this.resizeObserver.unobserve(scrollPanel);
+    }
+  }
+
   shouldComponentUpdate(nextProps) {
     const {
       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};
+  }
 `;