@atlaskit/editor-core 148.0.0 → 149.0.3

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

@@ -6,8 +6,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import React from 'react';
-import { removeSelectedNode } from 'prosemirror-utils';
+import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
+import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import commonMessages from '../../../messages';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { hoverDecoration } from '../../base/pm-plugins/decoration';
@@ -20,6 +22,10 @@ import { altTextButton, getAltTextToolbar } from './alt-text';
 import { showLinkingToolbar } from '../commands/linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } from '../../analytics';
+import { messages } from '@atlaskit/media-ui';
+import { messages as cardMessages } from '../../card/messages';
+import { FilePreviewItem } from './filePreviewItem';
+import { downloadMedia } from './utils';
 
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -29,40 +35,86 @@ var remove = function remove(state, dispatch) {
   return true;
 };
 
-export 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 = stateKey.getState(state);
-  var mediaLinkingState = 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 && shouldShowMediaLinkToolbar(state)) {
-    var linkingToolbar = 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(messages.displayThumbnail),
+    options: [{
+      title: intl.formatMessage(cardMessages.inline),
+      selected: false,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: true,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: function render() {
+      return /*#__PURE__*/React.createElement(FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState
+      });
     }
-  }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: DownloadIcon,
+    onClick: function onClick() {
+      downloadMedia(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration(mediaGroup, true),
+    onMouseLeave: hoverDecoration(mediaGroup, false),
+    onFocus: hoverDecoration(mediaGroup, true),
+    onBlur: hoverDecoration(mediaGroup, false),
+    title: intl.formatMessage(commonMessages.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) {
@@ -130,20 +182,12 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   }
 
   if (allowAltTextOnImages) {
-    var mediaAltTextPluginState = getMediaAltTextPluginState(state);
-
-    if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      return getAltTextToolbar(baseToolbar, {
-        altTextValidator: altTextValidator
-      });
-    } else {
-      toolbarButtons.push(altTextButton(intl, state), {
-        type: 'separator'
-      });
-    }
+    toolbarButtons.push(altTextButton(intl, state), {
+      type: 'separator'
+    });
   }
 
-  var items = [].concat(_toConsumableArray(toolbarButtons), [{
+  var removeButton = {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -155,7 +199,74 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     title: intl.formatMessage(commonMessages.remove),
     onClick: remove,
     testId: 'media-toolbar-remove-button'
-  }]);
+  };
+  var items = [].concat(_toConsumableArray(toolbarButtons), [removeButton]);
+  return items;
+};
+
+export 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 = stateKey.getState(state);
+  var mediaLinkingState = 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 && shouldShowMediaLinkToolbar(state)) {
+    var linkingToolbar = getLinkingToolbar(baseToolbar, mediaLinkingState, state, intl, providerFactory);
+
+    if (linkingToolbar) {
+      return linkingToolbar;
+    }
+  }
+
+  if (allowAltTextOnImages) {
+    var mediaAltTextPluginState = getMediaAltTextPluginState(state);
+
+    if (mediaAltTextPluginState.isAltTextEditorOpen) {
+      return getAltTextToolbar(baseToolbar, {
+        altTextValidator: altTextValidator
+      });
+    }
+  }
+
+  var items = [];
+  var parentNode = 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 = 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/esm/plugins/media/toolbar/utils.js

@@ -0,0 +1,60 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import { getMediaClient } from '@atlaskit/media-client';
+export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
+  var selectedNode = mediaPluginState.selectedMediaContainerNode();
+
+  if (selectedNode && selectedNode.attrs) {
+    return selectedNode.attrs;
+  }
+
+  return null;
+};
+export var downloadMedia = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState) {
+    var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;
+
+    return _regeneratorRuntime.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 = 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);
+  };
+}();