@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -9,6 +9,8 @@ exports.createPlugin = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -33,7 +35,7 @@ var getPluginState = function getPluginState(state) {
 
 var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
   return transaction.steps.some(function (step) {
-    return (0, _step.stepAdds)(step, nodeType);
+    return (0, _step.stepAddsOneOf)(step, new Set([nodeType]));
   });
 };
 /**
@@ -42,7 +44,7 @@ var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
 
 
 var createPlugin = function createPlugin(dispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -9,7 +9,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -68,7 +68,7 @@ var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos
   }
 
   var resizeState = (0, _utils3.getResizeState)({
-    minWidth: _editorCommon.tableCellMinWidth,
+    minWidth: _styles.tableCellMinWidth,
     maxSize: maxSize,
     table: originalTable,
     tableRef: dom,

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

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _types = require("../../types");
 
@@ -30,7 +30,7 @@ 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 _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
     state: (0, _pluginFactory.createPluginState)(dispatch, {
       lastColumnResizable: lastColumnResizable,

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/column-state.js

@@ -9,7 +9,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _contentWidth2 = require("./content-width");
 
@@ -19,10 +19,10 @@ var _unitToNumber = require("./unit-to-number");
 var getColumnStateFromDOM = function getColumnStateFromDOM(cells, index, minWidth) {
   var width = calculateColumnWidth(cells, calculateColumnWidthCallback);
   var minColumnWidth = width < minWidth ? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
-  _editorCommon.tableNewColumnMinWidth : calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
+  _styles.tableNewColumnMinWidth : calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
   return {
     index: index,
-    width: width < minWidth ? _editorCommon.tableNewColumnMinWidth : width,
+    width: width < minWidth ? _styles.tableNewColumnMinWidth : width,
     minWidth: minColumnWidth
   };
 };

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/dom.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateStickyMargins = exports.updateControls = exports.syncStickyRowToTable = exports.isClickNear = exports.getResizeCellPos = exports.applyTableWidthToStickyRow = exports.applyColWidthsToStickyRow = void 0;
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _dom = require("../../../../../utils/dom");
 
@@ -13,7 +15,7 @@ var _updateOverflowShadows = require("../../../nodeviews/update-overflow-shadows
 
 var _types = require("../../../types");
 
-var _utils = require("../../../utils");
+var _utils2 = require("../../../utils");
 
 var _columnControls = require("../../../utils/column-controls");
 
@@ -42,7 +44,7 @@ var updateControls = function updateControls(state) {
   var rowControls = wrapper.parentElement.querySelectorAll(".".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP));
   var numberedRows = wrapper.parentElement.querySelectorAll(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON);
   syncStickyRowToTable(tableRef);
-  var rowHeights = (0, _utils.getRowHeights)(tableRef); // update rows controls height on resize
+  var rowHeights = (0, _utils2.getRowHeights)(tableRef); // update rows controls height on resize
 
   for (var i = 0, count = rowControls.length; i < count; i++) {
     var height = rowHeights[i];
@@ -104,7 +106,7 @@ var updateStickyMargins = function updateStickyMargins(table) {
   // firefox handles margin and padding differently
   // when applied with tables
 
-  table.style.marginTop = "".concat(_editorCommon.browser.gecko ? firstRowHeight + _editorCommon.tableCellPadding - _editorCommon.tableCellBorderWidth : _editorCommon.tableMarginTop + firstRowHeight, "px");
+  table.style.marginTop = "".concat(_utils.browser.gecko ? firstRowHeight + _styles.tableCellPadding - _styles.tableCellBorderWidth : _styles.tableMarginTop + firstRowHeight, "px");
 };
 
 exports.updateStickyMargins = updateStickyMargins;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -11,7 +11,9 @@ exports.getTableMaxWidth = void 0;
 exports.pointsAtCell = pointsAtCell;
 exports.tableLayoutToSize = void 0;
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -39,7 +41,7 @@ function getLayoutSize(tableLayout) {
     return containerWidth ? Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   }
 
-  var calculatedTableWidth = (0, _editorCommon.calcTableWidth)(tableLayout, containerWidth, true);
+  var calculatedTableWidth = (0, _styles.calcTableWidth)(tableLayout, containerWidth, true);
 
   if (calculatedTableWidth.endsWith('px')) {
     return parseInt(calculatedTableWidth, 10);
@@ -53,7 +55,7 @@ function getLayoutSize(tableLayout) {
 }
 
 function getDefaultLayoutMaxWidth(containerWidth) {
-  return (0, _editorCommon.mapBreakpointToLayoutMaxWidth)((0, _editorCommon.getBreakpoint)(containerWidth));
+  return (0, _ui.mapBreakpointToLayoutMaxWidth)((0, _ui.getBreakpoint)(containerWidth));
 } // Does the current position point at a cell.
 
 

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -9,7 +9,9 @@ exports.updateColgroup = exports.normaliseTableLayout = exports.getTotalWidth =
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _colgroup = require("./colgroup");
 
@@ -19,7 +21,7 @@ var _dom = require("./dom");
 
 var _misc = require("./misc");
 
-var _utils = require("../../../utils");
+var _utils2 = require("../../../utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -34,10 +36,10 @@ var getResizeState = function getResizeState(_ref) {
       domAtPos = _ref.domAtPos;
 
   if ((0, _colgroup.hasTableBeenResized)(table)) {
-    var _cols = (0, _editorCommon.calcTableColumnWidths)(table).map(function (width, index) {
+    var _cols = (0, _utils.calcTableColumnWidths)(table).map(function (width, index) {
       return {
-        width: width === 0 ? _editorCommon.tableNewColumnMinWidth : width,
-        minWidth: width === 0 ? _editorCommon.tableNewColumnMinWidth : minWidth,
+        width: width === 0 ? _styles.tableNewColumnMinWidth : width,
+        minWidth: width === 0 ? _styles.tableNewColumnMinWidth : minWidth,
         index: index
       };
     });
@@ -117,7 +119,7 @@ var adjustColumnsWidths = function adjustColumnsWidths(resizeState, maxSize) {
   var totalWidth = getTotalWidth(resizeState);
   var diff = maxSize - totalWidth;
 
-  if (diff > 0 || diff < 0 && Math.abs(diff) < _editorCommon.tableCellMinWidth) {
+  if (diff > 0 || diff < 0 && Math.abs(diff) < _styles.tableCellMinWidth) {
     var updated = false;
     return _objectSpread(_objectSpread({}, resizeState), {}, {
       cols: resizeState.cols.map(function (col) {
@@ -306,7 +308,7 @@ var normaliseTableLayout = function normaliseTableLayout(input) {
 exports.normaliseTableLayout = normaliseTableLayout;
 
 var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, dynamicTextSizing) {
-  var _getSelectedTableInfo = (0, _utils.getSelectedTableInfo)(state.selection),
+  var _getSelectedTableInfo = (0, _utils2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo.totalRowCount,
       totalColumnCount = _getSelectedTableInfo.totalColumnCount,
       table = _getSelectedTableInfo.table;
@@ -331,7 +333,7 @@ var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelecte
     dynamicTextSizing: dynamicTextSizing
   });
   var resizeState = getResizeState({
-    minWidth: _editorCommon.tableCellMinWidth,
+    minWidth: _styles.tableCellMinWidth,
     maxSize: maxSize,
     table: table.node,
     tableRef: tableRef,

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -11,7 +11,7 @@ exports.scaleWithParent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -73,7 +73,7 @@ var scale = function scale(tableRef, options, domAtPos) {
   }
 
   var resizeState = (0, _resizeState.getResizeState)({
-    minWidth: _editorCommon.tableCellMinWidth,
+    minWidth: _styles.tableCellMinWidth,
     maxSize: maxSize,
     table: node,
     tableRef: tableRef,
@@ -87,7 +87,7 @@ exports.scale = scale;
 
 var scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
   var resizeState = (0, _resizeState.getResizeState)({
-    minWidth: _editorCommon.tableCellMinWidth,
+    minWidth: _styles.tableCellMinWidth,
     maxSize: parentWidth,
     table: table,
     tableRef: tableRef,

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

@@ -49,6 +49,7 @@ 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) { (0, _defineProperty2.default)(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; }
 
+// TODO: ED-14403 investigate why these translations don't work
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/cjs/plugins/table/transforms/column-width.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _utils = require("../pm-plugins/table-resizing/utils");
 
@@ -172,14 +172,14 @@ var rescaleColumns = function rescaleColumns(table, view) {
       dynamicTextSizing: true
     });
     var resizeState = (0, _resizeState.getResizeState)({
-      minWidth: _editorCommon.tableCellMinWidth,
+      minWidth: _styles.tableCellMinWidth,
       table: table.node,
       start: table.start,
       tableRef: tableRef,
       domAtPos: domAtPos,
       maxSize: maxSize
     });
-    var previousTableWidth = resizeState.tableWidth - _editorCommon.tableNewColumnMinWidth;
+    var previousTableWidth = resizeState.tableWidth - _styles.tableNewColumnMinWidth;
     var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
     // we resize the cells to avoid the overflow occuring
 

package/dist/cjs/plugins/table/transforms/fix-tables.js

@@ -9,7 +9,7 @@ exports.removeExtraneousColumnWidths = exports.fixTables = exports.fixAutoSizedT
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -205,7 +205,7 @@ function parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef) {
       var colWidth = (0, _utils.calculateColumnWidth)(cells, function (_, col) {
         return (0, _utils.contentWidth)(col, tableRef).width;
       });
-      cols[colIdx] = Math.max(colWidth, _editorCommon.tableCellMinWidth);
+      cols[colIdx] = Math.max(colWidth, _styles.tableCellMinWidth);
     }
   }
 

package/dist/cjs/plugins/table/types.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -35,7 +35,7 @@ exports.TableDecorations = TableDecorations;
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
 })(TableDecorations || (exports.TableDecorations = TableDecorations = {}));
 
-var TableCssClassName = _objectSpread(_objectSpread({}, _editorCommon.TableSharedCssClassName), {}, {
+var TableCssClassName = _objectSpread(_objectSpread({}, _styles.TableSharedCssClassName), {}, {
   COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-column__selected"),

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

@@ -32,7 +32,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -166,7 +166,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
         }, button);
       }
 
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         alignX: "right",
         alignY: "start",
         target: targetCellRef,

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

@@ -17,7 +17,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -83,7 +83,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,

package/dist/cjs/plugins/table/ui/FloatingDeleteButton/index.js

@@ -34,7 +34,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
 
 var _reactDom = require("react-dom");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -272,7 +272,7 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
         }
       }
 
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
         target: tableRef,
         mountTo: mountTo,
         boundariesElement: tableContainerWrapper || boundariesElement,

package/dist/cjs/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -38,7 +38,7 @@ var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeader
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   var LINE_OFFSET = 3;
-  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _editorCommon.tableMarginTop * 4 - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
+  var ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - _styles.tableMarginTop * 4 - LINE_OFFSET : _consts.tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
 

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

@@ -35,7 +35,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _dom = require("../../../../utils/dom");
 
@@ -158,7 +158,7 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableWrapper = (0, _dom.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
       var hasNumberedColumns = (0, _utils2.checkIfNumberColumnEnabled)(editorView.state);
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,
         boundariesElement: tableContainerWrapper || boundariesElement,

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

@@ -27,7 +27,7 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
 
@@ -41,6 +41,8 @@ var _commandsWithAnalytics = require("../../commands-with-analytics");
 
 var _types = require("../../types");
 
+var _prosemirrorUtils = require("prosemirror-utils");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -51,13 +53,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _messages.default.layoutWide;
@@ -95,24 +97,76 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2.default)(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.default.createElement("div", {
+        className: (0, _classnames2.default)(_types.TableCssClassName.LAYOUT_BUTTON, (0, _defineProperty2.default)({}, _types.TableCssClassName.IS_RESIZING, isResizing))
+      }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+        title: title,
+        onClick: this.handleClick,
+        iconBefore: layout === 'full-width' ? /*#__PURE__*/_react.default.createElement(_collapse.default, {
+          label: title
+        }) : /*#__PURE__*/_react.default.createElement(_expand.default, {
+          label: title
+        })
+      }));
+    }
+  }, {
+    key: "getStickyTargetRef",
+    value: function getStickyTargetRef(pos) {
+      var editorView = this.props.editorView;
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var node = (0, _prosemirrorUtils.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.default.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));
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+      var title = this.getTitle();
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         ariaLabel: title,
         target: targetRef,
         alignY: "start",
@@ -123,27 +177,31 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         forcePlacement: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames2.default)(_types.TableCssClassName.LAYOUT_BUTTON, (0, _defineProperty2.default)({}, _types.TableCssClassName.IS_RESIZING, isResizing))
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
-        title: title,
-        onClick: this.handleClick,
-        iconBefore: layout === 'full-width' ? /*#__PURE__*/_react.default.createElement(_collapse.default, {
-          label: title
-        }) : /*#__PURE__*/_react.default.createElement(_expand.default, {
-          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;
     }
   }]);
   return LayoutButton;

package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js

@@ -25,11 +25,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _commands = require("../../commands");
 
-var _utils = require("../../utils");
+var _utils2 = require("../../utils");
 
 var _CornerControls = _interopRequireDefault(require("./CornerControls"));
 
@@ -73,7 +73,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
       var state = editorView.state,
           dispatch = editorView.dispatch; // fix for issue ED-4665
 
-      if (_editorCommon.browser.ie_version === 11) {
+      if (_utils.browser.ie_version === 11) {
         editorView.dom.blur();
       }
 
@@ -158,7 +158,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
 
       var tableHeight = tableRenderOptimization ? (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight : this.props.tableHeight;
       var nextTableHeight = tableRenderOptimization ? nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight : nextProps.tableHeight;
-      return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || (0, _utils.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
+      return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
     }
   }, {
     key: "componentWillUnmount",