@atlaskit/editor-plugin-media-insert
Version:
Media Insert plugin for @atlaskit/editor-core
347 lines (346 loc) • 14.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
import { Box, Focusable, Text } from '@atlaskit/primitives/compiled';
import Tabs, { TabList, useTab, useTabPanel } from '@atlaskit/tabs';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import { useFocusEditor } from './hooks/use-focus-editor';
import { useUnholyAutofocus } from './hooks/use-unholy-autofocus';
import { LocalMedia } from './LocalMedia';
import { MediaFromURL } from './MediaFromURL';
import { MediaInsertWrapper } from './MediaInsertWrapper';
const PopupWithListeners = withOuterListeners(Popup);
const MEDIA_INSERT_PICKER_ANALYTICS_SOURCE = 'MediaInsertPicker';
const EMPTY_REGISTERED_TABS = [];
const getMediaInsertPickerTabSource = selectedTab => `${MEDIA_INSERT_PICKER_ANALYTICS_SOURCE} - ${selectedTab}`;
const getNextTabIndexForKey = (currentTabIndex, tabCount, key) => {
if (key === 'Home') {
return 0;
}
if (key === 'End') {
return tabCount - 1;
}
if (key === 'ArrowRight') {
return currentTabIndex === tabCount - 1 ? 0 : currentTabIndex + 1;
}
if (key === 'ArrowLeft') {
return currentTabIndex === 0 ? tabCount - 1 : currentTabIndex - 1;
}
return undefined;
};
const getLinkTabIndex = (registeredTabCount, isOnlyExternalLinks) => registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
const TabWithAnalytics = ({
children,
onSelectTabForAnalytics,
selectedTabIndex,
tabCount
}) => {
const {
onClick,
id,
'aria-controls': ariaControls,
'aria-posinset': ariaPosinset,
'aria-selected': ariaSelected,
'aria-setsize': ariaSetsize,
onKeyDown,
role,
tabIndex
} = useTab();
const handleClick = React.useCallback(() => {
onSelectTabForAnalytics(selectedTabIndex);
onClick();
}, [onClick, onSelectTabForAnalytics, selectedTabIndex]);
const handleKeyDown = React.useCallback(event => {
const nextTabIndex = getNextTabIndexForKey(selectedTabIndex, tabCount, event.key);
if (nextTabIndex !== undefined) {
onSelectTabForAnalytics(nextTabIndex);
}
onKeyDown(event);
}, [onKeyDown, onSelectTabForAnalytics, selectedTabIndex, tabCount]);
return /*#__PURE__*/React.createElement(Focusable, {
as: "div",
isInset: true,
onClick: handleClick,
id: id,
"aria-controls": ariaControls,
"aria-posinset": ariaPosinset,
"aria-selected": ariaSelected,
"aria-setsize": ariaSetsize,
onKeyDown: handleKeyDown,
role: role,
tabIndex: tabIndex
}, /*#__PURE__*/React.createElement(Text, {
weight: "medium",
color: "inherit",
maxLines: 1
}, children));
};
/**
* A custom TabPanel that is non-focusable.
*/
const CustomTabPanel = ({
children,
disablePaddingBlockEnd = false
}) => {
const tabPanelAttributes = useTabPanel();
return /*#__PURE__*/React.createElement(Box, _extends({
paddingBlockEnd: disablePaddingBlockEnd ? 'space.0' : 'space.150'
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, tabPanelAttributes, {
tabIndex: -1
}), children);
};
export const MediaInsertPicker = ({
api,
editorView,
dispatchAnalyticsEvent,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
closeMediaInsertPicker,
insertMediaSingle,
insertExternalMediaSingle,
insertFile,
isOnlyExternalLinks = false,
customizedUrlValidation,
customizedHelperMessage
}) => {
var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$acti2, _api$mediaInsert$acti3;
// Tabs registered by other plugins via `api.mediaInsert.actions.registerInsertTab(...)`.
// Read once per render; the registry is mutated only at plugin setup time so this is stable
// for the lifetime of an editor instance.
const registeredTabs = (_api$mediaInsert$acti = api === null || api === void 0 ? void 0 : (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 ? void 0 : (_api$mediaInsert$acti2 = _api$mediaInsert.actions) === null || _api$mediaInsert$acti2 === void 0 ? void 0 : (_api$mediaInsert$acti3 = _api$mediaInsert$acti2.getInsertTabs) === null || _api$mediaInsert$acti3 === void 0 ? void 0 : _api$mediaInsert$acti3.call(_api$mediaInsert$acti2)) !== null && _api$mediaInsert$acti !== void 0 ? _api$mediaInsert$acti : EMPTY_REGISTERED_TABS;
const {
mediaProvider,
isOpen,
mountInfo
} = useSharedPluginStateWithSelector(api, ['media', 'mediaInsert'], states => {
var _states$mediaState, _states$mediaInsertSt, _states$mediaInsertSt2;
return {
mediaProvider: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.mediaProvider,
isOpen: (_states$mediaInsertSt = states.mediaInsertState) === null || _states$mediaInsertSt === void 0 ? void 0 : _states$mediaInsertSt.isOpen,
mountInfo: (_states$mediaInsertSt2 = states.mediaInsertState) === null || _states$mediaInsertSt2 === void 0 ? void 0 : _states$mediaInsertSt2.mountInfo
};
});
let targetRef;
let mountPoint;
if (mountInfo) {
targetRef = mountInfo.ref;
mountPoint = mountInfo.mountPoint;
} else {
var _api$analytics;
// If targetRef is undefined, target the selection in the editor
targetRef = getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_MEDIA, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
mountPoint = popupsMountPoint;
}
const intl = useIntl();
const focusEditor = useFocusEditor({
editorView
});
const {
autofocusRef,
onPositionCalculated
} = useUnholyAutofocus();
const tabCount = registeredTabs.length + (isOnlyExternalLinks ? 1 : 2);
const linkTabIndex = getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks);
const getTabAnalyticsMetadata = React.useCallback(selectedTabIndex => {
const registeredTab = registeredTabs[selectedTabIndex];
if (registeredTab) {
return {
selectedTab: registeredTab.key,
selectedTabIndex
};
}
const uploadTabIndex = registeredTabs.length;
if (!isOnlyExternalLinks && selectedTabIndex === uploadTabIndex) {
return {
selectedTab: MEDIA_INSERT_TAB.UPLOAD,
selectedTabIndex
};
}
if (selectedTabIndex === linkTabIndex) {
return {
selectedTab: MEDIA_INSERT_TAB.LINK,
selectedTabIndex
};
}
return {
selectedTab: 'unknown',
selectedTabIndex
};
}, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
const selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
const tabsAnalyticsContext = React.useMemo(() => ({
get source() {
return getMediaInsertPickerTabSource(selectedTabAnalyticsMetadataRef.current.selectedTab);
}
}), []);
const setSelectedTabAnalyticsMetadata = React.useCallback(selectedTabIndex => {
selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
}, [getTabAnalyticsMetadata]);
const hasDispatchedInitialTabViewedEventRef = React.useRef(false);
// Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
// initially opened tab needs its viewed analytics event dispatched from an
// effect. The ref keeps this to once per picker open without setting state.
React.useEffect(() => {
if (!isOpen) {
hasDispatchedInitialTabViewedEventRef.current = false;
return;
}
if (!mediaProvider || !dispatchAnalyticsEvent || hasDispatchedInitialTabViewedEventRef.current) {
return;
}
const selectedTabMetadata = getTabAnalyticsMetadata(0);
selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
const payload = {
action: ACTION.VIEWED,
actionSubject: ACTION_SUBJECT.PICKER,
actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
eventType: EVENT_TYPE.UI,
attributes: {
selectedTab: selectedTabMetadata.selectedTab,
selectedTabIndex: selectedTabMetadata.selectedTabIndex
}
};
dispatchAnalyticsEvent(payload);
hasDispatchedInitialTabViewedEventRef.current = true;
}, [dispatchAnalyticsEvent, getTabAnalyticsMetadata, isOpen, mediaProvider]);
const handleTabChange = React.useCallback((selectedTabIndex, analyticsEvent) => {
const selectedTabMetadata = getTabAnalyticsMetadata(selectedTabIndex);
selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
analyticsEvent.update(payload => ({
...payload,
attributes: {
...payload.attributes,
selectedTab: selectedTabMetadata.selectedTab,
selectedTabIndex
}
})).fire();
if (dispatchAnalyticsEvent) {
const payload = {
action: ACTION.VIEWED,
actionSubject: ACTION_SUBJECT.PICKER,
actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
eventType: EVENT_TYPE.UI,
attributes: {
selectedTab: selectedTabMetadata.selectedTab,
selectedTabIndex
}
};
dispatchAnalyticsEvent(payload);
}
}, [dispatchAnalyticsEvent, getTabAnalyticsMetadata]);
if (!isOpen || !mediaProvider) {
return null;
}
const handleClose = exitMethod => event => {
// Same as AIImageGenerationPopup: react-select can detach the option
// before `click` fires, so withOuterListeners treats it as outside.
if (exitMethod === INPUT_METHOD.MOUSE && event.target instanceof Node && !event.target.isConnected) {
return;
}
event.preventDefault();
if (dispatchAnalyticsEvent) {
const payload = {
action: ACTION.CLOSED,
actionSubject: ACTION_SUBJECT.PICKER,
actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
eventType: EVENT_TYPE.UI,
attributes: {
exitMethod
}
};
dispatchAnalyticsEvent(payload);
}
closeMediaInsertPicker();
focusEditor();
};
const fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
return /*#__PURE__*/React.createElement(PopupWithListeners, {
ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [0, 12],
target: targetRef,
zIndex: akEditorFloatingDialogZIndex,
fitHeight: 390,
fitWidth: 340,
mountTo: mountPoint,
boundariesElement: popupsBoundariesElement,
handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
scrollableElement: popupsScrollableElement,
preventOverflow: true,
onPositionCalculated: onPositionCalculated,
focusTrap: true
}, /*#__PURE__*/React.createElement(PlainOutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(MediaInsertWrapper, {
ref: setOutsideClickTargetRef
}, /*#__PURE__*/React.createElement(Tabs, {
id: "media-insert-tab-navigation",
analyticsContext: tabsAnalyticsContext,
onChange: handleTabChange
}, /*#__PURE__*/React.createElement(Box, {
paddingBlockEnd: "space.150"
}, /*#__PURE__*/React.createElement(TabList, null, registeredTabs.map((tab, index) => /*#__PURE__*/React.createElement(TabWithAnalytics, {
key: tab.key,
onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
selectedTabIndex: index,
tabCount: tabCount
}, tab.label)), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
selectedTabIndex: registeredTabs.length,
tabCount: tabCount
}, fileTabTitle), /*#__PURE__*/React.createElement(TabWithAnalytics, {
onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
selectedTabIndex: linkTabIndex,
tabCount: tabCount
}, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), registeredTabs.map(({
key,
component: TabComponent
}) => /*#__PURE__*/React.createElement(CustomTabPanel, {
key: key,
disablePaddingBlockEnd: true
}, /*#__PURE__*/React.createElement(TabComponent
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
closeMediaInsertPicker: () => {
closeMediaInsertPicker();
focusEditor();
},
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
insertMediaSingle: insertMediaSingle,
mediaProvider: mediaProvider
}))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
ref: autofocusRef,
mediaProvider: mediaProvider
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeMediaInsertPicker: () => {
closeMediaInsertPicker();
focusEditor();
},
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
insertFile: insertFile
})), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
mediaProvider: mediaProvider,
dispatchAnalyticsEvent: dispatchAnalyticsEvent
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeMediaInsertPicker: () => {
closeMediaInsertPicker();
focusEditor();
},
insertMediaSingle: insertMediaSingle,
insertExternalMediaSingle: insertExternalMediaSingle,
isOnlyExternalLinks: isOnlyExternalLinks,
customizedUrlValidation: customizedUrlValidation,
customizedHelperMessage: customizedHelperMessage
}))))));
};