@atlaskit/editor-common 78.4.0 → 78.4.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-common
 
+## 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
+
+- [#75400](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75400) [`6b582c433397`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b582c433397) - Fixed the margin for the action item inside the panel
+  Moved the panel test-cases from editor-plugin-context-panel-tests to editor-plugin-panel-tests
+
 ## 78.4.0
 
 ### Minor 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.0";
+var packageVersion = "78.4.2";
 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/task-decision.js

@@ -9,9 +9,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 var TaskDecisionSharedCssClassName = exports.TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap',
   TASK_CONTAINER: 'taskItemView-content-wrap',
   TASK_ITEM: 'task-item'
 };
-var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n\n    .", " {\n      span[contenteditable='false'] {\n        height: ", "em;\n      }\n    }\n\n    .", " {\n      line-height: ", ";\n    }\n  }\n\n  div[data-task-local-id] {\n    span[contenteditable='false'] {\n      height: ", "em;\n    }\n    span[contenteditable='false'] + div {\n      line-height: ", "em;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: ", " 0 0 0;\n  }\n\n  div[data-task-list-local-id] {\n    // If task item is not first in the list then set margin top to 4px.\n    div + div {\n      margin-top: ", ";\n    }\n  }\n\n  // If task list is not first in the document then set margin top to 4px.\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: ", ";\n    margin-left: ", ";\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, _editorSharedStyles.akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)");
+var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n\n    .", " {\n      span[contenteditable='false'] {\n        height: ", "em;\n      }\n    }\n\n    .", " {\n      line-height: ", ";\n    }\n  }\n\n  div[data-task-local-id] {\n    span[contenteditable='false'] {\n      height: ", "em;\n    }\n    span[contenteditable='false'] + div {\n      line-height: ", "em;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: ", " 0 0 0;\n  }\n\n  div[data-task-list-local-id] {\n    // If task item is not first in the list then set margin top to 4px.\n    div + div {\n      margin-top: ", ";\n    }\n  }\n\n  // If task list is not first in the document then set margin top to 4px.\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: ", ";\n    margin-left: ", ";\n  }\n\n  /* When action list is inside panel */\n  .ak-editor-panel__content {\n    > div[data-task-list-local-id]:first-child {\n      margin: 0 0 0 0 !important;\n    }\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, _editorSharedStyles.akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight, "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)");

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

package/dist/es2019/styles/shared/task-decision.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 import { css } from '@emotion/react';
 import { akEditorLineHeight, akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export const TaskDecisionSharedCssClassName = {
@@ -53,4 +54,11 @@ export const tasksAndDecisionsStyles = css`
     margin-top: ${"var(--ds-space-050, 4px)"};
     margin-left: ${"var(--ds-space-300, 24px)"};
   }
+
+  /* When action list is inside panel */
+  .ak-editor-panel__content {
+    > div[data-task-list-local-id]:first-child {
+      margin: 0 0 0 0 !important;
+    }
+  }
 `;

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.0";
+const packageVersion = "78.4.2";
 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.0";
+var packageVersion = "78.4.2";
 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/task-decision.js

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 import { css } from '@emotion/react';
 import { akEditorLineHeight, akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export var TaskDecisionSharedCssClassName = {
@@ -7,4 +8,4 @@ export var TaskDecisionSharedCssClassName = {
   TASK_CONTAINER: 'taskItemView-content-wrap',
   TASK_ITEM: 'task-item'
 };
-export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n\n    .", " {\n      span[contenteditable='false'] {\n        height: ", "em;\n      }\n    }\n\n    .", " {\n      line-height: ", ";\n    }\n  }\n\n  div[data-task-local-id] {\n    span[contenteditable='false'] {\n      height: ", "em;\n    }\n    span[contenteditable='false'] + div {\n      line-height: ", "em;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: ", " 0 0 0;\n  }\n\n  div[data-task-list-local-id] {\n    // If task item is not first in the list then set margin top to 4px.\n    div + div {\n      margin-top: ", ";\n    }\n  }\n\n  // If task list is not first in the document then set margin top to 4px.\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: ", ";\n    margin-left: ", ";\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, akEditorLineHeight, akEditorLineHeight, akEditorLineHeight, "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)");
+export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n\n    .", " {\n      span[contenteditable='false'] {\n        height: ", "em;\n      }\n    }\n\n    .", " {\n      line-height: ", ";\n    }\n  }\n\n  div[data-task-local-id] {\n    span[contenteditable='false'] {\n      height: ", "em;\n    }\n    span[contenteditable='false'] + div {\n      line-height: ", "em;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: ", " 0 0 0;\n  }\n\n  div[data-task-list-local-id] {\n    // If task item is not first in the list then set margin top to 4px.\n    div + div {\n      margin-top: ", ";\n    }\n  }\n\n  // If task list is not first in the document then set margin top to 4px.\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: ", ";\n    margin-left: ", ";\n  }\n\n  /* When action list is inside panel */\n  .ak-editor-panel__content {\n    > div[data-task-list-local-id]:first-child {\n      margin: 0 0 0 0 !important;\n    }\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER, TaskDecisionSharedCssClassName.TASK_CONTAINER, akEditorLineHeight, TaskDecisionSharedCssClassName.TASK_ITEM, akEditorLineHeight, akEditorLineHeight, akEditorLineHeight, "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)");

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.0";
+var packageVersion = "78.4.2";
 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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.4.0",
+  "version": "78.4.2",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -120,6 +120,7 @@
     "@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",
@@ -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"
     },