@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/cjs/plugins/media/toolbar/index.js

@@ -17,6 +17,10 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 
+var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+
+var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+
 var _messages = _interopRequireDefault(require("../../../messages"));
 
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -41,6 +45,14 @@ var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 
 var _analytics = require("../../analytics");
 
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _messages2 = require("../../card/messages");
+
+var _filePreviewItem = require("./filePreviewItem");
+
+var _utils = require("./utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -53,42 +65,86 @@ var remove = function remove(state, dispatch) {
   return true;
 };
 
-var floatingToolbar = function floatingToolbar(state, intl) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var providerFactory = options.providerFactory,
-      allowResizing = options.allowResizing,
-      allowAnnotation = options.allowAnnotation,
-      allowLinking = options.allowLinking,
-      allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
-      allowResizingInTables = options.allowResizingInTables,
-      allowAltTextOnImages = options.allowAltTextOnImages,
-      altTextValidator = options.altTextValidator;
-  var mediaSingle = state.schema.nodes.mediaSingle;
-
-  var pluginState = _pluginKey.stateKey.getState(state);
-
-  var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-
-  if (!mediaSingle || !pluginState) {
-    return;
-  }
-
-  var baseToolbar = {
-    title: 'Media floating controls',
-    nodeType: mediaSingle,
-    getDomRef: function getDomRef() {
-      return pluginState.element;
-    }
+var removeMediaCard = function removeMediaCard(state, mediaPluginState) {
+  var getPos = function getPos() {
+    var mediaOffset = state.selection.$from.parentOffset + 1;
+    return mediaOffset;
   };
 
-  if (allowLinking && mediaLinkingState && mediaLinkingState.visible && (0, _linking.shouldShowMediaLinkToolbar)(state)) {
-    var linkingToolbar = (0, _linking.getLinkingToolbar)(baseToolbar, mediaLinkingState, state, intl, providerFactory);
+  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
+  return true;
+};
 
-    if (linkingToolbar) {
-      return linkingToolbar;
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var items = [{
+    type: 'dropdown',
+    title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
+    options: [{
+      title: intl.formatMessage(_messages2.messages.inline),
+      selected: false,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
+      selected: true,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: function render() {
+      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState
+      });
     }
-  }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: _download.default,
+    onClick: function onClick() {
+      (0, _utils.downloadMedia)(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(_mediaUi.messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    icon: _remove.default,
+    onMouseEnter: (0, _decoration.hoverDecoration)(mediaGroup, true),
+    onMouseLeave: (0, _decoration.hoverDecoration)(mediaGroup, false),
+    onFocus: (0, _decoration.hoverDecoration)(mediaGroup, true),
+    onBlur: (0, _decoration.hoverDecoration)(mediaGroup, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: function onClick(state) {
+      return removeMediaCard(state, mediaPluginState);
+    },
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
 
+var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  var allowResizing = options.allowResizing,
+      allowAnnotation = options.allowAnnotation,
+      allowLinking = options.allowLinking,
+      allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
+      allowResizingInTables = options.allowResizingInTables,
+      allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
 
   if (allowAdvancedToolBarOptions) {
@@ -156,20 +212,12 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   }
 
   if (allowAltTextOnImages) {
-    var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
-
-    if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      return (0, _altText2.getAltTextToolbar)(baseToolbar, {
-        altTextValidator: altTextValidator
-      });
-    } else {
-      toolbarButtons.push((0, _altText2.altTextButton)(intl, state), {
-        type: 'separator'
-      });
-    }
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state), {
+      type: 'separator'
+    });
   }
 
-  var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
+  var removeButton = {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -181,7 +229,76 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     title: intl.formatMessage(_messages.default.remove),
     onClick: remove,
     testId: 'media-toolbar-remove-button'
-  }]);
+  };
+  var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [removeButton]);
+  return items;
+};
+
+var floatingToolbar = function floatingToolbar(state, intl) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _state$schema$nodes = state.schema.nodes,
+      media = _state$schema$nodes.media,
+      mediaSingle = _state$schema$nodes.mediaSingle,
+      mediaGroup = _state$schema$nodes.mediaGroup;
+  var altTextValidator = options.altTextValidator,
+      allowLinking = options.allowLinking,
+      allowAltTextOnImages = options.allowAltTextOnImages,
+      providerFactory = options.providerFactory,
+      allowMediaInline = options.allowMediaInline;
+
+  var mediaPluginState = _pluginKey.stateKey.getState(state);
+
+  var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
+
+  if (!mediaPluginState) {
+    return;
+  }
+
+  var nodeType = allowMediaInline ? [mediaSingle, media] : [mediaSingle];
+  var baseToolbar = {
+    title: 'Media floating controls',
+    nodeType: nodeType,
+    getDomRef: function getDomRef() {
+      return mediaPluginState.element;
+    }
+  };
+
+  if (allowLinking && mediaLinkingState && mediaLinkingState.visible && (0, _linking.shouldShowMediaLinkToolbar)(state)) {
+    var linkingToolbar = (0, _linking.getLinkingToolbar)(baseToolbar, mediaLinkingState, state, intl, providerFactory);
+
+    if (linkingToolbar) {
+      return linkingToolbar;
+    }
+  }
+
+  if (allowAltTextOnImages) {
+    var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
+
+    if (mediaAltTextPluginState.isAltTextEditorOpen) {
+      return (0, _altText2.getAltTextToolbar)(baseToolbar, {
+        altTextValidator: altTextValidator
+      });
+    }
+  }
+
+  var items = [];
+  var parentNode = (0, _prosemirrorUtils.findParentNodeOfType)(mediaGroup)(state.selection);
+
+  if (allowMediaInline && parentNode && parentNode.node.type === mediaGroup) {
+    var mediaOffset = state.selection.$from.parentOffset + 1;
+
+    baseToolbar.getDomRef = function () {
+      var _mediaPluginState$ele;
+
+      var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
+      return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
+    };
+
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState);
+  } else {
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState);
+  }
+
   return _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items
   });

package/dist/cjs/plugins/media/toolbar/utils.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.downloadMedia = exports.getSelectedMediaContainerNodeAttrs = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _mediaClient = require("@atlaskit/media-client");
+
+var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
+  var selectedNode = mediaPluginState.selectedMediaContainerNode();
+
+  if (selectedNode && selectedNode.attrs) {
+    return selectedNode.attrs;
+  }
+
+  return null;
+};
+
+exports.getSelectedMediaContainerNodeAttrs = getSelectedMediaContainerNodeAttrs;
+
+var downloadMedia = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaPluginState) {
+    var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+
+            if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig)) {
+              _context.next = 10;
+              break;
+            }
+
+            id = selectedNodeAttrs.id, _selectedNodeAttrs$co = selectedNodeAttrs.collection, collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+            mediaClient = (0, _mediaClient.getMediaClient)(mediaPluginState.mediaClientConfig);
+            _context.next = 7;
+            return mediaClient.file.getCurrentState(id, {
+              collectionName: collection
+            });
+
+          case 7:
+            fileState = _context.sent;
+            fileName = fileState.status === 'error' ? undefined : fileState.name;
+            mediaClient.file.downloadBinary(id, fileName, collection);
+
+          case 10:
+            return _context.abrupt("return", true);
+
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](0);
+            return _context.abrupt("return", false);
+
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 13]]);
+  }));
+
+  return function downloadMedia(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.downloadMedia = downloadMedia;