@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
326 lines • 15.6 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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 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 as _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 var quickInsertPlugin = function quickInsertPlugin(_ref) {
var options = _ref.config,
api = _ref.api;
var refs = {};
var onInsert = function onInsert(item) {
var _options$onInsert;
options === null || options === void 0 || (_options$onInsert = options.onInsert) === null || _options$onInsert === void 0 || _options$onInsert.call(options, item);
};
var typeAhead = {
id: TypeAheadAvailableNodes.QUICK_INSERT,
trigger: '/',
headless: options === null || options === void 0 ? void 0 : options.headless,
getItems: function getItems(_ref2) {
var query = _ref2.query,
editorState = _ref2.editorState;
var 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: function selectItem(state, item, insert) {
var quickInsertItem = item;
var result = quickInsertItem.action(insert, state);
if (result) {
onInsert(quickInsertItem);
}
return result;
},
getMoreOptionsButtonConfig: options !== null && options !== void 0 && options.enableElementBrowser ? function (_ref3) {
var formatMessage = _ref3.formatMessage;
return {
title: formatMessage(messages.viewMore),
ariaLabel: formatMessage(messages.viewMoreAriaLabel),
onClick: _openElementBrowserModal,
iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
label: ""
})
};
} : undefined
};
var intl;
return {
name: 'quickInsert',
pmPlugins: function pmPlugins(defaultItems) {
return [{
name: 'quickInsert',
// It's important that this plugin is above TypeAheadPlugin
plugin: function plugin(_ref4) {
var providerFactory = _ref4.providerFactory,
getIntl = _ref4.getIntl,
dispatch = _ref4.dispatch;
return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
}
}].concat(_toConsumableArray(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
name: 'quickInsertOpenExperience',
plugin: function plugin() {
return getQuickInsertOpenExperiencePlugin({
refs: refs,
dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
var _api$analytics;
return api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent(payload);
}
});
}
}] : []));
},
pluginsOptions: {
typeAhead: typeAhead
},
contentComponent: function contentComponent(_ref5) {
var editorView = _ref5.editorView,
popupsMountPoint = _ref5.popupsMountPoint,
wrapperElement = _ref5.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: function getSharedState(editorState) {
if (!editorState) {
return null;
}
var 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: function openTypeAhead(inputMethod, removePrefixTriggerOnCancel) {
var _api$typeAhead;
return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
triggerHandler: typeAhead,
inputMethod: inputMethod,
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
}));
},
getSuggestions: function getSuggestions(searchOptions) {
var _api$quickInsert$shar, _api$quickInsert;
var _ref6 = (_api$quickInsert$shar = api === null || api === 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 : {},
lazyDefaultItems = _ref6.lazyDefaultItems,
providedItems = _ref6.providedItems;
if (options !== null && options !== void 0 && options.prioritySortingFn) {
searchOptions = _objectSpread(_objectSpread({}, searchOptions), {}, {
prioritySortingFn: options.prioritySortingFn
});
}
return getQuickInsertSuggestions(searchOptions, lazyDefaultItems, providedItems);
}
},
commands: {
openElementBrowserModal: function openElementBrowserModal(_ref7) {
var tr = _ref7.tr;
if (fg('platform_editor_ease_of_use_metrics')) {
var _api$metrics;
api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 || _api$metrics.commands.handleIntentToStartEdit({
shouldStartTimer: false,
shouldPersistActiveSession: true
})({
tr: tr
});
}
return _openElementBrowserModal({
tr: tr
});
},
addQuickInsertItem: function addQuickInsertItem(item) {
return function (_ref8) {
var _api$quickInsert$shar2, _api$quickInsert2;
var tr = _ref8.tr;
var _ref9 = (_api$quickInsert$shar2 = api === null || api === 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 : {},
lazyDefaultItems = _ref9.lazyDefaultItems;
var defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
var memoisedNewItems = memoProcessQuickInsertItems([item], intl);
return tr.setMeta(pluginKey, {
lazyDefaultItems: function lazyDefaultItems() {
return [].concat(_toConsumableArray(defaultItems), _toConsumableArray(memoisedNewItems));
}
});
};
},
updateQuickInsertItem: function updateQuickInsertItem(key, item) {
return function (_ref0) {
var _api$quickInsert$shar3, _api$quickInsert3;
var tr = _ref0.tr;
var _ref1 = (_api$quickInsert$shar3 = api === null || api === 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 : {},
providedItems = _ref1.providedItems,
lazyDefaultItems = _ref1.lazyDefaultItems;
var defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
var newItem = memoProcessQuickInsertItems([item], intl);
var replaceByKey = function replaceByKey(items) {
return items.flatMap(function (i) {
return i.key === key ? newItem : i;
});
};
var meta = {};
if (defaultItems.some(function (i) {
return i.key === key;
})) {
meta.lazyDefaultItems = function () {
return replaceByKey(defaultItems);
};
}
if (providedItems !== null && providedItems !== void 0 && providedItems.some(function (i) {
return i.key === key;
})) {
meta.providedItems = replaceByKey(providedItems);
}
return Object.keys(meta).length > 0 ? tr.setMeta(pluginKey, meta) : tr;
};
},
removeQuickInsertItem: function removeQuickInsertItem(key) {
return function (_ref10) {
var _api$quickInsert$shar4, _api$quickInsert4, _providedItems$filter;
var tr = _ref10.tr;
var _ref11 = (_api$quickInsert$shar4 = api === null || api === 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 : {},
providedItems = _ref11.providedItems,
lazyDefaultItems = _ref11.lazyDefaultItems;
var defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
return tr.setMeta(pluginKey, {
providedItems: (_providedItems$filter = providedItems === null || providedItems === void 0 ? void 0 : providedItems.filter(function (item) {
return item.key !== key;
})) !== null && _providedItems$filter !== void 0 ? _providedItems$filter : [],
lazyDefaultItems: function lazyDefaultItems() {
return defaultItems.filter(function (item) {
return item.key !== key;
});
}
});
};
}
},
usePluginHook: function usePluginHook() {
intl = useIntl();
}
};
};
var setProviderState = function setProviderState(providerState) {
return function (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: function init() {
return {
isElementBrowserModalOpen: false,
emptyStateHandler: 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: function lazyDefaultItems() {
return memoProcessQuickInsertItems(defaultItems || [], getIntl());
}
};
},
apply: function apply(tr, pluginState) {
var meta = tr.getMeta(pluginKey);
if (meta) {
var keys = Object.keys(meta);
var changed = keys.some(function (key) {
return pluginState[key] !== meta[key];
});
if (changed) {
var newState = _objectSpread(_objectSpread({}, pluginState), meta);
dispatch(pluginKey, newState);
return newState;
}
}
return pluginState;
}
},
view: function view(editorView) {
var providerHandler = /*#__PURE__*/function () {
var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, providerPromise) {
var provider, providedItems;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!providerPromise) {
_context.next = 14;
break;
}
_context.prev = 1;
_context.next = 4;
return providerPromise;
case 4:
provider = _context.sent;
_context.next = 7;
return provider.getItems();
case 7:
providedItems = _context.sent;
setProviderState({
provider: provider,
providedItems: providedItems
})(editorView.state, editorView.dispatch);
_context.next = 14;
break;
case 11:
_context.prev = 11;
_context.t0 = _context["catch"](1);
// eslint-disable-next-line no-console
console.error('Error getting items from quick insert provider', _context.t0);
case 14:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 11]]);
}));
return function providerHandler(_x, _x2) {
return _ref12.apply(this, arguments);
};
}();
providerFactory.subscribe('quickInsertProvider', providerHandler);
return {
destroy: function destroy() {
providerFactory.unsubscribe('quickInsertProvider', providerHandler);
}
};
}
});
}