@atlaskit/editor-common 70.3.0 → 71.0.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/editor-common
 
+## 71.0.0
+
+### Major Changes
+
+- [`2df5ab17c10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2df5ab17c10) - DSP-6459: Adds a background to code blocks in the editor to remove transparency. E.g. prevents table cell background colors from affecting code blocks. Also modifies code blocks in table headers to have a border instead of a different color when design tokens are enabled.
+
+### Minor Changes
+
+- [`2e7d2c81d2f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e7d2c81d2f) - EDM-3626 Remove plain text paste linkification feature flag
+  the feature flag will not exist anymore so this cannot be enabled/disabled
+  plain text containing URLs will always be 'linkified' using shift-cmd-v/shift-ctrl-v
+
+### Patch Changes
+
+- [`25617fe0633`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25617fe0633) - [ux] ED-16010 this updates the text color picker to use design tokens when available.
+- [`94f8a899d36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94f8a899d36) - [ED-15851] Add feature flags for the restart numbered lists project. These include:
+
+  - restartNumberedLists: Allow numbered lists to start from any number greater than 0, not just 1
+  - listNumberContinuity: Allow lists to continue their numbering when split by other nodes
+  - restartNumberedListsToolbar: Show a toolbar for users to restart the numbering of a list
+
+  We will be encapsulating all dev work under these flags.
+
+  These flags are for development purposes only, please don't turn these on. Only feature leads can turn these on.
+
+- [`01472b73d72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01472b73d72) - DSP-4815 - Adds design tokens to non-custom panels. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`7a1a5d392ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a1a5d392ef) - [ux][ed-15366] remove right align shortcut as it was interfering with default browser activity
+- [`d5fd6da78ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d5fd6da78ab) - To add arrow key navigation for the main toolbar items and menu items [ED-15497]
+
+  To make the editor main toolbar items accessible using left and right arrow keys.
+  The menus are expandable using Space or Enter key, once the menus are expanded the options are accessible using up/down arrow keys.
+  'Esc' key closes the menus and focuses the toolbar item.
+
+- [`34f8542468b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34f8542468b) - [ED-12592] Updates the renderer rendered measurement to indicate when the measurement is distorted. Re uses distorted measurement identification logic from other render measurements.
+- [`7bf4281949a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7bf4281949a) - ED-15704 - Fix missing hover inducators on Delete column and Delete row under table floating toolbar context menu
+- [`977ac74443c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/977ac74443c) - DSP-7235: Fixes issue with overflow shadows on code blocks due to layered transparent colors.
+- [`3a66592edd7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a66592edd7) - [ED-16104] To fix a regression caused by [ED-15947] The arrow key behaviour is unexpected when we open find and replace button.
+- [`17014a9004c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/17014a9004c) - [ux] ED-15632 preprocess invalid media adf to avoid empty mediaSingle node and duplicated captions and media inside mediaSingle.The document will be transformed for this cases and validation error not thrown.When mediaSingle with empty content is encountered - it will be removed.When mediaSingle with duplicated captions or media nodes is encountered - duplicate captions or media nodes will be removed, prioritising removal of nodes with empty content first.
+- [`c2510fa261f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2510fa261f) - [ux] ED-15961 [ux] Updates the presentation of text color to use dark and light mode colors when those modes are enabled
+- [`47dfcc04652`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47dfcc04652) - ED-15703 - Minor change on floating toolbar to allow z-index value to be passed as parameter
+- [`70fce47a47b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/70fce47a47b) - DSP-2423: Adds design token to the background color of tooltip keyboard shortcut styles.
+- [`58365aae521`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58365aae521) - [ux] Refactor messages on tooltip of media toolbar item and media slash commend result to show video as an explicit upload option.
+- Updated dependencies
+
 ## 70.3.0
 
 ### Minor Changes

package/dist/cjs/analytics/types/enums.js

@@ -100,6 +100,7 @@ exports.ACTION = ACTION;
   ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
   ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
   ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
+  ACTION["INVALID_MEDIA_CONTENT_TRANSFORMED"] = "invalidMediaContentTransformed";
   ACTION["TOGGLE_EXPAND"] = "toggleExpand";
   ACTION["TRANSACTION_DISPATCHED"] = "transactionDispatched";
   ACTION["TRANSACTION_MUTATED_AFTER_DISPATCH"] = "transactionMutatedAfterDispatched";

package/dist/cjs/keymaps/index.js

@@ -80,7 +80,7 @@ Object.defineProperty(exports, "UP", {
     return _consts.UP;
   }
 });
-exports.backspace = exports.altPaste = exports.alignRight = exports.alignLeft = exports.addRowBefore = exports.addRowAfter = exports.addLink = exports.addInlineComment = exports.addColumnBefore = exports.addColumnAfter = exports.addAltText = void 0;
+exports.backspace = exports.altPaste = exports.alignLeft = exports.addRowBefore = exports.addRowAfter = exports.addLink = exports.addInlineComment = exports.addColumnBefore = exports.addColumnAfter = exports.addAltText = void 0;
 exports.bindKeymapWithCommand = bindKeymapWithCommand;
 exports.find = exports.escape = exports.enter = exports.deleteKey = exports.cut = exports.ctrlBackSpace = exports.copy = exports.clearFormatting = void 0;
 exports.findKeyMapForBrowser = findKeyMapForBrowser;
@@ -102,6 +102,8 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("../utils");
 
 var _consts = require("./consts");
@@ -236,19 +238,14 @@ var find = makeKeyMapWithCommon('Find', 'Mod-f');
 exports.find = find;
 var alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
 exports.alignLeft = alignLeft;
-var alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Shift-r');
-exports.alignRight = alignRight;
 var arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: "\u2190",
   ARROWRIGHT: "\u2192",
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
-}; // TOOD: https://product-fabric.atlassian.net/browse/DSP-4460
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), _colors.N400);
+};
+var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), (0, _tokens.token)('color.background.inverse.subtle', _colors.N400));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {

package/dist/cjs/messages/insert-block.js

@@ -28,13 +28,18 @@ var toolbarInsertBlockMessages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Insert a link',
     description: 'Insert a hyperlink'
   },
-  filesAndImages: {
-    id: 'fabric.editor.filesAndImages',
-    defaultMessage: 'Files & images',
-    description: 'Insert one or more files or images'
-  },
-  filesAndImagesDescription: {
-    id: 'fabric.editor.filesAndImages.description',
+  mediaFiles: {
+    id: 'fabric.editor.mediaFiles',
+    defaultMessage: 'Image, video, or file',
+    description: 'Insert one or more files, videos or images'
+  },
+  addMediaFiles: {
+    id: 'fabric.editor.addMediaFiles',
+    defaultMessage: 'Add image, video, or file',
+    description: 'Insert one or more files, videos or images'
+  },
+  mediaFilesDescription: {
+    id: 'fabric.editor.mediaFiles.description',
     defaultMessage: 'Add images and other files to your page',
     description: 'Insert one or more files or images'
   },

package/dist/cjs/panel.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "getPanelTypeBackground", {
     return _panel.getPanelTypeBackground;
   }
 });
+Object.defineProperty(exports, "getPanelTypeBackgroundNoTokens", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelTypeBackgroundNoTokens;
+  }
+});
 Object.defineProperty(exports, "panelSharedStyles", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/code-block.js

@@ -27,6 +27,7 @@ var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
   CODEBLOCK_END: 'code-block--end',
+  CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
@@ -34,18 +35,17 @@ var CodeBlockSharedCssClassName = {
 exports.CodeBlockSharedCssClassName = CodeBlockSharedCssClassName;
 
 var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    counter-reset: line;\n    display: flex;\n    overflow-x: auto;\n\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    margin: ", " 0 0 0;\n    min-width: ", "px;\n    cursor: pointer;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll;\n      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,\n        8px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, (0, _tokens.token)('elevation.surface.raised', 'transparent'), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', _colors.N20),
     dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
   })(props), (0, _constants.borderRadius)(), (0, _editorSharedStyles.overflowShadow)({
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     background: (0, _components.themed)({
-      light: _colors.N20,
-      dark: _colors.DN50
+      light: (0, _tokens.token)('color.background.neutral', _colors.N20),
+      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
     })(props),
     width: '8px'
-  }), _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
+  }), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', _colors.N30),
     dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
   })(props), (0, _constants.gridSize)(), (0, _components.themed)({

package/dist/cjs/styles/shared/panel.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
 exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
-exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackground = void 0;
+exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackground = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -31,13 +31,26 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var tokenPanelColor = {
+  info: 'color.background.information',
+  note: 'color.background.discovery',
+  tip: 'color.background.success',
+  success: 'color.background.success',
+  warning: 'color.background.warning',
+  error: 'color.background.danger'
+};
 var lightPanelColor = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -47,7 +60,7 @@ var lightPanelColor = {
 };
 var darkPanelColors = {
   // standard panels
-  info: '#0C294F',
+  info: "#0C294F",
   error: "#441C13",
   warning: "#413001",
   tip: "#052E21",
@@ -107,27 +120,32 @@ var darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 exports.darkPanelColors = darkPanelColors;
 var lightIconColor = {
-  info: colors.B400,
-  note: colors.P400,
-  tip: colors.G400,
-  success: colors.G400,
-  warning: colors.Y400,
-  error: colors.R400
+  info: (0, _tokens.token)('color.icon.information', colors.B400),
+  note: (0, _tokens.token)('color.icon.discovery', colors.P400),
+  tip: (0, _tokens.token)('color.icon.success', colors.G400),
+  success: (0, _tokens.token)('color.icon.success', colors.G400),
+  warning: (0, _tokens.token)('color.icon.warning', colors.Y400),
+  error: (0, _tokens.token)('color.icon.danger', colors.R400)
 };
 var darkIconColor = {
-  info: colors.B100,
-  note: colors.P100,
-  tip: colors.G200,
-  success: colors.G200,
-  warning: colors.Y100,
-  error: colors.R200
+  info: (0, _tokens.token)('color.icon.information', colors.B100),
+  note: (0, _tokens.token)('color.icon.discovery', colors.P100),
+  tip: (0, _tokens.token)('color.icon.success', colors.G200),
+  success: (0, _tokens.token)('color.icon.success', colors.G200),
+  warning: (0, _tokens.token)('color.icon.warning', colors.Y100),
+  error: (0, _tokens.token)('color.icon.danger', colors.R200)
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
 var panelEmojiSpriteVerticalAlignment = -((0, _constants.gridSize)() * 3 - _consts.akEditorCustomIconSize) / 2;
-var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 
 var getPanelDarkColor = function getPanelDarkColor(panelColor) {
@@ -193,9 +211,10 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
     })(props);
     return "\n    color: ".concat(color, ";\n  ");
   };
-};
+}; // Provides the color without tokens, used when converting to a custom panel
 
-var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
+
+var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var light = lightPanelColor[panelType];
   var dark = darkPanelColors[panelType];
@@ -206,6 +225,24 @@ var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   return background || 'none';
 };
 
+exports.getPanelTypeBackgroundNoTokens = getPanelTypeBackgroundNoTokens;
+
+var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+  var light = (0, _tokens.token)(tokenPanelColor[panelType], lightPanelColor[panelType]);
+  var dark = (0, _tokens.token)(tokenPanelColor[panelType], darkPanelColors[panelType]);
+  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+
+  var background = (0, _components.themed)({
+    light: light,
+    dark: dark
+  })(props);
+  return background || 'none';
+};
+
 exports.getPanelTypeBackground = getPanelTypeBackground;
 
 var mainDynamicStyles = function mainDynamicStyles(panelType) {

package/dist/cjs/styles/shared/table.js

@@ -25,6 +25,8 @@ var _tokens = require("@atlaskit/tokens");
 
 var _browser = _interopRequireDefault(require("../../utils/browser"));
 
+var _codeBlock = require("./code-block");
+
 var _templateObject;
 
 var tableMarginTop = 24;
@@ -61,7 +63,7 @@ var TableSharedCssClassName = {
 exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
     light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
     dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
   })(props), (0, _tokens.token)('color.background.neutral.subtle', 'white'), tableCellMinWidth, (0, _components.themed)({
@@ -72,22 +74,25 @@ var tableSharedStyle = function tableSharedStyle(props) {
   })(props), (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbar),
     dark: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbarDark)
-  })(props), (0, _editorSharedStyles.overflowShadow)({
+  })(props), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, (0, _components.themed)({
+    light: (0, _tokens.token)('elevation.surface.raised', 'rgb(235, 237, 240)'),
+    dark: (0, _tokens.token)('elevation.surface.raised', 'rgb(36, 47, 66)')
+  })(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _tokens.token)('color.border', 'transparent'), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: 'rgb(235, 237, 240)',
-      dark: 'rgb(36, 47, 66)'
+      light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
+      dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
     width: "".concat((0, _constants.gridSize)(), "px")
   }), (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
-  })(props), (0, _components.themed)({
+  })(props), _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
     light: (0, _tokens.token)('color.background.neutral', 'rgb(226, 229, 233)'),
     dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
   })(props), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: 'rgb(235, 237, 240)',
-      dark: 'rgb(36, 47, 66)'
+      light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
+      dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
     width: "".concat((0, _constants.gridSize)(), "px")
   }), (0, _components.themed)({

package/dist/cjs/styles/shared/text-color.js

@@ -13,5 +13,5 @@ var _react = require("@emotion/react");
 
 var _templateObject;
 
-var textColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-text-color-mark {\n    color: var(--custom-text-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));
+var textColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-text-color-mark {\n    color: var(--custom-palette-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));
 exports.textColorStyles = textColorStyles;

package/dist/cjs/ui/DropList/index.js

@@ -46,7 +46,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "70.3.0";
+var packageVersion = "71.0.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 

package/dist/cjs/ui-color/ColorPalette/Color/index.js

@@ -27,6 +27,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _editorPalette = require("@atlaskit/editor-palette");
+
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -83,7 +85,9 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
           _this$props2$checkMar = _this$props2.checkMarkColor,
-          checkMarkColor = _this$props2$checkMar === void 0 ? _colors.N0 : _this$props2$checkMar;
+          checkMarkColor = _this$props2$checkMar === void 0 ? _colors.N0 : _this$props2$checkMar,
+          useDesignTokens = _this$props2.useDesignTokens;
+      var colorStyle = useDesignTokens ? (0, _editorPalette.hexToEditorTextPaletteColor)(value) : value;
       return (0, _react2.jsx)(_tooltip.default, {
         content: label
       }, (0, _react2.jsx)("span", {
@@ -98,7 +102,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         tabIndex: tabIndex,
         className: "".concat(isSelected ? 'selected' : ''),
         style: {
-          backgroundColor: value || 'transparent',
+          backgroundColor: colorStyle || 'transparent',
           border: "1px solid ".concat(borderColor)
         },
         autoFocus: autoFocus

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -17,6 +17,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _Color = _interopRequireDefault(require("./Color"));
 
 var _styles = require("./styles");
@@ -30,10 +32,21 @@ var _styles = require("./styles");
  * @param color color string, suppports HEX, RGB, RGBA etc.
  * @return Highest contrast color in pool
  */
-function getContrastColor(color, pool) {
-  return pool.sort(function (a, b) {
+function getCheckMarkColor(color, textPalette) {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  var contrastColor = [_colors.N0, _colors.N500].sort(function (a, b) {
     return _chromatism.default.difference(b, color) - _chromatism.default.difference(a, color);
   })[0];
+
+  if (!textPalette) {
+    return contrastColor;
+  } // Use of these token comes from guidance from designers in the Design System team
+  // they are only intended for use with text colors (and there are different tokens
+  // planned to be used when this extended to be used with other palettes).
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+
+  return contrastColor === _colors.N0 ? (0, _tokens.token)('color.icon.inverse', _colors.N0) : (0, _tokens.token)('color.icon', _colors.N500);
 }
 
 var ColorPalette = function ColorPalette(props) {
@@ -43,7 +56,9 @@ var ColorPalette = function ColorPalette(props) {
       onClick = props.onClick,
       selectedColor = props.selectedColor,
       className = props.className,
-      formatMessage = props.intl.formatMessage;
+      formatMessage = props.intl.formatMessage,
+      _props$textPalette = props.textPalette,
+      textPalette = _props$textPalette === void 0 ? false : _props$textPalette;
 
   var colorsPerRow = _react.default.useMemo(function () {
     return palette.reduce(function (resultArray, item, index) {
@@ -72,14 +87,9 @@ var ColorPalette = function ColorPalette(props) {
         borderColor: border,
         label: message ? formatMessage(message) : label,
         onClick: onClick,
-        isSelected: value === selectedColor
-        /** this is not new usage - old code extracted from editor-core */
-
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-        ,
-        checkMarkColor: getContrastColor(value, [_colors.N0, _colors.N500])
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+        isSelected: value === selectedColor,
+        checkMarkColor: getCheckMarkColor(value, textPalette),
+        useDesignTokens: textPalette === true
       });
     }));
   }));

package/dist/cjs/ui-menu/Dropdown/index.js

@@ -31,6 +31,8 @@ var _DropList = _interopRequireDefault(require("../../ui/DropList"));
 
 var _Popup = _interopRequireDefault(require("../../ui/Popup"));
 
+var _MenuArrowKeyNavigationProvider = require("../MenuArrowKeyNavigationProvider");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -85,7 +87,9 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
           onOpenChange = _this$props.onOpenChange,
           fitHeight = _this$props.fitHeight,
           fitWidth = _this$props.fitWidth,
-          zIndex = _this$props.zIndex;
+          zIndex = _this$props.zIndex,
+          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+          keyDownHandlerContext = _this$props.keyDownHandlerContext;
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
         target: target,
         mountTo: mountTo,
@@ -95,6 +99,16 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex
+      }, /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, {
+        disableArrowKeyNavigation: disableArrowKeyNavigation,
+        keyDownHandlerContext: keyDownHandlerContext,
+        closeonTab: true,
+        handleClose: function handleClose(event) {
+          return onOpenChange && onOpenChange({
+            isOpen: false,
+            event: event
+          });
+        }
       }, /*#__PURE__*/_react.default.createElement("div", {
         style: {
           height: 0,
@@ -105,7 +119,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         onOpenChange: onOpenChange,
         position: popupPlacement.join(' '),
         shouldFitContainer: true
-      }, children)));
+      }, children))));
     }
   }, {
     key: "render",