@atlaskit/editor-common 78.6.1 → 78.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 78.8.0
+
+### Minor Changes
+
+- [#75635](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75635) [`af4972f3a9bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af4972f3a9bb) - [ux] Added comment button for media single floating toolbar
+
+## 78.7.0
+
+### Minor Changes
+
+- [#76370](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76370) [`6e7d6bc06b91`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e7d6bc06b91) - Passes Confluence experiment flag to extensions for new macro visual design project
+
 ## 78.6.1
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension.js

@@ -38,7 +38,8 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         references = _this$props.references,
         editorAppearance = _this$props.editorAppearance,
         pluginInjectionApi = _this$props.pluginInjectionApi,
-        eventDispatcher = _this$props.eventDispatcher;
+        eventDispatcher = _this$props.eventDispatcher,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates;
       return /*#__PURE__*/_react.default.createElement(_ExtensionComponent.ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -49,7 +50,8 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         extensionHandlers: extensionHandlers,
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
-        eventDispatcher: eventDispatcher
+        eventDispatcher: eventDispatcher,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       });
     });
     _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -193,7 +193,8 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         editorAppearance = _this$props2.editorAppearance,
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
-        eventDispatcher = _this$props2.eventDispatcher;
+        eventDispatcher = _this$props2.eventDispatcher,
+        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
       if (node.type.name === 'multiBodiedExtension') {
         return /*#__PURE__*/_react.default.createElement(_MultiBodiedExtension.default, {
           node: node,
@@ -203,7 +204,8 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
           tryExtensionHandler: this.tryExtensionHandler.bind(this),
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
-          editorAppearance: editorAppearance
+          editorAppearance: editorAppearance,
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -219,11 +221,13 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             view: editorView,
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
-            pluginInjectionApi: pluginInjectionApi
+            pluginInjectionApi: pluginInjectionApi,
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
-            node: node
+            node: node,
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
           }, extensionHandlerResult);
         default:
           return null;

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -21,7 +21,6 @@ var _utils = require("../../utils");
 var _withPluginState = require("../../with-plugin-state");
 var _actionApi = require("./action-api");
 var _styles = require("./styles");
-var _templateObject, _templateObject2;
 var _excluded = ["url"];
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
@@ -35,7 +34,10 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title) {
     return (0, _react2.jsx)("div", {
       className: "extension-title"
     }, (0, _react2.jsx)("img", (0, _extends2.default)({
-      css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            max-height: 24px;\n            max-width: 24px;\n          "]))),
+      css: (0, _react2.css)({
+        maxHeight: '24px',
+        maxWidth: '24px'
+      }),
       src: url
     }, rest, {
       alt: title
@@ -90,7 +92,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var articleRef = _react.default.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
-  var containerCssExtended = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      ", "\n    }\n  "])), _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, activeChildIndex + 1, _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent);
+  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, ")"), _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent));
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&

package/dist/cjs/extensibility/extensionNodeView.js

@@ -72,20 +72,22 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
         handleContentDOMRef: forwardRef,
         extensionHandlers: props.extensionHandlers,
         editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
-        pluginInjectionApi: props.pluginInjectionApi
+        pluginInjectionApi: props.pluginInjectionApi,
+        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
       }));
     }
   }]);
   return ExtensionNode;
 }(_reactNodeView.default);
-function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
+function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
       extensionHandlers: extensionHandlers,
       extensionNodeViewOptions: extensionNodeViewOptions,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/cjs/media/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "captionMessages", {
     return _caption.captionMessages;
   }
 });
+Object.defineProperty(exports, "commentMessages", {
+  enumerable: true,
+  get: function get() {
+    return _comments.commentMessages;
+  }
+});
 Object.defineProperty(exports, "dropPlaceholderMessages", {
   enumerable: true,
   get: function get() {
@@ -65,4 +71,5 @@ var _toolbarMedia = require("./messages/toolbarMedia");
 var _caption = require("./messages/caption");
 var _dropPlaceholder = require("./messages/dropPlaceholder");
 var _altText = require("./messages/altText");
-var _mediaResizeAnnouncerMess = require("./messages/mediaResizeAnnouncerMess");
+var _mediaResizeAnnouncerMess = require("./messages/mediaResizeAnnouncerMess");
+var _comments = require("./messages/comments");

package/dist/cjs/media/messages/comments.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.commentMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var commentMessages = exports.commentMessages = (0, _reactIntlNext.defineMessages)({
+  addCommentOnMedia: {
+    id: 'fabric.editor.addCommentOnMedia',
+    defaultMessage: 'Add comment',
+    description: 'Add a comment for this image'
+  }
+});

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var 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.6.1";
+var packageVersion = "78.8.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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.6.1";
+var packageVersion = "78.8.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/extensibility/Extension.js

@@ -17,7 +17,8 @@ export class Extension extends Component {
         references,
         editorAppearance,
         pluginInjectionApi,
-        eventDispatcher
+        eventDispatcher,
+        showMacroInteractionDesignUpdates
       } = this.props;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
@@ -29,7 +30,8 @@ export class Extension extends Component {
         extensionHandlers: extensionHandlers,
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
-        eventDispatcher: eventDispatcher
+        eventDispatcher: eventDispatcher,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       });
     });
     this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
@@ -146,7 +145,8 @@ export class ExtensionComponent extends Component {
       editorAppearance,
       pluginInjectionApi,
       getPos,
-      eventDispatcher
+      eventDispatcher,
+      showMacroInteractionDesignUpdates
     } = this.props;
     if (node.type.name === 'multiBodiedExtension') {
       return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
@@ -157,7 +157,8 @@ export class ExtensionComponent extends Component {
         tryExtensionHandler: this.tryExtensionHandler.bind(this),
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi,
-        editorAppearance: editorAppearance
+        editorAppearance: editorAppearance,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -173,11 +174,13 @@ export class ExtensionComponent extends Component {
           view: editorView,
           editorAppearance: editorAppearance,
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
-          pluginInjectionApi: pluginInjectionApi
+          pluginInjectionApi: pluginInjectionApi,
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {
-          node: node
+          node: node,
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
         }, extensionHandlerResult);
       default:
         return null;

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

@@ -22,10 +22,10 @@ const getWrapperTitleContent = (imageData, title) => {
     return jsx("div", {
       className: "extension-title"
     }, jsx("img", _extends({
-      css: css`
-            max-height: 24px;
-            max-width: 24px;
-          `,
+      css: css({
+        maxHeight: '24px',
+        maxWidth: '24px'
+      }),
       src: url
     }, rest, {
       alt: title
@@ -79,13 +79,9 @@ const MultiBodiedExtensionWithWidth = ({
   const articleRef = React.useCallback(node => {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
-  const containerCssExtended = css`
-    ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
-    .multiBodiedExtension-content-dom-wrapper
-      > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-      ${sharedMultiBodiedExtensionStyles.extensionFrameContent}
-    }
-  `;
+  const containerCssExtended = css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
+    [`.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`]: sharedMultiBodiedExtensionStyles.extensionFrameContent
+  });
   const shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&

package/dist/es2019/extensibility/extensionNodeView.js

@@ -45,18 +45,20 @@ export class ExtensionNode extends ReactNodeView {
       handleContentDOMRef: forwardRef,
       extensionHandlers: props.extensionHandlers,
       editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
-      pluginInjectionApi: props.pluginInjectionApi
+      pluginInjectionApi: props.pluginInjectionApi,
+      showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
     }));
   }
 }
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
   return (node, view, getPos) => {
     const hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory,
       extensionHandlers,
       extensionNodeViewOptions,
-      pluginInjectionApi
+      pluginInjectionApi,
+      showMacroInteractionDesignUpdates
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/es2019/media/index.js

@@ -6,4 +6,5 @@ export { toolbarMediaMessages } from './messages/toolbarMedia';
 export { captionMessages } from './messages/caption';
 export { dropPlaceholderMessages } from './messages/dropPlaceholder';
 export { altTextMessages } from './messages/altText';
-export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
+export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
+export { commentMessages } from './messages/comments';

package/dist/es2019/media/messages/comments.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const commentMessages = defineMessages({
+  addCommentOnMedia: {
+    id: 'fabric.editor.addCommentOnMedia',
+    defaultMessage: 'Add comment',
+    description: 'Add a comment for this image'
+  }
+});

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

package/dist/esm/extensibility/Extension.js

@@ -28,7 +28,8 @@ export var Extension = /*#__PURE__*/function (_Component) {
         references = _this$props.references,
         editorAppearance = _this$props.editorAppearance,
         pluginInjectionApi = _this$props.pluginInjectionApi,
-        eventDispatcher = _this$props.eventDispatcher;
+        eventDispatcher = _this$props.eventDispatcher,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -39,7 +40,8 @@ export var Extension = /*#__PURE__*/function (_Component) {
         extensionHandlers: extensionHandlers,
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
-        eventDispatcher: eventDispatcher
+        eventDispatcher: eventDispatcher,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       });
     });
     _this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/esm/extensibility/ExtensionComponent.js

@@ -9,8 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
@@ -184,7 +183,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         editorAppearance = _this$props2.editorAppearance,
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
-        eventDispatcher = _this$props2.eventDispatcher;
+        eventDispatcher = _this$props2.eventDispatcher,
+        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
       if (node.type.name === 'multiBodiedExtension') {
         return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
           node: node,
@@ -194,7 +194,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           tryExtensionHandler: this.tryExtensionHandler.bind(this),
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
-          editorAppearance: editorAppearance
+          editorAppearance: editorAppearance,
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -210,11 +211,13 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             view: editorView,
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
-            pluginInjectionApi: pluginInjectionApi
+            pluginInjectionApi: pluginInjectionApi,
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {
-            node: node
+            node: node,
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
           }, extensionHandlerResult);
         default:
           return null;

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

@@ -1,9 +1,8 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2;
 var _excluded = ["url"];
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
@@ -26,7 +25,10 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title) {
     return jsx("div", {
       className: "extension-title"
     }, jsx("img", _extends({
-      css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            max-height: 24px;\n            max-width: 24px;\n          "]))),
+      css: css({
+        maxHeight: '24px',
+        maxWidth: '24px'
+      }),
       src: url
     }, rest, {
       alt: title
@@ -81,7 +83,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var articleRef = React.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
-  var containerCssExtended = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", ";\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      ", "\n    }\n  "])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, activeChildIndex + 1, sharedMultiBodiedExtensionStyles.extensionFrameContent);
+  var containerCssExtended = css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, _defineProperty({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")"), sharedMultiBodiedExtensionStyles.extensionFrameContent));
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&

package/dist/esm/extensibility/extensionNodeView.js

@@ -64,20 +64,22 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
         handleContentDOMRef: forwardRef,
         extensionHandlers: props.extensionHandlers,
         editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
-        pluginInjectionApi: props.pluginInjectionApi
+        pluginInjectionApi: props.pluginInjectionApi,
+        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
       }));
     }
   }]);
   return ExtensionNode;
 }(ReactNodeView);
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
       extensionHandlers: extensionHandlers,
       extensionNodeViewOptions: extensionNodeViewOptions,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/esm/media/index.js

@@ -6,4 +6,5 @@ export { toolbarMediaMessages } from './messages/toolbarMedia';
 export { captionMessages } from './messages/caption';
 export { dropPlaceholderMessages } from './messages/dropPlaceholder';
 export { altTextMessages } from './messages/altText';
-export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
+export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
+export { commentMessages } from './messages/comments';

package/dist/esm/media/messages/comments.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var commentMessages = defineMessages({
+  addCommentOnMedia: {
+    id: 'fabric.editor.addCommentOnMedia',
+    defaultMessage: 'Add comment',
+    description: 'Add a comment for this image'
+  }
+});

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

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

@@ -16,6 +16,7 @@ export interface Props {
     hideFrame?: boolean;
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 /**
  * End workaround

package/dist/types/extensibility/Extension/InlineExtension/index.d.ts

@@ -6,6 +6,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     children?: React.ReactNode;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 export default class InlineExtension extends Component<Props, any> {
     render(): jsx.JSX.Element;

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

@@ -18,6 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 export declare class Extension extends Component<Props, any> {
     static displayName: string;

package/dist/types/extensibility/ExtensionComponent.d.ts

@@ -18,6 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 export interface State {
     extensionProvider?: ExtensionProvider;

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

@@ -18,6 +18,7 @@ type Props = {
     eventDispatcher?: EventDispatcher;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
+    showMacroInteractionDesignUpdates?: boolean;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types/extensibility/extensionNodeView.d.ts

@@ -25,7 +25,8 @@ export declare class ExtensionNode extends ReactNodeView {
         extensionHandlers: ExtensionHandlers;
         extensionNodeViewOptions?: ExtensionNodeViewOptions;
         pluginInjectionApi: ExtensionsPluginInjectionAPI;
+        showMacroInteractionDesignUpdates: boolean;
     }, forwardRef: ForwardRef): JSX.Element;
 }
-export default function ExtensionNodeView(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
+export default function ExtensionNodeView(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, showMacroInteractionDesignUpdates?: boolean): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
 export {};

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

@@ -7,3 +7,4 @@ export { captionMessages } from './messages/caption';
 export { dropPlaceholderMessages } from './messages/dropPlaceholder';
 export { altTextMessages } from './messages/altText';
 export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
+export { commentMessages } from './messages/comments';

package/dist/types/media/messages/comments.d.ts

@@ -0,0 +1,7 @@
+export declare const commentMessages: {
+    addCommentOnMedia: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -16,6 +16,7 @@ export interface Props {
     hideFrame?: boolean;
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 /**
  * End workaround

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

@@ -6,6 +6,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     children?: React.ReactNode;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 export default class InlineExtension extends Component<Props, any> {
     render(): jsx.JSX.Element;

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

@@ -18,6 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 export declare class Extension extends Component<Props, any> {
     static displayName: string;

package/dist/types-ts4.5/extensibility/ExtensionComponent.d.ts

@@ -18,6 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
+    showMacroInteractionDesignUpdates?: boolean;
 }
 export interface State {
     extensionProvider?: ExtensionProvider;

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

@@ -18,6 +18,7 @@ type Props = {
     eventDispatcher?: EventDispatcher;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
+    showMacroInteractionDesignUpdates?: boolean;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts

@@ -25,7 +25,8 @@ export declare class ExtensionNode extends ReactNodeView {
         extensionHandlers: ExtensionHandlers;
         extensionNodeViewOptions?: ExtensionNodeViewOptions;
         pluginInjectionApi: ExtensionsPluginInjectionAPI;
+        showMacroInteractionDesignUpdates: boolean;
     }, forwardRef: ForwardRef): JSX.Element;
 }
-export default function ExtensionNodeView(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
+export default function ExtensionNodeView(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, showMacroInteractionDesignUpdates?: boolean): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
 export {};

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

@@ -7,3 +7,4 @@ export { captionMessages } from './messages/caption';
 export { dropPlaceholderMessages } from './messages/dropPlaceholder';
 export { altTextMessages } from './messages/altText';
 export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
+export { commentMessages } from './messages/comments';

package/dist/types-ts4.5/media/messages/comments.d.ts

@@ -0,0 +1,7 @@
+export declare const commentMessages: {
+    addCommentOnMedia: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.6.1",
+  "version": "78.8.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -98,7 +98,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
-    "@atlaskit/button": "^17.4.0",
+    "@atlaskit/button": "^17.6.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/custom-steps": "^0.0.13",
@@ -111,7 +111,7 @@
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
-    "@atlaskit/link-datasource": "^1.22.0",
+    "@atlaskit/link-datasource": "^1.23.0",
     "@atlaskit/link-picker": "^1.34.0",
     "@atlaskit/media-card": "^77.10.0",
     "@atlaskit/media-client": "^26.2.0",
@@ -119,14 +119,14 @@
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-file-preview": "^0.5.0",
     "@atlaskit/media-picker": "^66.3.0",
-    "@atlaskit/media-ui": "^25.0.0",
+    "@atlaskit/media-ui": "^25.2.0",
     "@atlaskit/media-viewer": "48.2.15",
     "@atlaskit/mention": "^23.0.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/profilecard": "^19.11.0",
     "@atlaskit/smart-card": "^26.48.0",
-    "@atlaskit/smart-user-picker": "^6.8.0",
+    "@atlaskit/smart-user-picker": "^6.9.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/textfield": "^6.0.0",