@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -5,17 +5,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverRows, selectRow } from '../../commands';
@@ -23,45 +17,34 @@ import { isSelectionUpdated } from '../../utils';
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { RowControls } from './RowControls';
-
 var TableFloatingControls = /*#__PURE__*/function (_Component) {
   _inherits(TableFloatingControls, _Component);
-
   var _super = _createSuper(TableFloatingControls);
-
   function TableFloatingControls() {
     var _this;
-
     _classCallCheck(this, TableFloatingControls);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "selectRow", function (row, expand) {
       var editorView = _this.props.editorView;
       var state = editorView.state,
-          dispatch = editorView.dispatch; // fix for issue ED-4665
-
+        dispatch = editorView.dispatch;
+      // fix for issue ED-4665
       if (browser.ie_version === 11) {
         editorView.dom.blur();
       }
-
       selectRow(row, expand)(state, dispatch);
     });
-
     _defineProperty(_assertThisInitialized(_this), "hoverRows", function (rows, danger) {
       var _this$props$editorVie = _this.props.editorView,
-          state = _this$props$editorVie.state,
-          dispatch = _this$props$editorVie.dispatch;
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
       hoverRows(rows, danger)(state, dispatch);
     });
-
     return _this;
   }
-
   _createClass(TableFloatingControls, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -72,29 +55,25 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate() {
       // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
       this.tryInitResizeObserver();
-    } // tracking the table height changes to update floating controls
+    }
 
+    // tracking the table height changes to update floating controls
   }, {
     key: "tryInitResizeObserver",
     value: function tryInitResizeObserver() {
       var _window,
-          _this2 = this;
-
+        _this2 = this;
       var tableRef = this.props.tableRef;
-
       var _this$props$getEditor = this.props.getEditorFeatureFlags(),
-          tableRenderOptimization = _this$props$getEditor.tableRenderOptimization;
-
+        tableRenderOptimization = _this$props$getEditor.tableRenderOptimization;
       if (tableRenderOptimization && tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
         this.resizeObserver = new ResizeObserver(function (entries) {
           var _iterator = _createForOfIteratorHelper(entries),
-              _step;
-
+            _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var entry = _step.value;
               var tableHeight = entry.contentRect.height;
-
               _this2.setState({
                 tableHeight: tableHeight
               });
@@ -112,24 +91,21 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
       var _this$state;
-
       var _this$props = this.props,
-          tableRef = _this$props.tableRef,
-          isInDanger = _this$props.isInDanger,
-          isResizing = _this$props.isResizing,
-          isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
-          isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
-          hoveredRows = _this$props.hoveredRows,
-          selection = _this$props.selection,
-          tableActive = _this$props.tableActive,
-          isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
-          ordering = _this$props.ordering,
-          headerRowHeight = _this$props.headerRowHeight,
-          stickyHeader = _this$props.stickyHeader;
-
+        tableRef = _this$props.tableRef,
+        isInDanger = _this$props.isInDanger,
+        isResizing = _this$props.isResizing,
+        isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
+        isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
+        hoveredRows = _this$props.hoveredRows,
+        selection = _this$props.selection,
+        tableActive = _this$props.tableActive,
+        isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
+        ordering = _this$props.ordering,
+        headerRowHeight = _this$props.headerRowHeight,
+        stickyHeader = _this$props.stickyHeader;
       var _this$props$getEditor2 = this.props.getEditorFeatureFlags(),
-          tableRenderOptimization = _this$props$getEditor2.tableRenderOptimization;
-
+        tableRenderOptimization = _this$props$getEditor2.tableRenderOptimization;
       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 || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
@@ -145,22 +121,20 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          editorView = _this$props2.editorView,
-          tableRef = _this$props2.tableRef,
-          isInDanger = _this$props2.isInDanger,
-          isResizing = _this$props2.isResizing,
-          isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
-          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
-          isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-          tableActive = _this$props2.tableActive,
-          hasHeaderRow = _this$props2.hasHeaderRow,
-          hoveredRows = _this$props2.hoveredRows,
-          stickyHeader = _this$props2.stickyHeader;
-
+        editorView = _this$props2.editorView,
+        tableRef = _this$props2.tableRef,
+        isInDanger = _this$props2.isInDanger,
+        isResizing = _this$props2.isResizing,
+        isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
+        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
+        tableActive = _this$props2.tableActive,
+        hasHeaderRow = _this$props2.hasHeaderRow,
+        hoveredRows = _this$props2.hoveredRows,
+        stickyHeader = _this$props2.stickyHeader;
       if (!tableRef) {
         return null;
       }
-
       var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
       return /*#__PURE__*/React.createElement("div", {
         onMouseDown: function onMouseDown(e) {
@@ -198,10 +172,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-
   return TableFloatingControls;
 }(Component);
-
 _defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');
-
 export { TableFloatingControls as default };

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

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { fontSize } from '@atlaskit/theme/constants';
@@ -12,22 +10,23 @@ import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
 var cornerControlHeight = tableToolbarSize + 1;
+
 /*
   compensating for half of the insert column button
   that is aligned to the right edge initially on hover of the top right column control when table overflown,
   its center should be aligned with the edge
 */
-
 var insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
 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}"); // previous styles to add spacing to numbered lists with
-// large item markers (e.g. 101, 102, ...) when nested inside tables
+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}");
 
-var listLargeNumericMarkersOldStyles = "\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+// previous styles to add spacing to numbered lists with
+// large item markers (e.g. 101, 102, ...) when nested inside tables
+var listLargeNumericMarkersOldStyles = "\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n";
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export var tableStyles = function tableStyles(props) {
   var _props$featureFlags, _props$featureFlags2;
-
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !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        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\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-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\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: ", ";\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\n        ", ";\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 ", ";\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: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\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-of-type {\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: ", "px;\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-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\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-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\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        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      td.", ", td.", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          border: 1px solid ", ";\n          z-index: ", ";\n        }\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      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\n  /* \n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", 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, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, 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, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(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, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "var(--ds-text-danger, ".concat(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, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, 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, insertColumnButtonOffset, insertColumnButtonOffset, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
 };
 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);

package/dist/esm/plugins/table/ui/consts.js

@@ -3,12 +3,13 @@ import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/st
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 import { themed } from '@atlaskit/theme/components';
+
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
 export var tableCellBackgroundColor = themed({
   light: "var(--ds-surface, ".concat(N0, ")"),
   dark: "var(--ds-surface, ".concat(DN30, ")")
@@ -25,8 +26,8 @@ export var tableBorderColor = themed({
   light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
   dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
 });
-export var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(N20, ")"); // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
-
+export var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(N20, ")");
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4461
 export var tableCellSelectedColor = "var(--ds-blanket-selected, rgba(179, 212, 255, 0.3))";
 export var tableToolbarSelectedColor = "var(--ds-background-selected-bold, ".concat(B200, ")");
 export var tableBorderSelectedColor = "var(--ds-border-selected, ".concat(B300, ")");

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

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

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

@@ -5,13 +5,11 @@ export function getSelectedTableInfo(selection) {
   var totalRowCount = 0;
   var totalColumnCount = 0;
   var table = findTable(selection);
-
   if (table) {
     map = TableMap.get(table.node);
     totalRowCount = map.height;
     totalColumnCount = map.width;
   }
-
   return {
     table: table,
     map: map,
@@ -23,23 +21,19 @@ export function getSelectedCellInfo(selection) {
   var horizontalCells = 1;
   var verticalCells = 1;
   var totalCells = 1;
-
   var _getSelectedTableInfo = getSelectedTableInfo(selection),
-      table = _getSelectedTableInfo.table,
-      map = _getSelectedTableInfo.map,
-      totalRowCount = _getSelectedTableInfo.totalRowCount,
-      totalColumnCount = _getSelectedTableInfo.totalColumnCount;
-
+    table = _getSelectedTableInfo.table,
+    map = _getSelectedTableInfo.map,
+    totalRowCount = _getSelectedTableInfo.totalRowCount,
+    totalColumnCount = _getSelectedTableInfo.totalColumnCount;
   if (table && map) {
     var rect = getSelectionRect(selection);
-
     if (rect) {
       totalCells = map.cellsInRect(rect).length;
       horizontalCells = rect.right - rect.left;
       verticalCells = rect.bottom - rect.top;
     }
   }
-
   return {
     totalRowCount: totalRowCount,
     totalColumnCount: totalColumnCount,
@@ -54,15 +48,12 @@ export var withEditorAnalyticsAPI = function withEditorAnalyticsAPI(payload) {
       return function (state, dispatch, view) {
         return command(state, function (tr) {
           var dynamicPayload = payload instanceof Function ? payload(state) : payload;
-
           if (dynamicPayload) {
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(dynamicPayload)(tr);
           }
-
           if (dispatch) {
             dispatch(tr);
           }
-
           return true;
         }, view);
       };

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

@@ -1,47 +1,38 @@
 import { NodeRange } from 'prosemirror-model';
 import { findWrapping } from 'prosemirror-transform';
 import { findTable } from '@atlaskit/editor-tables/utils';
-
 var bail = function bail() {
   return {
     tableIsCollapsible: false
   };
 };
+
 /**
  * Checks whether we can wrap the selected table into an expand via
  * prosemirror-transform's `findWrapping` helper
  */
-
-
 export var isTableCollapsible = function isTableCollapsible(tr) {
   var selection = tr.selection;
   var schema = tr.doc.type.schema;
   var nodePos = findTable(selection);
-
   if (!nodePos) {
     return bail();
   }
-
   var expand = schema.nodes.expand;
   var node = nodePos.node,
-      pos = nodePos.pos;
+    pos = nodePos.pos;
   var $pos = tr.doc.resolve(pos);
   var range = new NodeRange($pos, tr.doc.resolve(pos + node.nodeSize), $pos.depth);
-
   if (!range) {
     return bail();
   }
-
   var canWrap = findWrapping(range, expand);
-
   if (canWrap === null) {
     return bail();
   }
-
   return {
     tableIsCollapsible: true,
     range: range,
-
     /**
      * Do we ever want to deal with the result of `findWrapping`? Probably not,
      * but we have it anyway.
@@ -49,6 +40,7 @@ export var isTableCollapsible = function isTableCollapsible(tr) {
     findWrappingRes: canWrap
   };
 };
+
 /**
  * Collapses the selected table into an expand given a transaction via
  * `Transform.wrap`.
@@ -59,14 +51,13 @@ export var isTableCollapsible = function isTableCollapsible(tr) {
  * @param tr
  * @returns Transaction | undefined
  */
-
 export var collapseSelectedTable = function collapseSelectedTable(tr) {
   var canCollapse = isTableCollapsible(tr);
   var expand = tr.doc.type.schema.nodes.expand;
-
   if (!canCollapse.range || !canCollapse.tableIsCollapsible) {
     return undefined;
   }
+
   /**
    * TODO: add attrs: { __expanded: false } when
    * - it is working with new collab (CEMS-1204)
@@ -75,8 +66,6 @@ export var collapseSelectedTable = function collapseSelectedTable(tr) {
    *   (via confluence-frontend, "this feature" referencing allowInteractiveExpand)
    *   `we can NEVER allow this feature to be enabled for the synchrony-powered editor
    */
-
-
   tr.wrap(canCollapse.range, [{
     type: expand
   }]).setMeta('scrollIntoView', true);