@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
98 lines • 4.31 kB
JavaScript
import React from 'react';
import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
import { hideLinkingToolbar, setUrlToMedia, unlink } from '../commands/linking';
import { getMediaLinkingState } from '../pm-plugins/linking';
import MediaLinkingToolbar from '../ui/MediaLinkingToolbar';
const FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
export function shouldShowMediaLinkToolbar(editorState) {
const mediaLinkingState = getMediaLinkingState(editorState);
if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
return false;
}
const {
nodes: {
media
},
marks: {
link
}
} = editorState.schema;
const node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
if (!node || node.type !== media) {
return false;
}
const {
parent
} = editorState.doc.resolve(mediaLinkingState.mediaPos);
return parent && parent.type.allowsMarkType(link);
}
export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory) => {
const {
link,
visible,
editable: editing,
mediaPos
} = mediaLinkingState;
if (visible && mediaPos !== null) {
const node = state.doc.nodeAt(mediaPos);
if (node) {
return {
...toolbarBaseConfig,
height: RECENT_SEARCH_HEIGHT_IN_PX,
width: RECENT_SEARCH_WIDTH_IN_PX,
forcePlacement: true,
items: [{
type: 'custom',
fallback: [],
disableArrowNavigation: true,
render: (view, idx) => {
if (!view || !providerFactory) {
return null;
}
return /*#__PURE__*/React.createElement(MediaLinkingToolbar, {
key: idx,
displayUrl: link,
providerFactory: providerFactory,
intl: intl,
editing: editing,
onUnlink: () => {
var _pluginInjectionApi$a;
return unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
},
onBack: (href, meta) => {
if (href.trim() && meta.inputMethod) {
var _pluginInjectionApi$a2;
setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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);
},
onCancel: () => {
var _pluginInjectionApi$f;
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.
*/
const {
state: {
tr
},
dispatch
} = view;
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
dispatch(tr);
},
onSubmit: (href, meta) => {
var _pluginInjectionApi$a3;
setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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);
},
onBlur: () => {
hideLinkingToolbar(view.state, view.dispatch, view);
}
});
}
}]
};
}
}
};