@atlaskit/editor-plugin-type-ahead
Version:
Type-ahead plugin for @atlaskit/editor-core
121 lines (119 loc) • 4.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createPlugin = createPlugin;
var _steps = require("@atlaskit/adf-schema/steps");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _utils = require("@atlaskit/editor-common/utils");
var _view = require("@atlaskit/editor-prosemirror/view");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _actions = require("./actions");
var _constants = require("./constants");
var _decorations = require("./decorations");
var _isInsertionTransaction = require("./isInsertionTransaction");
var _key = require("./key");
var _reducer = require("./reducer");
var hasValidTypeAheadStep = function hasValidTypeAheadStep(tr) {
var steps = tr.steps.filter(function (step) {
return step instanceof _steps.InsertTypeAheadStep;
});
// There are some cases, like collab rebase, where the steps are re-applied
// We should not re open the type-ahead for those cases
if (steps.length === 1) {
return steps[0];
}
return null;
};
function createPlugin(_ref) {
var reactDispatch = _ref.reactDispatch,
popupMountRef = _ref.popupMountRef,
typeAheadHandlers = _ref.typeAheadHandlers,
getIntl = _ref.getIntl,
nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
api = _ref.api;
var intl = getIntl();
var _factoryDecorations = (0, _decorations.factoryDecorations)({
intl: intl,
nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
popupMountRef: popupMountRef,
api: api
}),
createDecorations = _factoryDecorations.createDecorations,
removeDecorations = _factoryDecorations.removeDecorations;
var reducer = (0, _reducer.createReducer)({
createDecorations: createDecorations,
removeDecorations: removeDecorations,
typeAheadHandlers: typeAheadHandlers,
popupMountRef: popupMountRef
});
return new _safePlugin.SafePlugin({
key: _key.pluginKey,
state: {
init: function init() {
return {
typeAheadHandlers: typeAheadHandlers,
query: '',
decorationSet: _view.DecorationSet.empty,
decorationElement: null,
items: [],
errorInfo: null,
selectedIndex: -1,
stats: null,
inputMethod: null,
removePrefixTriggerOnCancel: undefined
};
},
apply: function apply(tr, currentPluginState, oldEditorState, state) {
var customStep = hasValidTypeAheadStep(tr);
var nextPluginState = reducer(tr, currentPluginState, customStep);
if (currentPluginState !== nextPluginState) {
reactDispatch(_key.pluginKey, nextPluginState);
}
return nextPluginState;
}
},
appendTransaction: function appendTransaction(transactions, _oldState, newState) {
var insertItemCallback = (0, _isInsertionTransaction.isInsertionTransaction)(transactions, _actions.ACTIONS.INSERT_RAW_QUERY);
if (insertItemCallback) {
var tr = insertItemCallback(newState);
if (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.startActiveSessionTimer()({
tr: tr
});
}
return tr;
}
}
},
view: function view() {
return {
update: function update(editorView) {}
};
},
props: {
decorations: function decorations(state) {
var _pluginKey$getState;
return (_pluginKey$getState = _key.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet;
},
handleDOMEvents: {
compositionend: function compositionend(view, event) {
return false;
},
click: function click(view, event) {
var target = event.target;
// ProseMirror view listen to any click event inside of it
// When this event is coming from the typeahead
// we should tell to ProseMirror to sit down and relax
// cuz we know what we are doing (I hope)
if (target instanceof HTMLElement && (0, _utils.closest)(target, "[data-type-ahead=".concat(_constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "]"))) {
return true;
}
return false;
}
}
}
});
}