@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
280 lines • 12 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { isSSR } from '@atlaskit/editor-common/core-utils';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { memoProcessQuickInsertItems } from '@atlaskit/editor-common/quick-insert';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { createInsertItem, openElementBrowserModal } from './pm-plugins/commands';
import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
import { pluginKey } from './pm-plugins/plugin-key';
import ModalElementBrowser from './ui/ModalElementBrowser';
import { getQuickInsertSuggestions } from './ui/search';
export const quickInsertPlugin = ({
config: options,
api
}) => {
const refs = {};
const onInsert = item => {
var _options$onInsert;
options === null || options === void 0 ? void 0 : (_options$onInsert = options.onInsert) === null || _options$onInsert === void 0 ? void 0 : _options$onInsert.call(options, item);
};
const typeAhead = {
id: TypeAheadAvailableNodes.QUICK_INSERT,
trigger: '/',
headless: options === null || options === void 0 ? void 0 : options.headless,
getItems({
query,
editorState
}) {
const quickInsertState = pluginKey.getState(editorState);
return Promise.resolve(getQuickInsertSuggestions({
query: query,
disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems,
prioritySortingFn: options === null || options === void 0 ? void 0 : options.prioritySortingFn
}, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
},
selectItem: (state, item, insert) => {
const quickInsertItem = item;
const result = quickInsertItem.action(insert, state);
if (result) {
onInsert(quickInsertItem);
}
return result;
},
getMoreOptionsButtonConfig: options !== null && options !== void 0 && options.enableElementBrowser ? ({
formatMessage
}) => {
return {
title: formatMessage(messages.viewMore),
ariaLabel: formatMessage(messages.viewMoreAriaLabel),
onClick: openElementBrowserModal,
iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
label: ""
})
};
} : undefined
};
let intl;
return {
name: 'quickInsert',
pmPlugins(defaultItems) {
return [{
name: 'quickInsert',
// It's important that this plugin is above TypeAheadPlugin
plugin: ({
providerFactory,
getIntl,
dispatch
}) => quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
}, ...(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
name: 'quickInsertOpenExperience',
plugin: () => getQuickInsertOpenExperiencePlugin({
refs,
dispatchAnalyticsEvent: payload => {
var _api$analytics, _api$analytics$action;
return api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent(payload);
}
})
}] : [])];
},
pluginsOptions: {
typeAhead
},
contentComponent({
editorView,
popupsMountPoint,
wrapperElement
}) {
refs.popupsMountPoint = popupsMountPoint || undefined;
refs.wrapperElement = wrapperElement || undefined;
if (!editorView || expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && isSSR()) {
return null;
}
if (options !== null && options !== void 0 && options.enableElementBrowser) {
return /*#__PURE__*/React.createElement(ModalElementBrowser, {
editorView: editorView,
helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
pluginInjectionAPI: api
});
}
return null;
},
getSharedState(editorState) {
if (!editorState) {
return null;
}
const quickInsertState = pluginKey.getState(editorState);
if (!quickInsertState) {
return null;
}
return {
typeAheadHandler: typeAhead,
lazyDefaultItems: quickInsertState.lazyDefaultItems,
emptyStateHandler: quickInsertState.emptyStateHandler,
providedItems: quickInsertState.providedItems,
isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
};
},
actions: {
insertItem: createInsertItem(onInsert),
openTypeAhead(inputMethod, removePrefixTriggerOnCancel) {
var _api$typeAhead;
return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
triggerHandler: typeAhead,
inputMethod,
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
}));
},
getSuggestions: searchOptions => {
var _api$quickInsert$shar, _api$quickInsert;
const {
lazyDefaultItems,
providedItems
} = (_api$quickInsert$shar = api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {};
if (options !== null && options !== void 0 && options.prioritySortingFn) {
searchOptions = {
...searchOptions,
prioritySortingFn: options.prioritySortingFn
};
}
return getQuickInsertSuggestions(searchOptions, lazyDefaultItems, providedItems);
}
},
commands: {
openElementBrowserModal: ({
tr
}) => {
if (fg('platform_editor_ease_of_use_metrics')) {
var _api$metrics;
api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
shouldStartTimer: false,
shouldPersistActiveSession: true
})({
tr
});
}
return openElementBrowserModal({
tr
});
},
addQuickInsertItem: item => ({
tr
}) => {
var _api$quickInsert$shar2, _api$quickInsert2;
const {
lazyDefaultItems
} = (_api$quickInsert$shar2 = api === null || api === void 0 ? void 0 : (_api$quickInsert2 = api.quickInsert) === null || _api$quickInsert2 === void 0 ? void 0 : _api$quickInsert2.sharedState.currentState()) !== null && _api$quickInsert$shar2 !== void 0 ? _api$quickInsert$shar2 : {};
const defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
const memoisedNewItems = memoProcessQuickInsertItems([item], intl);
return tr.setMeta(pluginKey, {
lazyDefaultItems: () => [...defaultItems, ...memoisedNewItems]
});
},
updateQuickInsertItem: (key, item) => ({
tr
}) => {
var _api$quickInsert$shar3, _api$quickInsert3;
const {
providedItems,
lazyDefaultItems
} = (_api$quickInsert$shar3 = api === null || api === void 0 ? void 0 : (_api$quickInsert3 = api.quickInsert) === null || _api$quickInsert3 === void 0 ? void 0 : _api$quickInsert3.sharedState.currentState()) !== null && _api$quickInsert$shar3 !== void 0 ? _api$quickInsert$shar3 : {};
const defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
const newItem = memoProcessQuickInsertItems([item], intl);
const replaceByKey = items => items.flatMap(i => i.key === key ? newItem : i);
const meta = {};
if (defaultItems.some(i => i.key === key)) {
meta.lazyDefaultItems = () => replaceByKey(defaultItems);
}
if (providedItems !== null && providedItems !== void 0 && providedItems.some(i => i.key === key)) {
meta.providedItems = replaceByKey(providedItems);
}
return Object.keys(meta).length > 0 ? tr.setMeta(pluginKey, meta) : tr;
},
removeQuickInsertItem: key => ({
tr
}) => {
var _api$quickInsert$shar4, _api$quickInsert4, _providedItems$filter;
const {
providedItems,
lazyDefaultItems
} = (_api$quickInsert$shar4 = api === null || api === void 0 ? void 0 : (_api$quickInsert4 = api.quickInsert) === null || _api$quickInsert4 === void 0 ? void 0 : _api$quickInsert4.sharedState.currentState()) !== null && _api$quickInsert$shar4 !== void 0 ? _api$quickInsert$shar4 : {};
const defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
return tr.setMeta(pluginKey, {
providedItems: (_providedItems$filter = providedItems === null || providedItems === void 0 ? void 0 : providedItems.filter(item => item.key !== key)) !== null && _providedItems$filter !== void 0 ? _providedItems$filter : [],
lazyDefaultItems: () => defaultItems.filter(item => item.key !== key)
});
}
},
usePluginHook: () => {
intl = useIntl();
}
};
};
const setProviderState = providerState => (state, dispatch) => {
if (dispatch) {
dispatch(state.tr.setMeta(pluginKey, providerState));
}
return true;
};
function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
return new SafePlugin({
key: pluginKey,
state: {
init() {
return {
isElementBrowserModalOpen: false,
emptyStateHandler,
// lazy so it doesn't run on editor initialization
// memo here to avoid using a singleton cache, avoids editor
// getting confused when two editors exist within the same page.
lazyDefaultItems: () => memoProcessQuickInsertItems(defaultItems || [], getIntl())
};
},
apply(tr, pluginState) {
const meta = tr.getMeta(pluginKey);
if (meta) {
const keys = Object.keys(meta);
const changed = keys.some(key => {
return pluginState[key] !== meta[key];
});
if (changed) {
const newState = {
...pluginState,
...meta
};
dispatch(pluginKey, newState);
return newState;
}
}
return pluginState;
}
},
view(editorView) {
const providerHandler = async (_name, providerPromise) => {
if (providerPromise) {
try {
const provider = await providerPromise;
const providedItems = await provider.getItems();
setProviderState({
provider,
providedItems
})(editorView.state, editorView.dispatch);
} catch (e) {
// eslint-disable-next-line no-console
console.error('Error getting items from quick insert provider', e);
}
}
};
providerFactory.subscribe('quickInsertProvider', providerHandler);
return {
destroy() {
providerFactory.unsubscribe('quickInsertProvider', providerHandler);
}
};
}
});
}