@atlaskit/editor-plugin-paste-options-toolbar
Version:
Paste options toolbar for @atlaskit/editor-core
225 lines (224 loc) • 15.6 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 { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
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 { firePasteActionsMenuV2ExperimentExposure } from './ui/on-paste-actions-menu/exposure-v2';
import { PasteActionsMenu } from './ui/on-paste-actions-menu/PasteActionsMenu';
import { getPasteMenuComponents } from './ui/on-paste-actions-menu/PasteMenuComponents';
import { buildToolbar, isToolbarVisible } from './ui/toolbar';
import { getSingleSmartLinkUrlFromSlice } from './ui/utils/current-pasted-smart-link';
import { createPasteMenuRuleFactories } from './ui/utils/paste-menu-rules/rules';
export const pasteOptionsToolbarPlugin = ({
config,
api
}) => {
var _api$analytics;
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
const getPasteMenuContext = () => ({
getCurrentPasteRange: () => {
var _api$pasteOptionsTool;
const state = api === null || api === void 0 ? void 0 : (_api$pasteOptionsTool = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool === void 0 ? void 0 : _api$pasteOptionsTool.sharedState.currentState();
if (!state) {
return undefined;
}
return {
pasteEndPos: state.pasteEndPos,
pasteStartPos: state.pasteStartPos
};
},
getCurrentPastedUrl: () => {
var _api$paste, _api$paste$sharedStat, _api$paste$sharedStat2;
return getSingleSmartLinkUrlFromSlice(api === null || api === void 0 ? void 0 : (_api$paste = api.paste) === null || _api$paste === void 0 ? void 0 : (_api$paste$sharedStat = _api$paste.sharedState.currentState()) === null || _api$paste$sharedStat === void 0 ? void 0 : (_api$paste$sharedStat2 = _api$paste$sharedStat.lastContentPasted) === null || _api$paste$sharedStat2 === void 0 ? void 0 : _api$paste$sharedStat2.pastedSlice);
}
});
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
var _api$uiControlRegistr;
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getPasteMenuComponents({
api
}));
}
if (config !== null && config !== void 0 && config.pasteMenuButtonsFactory && config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu) {
var _api$uiControlRegistr2;
const rules = (() => {
const getContext = () => {
var _api$pasteOptionsTool2, _api$paste2;
const pasteOptsState = api === null || api === void 0 ? void 0 : (_api$pasteOptionsTool2 = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool2 === void 0 ? void 0 : _api$pasteOptionsTool2.sharedState.currentState();
const pasteState = api === null || api === void 0 ? void 0 : (_api$paste2 = api.paste) === null || _api$paste2 === void 0 ? void 0 : _api$paste2.sharedState.currentState();
return {
getPlaintextLength: () => {
var _pasteOptsState$plain;
return (_pasteOptsState$plain = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.plaintextLength) !== null && _pasteOptsState$plain !== void 0 ? _pasteOptsState$plain : 0;
},
getAncestorNodeNames: () => {
var _pasteOptsState$paste;
return (_pasteOptsState$paste = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.pasteAncestorNodeNames) !== null && _pasteOptsState$paste !== void 0 ? _pasteOptsState$paste : [];
},
getPastedText: () => {
var _pasteState$lastConte, _pasteState$lastConte2;
return (_pasteState$lastConte = pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte2 = pasteState.lastContentPasted) === null || _pasteState$lastConte2 === void 0 ? void 0 : _pasteState$lastConte2.text) !== null && _pasteState$lastConte !== void 0 ? _pasteState$lastConte : '';
},
getPastedSlice: () => {
var _pasteState$lastConte3;
return pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte3 = pasteState.lastContentPasted) === null || _pasteState$lastConte3 === void 0 ? void 0 : _pasteState$lastConte3.pastedSlice;
},
getNodeTypes: () => [],
getPasteSource: () => {
var _pasteState$lastConte4;
return pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte4 = pasteState.lastContentPasted) === null || _pasteState$lastConte4 === void 0 ? void 0 : _pasteState$lastConte4.pasteSource;
}
};
};
return createPasteMenuRuleFactories(getContext);
})();
const productButtons = config.pasteMenuButtonsFactory(rules, getPasteMenuContext());
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register(productButtons);
}
return {
name: 'pasteOptionsToolbarPlugin',
actions: {
getPasteMenuRules: () => {
const getContext = () => {
var _api$pasteOptionsTool3, _api$paste3;
const pasteOptsState = api === null || api === void 0 ? void 0 : (_api$pasteOptionsTool3 = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool3 === void 0 ? void 0 : _api$pasteOptionsTool3.sharedState.currentState();
const pasteState = api === null || api === void 0 ? void 0 : (_api$paste3 = api.paste) === null || _api$paste3 === void 0 ? void 0 : _api$paste3.sharedState.currentState();
return {
getPlaintextLength: () => {
var _pasteOptsState$plain2;
return (_pasteOptsState$plain2 = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.plaintextLength) !== null && _pasteOptsState$plain2 !== void 0 ? _pasteOptsState$plain2 : 0;
},
getAncestorNodeNames: () => {
var _pasteOptsState$paste2;
return (_pasteOptsState$paste2 = pasteOptsState === null || pasteOptsState === void 0 ? void 0 : pasteOptsState.pasteAncestorNodeNames) !== null && _pasteOptsState$paste2 !== void 0 ? _pasteOptsState$paste2 : [];
},
getPastedText: () => {
var _pasteState$lastConte5, _pasteState$lastConte6;
return (_pasteState$lastConte5 = pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte6 = pasteState.lastContentPasted) === null || _pasteState$lastConte6 === void 0 ? void 0 : _pasteState$lastConte6.text) !== null && _pasteState$lastConte5 !== void 0 ? _pasteState$lastConte5 : '';
},
getPastedSlice: () => {
var _pasteState$lastConte7;
return pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte7 = pasteState.lastContentPasted) === null || _pasteState$lastConte7 === void 0 ? void 0 : _pasteState$lastConte7.pastedSlice;
},
getNodeTypes: () => [],
getPasteSource: () => {
var _pasteState$lastConte8;
return pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte8 = pasteState.lastContentPasted) === null || _pasteState$lastConte8 === void 0 ? void 0 : _pasteState$lastConte8.pasteSource;
}
};
};
return createPasteMenuRuleFactories(getContext);
}
},
pmPlugins() {
return [{
name: 'pasteOptionsToolbarPlugin',
plugin: ({
dispatch
}) => createPlugin(dispatch, {
useNewPasteMenu: (config === null || config === void 0 ? void 0 : config.usePopupBasedPasteActionsMenu) && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)
})
}];
},
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
};
}
const 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(state, intl) {
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)) {
return;
}
const pastePluginState = pasteOptionsPluginKey.getState(state);
if (pastePluginState.showToolbar) {
return buildToolbar(state, intl, editorAnalyticsAPI);
}
return;
}
},
contentComponent({
editorView,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement
}) {
if (!(config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && (expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true) || ['hasSpellingAndGrammar', 'hasAltAiActions'].includes(expValNoExposure('platform_editor_paste_actions_menu_v2', 'variant', 'control')))) || !editorView) {
return null;
}
return /*#__PURE__*/React.createElement(PasteActionsMenu, {
api: api,
editorView: editorView,
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement
});
},
usePluginHook({
editorView
}) {
const {
lastContentPasted
} = useSharedPluginStateWithSelector(api, ['paste'], states => {
var _states$pasteState;
return {
lastContentPasted: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.lastContentPasted
};
});
useEffect(() => {
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 ? 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);
}
// These two need to be seperate to prevent them being dependant on each other
if (config !== null && config !== void 0 && config.usePopupBasedPasteActionsMenu && fg('platform_editor_paste_actions_menu_v2_exposure')) {
var _lastContentPasted$te3, _lastContentPasted$te4;
firePasteActionsMenuV2ExperimentExposure((_lastContentPasted$te3 = lastContentPasted === null || lastContentPasted === void 0 ? void 0 : (_lastContentPasted$te4 = lastContentPasted.text) === null || _lastContentPasted$te4 === void 0 ? void 0 : _lastContentPasted$te4.length) !== null && _lastContentPasted$te3 !== void 0 ? _lastContentPasted$te3 : 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;
}
let 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]);
}
};
};