@atlaskit/editor-common 77.3.2 → 77.4.0

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

@@ -0,0 +1,56 @@
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { getRandomHex } from '@atlaskit/media-common';
+import { useFilePreview } from '@atlaskit/media-file-preview';
+import { MediaImage } from '@atlaskit/media-ui';
+import { InlineImageCardLoadingView } from './views/loading-view';
+export var InlineImageCard = function InlineImageCard(_ref) {
+  var dimensions = _ref.dimensions,
+    identifier = _ref.identifier,
+    renderError = _ref.renderError,
+    alt = _ref.alt,
+    isLazy = _ref.isLazy,
+    ssr = _ref.ssr,
+    crop = _ref.crop,
+    stretch = _ref.stretch;
+  // Generate unique traceId for file
+  var traceContext = useMemo(function () {
+    return {
+      traceId: getRandomHex(8)
+    };
+  }, []);
+
+  // TODO do we need to handle nonCriticalError
+  var _useFilePreview = useFilePreview({
+      identifier: identifier,
+      ssr: ssr,
+      dimensions: dimensions,
+      traceContext: traceContext
+    }),
+    preview = _useFilePreview.preview,
+    previewError = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    _onImageLoad = _useFilePreview.onImageLoad;
+  if (previewError) {
+    return renderError({
+      error: previewError
+    });
+  }
+  if (!preview) {
+    return jsx(InlineImageCardLoadingView, null);
+  }
+  return jsx(MediaImage, {
+    dataURI: preview.dataURI,
+    alt: alt,
+    previewOrientation: preview.orientation,
+    onImageLoad: function onImageLoad() {
+      _onImageLoad(preview);
+    },
+    onImageError: onImageError,
+    loading: isLazy ? 'lazy' : undefined,
+    forceSyncDisplay: !!ssr,
+    crop: crop,
+    stretch: stretch
+  });
+};

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

@@ -4,9 +4,19 @@ 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 { jsx } from '@emotion/react';
+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';
+
+// The MediaImage component needs to obtain its parent's dimensions.
+// To achieve this, we have added an additional wrapper that allows
+// for better interaction with the parent element. This is necessary
+//  because the parent size changes its box-sizing with the node border.
+var sizeWrapperStyle = css({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%'
+});
 export var InlineImageWrapper = function InlineImageWrapper(_ref) {
   var _ref2;
   var children = _ref.children,
@@ -25,6 +35,8 @@ export var InlineImageWrapper = function InlineImageWrapper(_ref) {
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
       css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
       "data-testid": "inline-image-wrapper"
-    }, htmlAttrs), children)
+    }, htmlAttrs), jsx("span", {
+      css: sizeWrapperStyle
+    }, children))
   );
 };

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

@@ -7,9 +7,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { createIntl, injectIntl } from 'react-intl-next';
-import { Card } from '@atlaskit/media-card';
+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 { messages } from '../messages/media-inline-card';
 import { referenceHeights } from './constants';
+import { InlineImageCard } from './inline-image-card';
 import { InlineImageWrapper } from './inline-image-wrapper';
 import { InlineImageCardErrorView } from './views/error-view';
 import { InlineImageCardLoadingView } from './views/loading-view';
@@ -33,10 +37,34 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     _useState4 = _slicedToArray(_useState3, 2),
     subscribeError = _useState4[0],
     setSubscribeError = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFailedEventSent = _useState6[0],
+    setIsFailedEventSent = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSucceededEventSent = _useState8[0],
+    setIsSucceededEventSent = _useState8[1];
   var _ref2 = intl || createIntl({
       locale: 'en'
     }),
     formatMessage = _ref2.formatMessage;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
+    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new MediaCardError('missing-error-data');
+    var failReason = arguments.length > 1 ? arguments[1] : undefined;
+    if (!isFailedEventSent && fileState) {
+      setIsFailedEventSent(true);
+      fireFailedMediaInlineEvent(fileState, error, failReason, createAnalyticsEvent);
+    }
+  };
+  var fireSucceededOperationalEvent = function fireSucceededOperationalEvent() {
+    if (!isSucceededEventSent && fileState) {
+      setIsSucceededEventSent(true);
+      fireSucceededMediaInlineEvent(fileState, createAnalyticsEvent);
+    }
+  };
   useEffect(function () {
     if (mediaClient) {
       var subscription = mediaClient.file.getFileState(identifier.id, {
@@ -59,41 +87,52 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     if (subscribeError) {
       var isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
       var errorMessage = isUploading ? messages.failedToUpload : messages.unableToLoadContent;
+      var errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
+      fireFailedOperationalEvent(new MediaCardError(errorReason, subscribeError));
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(errorMessage)
       });
     }
-    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+    if (!fileState || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
+      return jsx(InlineImageCardLoadingView, null);
+    }
+    if (fileState.status === 'error') {
+      var error = new MediaCardError('error-file-state', new Error(fileState.message));
+      !isFailedEventSent && fireFailedOperationalEvent(error);
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
-    }
-    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    } else if (fileState.status === 'failed-processing') {
+      !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
-    }
-    // Empty file handling
-    if (fileState && !fileState.name) {
+    } else if (!fileState.name) {
+      var _error = new MediaCardError('metadata-fetch', new FileFetcherError('emptyFileName', fileState.id));
+      !isFailedEventSent && fireFailedOperationalEvent(_error);
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
     }
-    var mediaClientConfig = (ssr === null || ssr === void 0 ? void 0 : ssr.config) || (mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig);
-    if (!fileState) {
-      return jsx(InlineImageCardLoadingView, null);
+    if (fileState.status === 'processed') {
+      fireSucceededOperationalEvent();
     }
-    return jsx(Card, {
-      mediaClientConfig: mediaClientConfig,
-      isLazy: isLazy,
-      identifier: identifier,
+    return jsx(MediaClientContext.Provider, {
+      value: mediaClient
+    }, jsx(InlineImageCard, {
       dimensions: dimensions,
-      selectable: true,
-      disableOverlay: true,
-      selected: isSelected,
+      identifier: identifier,
+      renderError: function renderError() {
+        return jsx(InlineImageCardErrorView, {
+          message: formatMessage(messages.unableToLoadContent)
+        });
+      },
       alt: alt,
-      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
-    });
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+      isLazy: isLazy,
+      crop: true,
+      stretch: false
+    }));
   };
   var aspectRatio = useMemo(function () {
     return width && height ? width / height : undefined;

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

package/dist/esm/ui/DropList/index.js

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "77.3.2";
+var packageVersion = "77.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/index.js

@@ -28,4 +28,5 @@ export { wrapperStyle } from './ResizerLegacy/styled';
 export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';
 export { default as Announcer } from './Announcer/announcer';
-export { EDIT_AREA_ID } from './Toolbar';
+export { EDIT_AREA_ID } from './Toolbar';
+export { default as DropList } from './DropList';

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -253,7 +253,7 @@ var DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef(function (pr
     }
   }), children);
 });
-function DropdownMenuItem(_ref) {
+export function DropdownMenuItem(_ref) {
   var _item$key3;
   var item = _ref.item,
     onItemActivated = _ref.onItemActivated,
@@ -326,6 +326,7 @@ function DropdownMenuItem(_ref) {
 export var DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(function (_ref2) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var keyDownHandlerContext = useContext(KeyDownHandlerContext);
+
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
   return jsx(DropdownMenuWrapper, _extends({

package/dist/esm/ui-menu/index.js

@@ -1,4 +1,4 @@
-export { default as DropdownMenu, DropdownMenuWithKeyboardNavigation } from './DropdownMenu';
+export { default as DropdownMenu, DropdownMenuItem, DropdownMenuWithKeyboardNavigation } from './DropdownMenu';
 export { default as ToolbarButton, TOOLBAR_BUTTON } from './ToolbarButton';
 export { ArrowKeyNavigationProvider } from './ArrowKeyNavigationProvider';
 export { ToolbarArrowKeyNavigationProvider, KeyDownHandlerContext } from './ToolbarArrowKeyNavigationProvider';

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

@@ -289,6 +289,7 @@ export declare enum ACTION_SUBJECT_ID {
     MEDIA = "media",
     MEDIA_GROUP = "mediaGroup",
     MEDIA_INLINE = "mediaInline",
+    MEDIA_INLINE_IMAGE = "mediaInlineImage",
     MEDIA_LINK = "mediaLink",
     MEDIA_SINGLE = "mediaSingle",
     MENTION = "mention",

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { FileIdentifier } from '@atlaskit/media-client';
+import type { SSR } from '@atlaskit/media-common';
+import type { Dimensions } from './types';
+export declare const InlineImageCard: ({ dimensions, identifier, renderError, alt, isLazy, ssr, crop, stretch, }: {
+    identifier: FileIdentifier;
+    renderError: (props: {
+        error: Error;
+    }) => JSX.Element | null;
+    dimensions?: Dimensions | undefined;
+    isLazy?: boolean | undefined;
+    alt?: string | undefined;
+    ssr?: SSR | undefined;
+    crop?: boolean | undefined;
+    stretch?: boolean | undefined;
+}) => JSX.Element | null;

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

@@ -10,3 +10,7 @@ export type MediaSSR = {
     mode: SSR;
     config: MediaClientConfig;
 };
+export type Dimensions = {
+    width?: number;
+    height?: number;
+};

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

@@ -39,5 +39,6 @@ export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';
 export { default as Announcer } from './Announcer/announcer';
 export { EDIT_AREA_ID } from './Toolbar';
+export { default as DropList } from './DropList';
 export type { UseStickyToolbarType } from './Toolbar';
 export type { OpenChangedEvent } from './DropList';

package/dist/types/ui-menu/DropdownMenu/index.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import type { Props, State } from './types';
+import type { MenuItem, Props, State } from './types';
 export type { MenuItem } from './types';
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -19,4 +19,7 @@ export default class DropdownMenuWrapper extends PureComponent<Props, State> {
     render(): jsx.JSX.Element;
     componentDidUpdate(previousProps: Props): void;
 }
+export declare function DropdownMenuItem({ item, onItemActivated, shouldUseDefaultRole, onMouseEnter, onMouseLeave, }: {
+    item: MenuItem;
+} & Pick<Props, 'onItemActivated' | 'shouldUseDefaultRole' | 'onMouseEnter' | 'onMouseLeave'>): jsx.JSX.Element;
 export declare const DropdownMenuWithKeyboardNavigation: React.FC<any>;

package/dist/types/ui-menu/index.d.ts

@@ -1,4 +1,4 @@
-export { default as DropdownMenu, DropdownMenuWithKeyboardNavigation, } from './DropdownMenu';
+export { default as DropdownMenu, DropdownMenuItem, DropdownMenuWithKeyboardNavigation, } from './DropdownMenu';
 export type { MenuItem } from './DropdownMenu';
 export { default as ToolbarButton, TOOLBAR_BUTTON } from './ToolbarButton';
 export type { ToolbarButtonRef } from './ToolbarButton';

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

@@ -289,6 +289,7 @@ export declare enum ACTION_SUBJECT_ID {
     MEDIA = "media",
     MEDIA_GROUP = "mediaGroup",
     MEDIA_INLINE = "mediaInline",
+    MEDIA_INLINE_IMAGE = "mediaInlineImage",
     MEDIA_LINK = "mediaLink",
     MEDIA_SINGLE = "mediaSingle",
     MENTION = "mention",

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { FileIdentifier } from '@atlaskit/media-client';
+import type { SSR } from '@atlaskit/media-common';
+import type { Dimensions } from './types';
+export declare const InlineImageCard: ({ dimensions, identifier, renderError, alt, isLazy, ssr, crop, stretch, }: {
+    identifier: FileIdentifier;
+    renderError: (props: {
+        error: Error;
+    }) => JSX.Element | null;
+    dimensions?: Dimensions | undefined;
+    isLazy?: boolean | undefined;
+    alt?: string | undefined;
+    ssr?: SSR | undefined;
+    crop?: boolean | undefined;
+    stretch?: boolean | undefined;
+}) => JSX.Element | null;

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

@@ -10,3 +10,7 @@ export type MediaSSR = {
     mode: SSR;
     config: MediaClientConfig;
 };
+export type Dimensions = {
+    width?: number;
+    height?: number;
+};

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

@@ -39,5 +39,6 @@ export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';
 export { default as Announcer } from './Announcer/announcer';
 export { EDIT_AREA_ID } from './Toolbar';
+export { default as DropList } from './DropList';
 export type { UseStickyToolbarType } from './Toolbar';
 export type { OpenChangedEvent } from './DropList';

package/dist/types-ts4.5/ui-menu/DropdownMenu/index.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import type { Props, State } from './types';
+import type { MenuItem, Props, State } from './types';
 export type { MenuItem } from './types';
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -19,4 +19,7 @@ export default class DropdownMenuWrapper extends PureComponent<Props, State> {
     render(): jsx.JSX.Element;
     componentDidUpdate(previousProps: Props): void;
 }
+export declare function DropdownMenuItem({ item, onItemActivated, shouldUseDefaultRole, onMouseEnter, onMouseLeave, }: {
+    item: MenuItem;
+} & Pick<Props, 'onItemActivated' | 'shouldUseDefaultRole' | 'onMouseEnter' | 'onMouseLeave'>): jsx.JSX.Element;
 export declare const DropdownMenuWithKeyboardNavigation: React.FC<any>;

package/dist/types-ts4.5/ui-menu/index.d.ts

@@ -1,4 +1,4 @@
-export { default as DropdownMenu, DropdownMenuWithKeyboardNavigation, } from './DropdownMenu';
+export { default as DropdownMenu, DropdownMenuItem, DropdownMenuWithKeyboardNavigation, } from './DropdownMenu';
 export type { MenuItem } from './DropdownMenu';
 export { default as ToolbarButton, TOOLBAR_BUTTON } from './ToolbarButton';
 export type { ToolbarButtonRef } from './ToolbarButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "77.3.2",
+  "version": "77.4.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -113,20 +113,24 @@
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-datasource": "^1.22.0",
     "@atlaskit/link-picker": "^1.33.0",
-    "@atlaskit/media-card": "^77.7.0",
+    "@atlaskit/media-card": "^77.9.0",
     "@atlaskit/media-client": "^26.1.0",
+    "@atlaskit/media-client-react": "^2.0.0",
+    "@atlaskit/media-common": "^11.0.0",
+    "@atlaskit/media-file-preview": "^0.4.0",
     "@atlaskit/media-picker": "^66.2.0",
+    "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/mention": "^22.1.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/profilecard": "^19.9.0",
-    "@atlaskit/smart-card": "^26.46.0",
+    "@atlaskit/profilecard": "^19.10.0",
+    "@atlaskit/smart-card": "^26.47.0",
     "@atlaskit/smart-user-picker": "^6.7.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.36.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/width-detector": "^4.1.0",