@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
117 lines (116 loc) • 6.08 kB
JavaScript
import React, { useCallback } from 'react';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { fg } from '@atlaskit/platform-feature-flags';
import { closeElementBrowserModal } from '../../pm-plugins/commands';
import ModalElementBrowser from './ModalElementBrowser';
const Modal = ({
quickInsertState,
isOffline,
editorView,
helpUrl,
insertItem,
getSuggestions,
api
}) => {
const getItems = useCallback((query, category) => {
var _getSuggestions$map, _getSuggestions;
return (_getSuggestions$map = getSuggestions === null || getSuggestions === void 0 ? void 0 : (_getSuggestions = getSuggestions({
query,
category
})) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.map(item => {
return isOffline && item.isDisabledOffline ? {
...item,
isDisabled: true
} : item;
})) !== null && _getSuggestions$map !== void 0 ? _getSuggestions$map : [];
},
// See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/157796/overview?commentId=8559952
// eslint-disable-next-line react-hooks/exhaustive-deps
[getSuggestions, quickInsertState.lazyDefaultItems, quickInsertState.providedItems, isOffline]);
const focusInEditor = useCallback(() => {
if (!editorView.hasFocus()) {
editorView.focus();
}
}, [editorView]);
// ED-19408 We not store the item ref in the state
// Instead of adding the item immediately on insert item
// We wait until modal close is complete, refocus the editor and then add the item
const insertableItem = React.useRef(null);
const onInsertItem = useCallback(item => {
closeElementBrowserModal()(editorView.state, editorView.dispatch);
if (fg('platform_editor_ease_of_use_metrics')) {
var _api$metrics;
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
}
insertableItem.current = item;
}, [editorView, api]);
const onClose = useCallback(() => {
closeElementBrowserModal()(editorView.state, editorView.dispatch);
if (fg('platform_editor_ease_of_use_metrics')) {
var _api$metrics2;
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
}
focusInEditor();
}, [editorView, focusInEditor, api]);
const onCloseComplete = useCallback(() => {
if (!insertableItem.current) {
focusInEditor();
return;
}
const item = insertableItem.current;
insertableItem.current = null;
focusInEditor();
insertItem === null || insertItem === void 0 ? void 0 : insertItem(item, INPUT_METHOD.ELEMENT_BROWSER)(editorView.state, editorView.dispatch);
}, [editorView, focusInEditor, insertItem]);
return /*#__PURE__*/React.createElement(ModalElementBrowser, {
getItems: getItems,
onInsertItem: onInsertItem,
helpUrl: helpUrl,
isOpen: quickInsertState.isElementBrowserModalOpen || false,
emptyStateHandler: quickInsertState.emptyStateHandler,
onClose: onClose,
onCloseComplete: onCloseComplete,
shouldReturnFocus: false
});
};
export default (({
editorView,
helpUrl,
pluginInjectionAPI
}) => {
var _pluginInjectionAPI$q, _pluginInjectionAPI$q2, _pluginInjectionAPI$q3, _pluginInjectionAPI$q4;
const {
lazyDefaultItems,
providedItems,
isElementBrowserModalOpen,
emptyStateHandler,
mode
} = useSharedPluginStateWithSelector(pluginInjectionAPI, ['quickInsert', 'connectivity'], state => {
var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$quickInsertSta4, _state$connectivitySt;
return {
lazyDefaultItems: (_state$quickInsertSta = state.quickInsertState) === null || _state$quickInsertSta === void 0 ? void 0 : _state$quickInsertSta.lazyDefaultItems,
providedItems: (_state$quickInsertSta2 = state.quickInsertState) === null || _state$quickInsertSta2 === void 0 ? void 0 : _state$quickInsertSta2.providedItems,
isElementBrowserModalOpen: (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.isElementBrowserModalOpen,
emptyStateHandler: (_state$quickInsertSta4 = state.quickInsertState) === null || _state$quickInsertSta4 === void 0 ? void 0 : _state$quickInsertSta4.emptyStateHandler,
mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode
};
});
return /*#__PURE__*/React.createElement(Modal
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
quickInsertState: {
lazyDefaultItems,
providedItems,
isElementBrowserModalOpen,
emptyStateHandler
},
editorView: editorView,
helpUrl: helpUrl,
isOffline: isOfflineMode(mode),
insertItem: pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? void 0 : (_pluginInjectionAPI$q = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q === void 0 ? void 0 : (_pluginInjectionAPI$q2 = _pluginInjectionAPI$q.actions) === null || _pluginInjectionAPI$q2 === void 0 ? void 0 : _pluginInjectionAPI$q2.insertItem,
getSuggestions: pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? void 0 : (_pluginInjectionAPI$q3 = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q3 === void 0 ? void 0 : (_pluginInjectionAPI$q4 = _pluginInjectionAPI$q3.actions) === null || _pluginInjectionAPI$q4 === void 0 ? void 0 : _pluginInjectionAPI$q4.getSuggestions,
api: pluginInjectionAPI
});
});