@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
241 lines (238 loc) • 12.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMediaSingleAndMediaInlineSwitcherDropdown = exports.getMaxToolbarWidth = exports.getIsDownloadDisabledByDataSecurityPolicy = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireDefault(require("react"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _messages = require("@atlaskit/editor-common/messages");
var _utils = require("@atlaskit/editor-common/utils");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
var _mediaClientReact = require("@atlaskit/media-client-react");
var _mediaUi = require("@atlaskit/media-ui");
var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
var _commands = require("./commands");
var isExternalMedia = exports.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;
};
var getSelectedNearestMediaContainerNodeAttrsFunction = exports.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;
};
var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
return getSelectedNearestMediaContainerNodeAttrsFunction(mediaPluginState.selectedMediaContainerNode);
};
var getIsDownloadDisabledByDataSecurityPolicy = exports.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;
};
var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaPluginState, isViewMode) {
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 = 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 = (0, _mediaClientReact.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);
};
}();
var removeMediaGroupNode = exports.removeMediaGroupNode = function removeMediaGroupNode(state) {
var mediaGroup = state.schema.nodes.mediaGroup;
var mediaGroupParent = (0, _utils2.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 = (0, _utils2.removeParentNodeOfType)(mediaGroup)(tr);
} else {
tr = (0, _utils2.removeSelectedNode)(tr);
}
return tr;
};
var getSelectedMediaSingle = exports.getSelectedMediaSingle = function getSelectedMediaSingle(state) {
var mediaSingle = state.schema.nodes.mediaSingle;
return (0, _utils2.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils2.findParentNodeOfType)(mediaSingle)(state.selection);
};
var getPixelWidthOfElement = exports.getPixelWidthOfElement = (0, _memoizeOne.default)(function (editorView, pos, mediaWidth) {
var domNode = editorView.nodeDOM(pos);
if (domNode instanceof HTMLElement) {
return domNode.offsetWidth;
}
return mediaWidth;
});
var calcNewLayout = exports.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 = _mediaSingle.wrappedLayouts.indexOf(layout) > -1;
//See flowchart for layout logic: https://hello.atlassian.net/wiki/spaces/TWPCP/whiteboard/2969594044
if (width >= _editorSharedStyles.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;
var getMaxToolbarWidth = exports.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;
};
var getSelectedLayoutIcon = exports.getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
var selectedLayout = selectedNode.attrs.layout;
return layoutIcons.find(function (icon) {
return icon.value === (_utils.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
*/
var canShowSwitchButtons = exports.canShowSwitchButtons = function canShowSwitchButtons(mediaSingleNode) {
if (mediaSingleNode) {
var mediaNode = mediaSingleNode.content.firstChild;
return mediaNode && !(0, _mediaSingle2.isVideo)(mediaNode.attrs.__fileMimeType);
}
return false;
};
var updateToFullHeightSeparator = exports.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
});
}
};
var getMediaSingleAndMediaInlineSwitcherDropdown = exports.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(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
var InlineIcon = function InlineIcon() {
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
color: "currentColor",
spacing: "spacious",
label: ""
});
};
var BlockIcon = function BlockIcon() {
return /*#__PURE__*/_react.default.createElement(_maximize.default, {
color: "currentColor",
spacing: "spacious",
label: ""
});
};
var dropdownConfig = {
inline: {
handleInlineButtonClick: function handleInlineButtonClick() {
return true;
},
handleBlockButtonClick: (0, _commands.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: (0, _commands.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.default.createElement(InlineIcon, null),
tooltip: hasCaption ? inlineSwitcherTitle : undefined
}, {
id: 'editor.media.convert.mediasingle',
title: mediaSingleTitle,
onClick: dropdownConfig[nodeType].handleBlockButtonClick,
selected: nodeType === 'block',
icon: /*#__PURE__*/_react.default.createElement(BlockIcon, null)
}];
return {
id: dropdownConfig[nodeType].id,
testId: 'media-inline-to-block-dropdown',
title: intl.formatMessage(_mediaUi.messages.sizeOptions),
type: 'dropdown',
options: options,
icon: dropdownConfig[nodeType].icon
};
};