@atlaskit/editor-common 82.2.2 → 82.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-common
 
+## 82.3.0
+
+### Minor Changes
+
+- [#108458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108458)
+  [`07ff840152c4a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07ff840152c4a) -
+  [ED-23469] Add elementDragAndDrop key for platform_editor_element_drag_and_drop feature gate
+- [#107856](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107856)
+  [`7ba2db81f78ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ba2db81f78ac) -
+  [ux] [ED-23348] Make transparent option in highlight color palette more obvious with a diagonal
+  line.
+
+### Patch Changes
+
+- [#109540](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109540)
+  [`2267be0c78aea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2267be0c78aea) -
+  [ux] Fix hover and remove interactions with new macro UX updates and update vr test snapshots
+- [#109969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109969)
+  [`52590a0b562ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52590a0b562ef) -
+  ED-23690 Adds an attribute to annotation analytic events with the name of nodes inside the
+  annotation range
+- Updated dependencies
+
 ## 82.2.2
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -62,7 +62,6 @@ function ExtensionWithPluginState(props) {
   editorAppearance !== 'full-width';
   var classNames = (0, _classnames2.default)('extension-container', 'block', shadowClassNames, (0, _defineProperty2.default)({
     'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
-    'with-border': showMacroInteractionDesignUpdates,
     'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,

package/dist/cjs/extensibility/Extension/Extension/styles.js

@@ -17,19 +17,15 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault
   '.extension-overflow-wrapper:not(.with-body)': {
     overflowX: 'auto'
   },
-  '&.with-border': {
-    border: "1px solid transparent" // adding this so macro doesn't jump when hover border is shown
-  },
   '&.with-bodied-border': {
-    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
   },
   '&.with-hover-border': {
-    border: "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
   },
   '&.with-margin-styles': {
     margin: "0 ".concat("var(--ds-space-negative-150, -12px)"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    padding: '0 10px' // need exact number here to match editor elements' width
+    padding: "0 ".concat("var(--ds-space-150, 12px)")
   }
 });
 var header = exports.header = (0, _react.css)({
@@ -63,7 +59,6 @@ var contentWrapper = exports.contentWrapper = (0, _react.css)({
 });
 var overflowWrapperStyles = exports.overflowWrapperStyles = (0, _react.css)({
   '&.with-margin-styles': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    margin: "0 -10px" // need exact number here to match editor elements' width
+    margin: "0 ".concat("var(--ds-space-negative-150, -12px)")
   }
 });

package/dist/cjs/extensibility/Extension/InlineExtension/index.js

@@ -35,7 +35,6 @@ var InlineExtension = function InlineExtension(props) {
     'with-overlay': !showMacroInteractionDesignUpdates,
     'with-children': hasChildren,
     'with-danger-overlay': showMacroInteractionDesignUpdates,
-    'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
   var rendererContainerWidth = widthState ? widthState.width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : 0;

package/dist/cjs/extensibility/Extension/InlineExtension/styles.js

@@ -24,11 +24,8 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault
     padding: 0,
     background: "var(--ds-background-neutral-subtle, white)"
   },
-  '&.with-border': {
-    border: "1px solid transparent" // adding this so macro doesn't jump when hover border is shown
-  },
   '&.with-hover-border': {
-    border: "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
   }
 });
 var inlineWrapperStyles = exports.inlineWrapperStyles = (0, _react.css)({

package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -42,11 +42,8 @@ var labelStyles = (0, _react2.css)({
     background: "var(--ds-surface, ".concat(_colors.N0, ")")
   },
   '&.bodied-border': {
-    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
-  },
-  // to account for bodied having borders now - adding this to help with less conditional styling
-  border: '1px solid transparent',
-  borderBottom: 'none'
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+  }
 });
 var textStyles = (0, _react2.css)({
   fontSize: '14px',

package/dist/cjs/extensibility/MultiBodiedExtension/styles.js

@@ -27,10 +27,10 @@ var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _r
     paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
   },
   '&.with-border': {
-    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
   },
   '&.with-hover-border': {
-    border: "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
   },
   '&.with-padding-background-styles': {
     padding: "var(--ds-space-100, 8px)",

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,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 = "82.2.2";
+var packageVersion = "82.3.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 = "82.2.2";
+var packageVersion = "82.3.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles = require("./styles");
@@ -23,12 +24,60 @@ 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; }
 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 Color = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Color, _PureComponent);
-  var _super = _createSuper(Color);
-  function Color() {
+function FunctionalComponentColor(props) {
+  var autoFocus = props.autoFocus,
+    tabIndex = props.tabIndex,
+    value = props.value,
+    label = props.label,
+    isSelected = props.isSelected,
+    borderColor = props.borderColor,
+    _props$checkMarkColor = props.checkMarkColor,
+    checkMarkColor = _props$checkMarkColor === void 0 ? _colors.N0 : _props$checkMarkColor,
+    hexToPaletteColor = props.hexToPaletteColor,
+    decorator = props.decorator;
+  var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+  var onMouseDown = function onMouseDown(e) {
+    e.preventDefault();
+  };
+  var onClick = function onClick(e) {
+    var onClick = props.onClick,
+      value = props.value,
+      label = props.label;
+    e.preventDefault();
+    onClick(value, label);
+  };
+  return (0, _react2.jsx)(_tooltip.default, {
+    content: label
+  }, (0, _react2.jsx)("span", {
+    css: _styles.buttonWrapperStyle
+  }, (0, _react2.jsx)("button", {
+    type: "button",
+    css: _styles.buttonStyle,
+    "aria-label": label,
+    role: "radio",
+    "aria-checked": isSelected,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "".concat(isSelected ? 'selected' : ''),
+    style: {
+      backgroundColor: colorStyle || 'transparent',
+      border: "1px solid ".concat(borderColor)
+    },
+    autoFocus: autoFocus
+  }, isSelected && (0, _react2.jsx)(_done.default, {
+    primaryColor: checkMarkColor,
+    label: ""
+  }), decorator)));
+}
+var ClassComponentColor = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(ClassComponentColor, _PureComponent);
+  var _super = _createSuper(ClassComponentColor);
+  function ClassComponentColor() {
     var _this;
-    (0, _classCallCheck2.default)(this, Color);
+    (0, _classCallCheck2.default)(this, ClassComponentColor);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -46,7 +95,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
     });
     return _this;
   }
-  (0, _createClass2.default)(Color, [{
+  (0, _createClass2.default)(ClassComponentColor, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
@@ -87,6 +136,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
       }))));
     }
   }]);
-  return Color;
+  return ClassComponentColor;
 }(_react.PureComponent);
+var Color = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.transparent-diagonal-decorator') ? FunctionalComponentColor : ClassComponentColor;
 var _default = exports.default = Color;

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

@@ -4,19 +4,55 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightColorPalette = exports.REMOVE_HIGHLIGHT_COLOR = void 0;
+exports.highlightColorPalette = exports.REMOVE_HIGHLIGHT_COLOR = exports.EditorDiagonalLineIcon = void 0;
+var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _tokens = require("@atlaskit/tokens");
 var _common = require("./common");
 var _getColorMessage = _interopRequireDefault(require("./getColorMessage"));
 var _paletteMessages = _interopRequireDefault(require("./paletteMessages"));
 var _textColorPalette = require("./textColorPalette");
+/** @jsx jsx */
+
 var REMOVE_HIGHLIGHT_COLOR = exports.REMOVE_HIGHLIGHT_COLOR = '#00000000';
+var DiagonalLineGlyph = function DiagonalLineGlyph() {
+  return (0, _react.jsx)("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react.jsx)("rect", {
+    width: "24",
+    height: "24",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), (0, _react.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.2038 7.70388C17.5955 8.09565 17.5941 8.73128 17.2005 9.12127L9.1213 17.1277C8.73027 17.5152 8.09958 17.5138 7.71031 17.1245C7.31854 16.7328 7.31997 16.0971 7.71351 15.7071L15.7928 7.70069C16.1838 7.31318 16.8145 7.31461 17.2038 7.70388Z",
+    fill: "currentColor",
+    fillOpacity: "0.5"
+  }));
+};
+var EditorDiagonalLineIcon = exports.EditorDiagonalLineIcon = function EditorDiagonalLineIcon() {
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  var primaryColor = colorMode === 'dark' ? "var(--ds-background-accent-gray-bolder, #626F86)" : "var(--ds-background-accent-gray-subtle, #8590A2)";
+  return (0, _react.jsx)(_icon.default, {
+    glyph: DiagonalLineGlyph,
+    label: "",
+    primaryColor: primaryColor
+  });
+};
 var highlightColorPalette = exports.highlightColorPalette = [{
   value: REMOVE_HIGHLIGHT_COLOR,
   label: 'No color',
   // Mostly informative, only used for analytics
   border: _common.DEFAULT_BORDER_COLOR,
-  message: (0, _getColorMessage.default)(_paletteMessages.default, 'no-color')
+  message: (0, _getColorMessage.default)(_paletteMessages.default, 'no-color'),
+  decorator: (0, _react.jsx)(EditorDiagonalLineIcon, null)
 }];
 _adfSchema.backgroundColorPalette.forEach(function (label, color) {
   highlightColorPalette.push((0, _textColorPalette.mapPaletteColor)(label, color));

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

@@ -72,7 +72,8 @@ var ColorPalette = function ColorPalette(props) {
       var value = _ref.value,
         label = _ref.label,
         border = _ref.border,
-        message = _ref.message;
+        message = _ref.message,
+        decorator = _ref.decorator;
       if (paletteColorTooltipMessages) {
         if (tokenTheme === 'dark') {
           message = (0, _getColorMessage.default)(paletteColorTooltipMessages.dark, value.toUpperCase());
@@ -89,7 +90,8 @@ var ColorPalette = function ColorPalette(props) {
         onClick: onClick,
         isSelected: value === selectedColor,
         checkMarkColor: getCheckMarkColor(value, useIconToken),
-        hexToPaletteColor: hexToPaletteColor
+        hexToPaletteColor: hexToPaletteColor,
+        decorator: decorator
       });
     }));
   }));

package/dist/cjs/utils/annotation/index.js

@@ -1,12 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.canApplyAnnotationOnRange = void 0;
 exports.containsAnyAnnotations = containsAnyAnnotations;
 exports.getAnnotationIdsFromRange = void 0;
+exports.getRangeInlineNodeNames = getRangeInlineNodeNames;
 exports.hasAnnotationMark = hasAnnotationMark;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var canApplyAnnotationOnRange = exports.canApplyAnnotationOnRange = function canApplyAnnotationOnRange(rangeSelection, doc, schema) {
   var from = rangeSelection.from,
@@ -98,4 +101,25 @@ function containsAnyAnnotations(slice, state) {
     });
   });
   return hasAnnotation;
+}
+
+/**
+ * This returns a list of node names that are inline nodes in the range.
+ */
+function getRangeInlineNodeNames(_ref) {
+  var doc = _ref.doc,
+    pos = _ref.pos;
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return undefined;
+  }
+  var nodeNames = new Set();
+  doc.nodesBetween(pos.from, pos.to, function (node) {
+    if (node.isInline) {
+      nodeNames.add(node.type.name);
+    }
+  });
+
+  // We sort the list alphabetically to make human consumption of the list easier (in tools like the analytics extension)
+  var sortedNames = (0, _toConsumableArray2.default)(nodeNames).sort();
+  return sortedNames;
 }

package/dist/cjs/utils/index.js

@@ -498,6 +498,12 @@ Object.defineProperty(exports, "getPropsDifference", {
     return _compareProps.getPropsDifference;
   }
 });
+Object.defineProperty(exports, "getRangeInlineNodeNames", {
+  enumerable: true,
+  get: function get() {
+    return _annotation.getRangeInlineNodeNames;
+  }
+});
 Object.defineProperty(exports, "getResponseEndTime", {
   enumerable: true,
   get: function get() {

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -51,7 +51,6 @@ function ExtensionWithPluginState(props) {
   editorAppearance !== 'full-width';
   const classNames = classnames('extension-container', 'block', shadowClassNames, {
     'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
-    'with-border': showMacroInteractionDesignUpdates,
     'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -11,19 +11,15 @@ export const wrapperStyle = css(wrapperDefault, {
   '.extension-overflow-wrapper:not(.with-body)': {
     overflowX: 'auto'
   },
-  '&.with-border': {
-    border: `1px solid transparent` // adding this so macro doesn't jump when hover border is shown
-  },
   '&.with-bodied-border': {
-    border: `1px solid ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
   },
   '&.with-hover-border': {
-    border: `1px solid ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
   },
   '&.with-margin-styles': {
     margin: `0 ${"var(--ds-space-negative-150, -12px)"}`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    padding: '0 10px' // need exact number here to match editor elements' width
+    padding: `0 ${"var(--ds-space-150, 12px)"}`
   }
 });
 export const header = css({
@@ -57,7 +53,6 @@ export const contentWrapper = css({
 });
 export const overflowWrapperStyles = css({
   '&.with-margin-styles': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    margin: `0 -10px` // need exact number here to match editor elements' width
+    margin: `0 ${"var(--ds-space-negative-150, -12px)"}`
   }
 });

package/dist/es2019/extensibility/Extension/InlineExtension/index.js

@@ -27,7 +27,6 @@ const InlineExtension = props => {
     'with-overlay': !showMacroInteractionDesignUpdates,
     'with-children': hasChildren,
     'with-danger-overlay': showMacroInteractionDesignUpdates,
-    'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
   const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;

package/dist/es2019/extensibility/Extension/InlineExtension/styles.js

@@ -18,11 +18,8 @@ export const wrapperStyle = css(wrapperDefault, {
     padding: 0,
     background: "var(--ds-background-neutral-subtle, white)"
   },
-  '&.with-border': {
-    border: `1px solid transparent` // adding this so macro doesn't jump when hover border is shown
-  },
   '&.with-hover-border': {
-    border: `1px solid ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
   }
 });
 export const inlineWrapperStyles = css({

package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -34,11 +34,8 @@ const labelStyles = css({
     background: `var(--ds-surface, ${N0})`
   },
   '&.bodied-border': {
-    border: `1px solid ${`var(--ds-border, ${N30})`}`
-  },
-  // to account for bodied having borders now - adding this to help with less conditional styling
-  border: '1px solid transparent',
-  borderBottom: 'none'
+    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+  }
 });
 const textStyles = css({
   fontSize: '14px',

package/dist/es2019/extensibility/MultiBodiedExtension/styles.js

@@ -22,10 +22,10 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
     paddingTop: `${"var(--ds-space-100, 8px)"} !important`
   },
   '&.with-border': {
-    border: `1px solid ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
   },
   '&.with-hover-border': {
-    border: `1px solid ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
   },
   '&.with-padding-background-styles': {
     padding: "var(--ds-space-100, 8px)",

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 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 = "82.2.2";
+const packageVersion = "82.3.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 = "82.2.2";
+const packageVersion = "82.3.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -3,10 +3,69 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle } from './styles';
-class Color extends PureComponent {
+function FunctionalComponentColor(props) {
+  const {
+    autoFocus,
+    tabIndex,
+    value,
+    label,
+    isSelected,
+    borderColor,
+    /** this is not new usage - old code extracted from editor-core */
+    /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+    checkMarkColor = N0,
+    /**
+     * When hexToPaletteColor prop is set,
+     * it will be used to get background color style based on
+     * value (which will be hexcode) prop
+     */
+    hexToPaletteColor,
+    decorator
+  } = props;
+  const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+  const onMouseDown = e => {
+    e.preventDefault();
+  };
+  const onClick = e => {
+    const {
+      onClick,
+      value,
+      label
+    } = props;
+    e.preventDefault();
+    onClick(value, label);
+  };
+  return jsx(Tooltip, {
+    content: label
+  }, jsx("span", {
+    css: buttonWrapperStyle
+  }, jsx("button", {
+    type: "button",
+    css: buttonStyle,
+    "aria-label": label,
+    role: "radio",
+    "aria-checked": isSelected,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: `${isSelected ? 'selected' : ''}`,
+    style: {
+      backgroundColor: colorStyle || 'transparent',
+      border: `1px solid ${borderColor}`
+    },
+    autoFocus: autoFocus
+  }, isSelected && jsx(EditorDoneIcon, {
+    primaryColor: checkMarkColor,
+    label: ""
+  }), decorator)));
+}
+class ClassComponentColor extends PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "onMouseDown", e => {
@@ -68,4 +127,5 @@ class Color extends PureComponent {
     }))));
   }
 }
+const Color = getBooleanFF('platform.editor.transparent-diagonal-decorator') ? FunctionalComponentColor : ClassComponentColor;
 export default Color;

package/dist/es2019/ui-color/ColorPalette/Palettes/highlightColorPalette.js

@@ -1,15 +1,50 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { backgroundColorPalette } from '@atlaskit/adf-schema';
+import Icon from '@atlaskit/icon';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { DEFAULT_BORDER_COLOR } from './common';
 import getColorMessage from './getColorMessage';
 import paletteMessages from './paletteMessages';
 import { mapPaletteColor } from './textColorPalette';
 export const REMOVE_HIGHLIGHT_COLOR = '#00000000';
+const DiagonalLineGlyph = () => jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, jsx("rect", {
+  width: "24",
+  height: "24",
+  fill: "white",
+  fillOpacity: "0.01"
+}), jsx("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M17.2038 7.70388C17.5955 8.09565 17.5941 8.73128 17.2005 9.12127L9.1213 17.1277C8.73027 17.5152 8.09958 17.5138 7.71031 17.1245C7.31854 16.7328 7.31997 16.0971 7.71351 15.7071L15.7928 7.70069C16.1838 7.31318 16.8145 7.31461 17.2038 7.70388Z",
+  fill: "currentColor",
+  fillOpacity: "0.5"
+}));
+export const EditorDiagonalLineIcon = () => {
+  const {
+    colorMode
+  } = useThemeObserver();
+  const primaryColor = colorMode === 'dark' ? "var(--ds-background-accent-gray-bolder, #626F86)" : "var(--ds-background-accent-gray-subtle, #8590A2)";
+  return jsx(Icon, {
+    glyph: DiagonalLineGlyph,
+    label: "",
+    primaryColor: primaryColor
+  });
+};
 export const highlightColorPalette = [{
   value: REMOVE_HIGHLIGHT_COLOR,
   label: 'No color',
   // Mostly informative, only used for analytics
   border: DEFAULT_BORDER_COLOR,
-  message: getColorMessage(paletteMessages, 'no-color')
+  message: getColorMessage(paletteMessages, 'no-color'),
+  decorator: jsx(EditorDiagonalLineIcon, null)
 }];
 backgroundColorPalette.forEach((label, color) => {
   highlightColorPalette.push(mapPaletteColor(label, color));

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

@@ -67,7 +67,8 @@ const ColorPalette = props => {
     value,
     label,
     border,
-    message
+    message,
+    decorator
   }) => {
     if (paletteColorTooltipMessages) {
       if (tokenTheme === 'dark') {
@@ -85,7 +86,8 @@ const ColorPalette = props => {
       onClick: onClick,
       isSelected: value === selectedColor,
       checkMarkColor: getCheckMarkColor(value, useIconToken),
-      hexToPaletteColor: hexToPaletteColor
+      hexToPaletteColor: hexToPaletteColor,
+      decorator: decorator
     });
   }))));
 };