@atlaskit/editor-core 172.0.4 → 172.1.1

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

@@ -114,7 +114,8 @@ var CornerControls = /*#__PURE__*/function (_Component) {
         }),
         style: {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
-        }
+        },
+        contentEditable: false
       }, /*#__PURE__*/_react.default.createElement("button", {
         type: "button",
         className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {

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

@@ -38,7 +38,7 @@ var sentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n
 var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
 
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !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-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 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-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      // Fixes Chrome border clipping bug ED-15245\n      background: ", ";\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        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"])), _types.TableCssClassName.LAYOUT_BUTTON, (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'), (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, (0, _tokens.token)('elevation.surface', 'white'), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, (0, _tokens.token)('elevation.surface', 'green'), _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (0, _tokens.token)('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          right: -1px;\n          top: -12px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.inverse', _colors.N0), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.inverse', _colors.N0), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, (0, _tokens.token)('color.text.inverse', _colors.R500), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableInsertColumnButtonSize / 2, _consts.tableInsertColumnButtonSize / 2, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 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-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      td.", ", td.", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          border: 1px solid ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\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"])), _types.TableCssClassName.LAYOUT_BUTTON, (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'), (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, (0, _tokens.token)('elevation.surface', 'white'), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, (0, _tokens.token)('elevation.surface', 'green'), _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (0, _tokens.token)('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          right: -1px;\n          top: -12px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.inverse', _colors.N0), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.inverse', _colors.N0), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, (0, _tokens.token)('color.text.inverse', _colors.R500), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableInsertColumnButtonSize / 2, _consts.tableInsertColumnButtonSize / 2, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
 };
 
 exports.tableStyles = tableStyles;

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

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updateDecorations = exports.findControlsHoverDecoration = exports.findColumnControlSelectedDecoration = exports.createResizeHandleDecoration = exports.createControlsHoverDecoration = exports.createColumnSelectedDecoration = exports.createColumnLineResize = exports.createColumnControlsDecoration = exports.createCellHoverDecoration = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -45,8 +49,54 @@ var createCellHoverDecoration = function createCellHoverDecoration(cells, type)
 
 exports.createCellHoverDecoration = createCellHoverDecoration;
 
-var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger, selected) {
-  return cells.map(function (cell) {
+var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
+  var table = (0, _utils.findTable)(tr.selection);
+
+  if (!table) {
+    return [];
+  }
+
+  var map = _tableMap.TableMap.get(table.node);
+
+  var _cells$reduce = cells.reduce(function (_ref, cell) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        min = _ref2[0],
+        max = _ref2[1];
+
+    if (min === null || cell.pos < min) {
+      min = cell.pos;
+    }
+
+    if (max === null || cell.pos > max) {
+      max = cell.pos;
+    }
+
+    return [min, max];
+  }, [null, null]),
+      _cells$reduce2 = (0, _slicedToArray2.default)(_cells$reduce, 2),
+      min = _cells$reduce2[0],
+      max = _cells$reduce2[1];
+
+  if (min === null || max === null) {
+    return [];
+  }
+
+  var updatedCells = cells.map(function (x) {
+    return x.pos;
+  }); // ED-15246 fixed trello card table overflow issue
+  // If columns / rows have been merged the hovered selection is different to the actual selection
+  // So If the table cells are in danger we want to create a "rectangle" selection
+  // to match the "clicked" selection
+
+  if (danger) {
+    var rect = map.rectBetween(min - table.start, max - table.start);
+    updatedCells = map.cellsInRect(rect).map(function (x) {
+      return x + table.start;
+    });
+  }
+
+  return updatedCells.map(function (pos) {
+    var cell = tr.doc.nodeAt(pos);
     var classes = [_types.TableCssClassName.HOVERED_CELL];
 
     if (danger) {
@@ -74,7 +124,7 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
         break;
     }
 
-    return _prosemirrorView.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+    return _prosemirrorView.Decoration.node(pos, pos + cell.nodeSize, {
       class: classes.join(' ')
     }, {
       key: key

package/dist/cjs/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -69,6 +69,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
         state: isChecked ? 'DONE' : 'TODO',
         localId: taskId
       });
+      tr.setMeta('scrollIntoView', false);
 
       _this.view.dispatch(tr);
     });

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

@@ -106,6 +106,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
           addPrefixTrigger: true,
           setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
         });
+        stopDefault = true;
         break;
 
       case 'Backspace':
@@ -167,7 +168,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
     return false;
   }, [onQueryFocus]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     if (!ref.current) {
       return;
     }
@@ -320,7 +321,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       }
     };
   }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
     if (ref.current && forceFocus) {

package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js

@@ -11,21 +11,19 @@ exports.TypeAheadList = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
 var _menu = require("@atlaskit/menu");
 
-var _TypeAheadListItem = require("./TypeAheadListItem");
-
-var _reactWindow = require("react-window");
+var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 
-var _useResizeObserver = require("./hooks/use-resize-observer");
+var _List = require("react-virtualized/dist/commonjs/List");
 
-var _useDynamicListHeightCalculation = require("./hooks/use-dynamic-list-height-calculation");
-
-var _DynamicHeightListItem = require("./DynamicHeightListItem");
+var _TypeAheadListItem = require("./TypeAheadListItem");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -48,29 +46,26 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
       intl = _ref.intl,
       fitHeight = _ref.fitHeight;
   var listRef = (0, _react.useRef)();
-  var redrawListAtIndex = (0, _react.useCallback)(function (index) {
-    listRef.current.resetAfterIndex(index);
-  }, []);
   var lastVisibleIndexes = (0, _react.useRef)({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
-    visibleStartIndex: 0,
-    visibleStopIndex: 0
+    startIndex: 0,
+    stopIndex: 0
   });
-  var getFirstVisibleIndex = (0, _react.useCallback)(function () {
-    return lastVisibleIndexes.current.overscanStartIndex;
-  }, []);
+  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
 
-  var _useDynamicListHeight = (0, _useDynamicListHeightCalculation.useDynamicListHeightCalculation)({
-    redrawListAtIndex: redrawListAtIndex,
-    getFirstVisibleIndex: getFirstVisibleIndex,
-    listLength: items.length,
-    listMaxHeight: fitHeight,
-    listItemEstimatedHeight: LIST_ITEM_ESTIMATED_HEIGHT
-  }),
-      getListItemHeight = _useDynamicListHeight.getListItemHeight,
-      setListItemHeight = _useDynamicListHeight.setListItemHeight,
-      renderedListHeight = _useDynamicListHeight.renderedListHeight;
+  var _useState = (0, _react.useState)(Math.min(estimatedHeight, fitHeight)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(new _CellMeasurer.CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+  })),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      cache = _useState4[0],
+      setCache = _useState4[1];
 
   var onItemsRendered = (0, _react.useCallback)(function (props) {
     lastVisibleIndexes.current = props;
@@ -101,58 +96,88 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
         var indexes = lastVisibleIndexes.current;
-        var isSelectedItemVisible = selectedIndex >= indexes.visibleStartIndex && selectedIndex <= indexes.visibleStopIndex;
+        var isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
 
         if (!isSelectedItemVisible) {
-          listRef.current.scrollToItem(selectedIndex);
+          listRef.current.scrollToRow(selectedIndex);
         }
       });
     });
-  }, [selectedIndex]);
-  (0, _react.useEffect)(function () {
+  }, [selectedIndex, lastVisibleIndexes]);
+  (0, _react.useLayoutEffect)(function () {
     if (!listRef.current) {
       return;
     }
 
-    listRef.current.scrollToItem(selectedIndex);
-  }, [selectedIndex]);
+    var indexes = lastVisibleIndexes.current;
+    var isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
+
+    if (!isSelectedItemVisible) {
+      listRef.current.scrollToRow(selectedIndex);
+    }
+  }, [selectedIndex, lastVisibleIndexes]);
   (0, _react.useLayoutEffect)(function () {
-    requestAnimationFrame(function () {
-      listRef.current.resetAfterIndex(lastVisibleIndexes.current.overscanStartIndex);
-    });
+    setCache(new _CellMeasurer.CellMeasurerCache({
+      fixedWidth: true,
+      defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+    }));
   }, [items]);
+  (0, _react.useLayoutEffect)(function () {
+    var height = Math.min(items.reduce(function (prevValue, currentValue, index) {
+      return prevValue + cache.rowHeight({
+        index: index
+      });
+    }, 0), fitHeight);
+    setHeight(height);
+  }, [items, cache, fitHeight]);
+
+  var renderRow = function renderRow(_ref3) {
+    var index = _ref3.index,
+        key = _ref3.key,
+        style = _ref3.style,
+        parent = _ref3.parent;
+    return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, (0, _react2.jsx)("div", {
+      style: style,
+      "data-index": index
+    }, (0, _react2.jsx)("div", {
+      "data-testid": "list-item-height-observed-".concat(index)
+    }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
+      key: items[index].title,
+      item: items[index],
+      itemIndex: index,
+      selectedIndex: selectedIndex,
+      onItemClick: actions.onItemClick,
+      onItemHover: actions.onItemHover
+    }))));
+  };
 
   if (!Array.isArray(items)) {
     return null;
   }
 
-  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
-  var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
   return (0, _react2.jsx)(_menu.MenuGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
-  }, (0, _react2.jsx)(_useResizeObserver.ResizeObserverProvider, null, (0, _react2.jsx)(_DynamicHeightListItem.UpdateListItemHeightContext.Provider, {
-    value: setListItemHeight
-  }, (0, _react2.jsx)(_DynamicHeightListItem.ListItemActionsContext.Provider, {
-    value: actions
-  }, (0, _react2.jsx)(_DynamicHeightListItem.SelectedIndexContext.Provider, {
-    value: selectedIndex
-  }, (0, _react2.jsx)(_reactWindow.VariableSizeList, {
-    useIsScrolling: true,
+  }, (0, _react2.jsx)(_List.List, {
+    rowRenderer: renderRow,
     ref: listRef,
-    itemData: items,
-    itemCount: items.length,
-    estimatedItemSize: LIST_ITEM_ESTIMATED_HEIGHT,
-    onScroll: onScroll,
-    onItemsRendered: onItemsRendered,
-    itemSize: getListItemHeight,
+    rowCount: items.length,
+    rowHeight: cache.rowHeight,
+    onRowsRendered: onItemsRendered,
     width: LIST_WIDTH,
+    onScroll: onScroll,
     height: height,
-    overscanCount: 3,
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    button {\n                      padding: 12px 12px 11px;\n\n                      span:last-child span:last-child {\n                        white-space: normal;\n                      }\n                    }\n                  "])))
-  }, _DynamicHeightListItem.DynamicHeightListItem))))));
+    overscanRowCount: 3,
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            button {\n              padding: 12px 12px 11px;\n              span:last-child span:last-child {\n                white-space: normal;\n              }\n            }\n          "])))
+  }));
 });
 
 var TypeAheadList = (0, _reactIntlNext.injectIntl)(TypeAheadListComponent);

package/dist/cjs/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -167,7 +167,7 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
     return setFitHeight(minFitHeight);
   }, [anchorElement, popupsMountPoint]);
   var getFitHeightDebounced = (0, _rafSchd.default)(getFitHeight);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     var scrollableElement = popupsScrollableElement || (0, _ui.findOverflowScrollParent)(anchorElement);
     getFitHeight();
     window.addEventListener('resize', getFitHeightDebounced);

package/dist/cjs/ui/Addon/ClickAreaBlock/index.js

@@ -53,13 +53,18 @@ var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
-      var view = _this.props.editorView;
+      var _this$props = _this.props,
+          view = _this$props.editorView,
+          editorDisabled = _this$props.editorDisabled;
 
       if (!view) {
         return;
       }
 
-      (0, _clickAreaHelper.clickAreaClickHandler)(view, event);
+      if (!editorDisabled) {
+        // if the editor is disabled -- we don't want to intercept any click events
+        (0, _clickAreaHelper.clickAreaClickHandler)(view, event);
+      }
     });
     return _this;
   }

package/dist/cjs/ui/Addon/ClickAreaMobile/index.js

@@ -77,13 +77,19 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clickElementRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
-      var view = _this.props.editorView;
+      var _this$props = _this.props,
+          view = _this$props.editorView,
+          editorDisabled = _this$props.editorDisabled;
 
       if (!view) {
         return;
       }
 
-      (0, _clickAreaHelper.clickAreaClickHandler)(view, event);
+      if (!editorDisabled) {
+        // if the editor is disabled -- we don't want to intercept any click events
+        (0, _clickAreaHelper.clickAreaClickHandler)(view, event);
+      }
+
       var scrollGutterClicked = event.clientY > view.dom.getBoundingClientRect().bottom; // Reset the default prosemirror scrollIntoView logic by
       // clamping the scroll position to the bottom of the viewport.
 

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -89,19 +89,15 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Editor);
 
-  function Editor() {
+  // Wrapper container for toolbar and content area
+  function Editor(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, Editor);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "appearance", 'comment');
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerElement", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperElement", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperElementRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSave", function () {
       if (_this.props.editorView && _this.props.onSave) {
         _this.props.onSave(_this.props.editorView);
@@ -145,9 +141,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("div", {
         css: [commentEditorStyle, (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              min-height: ", "px;\n            "])), minHeight)],
         className: "akEditor",
-        ref: function ref(_ref4) {
-          return _this.wrapperElement = _ref4;
-        }
+        ref: _this.wrapperElementRef
       }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
         useStickyToolbar: useStickyToolbar
       }, (0, _react2.jsx)(_Toolbar.default, {
@@ -166,7 +160,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       }), (0, _react2.jsx)("div", {
         css: _Toolbar2.mainToolbarCustomComponentsSlotStyle
       }, customPrimaryToolbarComponents)), (0, _react2.jsx)(_Addon.ClickAreaBlock, {
-        editorView: editorView
+        editorView: editorView,
+        editorDisabled: disabled
       }, (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref2) {
         var width = _ref2.width;
         return (0, _react2.jsx)(ContentArea, {
@@ -190,7 +185,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           popupsScrollableElement: popupsScrollableElement,
           containerElement: _this.containerElement,
           disabled: !!disabled,
-          wrapperElement: _this.wrapperElement
+          wrapperElement: _this.wrapperElementRef.current
         }), editorDOMElement);
       })), (0, _react2.jsx)(_WidthEmitter.default, {
         editorView: editorView
@@ -212,6 +207,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         }
       }), customSecondaryToolbarComponents));
     });
+
+    if (props.innerRef) {
+      _this.wrapperElementRef = props.innerRef;
+    }
+
     return _this;
   }
 

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -48,16 +48,12 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(FullPageEditor);
 
-  function FullPageEditor() {
+  // Wrapper container for toolbar and content area
+  function FullPageEditor(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, FullPageEditor);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       showKeyline: false
     });
@@ -100,6 +96,11 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function () {
       _this.updateToolbarKeyline();
     });
+
+    if (props.innerRef) {
+      _this.wrapperElementRef = props.innerRef;
+    }
+
     return _this;
   }
 

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -47,7 +47,8 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
         ref: props.scrollContainerRef,
         className: "fabric-editor-popup-scroll-parent"
       }, (0, _react.jsx)(_Addon.ClickAreaBlock, {
-        editorView: props.editorView
+        editorView: props.editorView,
+        editorDisabled: props.disabled
       }, (0, _react.jsx)("div", {
         css: (0, _StyledComponents.editorContentAreaStyle)({
           fullWidthMode: fullWidthMode,

package/dist/cjs/ui/Appearance/Mobile.js

@@ -17,11 +17,13 @@ function Mobile(_ref) {
   var editorView = _ref.editorView,
       maxHeight = _ref.maxHeight,
       persistScrollGutter = _ref.persistScrollGutter,
-      editorDOMElement = _ref.editorDOMElement;
+      editorDOMElement = _ref.editorDOMElement,
+      disabled = _ref.disabled;
   return /*#__PURE__*/_react.default.createElement(_Mobile.MobileAppearance, {
     editorView: editorView || null,
     maxHeight: maxHeight,
-    persistScrollGutter: persistScrollGutter
+    persistScrollGutter: persistScrollGutter,
+    editorDisabled: disabled
   }, editorDOMElement, editorView && /*#__PURE__*/_react.default.createElement(_WidthEmitter.default, {
     editorView: editorView
   }));

package/dist/cjs/ui/AppearanceComponents/Mobile.js

@@ -39,9 +39,9 @@ ContentArea.displayName = 'ContentArea';
 
 function MobileAppearance(_ref) {
   var editorView = _ref.editorView,
-      maxHeight = _ref.maxHeight,
       persistScrollGutter = _ref.persistScrollGutter,
-      children = _ref.children;
+      children = _ref.children,
+      editorDisabled = _ref.editorDisabled;
   var render = (0, _react.useCallback)(function (_ref2) {
     var maxContentSize = _ref2.maxContentSize,
         mobileDimensions = _ref2.mobileDimensions;
@@ -81,11 +81,12 @@ function MobileAppearance(_ref) {
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
-      isExpanded: currentIsExpanded
+      isExpanded: currentIsExpanded,
+      editorDisabled: editorDisabled
     }, (0, _react2.jsx)(ContentArea, null, (0, _react2.jsx)("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, editorView, persistScrollGutter]);
+  }, [children, editorView, persistScrollGutter, editorDisabled]);
   return (0, _react2.jsx)(_WithPluginState.default, {
     plugins: {
       maxContentSize: _maxContentSize.pluginKey,