@atlaskit/editor-core 154.0.0 → 155.0.0

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

@@ -32,9 +32,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(this, "focused", false);
 
-    _defineProperty(this, "scrollElementTop", 0);
-
-    _defineProperty(this, "isSticky", false);
+    _defineProperty(this, "topPosEditorElement", 0);
 
     _defineProperty(this, "stickyHeadersOptimization", false);
 
@@ -81,7 +79,14 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(this, "paint", function (tree) {
       var table = tree.table,
-          wrapper = tree.wrapper;
+          wrapper = tree.wrapper; // If the previous refresh is less than 10ms then don't do anything.
+      // The jumpiness happen under that time and this is to avoid it.
+
+      var timelapse = Math.abs(performance.now() - _this.lastTimePainted);
+
+      if (timelapse < 10) {
+        return;
+      }
 
       if (_this.shouldHeaderStick(tree)) {
         _this.makeHeaderRowSticky(tree);
@@ -91,6 +96,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
 
       _this.dom.scrollLeft = wrapper.scrollLeft;
+      _this.lastTimePainted = performance.now();
     });
 
     _defineProperty(this, "onTablePluginState", function (state) {
@@ -100,6 +106,15 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
       if (!tree) {
         return;
+      } // make it non-sticky initially to avoid making it look separated
+
+
+      if (!_this.isTableInit) {
+        if (_this.tree) {
+          _this.makeRowHeaderNotSticky(_this.tree.table);
+
+          _this.isTableInit = true;
+        }
       } // when header rows are toggled off - mark sentinels as unobserved
 
 
@@ -163,25 +178,42 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(this, "shouldHeaderStick", function (tree) {
       var wrapper = tree.wrapper;
-      var scrollTop = _this.scrollElementTop;
+      var tableWrapperRect = wrapper.getBoundingClientRect();
 
-      var refTop = _this.getWrapperRefTop(wrapper);
+      var editorAreaRect = _this.editorScrollableElement.getBoundingClientRect();
 
-      var wrapperRect = wrapper.getBoundingClientRect(); // we don't have parent information in via the node,
-      // so we need to look this up on scroll
+      var stickyHeaderRect = _this.contentDOM.getBoundingClientRect();
 
       var firstHeaderRow = !_this.dom.previousElementSibling;
       var subsequentRows = !!_this.dom.nextElementSibling;
-      var bottomVisible = scrollTop - wrapperRect.bottom < _this.dom.clientHeight;
-      return refTop <= scrollTop && bottomVisible && firstHeaderRow && subsequentRows;
+      var isHeaderValid = firstHeaderRow && subsequentRows; // if the table wrapper is less than the editor top pos then make it sticky
+      // Make header sticky if table wrapper top is outside viewport
+      //  but bottom is still in the viewport.
+
+      if (tableWrapperRect.top < editorAreaRect.top && tableWrapperRect.bottom > editorAreaRect.top && isHeaderValid) {
+        return true;
+      } // if the sticky header is below the editor area make it non-sticky
+
+
+      if (stickyHeaderRect.top > editorAreaRect.top) {
+        return false;
+      } // otherwise make it non-sticky
+
+
+      return false;
     });
 
     _defineProperty(this, "makeHeaderRowSticky", function (tree) {
+      // If header row height is more than 50% of viewport height don't do this
+      if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
+        return;
+      }
+
       var table = tree.table;
 
       var currentTableTop = _this.getCurrentTableTop(tree);
 
-      var domTop = currentTableTop > 0 ? _this.scrollElementTop : _this.scrollElementTop + currentTableTop;
+      var domTop = currentTableTop > 0 ? _this.topPosEditorElement : _this.topPosEditorElement + currentTableTop;
 
       if (!_this.isSticky) {
         syncStickyRowToTable(table);
@@ -198,24 +230,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       _this.emitOn(domTop, _this.colControlsOffset);
     });
 
-    _defineProperty(this, "getWrapperoffset", function () {
-      var inverse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var focusValue = inverse ? !_this.focused : _this.focused;
-      return focusValue ? 0 : tableControlsSpacing;
-    });
-
-    _defineProperty(this, "getWrapperRefTop", function (wrapper) {
-      return Math.round(getTop(wrapper)) + _this.getWrapperoffset();
-    });
-
-    _defineProperty(this, "getScrolledTableTop", function (wrapper) {
-      return _this.getWrapperRefTop(wrapper) - _this.scrollElementTop;
-    });
-
-    _defineProperty(this, "getCurrentTableTop", function (tree) {
-      return _this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
-    });
-
     _defineProperty(this, "makeRowHeaderNotSticky", function (table) {
       var isEditorDestroyed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
@@ -235,6 +249,24 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       _this.emitOff(isEditorDestroyed);
     });
 
+    _defineProperty(this, "getWrapperoffset", function () {
+      var inverse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var focusValue = inverse ? !_this.focused : _this.focused;
+      return focusValue ? 0 : tableControlsSpacing;
+    });
+
+    _defineProperty(this, "getWrapperRefTop", function (wrapper) {
+      return Math.round(getTop(wrapper)) + _this.getWrapperoffset();
+    });
+
+    _defineProperty(this, "getScrolledTableTop", function (wrapper) {
+      return _this.getWrapperRefTop(wrapper) - _this.topPosEditorElement;
+    });
+
+    _defineProperty(this, "getCurrentTableTop", function (tree) {
+      return _this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
+    });
+
     _defineProperty(this, "padding", 0);
 
     _defineProperty(this, "top", 0);
@@ -281,7 +313,10 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     var featureFlags = getFeatureFlags(view.state) || {};
     var stickyHeadersOptimization = featureFlags.stickyHeadersOptimization;
     this.stickyHeadersOptimization = !!stickyHeadersOptimization;
+    this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
+    this.isSticky = false;
+    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -293,22 +328,23 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
   _createClass(TableRowNodeView, [{
     key: "tree",
-    get: function get() {
+    get: // this is the sticky header table row
+    function get() {
       return getTree(this.dom);
     }
   }, {
     key: "subscribe",
     value: function subscribe() {
-      this.scrollElement = findOverflowScrollParent(this.view.dom) || window;
+      this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
 
-      if (this.scrollElement) {
+      if (this.editorScrollableElement) {
         if (this.stickyHeadersOptimization) {
           this.initObservers();
         } else {
-          this.scrollElement.addEventListener('scroll', this.onScroll);
+          this.editorScrollableElement.addEventListener('scroll', this.onScroll);
         }
 
-        this.scrollElementTop = getTop(this.scrollElement);
+        this.topPosEditorElement = getTop(this.editorScrollableElement);
       }
 
       this.eventDispatcher.on(widthPluginKey.key, this.onWidthPluginState);
@@ -330,8 +366,8 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         this.resizeObserver.disconnect();
       }
 
-      if (this.scrollElement && !this.stickyHeadersOptimization) {
-        this.scrollElement.removeEventListener('scroll', this.onScroll);
+      if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
+        this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
       }
 
       this.eventDispatcher.off(widthPluginKey.key, this.onWidthPluginState);
@@ -448,7 +484,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
           }
         });
       }, {
-        root: this.scrollElement
+        root: this.editorScrollableElement
       });
     }
     /* paint/update loop */

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TableRowNodeView } from './nodeviews/tableRow';
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-state';
@@ -6,7 +6,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
   var initialState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
     return [];
   };
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, initialState),
     key: pluginKey,
     props: {

package/dist/esm/plugins/table/pm-plugins/table-local-id.js

@@ -16,7 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
 import { uuid } from '@atlaskit/adf-schema';
 import { stepAddsOneOf } from '../../../utils/step';
@@ -41,7 +42,7 @@ var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
 
 
 var createPlugin = function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import classnames from 'classnames';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TableCssClassName as ClassName } from '../../types';
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
@@ -12,7 +12,7 @@ export function createPlugin(dispatch, _ref) {
       lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza,
       _ref$dynamicTextSizin = _ref.dynamicTextSizing,
       dynamicTextSizing = _ref$dynamicTextSizin === void 0 ? false : _ref$dynamicTextSizin;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
       lastColumnResizable: lastColumnResizable,

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

@@ -22,7 +22,8 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '../../utils/dom';
+import { closestElement } from '../../utils/dom'; // TODO: ED-14403 investigate why these translations don't work
+
 export var messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

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

@@ -24,16 +24,17 @@ import commonMessages from '../../../../messages';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
+import { findDomRefAtPos } from 'prosemirror-utils';
 
 var addPopupOffset = function addPopupOffset(pos) {
   return _objectSpread(_objectSpread({}, pos), {}, {
-    // add 22 pixels to align y position with
+    // add 12 pixels to align y position with
     //the columns controls
-    top: pos.top ? pos.top + 22 : undefined
+    top: pos.top ? pos.top + 12 : undefined
   });
 };
 
-var getTitle = function getTitle(layout) {
+var getMessage = function getMessage(layout) {
   switch (layout) {
     case 'default':
       return commonMessages.layoutWide;
@@ -73,23 +74,75 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(LayoutButton, [{
-    key: "render",
-    value: function render() {
+    key: "getTitle",
+    value: function getTitle() {
       var _this$props = this.props,
           formatMessage = _this$props.intl.formatMessage,
-          mountPoint = _this$props.mountPoint,
-          boundariesElement = _this$props.boundariesElement,
-          scrollableElement = _this$props.scrollableElement,
-          targetRef = _this$props.targetRef,
-          isResizing = _this$props.isResizing,
           _this$props$layout = _this$props.layout,
           layout = _this$props$layout === void 0 ? 'default' : _this$props$layout;
+      return formatMessage(getMessage(layout));
+    }
+  }, {
+    key: "toolbarButton",
+    value: function toolbarButton() {
+      var _this$props2 = this.props,
+          isResizing = _this$props2.isResizing,
+          _this$props2$layout = _this$props2.layout,
+          layout = _this$props2$layout === void 0 ? 'default' : _this$props2$layout;
+      var title = this.getTitle();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(ClassName.LAYOUT_BUTTON, _defineProperty({}, ClassName.IS_RESIZING, isResizing))
+      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+        title: title,
+        onClick: this.handleClick,
+        iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+          label: title
+        }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+          label: title
+        })
+      }));
+    }
+  }, {
+    key: "getStickyTargetRef",
+    value: function getStickyTargetRef(pos) {
+      var editorView = this.props.editorView;
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var node = findDomRefAtPos(pos, domAtPos);
+      return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
+    }
+  }, {
+    key: "renderSticky",
+    value: function renderSticky(button, targetRef) {
+      var title = this.getTitle();
+
+      if (!targetRef || !(targetRef instanceof HTMLElement)) {
+        return null;
+      }
+
+      var pos = targetRef.getBoundingClientRect();
+      return /*#__PURE__*/React.createElement("div", {
+        "aria-label": title,
+        style: {
+          position: 'fixed',
+          top: pos.top + 22,
+          left: pos.right + 10
+        }
+      }, button);
+    }
+  }, {
+    key: "renderPopup",
+    value: function renderPopup(button) {
+      var _this$props3 = this.props,
+          mountPoint = _this$props3.mountPoint,
+          boundariesElement = _this$props3.boundariesElement,
+          scrollableElement = _this$props3.scrollableElement,
+          targetRef = _this$props3.targetRef;
 
       if (!targetRef) {
         return null;
       }
 
-      var title = formatMessage(getTitle(layout));
+      var title = this.getTitle();
       return /*#__PURE__*/React.createElement(Popup, {
         ariaLabel: title,
         target: targetRef,
@@ -101,27 +154,31 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         forcePlacement: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames(ClassName.LAYOUT_BUTTON, _defineProperty({}, ClassName.IS_RESIZING, isResizing))
-      }, /*#__PURE__*/React.createElement(ToolbarButton, {
-        title: title,
-        onClick: this.handleClick,
-        iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
-          label: title
-        }) : /*#__PURE__*/React.createElement(ExpandIcon, {
-          label: title
-        })
-      })));
+      }, button);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var stickyHeader = this.props.stickyHeader;
+      var button = this.toolbarButton();
+      var stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
+
+      if (stickyTargetRef) {
+        return this.renderSticky(button, stickyTargetRef);
+      } else {
+        return this.renderPopup(button);
+      }
     }
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
-      var _this$props2 = this.props,
-          targetRef = _this$props2.targetRef,
-          layout = _this$props2.layout,
-          isResizing = _this$props2.isResizing,
-          tableWidth = _this$props2.tableWidth;
-      return targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
+      var _this$props4 = this.props,
+          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;
     }
   }]);
 

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

@@ -11,12 +11,13 @@ 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.css';
+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 = 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    .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    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\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    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\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    :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      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        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        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: ", "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-top: ", "px;\n      margin-top: -", "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, columnControlsLineMarker, 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, 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, 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, function (props) {
+export var tableStyles = 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    .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    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\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    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\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    :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      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        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, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > 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, columnControlsLineMarker, 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, 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, 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, function (props) {
   var _props$featureFlags;
 
   return (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '';
-}, OverflowShadow, 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, ClassName.CORNER_CONTROLS, tableToolbarSize + 1, tableToolbarSize + 1, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker("\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, tableBorderRadiusSize, tableToolbarColor, 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("\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("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\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, relativeFontSizeToBase16(fontSize()), tableToolbarColor, tableTextColor, tableBorderColor, tableBorderColor, 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.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 - 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
+}, OverflowShadow, 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, ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker("\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, tableBorderRadiusSize, tableToolbarColor, 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("\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("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\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, relativeFontSizeToBase16(fontSize()), tableToolbarColor, tableTextColor, tableBorderColor, tableBorderColor, 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 tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/plugins/tasks-and-decisions/pm-plugins/main.js

@@ -6,7 +6,8 @@ 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 { NodeSelection, Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
 import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
@@ -34,7 +35,7 @@ var setContextIdentifierProvider = function setContextIdentifierProvider(provide
 
 export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch) {
   var useLongPressSelection = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  return new Plugin({
+  return new SafePlugin({
     props: {
       nodeViews: {
         taskItem: taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory),

package/dist/esm/plugins/text-color/index.js

@@ -38,8 +38,6 @@ var textColorPlugin = function textColorPlugin(textColorConfig) {
           isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
           dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
           disabled = _ref2.disabled;
-      var config = pluginConfig(textColorConfig);
-      var showMoreColorsToggle = config === null || config === void 0 ? void 0 : config.allowMoreTextColors;
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           textColor: textColorPluginKey
@@ -53,7 +51,6 @@ var textColorPlugin = function textColorPlugin(textColorConfig) {
             popupsMountPoint: popupsMountPoint,
             popupsBoundariesElement: popupsBoundariesElement,
             popupsScrollableElement: popupsScrollableElement,
-            showMoreColorsToggle: showMoreColorsToggle,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             disabled: disabled
           });

package/dist/esm/plugins/text-color/pm-plugins/main.js

@@ -5,44 +5,26 @@ 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 { Plugin, PluginKey } from 'prosemirror-state';
-import { textColorPalette, textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';
 export function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
-  var showMoreColorsToggle = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowMoreTextColors) || false;
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: DEFAULT_BORDER_COLOR
-  }].concat(_toConsumableArray(showMoreColorsToggle ? textColorPaletteExtended : textColorPalette));
+  }].concat(_toConsumableArray(textColorPaletteExtended));
   var state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),
     palette: palette,
     defaultColor: defaultColor.color
-  }; // break up the palette for extended colors
-
-  if (showMoreColorsToggle) {
-    // defined palette order: [normal, dark, light] (but normal[0] is default/dark)
-    // expanded palette: [dark, normal, light] with normal[0] on the dark row
-    var normalRow = palette.slice(0, 7);
-    var darkRow = palette.slice(7, 14);
-    var lightRow = palette.slice(14);
-    var paletteExpanded = darkRow.concat(normalRow).concat(lightRow); // swap default back and slot 7
-
-    var defaultSwatch = paletteExpanded[0];
-    paletteExpanded[0] = paletteExpanded[7];
-    paletteExpanded[7] = defaultSwatch;
-    return _objectSpread(_objectSpread({}, state), {}, {
-      palette: normalRow,
-      paletteExpanded: paletteExpanded
-    });
-  }
-
+  };
   return state;
 }
 export var ACTIONS;
@@ -55,7 +37,7 @@ export var ACTIONS;
 
 export var pluginKey = new PluginKey('textColorPlugin');
 export function createPlugin(dispatch, pluginConfig) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init(_config, editorState) {