@atlaskit/editor-common 78.15.0 → 78.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 78.17.0
+
+### Minor Changes
+
+- [#81734](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81734) [`1148ef3d8a84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1148ef3d8a84) - [ux] lozenge trash interaction, hover overlay removal, and fix label text truncation
+
+## 78.16.0
+
+### Minor Changes
+
+- [#82499](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82499) [`cbd66fd38b62`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cbd66fd38b62) - Add option to disable strikethrough on text-formatting via disableStrikethrough.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 78.15.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -126,9 +126,6 @@
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../design-system/tag/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },

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

@@ -60,16 +60,21 @@ function ExtensionWithPluginState(props) {
   // Extension breakout state should not be respected when the editor appearance is full-width mode
   editorAppearance !== 'full-width';
   var classNames = (0, _classnames2.default)('extension-container', 'block', shadowClassNames, (0, _defineProperty2.default)({
-    'with-overlay': !hasBody,
+    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates,
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
     'without-frame': removeBorder
   }, _styles2.widerLayoutClassName, shouldBreakout));
   var headerClassNames = (0, _classnames2.default)({
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  var contentClassNames = (0, _classnames2.default)({
+  var newContentClassNames = (0, _classnames2.default)({
     'remove-padding': showMacroInteractionDesignUpdates
   });
+  var contentClassNames = (0, _classnames2.default)('extension-content', 'block', {
+    'remove-border': showMacroInteractionDesignUpdates
+  });
   var customContainerStyles = {
     width: '100%'
   };
@@ -103,7 +108,7 @@ function ExtensionWithPluginState(props) {
     className: classNames,
     css: _styles2.wrapperStyle,
     style: customContainerStyles,
-    onMouseOver: function onMouseOver() {
+    onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },
     onMouseLeave: function onMouseLeave() {
@@ -124,11 +129,11 @@ function ExtensionWithPluginState(props) {
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && (0, _react2.jsx)("div", {
     css: newContentStyles,
-    className: contentClassNames
+    className: newContentClassNames
   }, (0, _react2.jsx)("div", {
     css: _styles2.content,
     ref: handleContentDOMRef,
-    className: "extension-content block"
+    className: contentClassNames
   })))));
 }
 var Extension = function Extension(props) {

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

@@ -16,6 +16,12 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault
   width: '100%',
   '.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-hover-border': {
+    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
   }
 });
 var header = exports.header = (0, _react.css)({
@@ -34,7 +40,10 @@ var content = exports.content = (0, _react.css)({
   border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
-  width: '100%'
+  width: '100%',
+  '&.remove-border': {
+    border: 'none'
+  }
 });
 var contentWrapper = exports.contentWrapper = (0, _react.css)({
   padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),

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

@@ -46,7 +46,7 @@ var InlineExtension = function InlineExtension(props) {
   }), (0, _react2.jsx)("div", {
     css: [_styles2.wrapperStyle, extendedInlineExtension && _styles2.inlineWrapperStyels],
     className: "extension-container inline ".concat(className),
-    onMouseOver: function onMouseOver() {
+    onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },
     onMouseLeave: function onMouseLeave() {

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.labelStyles = exports.ExtensionLabel = void 0;
+var _react = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
+var labelStyles = exports.labelStyles = (0, _react.css)({
+  display: 'inline-flex',
+  width: 'max-content',
+  justifyContent: 'left',
+  position: 'absolute',
+  // Unfortunately, these need to be these exact numbers - otherwise there will be a gap/noticeable overlap
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  top: '-18px',
+  '&.inline-extension': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '-17px'
+  },
+  background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(_colors.N300, ")"),
+  color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+  '&.selected': {
+    backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+    color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
+  },
+  borderRadius: "var(--ds-border-radius, 3px)",
+  lineHeight: 1,
+  marginLeft: "var(--ds-space-150, 12px)"
+});
+var textStyles = (0, _react.css)({
+  fontSize: '14px',
+  fontWeight: 'normal',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
+var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
+  var text = _ref.text,
+    extensionName = _ref.extensionName,
+    isNodeSelected = _ref.isNodeSelected,
+    customContainerStyles = _ref.customContainerStyles;
+  var classNames = (0, _classnames.default)('extension-title', 'extension-label', {
+    'inline-extension': extensionName === 'inlineExtension',
+    selected: isNodeSelected
+  });
+  return (0, _react.jsx)("div", {
+    style: customContainerStyles
+  }, (0, _react.jsx)("span", {
+    "data-testid": "new-lozenge",
+    css: labelStyles,
+    className: classNames
+  }, (0, _react.jsx)("span", {
+    css: textStyles
+  }, text)));
+};

package/dist/cjs/extensibility/Extension/{LozengeComponent.js → Lozenge/LozengeComponent.js}

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.LozengeComponent = exports.ICON_SIZE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
-var _tag = require("@atlaskit/tag");
-var _styles = require("./styles");
+var _styles = require("../styles");
+var _ExtensionLabel = require("./ExtensionLabel");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
 var ICON_SIZE = exports.ICON_SIZE = 24;
@@ -29,18 +28,12 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
     isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates && (isNodeHovered || isNodeSelected)) {
-    var lozengeClassNames = (0, _classnames.default)('extension-title', {
-      'inline-extension': extensionName === 'inlineExtension'
-    });
-    return (0, _react.jsx)("div", {
-      className: lozengeClassNames,
-      css: _styles.lozengeWrapper,
-      "data-testid": "new-lozenge",
-      style: customContainerStyles
-    }, (0, _react.jsx)(_tag.SimpleTag, {
+    return (0, _react.jsx)(_ExtensionLabel.ExtensionLabel, {
       text: capitalizedTitle,
-      color: isNodeSelected ? 'blueLight' : 'greyLight'
-    }));
+      extensionName: extensionName,
+      isNodeSelected: isNodeSelected,
+      customContainerStyles: customContainerStyles
+    });
   } else if (!showMacroInteractionDesignUpdates) {
     var isBlockExtension = extensionName === 'extension';
     return (0, _react.jsx)("div", {

package/dist/cjs/extensibility/Extension/{Lozenge.js → Lozenge/index.js}

@@ -16,9 +16,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _utils = require("../../utils");
+var _utils = require("../../../utils");
+var _styles = require("../styles");
 var _LozengeComponent = require("./LozengeComponent");
-var _styles = require("./styles");
 var _excluded = ["url"];
 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 */

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "BODIED_EXT_PADDING", {
     return _styles.BODIED_EXT_PADDING;
   }
 });
-exports.overlay = exports.lozengeWrapper = void 0;
+exports.overlay = void 0;
 Object.defineProperty(exports, "padding", {
   enumerable: true,
   get: function get() {
@@ -69,16 +69,4 @@ var styledImage = exports.styledImage = (0, _react.css)({
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'lozenge-image'
-});
-var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)({
-  display: 'flex',
-  justifyContent: 'left',
-  width: '100%',
-  marginLeft: "var(--ds-space-050, 4px)",
-  position: 'absolute',
-  top: "var(--ds-space-negative-300, -24px)",
-  '&.inline-extension': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    top: '-23px' // Unfortunately, this needs to be this exact number - otherwise there will be a gap/noticeable overlap
-  }
 });

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

@@ -101,7 +101,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var articleRef = _react.default.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
-  var containerCssExtended = (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")"), (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMargins)));
+  var containerCssExtended = (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")"), (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)));
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -118,13 +118,16 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     mbeWrapperStyles = breakoutStyles;
   }
   var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
-    'remove-margin-top': showMacroInteractionDesignUpdates
+    'remove-margin-top': showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates,
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
   var containerClassNames = (0, _classnames.default)('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
   });
   var navigationClassNames = (0, _classnames.default)('multiBodiedExtension--navigation', {
-    'remove-margins': showMacroInteractionDesignUpdates
+    'remove-margins': showMacroInteractionDesignUpdates,
+    'remove-border': showMacroInteractionDesignUpdates
   });
   var handleMouseEvent = function handleMouseEvent(didHover) {
     if (setIsNodeHovered) {
@@ -142,7 +145,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     css: _styles.mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles,
-    onMouseOver: function onMouseOver() {
+    onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },
     onMouseLeave: function onMouseLeave() {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mbeExtensionWrapperCSS = void 0;
 var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../Extension/styles");
 // Wrapper the extension title and extensionContainer
 var mbeExtensionWrapperCSS = exports.mbeExtensionWrapperCSS = (0, _react.css)(_styles.wrapperDefault, {
@@ -22,5 +23,11 @@ var mbeExtensionWrapperCSS = exports.mbeExtensionWrapperCSS = (0, _react.css)(_s
     marginLeft: "var(--ds-space-050, 4px)".concat(" !important"),
     marginRight: "var(--ds-space-100, 8px)",
     paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  '&.with-border': {
+    border: "1px solid ".concat("var(--ds-border-inverse, ".concat(_colors.N0, ")")) // adding this so macro doesn't jump when hover border is shown
+  },
+  '&.with-hover-border': {
+    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
   }
 });

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.15.0";
+var packageVersion = "78.17.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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sharedMultiBodiedExtensionStyles = exports.removeMargins = void 0;
+exports.sharedMultiBodiedExtensionStyles = exports.removeMarginsAndBorder = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
@@ -48,6 +48,9 @@ var mbeNavigation = (0, _react.css)({
   '&.remove-margins': {
     marginLeft: 0,
     marginRight: 0
+  },
+  '&.remove-border': {
+    border: 'none'
   }
 });
 var extensionFrameContent = (0, _react.css)({
@@ -72,9 +75,10 @@ var extensionFrameContent = (0, _react.css)({
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
   }
 });
-var removeMargins = exports.removeMargins = (0, _react.css)({
+var removeMarginsAndBorder = exports.removeMarginsAndBorder = (0, _react.css)({
   marginLeft: 0,
-  marginRight: 0
+  marginRight: 0,
+  border: 'none'
 });
 var sharedMultiBodiedExtensionStyles = exports.sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,

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

@@ -49,7 +49,9 @@ function ExtensionWithPluginState(props) {
   // Extension breakout state should not be respected when the editor appearance is full-width mode
   editorAppearance !== 'full-width';
   const classNames = classnames('extension-container', 'block', shadowClassNames, {
-    'with-overlay': !hasBody,
+    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates,
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
     'without-frame': removeBorder,
     [widerLayoutClassName]: shouldBreakout
   });
@@ -57,9 +59,12 @@ function ExtensionWithPluginState(props) {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  const contentClassNames = classnames({
+  const newContentClassNames = classnames({
     'remove-padding': showMacroInteractionDesignUpdates
   });
+  const contentClassNames = classnames('extension-content', 'block', {
+    'remove-border': showMacroInteractionDesignUpdates
+  });
   let customContainerStyles = {
     width: '100%'
   };
@@ -99,7 +104,7 @@ function ExtensionWithPluginState(props) {
     className: classNames,
     css: wrapperStyle,
     style: customContainerStyles,
-    onMouseOver: () => handleMouseEvent(true),
+    onMouseEnter: () => handleMouseEvent(true),
     onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {
     className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
@@ -116,11 +121,11 @@ function ExtensionWithPluginState(props) {
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && jsx("div", {
     css: newContentStyles,
-    className: contentClassNames
+    className: newContentClassNames
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,
-    className: "extension-content block"
+    className: contentClassNames
   })))));
 }
 const Extension = props => {

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

@@ -10,6 +10,12 @@ export const wrapperStyle = css(wrapperDefault, {
   width: '100%',
   '.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-hover-border': {
+    border: `1px solid ${`var(--ds-border, ${N30})`}`
   }
 });
 export const header = css({
@@ -28,7 +34,10 @@ export const content = css({
   border: `1px solid ${`var(--ds-border, ${N30})`}`,
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
-  width: '100%'
+  width: '100%',
+  '&.remove-border': {
+    border: 'none'
+  }
 });
 export const contentWrapper = css({
   padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,

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

@@ -38,7 +38,7 @@ const InlineExtension = props => {
   }), jsx("div", {
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
     className: `extension-container inline ${className}`,
-    onMouseOver: () => handleMouseEvent(true),
+    onMouseEnter: () => handleMouseEvent(true),
     onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {
     css: overlay,

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

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
+import { B400, B50, N300, N500 } from '@atlaskit/theme/colors';
+export const labelStyles = css({
+  display: 'inline-flex',
+  width: 'max-content',
+  justifyContent: 'left',
+  position: 'absolute',
+  // Unfortunately, these need to be these exact numbers - otherwise there will be a gap/noticeable overlap
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  top: '-18px',
+  '&.inline-extension': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '-17px'
+  },
+  background: `var(--ds-background-accent-gray-subtle-pressed, ${N300})`,
+  color: `var(--ds-text-subtle, ${N500})`,
+  '&.selected': {
+    backgroundColor: `var(--ds-background-selected, ${B50})`,
+    color: `var(--ds-text-selected, ${B400})`
+  },
+  borderRadius: "var(--ds-border-radius, 3px)",
+  lineHeight: 1,
+  marginLeft: "var(--ds-space-150, 12px)"
+});
+const textStyles = css({
+  fontSize: '14px',
+  fontWeight: 'normal',
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
+});
+export const ExtensionLabel = ({
+  text,
+  extensionName,
+  isNodeSelected,
+  customContainerStyles
+}) => {
+  const classNames = classnames('extension-title', 'extension-label', {
+    'inline-extension': extensionName === 'inlineExtension',
+    selected: isNodeSelected
+  });
+  return jsx("div", {
+    style: customContainerStyles
+  }, jsx("span", {
+    "data-testid": "new-lozenge",
+    css: labelStyles,
+    className: classNames
+  }, jsx("span", {
+    css: textStyles
+  }, text)));
+};

package/dist/es2019/extensibility/Extension/{LozengeComponent.js → Lozenge/LozengeComponent.js}

@@ -1,10 +1,9 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
-import { SimpleTag as Tag } from '@atlaskit/tag';
-import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
+import { placeholderFallback, placeholderFallbackParams } from '../styles';
+import { ExtensionLabel } from './ExtensionLabel';
 export const ICON_SIZE = 24;
 const capitalizeFirstLetter = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -22,18 +21,12 @@ export const LozengeComponent = ({
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates && (isNodeHovered || isNodeSelected)) {
-    const lozengeClassNames = classnames('extension-title', {
-      'inline-extension': extensionName === 'inlineExtension'
-    });
-    return jsx("div", {
-      className: lozengeClassNames,
-      css: lozengeWrapper,
-      "data-testid": "new-lozenge",
-      style: customContainerStyles
-    }, jsx(Tag, {
+    return jsx(ExtensionLabel, {
       text: capitalizedTitle,
-      color: isNodeSelected ? 'blueLight' : 'greyLight'
-    }));
+      extensionName: extensionName,
+      isNodeSelected: isNodeSelected,
+      customContainerStyles: customContainerStyles
+    });
   } else if (!showMacroInteractionDesignUpdates) {
     const isBlockExtension = extensionName === 'extension';
     return jsx("div", {

package/dist/es2019/extensibility/Extension/{Lozenge.js → Lozenge/index.js}

@@ -3,9 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { getExtensionLozengeData } from '../../utils';
+import { getExtensionLozengeData } from '../../../utils';
+import { styledImage } from '../styles';
 import { LozengeComponent } from './LozengeComponent';
-import { styledImage } from './styles';
 export default class ExtensionLozenge extends Component {
   constructor(...args) {
     super(...args);

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

@@ -51,16 +51,4 @@ export const styledImage = css({
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'lozenge-image'
-});
-export const lozengeWrapper = css({
-  display: 'flex',
-  justifyContent: 'left',
-  width: '100%',
-  marginLeft: "var(--ds-space-050, 4px)",
-  position: 'absolute',
-  top: "var(--ds-space-negative-300, -24px)",
-  '&.inline-extension': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    top: '-23px' // Unfortunately, this needs to be this exact number - otherwise there will be a gap/noticeable overlap
-  }
 });

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

@@ -7,7 +7,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { useSharedPluginState } from '../../hooks';
-import { removeMargins, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
+import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -89,7 +89,7 @@ const MultiBodiedExtensionWithWidth = ({
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
   const containerCssExtended = css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
-    [`.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`]: css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMargins)
+    [`.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`]: css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMarginsAndBorder)
   });
   const shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
@@ -108,13 +108,16 @@ const MultiBodiedExtensionWithWidth = ({
     mbeWrapperStyles = breakoutStyles;
   }
   const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
-    'remove-margin-top': showMacroInteractionDesignUpdates
+    'remove-margin-top': showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates,
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
   const containerClassNames = classnames('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
   });
   const navigationClassNames = classnames('multiBodiedExtension--navigation', {
-    'remove-margins': showMacroInteractionDesignUpdates
+    'remove-margins': showMacroInteractionDesignUpdates,
+    'remove-border': showMacroInteractionDesignUpdates
   });
   const handleMouseEvent = didHover => {
     if (setIsNodeHovered) {
@@ -132,7 +135,7 @@ const MultiBodiedExtensionWithWidth = ({
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles,
-    onMouseOver: () => handleMouseEvent(true),
+    onMouseEnter: () => handleMouseEvent(true),
     onMouseLeave: () => handleMouseEvent(false)
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { N0, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
@@ -17,5 +18,11 @@ export const mbeExtensionWrapperCSS = css(wrapperDefault, {
     marginLeft: `${"var(--ds-space-050, 4px)"} !important`,
     marginRight: "var(--ds-space-100, 8px)",
     paddingTop: `${"var(--ds-space-100, 8px)"} !important`
+  },
+  '&.with-border': {
+    border: `1px solid ${`var(--ds-border-inverse, ${N0})`}` // adding this so macro doesn't jump when hover border is shown
+  },
+  '&.with-hover-border': {
+    border: `1px solid ${`var(--ds-border, ${N30})`}`
   }
 });

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.15.0";
+const packageVersion = "78.17.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.15.0";
+const packageVersion = "78.17.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -42,6 +42,9 @@ const mbeNavigation = css({
   '&.remove-margins': {
     marginLeft: 0,
     marginRight: 0
+  },
+  '&.remove-border': {
+    border: 'none'
   }
 });
 const extensionFrameContent = css({
@@ -66,9 +69,10 @@ const extensionFrameContent = css({
     marginTop: `${"var(--ds-space-100, 8px)"} !important`
   }
 });
-export const removeMargins = css({
+export const removeMarginsAndBorder = css({
   marginLeft: 0,
-  marginRight: 0
+  marginRight: 0,
+  border: 'none'
 });
 export const sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer,

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

@@ -51,16 +51,21 @@ function ExtensionWithPluginState(props) {
   // Extension breakout state should not be respected when the editor appearance is full-width mode
   editorAppearance !== 'full-width';
   var classNames = classnames('extension-container', 'block', shadowClassNames, _defineProperty({
-    'with-overlay': !hasBody,
+    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates,
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
     'without-frame': removeBorder
   }, widerLayoutClassName, shouldBreakout));
   var headerClassNames = classnames({
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  var contentClassNames = classnames({
+  var newContentClassNames = classnames({
     'remove-padding': showMacroInteractionDesignUpdates
   });
+  var contentClassNames = classnames('extension-content', 'block', {
+    'remove-border': showMacroInteractionDesignUpdates
+  });
   var customContainerStyles = {
     width: '100%'
   };
@@ -94,7 +99,7 @@ function ExtensionWithPluginState(props) {
     className: classNames,
     css: wrapperStyle,
     style: customContainerStyles,
-    onMouseOver: function onMouseOver() {
+    onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },
     onMouseLeave: function onMouseLeave() {
@@ -115,11 +120,11 @@ function ExtensionWithPluginState(props) {
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && jsx("div", {
     css: newContentStyles,
-    className: contentClassNames
+    className: newContentClassNames
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,
-    className: "extension-content block"
+    className: contentClassNames
   })))));
 }
 var Extension = function Extension(props) {

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

@@ -10,6 +10,12 @@ export var wrapperStyle = css(wrapperDefault, {
   width: '100%',
   '.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-hover-border': {
+    border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
   }
 });
 export var header = css({
@@ -28,7 +34,10 @@ export var content = css({
   border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")")),
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
-  width: '100%'
+  width: '100%',
+  '&.remove-border': {
+    border: 'none'
+  }
 });
 export var contentWrapper = css({
   padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),

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

@@ -35,7 +35,7 @@ var InlineExtension = function InlineExtension(props) {
   }), jsx("div", {
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
     className: "extension-container inline ".concat(className),
-    onMouseOver: function onMouseOver() {
+    onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },
     onMouseLeave: function onMouseLeave() {

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

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
+import { B400, B50, N300, N500 } from '@atlaskit/theme/colors';
+export var labelStyles = css({
+  display: 'inline-flex',
+  width: 'max-content',
+  justifyContent: 'left',
+  position: 'absolute',
+  // Unfortunately, these need to be these exact numbers - otherwise there will be a gap/noticeable overlap
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  top: '-18px',
+  '&.inline-extension': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '-17px'
+  },
+  background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(N300, ")"),
+  color: "var(--ds-text-subtle, ".concat(N500, ")"),
+  '&.selected': {
+    backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
+    color: "var(--ds-text-selected, ".concat(B400, ")")
+  },
+  borderRadius: "var(--ds-border-radius, 3px)",
+  lineHeight: 1,
+  marginLeft: "var(--ds-space-150, 12px)"
+});
+var textStyles = css({
+  fontSize: '14px',
+  fontWeight: 'normal',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
+export var ExtensionLabel = function ExtensionLabel(_ref) {
+  var text = _ref.text,
+    extensionName = _ref.extensionName,
+    isNodeSelected = _ref.isNodeSelected,
+    customContainerStyles = _ref.customContainerStyles;
+  var classNames = classnames('extension-title', 'extension-label', {
+    'inline-extension': extensionName === 'inlineExtension',
+    selected: isNodeSelected
+  });
+  return jsx("div", {
+    style: customContainerStyles
+  }, jsx("span", {
+    "data-testid": "new-lozenge",
+    css: labelStyles,
+    className: classNames
+  }, jsx("span", {
+    css: textStyles
+  }, text)));
+};

package/dist/esm/extensibility/Extension/{LozengeComponent.js → Lozenge/LozengeComponent.js}

@@ -4,10 +4,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
-import { SimpleTag as Tag } from '@atlaskit/tag';
-import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
+import { placeholderFallback, placeholderFallbackParams } from '../styles';
+import { ExtensionLabel } from './ExtensionLabel';
 export var ICON_SIZE = 24;
 var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -24,18 +23,12 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates && (isNodeHovered || isNodeSelected)) {
-    var lozengeClassNames = classnames('extension-title', {
-      'inline-extension': extensionName === 'inlineExtension'
-    });
-    return jsx("div", {
-      className: lozengeClassNames,
-      css: lozengeWrapper,
-      "data-testid": "new-lozenge",
-      style: customContainerStyles
-    }, jsx(Tag, {
+    return jsx(ExtensionLabel, {
       text: capitalizedTitle,
-      color: isNodeSelected ? 'blueLight' : 'greyLight'
-    }));
+      extensionName: extensionName,
+      isNodeSelected: isNodeSelected,
+      customContainerStyles: customContainerStyles
+    });
   } else if (!showMacroInteractionDesignUpdates) {
     var isBlockExtension = extensionName === 'extension';
     return jsx("div", {

package/dist/esm/extensibility/Extension/{Lozenge.js → Lozenge/index.js}

@@ -13,9 +13,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { getExtensionLozengeData } from '../../utils';
+import { getExtensionLozengeData } from '../../../utils';
+import { styledImage } from '../styles';
 import { LozengeComponent } from './LozengeComponent';
-import { styledImage } from './styles';
 var ExtensionLozenge = /*#__PURE__*/function (_Component) {
   _inherits(ExtensionLozenge, _Component);
   var _super = _createSuper(ExtensionLozenge);

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

@@ -51,16 +51,4 @@ export var styledImage = css({
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'lozenge-image'
-});
-export var lozengeWrapper = css({
-  display: 'flex',
-  justifyContent: 'left',
-  width: '100%',
-  marginLeft: "var(--ds-space-050, 4px)",
-  position: 'absolute',
-  top: "var(--ds-space-negative-300, -24px)",
-  '&.inline-extension': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    top: '-23px' // Unfortunately, this needs to be this exact number - otherwise there will be a gap/noticeable overlap
-  }
 });

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -12,7 +12,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { useSharedPluginState } from '../../hooks';
-import { removeMargins, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
+import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -92,7 +92,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var articleRef = React.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
-  var containerCssExtended = css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, _defineProperty({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")"), css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMargins)));
+  var containerCssExtended = css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, _defineProperty({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")"), css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMarginsAndBorder)));
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -109,13 +109,16 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     mbeWrapperStyles = breakoutStyles;
   }
   var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
-    'remove-margin-top': showMacroInteractionDesignUpdates
+    'remove-margin-top': showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates,
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
   var containerClassNames = classnames('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
   });
   var navigationClassNames = classnames('multiBodiedExtension--navigation', {
-    'remove-margins': showMacroInteractionDesignUpdates
+    'remove-margins': showMacroInteractionDesignUpdates,
+    'remove-border': showMacroInteractionDesignUpdates
   });
   var handleMouseEvent = function handleMouseEvent(didHover) {
     if (setIsNodeHovered) {
@@ -133,7 +136,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles,
-    onMouseOver: function onMouseOver() {
+    onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },
     onMouseLeave: function onMouseLeave() {

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { N0, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
@@ -17,5 +18,11 @@ export var mbeExtensionWrapperCSS = css(wrapperDefault, {
     marginLeft: "var(--ds-space-050, 4px)".concat(" !important"),
     marginRight: "var(--ds-space-100, 8px)",
     paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  '&.with-border': {
+    border: "1px solid ".concat("var(--ds-border-inverse, ".concat(N0, ")")) // adding this so macro doesn't jump when hover border is shown
+  },
+  '&.with-hover-border': {
+    border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
   }
 });

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.15.0";
+var packageVersion = "78.17.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

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

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

@@ -42,6 +42,9 @@ var mbeNavigation = css({
   '&.remove-margins': {
     marginLeft: 0,
     marginRight: 0
+  },
+  '&.remove-border': {
+    border: 'none'
   }
 });
 var extensionFrameContent = css({
@@ -66,9 +69,10 @@ var extensionFrameContent = css({
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
   }
 });
-export var removeMargins = css({
+export var removeMarginsAndBorder = css({
   marginLeft: 0,
-  marginRight: 0
+  marginRight: 0,
+  border: 'none'
 });
 export var sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,

package/dist/types/extensibility/Extension/Lozenge/ExtensionLabel.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
+export declare const labelStyles: import("@emotion/react").SerializedStyles;
+type ExtensionLabelProps = {
+    text: string;
+    extensionName: string;
+    isNodeSelected?: boolean;
+    customContainerStyles?: CSSProperties;
+};
+export declare const ExtensionLabel: ({ text, extensionName, isNodeSelected, customContainerStyles, }: ExtensionLabelProps) => jsx.JSX.Element;
+export {};

package/dist/types/extensibility/Extension/{LozengeComponent.d.ts → Lozenge/LozengeComponent.d.ts}

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
-import type { LozengeData } from './Lozenge';
+import type { LozengeData } from './index';
 export declare const ICON_SIZE = 24;
 type LozengeComponentProps = {
     lozengeData?: LozengeData;

package/dist/types/extensibility/Extension/styles.d.ts

@@ -5,4 +5,3 @@ export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;
 export declare const styledImage: import("@emotion/react").SerializedStyles;
-export declare const lozengeWrapper: import("@emotion/react").SerializedStyles;

package/dist/types/types/text-formatting.d.ts

@@ -1,4 +1,4 @@
-import { INPUT_METHOD } from '../analytics';
+import type { INPUT_METHOD } from '../analytics';
 /**
  * Configuration for the Text Formatting plugin
  */
@@ -7,6 +7,7 @@ export interface TextFormattingOptions {
     disableUnderline?: boolean;
     disableCode?: boolean;
     disableSmartTextCompletion?: boolean;
+    disableStrikethrough?: boolean;
     responsiveToolbarMenu?: boolean;
 }
 export interface TextFormattingState {

package/dist/types/ui/MultiBodiedExtension/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-export declare const removeMargins: import("@emotion/react").SerializedStyles;
+export declare const removeMarginsAndBorder: import("@emotion/react").SerializedStyles;
 export declare const sharedMultiBodiedExtensionStyles: {
     mbeExtensionContainer: import("@emotion/react").SerializedStyles;
     mbeNavigation: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/extensibility/Extension/Lozenge/ExtensionLabel.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
+export declare const labelStyles: import("@emotion/react").SerializedStyles;
+type ExtensionLabelProps = {
+    text: string;
+    extensionName: string;
+    isNodeSelected?: boolean;
+    customContainerStyles?: CSSProperties;
+};
+export declare const ExtensionLabel: ({ text, extensionName, isNodeSelected, customContainerStyles, }: ExtensionLabelProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/extensibility/Extension/{LozengeComponent.d.ts → Lozenge/LozengeComponent.d.ts}

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
-import type { LozengeData } from './Lozenge';
+import type { LozengeData } from './index';
 export declare const ICON_SIZE = 24;
 type LozengeComponentProps = {
     lozengeData?: LozengeData;

package/dist/types-ts4.5/extensibility/Extension/styles.d.ts

@@ -5,4 +5,3 @@ export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;
 export declare const styledImage: import("@emotion/react").SerializedStyles;
-export declare const lozengeWrapper: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/types/text-formatting.d.ts

@@ -1,4 +1,4 @@
-import { INPUT_METHOD } from '../analytics';
+import type { INPUT_METHOD } from '../analytics';
 /**
  * Configuration for the Text Formatting plugin
  */
@@ -7,6 +7,7 @@ export interface TextFormattingOptions {
     disableUnderline?: boolean;
     disableCode?: boolean;
     disableSmartTextCompletion?: boolean;
+    disableStrikethrough?: boolean;
     responsiveToolbarMenu?: boolean;
 }
 export interface TextFormattingState {

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-export declare const removeMargins: import("@emotion/react").SerializedStyles;
+export declare const removeMarginsAndBorder: import("@emotion/react").SerializedStyles;
 export declare const sharedMultiBodiedExtensionStyles: {
     mbeExtensionContainer: import("@emotion/react").SerializedStyles;
     mbeNavigation: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.15.0",
+  "version": "78.17.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -126,17 +126,16 @@
     "@atlaskit/mention": "^23.0.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^5.0.0",
+    "@atlaskit/primitives": "^5.1.0",
     "@atlaskit/profilecard": "^19.11.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/smart-card": "^26.50.0",
     "@atlaskit/smart-user-picker": "^6.9.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/tag": "^12.0.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/textfield": "^6.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/width-detector": "^4.1.0",