@atlaskit/editor-common 78.4.1 → 78.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 78.5.0
+
+### Minor Changes
+
+- [#76115](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76115) [`3e3eb7cf04e1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3e3eb7cf04e1) - ED-21718 Transform slice to remove nestedExpand from slice before pasting
+
+### Patch Changes
+
+- [#75775](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75775) [`d0cee3285a1a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0cee3285a1a) - ED-22287: Adding 16px right padding to panel for all elements. Also using 12px for the no-icon usecase.
+
+## 78.4.2
+
+### Patch Changes
+
+- [#74946](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74946) [`6a1fca4dee65`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6a1fca4dee65) - [ux] Media Inline Images now support previewer when clicked in renderer
+
 ## 78.4.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -96,6 +96,9 @@
         {
             "path": "../../../media/media-ui/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../media/media-viewer/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../elements/mention/afm-cc/tsconfig.json"
         },

package/dist/cjs/media-inline/inline-image-wrapper.js

@@ -25,11 +25,13 @@ var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrappe
   var _ref2;
   var children = _ref.children,
     isSelected = _ref.isSelected,
+    isInteractive = _ref.isInteractive,
     aspectRatio = _ref.aspectRatio,
     borderSize = _ref.borderSize,
     borderColor = _ref.borderColor,
     _ref$htmlAttrs = _ref.htmlAttrs,
-    htmlAttrs = _ref$htmlAttrs === void 0 ? {} : _ref$htmlAttrs;
+    htmlAttrs = _ref$htmlAttrs === void 0 ? {} : _ref$htmlAttrs,
+    onClick = _ref.onClick;
   var borderStyleVars = borderSize && borderColor ? (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _styles.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, borderSize), (0, _defineProperty2.default)(_ref2, _styles.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor), _ref2) : {};
   var aspectStyleVars = aspectRatio ? (0, _defineProperty2.default)({}, _styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
   return (
@@ -37,8 +39,9 @@ var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrappe
     (0, _react.jsx)("span", (0, _extends2.default)({
       style: _objectSpread(_objectSpread({}, borderStyleVars), aspectStyleVars),
       className: _styles.INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [_styles.wrapperStyle, borderSize && borderColor && _styles.borderStyle, isSelected && _styles.selectedStyle],
-      "data-testid": "inline-image-wrapper"
+      css: [_styles.wrapperStyle, borderSize && borderColor && _styles.borderStyle, isSelected && _styles.selectedStyle, isInteractive && _styles.interactiveStyle],
+      "data-testid": "inline-image-wrapper",
+      onClick: onClick
     }, htmlAttrs), (0, _react.jsx)("span", {
       css: sizeWrapperStyle
     }, children))

package/dist/cjs/media-inline/media-inline-image-card.js

@@ -9,11 +9,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaViewer = require("@atlaskit/media-viewer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaInlineCard = require("../messages/media-inline-card");
 var _constants = require("./constants");
 var _inlineImageCard = require("./inline-image-card");
@@ -33,7 +36,8 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
     height = _ref.height,
     border = _ref.border,
     ssr = _ref.ssr,
-    serializeDataAttrs = _ref.serializeDataAttrs;
+    serializeDataAttrs = _ref.serializeDataAttrs,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fileState = _useState2[0],
@@ -50,6 +54,10 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isSucceededEventSent = _useState8[0],
     setIsSucceededEventSent = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    isMediaViewerVisible = _useState10[0],
+    setMediaViewerVisible = _useState10[1];
   var _ref2 = intl || (0, _reactIntlNext.createIntl)({
       locale: 'en'
     }),
@@ -182,13 +190,35 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
     }
     return {};
   }, [alt, fileState, height, identifier, width, serializeDataAttrs]);
-  return (0, _react2.jsx)(_inlineImageWrapper.InlineImageWrapper, {
+  var onMediaInlineImageClick = (0, _react.useCallback)(function () {
+    if (shouldOpenMediaViewer && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.renderer-preview-support_3w1ju')) {
+      setMediaViewerVisible(true);
+    }
+  }, [shouldOpenMediaViewer]);
+  var onMediaInlinePreviewClose = (0, _react.useCallback)(function () {
+    setMediaViewerVisible(false);
+  }, []);
+  var mediaViewer = (0, _react.useMemo)(function () {
+    if (isMediaViewerVisible && mediaClient !== null && mediaClient !== void 0 && mediaClient.mediaClientConfig) {
+      return /*#__PURE__*/_reactDom.default.createPortal((0, _react2.jsx)(_mediaViewer.MediaViewer, {
+        collectionName: identifier.collectionName || '',
+        items: [identifier],
+        mediaClientConfig: mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig,
+        selectedItem: identifier,
+        onClose: onMediaInlinePreviewClose
+      }), document.body);
+    }
+    return null;
+  }, [identifier, isMediaViewerVisible, mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig, onMediaInlinePreviewClose]);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineImageWrapper.InlineImageWrapper, {
     isSelected: isSelected,
+    isInteractive: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.renderer-preview-support_3w1ju') && shouldOpenMediaViewer,
     aspectRatio: aspectRatio,
     borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
     borderSize: border === null || border === void 0 ? void 0 : border.borderSize,
-    htmlAttrs: htmlAttributes
-  }, content(scaledDimension));
+    htmlAttrs: htmlAttributes,
+    onClick: onMediaInlineImageClick
+  }, content(scaledDimension)), mediaViewer);
 };
 var MediaInlineImageCard = exports.MediaInlineImageCard = (0, _reactIntlNext.injectIntl)(MediaInlineImageCardInternal, {
   enforceContext: false

package/dist/cjs/media-inline/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.selectedStyle = exports.mediaInlineImageStyles = exports.borderStyle = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
+exports.wrapperStyle = exports.selectedStyle = exports.mediaInlineImageStyles = exports.interactiveStyle = exports.borderStyle = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
@@ -43,6 +43,9 @@ var selectedStyle = exports.selectedStyle = (0, _react.css)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")")),
   outline: 'none'
 });
+var interactiveStyle = exports.interactiveStyle = (0, _react.css)({
+  cursor: 'pointer'
+});
 var borderStyle = exports.borderStyle = (0, _react.css)({
   borderColor: "var(".concat(INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, ")"),
   borderStyle: 'solid',

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.4.1";
+var packageVersion = "78.5.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/styles/shared/panel.js

@@ -167,7 +167,7 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
 };
 var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
 };
 var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles() {
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());

package/dist/cjs/transforms/expand.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformSliceToRemoveOpenExpand = exports.transformSliceNestedExpandToExpand = exports.findExpand = void 0;
+exports.transformSliceToRemoveOpenNestedExpand = exports.transformSliceToRemoveOpenExpand = exports.transformSliceNestedExpandToExpand = exports.findExpand = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _slice = require("../utils/slice");
@@ -24,6 +24,12 @@ var transformSliceToRemoveOpenExpand = exports.transformSliceToRemoveOpenExpand
   }
   return slice;
 };
+var transformSliceToRemoveOpenNestedExpand = exports.transformSliceToRemoveOpenNestedExpand = function transformSliceToRemoveOpenNestedExpand(slice, schema) {
+  if (slice.openStart > 1 && slice.openEnd > 1 && slice.content.childCount === 1 && slice.content.firstChild && slice.content.firstChild.type === schema.nodes.nestedExpand) {
+    return new _model.Slice(slice.content.firstChild.content, slice.openStart - 1, slice.openEnd - 1);
+  }
+  return slice;
+};
 var transformSliceNestedExpandToExpand = exports.transformSliceNestedExpandToExpand = function transformSliceNestedExpandToExpand(slice, schema) {
   var _schema$nodes = schema.nodes,
     expand = _schema$nodes.expand,

package/dist/cjs/transforms/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "transformSliceToRemoveOpenMultiBodiedExtension",
     return _extension.transformSliceToRemoveOpenMultiBodiedExtension;
   }
 });
+Object.defineProperty(exports, "transformSliceToRemoveOpenNestedExpand", {
+  enumerable: true,
+  get: function get() {
+    return _expand.transformSliceToRemoveOpenNestedExpand;
+  }
+});
 Object.defineProperty(exports, "unwrapContentFromLayout", {
   enumerable: true,
   get: function get() {

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

package/dist/es2019/media-inline/inline-image-wrapper.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import { css, jsx } from '@emotion/react';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
-import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, selectedStyle, wrapperStyle } from './styles';
+import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, interactiveStyle, selectedStyle, wrapperStyle } from './styles';
 
 // The MediaImage component needs to obtain its parent's dimensions.
 // To achieve this, we have added an additional wrapper that allows
@@ -17,10 +17,12 @@ const sizeWrapperStyle = css({
 export const InlineImageWrapper = ({
   children,
   isSelected,
+  isInteractive,
   aspectRatio,
   borderSize,
   borderColor,
-  htmlAttrs = {}
+  htmlAttrs = {},
+  onClick
 }) => {
   const borderStyleVars = borderSize && borderColor ? {
     [INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY]: borderSize,
@@ -37,8 +39,9 @@ export const InlineImageWrapper = ({
         ...aspectStyleVars
       },
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
-      "data-testid": "inline-image-wrapper"
+      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle, isInteractive && interactiveStyle],
+      "data-testid": "inline-image-wrapper",
+      onClick: onClick
     }, htmlAttrs), jsx("span", {
       css: sizeWrapperStyle
     }, children))

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -1,12 +1,15 @@
 /** @jsx jsx */
 
-import { useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import ReactDOM from 'react-dom';
 import { createIntl, injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
 import { FileFetcherError } from '@atlaskit/media-client';
 import { MediaClientContext } from '@atlaskit/media-client-react';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { messages } from '../messages/media-inline-card';
 import { referenceHeights } from './constants';
 import { InlineImageCard } from './inline-image-card';
@@ -24,12 +27,14 @@ export const MediaInlineImageCardInternal = ({
   height,
   border,
   ssr,
-  serializeDataAttrs
+  serializeDataAttrs,
+  shouldOpenMediaViewer
 }) => {
   const [fileState, setFileState] = useState();
   const [subscribeError, setSubscribeError] = useState();
   const [isFailedEventSent, setIsFailedEventSent] = useState(false);
   const [isSucceededEventSent, setIsSucceededEventSent] = useState(false);
+  const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
   const {
     formatMessage
   } = intl || createIntl({
@@ -159,13 +164,35 @@ export const MediaInlineImageCardInternal = ({
     }
     return {};
   }, [alt, fileState, height, identifier, width, serializeDataAttrs]);
-  return jsx(InlineImageWrapper, {
+  const onMediaInlineImageClick = useCallback(() => {
+    if (shouldOpenMediaViewer && getBooleanFF('platform.editor.media.inline-image.renderer-preview-support_3w1ju')) {
+      setMediaViewerVisible(true);
+    }
+  }, [shouldOpenMediaViewer]);
+  const onMediaInlinePreviewClose = useCallback(() => {
+    setMediaViewerVisible(false);
+  }, []);
+  const mediaViewer = useMemo(() => {
+    if (isMediaViewerVisible && mediaClient !== null && mediaClient !== void 0 && mediaClient.mediaClientConfig) {
+      return /*#__PURE__*/ReactDOM.createPortal(jsx(MediaViewer, {
+        collectionName: identifier.collectionName || '',
+        items: [identifier],
+        mediaClientConfig: mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig,
+        selectedItem: identifier,
+        onClose: onMediaInlinePreviewClose
+      }), document.body);
+    }
+    return null;
+  }, [identifier, isMediaViewerVisible, mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig, onMediaInlinePreviewClose]);
+  return jsx(Fragment, null, jsx(InlineImageWrapper, {
     isSelected: isSelected,
+    isInteractive: getBooleanFF('platform.editor.media.inline-image.renderer-preview-support_3w1ju') && shouldOpenMediaViewer,
     aspectRatio: aspectRatio,
     borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
     borderSize: border === null || border === void 0 ? void 0 : border.borderSize,
-    htmlAttrs: htmlAttributes
-  }, content(scaledDimension));
+    htmlAttrs: htmlAttributes,
+    onClick: onMediaInlineImageClick
+  }, content(scaledDimension)), mediaViewer);
 };
 export const MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
   enforceContext: false

package/dist/es2019/media-inline/styles.js

@@ -71,6 +71,9 @@ export const selectedStyle = css({
   boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
   outline: 'none'
 });
+export const interactiveStyle = css({
+  cursor: 'pointer'
+});
 export const borderStyle = css({
   borderColor: `var(${INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY})`,
   borderStyle: 'solid',

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.4.1";
+const packageVersion = "78.5.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/shared/panel.js

@@ -152,7 +152,10 @@ const mainDynamicStyles = panelType => {
 export const panelSharedStylesWithoutPrefix = () => css`
   border-radius: ${"var(--ds-border-radius, 3px)"};
   margin: ${blockNodesVerticalMargin} 0 0;
-  padding: ${"var(--ds-space-100, 8px)"};
+  padding-top: ${"var(--ds-space-100, 8px)"};
+  padding-right: ${"var(--ds-space-200, 16px)"};
+  padding-bottom: ${"var(--ds-space-100, 8px)"};
+  padding-left: ${"var(--ds-space-100, 8px)"};
   min-width: ${akEditorTableCellMinWidth}px;
   display: flex;
   position: relative;

package/dist/es2019/transforms/expand.js

@@ -19,6 +19,12 @@ export const transformSliceToRemoveOpenExpand = (slice, schema) => {
   }
   return slice;
 };
+export const transformSliceToRemoveOpenNestedExpand = (slice, schema) => {
+  if (slice.openStart > 1 && slice.openEnd > 1 && slice.content.childCount === 1 && slice.content.firstChild && slice.content.firstChild.type === schema.nodes.nestedExpand) {
+    return new Slice(slice.content.firstChild.content, slice.openStart - 1, slice.openEnd - 1);
+  }
+  return slice;
+};
 export const transformSliceNestedExpandToExpand = (slice, schema) => {
   const {
     expand,

package/dist/es2019/transforms/index.js

@@ -1,5 +1,5 @@
 export { unwrapContentFromLayout, removeLayoutFromFirstChild, removeLayoutFromLastChild, transformSliceToRemoveOpenLayoutNodes } from './layout';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceNestedExpandToExpand } from './expand';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from './expand';
 export { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenMultiBodiedExtension } from './extension';
 export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, findCodeBlock } from './code-block';
 export { transformSliceToDecisionList } from './decision-list';

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

package/dist/esm/media-inline/inline-image-wrapper.js

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { css, jsx } from '@emotion/react';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
-import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, selectedStyle, wrapperStyle } from './styles';
+import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, interactiveStyle, selectedStyle, wrapperStyle } from './styles';
 
 // The MediaImage component needs to obtain its parent's dimensions.
 // To achieve this, we have added an additional wrapper that allows
@@ -21,11 +21,13 @@ export var InlineImageWrapper = function InlineImageWrapper(_ref) {
   var _ref2;
   var children = _ref.children,
     isSelected = _ref.isSelected,
+    isInteractive = _ref.isInteractive,
     aspectRatio = _ref.aspectRatio,
     borderSize = _ref.borderSize,
     borderColor = _ref.borderColor,
     _ref$htmlAttrs = _ref.htmlAttrs,
-    htmlAttrs = _ref$htmlAttrs === void 0 ? {} : _ref$htmlAttrs;
+    htmlAttrs = _ref$htmlAttrs === void 0 ? {} : _ref$htmlAttrs,
+    onClick = _ref.onClick;
   var borderStyleVars = borderSize && borderColor ? (_ref2 = {}, _defineProperty(_ref2, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, borderSize), _defineProperty(_ref2, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, hexToEditorBorderPaletteColor(borderColor) || borderColor), _ref2) : {};
   var aspectStyleVars = aspectRatio ? _defineProperty({}, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
   return (
@@ -33,8 +35,9 @@ export var InlineImageWrapper = function InlineImageWrapper(_ref) {
     jsx("span", _extends({
       style: _objectSpread(_objectSpread({}, borderStyleVars), aspectStyleVars),
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
-      "data-testid": "inline-image-wrapper"
+      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle, isInteractive && interactiveStyle],
+      "data-testid": "inline-image-wrapper",
+      onClick: onClick
     }, htmlAttrs), jsx("span", {
       css: sizeWrapperStyle
     }, children))

package/dist/esm/media-inline/media-inline-image-card.js

@@ -4,13 +4,16 @@ 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; }
 /** @jsx jsx */
 
-import { useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import ReactDOM from 'react-dom';
 import { createIntl, injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
 import { FileFetcherError } from '@atlaskit/media-client';
 import { MediaClientContext } from '@atlaskit/media-client-react';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { messages } from '../messages/media-inline-card';
 import { referenceHeights } from './constants';
 import { InlineImageCard } from './inline-image-card';
@@ -28,7 +31,8 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     height = _ref.height,
     border = _ref.border,
     ssr = _ref.ssr,
-    serializeDataAttrs = _ref.serializeDataAttrs;
+    serializeDataAttrs = _ref.serializeDataAttrs,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
@@ -45,6 +49,10 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     _useState8 = _slicedToArray(_useState7, 2),
     isSucceededEventSent = _useState8[0],
     setIsSucceededEventSent = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isMediaViewerVisible = _useState10[0],
+    setMediaViewerVisible = _useState10[1];
   var _ref2 = intl || createIntl({
       locale: 'en'
     }),
@@ -177,13 +185,35 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     }
     return {};
   }, [alt, fileState, height, identifier, width, serializeDataAttrs]);
-  return jsx(InlineImageWrapper, {
+  var onMediaInlineImageClick = useCallback(function () {
+    if (shouldOpenMediaViewer && getBooleanFF('platform.editor.media.inline-image.renderer-preview-support_3w1ju')) {
+      setMediaViewerVisible(true);
+    }
+  }, [shouldOpenMediaViewer]);
+  var onMediaInlinePreviewClose = useCallback(function () {
+    setMediaViewerVisible(false);
+  }, []);
+  var mediaViewer = useMemo(function () {
+    if (isMediaViewerVisible && mediaClient !== null && mediaClient !== void 0 && mediaClient.mediaClientConfig) {
+      return /*#__PURE__*/ReactDOM.createPortal(jsx(MediaViewer, {
+        collectionName: identifier.collectionName || '',
+        items: [identifier],
+        mediaClientConfig: mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig,
+        selectedItem: identifier,
+        onClose: onMediaInlinePreviewClose
+      }), document.body);
+    }
+    return null;
+  }, [identifier, isMediaViewerVisible, mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig, onMediaInlinePreviewClose]);
+  return jsx(Fragment, null, jsx(InlineImageWrapper, {
     isSelected: isSelected,
+    isInteractive: getBooleanFF('platform.editor.media.inline-image.renderer-preview-support_3w1ju') && shouldOpenMediaViewer,
     aspectRatio: aspectRatio,
     borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
     borderSize: border === null || border === void 0 ? void 0 : border.borderSize,
-    htmlAttrs: htmlAttributes
-  }, content(scaledDimension));
+    htmlAttrs: htmlAttributes,
+    onClick: onMediaInlineImageClick
+  }, content(scaledDimension)), mediaViewer);
 };
 export var MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
   enforceContext: false

package/dist/esm/media-inline/styles.js

@@ -36,6 +36,9 @@ export var selectedStyle = css({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
   outline: 'none'
 });
+export var interactiveStyle = css({
+  cursor: 'pointer'
+});
 export var borderStyle = css({
   borderColor: "var(".concat(INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, ")"),
   borderStyle: 'solid',

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.4.1";
+var packageVersion = "78.5.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/styles/shared/panel.js

@@ -158,7 +158,7 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
 };
 export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
 };
 export var panelSharedStyles = function panelSharedStyles() {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());

package/dist/esm/transforms/expand.js

@@ -18,6 +18,12 @@ export var transformSliceToRemoveOpenExpand = function transformSliceToRemoveOpe
   }
   return slice;
 };
+export var transformSliceToRemoveOpenNestedExpand = function transformSliceToRemoveOpenNestedExpand(slice, schema) {
+  if (slice.openStart > 1 && slice.openEnd > 1 && slice.content.childCount === 1 && slice.content.firstChild && slice.content.firstChild.type === schema.nodes.nestedExpand) {
+    return new Slice(slice.content.firstChild.content, slice.openStart - 1, slice.openEnd - 1);
+  }
+  return slice;
+};
 export var transformSliceNestedExpandToExpand = function transformSliceNestedExpandToExpand(slice, schema) {
   var _schema$nodes = schema.nodes,
     expand = _schema$nodes.expand,

package/dist/esm/transforms/index.js

@@ -1,5 +1,5 @@
 export { unwrapContentFromLayout, removeLayoutFromFirstChild, removeLayoutFromLastChild, transformSliceToRemoveOpenLayoutNodes } from './layout';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceNestedExpandToExpand } from './expand';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from './expand';
 export { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenMultiBodiedExtension } from './extension';
 export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, findCodeBlock } from './code-block';
 export { transformSliceToDecisionList } from './decision-list';

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

package/dist/types/media-inline/inline-image-wrapper.d.ts

@@ -3,12 +3,14 @@ import type { FC, ReactElement } from 'react';
 type Props = {
     children: ReactElement;
     isSelected?: boolean;
+    isInteractive?: boolean;
     aspectRatio?: number | string;
     borderSize?: number;
     borderColor?: string;
     htmlAttrs?: {
         [key: string]: string | number | undefined;
     };
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };
 export declare const InlineImageWrapper: FC<Props>;
 export {};

package/dist/types/media-inline/media-inline-image-card.d.ts

@@ -14,6 +14,7 @@ export interface MediaInlineImageCardProps {
         borderColor?: string;
     };
     ssr?: MediaSSR;
+    shouldOpenMediaViewer?: boolean;
 }
 export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps & MediaInlineAttrs>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps & MediaInlineAttrs>;

package/dist/types/media-inline/styles.d.ts

@@ -11,4 +11,5 @@ export declare const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = "--editor-media-inl
 export declare const mediaInlineImageStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
 export declare const selectedStyle: import("@emotion/react").SerializedStyles;
+export declare const interactiveStyle: import("@emotion/react").SerializedStyles;
 export declare const borderStyle: import("@emotion/react").SerializedStyles;

package/dist/types/transforms/expand.d.ts

@@ -1,5 +1,7 @@
-import { Schema, Slice } from '@atlaskit/editor-prosemirror/model';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+import { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const findExpand: (state: EditorState, selection?: Selection | null) => import("prosemirror-utils/dist/types").FindResult;
 export declare const transformSliceToRemoveOpenExpand: (slice: Slice, schema: Schema) => Slice;
+export declare const transformSliceToRemoveOpenNestedExpand: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceNestedExpandToExpand: (slice: Slice, schema: Schema) => Slice;

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

@@ -1,5 +1,5 @@
 export { unwrapContentFromLayout, removeLayoutFromFirstChild, removeLayoutFromLastChild, transformSliceToRemoveOpenLayoutNodes, } from './layout';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceNestedExpandToExpand, } from './expand';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, } from './expand';
 export { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenMultiBodiedExtension, } from './extension';
 export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, findCodeBlock, } from './code-block';
 export { transformSliceToDecisionList } from './decision-list';

package/dist/types-ts4.5/media-inline/inline-image-wrapper.d.ts

@@ -3,12 +3,14 @@ import type { FC, ReactElement } from 'react';
 type Props = {
     children: ReactElement;
     isSelected?: boolean;
+    isInteractive?: boolean;
     aspectRatio?: number | string;
     borderSize?: number;
     borderColor?: string;
     htmlAttrs?: {
         [key: string]: string | number | undefined;
     };
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };
 export declare const InlineImageWrapper: FC<Props>;
 export {};

package/dist/types-ts4.5/media-inline/media-inline-image-card.d.ts

@@ -14,6 +14,7 @@ export interface MediaInlineImageCardProps {
         borderColor?: string;
     };
     ssr?: MediaSSR;
+    shouldOpenMediaViewer?: boolean;
 }
 export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps & MediaInlineAttrs>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps & MediaInlineAttrs>;

package/dist/types-ts4.5/media-inline/styles.d.ts

@@ -11,4 +11,5 @@ export declare const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = "--editor-media-inl
 export declare const mediaInlineImageStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
 export declare const selectedStyle: import("@emotion/react").SerializedStyles;
+export declare const interactiveStyle: import("@emotion/react").SerializedStyles;
 export declare const borderStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/transforms/expand.d.ts

@@ -1,5 +1,7 @@
-import { Schema, Slice } from '@atlaskit/editor-prosemirror/model';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+import { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const findExpand: (state: EditorState, selection?: Selection | null) => import("prosemirror-utils/dist/types").FindResult;
 export declare const transformSliceToRemoveOpenExpand: (slice: Slice, schema: Schema) => Slice;
+export declare const transformSliceToRemoveOpenNestedExpand: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceNestedExpandToExpand: (slice: Slice, schema: Schema) => Slice;

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

@@ -1,5 +1,5 @@
 export { unwrapContentFromLayout, removeLayoutFromFirstChild, removeLayoutFromLastChild, transformSliceToRemoveOpenLayoutNodes, } from './layout';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceNestedExpandToExpand, } from './expand';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, } from './expand';
 export { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenMultiBodiedExtension, } from './extension';
 export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark, findCodeBlock, } from './code-block';
 export { transformSliceToDecisionList } from './decision-list';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.4.1",
+  "version": "78.5.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -120,11 +120,12 @@
     "@atlaskit/media-file-preview": "^0.5.0",
     "@atlaskit/media-picker": "^66.3.0",
     "@atlaskit/media-ui": "^25.0.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.47.0",
+    "@atlaskit/smart-card": "^26.48.0",
     "@atlaskit/smart-user-picker": "^6.8.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/task-decision": "^17.9.0",
@@ -214,6 +215,9 @@
     "platform.editor.media.inline-image.base-support": {
       "type": "boolean"
     },
+    "platform.editor.media.inline-image.renderer-preview-support_3w1ju": {
+      "type": "boolean"
+    },
     "platform.linking-platform.datasource-assets_objects": {
       "type": "boolean"
     },