@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -1,9 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3;
 
 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';
@@ -18,10 +17,7 @@ var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(C
 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);
+  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);
+export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

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

@@ -1,7 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Fragment, Slice } from 'prosemirror-model';
 import { flatten } from 'prosemirror-utils';
-import { flatmap, mapSlice } from '../../../utils/slice'; // lifts up the content of each cell, returning an array of nodes
+import { flatmap, mapSlice } from '../../../utils/slice';
+import { getPluginState } from '../pm-plugins/plugin-factory'; // lifts up the content of each cell, returning an array of nodes
 
 export var unwrapContentFromTable = function unwrapContentFromTable(maybeTable) {
   var schema = maybeTable.type.schema;
@@ -43,7 +44,7 @@ export var transformSliceToFixHardBreakProblemOnCopyFromCell = function transfor
       table = _schema$nodes2.table,
       hardBreak = _schema$nodes2.hardBreak;
   var emptyParagraphNode = paragraph.createAndFill();
-  var hardBreakNode = hardBreak.createAndFill();
+  var hardBreakNode = hardBreak === null || hardBreak === void 0 ? void 0 : hardBreak.createAndFill();
   var paragraphNodeSize = emptyParagraphNode ? emptyParagraphNode.nodeSize : 0;
   var hardBreakNodeSize = hardBreakNode ? hardBreakNode.nodeSize : 0;
   var paragraphWithHardBreakSize = paragraphNodeSize + hardBreakNodeSize;
@@ -93,4 +94,8 @@ export var transformSliceToCorrectEmptyTableCells = function transformSliceToCor
 
     return node;
   });
-};
+};
+export function isHeaderRowRequired(state) {
+  var tableState = getPluginState(state);
+  return tableState && tableState.pluginConfig.isHeaderRowRequired;
+}

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

@@ -1,4 +1,3 @@
-import { autoJoin } from 'prosemirror-commands';
 import { NodeRange } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, replaceParentNodeOfType, safeInsert, setTextSelection } from 'prosemirror-utils';
@@ -7,6 +6,7 @@ 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';
 import { stateKey as taskDecisionStateKey } from './pm-plugins/plugin-key';
+import { autoJoinTr } from '../../utils/prosemirror/autojoin';
 
 var getContextData = function getContextData() {
   var contextProvider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -68,11 +68,23 @@ export var getListTypes = function getListTypes(listType, schema) {
     item: decisionItem
   };
 };
+/*
+ * @deprecated - [ED-13182] insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand
+ */
+
 export var insertTaskDecision = function insertTaskDecision(view, listType) {
   var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.TOOLBAR;
   var listLocalId = arguments.length > 3 ? arguments[3] : undefined;
   var itemLocalId = arguments.length > 4 ? arguments[4] : undefined;
-  var state = view.state;
+  // eslint-disable-next-line no-console
+  console.warn('insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand');
+  return insertTaskDecisionCommand(listType, inputMethod, undefined, listLocalId, itemLocalId);
+};
+export var insertTaskDecisionAction = function insertTaskDecisionAction(state, listType) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.TOOLBAR;
+  var addItem = arguments.length > 3 ? arguments[3] : undefined;
+  var listLocalId = arguments.length > 4 ? arguments[4] : undefined;
+  var itemLocalId = arguments.length > 5 ? arguments[5] : undefined;
   var schema = state.schema;
 
   var addAndCreateList = function addAndCreateList(_ref) {
@@ -100,18 +112,30 @@ export var insertTaskDecision = function insertTaskDecision(view, listType) {
     }]).setSelection(new TextSelection(tr.doc.resolve(newItemParagraphPos)));
   };
 
-  var tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId);
-  return autoJoin(function (state, dispatch) {
-    if (tr) {
-      if (dispatch) {
-        dispatch(tr);
-      }
+  var addAndCreateListFn = addItem !== null && addItem !== void 0 ? addItem : addAndCreateList;
+  var tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateListFn, addToList, listLocalId, itemLocalId);
+
+  if (!tr) {
+    return state.tr;
+  }
 
-      return true;
+  autoJoinTr(tr, ['taskList', 'decisionList']);
+  return tr;
+};
+export var insertTaskDecisionCommand = function insertTaskDecisionCommand(listType) {
+  var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
+  var addItem = arguments.length > 2 ? arguments[2] : undefined;
+  var listLocalId = arguments.length > 3 ? arguments[3] : undefined;
+  var itemLocalId = arguments.length > 4 ? arguments[4] : undefined;
+  return function (state, dispatch) {
+    var tr = insertTaskDecisionAction(state, listType, inputMethod, addItem, listLocalId, itemLocalId);
+
+    if (dispatch) {
+      dispatch(tr);
     }
 
-    return false;
-  }, ['taskList', 'decisionList']);
+    return true;
+  };
 };
 export var insertTaskDecisionWithAnalytics = function insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId) {
   var schema = state.schema;

package/dist/esm/plugins/tasks-and-decisions/index.js

@@ -2,36 +2,35 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { decisionItem, decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '../analytics';
 import { messages as insertBlockMessages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { IconAction, IconDecision } from '../quick-insert/assets';
-import { getListTypes, insertTaskDecisionWithAnalytics } from './commands';
+import { insertTaskDecisionAction, getListTypes } from './commands';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
 import ToolbarDecision from './ui/ToolbarDecision';
 import ToolbarTask from './ui/ToolbarTask';
-var TaskDecisionToolbarGroup = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var taskDecisionToolbarGroup = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 
-var quickInsertItem = function quickInsertItem(insert, state, listType) {
-  var _getListTypes = getListTypes(listType, state.schema),
-      list = _getListTypes.list,
-      item = _getListTypes.item;
-
-  var addItem = function addItem(_ref) {
+var addItem = function addItem(insert, listType, schema) {
+  return function (_ref) {
     var listLocalId = _ref.listLocalId,
         itemLocalId = _ref.itemLocalId;
+
+    var _getListTypes = getListTypes(listType, schema),
+        list = _getListTypes.list,
+        item = _getListTypes.item;
+
     return insert(list.createChecked({
       localId: listLocalId
     }, item.createChecked({
       localId: itemLocalId
     })));
   };
-
-  return insertTaskDecisionWithAnalytics(state, listType, INPUT_METHOD.QUICK_INSERT, addItem);
 };
 
 var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
@@ -86,11 +85,13 @@ var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref6) {
       var editorView = _ref6.editorView,
           disabled = _ref6.disabled;
-      return /*#__PURE__*/React.createElement(TaskDecisionToolbarGroup, null, /*#__PURE__*/React.createElement(ToolbarDecision, {
+      return jsx("div", {
+        css: taskDecisionToolbarGroup
+      }, jsx(ToolbarDecision, {
         editorView: editorView,
         isDisabled: disabled,
         isReducedSpacing: true
-      }), /*#__PURE__*/React.createElement(ToolbarTask, {
+      }), jsx(ToolbarTask, {
         editorView: editorView,
         isDisabled: disabled,
         isReducedSpacing: true
@@ -107,10 +108,10 @@ var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
           keywords: ['checkbox', 'task', 'todo'],
           keyshortcut: '[]',
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconAction, null);
+            return jsx(IconAction, null);
           },
           action: function action(insert, state) {
-            return quickInsertItem(insert, state, 'taskList');
+            return insertTaskDecisionAction(state, 'taskList', INPUT_METHOD.QUICK_INSERT, addItem(insert, 'taskList', state.schema));
           }
         }, {
           id: 'decision',
@@ -119,10 +120,10 @@ var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
           priority: 900,
           keyshortcut: '<>',
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconDecision, null);
+            return jsx(IconDecision, null);
           },
           action: function action(insert, state) {
-            return quickInsertItem(insert, state, 'decisionList');
+            return insertTaskDecisionAction(state, 'decisionList', INPUT_METHOD.QUICK_INSERT, addItem(insert, 'decisionList', state.schema));
           }
         }];
       }

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

@@ -3,11 +3,24 @@ import { canInsert } from 'prosemirror-utils';
 import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { INPUT_METHOD } from '../../analytics';
-import { changeInDepth, insertTaskDecisionWithAnalytics } from '../commands';
+import { changeInDepth, insertTaskDecisionAction, getListTypes } from '../commands';
 
 var createListRule = function createListRule(regex, listType) {
   return createRule(regex, function (state, _match, start, end) {
-    var insertTr = insertTaskDecisionWithAnalytics(state, listType, INPUT_METHOD.FORMATTING, addItem(start, end));
+    var paragraph = state.schema.nodes.paragraph;
+
+    var _getListTypes = getListTypes(listType, state.schema),
+        list = _getListTypes.list;
+
+    var $end = state.doc.resolve(end);
+    var $endOfParent = state.doc.resolve($end.after()); // Only allow creating list in nodes that support them.
+    // Parent must be a paragraph as we don't want this applying to headings
+
+    if ($end.parent.type !== paragraph || !canInsert($endOfParent, list.createAndFill())) {
+      return null;
+    }
+
+    var insertTr = insertTaskDecisionAction(state, listType, INPUT_METHOD.FORMATTING, addItem(start, end));
     return insertTr;
   });
 };
@@ -22,9 +35,7 @@ var addItem = function addItem(start, end) {
         itemLocalId = _ref.itemLocalId;
     var $from = state.selection.$from,
         schema = state.schema;
-    var _schema$nodes = schema.nodes,
-        paragraph = _schema$nodes.paragraph,
-        hardBreak = _schema$nodes.hardBreak;
+    var hardBreak = schema.nodes.hardBreak;
     var content = $from.node($from.depth).content;
     var shouldBreakNode = false;
     content.forEach(function (node, offset) {
@@ -32,13 +43,6 @@ var addItem = function addItem(start, end) {
         shouldBreakNode = true;
       }
     });
-    var $end = state.doc.resolve(end);
-    var $endOfParent = state.doc.resolve($end.after()); // Only allow creating list in nodes that support them.
-    // Parent must be a paragraph as we don't want this applying to headings
-
-    if ($end.parent.type !== paragraph || !canInsert($endOfParent, list.createAndFill())) {
-      return null;
-    }
 
     if (!shouldBreakNode) {
       tr.replaceRangeWith($from.before(), $from.after(), list.create({
@@ -62,11 +66,11 @@ var addItem = function addItem(start, end) {
 
 export function inputRulePlugin(schema, featureFlags) {
   var rules = [];
-  var _schema$nodes2 = schema.nodes,
-      decisionList = _schema$nodes2.decisionList,
-      decisionItem = _schema$nodes2.decisionItem,
-      taskList = _schema$nodes2.taskList,
-      taskItem = _schema$nodes2.taskItem;
+  var _schema$nodes = schema.nodes,
+      decisionList = _schema$nodes.decisionList,
+      decisionItem = _schema$nodes.decisionItem,
+      taskList = _schema$nodes.taskList,
+      taskItem = _schema$nodes.taskItem;
 
   if (decisionList && decisionItem) {
     rules.push(createListRule(new RegExp("(^|".concat(leafNodeReplacementCharacter, ")\\<\\>\\s$")), 'decisionList'));

package/dist/esm/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -15,7 +15,7 @@ import { injectIntl } from 'react-intl-next';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';
-import { insertTaskDecision } from '../../commands';
+import { insertTaskDecisionCommand } from '../../commands';
 export var ToolbarDecision = /*#__PURE__*/function (_PureComponent) {
   _inherits(ToolbarDecision, _PureComponent);
 
@@ -43,7 +43,7 @@ export var ToolbarDecision = /*#__PURE__*/function (_PureComponent) {
         return false;
       }
 
-      insertTaskDecision(editorView, 'decisionList')(editorView.state, editorView.dispatch);
+      insertTaskDecisionCommand('decisionList')(editorView.state, editorView.dispatch);
       return true;
     });
 

package/dist/esm/plugins/tasks-and-decisions/ui/ToolbarTask/index.js

@@ -15,7 +15,7 @@ import { injectIntl } from 'react-intl-next';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';
-import { insertTaskDecision } from '../../commands';
+import { insertTaskDecisionCommand } from '../../commands';
 export var ToolbarTask = /*#__PURE__*/function (_PureComponent) {
   _inherits(ToolbarTask, _PureComponent);
 
@@ -43,7 +43,7 @@ export var ToolbarTask = /*#__PURE__*/function (_PureComponent) {
         return false;
       }
 
-      insertTaskDecision(editorView, 'taskList')(editorView.state, editorView.dispatch);
+      insertTaskDecisionCommand('taskList')(editorView.state, editorView.dispatch);
       return true;
     });
 

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

@@ -14,19 +14,21 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ColorPalette from '../../../../ui/ColorPalette';
 import { textColorPalette as originalTextColors } from '../../../../ui/ColorPalette/Palettes/textColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
-import { ExpandIconWrapper, MenuWrapper, Separator, TriggerWrapper } from '../../../../ui/styles';
+import { expandIconWrapperStyle, wrapperStyle, separatorStyles, triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
 import * as commands from '../../commands/change-color';
 import { EditorTextColorIcon } from './icon';
-import { disabledRainbow, rainbow, TextColorIconBar, TextColorIconWrapper } from './styles';
+import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
 var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 var EXPERIMENT_GROUP_CONTROL = 'control';
 export var messages = defineMessages({
@@ -156,7 +158,10 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         fitWidth = 242;
       }
 
-      return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+      return jsx("span", {
+        css: wrapperStyle
+      }, jsx(Dropdown, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
@@ -165,7 +170,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         handleEscapeKeydown: this.hide,
         zIndex: akEditorMenuZIndex,
         fitWidth: fitWidth,
-        trigger: /*#__PURE__*/React.createElement(ToolbarButton, {
+        trigger: jsx(ToolbarButton, {
           buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: disabled || pluginState.disabled,
@@ -175,22 +180,29 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": true,
           title: labelTextColor,
           onClick: this.toggleOpen,
-          iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(TextColorIconWrapper, null, /*#__PURE__*/React.createElement(EditorTextColorIcon, null), /*#__PURE__*/React.createElement(TextColorIconBar, {
-            selectedColor: pluginState.color !== pluginState.defaultColor && pluginState.color,
-            gradientColors: pluginState.disabled ? disabledRainbow : rainbow
-          })), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+          iconBefore: jsx("div", {
+            css: triggerWrapperStyles
+          }, jsx("div", {
+            css: textColorIconWrapper
+          }, jsx(EditorTextColorIcon, null), jsx("div", {
+            css: [textColorIconBar, selectedColor ? "background: ".concat(selectedColor, ";") : pluginState.disabled && backgroundDisabled]
+          })), jsx("span", {
+            css: expandIconWrapperStyle
+          }, jsx(ExpandIcon, {
             label: ""
           })))
         })
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         "data-testid": "text-color-palette"
-      }, /*#__PURE__*/React.createElement(ColorPalette, {
+      }, jsx(ColorPalette, {
         palette: palette,
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color
-      }))), /*#__PURE__*/React.createElement(Separator, null));
+      }))), jsx("span", {
+        css: separatorStyles
+      }));
     }
   }, {
     key: "getCommonAnalyticsAttributes",

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/styles.js

@@ -1,21 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var TextColorIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var TextColorIconBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n\n  ", ";\n"])), borderRadius() + 'px', function (_ref) {
-  var gradientColors = _ref.gradientColors,
-      selectedColor = _ref.selectedColor;
-
-  if (selectedColor) {
-    return "background: ".concat(selectedColor);
-  }
-
-  return "background: ".concat(gradientColors);
-});
 
 var createSteppedRainbow = function createSteppedRainbow(colors) {
   return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
@@ -34,5 +23,8 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
   }).join('\n'), "\n    );\n    ");
 };
 
-export var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
-export var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
+var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+export var textColorIconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+export var textColorIconBar = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n  background: ", ";\n"])), borderRadius() + 'px', rainbow);
+export var backgroundDisabled = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), disabledRainbow);

package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -1,5 +1,7 @@
-import React, { useMemo } from 'react';
-import { Shortcut } from '../../../../../ui/styles';
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { shortcutStyle } from '../../../../../ui/styles';
 import { toolbarMessages } from '../toolbar-messages';
 import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
 import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
@@ -29,7 +31,9 @@ export var useClearIcon = function useClearIcon(_ref) {
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
-      elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(clearFormattingKeymap)),
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(clearFormattingKeymap)),
       value: {
         name: 'clearFormatting'
       },

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

@@ -2,10 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _IconsMarkSchema;
 
+/** @jsx jsx */
 import React, { useMemo } from 'react';
+import { jsx } from '@emotion/react';
 import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
 import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
-import { Shortcut } from '../../../../../ui/styles';
+import { shortcutStyle } from '../../../../../ui/styles';
 import { toolbarMessages } from '../toolbar-messages';
 import * as commands from '../../../commands/text-formatting';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../../../../plugins/analytics/types/toolbar-button';
@@ -27,7 +29,7 @@ var IconButtons = {
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
     component: function component() {
-      return /*#__PURE__*/React.createElement(BoldIcon, {
+      return jsx(BoldIcon, {
         label: ""
       });
     }
@@ -38,7 +40,7 @@ var IconButtons = {
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
     component: function component() {
-      return /*#__PURE__*/React.createElement(ItalicIcon, {
+      return jsx(ItalicIcon, {
         label: ""
       });
     }
@@ -85,11 +87,13 @@ var getIcon = function getIcon(_ref) {
     key: iconType,
     command: icon.command,
     iconElement: icon.component ? icon.component() : undefined,
-    tooltipElement: tooltipKeymap ? /*#__PURE__*/React.createElement(ToolTipContent, {
+    tooltipElement: tooltipKeymap ? jsx(ToolTipContent, {
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
-    elemAfter: tooltipKeymap ? /*#__PURE__*/React.createElement(Shortcut, null, tooltip(tooltipKeymap)) : undefined,
+    elemAfter: tooltipKeymap ? jsx("div", {
+      css: shortcutStyle
+    }, tooltip(tooltipKeymap)) : undefined,
     value: {
       name: iconType
     },