@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
234 lines (232 loc) • 11.1 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import memoizeOne from 'memoize-one';
import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
import { mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
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 ImageInlineIcon from '@atlaskit/icon/core/image-inline';
import MaximizeIcon from '@atlaskit/icon/core/maximize';
import { getMediaClient } from '@atlaskit/media-client-react';
import { messages } from '@atlaskit/media-ui';
import { isVideo } from '../../pm-plugins/utils/media-single';
import { changeMediaInlineToMediaSingle, changeMediaSingleToMediaInline } from './commands';
export var isExternalMedia = function isExternalMedia(attrs) {
return attrs.type === 'external';
};
var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
var _mediaPluginState$sel;
var selectedNode = (_mediaPluginState$sel = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel === void 0 ? void 0 : _mediaPluginState$sel.call(mediaPluginState);
if (selectedNode && selectedNode.attrs) {
return selectedNode.attrs;
}
return null;
};
export var getSelectedNearestMediaContainerNodeAttrsFunction = function getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode) {
var selectedNode = selectedMediaContainerNode === null || selectedMediaContainerNode === void 0 ? void 0 : selectedMediaContainerNode();
if (selectedNode) {
switch (selectedNode.type.name) {
case 'mediaSingle':
{
var childNode = selectedNode.firstChild;
return childNode === null || childNode === void 0 ? void 0 : childNode.attrs;
}
default:
return selectedNode.attrs;
}
}
return null;
};
export var getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
return getSelectedNearestMediaContainerNodeAttrsFunction(mediaPluginState.selectedMediaContainerNode);
};
export var getIsDownloadDisabledByDataSecurityPolicy = function getIsDownloadDisabledByDataSecurityPolicy(mediaPluginState) {
var _mediaPluginState$med;
var enforceMediaDataSecurityPolicy = mediaPluginState === null || mediaPluginState === void 0 || (_mediaPluginState$med = mediaPluginState.mediaClientConfig) === null || _mediaPluginState$med === void 0 ? void 0 : _mediaPluginState$med.enforceDataSecurityPolicy;
return typeof enforceMediaDataSecurityPolicy === 'boolean' ? enforceMediaDataSecurityPolicy : false;
};
export var downloadMedia = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState, isViewMode) {
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 = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);
if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig && !isExternalMedia(selectedNodeAttrs))) {
_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, _x2) {
return _ref.apply(this, arguments);
};
}();
export var removeMediaGroupNode = function removeMediaGroupNode(state) {
var mediaGroup = state.schema.nodes.mediaGroup;
var mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
var 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 var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
var mediaSingle = state.schema.nodes.mediaSingle;
return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
};
export var getPixelWidthOfElement = memoizeOne(function (editorView, pos, mediaWidth) {
var domNode = editorView.nodeDOM(pos);
if (domNode instanceof HTMLElement) {
return domNode.offsetWidth;
}
return mediaWidth;
});
export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var isNested = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
var 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';
};
var maxToolbarFitWidth = 0;
export var getMaxToolbarWidth = function getMaxToolbarWidth() {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var toolbar = document.querySelector("div[aria-label=\"Media floating controls\"]");
var toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
if (!toolbar) {
maxToolbarFitWidth = 0;
}
if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
maxToolbarFitWidth = toolbarWidth;
}
return maxToolbarFitWidth;
};
export var getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
var selectedLayout = selectedNode.attrs.layout;
return layoutIcons.find(function (icon) {
return icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
});
};
/**
* Check if 'original size' and 'inline' buttons can be shown in the toolbar for a given mediaSingle node.
* @param mediaSingleNode node to be checked
*/
export var canShowSwitchButtons = function canShowSwitchButtons(mediaSingleNode) {
if (mediaSingleNode) {
var mediaNode = mediaSingleNode.content.firstChild;
return mediaNode && !isVideo(mediaNode.attrs.__fileMimeType);
}
return false;
};
export var 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
});
}
};
export var getMediaSingleAndMediaInlineSwitcherDropdown = function getMediaSingleAndMediaInlineSwitcherDropdown(nodeType, intl, pluginInjectionApi) {
var _pluginInjectionApi$a, _pluginInjectionApi$a2;
var hasCaption = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
var mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
var InlineIcon = function InlineIcon() {
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
});
};
var BlockIcon = function BlockIcon() {
return /*#__PURE__*/React.createElement(MaximizeIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
});
};
var dropdownConfig = {
inline: {
handleInlineButtonClick: function handleInlineButtonClick() {
return true;
},
handleBlockButtonClick: changeMediaInlineToMediaSingle(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState()),
id: 'media-inline-to-block-toolbar-item',
icon: InlineIcon
},
block: {
handleInlineButtonClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions),
handleBlockButtonClick: function handleBlockButtonClick() {
return true;
},
id: 'media-block-to-inline-toolbar-item',
icon: BlockIcon
}
};
var options = [{
id: 'editor.media.convert.mediainline',
title: mediaInlineImageTitle,
onClick: dropdownConfig[nodeType].handleInlineButtonClick,
selected: nodeType === 'inline',
icon: /*#__PURE__*/React.createElement(InlineIcon, null),
tooltip: hasCaption ? inlineSwitcherTitle : undefined
}, {
id: 'editor.media.convert.mediasingle',
title: mediaSingleTitle,
onClick: dropdownConfig[nodeType].handleBlockButtonClick,
selected: nodeType === 'block',
icon: /*#__PURE__*/React.createElement(BlockIcon, null)
}];
return {
id: dropdownConfig[nodeType].id,
testId: 'media-inline-to-block-dropdown',
title: intl.formatMessage(messages.sizeOptions),
type: 'dropdown',
options: options,
icon: dropdownConfig[nodeType].icon
};
};