@atlaskit/editor-plugin-media 0.4.10 → 0.5.1

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @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';
@@ -99,36 +101,36 @@ export var PixelEntry = function PixelEntry(_ref) {
     };
   }, [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
   }, function (_ref2) {
     var formProps = _ref2.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
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         hideTooltipOnMouseDown: true,
         content: formatMessage(messages.inputWidthTooltip, {
           maxWidth: maxWidth
         }),
         position: "top"
-      }, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, {
+      }, jsx(Textfield, _extends({}, fieldProps, {
         css: [pixelSizingWidthInput, pixelSizingInput],
         appearance: "none",
         isCompact: true,
@@ -138,19 +140,19 @@ export var PixelEntry = function PixelEntry(_ref) {
           maxWidth: maxWidth
         })
       })));
-    }), /*#__PURE__*/React.createElement("span", {
+    }), jsx("span", {
       css: pixelSizingLabel
-    }, "x"), /*#__PURE__*/React.createElement(Field, {
+    }, "x"), jsx(Field, {
       key: "inputHeight",
       name: "inputHeight",
       defaultValue: computedHeight
     }, function (_ref4) {
       var fieldProps = _ref4.fieldProps;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return 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,
@@ -158,7 +160,7 @@ export var PixelEntry = function PixelEntry(_ref) {
         pattern: "\\d*",
         "aria-label": formatMessage(messages.inputHeightAriaLabel)
       })));
-    }), /*#__PURE__*/React.createElement(Button, {
+    }), jsx(Button, {
       css: pixelEntryHiddenSubmit,
       type: "submit"
     }, formatMessage(messages.submitButtonText))));
@@ -166,7 +168,7 @@ export var PixelEntry = function PixelEntry(_ref) {
 };
 export var FullWidthDisplay = function FullWidthDisplay(_ref5) {
   var formatMessage = _ref5.intl.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/esm/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.js

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

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

@@ -10,7 +10,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import throttle from 'lodash/throttle';
 import memoizeOne from 'memoize-one';
@@ -499,7 +501,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
 
       // while is not resizing, we take 100% as min-width if the container width is less than the min-width
       var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         css: wrapperStyle({
           layout: layout,
           containerWidth: containerWidth || origWidth,
@@ -508,7 +510,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           isNestedNode: isNestedNode,
           isExtendedResizeExperienceOn: true
         })
-      }, /*#__PURE__*/React.createElement(ResizerNext, {
+      }, jsx(ResizerNext, {
         minWidth: minViewWidth,
         maxWidth: maxWidth,
         className: resizerNextClassName,
@@ -524,7 +526,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         isHandleVisible: selected,
         handlePositioning: isNestedNode ? 'adjacent' : undefined,
         handleHighlight: "full-height"
-      }, children, showLegacyNotification && /*#__PURE__*/React.createElement(ResizableMediaMigrationNotification, null)));
+      }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
     }
   }]);
   return ResizableMediaSingleNext;

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

@@ -10,7 +10,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
 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';
@@ -377,7 +379,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           }
         };
       };
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         ref: this.saveWrapper,
         css: wrapperStyle({
           layout: layout,
@@ -385,7 +387,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode
         })
-      }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+      }, jsx(Resizer, _extends({}, this.props, {
         displayGrid: this.displayGrid,
         ratio: ratio,
         width: initialWidth,
@@ -402,7 +404,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         // This workaround adds an empty div inside the resize handler to prevent the issue.
         ,
         handleComponentFunc: function handleComponentFunc() {
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             contentEditable: false
           });
         },

package/dist/esm/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 var canInsertMediaInline = function canInsertMediaInline(state) {
   var node = state.schema.nodes.mediaInline.create({});
@@ -82,11 +85,29 @@ export var insertMediaInlineNode = function insertMediaInlineNode(editorAnalytic
     if (!mediaInline || !mediaState || collection === undefined) {
       return false;
     }
-    var id = mediaState.id;
-    var mediaInlineNode = mediaInline.create({
+    var id = mediaState.id,
+      dimensions = mediaState.dimensions,
+      _mediaState$scaleFact = mediaState.scaleFactor,
+      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact;
+    var mediaInlineAttrs = {
       id: id,
       collection: collection
-    });
+    };
+    if (
+    // TODO: replace it with new shouldShowInlineImage
+    getBooleanFF('platform.editor.media.inline-image.base-support') && isImage(mediaState.fileMimeType)) {
+      var _ref = dimensions || {
+          width: undefined,
+          height: undefined
+        },
+        width = _ref.width,
+        height = _ref.height;
+      var scaledWidth = width ? Math.round(width / scaleFactor) : DEFAULT_IMAGE_WIDTH;
+      var scaledHeight = height ? Math.round(height / scaleFactor) : DEFAULT_IMAGE_HEIGHT;
+      mediaInlineAttrs.width = scaledWidth;
+      mediaInlineAttrs.height = scaledHeight;
+    }
+    var mediaInlineNode = mediaInline.create(mediaInlineAttrs);
     var space = state.schema.text(' ');
     var pos = state.selection.$to.pos;
 

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

@@ -129,7 +129,8 @@ export var createMediaSingleNode = function createMediaSingleNode(schema, collec
       dimensions = mediaState.dimensions,
       contextId = mediaState.contextId,
       _mediaState$scaleFact = mediaState.scaleFactor,
-      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact;
+      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
+      fileName = mediaState.fileName;
     var _ref = dimensions || {
         height: undefined,
         width: undefined
@@ -140,14 +141,16 @@ export var createMediaSingleNode = function createMediaSingleNode(schema, collec
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;
     var scaledWidth = width && Math.round(width / scaleFactor);
-    var mediaNode = media.create({
+    var mediaNode = media.create(_objectSpread({
       id: id,
       type: 'file',
       collection: collection,
       contextId: contextId,
       width: scaledWidth,
       height: height && Math.round(height / scaleFactor)
-    });
+    }, getBooleanFF('platform.editor.a11y-media_er96o') && fileName && {
+      alt: fileName
+    }));
     var mediaSingleAttrs = alignLeftOnInsert ? {
       layout: 'align-start'
     } : {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.4.10",
+  "version": "0.5.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -140,6 +140,9 @@
     "platform.media-experience.media-viewer-v2_hgsii": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.editor.a11y-media_er96o": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"