@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css } from '@emotion/react';
+import { css as deprecatedCss } from 'styled-components';
+import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
+import { fontSize } from '@atlaskit/theme/constants';
+import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
+import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { scrollbarStyles } from '../../../ui/styles';
+import { TableCssClassName as ClassName } from '../types';
+import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
+import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
+var cornerControlHeight = tableToolbarSize + 1;
+var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n  }\n}\n");
+var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n  }\n  &.").concat(ClassName.WITH_CONTROLS, " {\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n    }\n  }\n}");
+export var tableStyles = function tableStyles(props) {
+  var _props$featureFlags;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button*/\n    ", "\n    /* Ends Delete button*/\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 1px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\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\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), ClassName.LAYOUT_BUTTON, N20A, N300, ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, B300, 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), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, stickyRowOffsetTop, stickyRowZIndex, N40A, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, (_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_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(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-child {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(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, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, R500, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
+};
+export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
+export var deprecatedTableFullPageEditorStyles = deprecatedCss(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
+export var tableCommentEditorStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles); // TODO remove this after migrated off styled-component
+
+export var deprecatedTableCommentEditorStyles = deprecatedCss(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

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

@@ -0,0 +1,68 @@
+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';
+import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
+import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } 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, N0, tableToolbarSelectedColor, tableBorderSelectedColor);
+};
+export var HeaderButtonHover = function HeaderButtonHover() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_BUTTON, N0, tableToolbarSelectedColor, tableBorderSelectedColor);
+};
+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, 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: white;\n      box-shadow: 0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A, ";\n      color: ").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: white;\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON, B300);
+};
+
+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) {
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, Marker(props), tableToolbarSize + lineMarkerOffsetFromColumnControls, lineMarkerSize / 2);
+};
+export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(N20A, ";\n        color: ").concat(N300, ";\n      ")), ClassName.CONTROLS_DELETE_BUTTON, R300);
+export var OverflowShadow = function OverflowShadow(props) {
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom + tableToolbarSize - 2, tableMarginTop + tableToolbarSize - 1, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, N40A, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, N40A, ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom - 2, tableMarginTop - 1, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableControlsSpacing);
+};
+
+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"])), N0, 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    &::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"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, 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.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, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+};
+export var hoveredDeleteButton = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor);
+export var hoveredCell = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor);
+export var hoveredWarningCell = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\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"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, Y50, Y200);
+export var resizeHandle = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\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"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);

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

@@ -2,11 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { pluginKey } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
 export var isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
 };
-export var containsHeaderColumn = function containsHeaderColumn(state, table) {
+export var containsHeaderColumn = function containsHeaderColumn(table) {
   var map = TableMap.get(table); // Get cell positions for first column.
 
   var cellPositions = map.cellsInRect({
@@ -20,7 +20,7 @@ export 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) {
@@ -30,27 +30,27 @@ export var containsHeaderColumn = function containsHeaderColumn(state, table) {
 
   return true;
 };
-export var containsHeaderRow = function containsHeaderRow(state, table) {
+export var containsHeaderRow = function containsHeaderRow(table) {
   var map = 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;
     }
   }
 
   return true;
 };
-export var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(state) {
-  return filterNearSelection(state, findTable, containsHeaderColumn, false);
+export var checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(selection) {
+  return filterNearSelection(selection, findTable, containsHeaderColumn, false);
 };
-export var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(state) {
-  return filterNearSelection(state, findTable, containsHeaderRow, false);
+export var checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(selection) {
+  return filterNearSelection(selection, findTable, containsHeaderRow, false);
 };
-export var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(state) {
-  return filterNearSelection(state, findTable, function (_, table) {
+export var checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(selection) {
+  return filterNearSelection(selection, findTable, function (table) {
     return !!table.attrs.isNumberColumnEnabled;
   }, false);
 };
@@ -86,14 +86,14 @@ export var tablesHaveDifferentNoOfColumns = function tablesHaveDifferentNoOfColu
   return prevMap.width !== currentMap.width;
 };
 
-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/esm/plugins/tasks-and-decisions/commands.js

@@ -1,6 +1,8 @@
 import { autoJoin } from 'prosemirror-commands';
+import { NodeRange } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, replaceParentNodeOfType, safeInsert, setTextSelection } from 'prosemirror-utils';
+import { liftTarget } from 'prosemirror-transform';
 import { uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD, USER_CONTEXT } from '../analytics';
 import { GapCursorSelection } from '../selection/gap-cursor-selection';
@@ -220,6 +222,14 @@ export var createListAtSelection = function createListAtSelection(tr, list, item
     }, [item.create({
       localId: uuid.generate()
     }, $from.node($from.depth).content)]);
+    var hasBlockquoteParent = findParentNodeOfType(blockquote)(selection);
+
+    if (hasBlockquoteParent) {
+      var liftedDepth = $from.depth - 1;
+      var range = new NodeRange($from, $to, liftedDepth);
+      tr.lift(range, liftTarget(range));
+    }
+
     var listParent = findParentNodeOfType(taskList)(selection) || findParentNodeOfType(decisionList)(selection);
     var listItem = findParentNodeOfType(taskItem)(selection) || 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
@@ -251,10 +261,12 @@ export var createListAtSelection = function createListAtSelection(tr, list, item
 
     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/esm/plugins/tasks-and-decisions/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity);

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

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
-export var textFormattingStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), codeMarkSharedStyles);
+export var textFormattingStyles = function textFormattingStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), codeMarkSharedStyles(props));
+};

package/dist/esm/plugins/text-formatting/ui/Toolbar/index.js

@@ -4,12 +4,13 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 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, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
@@ -19,6 +20,8 @@ import { SingleToolbarButtons } from './single-toolbar-buttons';
 import { MoreButton } from './more-button';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { toolbarMessages } from './toolbar-messages';
+import { usePreviousObjectState, compareItemsArrays, isArrayContainsContent } from '../../utils';
+import Announcer from '../../../../utils/announcer/announcer';
 
 var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
@@ -33,6 +36,12 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var editorState = useMemo(function () {
     return editorView.state;
   }, [editorView.state]);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      message = _useState2[0],
+      setMessage = _useState2[1];
+
   var defaultIcons = useFormattingIcons({
     editorState: editorState,
     intl: intl,
@@ -59,6 +68,54 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       dropdownItems = _useResponsiveToolbar.dropdownItems,
       singleItems = _useResponsiveToolbar.singleItems;
 
+  var clearFormattingStatus = intl.formatMessage(toolbarMessages.textFormattingOff);
+  var superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
+  var subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
+  var activeItems = [].concat(_toConsumableArray(dropdownItems), _toConsumableArray(singleItems)).filter(function (item) {
+    return item.isActive;
+  });
+  var prevActiveItems = usePreviousObjectState(activeItems);
+  var fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
+  var fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
+  var comparedItems;
+  var screenReaderMessage = '';
+
+  if (prevActiveItems && activeItems.length > prevActiveItems.length) {
+    comparedItems = compareItemsArrays(activeItems, prevActiveItems);
+    screenReaderMessage = intl.formatMessage(toolbarMessages.on, {
+      formattingType: comparedItems[0].content
+    });
+  } else {
+    comparedItems = compareItemsArrays(prevActiveItems, activeItems);
+
+    if (comparedItems && comparedItems.length) {
+      var _activeItems$;
+
+      screenReaderMessage = intl.formatMessage(toolbarMessages.off, {
+        formattingType: comparedItems[0].content
+      });
+
+      if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
+        screenReaderMessage = intl.formatMessage(toolbarMessages.codeOn, {
+          textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
+        });
+      }
+
+      if (fromSuperscriptToSubscript) {
+        screenReaderMessage = superscriptOffSubscriptOnStatus;
+      }
+
+      if (fromSubscriptToSuperscript) {
+        screenReaderMessage = subscriptOffSuperscriptOnStatus;
+      }
+    }
+  } // handle 'Clear formatting' status for screen readers
+
+
+  if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
+    screenReaderMessage = clearFormattingStatus;
+  }
+
   var items = useMemo(function () {
     if (!clearIcon) {
       return dropdownItems;
@@ -67,9 +124,19 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     return [].concat(_toConsumableArray(dropdownItems), [clearIcon]);
   }, [clearIcon, dropdownItems]);
   var moreFormattingButtonLabel = intl.formatMessage(toolbarMessages.moreFormatting);
+  useEffect(function () {
+    if (screenReaderMessage) {
+      setMessage(screenReaderMessage);
+    }
+  }, [screenReaderMessage]);
   return /*#__PURE__*/React.createElement(ButtonGroup, {
     width: isReducedSpacing ? 'small' : 'large'
-  }, /*#__PURE__*/React.createElement(SingleToolbarButtons, {
+  }, message && /*#__PURE__*/React.createElement(Announcer, {
+    ariaLive: "assertive",
+    text: message,
+    ariaRelevant: "additions",
+    delay: 250
+  }), /*#__PURE__*/React.createElement(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing

package/dist/esm/plugins/text-formatting/ui/Toolbar/toolbar-messages.js

@@ -15,16 +15,31 @@ export var toolbarMessages = defineMessages({
     defaultMessage: 'Code',
     description: 'Whether the text selection has monospaced/code font'
   },
+  codeOn: {
+    id: 'fabric.editor.code.on',
+    defaultMessage: '{textFormattingOff}, Code On',
+    description: 'Reports that code formatting has been turned on'
+  },
   subscript: {
     id: 'fabric.editor.subscript',
     defaultMessage: 'Subscript',
     description: 'Whether the text selection is written below the line in a slightly smaller size'
   },
+  subscriptOffSuperscriptOn: {
+    id: 'fabric.editor.subscript.off.superscript.on',
+    defaultMessage: 'Subscript Off, Superscript On',
+    description: 'Reports text formatting in case when subscript off and superscript on'
+  },
   superscript: {
     id: 'fabric.editor.superscript',
     defaultMessage: 'Superscript',
     description: 'Whether the text selection is written above the line in a slightly smaller size'
   },
+  superscriptOffSubscriptOn: {
+    id: 'fabric.editor.superscript.off.subscript.on',
+    defaultMessage: 'Superscript Off, Subscript On',
+    description: 'Describe text formatting in case when Superscript Off and Subscript on'
+  },
   clearFormatting: {
     id: 'fabric.editor.clearFormatting',
     defaultMessage: 'Clear formatting',
@@ -44,5 +59,20 @@ export var toolbarMessages = defineMessages({
     id: 'fabric.editor.italic',
     defaultMessage: 'Italic',
     description: 'This refers to italics or emphasized formatting.'
+  },
+  on: {
+    id: 'fabric.editor.on',
+    defaultMessage: '{formattingType} On',
+    description: 'Reports that text formatting has been turned on'
+  },
+  off: {
+    id: 'fabric.editor.off',
+    defaultMessage: '{formattingType} Off',
+    description: 'Reports that text formatting has been turned off'
+  },
+  textFormattingOff: {
+    id: 'fabric.editor.text.formatting.off',
+    defaultMessage: 'Text formatting Off',
+    description: 'Reports that text formatting has been turned off'
   }
 });

package/dist/esm/plugins/text-formatting/utils.js

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
 export var nodeLen = function nodeLen(node) {
@@ -127,4 +128,21 @@ var marksArePresent = function marksArePresent(state) {
 
 export var checkFormattingIsPresent = function checkFormattingIsPresent(state) {
   return marksArePresent(state) || blockStylingIsPresent(state);
+};
+export var usePreviousObjectState = function usePreviousObjectState(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+export var compareItemsArrays = function compareItemsArrays(items, prevItems) {
+  return items && items.filter(function (item) {
+    return !prevItems.includes(item);
+  });
+};
+export var isArrayContainsContent = function isArrayContainsContent(items, content) {
+  return items.filter(function (item) {
+    return item.content === content;
+  }).length > 0;
 };

package/dist/esm/plugins/type-ahead/api.js

@@ -1,7 +1,7 @@
 import { TypeAheadAvailableNodes, SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { findHandler, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
+import { findHandler, findHandlerByTrigger, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
 import { INPUT_METHOD } from '../analytics/types/enums';
-import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
+import { openTypeAheadAtCursor, openTypeAhead } from './transforms/open-typeahead-at-cursor';
 import { closeTypeAhead } from './transforms/close-type-ahead';
 import { updateQuery } from './commands/update-query';
 import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
@@ -207,6 +207,34 @@ var currentQuery = function currentQuery(_ref8) {
   };
 };
 
+var find = function find(_ref9) {
+  var editorView = _ref9.editorView;
+  return function (trigger) {
+    var editorState = editorView.state;
+    var handler = findHandlerByTrigger({
+      trigger: trigger,
+      editorState: editorState
+    });
+
+    if (!handler) {
+      return null;
+    }
+
+    return handler;
+  };
+}; // This is an internal tool to be used inside of others Editor Plugins
+// We shouldn't public export this method.
+
+
+export var createInternalTypeAheadTools = function createInternalTypeAheadTools(editorView) {
+  var props = {
+    editorView: editorView
+  };
+  return {
+    findTypeAheadHandler: find(props),
+    openTypeAheadHandler: openTypeAhead
+  };
+};
 export var createTypeAheadTools = function createTypeAheadTools(editorView) {
   var props = {
     editorView: editorView

package/dist/esm/plugins/type-ahead/constants.js

@@ -1,5 +1,6 @@
 export var TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 export var TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
+export var TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 export var NavigationDirection;
 
 (function (NavigationDirection) {

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -1,11 +1,11 @@
 import { TextSelection } from 'prosemirror-state';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
-export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
-  var triggerHandler = _ref.triggerHandler,
-      inputMethod = _ref.inputMethod,
-      query = _ref.query;
+export var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
+    var triggerHandler = props.triggerHandler,
+        inputMethod = props.inputMethod,
+        query = props.query;
     tr.setMeta(pluginKey, {
       action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
       params: {
@@ -14,6 +14,18 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
         query: query
       }
     });
+  };
+};
+export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
+  var triggerHandler = _ref.triggerHandler,
+      inputMethod = _ref.inputMethod,
+      query = _ref.query;
+  return function (tr) {
+    openTypeAhead({
+      triggerHandler: triggerHandler,
+      inputMethod: inputMethod,
+      query: query
+    })(tr);
     var selection = tr.selection;
 
     if (!(selection instanceof TextSelection)) {

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -6,7 +6,7 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
-import { CloseSelectionOptions } from '../constants';
+import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 var QuerySpan = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
 
@@ -180,6 +180,14 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     };
 
     var onFocusOut = function onFocusOut(event) {
+      var relatedTarget = event.relatedTarget; // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
+        return;
+      }
+
       cancel({
         addPrefixTrigger: true,
         text: cleanedInputContent(),