@atlaskit/editor-core 161.0.0 → 162.0.2

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

@@ -9,8 +9,6 @@ exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exp
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _reactIntlNext = require("react-intl-next");
 
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
@@ -27,13 +25,11 @@ var _tableResizing = require("./pm-plugins/table-resizing");
 
 var _types = require("./types");
 
-var _utils = require("./utils");
-
 var _referentiality = require("./utils/referentiality");
 
 var _analytics = require("../analytics");
 
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-tables/utils");
 
 var _transforms = require("./transforms");
 
@@ -45,10 +41,6 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _dom = require("../../utils/dom");
 
-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; }
-
-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: {
@@ -207,7 +199,7 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
     title: formatMessage(_ContextualMenu.messages.splitCell),
     onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(),
     selected: false,
-    disabled: !(0, _utils2.splitCell)(editorState)
+    disabled: !(0, _utils.splitCell)(editorState)
   }, {
     id: 'editor.table.clearCells',
     title: formatMessage(_ContextualMenu.messages.clearCells, {
@@ -236,21 +228,19 @@ exports.getToolbarCellOptionsConfig = getToolbarCellOptionsConfig;
 
 var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
-  return (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
+  return (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
 };
 
 var getToolbarConfig = function getToolbarConfig(config) {
   return function (state, intl) {
-    var tableObject = (0, _utils2.findTable)(state.selection);
+    var tableObject = (0, _utils.findTable)(state.selection);
     var pluginState = (0, _pluginFactory.getPluginState)(state);
 
     var resizeState = _tableResizing.pluginKey.getState(state);
 
     if (tableObject && pluginState.editorHasFocus) {
       var nodeType = state.schema.nodes.table;
-      var menu = getToolbarMenuConfig(config, _objectSpread(_objectSpread({}, pluginState), {}, {
-        isNumberColumnEnabled: (0, _utils.checkIfNumberColumnEnabled)(state)
-      }), intl);
+      var menu = getToolbarMenuConfig(config, pluginState, intl);
       var cellItems = getCellItems(config, state, intl); // Check if we need to show confirm dialog for delete button
 
       var confirmDialog;

package/dist/cjs/plugins/table/transforms/metadata.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setMeta = void 0;
 
-var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _fixTables = require("./fix-tables");
 
@@ -16,7 +16,7 @@ var setMeta = function setMeta(meta) {
       (0, _fixTables.fireAnalytics)(meta);
     }
 
-    return tr.setMeta(_pluginFactory.pluginKey, meta);
+    return tr.setMeta(_pluginKey.pluginKey, meta);
   };
 };
 

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

@@ -52,7 +52,7 @@ var _types2 = require("../../../analytics/types");
 
 var _analytics = require("../../../analytics");
 
-var _styles = require("./styles.css");
+var _styles = require("./styles");
 
 var _ErrorBoundary = require("../../../../ui/ErrorBoundary");
 

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

@@ -23,9 +23,11 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 
+var _pluginKey = require("../../pm-plugins/plugin-key");
+
 var _consts = require("../consts");
 
-var _styles = require("./styles.css");
+var _styles = require("./styles");
 
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 
@@ -35,7 +37,7 @@ var MenuWrapper = _styledComponents.default.div(_templateObject || (_templateObj
 
 
 var calculateOffset = function calculateOffset(targetCellRef, state) {
-  var _pluginKey$getState = _pluginFactory.pluginKey.getState(state),
+  var _pluginKey$getState = _pluginKey.pluginKey.getState(state),
       tableRef = _pluginKey$getState.tableRef;
 
   var top = -_consts.contextualMenuTriggerSize;

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

@@ -157,7 +157,7 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableContainerWrapper = (0, _dom.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
       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);
+      var hasNumberedColumns = (0, _utils2.checkIfNumberColumnEnabled)(editorView.state.selection);
       return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,

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

@@ -239,9 +239,8 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
           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 stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
     }
   }]);
   return LayoutButton;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableStyles = exports.tableFullPageEditorStyles = exports.tableCommentEditorStyles = exports.deprecatedTableFullPageEditorStyles = exports.deprecatedTableCommentEditorStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styledComponents = require("styled-components");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _styles2 = require("../../../ui/styles");
+
+var _types = require("../types");
+
+var _consts = require("./consts");
+
+var _uiStyles = require("./ui-styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var cornerControlHeight = _consts.tableToolbarSize + 1;
+var rangeSelectionStyles = "\n.".concat(_types.TableCssClassName.NODEVIEW_WRAPPER, ".").concat(_editorSharedStyles.akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), "\n  }\n}\n");
+var sentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(_types.TableCssClassName.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(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(_consts.columnControlsDecorationHeight, "px;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + _consts.tablePadding * 2 + 23, "px;\n  }\n  &.").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n    > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(_consts.columnControlsDecorationHeight, "px;\n    }\n  }\n}");
+
+var tableStyles = function tableStyles(props) {
+  var _props$featureFlags;
+
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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\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\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 {\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\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,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > 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"])), _types.TableCssClassName.LAYOUT_BUTTON, _colors.N20A, _colors.N300, _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, _colors.B300, (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, _colors.N40A, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          right: -1px;\n          top: -12px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _colors.R500, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableInsertColumnButtonSize / 2, _consts.tableInsertColumnButtonSize / 2, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
+};
+
+exports.tableStyles = tableStyles;
+var tableFullPageEditorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
+exports.tableFullPageEditorStyles = tableFullPageEditorStyles;
+var deprecatedTableFullPageEditorStyles = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
+exports.deprecatedTableFullPageEditorStyles = deprecatedTableFullPageEditorStyles;
+var tableCommentEditorStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles); // TODO remove this after migrated off styled-component
+
+exports.tableCommentEditorStyles = tableCommentEditorStyles;
+var deprecatedTableCommentEditorStyles = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles);
+exports.deprecatedTableCommentEditorStyles = deprecatedTableCommentEditorStyles;

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _consts = require("./consts");
+
+var _types = require("../types");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+
+var InsertLine = function InsertLine(cssString) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
+};
+
+var Marker = function Marker(props) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  position: absolute;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 50%;\n  pointer-events: none;\n"])), (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize);
+};
+
+var InsertMarker = function InsertMarker(props, cssString) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_MARKER, Marker(props), cssString);
+};
+
+exports.InsertMarker = InsertMarker;
+
+var Button = function Button(cssString) {
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
+};
+
+var HeaderButton = function HeaderButton(props, cssString) {
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, _colors.N0, _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+};
+
+exports.HeaderButton = HeaderButton;
+
+var HeaderButtonHover = function HeaderButtonHover() {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, _colors.N0, _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+};
+
+exports.HeaderButtonHover = HeaderButtonHover;
+
+var HeaderButtonDanger = function HeaderButtonDanger() {
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
+};
+
+exports.HeaderButtonDanger = HeaderButtonDanger;
+
+var InsertButton = function InsertButton() {
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: white;\n      box-shadow: 0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A, ";\n      color: ").concat(_colors.N300, ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
+};
+
+var InsertButtonHover = function InsertButtonHover() {
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    background: ", ";\n    color: white;\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _colors.B300);
+};
+
+var insertColumnButtonWrapper = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
+exports.insertColumnButtonWrapper = insertColumnButtonWrapper;
+var insertRowButtonWrapper = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n  ")));
+exports.insertRowButtonWrapper = insertRowButtonWrapper;
+
+var columnControlsLineMarker = function columnControlsLineMarker(props) {
+  return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", "\n    table\n    tr:first-child\n    td,\n  .", ".", "\n    table\n    tr:first-child\n    th {\n    position: relative;\n\n    &::before {\n      content: ' ';\n      ", ";\n      top: -", "px;\n      right: -", "px;\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, Marker(props), _consts.tableToolbarSize + _consts.lineMarkerOffsetFromColumnControls, _consts.lineMarkerSize / 2);
+};
+
+exports.columnControlsLineMarker = columnControlsLineMarker;
+var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: white;\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_colors.N20A, ";\n        color: ").concat(_colors.N300, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _colors.R300);
+exports.DeleteButton = DeleteButton;
+
+var OverflowShadow = function OverflowShadow(props) {
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(\n      100% - ", "px\n    );\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\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  .", ".", " {\n    .", ", .", " {\n      top: ", "px;\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom + _consts.tableToolbarSize - 2, _styles.tableMarginTop + _consts.tableToolbarSize - 1, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, _colors.N40A, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _colors.N40A, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom - 2, _styles.tableMarginTop - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableControlsSpacing);
+};
+
+exports.OverflowShadow = OverflowShadow;
+
+var columnHeaderButton = function columnHeaderButton(props, cssString) {
+  return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString);
+};
+
+var columnHeaderButtonSelected = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), _colors.N0, _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor, _consts.columnControlsSelectedZIndex);
+
+var columnControlsDecoration = function columnControlsDecoration(props) {
+  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\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    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-child\n    td.", ",\n    table\n    tr:first-child\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-child\n    td.", ",\n    .", "\n    table\n    tr:first-child\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+};
+
+exports.columnControlsDecoration = columnControlsDecoration;
+var hoveredDeleteButton = (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor);
+exports.hoveredDeleteButton = hoveredDeleteButton;
+var hoveredCell = (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor);
+exports.hoveredCell = hoveredCell;
+var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, _colors.Y50, _colors.Y200);
+exports.hoveredWarningCell = hoveredWarningCell;
+var resizeHandle = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", ", th.", " {\n      .", "::after {\n        content: ' ';\n        right: ", "px;\n        position: absolute;\n        width: ", "px;\n        height: calc(100% + 1px);\n        background-color: ", ";\n        z-index: ", ";\n        top: 0;\n      }\n    }\n\n    table\n      tr:first-child\n      th.", "\n      .", "::after,\n      table\n      tr:first-child\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+exports.resizeHandle = resizeHandle;

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

@@ -15,7 +15,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _pluginKey = require("../pm-plugins/plugin-key");
 
 var isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
@@ -23,7 +23,7 @@ var isIsolating = function isIsolating(node) {
 
 exports.isIsolating = isIsolating;
 
-var containsHeaderColumn = function containsHeaderColumn(state, table) {
+var containsHeaderColumn = function containsHeaderColumn(table) {
   var map = _tableMap.TableMap.get(table); // Get cell positions for first column.
 
 
@@ -38,7 +38,7 @@ var containsHeaderColumn = function containsHeaderColumn(state, table) {
     try {
       var cell = table.nodeAt(cellPositions[i]);
 
-      if (cell && cell.type !== state.schema.nodes.tableHeader) {
+      if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
         return false;
       }
     } catch (e) {
@@ -51,13 +51,13 @@ var containsHeaderColumn = function containsHeaderColumn(state, table) {
 
 exports.containsHeaderColumn = containsHeaderColumn;
 
-var containsHeaderRow = function containsHeaderRow(state, table) {
+var containsHeaderRow = function containsHeaderRow(table) {
   var map = _tableMap.TableMap.get(table);
 
   for (var i = 0; i < map.width; i++) {
     var cell = table.nodeAt(map.map[i]);
 
-    if (cell && cell.type !== state.schema.nodes.tableHeader) {
+    if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
       return false;
     }
   }
@@ -67,20 +67,20 @@ var containsHeaderRow = function containsHeaderRow(state, table) {
 
 exports.containsHeaderRow = containsHeaderRow;
 
-var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(state) {
-  return filterNearSelection(state, _utils.findTable, containsHeaderColumn, false);
+var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(selection) {
+  return filterNearSelection(selection, _utils.findTable, containsHeaderColumn, false);
 };
 
 exports.checkIfHeaderColumnEnabled = checkIfHeaderColumnEnabled;
 
-var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(state) {
-  return filterNearSelection(state, _utils.findTable, containsHeaderRow, false);
+var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(selection) {
+  return filterNearSelection(selection, _utils.findTable, containsHeaderRow, false);
 };
 
 exports.checkIfHeaderRowEnabled = checkIfHeaderRowEnabled;
 
-var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(state) {
-  return filterNearSelection(state, _utils.findTable, function (_, table) {
+var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(selection) {
+  return filterNearSelection(selection, _utils.findTable, function (table) {
     return !!table.attrs.isNumberColumnEnabled;
   }, false);
 };
@@ -88,7 +88,7 @@ var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(state) {
 exports.checkIfNumberColumnEnabled = checkIfNumberColumnEnabled;
 
 var isLayoutSupported = function isLayoutSupported(state) {
-  var permittedLayouts = _pluginFactory.pluginKey.getState(state).pluginConfig.permittedLayouts;
+  var permittedLayouts = _pluginKey.pluginKey.getState(state).pluginConfig.permittedLayouts;
 
   var _state$schema$nodes = state.schema.nodes,
       bodiedExtension = _state$schema$nodes.bodiedExtension,
@@ -133,14 +133,14 @@ var tablesHaveDifferentNoOfColumns = function tablesHaveDifferentNoOfColumns(cur
 
 exports.tablesHaveDifferentNoOfColumns = tablesHaveDifferentNoOfColumns;
 
-function filterNearSelection(state, findNode, predicate, defaultValue) {
-  var found = findNode(state.selection);
+function filterNearSelection(selection, findNode, predicate, defaultValue) {
+  var found = findNode(selection);
 
   if (!found) {
     return defaultValue;
   }
 
-  return predicate(state, found.node, found.pos);
+  return predicate(found.node, found.pos);
 }
 
 function getTableWidths(node) {

package/dist/cjs/plugins/tasks-and-decisions/commands.js

@@ -7,10 +7,14 @@ exports.isSupportedSourceNode = exports.insertTaskDecisionWithAnalytics = export
 
 var _prosemirrorCommands = require("prosemirror-commands");
 
+var _prosemirrorModel = require("prosemirror-model");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
+var _prosemirrorTransform = require("prosemirror-transform");
+
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _analytics = require("../analytics");
@@ -250,6 +254,14 @@ var createListAtSelection = function createListAtSelection(tr, list, item, schem
     }, [item.create({
       localId: _adfSchema.uuid.generate()
     }, $from.node($from.depth).content)]);
+    var hasBlockquoteParent = (0, _prosemirrorUtils.findParentNodeOfType)(blockquote)(selection);
+
+    if (hasBlockquoteParent) {
+      var liftedDepth = $from.depth - 1;
+      var range = new _prosemirrorModel.NodeRange($from, $to, liftedDepth);
+      tr.lift(range, (0, _prosemirrorTransform.liftTarget)(range));
+    }
+
     var listParent = (0, _prosemirrorUtils.findParentNodeOfType)(taskList)(selection) || (0, _prosemirrorUtils.findParentNodeOfType)(decisionList)(selection);
     var listItem = (0, _prosemirrorUtils.findParentNodeOfType)(taskItem)(selection) || (0, _prosemirrorUtils.findParentNodeOfType)(decisionItem)(selection); // For a selection inside a task/decision list, we can't just simply replace the
     // node type as it will mess up lists with > 1 item
@@ -281,10 +293,12 @@ var createListAtSelection = function createListAtSelection(tr, list, item, schem
 
     var nodeTypesToReplace = [blockquote];
 
-    if (nodeType === paragraph && childCount > 0) {
+    if (nodeType === paragraph && childCount > 0 || hasBlockquoteParent) {
       // Only convert paragraphs containing content.
       // Empty paragraphs use the default flow.
       // This distinction ensures the text selection remains in the correct location.
+      // We also want to replace the paragraph type when we are inside a blockQuote
+      // to avoid inserting an extra taskList whilst keeping the paragraph
       nodeTypesToReplace.push(paragraph);
     }
 

package/dist/cjs/plugins/text-formatting/styles.js

@@ -9,11 +9,14 @@ exports.textFormattingStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var textFormattingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), _styles.codeMarkSharedStyles);
+var textFormattingStyles = function textFormattingStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.codeMarkSharedStyles)(props));
+};
+
 exports.textFormattingStyles = textFormattingStyles;