@atlaskit/editor-common 78.18.2 → 78.19.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 78.19.0
+
+### Minor Changes
+
+- [#83790](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83790) [`f590476805da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f590476805da) - [ux] Adds uniform danger overlay for macro interaction design updates
+
+### Patch Changes
+
+- [#82755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82755) [`c204f74b46a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c204f74b46a5) - The media renderer node will now correctly render annotation marks if/when they're applied to the node.
+
+## 78.18.3
+
+### Patch Changes
+
+- [#81323](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81323) [`88bfdbce168d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/88bfdbce168d) - [EDF-426] Added special handling for dom errors in renderer to resolve DOM errors from Google translate interactions. This is behind a platform flag (platform.editor.renderer-error-boundary-for-dom-errors) and adds a new analytics event (CAUGHT_DOM_ERROR).
+
 ## 78.18.2
 
 ### Patch Changes

package/dist/cjs/analytics/types/enums.js

@@ -15,6 +15,7 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["ACTIVATED"] = "activated";
   ACTION["ADDED"] = "added";
   ACTION["BROWSER_FREEZE"] = "browserFreeze";
+  ACTION["CAUGHT_DOM_ERROR"] = "caughtDomError";
   ACTION["CHANGED_BACKGROUND_COLOR"] = "changedBackgroundColor";
   ACTION["CHANGED_ICON"] = "changedIcon";
   ACTION["CHANGED_FULL_WIDTH_MODE"] = "changedFullWidthMode";

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

@@ -63,6 +63,7 @@ function ExtensionWithPluginState(props) {
     'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
     'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
+    'with-danger-overlay': showMacroInteractionDesignUpdates,
     'without-frame': removeBorder
   }, _styles2.widerLayoutClassName, shouldBreakout));
   var headerClassNames = (0, _classnames2.default)({

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _hooks = require("../../../hooks");
@@ -30,7 +31,10 @@ var InlineExtension = function InlineExtension(props) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;
-  var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  var classNames = (0, _classnames.default)('extension-container', 'inline', 'with-overlay', {
+    'with-children': hasChildren,
+    'with-danger-overlay': showMacroInteractionDesignUpdates
+  });
   var rendererContainerWidth = widthState ? widthState.width - _editorSharedStyles.akEditorGutterPadding * 2 : 0;
   var extendedInlineExtension = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') || false;
   var handleMouseEvent = function handleMouseEvent(didHover) {
@@ -44,8 +48,9 @@ var InlineExtension = function InlineExtension(props) {
     isNodeHovered: isNodeHovered,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), (0, _react2.jsx)("div", {
+    "data-testid": "inline-extension-wrapper",
     css: [_styles2.wrapperStyle, extendedInlineExtension && _styles2.inlineWrapperStyels],
-    className: "extension-container inline ".concat(className),
+    className: classNames,
     onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },

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

@@ -7,10 +7,10 @@ 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -27,6 +27,13 @@ var _excluded = ["url"];
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
+  return (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 imageStyles = (0, _react2.css)({
+  maxHeight: '24px',
+  maxWidth: '24px'
+});
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
   if (showMacroInteractionDesignUpdates) {
@@ -38,10 +45,7 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, s
     return (0, _react2.jsx)("div", {
       className: "extension-title"
     }, (0, _react2.jsx)("img", (0, _extends2.default)({
-      css: (0, _react2.css)({
-        maxHeight: '24px',
-        maxWidth: '24px'
-      }),
+      css: imageStyles,
       src: url
     }, rest, {
       alt: title
@@ -101,7 +105,6 @@ 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.removeMarginsAndBorder)));
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -120,7 +123,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
     'remove-margin-top': showMacroInteractionDesignUpdates,
     'with-border': showMacroInteractionDesignUpdates,
-    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
+    'with-danger-overlay': showMacroInteractionDesignUpdates
   });
   var containerClassNames = (0, _classnames.default)('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
@@ -142,7 +146,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     isNodeHovered: isNodeHovered
   }), (0, _react2.jsx)("div", {
     className: wrapperClassNames,
-    css: _styles.mbeExtensionWrapperCSS,
+    css: _styles.mbeExtensionWrapperCSSStyles,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles,
     onMouseEnter: function onMouseEnter() {
@@ -151,9 +155,12 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     onMouseLeave: function onMouseLeave() {
       return handleMouseEvent(false);
     }
-  }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
+    css: _styles.overlayStyles,
+    className: "multiBodiedExtension--overlay"
+  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
     className: containerClassNames,
-    css: containerCssExtended,
+    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
   }, (0, _react2.jsx)("nav", {

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mbeExtensionWrapperCSS = void 0;
+exports.overlayStyles = exports.mbeExtensionWrapperCSSStyles = 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, {
+var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _react.css)(_styles.wrapperDefault, {
   '&.remove-margin-top': {
     marginTop: 0
   },
@@ -30,4 +30,14 @@ var mbeExtensionWrapperCSS = exports.mbeExtensionWrapperCSS = (0, _react.css)(_s
   '&.with-hover-border': {
     border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
   }
+});
+var overlayStyles = exports.overlayStyles = (0, _react.css)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s',
+  zIndex: 1
 });

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

package/dist/cjs/utils/validator.js

@@ -427,7 +427,12 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
             if (attrs.alt) {
               mediaAttrs.alt = attrs.alt;
             }
-            return {
+            var getMarks = getValidMarks(marks, adfStage);
+            return getMarks ? {
+              type: type,
+              attrs: mediaAttrs,
+              marks: getMarks
+            } : {
               type: type,
               attrs: mediaAttrs
             };
@@ -446,11 +451,11 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
             if (attrs.alt) {
               _mediaAttrs.alt = attrs.alt;
             }
-            var getMarks = getValidMarks(marks, adfStage);
-            return getMarks ? {
+            var _getMarks = getValidMarks(marks, adfStage);
+            return _getMarks ? {
               type: type,
               attrs: _mediaAttrs,
-              marks: getMarks
+              marks: _getMarks
             } : {
               type: type,
               attrs: _mediaAttrs

package/dist/es2019/analytics/types/enums.js

@@ -9,6 +9,7 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["ACTIVATED"] = "activated";
   ACTION["ADDED"] = "added";
   ACTION["BROWSER_FREEZE"] = "browserFreeze";
+  ACTION["CAUGHT_DOM_ERROR"] = "caughtDomError";
   ACTION["CHANGED_BACKGROUND_COLOR"] = "changedBackgroundColor";
   ACTION["CHANGED_ICON"] = "changedIcon";
   ACTION["CHANGED_FULL_WIDTH_MODE"] = "changedFullWidthMode";

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

@@ -52,6 +52,7 @@ function ExtensionWithPluginState(props) {
     'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
     'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
+    'with-danger-overlay': showMacroInteractionDesignUpdates,
     'without-frame': removeBorder,
     [widerLayoutClassName]: shouldBreakout
   });

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useSharedPluginState } from '../../../hooks';
@@ -22,7 +23,10 @@ const InlineExtension = props => {
     widthState
   } = useSharedPluginState(pluginInjectionApi, ['width']);
   const hasChildren = !!children;
-  const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  const classNames = classnames('extension-container', 'inline', 'with-overlay', {
+    'with-children': hasChildren,
+    'with-danger-overlay': showMacroInteractionDesignUpdates
+  });
   const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
   const extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
   const handleMouseEvent = didHover => {
@@ -36,8 +40,9 @@ const InlineExtension = props => {
     isNodeHovered: isNodeHovered,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), jsx("div", {
+    "data-testid": "inline-extension-wrapper",
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
-    className: `extension-container inline ${className}`,
+    className: classNames,
     onMouseEnter: () => handleMouseEvent(true),
     onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {

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

@@ -12,7 +12,14 @@ import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
 import ExtensionLozenge from '../Extension/Lozenge';
 import { useMultiBodiedExtensionActions } from './action-api';
-import { mbeExtensionWrapperCSS } from './styles';
+import { mbeExtensionWrapperCSSStyles, overlayStyles } from './styles';
+const getContainerCssExtendedStyles = (activeChildIndex, showMacroInteractionDesignUpdates) => css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
+  [`.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`]: css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMarginsAndBorder)
+});
+const imageStyles = css({
+  maxHeight: '24px',
+  maxWidth: '24px'
+});
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 const getWrapperTitleContent = (imageData, title, showMacroInteractionDesignUpdates) => {
   if (showMacroInteractionDesignUpdates) {
@@ -26,10 +33,7 @@ const getWrapperTitleContent = (imageData, title, showMacroInteractionDesignUpda
     return jsx("div", {
       className: "extension-title"
     }, jsx("img", _extends({
-      css: css({
-        maxHeight: '24px',
-        maxWidth: '24px'
-      }),
+      css: imageStyles,
       src: url
     }, rest, {
       alt: title
@@ -88,9 +92,6 @@ 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})`]: css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMarginsAndBorder)
-  });
   const shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -110,7 +111,8 @@ const MultiBodiedExtensionWithWidth = ({
   const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
     'remove-margin-top': showMacroInteractionDesignUpdates,
     'with-border': showMacroInteractionDesignUpdates,
-    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
+    'with-danger-overlay': showMacroInteractionDesignUpdates
   });
   const containerClassNames = classnames('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
@@ -132,14 +134,17 @@ const MultiBodiedExtensionWithWidth = ({
     isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
-    css: mbeExtensionWrapperCSS,
+    css: mbeExtensionWrapperCSSStyles,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles,
     onMouseEnter: () => handleMouseEvent(true),
     onMouseLeave: () => handleMouseEvent(false)
-  }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
+  }, jsx("div", {
+    css: overlayStyles,
+    className: "multiBodiedExtension--overlay"
+  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,
-    css: containerCssExtended,
+    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
   }, jsx("nav", {

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

@@ -3,7 +3,7 @@ import { N0, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
-export const mbeExtensionWrapperCSS = css(wrapperDefault, {
+export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
   '&.remove-margin-top': {
     marginTop: 0
   },
@@ -25,4 +25,14 @@ export const mbeExtensionWrapperCSS = css(wrapperDefault, {
   '&.with-hover-border': {
     border: `1px solid ${`var(--ds-border, ${N30})`}`
   }
+});
+export const overlayStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s',
+  zIndex: 1
 });

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

package/dist/es2019/utils/validator.js

@@ -414,7 +414,12 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
             if (attrs.alt) {
               mediaAttrs.alt = attrs.alt;
             }
-            return {
+            const getMarks = getValidMarks(marks, adfStage);
+            return getMarks ? {
+              type,
+              attrs: mediaAttrs,
+              marks: getMarks
+            } : {
               type,
               attrs: mediaAttrs
             };

package/dist/esm/analytics/types/enums.js

@@ -9,6 +9,7 @@ export var ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["ACTIVATED"] = "activated";
   ACTION["ADDED"] = "added";
   ACTION["BROWSER_FREEZE"] = "browserFreeze";
+  ACTION["CAUGHT_DOM_ERROR"] = "caughtDomError";
   ACTION["CHANGED_BACKGROUND_COLOR"] = "changedBackgroundColor";
   ACTION["CHANGED_ICON"] = "changedIcon";
   ACTION["CHANGED_FULL_WIDTH_MODE"] = "changedFullWidthMode";

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

@@ -54,6 +54,7 @@ function ExtensionWithPluginState(props) {
     'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
     'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
+    'with-danger-overlay': showMacroInteractionDesignUpdates,
     'without-frame': removeBorder
   }, widerLayoutClassName, shouldBreakout));
   var headerClassNames = classnames({

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useSharedPluginState } from '../../../hooks';
@@ -19,7 +20,10 @@ var InlineExtension = function InlineExtension(props) {
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;
-  var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  var classNames = classnames('extension-container', 'inline', 'with-overlay', {
+    'with-children': hasChildren,
+    'with-danger-overlay': showMacroInteractionDesignUpdates
+  });
   var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
   var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
   var handleMouseEvent = function handleMouseEvent(didHover) {
@@ -33,8 +37,9 @@ var InlineExtension = function InlineExtension(props) {
     isNodeHovered: isNodeHovered,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), jsx("div", {
+    "data-testid": "inline-extension-wrapper",
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
-    className: "extension-container inline ".concat(className),
+    className: classNames,
     onMouseEnter: function onMouseEnter() {
       return handleMouseEvent(true);
     },

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

@@ -1,8 +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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["url"];
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
@@ -17,7 +17,14 @@ import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
 import ExtensionLozenge from '../Extension/Lozenge';
 import { useMultiBodiedExtensionActions } from './action-api';
-import { mbeExtensionWrapperCSS } from './styles';
+import { mbeExtensionWrapperCSSStyles, overlayStyles } from './styles';
+var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
+  return css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, _defineProperty({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")"), css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMarginsAndBorder)));
+};
+var imageStyles = css({
+  maxHeight: '24px',
+  maxWidth: '24px'
+});
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
   if (showMacroInteractionDesignUpdates) {
@@ -29,10 +36,7 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, s
     return jsx("div", {
       className: "extension-title"
     }, jsx("img", _extends({
-      css: css({
-        maxHeight: '24px',
-        maxWidth: '24px'
-      }),
+      css: imageStyles,
       src: url
     }, rest, {
       alt: title
@@ -92,7 +96,6 @@ 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 && removeMarginsAndBorder)));
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
@@ -111,7 +114,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
     'remove-margin-top': showMacroInteractionDesignUpdates,
     'with-border': showMacroInteractionDesignUpdates,
-    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
+    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
+    'with-danger-overlay': showMacroInteractionDesignUpdates
   });
   var containerClassNames = classnames('multiBodiedExtension--container', {
     'remove-padding': showMacroInteractionDesignUpdates
@@ -133,7 +137,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
-    css: mbeExtensionWrapperCSS,
+    css: mbeExtensionWrapperCSSStyles,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles,
     onMouseEnter: function onMouseEnter() {
@@ -142,9 +146,12 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     onMouseLeave: function onMouseLeave() {
       return handleMouseEvent(false);
     }
-  }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
+  }, jsx("div", {
+    css: overlayStyles,
+    className: "multiBodiedExtension--overlay"
+  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,
-    css: containerCssExtended,
+    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
   }, jsx("nav", {

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

@@ -3,7 +3,7 @@ import { N0, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
-export var mbeExtensionWrapperCSS = css(wrapperDefault, {
+export var mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
   '&.remove-margin-top': {
     marginTop: 0
   },
@@ -25,4 +25,14 @@ export var mbeExtensionWrapperCSS = css(wrapperDefault, {
   '&.with-hover-border': {
     border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
   }
+});
+export var overlayStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s',
+  zIndex: 1
 });

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

package/dist/esm/utils/validator.js

@@ -420,7 +420,12 @@ export var getValidNode = function getValidNode(originalNode) {
             if (attrs.alt) {
               mediaAttrs.alt = attrs.alt;
             }
-            return {
+            var getMarks = getValidMarks(marks, adfStage);
+            return getMarks ? {
+              type: type,
+              attrs: mediaAttrs,
+              marks: getMarks
+            } : {
               type: type,
               attrs: mediaAttrs
             };
@@ -439,11 +444,11 @@ export var getValidNode = function getValidNode(originalNode) {
             if (attrs.alt) {
               _mediaAttrs.alt = attrs.alt;
             }
-            var getMarks = getValidMarks(marks, adfStage);
-            return getMarks ? {
+            var _getMarks = getValidMarks(marks, adfStage);
+            return _getMarks ? {
               type: type,
               attrs: _mediaAttrs,
-              marks: getMarks
+              marks: _getMarks
             } : {
               type: type,
               attrs: _mediaAttrs

package/dist/types/analytics/types/enums.d.ts

@@ -8,6 +8,7 @@ export declare enum ACTION {
     ACTIVATED = "activated",
     ADDED = "added",
     BROWSER_FREEZE = "browserFreeze",
+    CAUGHT_DOM_ERROR = "caughtDomError",
     CHANGED_BACKGROUND_COLOR = "changedBackgroundColor",
     CHANGED_ICON = "changedIcon",
     CHANGED_FULL_WIDTH_MODE = "changedFullWidthMode",

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

@@ -1 +1,2 @@
-export declare const mbeExtensionWrapperCSS: import("@emotion/react").SerializedStyles;
+export declare const mbeExtensionWrapperCSSStyles: import("@emotion/react").SerializedStyles;
+export declare const overlayStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/analytics/types/enums.d.ts

@@ -8,6 +8,7 @@ export declare enum ACTION {
     ACTIVATED = "activated",
     ADDED = "added",
     BROWSER_FREEZE = "browserFreeze",
+    CAUGHT_DOM_ERROR = "caughtDomError",
     CHANGED_BACKGROUND_COLOR = "changedBackgroundColor",
     CHANGED_ICON = "changedIcon",
     CHANGED_FULL_WIDTH_MODE = "changedFullWidthMode",

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

@@ -1 +1,2 @@
-export declare const mbeExtensionWrapperCSS: import("@emotion/react").SerializedStyles;
+export declare const mbeExtensionWrapperCSSStyles: import("@emotion/react").SerializedStyles;
+export declare const overlayStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.18.2",
+  "version": "78.19.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"