@atlaskit/editor-common 78.31.5 → 78.33.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 78.33.0
+
+### Minor Changes
+
+- [#91653](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91653) [`57a3511f76c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57a3511f76c1) - ECA11Y-203: Added cursor back to the cell, after changing cell background
+
+## 78.32.0
+
+### Minor Changes
+
+- [#86433](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86433) [`88ca3b199a49`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/88ca3b199a49) - [ux] EDF-412 Collaborators avatars and telepointer colors are tokenised.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 78.31.5
 
 ### Patch Changes

package/dist/cjs/collab/index.js

@@ -1,19 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tintDirtyTransaction = exports.telepointerStyle = exports.isDirtyTransaction = exports.colors = exports.TELEPOINTER_DIM_CLASS = exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
+exports.tintDirtyTransaction = exports.telepointerStyle = exports.isDirtyTransaction = exports.TELEPOINTER_DIM_CLASS = exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _adfSchema = require("@atlaskit/adf-schema");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var themeColors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _tokens = require("@atlaskit/tokens");
 var _templateObject;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
 // Format of the document and its metadata returned from the collab provider
@@ -122,23 +118,18 @@ var DisconnectReason = exports.DisconnectReason = /*#__PURE__*/function (Disconn
   DisconnectReason["UNKNOWN_DISCONNECT"] = "UNKNOWN_DISCONNECT";
   return DisconnectReason;
 }({});
-// TODO: https://product-fabric.atlassian.net/browse/DSP-7269
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var colors = exports.colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(function (solid) {
-  return {
-    solid: solid,
-    selection: (0, _adfSchema.hexToRgba)(solid, 0.2)
-  };
-});
 var telepointerColorStyle = function telepointerColorStyle(color, index) {
-  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
+  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
+    colorMode = _getGlobalTheme.colorMode;
+  var backgroundStyle = colorMode === 'dark' ? "linear-gradient(to bottom, ".concat(color, " -800000%, transparent 200000%)") : "linear-gradient(to bottom, ".concat(color, " -850000%, transparent 150000%)");
+  return "\n    &.color-".concat(index, " {\n      background: ").concat(backgroundStyle, ";\n      &::after {\n        background-color: ").concat(color, ";\n        color: ", "var(--ds-text-inverse, #FFFFFF)", ";\n        border-color: ").concat(color, ";\n      }\n    }\n  ");
 };
 var TELEPOINTER_DIM_CLASS = exports.TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 
 // ED-22557: Safely convert to object styling
 // Disable top: -14px since it is necessary to align to cursor
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-var telepointerStyle = exports.telepointerStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: 0px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css
+var telepointerStyle = exports.telepointerStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: 0px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, #FFFFFF)", TELEPOINTER_DIM_CLASS, _editorSharedStyles.avatarColors.map(function (color, index) {
   return telepointerColorStyle(color, index);
 }));
 var tintKey = 'collab:isDirtyTransaction';

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.31.5";
+var packageVersion = "78.33.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.31.5";
+var packageVersion = "78.33.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -22,7 +22,8 @@ var ColorPaletteArrowKeyNavigationProvider = exports.ColorPaletteArrowKeyNavigat
     isPopupPositioned = _ref.isPopupPositioned,
     handleClose = _ref.handleClose,
     closeOnTab = _ref.closeOnTab,
-    editorRef = _ref.editorRef;
+    editorRef = _ref.editorRef,
+    ignoreEscapeKey = _ref.ignoreEscapeKey;
   var wrapperRef = (0, _react.useRef)(null);
   var currentSelectedColumnIndex = (0, _react.useRef)(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   var currentSelectedRowIndex = (0, _react.useRef)(selectedRowIndex === -1 ? 0 : selectedRowIndex);
@@ -105,7 +106,9 @@ var ColorPaletteArrowKeyNavigationProvider = exports.ColorPaletteArrowKeyNavigat
           event.preventDefault();
           break;
         case 'Escape':
-          handleClose(event);
+          if (!ignoreEscapeKey) {
+            handleClose(event);
+          }
           break;
         default:
           return;
@@ -124,7 +127,7 @@ var ColorPaletteArrowKeyNavigationProvider = exports.ColorPaletteArrowKeyNavigat
     return function () {
       listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, ignoreEscapeKey, listenerTargetElement]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

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

@@ -153,7 +153,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
         return setIsPopupOpen(false);
       },
       isOpenedByKeyboard: isOpenedByKeyboard,
-      isPopupPositioned: isPopupPositioned
+      isPopupPositioned: isPopupPositioned,
+      ignoreEscapeKey: props.returnEscToButton
     }, (0, _react2.jsx)(ColorPaletteWithListeners, {
       cols: props.cols,
       selectedColor: selectedColor,

package/dist/es2019/collab/index.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
-import { hexToRgba } from '@atlaskit/adf-schema';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import * as themeColors from '@atlaskit/theme/colors';
+import { avatarColors, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { getGlobalTheme } from '@atlaskit/tokens';
 
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
@@ -126,27 +125,27 @@ export let DisconnectReason = /*#__PURE__*/function (DisconnectReason) {
   DisconnectReason["UNKNOWN_DISCONNECT"] = "UNKNOWN_DISCONNECT";
   return DisconnectReason;
 }({});
-// TODO: https://product-fabric.atlassian.net/browse/DSP-7269
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(solid => ({
-  solid,
-  selection: hexToRgba(solid, 0.2)
-}));
-const telepointerColorStyle = (color, index) => `
-  &.color-${index} {
-    background-color: ${color.selection};
-    &::after {
-      background-color: ${color.solid};
-      color: ${"var(--ds-text-inverse, #fff)"};
-      border-color: ${color.solid};
+const telepointerColorStyle = (color, index) => {
+  const {
+    colorMode
+  } = getGlobalTheme();
+  const backgroundStyle = colorMode === 'dark' ? `linear-gradient(to bottom, ${color} -800000%, transparent 200000%)` : `linear-gradient(to bottom, ${color} -850000%, transparent 150000%)`;
+  return `
+    &.color-${index} {
+      background: ${backgroundStyle};
+      &::after {
+        background-color: ${color};
+        color: ${"var(--ds-text-inverse, #FFFFFF)"};
+        border-color: ${color};
+      }
     }
-  }
-`;
+  `;
+};
 export const TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 
 // ED-22557: Safely convert to object styling
 // Disable top: -14px since it is necessary to align to cursor
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css
 export const telepointerStyle = css`
   .ProseMirror .telepointer {
     position: relative;
@@ -165,7 +164,7 @@ export const telepointerStyle = css`
       top: -14px;
       font-size: ${relativeFontSizeToBase16(9)};
       padding: ${"var(--ds-space-025, 2px)"};
-      color: ${"var(--ds-text-inverse, white)"};
+      color: ${"var(--ds-text-inverse, #FFFFFF)"};
       left: 0px;
       border-radius: 2px 2px 2px 0;
       line-height: initial;
@@ -175,7 +174,7 @@ export const telepointerStyle = css`
       opacity: 0.2;
     }
 
-    ${colors.map((color, index) => telepointerColorStyle(color, index))};
+    ${avatarColors.map((color, index) => telepointerColorStyle(color, index))};
   }
 `;
 const tintKey = 'collab:isDirtyTransaction';

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.31.5";
+const packageVersion = "78.33.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.31.5";
+const packageVersion = "78.33.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -11,7 +11,8 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
   isPopupPositioned,
   handleClose,
   closeOnTab,
-  editorRef
+  editorRef,
+  ignoreEscapeKey
 }) => {
   const wrapperRef = useRef(null);
   const currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
@@ -93,7 +94,9 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
           event.preventDefault();
           break;
         case 'Escape':
-          handleClose(event);
+          if (!ignoreEscapeKey) {
+            handleClose(event);
+          }
           break;
         default:
           return;
@@ -112,7 +115,7 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
     return () => {
       listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, ignoreEscapeKey, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -133,7 +133,8 @@ const ColorPickerButton = props => {
       closeOnTab: true,
       handleClose: () => setIsPopupOpen(false),
       isOpenedByKeyboard: isOpenedByKeyboard,
-      isPopupPositioned: isPopupPositioned
+      isPopupPositioned: isPopupPositioned,
+      ignoreEscapeKey: props.returnEscToButton
     }, jsx(ColorPaletteWithListeners, {
       cols: props.cols,
       selectedColor: selectedColor,

package/dist/esm/collab/index.js

@@ -1,9 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-import { hexToRgba } from '@atlaskit/adf-schema';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import * as themeColors from '@atlaskit/theme/colors';
+import { avatarColors, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { getGlobalTheme } from '@atlaskit/tokens';
 
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
@@ -128,23 +127,18 @@ export var DisconnectReason = /*#__PURE__*/function (DisconnectReason) {
   DisconnectReason["UNKNOWN_DISCONNECT"] = "UNKNOWN_DISCONNECT";
   return DisconnectReason;
 }({});
-// TODO: https://product-fabric.atlassian.net/browse/DSP-7269
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(function (solid) {
-  return {
-    solid: solid,
-    selection: hexToRgba(solid, 0.2)
-  };
-});
 var telepointerColorStyle = function telepointerColorStyle(color, index) {
-  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
+  var _getGlobalTheme = getGlobalTheme(),
+    colorMode = _getGlobalTheme.colorMode;
+  var backgroundStyle = colorMode === 'dark' ? "linear-gradient(to bottom, ".concat(color, " -800000%, transparent 200000%)") : "linear-gradient(to bottom, ".concat(color, " -850000%, transparent 150000%)");
+  return "\n    &.color-".concat(index, " {\n      background: ").concat(backgroundStyle, ";\n      &::after {\n        background-color: ").concat(color, ";\n        color: ", "var(--ds-text-inverse, #FFFFFF)", ";\n        border-color: ").concat(color, ";\n      }\n    }\n  ");
 };
 export var TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 
 // ED-22557: Safely convert to object styling
 // Disable top: -14px since it is necessary to align to cursor
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: 0px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css
+export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: 0px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, #FFFFFF)", TELEPOINTER_DIM_CLASS, avatarColors.map(function (color, index) {
   return telepointerColorStyle(color, index);
 }));
 var tintKey = 'collab:isDirtyTransaction';

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.31.5";
+var packageVersion = "78.33.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -15,7 +15,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.31.5";
+var packageVersion = "78.33.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -12,7 +12,8 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
     isPopupPositioned = _ref.isPopupPositioned,
     handleClose = _ref.handleClose,
     closeOnTab = _ref.closeOnTab,
-    editorRef = _ref.editorRef;
+    editorRef = _ref.editorRef,
+    ignoreEscapeKey = _ref.ignoreEscapeKey;
   var wrapperRef = useRef(null);
   var currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   var currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
@@ -95,7 +96,9 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
           event.preventDefault();
           break;
         case 'Escape':
-          handleClose(event);
+          if (!ignoreEscapeKey) {
+            handleClose(event);
+          }
           break;
         default:
           return;
@@ -114,7 +117,7 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
     return function () {
       listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, ignoreEscapeKey, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -146,7 +146,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
         return setIsPopupOpen(false);
       },
       isOpenedByKeyboard: isOpenedByKeyboard,
-      isPopupPositioned: isPopupPositioned
+      isPopupPositioned: isPopupPositioned,
+      ignoreEscapeKey: props.returnEscToButton
     }, jsx(ColorPaletteWithListeners, {
       cols: props.cols,
       selectedColor: selectedColor,

package/dist/types/collab/index.d.ts

@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
+import { token } from '@atlaskit/tokens';
 import type { Providers } from '../provider-factory';
 export type NewCollabSyncUpErrorAttributes = {
     lengthOfUnconfirmedSteps?: number;
@@ -389,11 +390,7 @@ export interface CollabAnalyticsProps {
 export interface CollabEventLocalStepData {
     steps: Array<Step>;
 }
-export interface Color {
-    solid: string;
-    selection: string;
-}
-export declare const colors: Color[];
+export type Color = ReturnType<typeof token>;
 export declare const TELEPOINTER_DIM_CLASS = "telepointer-dim";
 export declare const telepointerStyle: import("@emotion/react").SerializedStyles;
 export declare const isDirtyTransaction: (tr: Transaction | ReadonlyTransaction) => boolean;

package/dist/types/types/floating-toolbar.d.ts

@@ -167,6 +167,7 @@ type FloatingToolbarSelectBase<T extends {}, V = SelectOption> = {
     hideExpandIcon?: boolean;
     defaultValue?: V | null;
     placeholder?: string;
+    returnEscToButton?: boolean;
     onChange: (selected: V) => T;
     filterOption?: ((option: V, rawInput: string) => boolean) | null;
 };

package/dist/types/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ColorPaletteArrowKeyNavigationProps } from '../types';
+import type { ColorPaletteArrowKeyNavigationProps } from '../types';
 /**
  * This component is a wrapper for color picker which listens to keydown events of children
  * and handles arrow key navigation
  */
-export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;
+export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, ignoreEscapeKey, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;

package/dist/types/ui-menu/ArrowKeyNavigationProvider/types.d.ts

@@ -21,6 +21,7 @@ export type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigation
     handleClose?: SimpleEventHandler<KeyboardEvent>;
     closeOnTab?: boolean;
     editorRef: React.RefObject<HTMLDivElement>;
+    ignoreEscapeKey?: boolean | false;
 };
 export type MenuArrowKeyNavigationOptions = {
     type: ArrowKeyNavigationType.MENU;

package/dist/types/ui-menu/ColorPickerButton/index.d.ts

@@ -26,5 +26,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsE
      */
     skipFocusButtonAfterPick?: boolean | undefined;
     absoluteOffset?: PopupPosition | undefined;
-}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "size" | "currentColor" | "onChange" | "title" | "key" | "placement" | "alignX" | "absoluteOffset" | "analyticsContext" | "cols" | "isAriaExpanded" | "hexToPaletteColor" | "paletteColorTooltipMessages" | "colorPalette" | "mountPoint" | "setDisableParentScroll" | "skipFocusButtonAfterPick"> & React.RefAttributes<any>>;
+    returnEscToButton?: boolean | undefined;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "size" | "currentColor" | "onChange" | "title" | "key" | "placement" | "alignX" | "absoluteOffset" | "analyticsContext" | "cols" | "isAriaExpanded" | "returnEscToButton" | "hexToPaletteColor" | "paletteColorTooltipMessages" | "colorPalette" | "mountPoint" | "setDisableParentScroll" | "skipFocusButtonAfterPick"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/collab/index.d.ts

@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
+import { token } from '@atlaskit/tokens';
 import type { Providers } from '../provider-factory';
 export type NewCollabSyncUpErrorAttributes = {
     lengthOfUnconfirmedSteps?: number;
@@ -389,11 +390,7 @@ export interface CollabAnalyticsProps {
 export interface CollabEventLocalStepData {
     steps: Array<Step>;
 }
-export interface Color {
-    solid: string;
-    selection: string;
-}
-export declare const colors: Color[];
+export type Color = ReturnType<typeof token>;
 export declare const TELEPOINTER_DIM_CLASS = "telepointer-dim";
 export declare const telepointerStyle: import("@emotion/react").SerializedStyles;
 export declare const isDirtyTransaction: (tr: Transaction | ReadonlyTransaction) => boolean;

package/dist/types-ts4.5/types/floating-toolbar.d.ts

@@ -167,6 +167,7 @@ type FloatingToolbarSelectBase<T extends {}, V = SelectOption> = {
     hideExpandIcon?: boolean;
     defaultValue?: V | null;
     placeholder?: string;
+    returnEscToButton?: boolean;
     onChange: (selected: V) => T;
     filterOption?: ((option: V, rawInput: string) => boolean) | null;
 };

package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ColorPaletteArrowKeyNavigationProps } from '../types';
+import type { ColorPaletteArrowKeyNavigationProps } from '../types';
 /**
  * This component is a wrapper for color picker which listens to keydown events of children
  * and handles arrow key navigation
  */
-export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;
+export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, ignoreEscapeKey, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;

package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/types.d.ts

@@ -21,6 +21,7 @@ export type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigation
     handleClose?: SimpleEventHandler<KeyboardEvent>;
     closeOnTab?: boolean;
     editorRef: React.RefObject<HTMLDivElement>;
+    ignoreEscapeKey?: boolean | false;
 };
 export type MenuArrowKeyNavigationOptions = {
     type: ArrowKeyNavigationType.MENU;

package/dist/types-ts4.5/ui-menu/ColorPickerButton/index.d.ts

@@ -26,5 +26,6 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsE
      */
     skipFocusButtonAfterPick?: boolean | undefined;
     absoluteOffset?: PopupPosition | undefined;
-}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "size" | "currentColor" | "onChange" | "title" | "key" | "placement" | "alignX" | "absoluteOffset" | "analyticsContext" | "cols" | "isAriaExpanded" | "hexToPaletteColor" | "paletteColorTooltipMessages" | "colorPalette" | "mountPoint" | "setDisableParentScroll" | "skipFocusButtonAfterPick"> & React.RefAttributes<any>>;
+    returnEscToButton?: boolean | undefined;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "size" | "currentColor" | "onChange" | "title" | "key" | "placement" | "alignX" | "absoluteOffset" | "analyticsContext" | "cols" | "isAriaExpanded" | "returnEscToButton" | "hexToPaletteColor" | "paletteColorTooltipMessages" | "colorPalette" | "mountPoint" | "setDisableParentScroll" | "skipFocusButtonAfterPick"> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.31.5",
+  "version": "78.33.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -108,7 +108,7 @@
     "@atlaskit/editor-json-transformer": "^8.11.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "4.0.0",
-    "@atlaskit/editor-shared-styles": "^2.9.0",
+    "@atlaskit/editor-shared-styles": "^2.10.0",
     "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",