@atlaskit/editor-plugin-media 2.3.13 → 2.3.15

package/dist/cjs/ui/toolbar/mediaInline.js

@@ -178,7 +178,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
       fullHeight: true
     }, download, {
       type: 'separator',
-      fullHeight: true,
       supportsViewMode: true
     }, preview, {
       type: 'separator',
@@ -195,6 +194,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
   var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
   var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var inlineImageItems = [];
+  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  var isViewOnly = options.isViewOnly,
+    allowAltTextOnImages = options.allowAltTextOnImages,
+    allowLinking = options.allowLinking,
+    allowImagePreview = options.allowImagePreview;
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
     inlineImageItems.push({
       type: 'custom',
@@ -224,9 +228,20 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   }
+  var download = {
+    id: 'editor.media.image.download',
+    type: 'button',
+    icon: _download.default,
+    onClick: function onClick() {
+      (0, _utils.downloadMedia)(mediaPluginState, options.isViewOnly);
+      return true;
+    },
+    title: intl.formatMessage(_mediaUi.messages.download),
+    supportsViewMode: true
+  };
 
   // For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+  if (!isEditorControlsEnabled) {
     inlineImageItems.push({
       id: 'editor.media.convert.mediainline',
       type: 'button',
@@ -260,6 +275,48 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
     }, {
       type: 'separator'
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView, idx) {
+        if (editorView !== null && editorView !== void 0 && editorView.state) {
+          var editLink = function editLink() {
+            if (editorView) {
+              var _state = editorView.state,
+                dispatch = editorView.dispatch;
+              (0, _linking.showLinkingToolbar)(_state, dispatch);
+            }
+          };
+          var openLink = function openLink() {
+            if (editorView) {
+              var _pluginInjectionApi$a4;
+              var tr = editorView.state.tr,
+                dispatch = editorView.dispatch;
+              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
+                eventType: _analytics.EVENT_TYPE.TRACK,
+                action: _analytics.ACTION.VISITED,
+                actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+                actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
+              })(tr);
+              dispatch(tr);
+              return true;
+            }
+          };
+          return /*#__PURE__*/_react.default.createElement(_linkingToolbarAppearance.LinkToolbarAppearance, {
+            key: idx,
+            editorState: editorView.state,
+            intl: intl,
+            mediaLinkingState: mediaLinkingState,
+            onAddLink: editLink,
+            onEditLink: editLink,
+            onOpenLink: openLink,
+            isInlineNode: true,
+            isViewOnly: options.isViewOnly
+          });
+        }
+        return null;
+      },
+      supportsViewMode: true
     });
   } else {
     var _options2 = [{
@@ -309,62 +366,21 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator',
       fullHeight: true
     });
-  }
-
-  // TODO: ED-26961 - editor controls move to overflow menu
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-    inlineImageItems.push({
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView, idx) {
-        if (editorView !== null && editorView !== void 0 && editorView.state) {
-          var editLink = function editLink() {
-            if (editorView) {
-              var _state = editorView.state,
-                dispatch = editorView.dispatch;
-              (0, _linking.showLinkingToolbar)(_state, dispatch);
-            }
-          };
-          var openLink = function openLink() {
-            if (editorView) {
-              var _pluginInjectionApi$a4;
-              var tr = editorView.state.tr,
-                dispatch = editorView.dispatch;
-              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
-                eventType: _analytics.EVENT_TYPE.TRACK,
-                action: _analytics.ACTION.VISITED,
-                actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-                actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
-              })(tr);
-              dispatch(tr);
-              return true;
-            }
-          };
-          return /*#__PURE__*/_react.default.createElement(_linkingToolbarAppearance.LinkToolbarAppearance, {
-            key: idx,
-            editorState: editorView.state,
-            intl: intl,
-            mediaLinkingState: mediaLinkingState,
-            onAddLink: editLink,
-            onEditLink: editLink,
-            onOpenLink: openLink,
-            isInlineNode: true,
-            isViewOnly: options.isViewOnly
-          });
-        }
-        return null;
-      },
-      supportsViewMode: true
-    });
+    if (isViewOnly) {
+      inlineImageItems.push(download, {
+        type: 'separator',
+        supportsViewMode: true
+      });
+    }
   }
 
   //Image Preview
-  if (options.allowImagePreview) {
+  if (allowImagePreview) {
     inlineImageItems.push({
       id: 'editor.media.viewer',
       testId: 'file-preview-toolbar-button',
       type: 'button',
-      icon: _maximize.default,
+      icon: isEditorControlsEnabled ? _growDiagonal.default : _maximize.default,
       iconFallback: _filePreview.default,
       title: intl.formatMessage(_mediaUi.messages.preview),
       onClick: function onClick() {
@@ -377,42 +393,30 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     }, {
       type: 'separator',
-      supportsViewMode: true,
-      fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
+      supportsViewMode: true
     });
   }
 
   // open link
-  if (options.allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state) && mediaLinkingState && mediaLinkingState.editable && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state) && mediaLinkingState && mediaLinkingState.editable && isEditorControlsEnabled) {
     inlineImageItems.push((0, _linking3.getOpenLinkToolbarButtonOption)(intl, mediaLinkingState, pluginInjectionApi), {
       type: 'separator',
-      supportsViewMode: true,
-      fullHeight: true
+      supportsViewMode: true
     });
   }
-  if (options.isViewOnly) {
-    inlineImageItems.push({
-      id: 'editor.media.image.download',
-      type: 'button',
-      icon: _download.default,
-      onClick: function onClick() {
-        (0, _utils.downloadMedia)(mediaPluginState, options.isViewOnly);
-        return true;
-      },
-      title: intl.formatMessage(_mediaUi.messages.download),
-      supportsViewMode: true
-    }, {
+  if (isViewOnly && !isEditorControlsEnabled) {
+    inlineImageItems.push(download, {
       type: 'separator',
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+  if (allowAltTextOnImages && !isEditorControlsEnabled) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
       type: 'separator'
     });
   }
-  if (options.isViewOnly || (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+  if (isViewOnly || !isEditorControlsEnabled) {
     inlineImageItems.push({
       type: 'copy-button',
       supportsViewMode: true,
@@ -423,7 +427,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       }]
     });
   }
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+  if (!isEditorControlsEnabled) {
     inlineImageItems.push({
       type: 'separator'
     });

package/dist/cjs/ui/toolbar/pixel-resizing.js

@@ -4,12 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPixelResizingToolbar = void 0;
+exports.getResizeDropdownOption = exports.getPixelResizingToolbar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _media = require("@atlaskit/editor-common/media");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commands = require("../../pm-plugins/pixel-resizing/commands");
 var _ui = require("../../pm-plugins/pixel-resizing/ui");
 var _constants = require("../../pm-plugins/pixel-resizing/ui/constants");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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 getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBaseConfig, _ref) {
@@ -28,7 +33,7 @@ var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixe
         if (!editorView) {
           return null;
         }
-        var selectedMediaSingleNode = (0, _utils.getSelectedMediaSingle)(editorView.state);
+        var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(editorView.state);
         if (!editorView || !selectedMediaSingleNode) {
           return null;
         }
@@ -44,4 +49,24 @@ var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixe
       }
     }]
   });
+};
+var getResizeDropdownOption = exports.getResizeDropdownOption = function getResizeDropdownOption(mediaOptions, state, formatMessage, selectedNodeType) {
+  if ((selectedNodeType === null || selectedNodeType === void 0 ? void 0 : selectedNodeType.name) !== 'mediaSingle') {
+    return [];
+  }
+  var allowResizing = mediaOptions.allowResizing,
+    allowResizingInTables = mediaOptions.allowResizingInTables,
+    allowAdvancedToolBarOptions = mediaOptions.allowAdvancedToolBarOptions;
+  var isWithinTable = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection);
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+    return [{
+      title: formatMessage(_media.pixelEntryMessages.resizeOption),
+      onClick: (0, _commands.openPixelEditor)(),
+      icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
+        label: ""
+      }),
+      testId: 'media-pixel-resizing-dropdown-option'
+    }];
+  }
+  return [];
 };

package/dist/cjs/ui/toolbar/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
+exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -153,4 +153,15 @@ var canShowSwitchButtons = exports.canShowSwitchButtons = function canShowSwitch
     return mediaNode && !(0, _mediaSingle2.isVideo)(mediaNode.attrs.__fileMimeType);
   }
   return false;
+};
+var updateToFullHeightSeparator = exports.updateToFullHeightSeparator = function updateToFullHeightSeparator(items) {
+  var lastItem = items.at(-1);
+  if ((lastItem === null || lastItem === void 0 ? void 0 : lastItem.type) === 'separator') {
+    lastItem.fullHeight = true;
+  } else if (items.length) {
+    items.push({
+      type: 'separator',
+      fullHeight: true
+    });
+  }
 };

package/dist/es2019/nodeviews/mediaInline.js

@@ -137,7 +137,8 @@ export const MediaInline = props => {
       border: {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
-      }
+      },
+      isViewOnly: props.editorViewMode
     });
   }
   return jsx(MediaViewerContainer, {

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -53,6 +53,7 @@ class MediaNodeView extends SelectionBasedNodeView {
         width: editorWidth,
         mediaProvider
       }) => {
+        var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3;
         const getPos = this.getPos;
         const {
           mediaOptions
@@ -97,7 +98,8 @@ class MediaNodeView extends SelectionBasedNodeView {
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
-          onExternalImageLoaded: this.onExternalImageLoaded
+          onExternalImageLoaded: this.onExternalImageLoaded,
+          isViewOnly: ((_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode) === 'view'
         });
       };
     });

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -6,6 +6,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { Card, CardLoading } from '@atlaskit/media-card';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
 
@@ -32,6 +33,13 @@ export class MediaNode extends Component {
       event
     }) => {
       this.selectMediaSingle(event);
+
+      // In edit mode (node content wrapper has contenteditable set to true), link redirection is disabled by default
+      // We need to call "stopPropagation" here in order to prevent in editor view mode, the browser from navigating to
+      // another URL if the media node is wrapped in a link mark.
+      if (this.props.isViewOnly && editorExperiment('platform_editor_controls', 'variant1')) {
+        event.preventDefault();
+      }
     });
     _defineProperty(this, "selectMediaSingle", event => {
       const propPos = this.props.getPos();
@@ -39,9 +47,13 @@ export class MediaNode extends Component {
         return;
       }
 
+      // NOTE: This does not prevent the link navigation in the editor view mode, .preventDefault is needed (see selectMediaSingleFromCard)
+      // Hence it should be removed
       // We need to call "stopPropagation" here in order to prevent the browser from navigating to
       // another URL if the media node is wrapped in a link mark.
-      event.stopPropagation();
+      if (editorExperiment('platform_editor_controls', 'control')) {
+        event.stopPropagation();
+      }
       const {
         state
       } = this.props.view;

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

@@ -55,8 +55,19 @@ function insertNodesWithOptionalParagraph({
     if (state.selection.empty) {
       const insertFrom = atTheBeginningOfBlock(state) && fg('platform_editor_axe_leading_paragraph_from_media') ? state.selection.$from.before() : state.selection.from;
       if (fg('platform_editor_axe_leading_paragraph_from_media')) {
-        const shouldInsertFrom = !isInsidePotentialEmptyParagraph(state);
-        updatedTr = atTheBeginningOfBlock(state) ? pmSafeInsert(nodes[0], shouldInsertFrom ? insertFrom : undefined, false)(updatedTr) : updatedTr.insert(insertFrom, nodes);
+        if (fg('platform_editor_multi_images_overridden_upload_fix')) {
+          // the use of pmSafeInsert causes the node selection to media single node.
+          // It leads to discrepancy between the full-page and comment editor - not sure why :shrug:
+          // When multiple images are uploaded, the node selection is set to the previous node
+          // and got overridden by the next node inserted.
+          // It also causes the images position shifted when the images are uploaded.
+          // E.g the images are uploaded after a table, the images will be inserted inside the table.
+          // so we revert to use tr.insert instead. No extra paragraph is added.
+          updatedTr = updatedTr.insert(insertFrom, nodes);
+        } else {
+          const shouldInsertFrom = !isInsidePotentialEmptyParagraph(state);
+          updatedTr = atTheBeginningOfBlock(state) ? pmSafeInsert(nodes[0], shouldInsertFrom ? insertFrom : undefined, false)(updatedTr) : updatedTr.insert(insertFrom, nodes);
+        }
       } else {
         updatedTr.insert(insertFrom, nodes);
       }

package/dist/es2019/ui/toolbar/alt-text.js

@@ -3,8 +3,11 @@ import { addAltText, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { altTextMessages as messages } from '@atlaskit/editor-common/media';
 import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/styles';
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import TextIcon from '@atlaskit/icon/core/text';
 import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import AltTextEdit from '../../pm-plugins/alt-text/ui/AltTextEdit';
+import { isImage } from '../../pm-plugins/utils/is-type';
 import { getMediaSingleOrInlineNodeFromSelection } from '../../pm-plugins/utils/media-common';
 import { getNodeType } from './commands';
 const testId = 'alt-text-edit-button';
@@ -75,4 +78,21 @@ export const getAltTextToolbar = (toolbarBaseConfig, options) => {
     className: ClassNames.FLOATING_TOOLBAR_COMPONENT,
     items: [altTextEditComponent(options)]
   };
+};
+export const getAltTextDropdownOption = (state, formatMessage, allowAltTextOnImages, selectedNodeType, editorAnalyticsAPI) => {
+  const {
+    mediaSingle,
+    mediaInline
+  } = state.schema.nodes;
+  const mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
+  if (allowAltTextOnImages && (selectedNodeType === mediaSingle || selectedNodeType === mediaInline && isImage(mediaType))) {
+    return [{
+      title: formatMessage(messages.addAltText),
+      onClick: openMediaAltTextMenu(editorAnalyticsAPI),
+      icon: /*#__PURE__*/React.createElement(TextIcon, {
+        label: ""
+      })
+    }];
+  }
+  return [];
 };