UNPKG

@atlaskit/editor-plugin-type-ahead

Version:

Type-ahead plugin for @atlaskit/editor-core

209 lines (207 loc) 9.66 kB
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 { InsertTypeAheadStages, InsertTypeAheadStep } from '@atlaskit/adf-schema/steps'; import { INPUT_METHOD } from '@atlaskit/editor-common/analytics'; import { DecorationSet } from '@atlaskit/editor-prosemirror/view'; import { insm } from '@atlaskit/insm'; import { ACTIONS } from './actions'; import { pluginKey } from './key'; import { isTypeAheadHandler } from './utils'; var shouldForceOpen = function shouldForceOpen(step) { if (!(step instanceof InsertTypeAheadStep)) { return false; } var isDeletionRawQueryOperation = step.isInsertionStep() && step.stage === InsertTypeAheadStages.DELETING_RAW_QUERY; var isUndoingInsertionItem = step.isUndoingStep() && step.stage === InsertTypeAheadStages.INSERTING_ITEM; return isDeletionRawQueryOperation || isUndoingInsertionItem; }; var shouldForceClose = function shouldForceClose(step) { if (!(step instanceof InsertTypeAheadStep)) { return false; } var isInsertingItem = step.isInsertionStep() && step.stage === InsertTypeAheadStages.INSERTING_ITEM; var isUndoingDeletionRawQuery = step.isUndoingStep() && step.stage === InsertTypeAheadStages.DELETING_RAW_QUERY; return isInsertingItem || isUndoingDeletionRawQuery; }; var applySectionTitleUpdates = function applySectionTitleUpdates(_ref) { var sections = _ref.sections, sectionTitleUpdates = _ref.sectionTitleUpdates; var updatedSections = sections.map(function (section) { var update = sectionTitleUpdates[section.id]; if (!update) { return section; } return _objectSpread(_objectSpread({}, section), update); }); return updatedSections; }; var createFindHandler = function createFindHandler(typeAheadHandlers) { return function (step) { if (!(step instanceof InsertTypeAheadStep)) { return null; } var handler = typeAheadHandlers.find(function (h) { return h.trigger === step.trigger; }); return handler || null; }; }; export var createReducer = function createReducer(_ref2) { var typeAheadHandlers = _ref2.typeAheadHandlers, removeDecorations = _ref2.removeDecorations, createDecorations = _ref2.createDecorations; var findHandler = createFindHandler(typeAheadHandlers); var openMenu = function openMenu(currentPluginState, _ref3) { var _insm$session; var tr = _ref3.tr, triggerHandler = _ref3.triggerHandler, inputMethod = _ref3.inputMethod, reopenQuery = _ref3.reopenQuery, selectedIndex = _ref3.selectedIndex, removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel; removeDecorations(currentPluginState.decorationSet); var _createDecorations = createDecorations(tr, { triggerHandler: triggerHandler, inputMethod: inputMethod, reopenQuery: reopenQuery }), decorationSet = _createDecorations.decorationSet, decorationElement = _createDecorations.decorationElement, stats = _createDecorations.stats; (_insm$session = insm.session) === null || _insm$session === void 0 || _insm$session.startFeature('typeaheadOpen'); return _objectSpread(_objectSpread({}, currentPluginState), {}, { stats: stats, decorationSet: decorationSet, triggerHandler: triggerHandler, decorationElement: decorationElement, inputMethod: inputMethod, selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1, items: [], sectionTitleUpdates: {}, sections: [], query: reopenQuery || '', removePrefixTriggerOnCancel: removePrefixTriggerOnCancel }); }; var closeMenu = function closeMenu(currentPluginState) { var _insm$session2; removeDecorations(currentPluginState.decorationSet); (_insm$session2 = insm.session) === null || _insm$session2 === void 0 || _insm$session2.endFeature('typeaheadOpen'); return _objectSpread(_objectSpread({}, currentPluginState), {}, { inputMethod: null, query: '', decorationElement: null, decorationSet: DecorationSet.empty, stats: null, triggerHandler: undefined, items: [], sections: [], sectionTitleUpdates: {}, removePrefixTriggerOnCancel: undefined }); }; return function (tr, currentPluginState, typeAheadStepOverride) { var meta = tr.getMeta(pluginKey) || {}; // This code below controls when we should force // the menu to open or close during undo/redo operations var overrideHandler = findHandler(typeAheadStepOverride); if (typeAheadStepOverride && overrideHandler && shouldForceOpen(typeAheadStepOverride)) { return openMenu(currentPluginState, { tr: tr, triggerHandler: overrideHandler, inputMethod: INPUT_METHOD.KEYBOARD, reopenQuery: typeAheadStepOverride.query, selectedIndex: typeAheadStepOverride.selectedIndex }); } else if (shouldForceClose(typeAheadStepOverride)) { return closeMenu(currentPluginState); } var _ref4 = meta || {}, action = _ref4.action, params = _ref4.params; var shouldOpenMenu = action === ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR && isTypeAheadHandler(params === null || params === void 0 ? void 0 : params.triggerHandler); var selectionChanged = tr.selectionSet && (tr.isGeneric || Boolean(tr.getMeta('pointer'))); var shouldCloseMenu = [ACTIONS.CLOSE_TYPE_AHEAD, ACTIONS.INSERT_ITEM].includes(action) || selectionChanged; var shouldUpdateQuery = action === ACTIONS.CHANGE_QUERY; var shouldUpdateListItems = action === ACTIONS.UPDATE_LIST_ITEMS; var shouldUpdateListError = action === ACTIONS.UPDATE_LIST_ERROR; var shouldUpdateSelectedIndex = action === ACTIONS.UPDATE_SELECTED_INDEX; var shouldUpdateSectionTitleState = action === ACTIONS.UPDATE_SECTION_TITLE; var shouldClearListError = action === ACTIONS.CLEAR_LIST_ERROR; if (shouldOpenMenu) { return openMenu(currentPluginState, { tr: tr, triggerHandler: params.triggerHandler, inputMethod: params.inputMethod, reopenQuery: params.query, removePrefixTriggerOnCancel: params.removePrefixTriggerOnCancel }); } else if (shouldCloseMenu) { return closeMenu(currentPluginState); } else if (shouldUpdateQuery) { return _objectSpread(_objectSpread({}, currentPluginState), {}, { query: params.query }); } else if (shouldUpdateListError) { var errorInfo = params.errorInfo; return _objectSpread(_objectSpread({}, currentPluginState), {}, { errorInfo: errorInfo, items: [], sections: [], selectedIndex: -1 }); } else if (shouldUpdateListItems) { var items = params.items, _params$sections = params.sections, sections = _params$sections === void 0 ? [] : _params$sections; var selectedIndex = currentPluginState.selectedIndex; return _objectSpread(_objectSpread({}, currentPluginState), {}, { items: items, sections: applySectionTitleUpdates({ sections: sections, sectionTitleUpdates: currentPluginState.sectionTitleUpdates }), selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, -1) }); } else if (shouldUpdateSectionTitleState) { var id = params.id, update = params.update; var sectionTitleUpdates = _objectSpread(_objectSpread({}, currentPluginState.sectionTitleUpdates), {}, _defineProperty({}, id, _objectSpread(_objectSpread({}, currentPluginState.sectionTitleUpdates[id]), update))); return _objectSpread(_objectSpread({}, currentPluginState), {}, { sectionTitleUpdates: sectionTitleUpdates, sections: applySectionTitleUpdates({ sections: currentPluginState.sections, sectionTitleUpdates: sectionTitleUpdates }) }); } else if (shouldUpdateSelectedIndex) { return _objectSpread(_objectSpread({}, currentPluginState), {}, { selectedIndex: params.selectedIndex }); } else if (shouldClearListError) { return _objectSpread(_objectSpread({}, currentPluginState), {}, { errorInfo: null }); } if (tr.docChanged) { var decorationSet = currentPluginState.decorationSet; var onRemove = function onRemove() { // Make sure we are unmounting the component // from the react tree when this decoration is removed removeDecorations(currentPluginState.decorationSet); }; var mappedDecorationSet = decorationSet.map(tr.mapping, tr.doc, { onRemove: onRemove }); // return same pluginState if decorationSet did not change if (mappedDecorationSet === currentPluginState.decorationSet) { return currentPluginState; } return _objectSpread(_objectSpread({}, currentPluginState), {}, { decorationSet: mappedDecorationSet }); } return currentPluginState; }; };