@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
116 lines (115 loc) • 7.34 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, { 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';
var Modal = function Modal(_ref) {
var quickInsertState = _ref.quickInsertState,
isOffline = _ref.isOffline,
editorView = _ref.editorView,
helpUrl = _ref.helpUrl,
insertItem = _ref.insertItem,
getSuggestions = _ref.getSuggestions,
api = _ref.api;
var getItems = useCallback(function (query, category) {
var _getSuggestions$map, _getSuggestions;
return (_getSuggestions$map = getSuggestions === null || getSuggestions === void 0 || (_getSuggestions = getSuggestions({
query: query,
category: category
})) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.map(function (item) {
return isOffline && item.isDisabledOffline ? _objectSpread(_objectSpread({}, 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]);
var focusInEditor = useCallback(function () {
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
var insertableItem = React.useRef(null);
var onInsertItem = useCallback(function (item) {
closeElementBrowserModal()(editorView.state, editorView.dispatch);
if (fg('platform_editor_ease_of_use_metrics')) {
var _api$metrics;
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
}
insertableItem.current = item;
}, [editorView, api]);
var onClose = useCallback(function () {
closeElementBrowserModal()(editorView.state, editorView.dispatch);
if (fg('platform_editor_ease_of_use_metrics')) {
var _api$metrics2;
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
}
focusInEditor();
}, [editorView, focusInEditor, api]);
var onCloseComplete = useCallback(function () {
if (!insertableItem.current) {
focusInEditor();
return;
}
var item = insertableItem.current;
insertableItem.current = null;
focusInEditor();
insertItem === null || insertItem === 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 (function (_ref2) {
var _pluginInjectionAPI$q, _pluginInjectionAPI$q2;
var editorView = _ref2.editorView,
helpUrl = _ref2.helpUrl,
pluginInjectionAPI = _ref2.pluginInjectionAPI;
var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionAPI, ['quickInsert', 'connectivity'], function (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
};
}),
lazyDefaultItems = _useSharedPluginState.lazyDefaultItems,
providedItems = _useSharedPluginState.providedItems,
isElementBrowserModalOpen = _useSharedPluginState.isElementBrowserModalOpen,
emptyStateHandler = _useSharedPluginState.emptyStateHandler,
mode = _useSharedPluginState.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: lazyDefaultItems,
providedItems: providedItems,
isElementBrowserModalOpen: isElementBrowserModalOpen,
emptyStateHandler: emptyStateHandler
},
editorView: editorView,
helpUrl: helpUrl,
isOffline: isOfflineMode(mode),
insertItem: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$q = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q === void 0 || (_pluginInjectionAPI$q = _pluginInjectionAPI$q.actions) === null || _pluginInjectionAPI$q === void 0 ? void 0 : _pluginInjectionAPI$q.insertItem,
getSuggestions: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$q2 = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q2 === void 0 || (_pluginInjectionAPI$q2 = _pluginInjectionAPI$q2.actions) === null || _pluginInjectionAPI$q2 === void 0 ? void 0 : _pluginInjectionAPI$q2.getSuggestions,
api: pluginInjectionAPI
});
});