@atlaskit/editor-core 171.0.0 → 172.0.1

package/dist/esm/plugins/media/toolbar/index.js

@@ -28,6 +28,7 @@ import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
+import { getCopyButtonConfig, showCopyButton } from '../../copy-button/toolbar';
 
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -95,7 +96,9 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     title: intl.formatMessage(messages.download)
   }, {
     type: 'separator'
-  }, {
+  }].concat(_toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, mediaGroup), {
+    type: 'separator'
+  }] : []), [{
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -107,7 +110,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     title: intl.formatMessage(commonMessages.remove),
     onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
-  }];
+  }]);
   return items;
 };
 
@@ -159,7 +162,9 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
     title: intl.formatMessage(messages.download)
   }, {
     type: 'separator'
-  }, {
+  }].concat(_toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, mediaInline), {
+    type: 'separator'
+  }] : []), [{
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -171,7 +176,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
     title: intl.formatMessage(commonMessages.remove),
     onClick: removeInlineCard,
     testId: 'media-toolbar-remove-button'
-  }];
+  }]);
   return items;
 };
 
@@ -257,7 +262,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     onClick: remove,
     testId: 'media-toolbar-remove-button'
   };
-  var items = [].concat(_toConsumableArray(toolbarButtons), [removeButton]);
+  var items = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, mediaSingle), {
+    type: 'separator'
+  }] : []), [removeButton]);
   return items;
 };
 

package/dist/esm/plugins/mentions/analytics.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 import { isSpecialMention } from '@atlaskit/mention/resource';
-import { name as packageName, version as packageVersion } from '../../version.json';
+import { name as packageName, version as packageVersion } from '../../version-wrapper';
 import { isTeamType } from './utils';
 var componentName = 'mention';
 export var buildAnalyticsPayload = function buildAnalyticsPayload(actionSubject, action, eventType, sessionId) {

package/dist/esm/plugins/panel/toolbar.js

@@ -24,7 +24,7 @@ import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/utils';
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, PanelType.INFO, {
   shortName: ':info:',
   id: 'atlassian-info'

package/dist/esm/plugins/paste/edge-cases/index.js

@@ -1,9 +1,13 @@
+import { findParentNodeOfType } from 'prosemirror-utils';
 import { insertSliceIntoRangeSelectionInsideList, insertSliceInsideOfPanelNodeSelected, insertSliceAtNodeEdge, insertSliceIntoEmptyNode } from './lists';
 import { isListNode } from '../../list/utils/node';
 import { isSelectionInsidePanel, isEmptyNode, isCursorSelectionAtTextStartOrEnd } from '../util';
 export function insertSliceForLists(_ref) {
+  var _slice$content$firstC;
+
   var tr = _ref.tr,
-      slice = _ref.slice;
+      slice = _ref.slice,
+      schema = _ref.schema;
   var selection = tr.selection,
       _tr$selection = tr.selection,
       $to = _tr$selection.$to,
@@ -37,9 +41,17 @@ export function insertSliceForLists(_ref) {
       tr: tr,
       slice: slice
     });
-  }
+  } // When pasting a single list item into an action or decision, we skip the special "insert at node edge"
+  // logic so that prosemirror pastes the list's content into the action/decision, rather than
+  // pasting a whole list node directly after the action/decision item. (But we still preserve the
+  // existing "insert at" node edge" behaviour if dealing with a list with more than one item, so that
+  // it still inserts whole list node after the action/decision item).
+
+
+  var pastingIntoActionOrDecision = Boolean(findParentNodeOfType([schema.nodes.taskList, schema.nodes.decisionList])(selection));
+  var oneListItem = slice.content.childCount === 1 && isListNode(slice.content.firstChild) && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.childCount) === 1;
 
-  if (isCursorSelectionAtTextStartOrEnd(selection)) {
+  if (!(pastingIntoActionOrDecision && oneListItem) && isCursorSelectionAtTextStartOrEnd(selection)) {
     return insertSliceAtNodeEdge({
       tr: tr,
       slice: slice

package/dist/esm/plugins/paste/handlers.js

@@ -111,6 +111,25 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
       dispatch(tr);
     }
 
+    return true;
+  };
+}
+export function handlePastePanelIntoList(slice) {
+  return function (state, dispatch) {
+    var schema = state.schema,
+        tr = state.tr;
+    var selection = tr.selection; // Check this pasting action is related to copy content from panel node into a selected the list node
+
+    var selectionParentListNode = selection.$to.node(selection.$to.depth - 1);
+    var panelNode = slice.content.firstChild;
+
+    if (!dispatch || !selectionParentListNode || (selectionParentListNode === null || selectionParentListNode === void 0 ? void 0 : selectionParentListNode.type) !== schema.nodes.listItem || !panelNode || (panelNode === null || panelNode === void 0 ? void 0 : panelNode.type) !== schema.nodes.panel || (panelNode === null || panelNode === void 0 ? void 0 : panelNode.content.firstChild) === undefined) {
+      return false;
+    } // Paste the panel node contents extracted instead of pasting the entire panel node
+
+
+    tr.replaceSelection(slice).scrollIntoView();
+    dispatch(tr);
     return true;
   };
 } // If we paste a link onto some selected text, apply the link as a mark
@@ -678,7 +697,8 @@ export function handleRichText(slice) {
         heading = _state$schema$nodes2.heading,
         paragraph = _state$schema$nodes2.paragraph,
         panel = _state$schema$nodes2.panel;
-    var selection = state.selection;
+    var selection = state.selection,
+        schema = state.schema;
     var firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild;
     var lastChildOfSlice = (_slice$content2 = slice.content) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.lastChild; // In case user is pasting inline code,
     // any backtick ` immediately preceding it should be removed.
@@ -709,7 +729,8 @@ export function handleRichText(slice) {
     if (isSliceContentListNodes || isTargetPanelEmpty) {
       insertSliceForLists({
         tr: tr,
-        slice: slice
+        slice: slice,
+        schema: schema
       });
     } else if (noNeedForSafeInsert) {
       tr.replaceSelection(slice);

package/dist/esm/plugins/paste/pm-plugins/analytics.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { ACTION, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, PasteTypes, PasteContents, withAnalytics } from '../../analytics';
 import { getPasteSource } from '../util';
-import { handlePasteAsPlainText, handlePasteIntoTaskOrDecisionOrPanel, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText, handlePasteIntoCaption } from '../handlers';
+import { handlePasteAsPlainText, handlePasteIntoTaskOrDecisionOrPanel, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText, handlePasteIntoCaption, handlePastePanelIntoList } from '../handlers';
 import { pipe } from '../../../utils';
 import { findParentNode } from 'prosemirror-utils';
 import { mapSlice } from '../../../utils/slice';
@@ -252,6 +252,11 @@ export var handleRichTextWithAnalytics = function handleRichTextWithAnalytics(vi
     type: PasteTypes.richText
   }))(slice);
 };
+export var handlePastePanelIntoListWithAnalytics = function handlePastePanelIntoListWithAnalytics(view, event, slice) {
+  return pipe(handlePastePanelIntoList, pasteCommandWithAnalytics(view, event, slice, {
+    type: PasteTypes.richText
+  }))(slice);
+};
 export var handleExpandWithAnalytics = function handleExpandWithAnalytics(view, event, slice) {
   return pipe(handleExpandPasteInTable, pasteCommandWithAnalytics(view, event, slice, {
     type: PasteTypes.richText
@@ -268,7 +273,11 @@ export var handlePasteLinkOnSelectedTextWithAnalytics = function handlePasteLink
     hyperlinkPasteOnText: true
   }))(slice);
 };
-export var createPasteMeasurePayload = function createPasteMeasurePayload(view, duration, content) {
+export var createPasteMeasurePayload = function createPasteMeasurePayload(_ref) {
+  var view = _ref.view,
+      duration = _ref.duration,
+      content = _ref.content,
+      distortedDuration = _ref.distortedDuration;
   var pasteIntoNode = getActionSubjectId(view);
   return {
     action: ACTION.PASTED_TIMED,
@@ -277,7 +286,8 @@ export var createPasteMeasurePayload = function createPasteMeasurePayload(view,
     attributes: {
       pasteIntoNode: pasteIntoNode,
       content: content,
-      time: duration
+      time: duration,
+      distortedDuration: distortedDuration
     }
   };
 };

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

@@ -14,7 +14,7 @@ import { linkifyContent } from '../../hyperlink/utils';
 import { transformSliceNestedExpandToExpand } from '../../expand/utils';
 import { handleMacroAutoConvert, handleMention, handleParagraphBlockMarks } from '../handlers';
 import { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '../../code-block/utils';
-import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent, handlePasteIntoCaptionWithAnalytics } from './analytics';
+import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent, handlePasteIntoCaptionWithAnalytics, handlePastePanelIntoListWithAnalytics } from './analytics';
 import { analyticsPluginKey, PasteTypes } from '../../analytics';
 import { insideTable, measurements } from '../../../utils';
 import { measureRender } from '@atlaskit/editor-common/utils';
@@ -168,8 +168,15 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
           var content = getContentNodeTypes(slice.content);
           var pasteId = uuid();
           var measureName = "".concat(measurements.PASTE, "_").concat(pasteId);
-          measureRender(measureName, function (duration) {
-            var payload = createPasteMeasurePayload(view, duration, content);
+          measureRender(measureName, function (_ref) {
+            var duration = _ref.duration,
+                distortedDuration = _ref.distortedDuration;
+            var payload = createPasteMeasurePayload({
+              view: view,
+              duration: duration,
+              content: content,
+              distortedDuration: distortedDuration
+            });
 
             if (payload) {
               dispatchAnalyticsEvent(payload);
@@ -222,7 +229,15 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
         var markdownSlice;
 
         if (isPlainText) {
-          markdownSlice = getMarkdownSlice(text, slice.openStart, slice.openEnd);
+          var _markdownSlice;
+
+          markdownSlice = getMarkdownSlice(text, slice.openStart, slice.openEnd); // https://product-fabric.atlassian.net/browse/ED-15134
+          // Lists are not allowed within Blockquotes at this time. Attempting to
+          // paste a markdown list ie. ">- foo" will yeild a markdownSlice of size 0.
+          // Rather then blocking the paste action with no UI feedback, this will instead
+          // force a "paste as plain text" action by clearing the markdownSlice.
+
+          markdownSlice = !((_markdownSlice = markdownSlice) !== null && _markdownSlice !== void 0 && _markdownSlice.size) ? undefined : markdownSlice;
 
           if (markdownSlice) {
             // linkify text prior to converting to macro
@@ -351,6 +366,10 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
             return true;
           }
 
+          if (handlePastePanelIntoListWithAnalytics(view, event, slice)(state, dispatch)) {
+            return true;
+          }
+
           return handleRichTextWithAnalytics(view, event, slice)(state, dispatch);
         }
 

package/dist/esm/plugins/status/analytics.js

@@ -4,7 +4,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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { name as packageName, version as packageVersion } from '../../version.json';
+import { name as packageName, version as packageVersion } from '../../version-wrapper';
 export var FABRIC_CHANNEL = 'fabric-elements';
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {

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

@@ -16,7 +16,7 @@ import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { closestElement } from '../../utils/dom';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/utils'; // TODO: ED-14403 investigate why these translations don't work
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar'; // TODO: ED-14403 investigate why these translations don't work
 
 export var messages = defineMessages({
   tableOptions: {

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

@@ -19,7 +19,7 @@ var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(C
 export var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
 
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !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\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"])), ClassName.LAYOUT_BUTTON, token('color.background.neutral', N20A), token('color.icon', N300), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, token('color.background.neutral.hovered', B300), token('color.icon', 'white'), tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, token('elevation.surface', 'white'), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, token('elevation.surface', 'white'), 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, token('elevation.surface', 'white'), tableToolbarSize, ClassName.TABLE_STICKY, token('elevation.surface', 'green'), stickyRowOffsetTop, stickyRowZIndex, token('elevation.surface', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, token('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, token('color.text.inverse', N0), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, token('color.text.inverse', N0), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, token('color.text.inverse', R500), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !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"])), ClassName.LAYOUT_BUTTON, token('color.background.neutral', N20A), token('color.icon', N300), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, token('color.background.neutral.hovered', B300), token('color.icon', 'white'), tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, token('elevation.surface', 'white'), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, token('elevation.surface', 'white'), 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, token('elevation.surface', 'white'), tableToolbarSize, ClassName.TABLE_STICKY, token('elevation.surface', 'green'), stickyRowOffsetTop, stickyRowZIndex, token('elevation.surface', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, token('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, token('color.text.inverse', N0), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, token('color.text.inverse', N0), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, token('color.text.inverse', R500), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, tableBorderColor(props), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
 };
 export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
 export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

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

@@ -16,14 +16,14 @@ import { insertTaskDecisionWithAnalytics } from '../commands';
 import { joinAtCut, liftSelection, wrapSelectionInTaskList } from './commands';
 import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable, getTaskItemIndex, isInsideDecision } from './helpers';
 
-var indentationAnalytics = function indentationAnalytics(curIndentLevel, direction) {
+var indentationAnalytics = function indentationAnalytics(curIndentLevel, direction, inputMethod) {
   return {
     action: ACTION.FORMATTED,
     actionSubject: ACTION_SUBJECT.TEXT,
     actionSubjectId: ACTION_SUBJECT_ID.FORMAT_INDENT,
     eventType: EVENT_TYPE.TRACK,
     attributes: {
-      inputMethod: INPUT_METHOD.KEYBOARD,
+      inputMethod: inputMethod,
       previousIndentationLevel: curIndentLevel,
       newIndentLevel: direction === INDENT_DIRECTION.OUTDENT ? curIndentLevel - 1 : curIndentLevel + 1,
       direction: direction,
@@ -92,15 +92,18 @@ var joinTaskDecisionFollowing = function joinTaskDecisionFollowing(state, dispat
   return false;
 };
 
-var unindent = filter(isInsideTask, function (state, dispatch) {
-  var curIndentLevel = getCurrentIndentLevel(state.selection);
+export var getUnindentCommand = function getUnindentCommand() {
+  var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.KEYBOARD;
+  return filter(isInsideTask, function (state, dispatch) {
+    var curIndentLevel = getCurrentIndentLevel(state.selection);
 
-  if (!curIndentLevel || curIndentLevel === 1) {
-    return false;
-  }
+    if (!curIndentLevel || curIndentLevel === 1) {
+      return false;
+    }
 
-  return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.OUTDENT))(autoJoin(liftSelection, ['taskList']))(state, dispatch);
-}); // if selection is decision item or first action item in table cell
+    return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.OUTDENT, inputMethod))(autoJoin(liftSelection, ['taskList']))(state, dispatch);
+  });
+}; // if selection is decision item or first action item in table cell
 // then dont consume the Tab, as table-keymap should tab to the next cell
 
 var shouldLetTabThroughInTable = function shouldLetTabThroughInTable(state) {
@@ -118,28 +121,31 @@ var shouldLetTabThroughInTable = function shouldLetTabThroughInTable(state) {
   return false;
 };
 
-var indent = filter(isInsideTask, function (state, dispatch) {
-  // limit ui indentation to 6 levels
-  var curIndentLevel = getCurrentIndentLevel(state.selection);
+export var getIndentCommand = function getIndentCommand() {
+  var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.KEYBOARD;
+  return filter(isInsideTask, function (state, dispatch) {
+    // limit ui indentation to 6 levels
+    var curIndentLevel = getCurrentIndentLevel(state.selection);
 
-  if (!curIndentLevel || curIndentLevel >= 6) {
-    return true;
-  }
+    if (!curIndentLevel || curIndentLevel >= 6) {
+      return true;
+    }
 
-  var _state$schema$nodes3 = state.schema.nodes,
-      taskList = _state$schema$nodes3.taskList,
-      taskItem = _state$schema$nodes3.taskItem;
-  var _state$selection = state.selection,
-      $from = _state$selection.$from,
-      $to = _state$selection.$to;
-  var maxDepth = subtreeHeight($from, $to, [taskList, taskItem]);
+    var _state$schema$nodes3 = state.schema.nodes,
+        taskList = _state$schema$nodes3.taskList,
+        taskItem = _state$schema$nodes3.taskItem;
+    var _state$selection = state.selection,
+        $from = _state$selection.$from,
+        $to = _state$selection.$to;
+    var maxDepth = subtreeHeight($from, $to, [taskList, taskItem]);
 
-  if (maxDepth >= 6) {
-    return true;
-  }
+    if (maxDepth >= 6) {
+      return true;
+    }
 
-  return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.INDENT))(autoJoin(wrapSelectionInTaskList, ['taskList']))(state, dispatch);
-});
+    return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.INDENT, inputMethod))(autoJoin(wrapSelectionInTaskList, ['taskList']))(state, dispatch);
+  });
+};
 
 var backspaceFrom = function backspaceFrom($from) {
   return function (state, dispatch) {
@@ -156,7 +162,7 @@ var backspaceFrom = function backspaceFrom($from) {
         paragraph = _state$schema$nodes4.paragraph;
 
     if ($from.node($from.depth - 2).type === taskList) {
-      return unindent(state, dispatch);
+      return getUnindentCommand()(state, dispatch);
     } // bottom level, should "unwrap" taskItem contents into paragraph
     // we achieve this by slicing the content out, and replacing
 
@@ -305,7 +311,7 @@ var splitListItem = function splitListItem(state, dispatch) {
   return false;
 };
 
-var enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTaskDecision, chainCommands(unindent, splitListItem)), function (state, dispatch) {
+var enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTaskDecision, chainCommands(getUnindentCommand(), splitListItem)), function (state, dispatch) {
   var selection = state.selection,
       schema = state.schema;
   var taskItem = schema.nodes.taskItem;
@@ -353,12 +359,12 @@ export function keymapPlugin(schema, allowNestedTasks, consumeTabs) {
     'Shift-Tab': filter([isInsideTaskOrDecisionItem, function (state) {
       return !shouldLetTabThroughInTable(state);
     }], function (state, dispatch) {
-      return unindent(state, dispatch) || !!consumeTabs;
+      return getUnindentCommand(INPUT_METHOD.KEYBOARD)(state, dispatch) || !!consumeTabs;
     }),
     Tab: filter([isInsideTaskOrDecisionItem, function (state) {
       return !shouldLetTabThroughInTable(state);
     }], function (state, dispatch) {
-      return indent(state, dispatch) || !!consumeTabs;
+      return getIndentCommand(INPUT_METHOD.KEYBOARD)(state, dispatch) || !!consumeTabs;
     })
   };
   var defaultHandlers = consumeTabs ? {

package/dist/esm/plugins/toolbar-lists-indentation/index.js

@@ -3,26 +3,43 @@ import ToolbarListsIndentation from './ui';
 import WithPluginState from '../../ui/WithPluginState';
 import { ToolbarSize } from '../../ui/Toolbar/types';
 import { pluginKey as listPluginKey } from '../list/pm-plugins/main';
+import { pluginKey as indentationButtonsPluginKey, createPlugin as indentationButtonsPlugin } from './pm-plugins/indentation-buttons';
 
 var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
-  var showIndentationButtons = _ref.showIndentationButtons;
+  var showIndentationButtons = _ref.showIndentationButtons,
+      allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
   return {
     name: 'toolbarListsIndentation',
-    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
-      var editorView = _ref2.editorView,
-          popupsMountPoint = _ref2.popupsMountPoint,
-          popupsBoundariesElement = _ref2.popupsBoundariesElement,
-          popupsScrollableElement = _ref2.popupsScrollableElement,
-          toolbarSize = _ref2.toolbarSize,
-          disabled = _ref2.disabled,
-          isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'indentationButtons',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return indentationButtonsPlugin({
+            dispatch: dispatch,
+            showIndentationButtons: showIndentationButtons,
+            allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+          });
+        }
+      }];
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
+      var editorView = _ref3.editorView,
+          popupsMountPoint = _ref3.popupsMountPoint,
+          popupsBoundariesElement = _ref3.popupsBoundariesElement,
+          popupsScrollableElement = _ref3.popupsScrollableElement,
+          toolbarSize = _ref3.toolbarSize,
+          disabled = _ref3.disabled,
+          isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
       var isSmall = toolbarSize < ToolbarSize.L;
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
-          listState: listPluginKey
+          listState: listPluginKey,
+          indentationState: indentationButtonsPluginKey
         },
-        render: function render(_ref3) {
-          var listState = _ref3.listState;
+        render: function render(_ref4) {
+          var listState = _ref4.listState,
+              indentationState = _ref4.indentationState;
 
           if (!listState) {
             return null;
@@ -40,7 +57,9 @@ var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref)
             bulletListDisabled: listState.bulletListDisabled,
             orderedListActive: listState.orderedListActive,
             orderedListDisabled: listState.orderedListDisabled,
-            showIndentationButtons: !!showIndentationButtons
+            showIndentationButtons: !!showIndentationButtons,
+            indentDisabled: indentationState.indentDisabled,
+            outdentDisabled: indentationState.outdentDisabled
           });
         }
       });