@atlaskit/editor-common 76.25.0 → 76.25.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 76.25.1
+
+### Patch Changes
+
+- [#58503](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58503) [`b98a7eb489b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b98a7eb489b9) - [ED-20984] Implement loading and error view for media inline image card
+
 ## 76.25.0
 
 ### Minor Changes

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

@@ -5,12 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineImageWrapper = void 0;
 var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var wrapperStyle = (0, _react.css)({
-  display: 'inline-block'
+  display: 'inline-block',
+  verticalAlign: 'text-bottom',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var selectedStyle = (0, _react.css)({
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")")),
+  outline: 'none',
+  borderColor: 'transparent'
 });
 var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    css: wrapperStyle
+  var children = _ref.children,
+    isSelected = _ref.isSelected;
+  return /*#__PURE__*/React.createElement("span", {
+    css: [wrapperStyle, isSelected && selectedStyle]
   }, children);
 };

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

@@ -4,12 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaInlineImageCard = void 0;
+exports.MediaInlineImageCardInternal = exports.MediaInlineImageCard = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var MediaInlineImageCard = exports.MediaInlineImageCard = function MediaInlineImageCard(_ref) {
+var _reactIntlNext = require("react-intl-next");
+var _mediaInlineCard = require("../messages/media-inline-card");
+var _inlineImageWrapper = require("./inline-image-wrapper");
+var _errorView = require("./views/error-view");
+var _loadingView = require("./views/loading-view");
+var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = function MediaInlineImageCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
-    identifier = _ref.identifier;
+    identifier = _ref.identifier,
+    isSelected = _ref.isSelected,
+    intl = _ref.intl;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fileState = _useState2[0],
@@ -18,6 +25,10 @@ var MediaInlineImageCard = exports.MediaInlineImageCard = function MediaInlineIm
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     subscribeError = _useState4[0],
     setSubscribeError = _useState4[1];
+  var _ref2 = intl || (0, _reactIntlNext.createIntl)({
+      locale: 'en'
+    }),
+    formatMessage = _ref2.formatMessage;
   (0, _react.useEffect)(function () {
     var subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -34,41 +45,44 @@ var MediaInlineImageCard = exports.MediaInlineImageCard = function MediaInlineIm
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (subscribeError) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard subscribe error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard failed-processing view");
-  }
-  // Empty file handling
-  if (fileState && !fileState.name) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard empty file name error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
-    throw new Error("not yet implemented: MediaInlineImageCard uploading view");
-  }
-  if (!fileState) {
-    throw new Error("not yet implemented: MediaInlineImageCard loading view");
-  }
+  var content = function content() {
+    if (subscribeError) {
+      var isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
+      var errorMessage = isUploading ? _mediaInlineCard.messages.failedToUpload : _mediaInlineCard.messages.unableToLoadContent;
+      return /*#__PURE__*/React.createElement(_errorView.InlineImageCardErrorView, {
+        message: formatMessage(errorMessage)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+      return /*#__PURE__*/React.createElement(_errorView.InlineImageCardErrorView, {
+        message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+      return /*#__PURE__*/React.createElement(_errorView.InlineImageCardErrorView, {
+        message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
+      });
+    }
+    // Empty file handling
+    if (fileState && !fileState.name) {
+      return /*#__PURE__*/React.createElement(_errorView.InlineImageCardErrorView, {
+        message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
+      });
+    }
+    if (!fileState) {
+      return /*#__PURE__*/React.createElement(_loadingView.InlineImageCardLoadingView, null);
+    }
 
-  // TODO
-  // use Card from `@atlaskit/media-card` with an inline block wrapper
-  // with:
-  // selection state and `mediaOptions.allowLazyLoading`
-  throw new Error("not yet implemented: MediaInlineImageCard loading view");
-};
+    // TODO
+    // use Card from `@atlaskit/media-card` with an inline block wrapper
+    // with:
+    // selection state and `mediaOptions.allowLazyLoading`
+    throw new Error("not yet implemented: MediaInlineImageCard loading view");
+  };
+  return /*#__PURE__*/React.createElement(_inlineImageWrapper.InlineImageWrapper, {
+    isSelected: isSelected
+  }, content());
+};
+var MediaInlineImageCard = exports.MediaInlineImageCard = (0, _reactIntlNext.injectIntl)(MediaInlineImageCardInternal, {
+  enforceContext: false
+});

package/dist/cjs/media-inline/views/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_SIZE_THRESOLD = void 0;
+/** Height threshold that determines icon size to be small or medium */
+var ICON_SIZE_THRESOLD = exports.ICON_SIZE_THRESOLD = 24;

package/dist/cjs/media-inline/views/error-view.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineImageCardErrorView = void 0;
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _constants = require("./constants");
+var _frame = require("./frame");
+var _iconWrapper = require("./icon-wrapper");
+var InlineImageCardErrorView = exports.InlineImageCardErrorView = function InlineImageCardErrorView(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'media-inline-image-card-error-view' : _ref$testId,
+    message = _ref.message,
+    icon = _ref.icon,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? _constants.ICON_SIZE_THRESOLD : _ref$height;
+  return /*#__PURE__*/React.createElement(_frame.Frame, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(_tooltip.default, {
+    content: message,
+    position: "top",
+    tag: "span",
+    hideTooltipOnClick: true
+  }, /*#__PURE__*/React.createElement(_iconWrapper.IconWrapper, null, icon || /*#__PURE__*/React.createElement(_warning.default, {
+    label: "error",
+    size: height > _constants.ICON_SIZE_THRESOLD ? 'medium' : 'small',
+    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+  }))));
+};

package/dist/cjs/media-inline/views/frame.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = void 0;
+var _wrapper = require("./wrapper");
+var Frame = exports.Frame = function Frame(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("span", {
+    css: _wrapper.wrapperStyle,
+    "data-testid": testId
+  }, children);
+};

package/dist/cjs/media-inline/views/icon-wrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconWrapper = void 0;
+var _react = require("@emotion/react");
+var wrapperStyle = (0, _react.css)({
+  display: 'flex',
+  'span > svg': {
+    verticalAlign: 'baseline'
+  }
+});
+var IconWrapper = exports.IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    css: wrapperStyle,
+    "data-testid": "media-inline-image-card-icon"
+  }, children);
+};

package/dist/cjs/media-inline/views/loading-view.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineImageCardLoadingView = void 0;
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _constants = require("./constants");
+var _frame = require("./frame");
+var InlineImageCardLoadingView = exports.InlineImageCardLoadingView = function InlineImageCardLoadingView(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'media-inline-image-card-loading-view' : _ref$testId,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? _constants.ICON_SIZE_THRESOLD : _ref$height;
+  return /*#__PURE__*/React.createElement(_frame.Frame, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
+    size: height > _constants.ICON_SIZE_THRESOLD ? 'medium' : 'small'
+  }));
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyle = void 0;
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxDecorationBreak: 'clone',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: "".concat("var(--ds-text, ".concat(_colors.N900, ")")),
+  backgroundColor: "".concat("var(--ds-background-neutral, ".concat(_colors.N30A, ")")),
+  transition: '0.1s all ease-in-out',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")"))
+  }
+});

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  unableToLoadContent: {
+    id: 'fabric.editor.unableToLoadContent',
+    defaultMessage: "We couldn't load this content",
+    description: 'Display this message when there is an error loading file content'
+  },
+  failedToUpload: {
+    id: 'fabric.editor.failed_to_upload',
+    defaultMessage: 'Failed to upload',
+    description: 'Display this message when there is an error uploading a file'
+  }
+});

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 = "76.25.0";
+var packageVersion = "76.25.1";
 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

@@ -24,7 +24,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; } }
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.25.0";
+var packageVersion = "76.25.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -1,11 +1,21 @@
 import { css } from '@emotion/react';
+import { B300 } from '@atlaskit/theme/colors';
 const wrapperStyle = css({
-  display: 'inline-block'
+  display: 'inline-block',
+  verticalAlign: 'text-bottom',
+  borderRadius: `${"var(--ds-border-radius, 3px)"}`
+});
+const selectedStyle = css({
+  cursor: 'pointer',
+  boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
+  outline: 'none',
+  borderColor: 'transparent'
 });
 export const InlineImageWrapper = ({
-  children
+  children,
+  isSelected
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
-    css: wrapperStyle
+  return /*#__PURE__*/React.createElement("span", {
+    css: [wrapperStyle, isSelected && selectedStyle]
   }, children);
 };

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

@@ -1,10 +1,22 @@
 import { useEffect, useState } from 'react';
-export const MediaInlineImageCard = ({
+import { createIntl, injectIntl } from 'react-intl-next';
+import { messages } from '../messages/media-inline-card';
+import { InlineImageWrapper } from './inline-image-wrapper';
+import { InlineImageCardErrorView } from './views/error-view';
+import { InlineImageCardLoadingView } from './views/loading-view';
+export const MediaInlineImageCardInternal = ({
   mediaClient,
-  identifier
+  identifier,
+  isSelected,
+  intl
 }) => {
   const [fileState, setFileState] = useState();
   const [subscribeError, setSubscribeError] = useState();
+  const {
+    formatMessage
+  } = intl || createIntl({
+    locale: 'en'
+  });
   useEffect(() => {
     const subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -21,41 +33,44 @@ export const MediaInlineImageCard = ({
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (subscribeError) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error(`not yet implemented: MediaInlineImageCard subscribe error view`);
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error(`not yet implemented: MediaInlineImageCard error view`);
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error(`not yet implemented: MediaInlineImageCard failed-processing view`);
-  }
-  // Empty file handling
-  if (fileState && !fileState.name) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error(`not yet implemented: MediaInlineImageCard empty file name error view`);
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
-    throw new Error(`not yet implemented: MediaInlineImageCard uploading view`);
-  }
-  if (!fileState) {
-    throw new Error(`not yet implemented: MediaInlineImageCard loading view`);
-  }
+  const content = () => {
+    if (subscribeError) {
+      const isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
+      const errorMessage = isUploading ? messages.failedToUpload : messages.unableToLoadContent;
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(errorMessage)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    // Empty file handling
+    if (fileState && !fileState.name) {
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    if (!fileState) {
+      return /*#__PURE__*/React.createElement(InlineImageCardLoadingView, null);
+    }
 
-  // TODO
-  // use Card from `@atlaskit/media-card` with an inline block wrapper
-  // with:
-  // selection state and `mediaOptions.allowLazyLoading`
-  throw new Error(`not yet implemented: MediaInlineImageCard loading view`);
-};
+    // TODO
+    // use Card from `@atlaskit/media-card` with an inline block wrapper
+    // with:
+    // selection state and `mediaOptions.allowLazyLoading`
+    throw new Error(`not yet implemented: MediaInlineImageCard loading view`);
+  };
+  return /*#__PURE__*/React.createElement(InlineImageWrapper, {
+    isSelected: isSelected
+  }, content());
+};
+export const MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
+  enforceContext: false
+});

package/dist/es2019/media-inline/views/constants.js

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export const ICON_SIZE_THRESOLD = 24;

package/dist/es2019/media-inline/views/error-view.js

@@ -0,0 +1,25 @@
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { R300 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { ICON_SIZE_THRESOLD } from './constants';
+import { Frame } from './frame';
+import { IconWrapper } from './icon-wrapper';
+export const InlineImageCardErrorView = ({
+  testId = 'media-inline-image-card-error-view',
+  message,
+  icon,
+  height = ICON_SIZE_THRESOLD
+}) => {
+  return /*#__PURE__*/React.createElement(Frame, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: message,
+    position: "top",
+    tag: "span",
+    hideTooltipOnClick: true
+  }, /*#__PURE__*/React.createElement(IconWrapper, null, icon || /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "error",
+    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
+    primaryColor: `var(--ds-icon-danger, ${R300})`
+  }))));
+};

package/dist/es2019/media-inline/views/frame.js

@@ -0,0 +1,8 @@
+import { wrapperStyle } from './wrapper';
+export const Frame = ({
+  children,
+  testId
+}) => /*#__PURE__*/React.createElement("span", {
+  css: wrapperStyle,
+  "data-testid": testId
+}, children);

package/dist/es2019/media-inline/views/icon-wrapper.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+const wrapperStyle = css({
+  display: 'flex',
+  'span > svg': {
+    verticalAlign: 'baseline'
+  }
+});
+export const IconWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    css: wrapperStyle,
+    "data-testid": "media-inline-image-card-icon"
+  }, children);
+};

package/dist/es2019/media-inline/views/loading-view.js

@@ -0,0 +1,13 @@
+import Spinner from '@atlaskit/spinner';
+import { ICON_SIZE_THRESOLD } from './constants';
+import { Frame } from './frame';
+export const InlineImageCardLoadingView = ({
+  testId = 'media-inline-image-card-loading-view',
+  height = ICON_SIZE_THRESOLD
+}) => {
+  return /*#__PURE__*/React.createElement(Frame, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small'
+  }));
+};

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

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
+export const wrapperStyle = css({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxDecorationBreak: 'clone',
+  borderRadius: `${"var(--ds-border-radius, 3px)"}`,
+  color: `${`var(--ds-text, ${N900})`}`,
+  backgroundColor: `${`var(--ds-background-neutral, ${N30A})`}`,
+  transition: '0.1s all ease-in-out',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: `${`var(--ds-background-neutral-hovered, ${N40A})`}`
+  }
+});

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

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  unableToLoadContent: {
+    id: 'fabric.editor.unableToLoadContent',
+    defaultMessage: "We couldn't load this content",
+    description: 'Display this message when there is an error loading file content'
+  },
+  failedToUpload: {
+    id: 'fabric.editor.failed_to_upload',
+    defaultMessage: 'Failed to upload',
+    description: 'Display this message when there is an error uploading a file'
+  }
+});

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 = "76.25.0";
+const packageVersion = "76.25.1";
 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 { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.25.0";
+const packageVersion = "76.25.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -1,10 +1,20 @@
 import { css } from '@emotion/react';
+import { B300 } from '@atlaskit/theme/colors';
 var wrapperStyle = css({
-  display: 'inline-block'
+  display: 'inline-block',
+  verticalAlign: 'text-bottom',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var selectedStyle = css({
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
+  outline: 'none',
+  borderColor: 'transparent'
 });
 export var InlineImageWrapper = function InlineImageWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    css: wrapperStyle
+  var children = _ref.children,
+    isSelected = _ref.isSelected;
+  return /*#__PURE__*/React.createElement("span", {
+    css: [wrapperStyle, isSelected && selectedStyle]
   }, children);
 };

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

@@ -1,8 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useState } from 'react';
-export var MediaInlineImageCard = function MediaInlineImageCard(_ref) {
+import { createIntl, injectIntl } from 'react-intl-next';
+import { messages } from '../messages/media-inline-card';
+import { InlineImageWrapper } from './inline-image-wrapper';
+import { InlineImageCardErrorView } from './views/error-view';
+import { InlineImageCardLoadingView } from './views/loading-view';
+export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
-    identifier = _ref.identifier;
+    identifier = _ref.identifier,
+    isSelected = _ref.isSelected,
+    intl = _ref.intl;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
@@ -11,6 +18,10 @@ export var MediaInlineImageCard = function MediaInlineImageCard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     subscribeError = _useState4[0],
     setSubscribeError = _useState4[1];
+  var _ref2 = intl || createIntl({
+      locale: 'en'
+    }),
+    formatMessage = _ref2.formatMessage;
   useEffect(function () {
     var subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -27,41 +38,44 @@ export var MediaInlineImageCard = function MediaInlineImageCard(_ref) {
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (subscribeError) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard subscribe error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard failed-processing view");
-  }
-  // Empty file handling
-  if (fileState && !fileState.name) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard empty file name error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
-    throw new Error("not yet implemented: MediaInlineImageCard uploading view");
-  }
-  if (!fileState) {
-    throw new Error("not yet implemented: MediaInlineImageCard loading view");
-  }
+  var content = function content() {
+    if (subscribeError) {
+      var isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
+      var errorMessage = isUploading ? messages.failedToUpload : messages.unableToLoadContent;
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(errorMessage)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    // Empty file handling
+    if (fileState && !fileState.name) {
+      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    if (!fileState) {
+      return /*#__PURE__*/React.createElement(InlineImageCardLoadingView, null);
+    }
 
-  // TODO
-  // use Card from `@atlaskit/media-card` with an inline block wrapper
-  // with:
-  // selection state and `mediaOptions.allowLazyLoading`
-  throw new Error("not yet implemented: MediaInlineImageCard loading view");
-};
+    // TODO
+    // use Card from `@atlaskit/media-card` with an inline block wrapper
+    // with:
+    // selection state and `mediaOptions.allowLazyLoading`
+    throw new Error("not yet implemented: MediaInlineImageCard loading view");
+  };
+  return /*#__PURE__*/React.createElement(InlineImageWrapper, {
+    isSelected: isSelected
+  }, content());
+};
+export var MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
+  enforceContext: false
+});

package/dist/esm/media-inline/views/constants.js

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export var ICON_SIZE_THRESOLD = 24;

package/dist/esm/media-inline/views/error-view.js

@@ -0,0 +1,26 @@
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { R300 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { ICON_SIZE_THRESOLD } from './constants';
+import { Frame } from './frame';
+import { IconWrapper } from './icon-wrapper';
+export var InlineImageCardErrorView = function InlineImageCardErrorView(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'media-inline-image-card-error-view' : _ref$testId,
+    message = _ref.message,
+    icon = _ref.icon,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? ICON_SIZE_THRESOLD : _ref$height;
+  return /*#__PURE__*/React.createElement(Frame, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: message,
+    position: "top",
+    tag: "span",
+    hideTooltipOnClick: true
+  }, /*#__PURE__*/React.createElement(IconWrapper, null, icon || /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "error",
+    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
+    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
+  }))));
+};

package/dist/esm/media-inline/views/frame.js

@@ -0,0 +1,9 @@
+import { wrapperStyle } from './wrapper';
+export var Frame = function Frame(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("span", {
+    css: wrapperStyle,
+    "data-testid": testId
+  }, children);
+};

package/dist/esm/media-inline/views/icon-wrapper.js

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+var wrapperStyle = css({
+  display: 'flex',
+  'span > svg': {
+    verticalAlign: 'baseline'
+  }
+});
+export var IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    css: wrapperStyle,
+    "data-testid": "media-inline-image-card-icon"
+  }, children);
+};

package/dist/esm/media-inline/views/loading-view.js

@@ -0,0 +1,14 @@
+import Spinner from '@atlaskit/spinner';
+import { ICON_SIZE_THRESOLD } from './constants';
+import { Frame } from './frame';
+export var InlineImageCardLoadingView = function InlineImageCardLoadingView(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'media-inline-image-card-loading-view' : _ref$testId,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? ICON_SIZE_THRESOLD : _ref$height;
+  return /*#__PURE__*/React.createElement(Frame, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small'
+  }));
+};

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

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
+export var wrapperStyle = css({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxDecorationBreak: 'clone',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: "".concat("var(--ds-text, ".concat(N900, ")")),
+  backgroundColor: "".concat("var(--ds-background-neutral, ".concat(N30A, ")")),
+  transition: '0.1s all ease-in-out',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(N40A, ")"))
+  }
+});

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

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  unableToLoadContent: {
+    id: 'fabric.editor.unableToLoadContent',
+    defaultMessage: "We couldn't load this content",
+    description: 'Display this message when there is an error loading file content'
+  },
+  failedToUpload: {
+    id: 'fabric.editor.failed_to_upload',
+    defaultMessage: 'Failed to upload',
+    description: 'Display this message when there is an error uploading a file'
+  }
+});

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 = "76.25.0";
+var packageVersion = "76.25.1";
 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 { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.25.0";
+var packageVersion = "76.25.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -2,6 +2,7 @@
 import type { FC, ReactElement } from 'react';
 type Prop = {
     children: ReactElement;
+    isSelected?: boolean;
 };
 export declare const InlineImageWrapper: FC<Prop>;
 export {};

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

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import type { FC } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { FileIdentifier, MediaClient } from '@atlaskit/media-client';
 export interface MediaInlineImageCardProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;
     isSelected?: boolean;
 }
+export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps>;

package/dist/types/media-inline/views/constants.d.ts

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export declare const ICON_SIZE_THRESOLD = 24;

package/dist/types/media-inline/views/error-view.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    message: string;
+    /** Error icon. Default to document icon. */
+    icon?: React.ReactNode;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardErrorView: FC<Props>;
+export {};

package/dist/types/media-inline/views/frame.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+interface FrameViewProps {
+    children?: React.ReactNode;
+    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    testId?: string;
+}
+export declare const Frame: FC<FrameViewProps>;
+export {};

package/dist/types/media-inline/views/icon-wrapper.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    children?: React.ReactNode;
+};
+export declare const IconWrapper: FC<Props>;
+export {};

package/dist/types/media-inline/views/loading-view.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    title?: string;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardLoadingView: FC<Props>;
+export {};

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

@@ -0,0 +1 @@
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,12 @@
+export declare const messages: {
+    unableToLoadContent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    failedToUpload: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -2,6 +2,7 @@
 import type { FC, ReactElement } from 'react';
 type Prop = {
     children: ReactElement;
+    isSelected?: boolean;
 };
 export declare const InlineImageWrapper: FC<Prop>;
 export {};

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

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import type { FC } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { FileIdentifier, MediaClient } from '@atlaskit/media-client';
 export interface MediaInlineImageCardProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;
     isSelected?: boolean;
 }
+export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps>;

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

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export declare const ICON_SIZE_THRESOLD = 24;

package/dist/types-ts4.5/media-inline/views/error-view.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    message: string;
+    /** Error icon. Default to document icon. */
+    icon?: React.ReactNode;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardErrorView: FC<Props>;
+export {};

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

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+interface FrameViewProps {
+    children?: React.ReactNode;
+    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    testId?: string;
+}
+export declare const Frame: FC<FrameViewProps>;
+export {};

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

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    children?: React.ReactNode;
+};
+export declare const IconWrapper: FC<Props>;
+export {};

package/dist/types-ts4.5/media-inline/views/loading-view.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+type Props = {
+    title?: string;
+    testId?: string;
+    /** Container height */
+    height?: number;
+};
+export declare const InlineImageCardLoadingView: FC<Props>;
+export {};

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

@@ -0,0 +1 @@
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,12 @@
+export declare const messages: {
+    unableToLoadContent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    failedToUpload: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

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