@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
333 lines (332 loc) • 16.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.quickInsertPlugin = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _coreUtils = require("@atlaskit/editor-common/core-utils");
var _messages = require("@atlaskit/editor-common/messages");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _commands = require("./pm-plugins/commands");
var _quickInsertOpenExperience = require("./pm-plugins/experiences/quick-insert-open-experience");
var _pluginKey = require("./pm-plugins/plugin-key");
var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
var _search = require("./ui/search");
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) { (0, _defineProperty2.default)(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; }
var quickInsertPlugin = exports.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: _typeAhead.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.pluginKey.getState(editorState);
return Promise.resolve((0, _search.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.toolbarInsertBlockMessages.viewMore),
ariaLabel: formatMessage(_messages.toolbarInsertBlockMessages.viewMoreAriaLabel),
onClick: _commands.openElementBrowserModal,
iconBefore: /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
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((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_experience_tracking', 'isEnabled', true) ? [{
name: 'quickInsertOpenExperience',
plugin: function plugin() {
return (0, _quickInsertOpenExperience.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 || (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && (0, _coreUtils.isSSR)()) {
return null;
}
if (options !== null && options !== void 0 && options.enableElementBrowser) {
return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
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.pluginKey.getState(editorState);
if (!quickInsertState) {
return null;
}
return {
typeAheadHandler: typeAhead,
lazyDefaultItems: quickInsertState.lazyDefaultItems,
emptyStateHandler: quickInsertState.emptyStateHandler,
providedItems: quickInsertState.providedItems,
isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
};
},
actions: {
insertItem: (0, _commands.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 (0, _search.getQuickInsertSuggestions)(searchOptions, lazyDefaultItems, providedItems);
}
},
commands: {
openElementBrowserModal: function openElementBrowserModal(_ref7) {
var tr = _ref7.tr;
if ((0, _platformFeatureFlags.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 (0, _commands.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 = (0, _quickInsert.memoProcessQuickInsertItems)([item], intl);
return tr.setMeta(_pluginKey.pluginKey, {
lazyDefaultItems: function lazyDefaultItems() {
return [].concat((0, _toConsumableArray2.default)(defaultItems), (0, _toConsumableArray2.default)(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 = (0, _quickInsert.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.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.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 = (0, _reactIntl.useIntl)();
}
};
};
var setProviderState = function setProviderState(providerState) {
return function (state, dispatch) {
if (dispatch) {
dispatch(state.tr.setMeta(_pluginKey.pluginKey, providerState));
}
return true;
};
};
function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
return new _safePlugin.SafePlugin({
key: _pluginKey.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 (0, _quickInsert.memoProcessQuickInsertItems)(defaultItems || [], getIntl());
}
};
},
apply: function apply(tr, pluginState) {
var meta = tr.getMeta(_pluginKey.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.pluginKey, newState);
return newState;
}
}
return pluginState;
}
},
view: function view(editorView) {
var providerHandler = /*#__PURE__*/function () {
var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
var provider, providedItems;
return _regenerator.default.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);
}
};
}
});
}