@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
207 lines (206 loc) • 11.6 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import { isSafeUrl } from '@atlaskit/adf-schema';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
import LinkIcon from '@atlaskit/icon/core/link';
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
import { hideLinkingToolbar, setUrlToMedia, showLinkingToolbar, unlink } from '../../pm-plugins/commands/linking';
import { getMediaLinkingState } from '../../pm-plugins/linking';
import { currentMediaInlineNode, currentMediaNode } from '../../pm-plugins/utils/current-media-node';
import MediaLinkingToolbar from '../../ui/MediaLinkingToolbar';
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"]';
export function shouldShowMediaLinkToolbar(editorState) {
var mediaLinkingState = 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);
}
export var 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: RECENT_SEARCH_HEIGHT_IN_PX,
width: 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 && 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.createElement(MediaLinkingToolbar, {
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;
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;
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);
}
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;
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 = 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;
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);
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() {
hideLinkingToolbar(view.state, view.dispatch, view);
},
areAnyNewToolbarFlagsEnabled: 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);
});
};
export var getLinkingDropdownOptions = function getLinkingDropdownOptions(editorState, intl, mediaLinkingState, isInlineNode, allowLinking, isViewOnly) {
if (isViewOnly || !allowLinking || !shouldShowMediaLinkToolbar(editorState)) {
return [];
}
var mediaType;
var mediaNode = isInlineNode ? currentMediaInlineNode(editorState) : 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(linkToolbarMessages.editLink);
return [{
title: title,
onClick: function onClick(editorState, dispatch, editorView) {
if (editorView) {
var state = editorView.state,
_dispatch = editorView.dispatch;
showLinkingToolbar(state, _dispatch);
}
return true;
},
icon: /*#__PURE__*/React.createElement(LinkIcon, {
label: ""
})
}];
} else {
var _title = intl.formatMessage(linkToolbarMessages.addLink);
return [{
title: _title,
onClick: function onClick(editorState, dispatch, editorView) {
if (editorView) {
var state = editorView.state,
_dispatch2 = editorView.dispatch;
showLinkingToolbar(state, _dispatch2);
}
return true;
},
icon: /*#__PURE__*/React.createElement(LinkIcon, {
label: ""
})
}];
}
};
export var getOpenLinkToolbarButtonOption = function getOpenLinkToolbarButtonOption(intl, mediaLinkingState, pluginInjectionApi) {
var isValidUrl = isSafeUrl(mediaLinkingState.link);
var linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
return {
id: 'editor.media.open-link',
testId: 'open-link-toolbar-button',
type: 'button',
icon: LinkExternalIcon,
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: EVENT_TYPE.TRACK,
action: ACTION.VISITED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: ACTION_SUBJECT_ID.LINK
})(tr);
_dispatch3(tr);
}
return true;
},
supportsViewMode: true
};
};