@atlaskit/editor-plugin-paste-options-toolbar
Version:
Paste options toolbar for @atlaskit/editor-core
231 lines • 9.63 kB
JavaScript
/* PasteMenuComponents.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./PasteMenuComponents.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { cx } from '@compiled/react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { pasteOptionsToolbarMessages as messages } from '@atlaskit/editor-common/messages';
import { useEditorToolbar, PASTE_MENU, PASTE_MENU_SECTION, PASTE_NESTED_MENU, PASTE_MENU_NESTED_SECTION, PASTE_RICH_TEXT_MENU_ITEM, PASTE_MARKDOWN_MENU_ITEM, PASTE_PLAIN_TEXT_MENU_ITEM, PASTE_MENU_RANK, PASTE_MENU_SECTION_RANK, PASTE_NESTED_MENU_RANK, PASTE_MENU_NESTED_SECTION_RANK, AI_PASTE_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import ClipboardIcon from '@atlaskit/icon/core/clipboard';
import { Box } from '@atlaskit/primitives/compiled';
import { changeToMarkdownWithAnalytics, changeToPlainTextWithAnalytics, changeToRichTextWithAnalytics } from '../../editor-commands/commands';
import { ToolbarDropdownOption } from '../../types/types';
import { getVisibleKeys } from './hasVisibleButton';
import { PasteOptionsDropdownButton } from './PasteOptionsDropdownButton';
const nestedMenuStyles = {
narrowSection: "_10gv1lit"
};
export const isPasteOptionSelected = (pasteType, selectedOption) => {
switch (pasteType) {
case 'rich-text':
return selectedOption === ToolbarDropdownOption.RichText;
case 'markdown':
return selectedOption === ToolbarDropdownOption.Markdown;
case 'plain-text':
return selectedOption === ToolbarDropdownOption.PlainText;
default:
return false;
}
};
const PasteMenuItem = ({
api,
pasteType
}) => {
var _api$analytics;
const intl = useIntl();
const {
editorView
} = useEditorToolbar();
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
const {
selectedOption,
plaintextLength,
isPlainText
} = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], states => {
var _pluginState$selected, _pluginState$plaintex, _pluginState$isPlainT;
const pluginState = states.pasteOptionsToolbarPluginState;
return {
selectedOption: (_pluginState$selected = pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedOption) !== null && _pluginState$selected !== void 0 ? _pluginState$selected : ToolbarDropdownOption.None,
plaintextLength: (_pluginState$plaintex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.plaintextLength) !== null && _pluginState$plaintex !== void 0 ? _pluginState$plaintex : 0,
isPlainText: (_pluginState$isPlainT = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPlainText) !== null && _pluginState$isPlainT !== void 0 ? _pluginState$isPlainT : false
};
});
const getDefaultLabel = useCallback(type => {
switch (type) {
case 'rich-text':
return intl.formatMessage(messages.richTextAction);
case 'markdown':
return intl.formatMessage(messages.markdownAction);
case 'plain-text':
return intl.formatMessage(messages.plainTextAction);
default:
return type;
}
}, [intl]);
const handleClick = useCallback(e => {
e.preventDefault();
if (!editorView) {
return;
}
switch (pasteType) {
case 'rich-text':
changeToRichTextWithAnalytics(editorAnalyticsAPI, 'pasteMenu')()(editorView.state, editorView.dispatch);
break;
case 'markdown':
changeToMarkdownWithAnalytics(editorAnalyticsAPI, plaintextLength, 'pasteMenu')()(editorView.state, editorView.dispatch);
break;
case 'plain-text':
changeToPlainTextWithAnalytics(editorAnalyticsAPI, plaintextLength, 'pasteMenu')()(editorView.state, editorView.dispatch);
break;
}
}, [editorView, editorAnalyticsAPI, plaintextLength, pasteType]);
if (pasteType === 'rich-text' && isPlainText) {
return null;
}
const displayLabel = getDefaultLabel(pasteType);
const isSelected = isPasteOptionSelected(pasteType, selectedOption);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
onClick: handleClick,
isSelected: isSelected,
testId: `paste-${pasteType}-menu-item`,
hasNestedDropdownMenu: true
}, displayLabel);
};
const PasteOptionsNestedMenu = ({
children,
hasVisibleAiActions
}) => {
const intl = useIntl();
const label = intl.formatMessage(messages.pasteMenuActionsPasteAs);
if (!hasVisibleAiActions) {
return /*#__PURE__*/React.createElement(PasteOptionsDropdownButton, {
elemBefore: /*#__PURE__*/React.createElement(ClipboardIcon, {
size: "small",
label: ""
}),
elemAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
size: "small",
label: ""
}),
label: label,
testId: "paste-options-nested-menu",
tooltipContent: label
}, children);
}
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
elemBefore: /*#__PURE__*/React.createElement(ClipboardIcon, {
size: "small",
label: label
}),
elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
size: "small",
label: ""
}),
testId: "paste-options-nested-menu",
text: label
}, children);
};
const getHasVisibleAiActions = api => {
var _api$uiControlRegistr, _api$uiControlRegistr2;
const allComponents = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
const aiMenuItems = allComponents.filter(c => {
var _c$parents;
return c.type === 'menu-item' && ((_c$parents = c.parents) === null || _c$parents === void 0 ? void 0 : _c$parents.some(p => p.key === AI_PASTE_MENU_SECTION.key));
});
return getVisibleKeys(aiMenuItems, ['menu-item']).length > 0;
};
export const getPasteMenuComponents = ({
api
}) => [{
type: PASTE_MENU.type,
key: PASTE_MENU.key
}, {
type: PASTE_MENU_SECTION.type,
key: PASTE_MENU_SECTION.key,
parents: [{
type: PASTE_MENU.type,
key: PASTE_MENU.key,
rank: PASTE_MENU_RANK[PASTE_MENU_SECTION.key]
}],
isHidden: () => {
var _api$pasteOptionsTool, _pluginState$showLega;
const pluginState = api === null || api === void 0 ? void 0 : (_api$pasteOptionsTool = api.pasteOptionsToolbarPlugin) === null || _api$pasteOptionsTool === void 0 ? void 0 : _api$pasteOptionsTool.sharedState.currentState();
return !((_pluginState$showLega = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLegacyOptions) !== null && _pluginState$showLega !== void 0 ? _pluginState$showLega : false);
},
component: props => {
const hasVisibleAiActions = getHasVisibleAiActions(api);
if (!hasVisibleAiActions) {
return /*#__PURE__*/React.createElement(Box, {
padding: "space.050"
}, props.children);
}
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
hasSeparator: true
}, props.children);
}
}, {
type: PASTE_NESTED_MENU.type,
key: PASTE_NESTED_MENU.key,
parents: [{
type: PASTE_MENU_SECTION.type,
key: PASTE_MENU_SECTION.key,
rank: PASTE_MENU_SECTION_RANK[PASTE_NESTED_MENU.key]
}],
component: props => {
const hasVisibleAiActions = getHasVisibleAiActions(api);
return /*#__PURE__*/React.createElement(PasteOptionsNestedMenu, {
hasVisibleAiActions: hasVisibleAiActions
}, props.children);
}
}, {
type: PASTE_MENU_NESTED_SECTION.type,
key: PASTE_MENU_NESTED_SECTION.key,
parents: [{
type: PASTE_NESTED_MENU.type,
key: PASTE_NESTED_MENU.key,
rank: PASTE_NESTED_MENU_RANK[PASTE_MENU_NESTED_SECTION.key]
}],
component: props => /*#__PURE__*/React.createElement(Box, {
xcss: cx(nestedMenuStyles.narrowSection)
}, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children))
}, {
key: PASTE_RICH_TEXT_MENU_ITEM.key,
type: PASTE_RICH_TEXT_MENU_ITEM.type,
component: () => /*#__PURE__*/React.createElement(PasteMenuItem, {
api: api,
pasteType: "rich-text"
}),
parents: [{
key: PASTE_MENU_NESTED_SECTION.key,
type: PASTE_MENU_NESTED_SECTION.type,
rank: PASTE_MENU_NESTED_SECTION_RANK[PASTE_RICH_TEXT_MENU_ITEM.key]
}]
}, {
key: PASTE_MARKDOWN_MENU_ITEM.key,
type: PASTE_MARKDOWN_MENU_ITEM.type,
component: () => /*#__PURE__*/React.createElement(PasteMenuItem, {
api: api,
pasteType: "markdown"
}),
parents: [{
key: PASTE_MENU_NESTED_SECTION.key,
type: PASTE_MENU_NESTED_SECTION.type,
rank: PASTE_MENU_NESTED_SECTION_RANK[PASTE_MARKDOWN_MENU_ITEM.key]
}]
}, {
key: PASTE_PLAIN_TEXT_MENU_ITEM.key,
type: PASTE_PLAIN_TEXT_MENU_ITEM.type,
component: () => /*#__PURE__*/React.createElement(PasteMenuItem, {
api: api,
pasteType: "plain-text"
}),
parents: [{
key: PASTE_MENU_NESTED_SECTION.key,
type: PASTE_MENU_NESTED_SECTION.type,
rank: PASTE_MENU_NESTED_SECTION_RANK[PASTE_PLAIN_TEXT_MENU_ITEM.key]
}]
}];