@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
215 lines (213 loc) • 12.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getOpenLinkToolbarButtonOption = exports.getLinkingToolbar = exports.getLinkingDropdownOptions = void 0;
exports.shouldShowMediaLinkToolbar = shouldShowMediaLinkToolbar;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _ui = require("@atlaskit/editor-common/ui");
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
var _linking = require("../../pm-plugins/commands/linking");
var _linking2 = require("../../pm-plugins/linking");
var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
var _MediaLinkingToolbar = _interopRequireDefault(require("../../ui/MediaLinkingToolbar"));
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
var FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS = '[data-testid="media-overflow-dropdown-trigger"]';
function shouldShowMediaLinkToolbar(editorState) {
var mediaLinkingState = (0, _linking2.getMediaLinkingState)(editorState);
if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
return false;
}
var _editorState$schema = editorState.schema,
_editorState$schema$n = _editorState$schema.nodes,
media = _editorState$schema$n.media,
mediaInline = _editorState$schema$n.mediaInline,
link = _editorState$schema.marks.link;
var node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
if (!node || ![media, mediaInline].includes(node.type)) {
return false;
}
var _editorState$doc$reso = editorState.doc.resolve(mediaLinkingState.mediaPos),
parent = _editorState$doc$reso.parent;
return parent && parent.type.allowsMarkType(link);
}
var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory) {
var link = mediaLinkingState.link,
visible = mediaLinkingState.visible,
editing = mediaLinkingState.editable,
mediaPos = mediaLinkingState.mediaPos;
if (visible && mediaPos !== null) {
var node = state.doc.nodeAt(mediaPos);
if (node) {
return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
height: _ui.RECENT_SEARCH_HEIGHT_IN_PX,
width: _ui.RECENT_SEARCH_WIDTH_IN_PX,
forcePlacement: true,
items: [{
type: 'custom',
fallback: [],
disableArrowNavigation: true,
render: function render(view, idx) {
if (!view || !providerFactory) {
return null;
}
var setFocusOnFloatingToolbar = function setFocusOnFloatingToolbar(setFocus) {
if (setFocus && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
var _pluginInjectionApi$f;
var tr = view.state.tr,
dispatch = view.dispatch;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 || _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS)(tr);
dispatch(tr);
}
};
return /*#__PURE__*/_react.default.createElement(_MediaLinkingToolbar.default, {
key: idx,
displayUrl: link,
providerFactory: providerFactory,
intl: intl,
editing: editing
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onUnlink: function onUnlink(setFocus) {
var _pluginInjectionApi$a;
(0, _linking.unlink)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
setFocusOnFloatingToolbar(setFocus);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onBack: function onBack(href, meta, setFocus) {
if (href.trim() && meta.inputMethod) {
var _pluginInjectionApi$a2;
(0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
}
(0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
setFocusOnFloatingToolbar(setFocus);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onCancel: function onCancel() {
var _pluginInjectionApi$f2;
(0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view, true);
/** Focus should move to the 'Add link' button when the toolbar closes
* and not close the floating toolbar.
*/
var tr = view.state.tr,
dispatch = view.dispatch;
var selector = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 || _pluginInjectionApi$f2.forceFocusSelector(selector)(tr);
dispatch(tr);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSubmit: function onSubmit(href, meta) {
var _pluginInjectionApi$a3;
(0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
(0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
setFocusOnFloatingToolbar(true);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onBlur: function onBlur() {
(0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
},
areAnyNewToolbarFlagsEnabled: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
});
}
}]
});
}
}
};
var mediaTypes = ['image', 'video', 'audio', 'doc', 'archive', 'unknown'];
var getMediaType = function getMediaType(selectedNodeTypeSingle) {
return mediaTypes.find(function (type) {
return selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(type);
});
};
var getLinkingDropdownOptions = exports.getLinkingDropdownOptions = function getLinkingDropdownOptions(editorState, intl, mediaLinkingState, isInlineNode, allowLinking, isViewOnly) {
if (isViewOnly || !allowLinking || !shouldShowMediaLinkToolbar(editorState)) {
return [];
}
var mediaType;
var mediaNode = isInlineNode ? (0, _currentMediaNode.currentMediaInlineNode)(editorState) : (0, _currentMediaNode.currentMediaNode)(editorState);
if (mediaNode) {
var selectedNodeTypeSingle = mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs.__fileMimeType;
mediaType = getMediaType(selectedNodeTypeSingle);
}
// Only show link dropdown option for images and external media (shown as images)
if (mediaType !== 'image' && (mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs.type) !== 'external') {
return [];
}
if (mediaLinkingState && mediaLinkingState.editable) {
var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
return [{
title: title,
onClick: function onClick(editorState, dispatch, editorView) {
if (editorView) {
var state = editorView.state,
_dispatch = editorView.dispatch;
(0, _linking.showLinkingToolbar)(state, _dispatch);
}
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_link.default, {
label: ""
})
}];
} else {
var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
return [{
title: _title,
onClick: function onClick(editorState, dispatch, editorView) {
if (editorView) {
var state = editorView.state,
_dispatch2 = editorView.dispatch;
(0, _linking.showLinkingToolbar)(state, _dispatch2);
}
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_link.default, {
label: ""
})
}];
}
};
var getOpenLinkToolbarButtonOption = exports.getOpenLinkToolbarButtonOption = function getOpenLinkToolbarButtonOption(intl, mediaLinkingState, pluginInjectionApi) {
var isValidUrl = (0, _adfSchema.isSafeUrl)(mediaLinkingState.link);
var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
return {
id: 'editor.media.open-link',
testId: 'open-link-toolbar-button',
type: 'button',
icon: _linkExternal.default,
title: linkTitle,
target: '_blank',
href: isValidUrl ? mediaLinkingState.link : undefined,
disabled: !isValidUrl,
onClick: function onClick(state, dispatch, editorView) {
if (editorView) {
var _pluginInjectionApi$a4;
var tr = editorView.state.tr,
_dispatch3 = editorView.dispatch;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.TRACK,
action: _analytics.ACTION.VISITED,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
})(tr);
_dispatch3(tr);
}
return true;
},
supportsViewMode: true
};
};