@atlaskit/editor-plugin-media/dist/es2019/toolbar/utils.js

Media plugin for @atlaskit/editor-core

import memoizeOne from 'memoize-one';
import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
import { getMediaClient } from '@atlaskit/media-client-react';
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;
  }
};
export const removeMediaGroupNode = state => {
  const {
    mediaGroup
  } = state.schema.nodes;
  const mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
  let tr = state.tr;
  // If it is the last media group in filmstrip, remove the entire filmstrip
  if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
    tr = removeParentNodeOfType(mediaGroup)(tr);
  } else {
    tr = removeSelectedNode(tr);
  }
  return tr;
};
export const getSelectedMediaSingle = state => {
  const {
    mediaSingle
  } = state.schema.nodes;
  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
};
export const getPixelWidthOfElement = memoizeOne((editorView, pos, mediaWidth) => {
  const domNode = editorView.nodeDOM(pos);
  if (domNode instanceof HTMLElement) {
    return domNode.offsetWidth;
  }
  return mediaWidth;
});
export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false, isNested = false) => {
  const isWrappedLayout = wrappedLayouts.indexOf(layout) > -1;

  //See flowchart for layout logic: https://hello.atlassian.net/wiki/spaces/TWPCP/whiteboard/2969594044
  if (width >= akEditorFullWidthLayoutWidth) {
    // If width is greater than or equal to full editor width
    return 'full-width';
  }
  if (fullWidthMode) {
    // If under editor full width mode
    return isWrappedLayout ? layout : 'center';
  }
  if (width > contentWidth && !isNested) {
    // If width is greater than content length and not nested
    return 'wide';
  }
  return isNested || isWrappedLayout && width !== contentWidth ? layout : 'center';
};
let maxToolbarFitWidth = 0;
export const getMaxToolbarWidth = () => {
  const toolbar = document.querySelector(`div[aria-label="Media floating controls"]`);
  const toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
  if (!toolbar) {
    maxToolbarFitWidth = 0;
  }
  if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
    maxToolbarFitWidth = toolbarWidth;
  }
  return maxToolbarFitWidth;
};
export const getSelectedLayoutIcon = (layoutIcons, selectedNode) => {
  const selectedLayout = selectedNode.attrs.layout;
  return layoutIcons.find(icon => icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout));
};