@atlaskit/editor-plugin-media 0.4.10 → 0.5.1

package/dist/es2019/toolbar/layout-group.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
 const containerStyles = css({
@@ -9,19 +10,19 @@ export const LayoutGroup = ({
   dispatchCommand,
   hide
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: containerStyles
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, layoutButtons.map((item, idx) => {
+  }, jsx(ButtonGroup, null, layoutButtons.map((item, idx) => {
     switch (item.type) {
       case 'separator':
-        return /*#__PURE__*/React.createElement(FloatingToolbarSeparator, {
+        return jsx(FloatingToolbarSeparator, {
           key: idx
         });
       case 'button':
         const ButtonIcon = item.icon;
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           key: idx,
-          icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+          icon: item.icon ? jsx(ButtonIcon, {
             label: item.title
           }) : undefined,
           title: item.title,

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { Fragment, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -48,42 +49,42 @@ export const LinkToolbarAppearance = ({
     const isValidUrl = isSafeUrl(mediaLinkingState.link);
     const title = intl.formatMessage(linkToolbarMessages.editLink);
     const linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return jsx(Fragment, null, jsx("div", {
       css: wrapper
-    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    }, jsx(ToolbarButton, {
       onClick: onEditLink,
       title: title,
-      tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+      tooltipContent: jsx(ToolTipContent, {
         description: title,
         keymap: addLink
       }),
       testId: "edit-link-button"
-    }, title)), /*#__PURE__*/React.createElement("div", {
+    }, title)), jsx("div", {
       css: wrapper
-    }, /*#__PURE__*/React.createElement(Separator, null)), /*#__PURE__*/React.createElement(ToolbarButton, {
+    }, jsx(Separator, null)), jsx(ToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: /*#__PURE__*/React.createElement(OpenIcon, {
+      icon: jsx(OpenIcon, {
         label: linkTitle
       }),
       className: "hyperlink-open-link"
-    }), /*#__PURE__*/React.createElement(Separator, null));
+    }), jsx(Separator, null));
   } else {
     const title = intl.formatMessage(linkToolbarMessages.addLink);
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx(Fragment, null, jsx(ToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: title,
-      tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+      tooltipContent: jsx(ToolTipContent, {
         description: title,
         keymap: addLink
       }),
-      icon: /*#__PURE__*/React.createElement(LinkIcon, {
+      icon: jsx(LinkIcon, {
         label: title
       })
-    }), /*#__PURE__*/React.createElement(Separator, null));
+    }), jsx(Separator, null));
   }
 };

package/dist/es2019/ui/CaptionPlaceholder/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 import { N200 } from '@atlaskit/theme/colors';
@@ -14,11 +15,11 @@ const placeholder = css`
 export default /*#__PURE__*/React.forwardRef(({
   onClick
 }, ref) => {
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     ref: ref,
     css: placeholder,
     onClick: onClick,
     "data-id": CAPTION_PLACEHOLDER_ID,
     "data-testid": "caption-placeholder"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.placeholder));
+  }, jsx(FormattedMessage, messages.placeholder));
 });

package/dist/es2019/ui/ImageBorder/index.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import { useRef, useState } from 'react';
+import { jsx } from '@emotion/react';
 import { BorderIcon } from '@atlaskit/editor-common/icons';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -48,14 +50,14 @@ const ImageBorder = ({
     value: {
       name: 'color'
     },
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       className: DropdownMenuSharedCssClassName.SUBMENU
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
-    }), isColorSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+    }), isColorSubmenuOpen && jsx("div", {
       css: contextualSubMenu(0),
       ref: handleSubMenuRef
-    }, /*#__PURE__*/React.createElement(ColorPalette, {
+    }, jsx(ColorPalette, {
       onClick: color => {
         setBorder({
           color
@@ -74,22 +76,22 @@ const ImageBorder = ({
     value: {
       name: 'size'
     },
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       className: DropdownMenuSharedCssClassName.SUBMENU
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: contextualMenuArrow
-    }), isSizeSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+    }), isSizeSubmenuOpen && jsx("div", {
       css: contextualSubMenu(1),
       ref: handleSubMenuRef
     }, borderSizeOptions.map(({
       name,
       value
-    }, idx) => /*#__PURE__*/React.createElement(Tooltip, {
+    }, idx) => jsx(Tooltip, {
       key: idx,
       content: name
-    }, /*#__PURE__*/React.createElement("span", {
+    }, jsx("span", {
       css: buttonWrapperStyle
-    }, /*#__PURE__*/React.createElement("button", {
+    }, jsx("button", {
       css: buttonStyle(value === size),
       "aria-label": name,
       role: "radio",
@@ -103,7 +105,7 @@ const ImageBorder = ({
       onMouseDown: e => {
         e.preventDefault();
       }
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: line(value, value === size),
       role: "presentation"
     })))))))
@@ -116,47 +118,47 @@ const ImageBorder = ({
   const fitTolerance = 10;
   const fitWidth = menuItemDimensions.width;
   const fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return jsx("div", null, jsx("div", {
     css: toolbarButtonWrapper({
       enabled,
       isOpen
     })
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     className: "image-border-toolbar-btn",
     selected: enabled,
     onClick: toggleBorder,
     spacing: "compact",
     "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
-    iconBefore: /*#__PURE__*/React.createElement(BorderIcon, {
+    iconBefore: jsx(BorderIcon, {
       label: ""
     }),
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), jsx("div", {
     ref: popupTarget
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     className: "image-border-toolbar-dropdown",
     selected: enabled || isOpen,
     "aria-label": formatMessage(messages.borderOptions),
     title: formatMessage(messages.borderOptions),
     spacing: "compact",
-    iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
+    iconBefore: jsx(ExpandIcon, {
       label: ""
     }),
     onClick: () => {
       setIsOpen(!isOpen);
     }
-  }))), /*#__PURE__*/React.createElement(Popup, {
+  }))), jsx(Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
     fitWidth: fitWidth + fitTolerance,
     fitHeight: fitHeight + fitTolerance,
     forcePlacement: true,
     stick: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     onMouseLeave: () => {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }
-  }, /*#__PURE__*/React.createElement(DropdownMenu
+  }, jsx(DropdownMenu
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
   //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

package/dist/es2019/ui/Media/DropPlaceholder.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { hexToRgba } from '@atlaskit/adf-schema';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
@@ -31,9 +32,9 @@ const IconWrapperComponent = props => {
   const {
     dropPlaceholderLabel
   } = dropPlaceholderMessages;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: iconWrapper
-  }, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
+  }, jsx(DocumentFilledIcon, {
     label: intl.formatMessage(dropPlaceholderLabel),
     size: "medium"
   }));
@@ -41,6 +42,6 @@ const IconWrapperComponent = props => {
 const IntlIconWrapper = injectIntl(IconWrapperComponent);
 export default (({
   type = 'group'
-}) => type === 'single' ? /*#__PURE__*/React.createElement("div", {
+}) => type === 'single' ? jsx("div", {
   css: dropLine
-}) : /*#__PURE__*/React.createElement(IntlIconWrapper, null));
+}) : jsx(IntlIconWrapper, null));

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
 import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -96,28 +97,28 @@ export class LinkAddToolbar extends React.PureComponent {
       const formatLinkAddressText = formatMessage(mediaLinkToolbarMessages.backLink);
       const formatUnlinkText = formatMessage(linkToolbarMessages.unlink);
       const errorsList = this.state.validationErrors.map(function (error, index) {
-        return /*#__PURE__*/React.createElement(ErrorMessage, {
+        return jsx(ErrorMessage, {
           key: index
         }, error);
       });
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "recent-list"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: [container, !!activityProvider && containerWithProvider]
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: inputWrapper
-      }, /*#__PURE__*/React.createElement("span", {
+      }, jsx("span", {
         css: buttonWrapper
-      }, /*#__PURE__*/React.createElement(Button, {
+      }, jsx(Button, {
         title: formatLinkAddressText,
-        icon: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+        icon: jsx(ChevronLeftLargeIcon, {
           label: formatLinkAddressText
         }),
         onClick: () => this.handleOnBack({
           url: value,
           inputMethod: currentInputMethod
         })
-      })), /*#__PURE__*/React.createElement(PanelTextInput, {
+      })), jsx(PanelTextInput, {
         testId: "media-link-input",
         placeholder: getPlaceholder(!!activityProvider),
         autoFocus: true,
@@ -139,13 +140,13 @@ export class LinkAddToolbar extends React.PureComponent {
           onChange(value);
         },
         onKeyDown: onKeyDown
-      }), normalizeUrl(displayUrl) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Button, {
+      }), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
         title: formatUnlinkText,
-        icon: /*#__PURE__*/React.createElement(EditorUnlinkIcon, {
+        icon: jsx(EditorUnlinkIcon, {
           label: formatUnlinkText
         }),
         onClick: this.handleUnlink
-      }))), !!errorsList.length && /*#__PURE__*/React.createElement("section", {
+      }))), !!errorsList.length && jsx("section", {
         css: validationWrapper
       }, errorsList), renderRecentList()));
     });
@@ -177,7 +178,7 @@ export class LinkAddToolbar extends React.PureComponent {
       providerFactory,
       displayUrl
     } = this.props;
-    return /*#__PURE__*/React.createElement(RecentSearch, {
+    return jsx(RecentSearch, {
       defaultUrl: normalizeUrl(displayUrl),
       providerFactory: providerFactory,
       onSubmit: this.handleSubmit,

package/dist/es2019/ui/PixelEntry/index.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import Form, { Field } from '@atlaskit/form';
 import Textfield from '@atlaskit/textfield';
@@ -93,37 +95,37 @@ export const PixelEntry = ({
     onChange && onChange(isInvalidInputValid);
   }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: formatMessage(messages.migrationButtonTooltip)
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       appearance: "warning",
       spacing: "compact",
       onClick: onMigrate,
       testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(messages.migrationButtonText)));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: pixelEntryForm
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, jsx(Form, {
     onSubmit: handleOnSubmit
   }, ({
     formProps
   }) => {
-    return /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement("div", {
+    return jsx("form", formProps, jsx("div", {
       css: pixelSizingWrapper
-    }, /*#__PURE__*/React.createElement(Field, {
+    }, jsx(Field, {
       key: "inputWidth",
       name: "inputWidth",
       defaultValue: computedWidth
     }, ({
       fieldProps
-    }) => /*#__PURE__*/React.createElement(Tooltip, {
+    }) => jsx(Tooltip, {
       hideTooltipOnMouseDown: true,
       content: formatMessage(messages.inputWidthTooltip, {
         maxWidth
       }),
       position: "top"
-    }, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, {
+    }, jsx(Textfield, _extends({}, fieldProps, {
       css: [pixelSizingWidthInput, pixelSizingInput],
       appearance: "none",
       isCompact: true,
@@ -132,26 +134,26 @@ export const PixelEntry = ({
       "aria-label": formatMessage(messages.inputWidthAriaLabel, {
         maxWidth
       })
-    })))), /*#__PURE__*/React.createElement("span", {
+    })))), jsx("span", {
       css: pixelSizingLabel
-    }, "x"), /*#__PURE__*/React.createElement(Field, {
+    }, "x"), jsx(Field, {
       key: "inputHeight",
       name: "inputHeight",
       defaultValue: computedHeight
     }, ({
       fieldProps
-    }) => /*#__PURE__*/React.createElement(Tooltip, {
+    }) => jsx(Tooltip, {
       hideTooltipOnMouseDown: true,
       content: formatMessage(messages.inputHeightTooltip),
       position: "top"
-    }, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, {
+    }, jsx(Textfield, _extends({}, fieldProps, {
       css: [pixelSizingHeightInput, pixelSizingInput],
       appearance: "none",
       isCompact: true,
       onChange: handleOnChange('inputHeight'),
       pattern: "\\d*",
       "aria-label": formatMessage(messages.inputHeightAriaLabel)
-    })))), /*#__PURE__*/React.createElement(Button, {
+    })))), jsx(Button, {
       css: pixelEntryHiddenSubmit,
       type: "submit"
     }, formatMessage(messages.submitButtonText))));
@@ -162,7 +164,7 @@ export const FullWidthDisplay = ({
     formatMessage
   }
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: pixelSizingFullWidthLabelStyles
-  }, /*#__PURE__*/React.createElement("span", null, formatMessage(messages.fullWidthLabel)));
+  }, jsx("span", null, formatMessage(messages.fullWidthLabel)));
 };

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { resizableMediaMigrationNotificationStyle } from './styles';
 export const ResizableMediaMigrationNotification = () => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-testid": "resizable-media-migration-notification",
     css: [resizableMediaMigrationNotificationStyle]
   });

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import throttle from 'lodash/throttle';
 import memoizeOne from 'memoize-one';
@@ -420,7 +422,7 @@ class ResizableMediaSingleNext extends React.Component {
 
     // while is not resizing, we take 100% as min-width if the container width is less than the min-width
     const minViewWidth = isResizing ? minWidth : `min(${minWidth}px, 100%)`;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: wrapperStyle({
         layout,
         containerWidth: containerWidth || origWidth,
@@ -429,7 +431,7 @@ class ResizableMediaSingleNext extends React.Component {
         isNestedNode,
         isExtendedResizeExperienceOn: true
       })
-    }, /*#__PURE__*/React.createElement(ResizerNext, {
+    }, jsx(ResizerNext, {
       minWidth: minViewWidth,
       maxWidth: maxWidth,
       className: resizerNextClassName,
@@ -445,7 +447,7 @@ class ResizableMediaSingleNext extends React.Component {
       isHandleVisible: selected,
       handlePositioning: isNestedNode ? 'adjacent' : undefined,
       handleHighlight: "full-height"
-    }, children, showLegacyNotification && /*#__PURE__*/React.createElement(ResizableMediaMigrationNotification, null)));
+    }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
   }
 }
 export default ResizableMediaSingleNext;

package/dist/es2019/ui/ResizableMediaSingle/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { calculateOffsetLeft } from '@atlaskit/editor-common/media-single';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
@@ -309,7 +311,7 @@ export default class ResizableMediaSingle extends React.Component {
         }
       };
     };
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
         layout,
@@ -317,7 +319,7 @@ export default class ResizableMediaSingle extends React.Component {
         containerWidth: containerWidth || origWidth,
         fullWidthMode
       })
-    }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+    }, jsx(Resizer, _extends({}, this.props, {
       displayGrid: this.displayGrid,
       ratio: ratio,
       width: initialWidth,
@@ -333,7 +335,7 @@ export default class ResizableMediaSingle extends React.Component {
       // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
       // This workaround adds an empty div inside the resize handler to prevent the issue.
       ,
-      handleComponentFunc: () => /*#__PURE__*/React.createElement("div", {
+      handleComponentFunc: () => jsx("div", {
         contentEditable: false
       }),
       handleStyles: nestedInTableHandleStyles(this.isNestedInTable())

package/dist/es2019/utils/media-files.js

@@ -1,8 +1,11 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-inline';
 import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '@atlaskit/editor-common/selection';
 import { findFarthestParentNode, insideTableCell, isInLayoutColumn, isInListItem, isSupportedInParent, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { canInsert, hasParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { isImage } from './is-type';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph, isSelectionNonMediaBlockNode, posOfMediaGroupNearby, posOfParentMediaGroup, posOfPrecedingMediaGroup } from './media-common';
 export const canInsertMediaInline = state => {
   const node = state.schema.nodes.mediaInline.create({});
@@ -96,12 +99,30 @@ export const insertMediaInlineNode = editorAnalyticsAPI => (view, mediaState, co
     return false;
   }
   const {
-    id
+    id,
+    dimensions,
+    scaleFactor = 1
   } = mediaState;
-  const mediaInlineNode = mediaInline.create({
+  let mediaInlineAttrs = {
     id,
     collection
-  });
+  };
+  if (
+  // TODO: replace it with new shouldShowInlineImage
+  getBooleanFF('platform.editor.media.inline-image.base-support') && isImage(mediaState.fileMimeType)) {
+    const {
+      width,
+      height
+    } = dimensions || {
+      width: undefined,
+      height: undefined
+    };
+    const scaledWidth = width ? Math.round(width / scaleFactor) : DEFAULT_IMAGE_WIDTH;
+    const scaledHeight = height ? Math.round(height / scaleFactor) : DEFAULT_IMAGE_HEIGHT;
+    mediaInlineAttrs.width = scaledWidth;
+    mediaInlineAttrs.height = scaledHeight;
+  }
+  const mediaInlineNode = mediaInline.create(mediaInlineAttrs);
   const space = state.schema.text(' ');
   let pos = state.selection.$to.pos;
 

package/dist/es2019/utils/media-single.js

@@ -130,7 +130,8 @@ export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, al
     id,
     dimensions,
     contextId,
-    scaleFactor = 1
+    scaleFactor = 1,
+    fileName
   } = mediaState;
   const {
     width,
@@ -150,7 +151,10 @@ export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, al
     collection,
     contextId,
     width: scaledWidth,
-    height: height && Math.round(height / scaleFactor)
+    height: height && Math.round(height / scaleFactor),
+    ...(getBooleanFF('platform.editor.a11y-media_er96o') && fileName && {
+      alt: fileName
+    })
   });
   const mediaSingleAttrs = alignLeftOnInsert ? {
     layout: 'align-start'

package/dist/esm/nodeviews/mediaInline.js

@@ -14,9 +14,11 @@ 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; }
 import React, { useEffect, useState } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { MediaInlineImageCard, shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { MediaInlineCard } from '@atlaskit/media-card';
+import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineNodeSelector } from './styles';
@@ -147,7 +149,11 @@ export var MediaInline = function MediaInline(props) {
   }();
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
-    collection = _props$node$attrs.collection;
+    collection = _props$node$attrs.collection,
+    type = _props$node$attrs.type,
+    alt = _props$node$attrs.alt,
+    width = _props$node$attrs.width,
+    height = _props$node$attrs.height;
   var identifier = {
     id: id,
     mediaItemType: 'file',
@@ -167,6 +173,16 @@ export var MediaInline = function MediaInline(props) {
       isSelected: false
     });
   }
+  if (shouldShowInlineImage(type)) {
+    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
+      mediaClient: getMediaClient(viewMediaClientConfig),
+      identifier: identifier,
+      isSelected: props.isSelected,
+      alt: alt,
+      width: width,
+      height: height
+    });
+  }
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,