@atlaskit/editor-core 151.2.0 → 152.0.1

package/dist/esm/plugins/table/commands/insert.js

@@ -22,7 +22,7 @@ function addColumnAtCustomStep(column) {
   };
 }
 
-function addColumnAt(column) {
+export function addColumnAt(column) {
   var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var view = arguments.length > 2 ? arguments[2] : undefined;
   return function (tr) {
@@ -46,7 +46,6 @@ function addColumnAt(column) {
 } // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 
-
 export var addColumnBefore = function addColumnBefore(state, dispatch, view) {
   var table = findTable(state.selection);
 

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

@@ -48,7 +48,8 @@ var tablesPlugin = function tablesPlugin(options) {
       return [{
         name: 'table',
         plugin: function plugin(_ref) {
-          var dispatch = _ref.dispatch,
+          var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+              dispatch = _ref.dispatch,
               portalProviderAPI = _ref.portalProviderAPI,
               eventDispatcher = _ref.eventDispatcher;
 
@@ -59,7 +60,7 @@ var tablesPlugin = function tablesPlugin(options) {
               breakoutEnabled = _ref2.breakoutEnabled,
               tableOptions = _ref2.tableOptions;
 
-          return createPlugin(dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
         }
       }, {
         name: 'tablePMColResizing',

package/dist/esm/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -1,7 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { tableCellBorderWidth } from '@atlaskit/editor-common';
 import { ShadowEvent, TableCssClassName as ClassName } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
@@ -63,7 +62,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
         }, {
           threshold: [0, 1],
           root: _this.wrapper,
-          rootMargin: "0px ".concat(tableInsertColumnButtonSize / 2 - tableCellBorderWidth, "px 0px 0px")
+          rootMargin: "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
         });
         return;
       }

package/dist/esm/plugins/table/pm-plugins/main.js

@@ -16,7 +16,7 @@ import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plu
 import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
 import { findControlsHoverDecoration, updateResizeHandles } from '../utils';
-import { INPUT_METHOD } from '../../analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
 import TableCellNodeView from '../nodeviews/tableCell';
@@ -24,7 +24,7 @@ var isBreakoutEnabled;
 var isDynamicTextSizingEnabled;
 var isFullWidthModeEnabled;
 var wasFullWidthModeEnabled;
-export var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispatcher, pluginConfig, dynamicTextSizing, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) {
+export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, dynamicTextSizing, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) {
   var _window;
 
   isBreakoutEnabled = breakoutEnabled;
@@ -56,7 +56,9 @@ export var createPlugin = function createPlugin(dispatch, portalProviderAPI, eve
     tableHeader: function tableHeader(node, view, getPos) {
       return new TableCellNodeView(node, view, getPos, observer);
     }
-  } : {};
+  } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
+
+  var invalidTableIds = [];
   return new Plugin({
     state: state,
     key: pluginKey,
@@ -65,6 +67,27 @@ export var createPlugin = function createPlugin(dispatch, portalProviderAPI, eve
         return tr.getMeta('uiEvent') === 'cut';
       });
 
+      function reportInvalidTableCellSpanAttrs(invalidNodeAttr) {
+        if (invalidTableIds.find(function (id) {
+          return id === invalidNodeAttr.tableLocalId;
+        })) {
+          return;
+        }
+
+        invalidTableIds.push(invalidNodeAttr.tableLocalId);
+        dispatchAnalyticsEvent({
+          action: ACTION.INVALID_DOCUMENT_ENCOUNTERED,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            nodeType: invalidNodeAttr.nodeType,
+            reason: "".concat(invalidNodeAttr.attribute, ": ").concat(invalidNodeAttr.reason),
+            tableLocalId: invalidNodeAttr.tableLocalId,
+            spanValue: invalidNodeAttr.spanValue
+          }
+        });
+      }
+
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
         var updatedTr = handleCut(tr, oldState, newState);
@@ -74,7 +97,7 @@ export var createPlugin = function createPlugin(dispatch, portalProviderAPI, eve
       if (transactions.find(function (tr) {
         return tr.docChanged;
       })) {
-        return fixTables(newState.tr);
+        return fixTables(newState.tr, reportInvalidTableCellSpanAttrs);
       }
     },
     view: function view(editorView) {

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/colgroup.js

@@ -10,9 +10,9 @@ export var generateColgroup = function generateColgroup(table) {
       // We slice here to guard against our colwidth array having more entries
       // Than the we actually span. We'll patch the document at a later point.
       cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
-        cols.push(['col', {
+        cols.push(['col', width ? {
           style: "width: ".concat(width, "px;")
-        }]);
+        } : {}]);
       });
     } else {
       // When we have merged cells on the first row (firstChild),

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -41,6 +41,7 @@ export var getResizeState = function getResizeState(_ref) {
       cols: _cols,
       widths: _widths,
       maxSize: maxSize,
+      tableWidth: _tableWidth,
       overflow: _overflow
     };
   } // Getting the resize state from DOM
@@ -62,6 +63,7 @@ export var getResizeState = function getResizeState(_ref) {
     cols: cols,
     widths: widths,
     maxSize: maxSize,
+    tableWidth: tableWidth,
     overflow: overflow
   };
 }; // updates Colgroup DOM node with new widths

package/dist/esm/plugins/table/transforms/column-width.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
@@ -115,7 +116,10 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
   };
 };
 /**
- * This function is called when user inserts/deletes a column in a table to rescale all columns.
+ * This function is called when user inserts/deletes a column in a table to;
+ * - rescale all columns (if the table did not overflow before the insertion)
+ * - and update column widths.
+ *
  * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
  * @param table
  * @param view
@@ -124,6 +128,8 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
 
 export var rescaleColumns = function rescaleColumns(table, view) {
   return function (tr) {
+    // If the table has been not been resized we skip updating the size
+    // of columns here.
     if (!view || !hasTableBeenResized(table.node)) {
       return tr;
     }
@@ -137,7 +143,8 @@ export var rescaleColumns = function rescaleColumns(table, view) {
       return tr;
     }
 
-    var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+    var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
+
     var maxSize = getTableMaxWidth({
       table: table.node,
       tableStart: table.start,
@@ -153,8 +160,11 @@ export var rescaleColumns = function rescaleColumns(table, view) {
       domAtPos: domAtPos,
       maxSize: maxSize
     });
+    var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
+    var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
+    // we resize the cells to avoid the overflow occuring
 
-    if (resizeState.overflow) {
+    if (tableDidntPreviouslyOverflow && resizeState.overflow) {
       resizeState = scaleTableTo(resizeState, maxSize);
     }
 

package/dist/esm/plugins/table/transforms/fix-tables.js

@@ -20,6 +20,34 @@ export var fireAnalytics = function fireAnalytics() {
       user: '-'
     }]
   });
+};
+
+var validateTableCellNodeAttrs = function validateTableCellNodeAttrs(_ref, reportInvalidTableCellSpanAttrs) {
+  var colspan = _ref.colspan,
+      rowspan = _ref.rowspan,
+      tableLocalId = _ref.tableLocalId;
+
+  if (colspan && colspan < 0) {
+    reportInvalidTableCellSpanAttrs({
+      nodeType: 'tableCell',
+      attribute: 'colspan',
+      reason: 'negative value',
+      tableLocalId: tableLocalId,
+      spanValue: colspan
+    });
+  }
+
+  if (rowspan && rowspan < 0) {
+    reportInvalidTableCellSpanAttrs({
+      nodeType: 'tableCell',
+      attribute: 'rowspan',
+      reason: 'negative value',
+      tableLocalId: tableLocalId,
+      spanValue: rowspan
+    });
+  }
+
+  return;
 }; // We attempt to patch the document when we have extra, unneeded, column widths
 // Take this node for example:
 //
@@ -28,12 +56,22 @@ export var fireAnalytics = function fireAnalytics() {
 // This row only spans two columns, yet it contains widths for 3.
 // We remove the third width here, assumed duplicate content.
 
-export var removeExtraneousColumnWidths = function removeExtraneousColumnWidths(node, basePos, tr) {
+
+export var removeExtraneousColumnWidths = function removeExtraneousColumnWidths(node, basePos, tr, reportInvalidTableCellSpanAttrs) {
   var hasProblems = false;
   tr = replaceCells(tr, node, basePos, function (cell) {
     var _cell$attrs = cell.attrs,
         colwidth = _cell$attrs.colwidth,
-        colspan = _cell$attrs.colspan;
+        colspan = _cell$attrs.colspan,
+        rowspan = _cell$attrs.rowspan;
+
+    if (reportInvalidTableCellSpanAttrs) {
+      validateTableCellNodeAttrs({
+        colspan: colspan,
+        rowspan: rowspan,
+        tableLocalId: node.attrs.localId
+      }, reportInvalidTableCellSpanAttrs);
+    }
 
     if (colwidth && colwidth.length > colspan) {
       hasProblems = true;
@@ -54,12 +92,12 @@ export var removeExtraneousColumnWidths = function removeExtraneousColumnWidths(
 
   return false;
 };
-export var fixTables = function fixTables(tr) {
+export var fixTables = function fixTables(tr, reportInvalidTableCellSpanAttrs) {
   var hasProblems = false;
   tr.doc.descendants(function (node, pos) {
     if (node.type.name === 'table') {
       // in the unlikely event of having to fix multiple tables at the same time
-      hasProblems = removeExtraneousColumnWidths(node, tr.mapping.map(pos), tr);
+      hasProblems = removeExtraneousColumnWidths(node, tr.mapping.map(pos), tr, reportInvalidTableCellSpanAttrs);
     }
   });
 

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

@@ -114,8 +114,9 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
         title: labelCellOptions,
         onClick: this.handleClick,
         iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
-          label: labelCellOptions
-        })
+          label: ""
+        }),
+        "aria-label": labelCellOptions
       }));
       var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
 

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -460,6 +460,7 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
       }, /*#__PURE__*/React.createElement(DropdownMenu, {
         mountTo: mountPoint,

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

@@ -12,7 +12,7 @@ import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles.css';
 var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n  }\n}\n");
-var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 0px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n  }\n  &.").concat(ClassName.WITH_CONTROLS, " {\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n    }\n  }\n}");
+var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n  }\n  &.").concat(ClassName.WITH_CONTROLS, " {\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n    }\n  }\n}");
 export var tableStyles = 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    .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    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\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    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\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    :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      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        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        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: ", "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-top: ", "px;\n      margin-top: -", "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"])), ClassName.LAYOUT_BUTTON, N20A, N300, ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, B300, tableSharedStyle, columnControlsLineMarker, 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, 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, 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, function (props) {
   var _props$featureFlags;
 

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

@@ -1,4 +1,4 @@
-import { B100, B300, B75, N0, N20, R50, R300, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { B100, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -28,7 +28,7 @@ export var tableCellSelectedColor = B75;
 export var tableToolbarSelectedColor = B100;
 export var tableBorderSelectedColor = B300;
 export var tableCellDeleteColor = R50;
-export var tableBorderDeleteColor = R300;
+export var tableBorderDeleteColor = R400;
 export var tableToolbarDeleteColor = R75;
 export var tableBorderRadiusSize = 3;
 export var tablePadding = 8;

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

@@ -32,7 +32,7 @@ export default defineMessages({
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this table will also remove all of the data contained in any connected charts.',
+    defaultMessage: 'Removing this table will break all the charts connected to it.',
     description: 'Message for confirm modal when deleting a table linked to an extension.'
   }
 });

package/dist/esm/plugins/tasks-and-decisions/nodeviews/decisionItem.js

@@ -71,7 +71,7 @@ var Decision = /*#__PURE__*/function (_ReactNodeView) {
     value: function update(node, decorations) {
       var _this = this;
 
-      return _get(_getPrototypeOf(Decision.prototype), "update", this).call(this, node, decorations, // Toggle the placeholder based on whether user input exists.
+      return _get(_getPrototypeOf(Decision.prototype), "update", this).call(this, node, decorations, undefined, // Toggle the placeholder based on whether user input exists.
       function (_currentNode, _newNode) {
         return !_this.isContentEmpty(_newNode);
       });

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

@@ -151,7 +151,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
     value: function update(node, decorations) {
       var _this3 = this;
 
-      return _get(_getPrototypeOf(Task.prototype), "update", this).call(this, node, decorations, function (currentNode, newNode) {
+      return _get(_getPrototypeOf(Task.prototype), "update", this).call(this, node, decorations, undefined, function (currentNode, newNode) {
         return (// Toggle the placeholder based on whether user input exists
           !_this3.isContentEmpty(newNode) && !!(currentNode.attrs.state === newNode.attrs.state)
         );

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

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
-import { nodesBetweenChanged } from '../../../utils';
+import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
 import { decisionItemNodeView } from '../nodeviews/decisionItem';
 import { taskItemNodeViewFactory } from '../nodeviews/taskItem';
@@ -145,9 +145,9 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
                 rest = _objectWithoutProperties(_node$attrs, ["localId"]);
 
             if (localId === undefined || localId === null || localId === '') {
-              tr.setNodeMarkup(pos, undefined, _objectSpread({
+              tr.step(new SetAttrsStep(pos, _objectSpread({
                 localId: uuid.generate()
-              }, rest));
+              }, rest)));
               modified = true;
             }
           }

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

@@ -238,7 +238,8 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
-        selectedColor: pluginState.color
+        selectedColor: pluginState.color,
+        isShowingMoreColors: isShowingMoreColors
       })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
         appearance: "subtle",
         onClick: this.handleShowMoreToggle,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
 import WithPluginState from '../../ui/WithPluginState';
 import { plugin as textFormattingPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
-import { plugin as clearFormattingPlugin } from './pm-plugins/clear-formatting';
+import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
 import textFormattingCursorPlugin from './pm-plugins/cursor';
 import textFormattingInputRulePlugin from './pm-plugins/input-rule';
@@ -88,7 +88,8 @@ var textFormatting = function textFormatting() {
           disabled = _ref6.disabled;
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
-          textFormattingState: textFormattingPluginKey
+          textFormattingState: textFormattingPluginKey,
+          clearFormattingPluginState: clearFormattingPluginKey
         },
         render: function render() {
           return /*#__PURE__*/React.createElement(Toolbar, {

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
 import { themed } from '@atlaskit/theme/components';
 import { ThemeProvider } from 'styled-components';

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

@@ -4,7 +4,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,38 +1,78 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
+import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
+import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarCustomComponentsSlot } from './MainToolbar';
+import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 export var FullPageToolbar = /*#__PURE__*/React.memo(function (props) {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      shouldSplitToolbar = _useState2[0],
+      setShouldSplitToolbar = _useState2[1];
+
+  var nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    items: props.primaryToolbarComponents,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth
+  }));
+  var customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+    beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
+    inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    editorView: props.editorView,
+    containerElement: props.containerElement,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+  }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
+  useEffect(function () {
+    var _props$featureFlags6;
+
+    if ((_props$featureFlags6 = props.featureFlags) !== null && _props$featureFlags6 !== void 0 && _props$featureFlags6.twoLineEditorToolbar) {
+      var updateOnResize = function updateOnResize() {
+        setShouldSplitToolbar(window.innerWidth <= MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT);
+      };
+
+      window.addEventListener('resize', updateOnResize);
+      updateOnResize();
+      return function () {
+        return window.removeEventListener('resize', updateOnResize);
+      };
+    }
+  });
   return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref) {
-    var _props$featureFlags;
+    var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     var contextPanelWidth = _ref.width;
     return /*#__PURE__*/React.createElement(MainToolbar, {
       "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0
-    }, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
-      editorView: props.editorView,
-      editorActions: props.editorActions,
-      eventDispatcher: props.eventDispatcher,
-      providerFactory: props.providerFactory,
-      appearance: props.appearance,
-      items: props.primaryToolbarComponents,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsScrollableElement: props.popupsScrollableElement,
-      disabled: props.disabled,
-      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-      containerElement: props.containerElement,
-      hasMinWidth: props.hasMinWidth
-    }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, {
-      "data-testid": 'avatar-group-outside-plugin'
-    }, (props === null || props === void 0 ? void 0 : (_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
-      editorView: props.editorView,
-      eventDispatcher: props.eventDispatcher,
-      inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,
-      inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
-      isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected
-    }), props.customPrimaryToolbarComponents));
+      showKeyline: props.showKeyline || contextPanelWidth > 0,
+      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
+    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+      "data-testid": 'avatar-group-outside-plugin',
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
 });

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -1,19 +1,32 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 import styled from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56;
-export var MainToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
+export var MainToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
   return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';
-}, akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, akEditorMobileMaxWidth, toolbarLineHeight);
+}, akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        flex-wrap: wrap;\n        height: calc(".concat(toolbarLineHeight, "px * 2);\n      ");
+}, akEditorMobileMaxWidth, toolbarLineHeight);
 MainToolbar.displayName = 'MainToolbar';
 export var MainToolbarIconBefore = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), gridSize() * 2, gridSize() * 4, gridSize() * 4, akEditorMobileMaxWidth);
 MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export var MainToolbarCustomComponentsSlot = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), akEditorMobileMaxWidth);
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
-export var SecondaryToolbar = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
-SecondaryToolbar.displayName = 'SecondaryToolbar';
+export var MainToolbarFirstChild = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        flex: 1 1 100%;\n        height: ".concat(toolbarLineHeight, "px;\n        justify-content: flex-end;\n        // ED-10241: We add fit-content to ensure that MainToolbar does not\n        // shrink more than the size of its contents. This will prevent the\n        // find/replace icon from being overlapped during a confluence\n        // publish operation\n        min-width: fit-content;\n      ");
+}, akEditorMobileMaxWidth);
+MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
+export var MainToolbarSecondChild = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    ", "\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        display: flex;\n        flex-grow: 1;\n        flex: 1 1 100%;\n        margin: auto;\n        height: ".concat(toolbarLineHeight, "px;\n        min-width: 0;\n      ");
+});
+MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
+export var SecondaryToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
+SecondaryToolbar.displayName = 'SecondaryToolbar';
+export var NonCustomToolbarWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
+NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
+export var CustomToolbarWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
+CustomToolbarWrapper.displayName = 'CustomToolbar';