@atlaskit/editor-plugin-type-ahead
Version:
Type-ahead plugin for @atlaskit/editor-core
196 lines (190 loc) • 9.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.skipForwardToSafeItem = exports.skipBackwardToSafeItem = exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _updateSelectedIndex = require("./commands/update-selected-index");
var _itemIsDisabled = require("./item-is-disabled");
var _key = require("./key");
var _statsModifier = require("./stats-modifier");
var isTypeAheadHandler = exports.isTypeAheadHandler = function isTypeAheadHandler(handler) {
return handler && Object.values(_typeAhead.TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
};
/** Is a typeahead plugin open? */
var isTypeAheadOpen = exports.isTypeAheadOpen = function isTypeAheadOpen(editorState) {
var _typeAheadPluginKey$g;
return !!(_key.pluginKey !== null && _key.pluginKey !== void 0 && (_typeAheadPluginKey$g = _key.pluginKey.getState(editorState)) !== null && _typeAheadPluginKey$g !== void 0 && (_typeAheadPluginKey$g = _typeAheadPluginKey$g.decorationSet) !== null && _typeAheadPluginKey$g !== void 0 && _typeAheadPluginKey$g.find().length);
};
var getPluginState = exports.getPluginState = function getPluginState(editorState) {
return _key.pluginKey.getState(editorState);
};
var getTypeAheadHandler = exports.getTypeAheadHandler = function getTypeAheadHandler(editorState) {
var _typeAheadPluginKey$g2;
return (_typeAheadPluginKey$g2 = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g2 === void 0 ? void 0 : _typeAheadPluginKey$g2.triggerHandler;
};
var getTypeAheadQuery = exports.getTypeAheadQuery = function getTypeAheadQuery(editorState) {
var _typeAheadPluginKey$g3;
return (_typeAheadPluginKey$g3 = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g3 === void 0 ? void 0 : _typeAheadPluginKey$g3.query;
};
var isTypeAheadAllowed = exports.isTypeAheadAllowed = function isTypeAheadAllowed(state) {
var isOpen = isTypeAheadOpen(state);
// if the TypeAhead is open
// we should not allow it
return !isOpen;
};
var findHandler = exports.findHandler = function findHandler(id, state) {
var pluginState = _key.pluginKey.getState(state);
if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
return null;
}
var typeAheadHandlers = pluginState.typeAheadHandlers;
return typeAheadHandlers.find(function (h) {
return h.id === id;
}) || null;
};
var skipForwardToSafeItem = exports.skipForwardToSafeItem = function skipForwardToSafeItem(_ref) {
var currentIndex = _ref.currentIndex,
nextIndex = _ref.nextIndex,
listSize = _ref.listSize,
itemIsDisabled = _ref.itemIsDisabled;
// Use a loop to find the next selectable item
for (var idx = nextIndex; idx < listSize; idx++) {
if (!itemIsDisabled(idx)) {
return idx;
}
}
// We got to the end of the list ^, now try from the start
if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
for (var _idx = 0; _idx < nextIndex; _idx++) {
if (!itemIsDisabled(_idx)) {
return _idx;
}
}
}
// If no selectable items are found, return currentIndex
return currentIndex;
};
var skipBackwardToSafeItem = exports.skipBackwardToSafeItem = function skipBackwardToSafeItem(_ref2) {
var currentIndex = _ref2.currentIndex,
nextIndex = _ref2.nextIndex,
listSize = _ref2.listSize,
itemIsDisabled = _ref2.itemIsDisabled;
// Use a loop to find the next non-selectable item when going backwards
for (var idx = nextIndex; idx >= 0; idx--) {
if (!itemIsDisabled(idx)) {
return idx;
}
}
// We got to the start of the list ^, now try from the end
if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
for (var _idx2 = listSize; _idx2 > nextIndex; _idx2--) {
if (!itemIsDisabled(_idx2)) {
return _idx2;
}
}
}
// If no non-selectable items are found, return currentIndex
return currentIndex;
};
var findHandlerByTrigger = exports.findHandlerByTrigger = function findHandlerByTrigger(_ref3) {
var trigger = _ref3.trigger,
editorState = _ref3.editorState;
var pluginState = _key.pluginKey.getState(editorState);
if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
return null;
}
var typeAheadHandlers = pluginState.typeAheadHandlers;
return typeAheadHandlers.find(function (h) {
return h.trigger === trigger;
}) || null;
};
var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_ref4) {
var editorView = _ref4.editorView,
direction = _ref4.direction,
api = _ref4.api;
return function () {
var typeAheadState = getPluginState(editorView.state);
if (!typeAheadState) {
return;
}
var selectedIndex = typeAheadState.selectedIndex,
items = typeAheadState.items;
var stats = typeAheadState.stats instanceof _statsModifier.StatsModifier ? typeAheadState.stats : new _statsModifier.StatsModifier();
var nextIndex;
var isDisabled = function isDisabled(idx) {
return (0, _itemIsDisabled.itemIsDisabled)(items[idx], api);
};
if (direction === 'next') {
stats.increaseArrowDown();
/**
* See: https://product-fabric.atlassian.net/browse/ED-17200
* `selectedIndex` is forced to -1 now to not immediately focus the typeahead
* and only do so when there is explicit logic to focus into the typeahead
* options.
*
* This check for "set index to 1 when -1"
* - is a temporary workaround to get back the previous behaviour without
* entirely reverting the a11y improvements
*
*/
if (selectedIndex === -1 && items.length > 1) {
// If the first item is disabled we actually want to skip to the 3rd item
// on the first arrow down
nextIndex = isDisabled(0) && items.length > 2 ? 2 : 1;
} else {
nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
}
nextIndex = skipForwardToSafeItem({
currentIndex: selectedIndex,
nextIndex: nextIndex,
listSize: items.length,
itemIsDisabled: isDisabled
});
} else {
stats.increaseArrowUp();
nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
nextIndex = skipBackwardToSafeItem({
currentIndex: selectedIndex,
nextIndex: nextIndex,
listSize: items.length,
itemIsDisabled: isDisabled
});
}
(0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
};
};
var getTypeAheadListAriaLabels = exports.getTypeAheadListAriaLabels = function getTypeAheadListAriaLabels(trigger, intl, item) {
var _item$mention, _item$mention2, _item$emoji, _item$emoji2, _item$emoji3;
switch (trigger) {
case '@':
return {
popupAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.mentionPopupLabel),
listItemAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.metionListItemLabel, {
name: (item === null || item === void 0 || (_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.name) || '',
shortName: (item === null || item === void 0 || (_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.mentionName) || ''
})
};
case '/':
return {
popupAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.quickInsertPopupLabel),
listItemAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.emojiListItemLabel, {
name: (item === null || item === void 0 ? void 0 : item.title) || '',
shortcut: (item === null || item === void 0 || (_item$emoji = item.emoji) === null || _item$emoji === void 0 ? void 0 : _item$emoji.shortName) || ''
})
};
case ':':
return {
popupAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.emojiPopupLabel),
listItemAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.emojiListItemLabel, {
name: (item === null || item === void 0 || (_item$emoji2 = item.emoji) === null || _item$emoji2 === void 0 ? void 0 : _item$emoji2.name) || '',
shortcut: (item === null || item === void 0 || (_item$emoji3 = item.emoji) === null || _item$emoji3 === void 0 ? void 0 : _item$emoji3.shortName) || ''
})
};
default:
return {
popupAriaLabel: intl.formatMessage(_typeAhead.typeAheadListMessages.typeAheadPopupLabel)
};
}
};