@atlaskit/editor-plugin-paste-options-toolbar
Version:
Paste options toolbar for @atlaskit/editor-core
126 lines • 8.19 kB
JavaScript
import React, { useEffect } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import { hideToolbar, showToolbar } from './editor-commands/commands';
import { createPlugin } from './pm-plugins/main';
import { pasteOptionsPluginKey, ToolbarDropdownOption } from './types/types';
import { firePasteActionsMenuExperimentExposure } from './ui/on-paste-actions-menu/exposure';
import { PasteActionsMenu } from './ui/on-paste-actions-menu/PasteActionsMenu';
import { getPasteMenuComponents } from './ui/on-paste-actions-menu/PasteMenuComponents';
import { buildToolbar, isToolbarVisible } from './ui/toolbar';
export var pasteOptionsToolbarPlugin = function pasteOptionsToolbarPlugin(_ref) {
var _api$analytics;
var config = _ref.config,
api = _ref.api;
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
var _api$uiControlRegistr;
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getPasteMenuComponents({
api: api
}));
}
return {
name: 'pasteOptionsToolbarPlugin',
pmPlugins: function pmPlugins() {
return [{
name: 'pasteOptionsToolbarPlugin',
plugin: function plugin(_ref2) {
var dispatch = _ref2.dispatch;
return createPlugin(dispatch, {
useNewPasteMenu: (config === null || config === void 0 ? void 0 : config.usePopupBasedPasteActionsMenu) && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)
});
}
}];
},
getSharedState: function getSharedState(editorState) {
var _pluginState$isPlainT, _pluginState$pasteAnc, _pluginState$pasteEnd, _pluginState$pasteSta, _pluginState$plaintex, _pluginState$selected, _pluginState$showLega, _pluginState$showTool;
if (!editorState) {
return {
isPlainText: false,
pasteAncestorNodeNames: [],
pasteEndPos: 0,
pasteStartPos: 0,
plaintextLength: 0,
selectedOption: ToolbarDropdownOption.None,
showLegacyOptions: false,
showToolbar: false
};
}
var pluginState = pasteOptionsPluginKey.getState(editorState);
return {
isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false,
pasteAncestorNodeNames: (_pluginState$pasteAnc = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteAncestorNodeNames) !== null && _pluginState$pasteAnc !== void 0 ? _pluginState$pasteAnc : [],
pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0,
pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintext.length) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
showLegacyOptions: (_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false,
showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false
};
},
pluginsOptions: {
floatingToolbar: function floatingToolbar(state, intl) {
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
return;
}
var pastePluginState = pasteOptionsPluginKey.getState(state);
if (pastePluginState.showToolbar) {
return buildToolbar(state, intl, editorAnalyticsAPI);
}
return;
}
},
contentComponent: function contentComponent(_ref3) {
var editorView = _ref3.editorView,
popupsMountPoint = _ref3.popupsMountPoint,
popupsBoundariesElement = _ref3.popupsBoundariesElement,
popupsScrollableElement = _ref3.popupsScrollableElement;
if (!(config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) || !editorView) {
return null;
}
return /*#__PURE__*/React.createElement(PasteActionsMenu, {
api: api,
editorView: editorView,
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement
});
},
usePluginHook: function usePluginHook(_ref4) {
var editorView = _ref4.editorView;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['paste'], function (states) {
var _states$pasteState;
return {
lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
};
}),
lastContentPasted = _useSharedPluginState.lastContentPasted;
useEffect(function () {
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && fg('platform_editor_paste_actions_menu_exposure')) {
var _lastContentPasted$te, _lastContentPasted$te2;
firePasteActionsMenuExperimentExposure((_lastContentPasted$te = lastContentPasted === null || lastContentPasted === void 0 || (_lastContentPasted$te2 = lastContentPasted.text) === null || _lastContentPasted$te2 === void 0 ? void 0 : _lastContentPasted$te2.length) !== null && _lastContentPasted$te !== void 0 ? _lastContentPasted$te : 0, editorView.state, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pasteStartPos, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pasteEndPos, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.text, lastContentPasted === null || lastContentPasted === void 0 ? void 0 : lastContentPasted.pastedSlice);
}
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
return;
}
if (!lastContentPasted) {
hideToolbar()(editorView.state, editorView.dispatch);
return;
}
var selectedOption = ToolbarDropdownOption.None;
if (!lastContentPasted.isPlainText) {
selectedOption = ToolbarDropdownOption.RichText;
} else if (lastContentPasted.isShiftPressed) {
selectedOption = ToolbarDropdownOption.PlainText;
} else {
selectedOption = ToolbarDropdownOption.Markdown;
}
if (!isToolbarVisible(editorView.state, lastContentPasted)) {
return;
}
showToolbar(lastContentPasted, selectedOption)(editorView.state, editorView.dispatch);
}, [lastContentPasted, editorView]);
}
};
};