@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
184 lines • 6.92 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import { bind } from 'bind-event-listener';
import { getDocument } from '@atlaskit/browser-apis';
import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckPopupMutation, ExperienceCheckTimeout, getSelectionAncestorDOM } from '@atlaskit/editor-common/experiences';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { handleEditorNodeInsertDomMutation, isToolbarButtonClick } from './toolbar-experience-utils';
var pluginKey = new PluginKey('toolbarActionExperiences');
var TIMEOUT_DURATION = 1000;
var PRIMARY_TOOLBAR = 'primaryToolbar';
var ABORT_REASON = {
USER_CANCELED: 'userCanceled',
EDITOR_DESTROYED: 'editorDestroyed'
};
export var getToolbarActionExperiencesPlugin = function getToolbarActionExperiencesPlugin(_ref) {
var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
var editorView;
var lastClickedToolbarButton;
var getEditorDom = function getEditorDom() {
var _editorView;
if (((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom) instanceof HTMLElement) {
return editorView.dom;
}
return null;
};
var getInlinePopupTarget = function getInlinePopupTarget() {
var _lastClickedToolbarBu;
if (!lastClickedToolbarButton) {
return undefined;
}
return (_lastClickedToolbarBu = lastClickedToolbarButton.closest('[data-toolbar-component="button-group"]')) !== null && _lastClickedToolbarBu !== void 0 ? _lastClickedToolbarBu : lastClickedToolbarButton;
};
var observeConfigs = function observeConfigs() {
var narrowTarget = getSelectionAncestorDOM(editorView);
var editorDom = getEditorDom();
return [].concat(_toConsumableArray(narrowTarget ? [{
target: narrowTarget,
options: {
childList: true,
subtree: true
}
}] : []), _toConsumableArray(editorDom ? [{
target: editorDom,
options: {
childList: true
}
}] : []));
};
var createNodeInsertExperience = function createNodeInsertExperience(action) {
return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
action: action,
actionSubjectId: PRIMARY_TOOLBAR,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
checks: [new ExperienceCheckTimeout({
durationMs: TIMEOUT_DURATION
}), new ExperienceCheckDomMutation({
onDomMutation: handleEditorNodeInsertDomMutation,
observeConfig: observeConfigs
})]
});
};
var buildPopupMutationConfig = function buildPopupMutationConfig(popupSelector, type) {
switch (type) {
case 'inline':
return {
type: type,
nestedElementQuery: popupSelector,
getTarget: getInlinePopupTarget,
subtree: true
};
case 'editorRoot':
return {
type: type,
nestedElementQuery: popupSelector,
getEditorDom: getEditorDom
};
}
};
var createPopupExperience = function createPopupExperience(action, popupSelector, type) {
return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
action: action,
actionSubjectId: PRIMARY_TOOLBAR,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
checks: [new ExperienceCheckTimeout({
durationMs: TIMEOUT_DURATION
}), new ExperienceCheckPopupMutation(buildPopupMutationConfig(popupSelector, type))]
});
};
var experienceButtonMappings = [{
experience: createPopupExperience('insert', '[data-testid="popup-wrapper"]', 'inline'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.INSERT
}, {
experience: createPopupExperience('emoji', '[data-emoji-picker-container], [data-emoji-picker-container="true"], [data-testid="popup-wrapper"]', 'inline'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.EMOJI
}, {
experience: createPopupExperience('media', '[data-testid="popup-wrapper"]', 'inline'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.MEDIA
}, {
experience: createPopupExperience('mention', '[data-testid="popup-wrapper"], [data-type-ahead="typeaheadDecoration"]', 'editorRoot'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.MENTION
}, {
experience: createNodeInsertExperience('table'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.TABLE
}, {
experience: createPopupExperience('tableSelector', '[data-testid="popup-wrapper"]', 'inline'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
}, {
experience: createNodeInsertExperience('layout'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.LAYOUT
}, {
experience: createPopupExperience('image', '[data-testid="popup-wrapper"]', 'inline'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.IMAGE
}, {
experience: createNodeInsertExperience('action'),
buttonTestId: TOOLBAR_BUTTON_TEST_ID.TASK_LIST
}];
var handleToolbarButtonClick = function handleToolbarButtonClick(target) {
for (var _i = 0, _experienceButtonMapp = experienceButtonMappings; _i < _experienceButtonMapp.length; _i++) {
var _experienceButtonMapp2 = _experienceButtonMapp[_i],
experience = _experienceButtonMapp2.experience,
buttonTestId = _experienceButtonMapp2.buttonTestId;
if (isToolbarButtonClick(target, buttonTestId)) {
// Store the clicked button so inline popup checks can find its button-group
lastClickedToolbarButton = target;
experience.start({
forceRestart: true
});
return;
}
}
};
var abortAllExperiences = function abortAllExperiences(reason) {
for (var _i2 = 0, _experienceButtonMapp3 = experienceButtonMappings; _i2 < _experienceButtonMapp3.length; _i2++) {
var experience = _experienceButtonMapp3[_i2].experience;
experience.abort({
reason: reason
});
}
};
var doc = getDocument();
if (!doc) {
return new SafePlugin({
key: pluginKey
});
}
var unbindClickListener = bind(doc, {
type: 'click',
listener: function listener(event) {
var target = event.target;
if (target instanceof HTMLElement) {
handleToolbarButtonClick(target);
}
},
options: {
capture: true
}
});
var unbindKeydownListener = bind(doc, {
type: 'keydown',
listener: function listener(event) {
if (event.key === 'Escape') {
abortAllExperiences(ABORT_REASON.USER_CANCELED);
}
},
options: {
capture: true
}
});
return new SafePlugin({
key: pluginKey,
view: function view(_view) {
editorView = _view;
return {
destroy: function destroy() {
abortAllExperiences(ABORT_REASON.EDITOR_DESTROYED);
editorView = undefined;
unbindClickListener();
unbindKeydownListener();
}
};
}
});
};