@atlaskit/editor-common 72.7.3 → 72.9.0

package/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  rules: {
+    'react/no-danger': 'error',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', 'examples/**/*.{js,ts,tsx}'],
+      rules: {
+        'react/no-danger': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/editor-common
 
+## 72.9.0
+
+### Minor Changes
+
+- [`135df1a1e78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/135df1a1e78) - [ux] ED-17405 - Bugfix: Editor toolbar dropdown menus not receiving keyboard events for navigation
+
+## 72.8.0
+
+### Minor Changes
+
+- [`c2385dcb8f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2385dcb8f7) - [ux] ED-17043 Expanded table chart colors from 20 to 36 colors.
+- [`0237059f136`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0237059f136) - Adds utilities to @atlaskit/editor-common/card for assisting adding `LinkMetaStep` to a transaction and reading metadata from a transaction.
+
+  ```ts
+  import { addLinkMetadata } from '@atlaskit/editor-common/card';
+
+  // Adds a LinkMetaStep to a transaction
+  addLinkMetadata(selection, tr, metadata);
+  ```
+
+  ```ts
+  import { getLinkMetadataFromTransaction } from '@atlaskit/editor-common/card';
+
+  // Retrieves and reduces LinkMetaData from a transaction into a single object
+  getLinkMetadataFromTransaction(tr);
+  ```
+
+  ```ts
+  import { commandWithMetadata } from '@atlaskit/editor-common/card';
+
+  // Wraps a command such that if there is a dispatch method will annotate the dispatched transaction with a LinkMetaStep with metadata
+  commandWithMetadata(command, metadata);
+  ```
+
+- [`e88e54a14e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e88e54a14e3) - [ux] [ux] Added 'allowAlignment' and 'allowWrapping' as options in 'cardOptions' to let Trello to disable the features
+
+### Patch Changes
+
+- [`0df91686d92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0df91686d92) - [ux] ED-17047 fixed an issue where full width images appears narrower than full paragraph width images
+- [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
+- [`b289da93d3c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b289da93d3c) - [ED-17384] Remove feature flags context plugin
+- [`2cfb05a2cf8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2cfb05a2cf8) - [ux] ED-17278 - Added shortcuts to Editor Help dialog
+- Updated dependencies
+
 ## 72.7.3
 
 ### Patch Changes

package/dist/cjs/card/index.js

@@ -2,4 +2,23 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "addLinkMetadata", {
+  enumerable: true,
+  get: function get() {
+    return _utils.addLinkMetadata;
+  }
+});
+Object.defineProperty(exports, "commandWithMetadata", {
+  enumerable: true,
+  get: function get() {
+    return _utils.commandWithMetadata;
+  }
+});
+Object.defineProperty(exports, "getLinkMetadataFromTransaction", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getLinkMetadataFromTransaction;
+  }
+});
+var _utils = require("./utils");

package/dist/cjs/card/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addLinkMetadata = addLinkMetadata;
+exports.commandWithMetadata = void 0;
+exports.getLinkMetadataFromTransaction = getLinkMetadataFromTransaction;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _steps = require("@atlaskit/adf-schema/steps");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * Records metadata about the user action and input method relating to a transaction
+ * as a custom LinkStepMetadata prosemirror step so that it is preserved in
+ * the history for undo/redo
+ */
+function addLinkMetadata(initialSelection, tr, metadata) {
+  var storedMarks = tr.storedMarks;
+  var pos = tr.mapping.map(initialSelection.$from.pos);
+  tr.step(new _steps.LinkMetaStep(pos, metadata));
+
+  // When you add a new step all the storedMarks are removed it
+  if (storedMarks) {
+    tr.setStoredMarks(storedMarks);
+  }
+  return tr;
+}
+function getLinkMetadataFromTransaction(tr) {
+  return tr.steps.reduce(function (metadata, step) {
+    if (!(step instanceof _steps.LinkMetaStep)) {
+      return metadata;
+    }
+    return _objectSpread(_objectSpread({}, metadata), step.getMetadata());
+  }, {});
+}
+/**
+ * Adds metadata to the transaction created from a command
+ * The metadata describes the user intent and input method
+ * for executing the command
+ */
+var commandWithMetadata = function commandWithMetadata(command, metadata) {
+  return function (state, dispatch, view) {
+    if (!dispatch) {
+      return command(state, dispatch, view);
+    }
+    return command(state, function (tr) {
+      addLinkMetadata(state.selection, tr, metadata);
+      dispatch(tr);
+    }, view);
+  };
+};
+exports.commandWithMetadata = commandWithMetadata;

package/dist/cjs/keymaps/index.js

@@ -90,7 +90,7 @@ exports.getAriaKeyshortcuts = getAriaKeyshortcuts;
 exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = void 0;
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
-exports.toggleUnderline = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.setNormalText = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.moveUp = exports.moveRight = exports.moveLeft = exports.moveDown = void 0;
+exports.toggleUnderline = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.setNormalText = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRight = exports.moveLeft = exports.moveDown = void 0;
 exports.tooltip = tooltip;
 exports.undo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -106,6 +106,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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 addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 exports.addAltText = addAltText;
+var navToEditorToolbar = makeKeyMapWithCommon('Navigate to editor toolbar', 'Alt-F9');
+exports.navToEditorToolbar = navToEditorToolbar;
+var navToFloatingToolbar = makeKeyMapWithCommon('Navigate to floating toolbar', 'Alt-F10');
+exports.navToFloatingToolbar = navToFloatingToolbar;
 var toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
 exports.toggleBold = toggleBold;
 var toggleItalic = makeKeyMapWithCommon('Italic', 'Mod-i');

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

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.7.3";
+var packageVersion = "72.9.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/MediaSingle/styled.js

@@ -15,7 +15,7 @@ var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _breakout = require("../../utils/breakout");
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 function float(layout) {
   switch (layout) {
@@ -119,17 +119,17 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
     width = _ref.width;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 exports.MediaSingleDimensionHelper = MediaSingleDimensionHelper;
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,
     paddingBottom = _ref2.paddingBottom,
     height = _ref2.height;
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
 };
 var mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 exports.mediaWrapperStyle = mediaWrapperStyle;
 var MediaWrapper = function MediaWrapper(_ref3) {

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

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "borderPaletteTooltipMessages", {
     return _paletteMessagesTokenModeNames.borderPaletteTooltipMessages;
   }
 });
+Object.defineProperty(exports, "chartsColorPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _paletteMessagesTokenModeNames.chartsColorPaletteTooltipMessages;
+  }
+});
 Object.defineProperty(exports, "textPaletteTooltipMessages", {
   enumerable: true,
   get: function get() {

package/dist/cjs/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textPaletteTooltipMessages = exports.lightTextPaletteTooltipMessages = exports.lightBackgroundPaletteTooltipMessages = exports.darkTextPaletteTooltipMessages = exports.darkBackgroundPaletteTooltipMessages = exports.borderPaletteTooltipMessages = exports.backgroundPaletteTooltipMessages = void 0;
+exports.textPaletteTooltipMessages = exports.lightTextPaletteTooltipMessages = exports.lightChartsColorPaletteTooltipMessages = exports.lightBackgroundPaletteTooltipMessages = exports.darkTextPaletteTooltipMessages = exports.darkBackgroundPaletteTooltipMessages = exports.chartsColorPaletteTooltipMessages = exports.borderPaletteTooltipMessages = exports.backgroundPaletteTooltipMessages = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactIntlNext = require("react-intl-next");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -259,6 +259,204 @@ var backgroundPaletteTooltipMessages = {
   dark: darkBackgroundPaletteTooltipMessages
 };
 exports.backgroundPaletteTooltipMessages = backgroundPaletteTooltipMessages;
+var lightChartsColorPaletteTooltipMessages = (0, _reactIntlNext.defineMessages)({
+  // Blue color
+  '#7AB2FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#247FFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#0055CC': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#003884': {
+    id: 'fabric.theme.bolder-blue',
+    defaultMessage: 'Bolder blue',
+    description: 'Name of a color'
+  },
+  // Teal color
+  '#60C6D2': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#1D9AAA': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#1D7F8C': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#206B74': {
+    id: 'fabric.theme.bolder-teal',
+    defaultMessage: 'Bolder teal',
+    description: 'Name of a color'
+  },
+  // Green color
+  '#6BE1B0': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#23A971': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#177D52': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#055C3F': {
+    id: 'fabric.theme.bolder-green',
+    defaultMessage: 'Bolder green',
+    description: 'Name of a color'
+  },
+  // Yellow color
+  '#FFDB57': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFBE33': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FF9D00': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'Name of a color'
+  },
+  '#946104': {
+    id: 'fabric.theme.bolder-yellow',
+    defaultMessage: 'Bolder yellow',
+    description: 'Name of a color'
+  },
+  // Red color
+  '#FF8F73': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#FC552C': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color.'
+  },
+  '#D32D03': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#A32000': {
+    id: 'fabric.theme.bolder-red',
+    defaultMessage: 'Bolder red',
+    description: 'Name of a color'
+  },
+  // Orange color
+  '#FAA53D': {
+    id: 'fabric.theme.subtle-orange',
+    defaultMessage: 'Subtle orange',
+    description: 'Name of a color'
+  },
+  '#D97008': {
+    id: 'fabric.theme.orange',
+    defaultMessage: 'Orange',
+    description: 'Name of a color.'
+  },
+  '#B65C02': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'Name of a color'
+  },
+  '#974F0C': {
+    id: 'fabric.theme.bolder-orange',
+    defaultMessage: 'Bolder orange',
+    description: 'Name of a color'
+  },
+  // Magenta color
+  '#E774BB': {
+    id: 'fabric.theme.subtle-magenta',
+    defaultMessage: 'Subtle magenta',
+    description: 'Name of a color'
+  },
+  '#DA62AC': {
+    id: 'fabric.theme.magenta',
+    defaultMessage: 'Magenta',
+    description: 'Name of a color'
+  },
+  '#CD519D': {
+    id: 'fabric.theme.bold-magenta',
+    defaultMessage: 'Bold magenta',
+    description: 'Name of a color'
+  },
+  '#943D73': {
+    id: 'fabric.theme.bolder-magenta',
+    defaultMessage: 'Bolder magenta',
+    description: 'Name of a color'
+  },
+  // Purple color
+  '#B5A7FB': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#8B77EE': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#5A43D0': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#44368B': {
+    id: 'fabric.theme.bolder-purple',
+    defaultMessage: 'Bolder purple',
+    description: 'Name of a color'
+  },
+  // Gray color
+  '#8993A5': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'Name of a color'
+  },
+  '#8590A2': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#758195': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  },
+  '#44546F': {
+    id: 'fabric.theme.bolder-gray',
+    defaultMessage: 'Bolder gray',
+    description: 'Name of a color'
+  }
+});
+exports.lightChartsColorPaletteTooltipMessages = lightChartsColorPaletteTooltipMessages;
+var darkChartsColorPaletteTooltipMessages = _objectSpread({}, lightChartsColorPaletteTooltipMessages);
+var chartsColorPaletteTooltipMessages = {
+  light: lightChartsColorPaletteTooltipMessages,
+  dark: darkChartsColorPaletteTooltipMessages
+};
+exports.chartsColorPaletteTooltipMessages = chartsColorPaletteTooltipMessages;
 var lightBorderPaletteTooltipMessages = (0, _reactIntlNext.defineMessages)({
   '#091E4224': {
     id: 'fabric.theme.subtle-gray',

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

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "cellBackgroundColorPalette", {
     return _cellBackgroundColorPalette.default;
   }
 });
+Object.defineProperty(exports, "chartsColorPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _Palettes.chartsColorPaletteTooltipMessages;
+  }
+});
 Object.defineProperty(exports, "colorPaletteMessages", {
   enumerable: true,
   get: function get() {

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ColorPaletteArrowKeyNavigationProvider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 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; }
@@ -19,10 +21,14 @@ var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNaviga
     isOpenedByKeyboard = _ref.isOpenedByKeyboard,
     isPopupPositioned = _ref.isPopupPositioned,
     handleClose = _ref.handleClose,
-    closeOnTab = _ref.closeOnTab;
+    closeOnTab = _ref.closeOnTab,
+    editorRef = _ref.editorRef;
   var wrapperRef = (0, _react.useRef)(null);
   var currentSelectedColumnIndex = (0, _react.useRef)(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   var currentSelectedRowIndex = (0, _react.useRef)(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  var _useState = (0, _react.useState)(editorRef.current),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    listenerTargetElement = _useState2[0];
   var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
     if (currentSelectedRowIndex.current === rowElements.length - 1) {
       currentSelectedRowIndex.current = 0;
@@ -105,7 +111,7 @@ var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNaviga
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     // set focus to current selected color swatch if only opened by keyboard
     if (isOpenedByKeyboard && isPopupPositioned) {
       // Using timeout because, we need to wait till color palette is rendered
@@ -116,9 +122,9 @@ var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNaviga
       });
     }
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -20,12 +20,16 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
     disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
     keyDownHandlerContext = _ref.keyDownHandlerContext,
     closeOnTab = _ref.closeOnTab,
-    onSelection = _ref.onSelection;
+    onSelection = _ref.onSelection,
+    editorRef = _ref.editorRef;
   var wrapperRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentSelectedItemIndex = _useState2[0],
     setCurrentSelectedItemIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(editorRef.current),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    listenerTargetElement = _useState4[0];
   var incrementIndex = (0, _react.useCallback)(function (list) {
     var currentIndex = currentSelectedItemIndex;
     var nextIndex = (currentIndex + 1) % list.length;
@@ -141,11 +145,11 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef

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

@@ -8,6 +8,7 @@ exports.ArrowKeyNavigationProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _uiReact = require("../../ui-react");
 var _ColorPaletteArrowKeyNavigationProvider = require("./ColorPaletteArrowKeyNavigationProvider");
 var _MenuArrowKeyNavigationProvider = require("./MenuArrowKeyNavigationProvider");
 var _types = require("./types");
@@ -17,13 +18,24 @@ var ArrowKeyNavigationProvider = function ArrowKeyNavigationProvider(props) {
     type = props.type,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   if (type === _types.ArrowKeyNavigationType.COLOR) {
-    return /*#__PURE__*/_react.default.createElement(_ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider, (0, _extends2.default)({
-      selectedRowIndex: props.selectedRowIndex,
-      selectedColumnIndex: props.selectedColumnIndex,
-      isOpenedByKeyboard: props.isOpenedByKeyboard,
-      isPopupPositioned: props.isPopupPositioned
-    }, restProps), children);
+    return /*#__PURE__*/_react.default.createElement(_uiReact.ReactEditorViewContext.Consumer, null, function (_ref) {
+      var editorView = _ref.editorView,
+        editorRef = _ref.editorRef;
+      return editorRef && /*#__PURE__*/_react.default.createElement(_ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider, (0, _extends2.default)({
+        selectedRowIndex: props.selectedRowIndex,
+        selectedColumnIndex: props.selectedColumnIndex,
+        isOpenedByKeyboard: props.isOpenedByKeyboard,
+        isPopupPositioned: props.isPopupPositioned,
+        editorRef: editorRef
+      }, restProps), children);
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, restProps, children);
+  return /*#__PURE__*/_react.default.createElement(_uiReact.ReactEditorViewContext.Consumer, null, function (_ref2) {
+    var editorView = _ref2.editorView,
+      editorRef = _ref2.editorRef;
+    return editorRef && /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, (0, _extends2.default)({
+      editorRef: editorRef
+    }, restProps), children);
+  });
 };
 exports.ArrowKeyNavigationProvider = ArrowKeyNavigationProvider;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.7.3",
+	"version": "72.9.0",
 	"sideEffects": false
 }

package/dist/es2019/card/index.js

@@ -1 +1 @@
-export {};
+export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';

package/dist/es2019/card/utils.js

@@ -0,0 +1,47 @@
+import { LinkMetaStep } from '@atlaskit/adf-schema/steps';
+
+/**
+ * Records metadata about the user action and input method relating to a transaction
+ * as a custom LinkStepMetadata prosemirror step so that it is preserved in
+ * the history for undo/redo
+ */
+export function addLinkMetadata(initialSelection, tr, metadata) {
+  const {
+    storedMarks
+  } = tr;
+  const pos = tr.mapping.map(initialSelection.$from.pos);
+  tr.step(new LinkMetaStep(pos, metadata));
+
+  // When you add a new step all the storedMarks are removed it
+  if (storedMarks) {
+    tr.setStoredMarks(storedMarks);
+  }
+  return tr;
+}
+export function getLinkMetadataFromTransaction(tr) {
+  return tr.steps.reduce((metadata, step) => {
+    if (!(step instanceof LinkMetaStep)) {
+      return metadata;
+    }
+    return {
+      ...metadata,
+      ...step.getMetadata()
+    };
+  }, {});
+}
+/**
+ * Adds metadata to the transaction created from a command
+ * The metadata describes the user intent and input method
+ * for executing the command
+ */
+export const commandWithMetadata = (command, metadata) => {
+  return (state, dispatch, view) => {
+    if (!dispatch) {
+      return command(state, dispatch, view);
+    }
+    return command(state, tr => {
+      addLinkMetadata(state.selection, tr, metadata);
+      dispatch(tr);
+    }, view);
+  };
+};

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-// DO NOT EMPORT ANYTHING FROM THIS FILE. USE CHILD ENTRY POINTS
+// DO NOT EMPORT ANYTHING FROM THIS FILE. USE CHILD ENTRY POINTS.
 export {};