@atlaskit/editor-core 148.0.0 → 149.0.3

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

@@ -1,6 +1,8 @@
 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';
@@ -13,6 +15,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';
 
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -22,41 +28,92 @@ const remove = (state, dispatch) => {
   return true;
 };
 
-export const floatingToolbar = (state, intl, options = {}) => {
+const removeMediaCard = (state, mediaPluginState) => {
+  const getPos = () => {
+    const mediaOffset = state.selection.$from.parentOffset + 1;
+    return mediaOffset;
+  };
+
+  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
+  return true;
+};
+
+const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
+  const {
+    mediaGroup
+  } = state.schema.nodes;
+  const items = [{
+    type: 'dropdown',
+    title: intl.formatMessage(messages.displayThumbnail),
+    options: [{
+      title: intl.formatMessage(cardMessages.inline),
+      selected: false,
+      onClick: () => {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: true,
+      onClick: () => {
+        return true;
+      },
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    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: () => {
+      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: state => {
+      return removeMediaCard(state, mediaPluginState);
+    },
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+
+const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState) => {
+  const {
+    mediaSingle
+  } = state.schema.nodes;
   const {
-    providerFactory,
     allowResizing,
     allowAnnotation,
     allowLinking,
     allowAdvancedToolBarOptions,
     allowResizingInTables,
-    allowAltTextOnImages,
-    altTextValidator
+    allowAltTextOnImages
   } = options;
-  const {
-    mediaSingle
-  } = state.schema.nodes;
-  const pluginState = stateKey.getState(state);
-  const mediaLinkingState = getMediaLinkingState(state);
-
-  if (!mediaSingle || !pluginState) {
-    return;
-  }
-
-  const baseToolbar = {
-    title: 'Media floating controls',
-    nodeType: mediaSingle,
-    getDomRef: () => pluginState.element
-  };
-
-  if (allowLinking && mediaLinkingState && mediaLinkingState.visible && shouldShowMediaLinkToolbar(state)) {
-    const linkingToolbar = getLinkingToolbar(baseToolbar, mediaLinkingState, state, intl, providerFactory);
-
-    if (linkingToolbar) {
-      return linkingToolbar;
-    }
-  }
-
   let toolbarButtons = [];
 
   if (allowAdvancedToolBarOptions) {
@@ -128,20 +185,12 @@ export const floatingToolbar = (state, intl, options = {}) => {
   }
 
   if (allowAltTextOnImages) {
-    const mediaAltTextPluginState = getMediaAltTextPluginState(state);
-
-    if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      return getAltTextToolbar(baseToolbar, {
-        altTextValidator
-      });
-    } else {
-      toolbarButtons.push(altTextButton(intl, state), {
-        type: 'separator'
-      });
-    }
+    toolbarButtons.push(altTextButton(intl, state), {
+      type: 'separator'
+    });
   }
 
-  const items = [...toolbarButtons, {
+  const removeButton = {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
@@ -153,7 +202,74 @@ export const floatingToolbar = (state, intl, options = {}) => {
     title: intl.formatMessage(commonMessages.remove),
     onClick: remove,
     testId: 'media-toolbar-remove-button'
-  }];
+  };
+  const items = [...toolbarButtons, removeButton];
+  return items;
+};
+
+export const floatingToolbar = (state, intl, options = {}) => {
+  const {
+    media,
+    mediaSingle,
+    mediaGroup
+  } = state.schema.nodes;
+  const {
+    altTextValidator,
+    allowLinking,
+    allowAltTextOnImages,
+    providerFactory,
+    allowMediaInline
+  } = options;
+  const mediaPluginState = stateKey.getState(state);
+  const mediaLinkingState = getMediaLinkingState(state);
+
+  if (!mediaPluginState) {
+    return;
+  }
+
+  const nodeType = allowMediaInline ? [mediaSingle, media] : [mediaSingle];
+  const baseToolbar = {
+    title: 'Media floating controls',
+    nodeType,
+    getDomRef: () => mediaPluginState.element
+  };
+
+  if (allowLinking && mediaLinkingState && mediaLinkingState.visible && shouldShowMediaLinkToolbar(state)) {
+    const linkingToolbar = getLinkingToolbar(baseToolbar, mediaLinkingState, state, intl, providerFactory);
+
+    if (linkingToolbar) {
+      return linkingToolbar;
+    }
+  }
+
+  if (allowAltTextOnImages) {
+    const mediaAltTextPluginState = getMediaAltTextPluginState(state);
+
+    if (mediaAltTextPluginState.isAltTextEditorOpen) {
+      return getAltTextToolbar(baseToolbar, {
+        altTextValidator
+      });
+    }
+  }
+
+  let items = [];
+  const parentNode = findParentNodeOfType(mediaGroup)(state.selection);
+
+  if (allowMediaInline && parentNode && parentNode.node.type === mediaGroup) {
+    const mediaOffset = state.selection.$from.parentOffset + 1;
+
+    baseToolbar.getDomRef = () => {
+      var _mediaPluginState$ele;
+
+      const 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 { ...baseToolbar,
     items
   };

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

@@ -0,0 +1,32 @@
+import { getMediaClient } from '@atlaskit/media-client';
+export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
+  const selectedNode = mediaPluginState.selectedMediaContainerNode();
+
+  if (selectedNode && selectedNode.attrs) {
+    return selectedNode.attrs;
+  }
+
+  return null;
+};
+export const downloadMedia = async mediaPluginState => {
+  try {
+    const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+
+    if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+      const {
+        id,
+        collection = ''
+      } = selectedNodeAttrs;
+      const mediaClient = getMediaClient(mediaPluginState.mediaClientConfig);
+      const fileState = await mediaClient.file.getCurrentState(id, {
+        collectionName: collection
+      });
+      const fileName = fileState.status === 'error' ? undefined : fileState.name;
+      mediaClient.file.downloadBinary(id, fileName, collection);
+    }
+
+    return true;
+  } catch (err) {
+    return false;
+  }
+};