@atlaskit/editor-plugin-paste-options-toolbar
Version:
Paste options toolbar for @atlaskit/editor-core
238 lines • 10.5 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';
var nestedMenuStyles = {
narrowSection: "_10gv1lit"
};
export var isPasteOptionSelected = function 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;
}
};
var PasteMenuItem = function PasteMenuItem(_ref) {
var _api$analytics;
var api = _ref.api,
pasteType = _ref.pasteType;
var intl = useIntl();
var _useEditorToolbar = useEditorToolbar(),
editorView = _useEditorToolbar.editorView;
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
var _pluginState$selected, _pluginState$plaintex, _pluginState$isPlainT;
var 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
};
}),
selectedOption = _useSharedPluginState.selectedOption,
plaintextLength = _useSharedPluginState.plaintextLength,
isPlainText = _useSharedPluginState.isPlainText;
var getDefaultLabel = useCallback(function (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]);
var handleClick = useCallback(function (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;
}
var displayLabel = getDefaultLabel(pasteType);
var isSelected = isPasteOptionSelected(pasteType, selectedOption);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
onClick: handleClick,
isSelected: isSelected,
testId: "paste-".concat(pasteType, "-menu-item"),
hasNestedDropdownMenu: true
}, displayLabel);
};
var PasteOptionsNestedMenu = function PasteOptionsNestedMenu(_ref2) {
var children = _ref2.children,
hasVisibleAiActions = _ref2.hasVisibleAiActions;
var intl = useIntl();
var 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);
};
var getHasVisibleAiActions = function getHasVisibleAiActions(api) {
var _api$uiControlRegistr, _api$uiControlRegistr2;
var allComponents = (_api$uiControlRegistr = api === null || api === 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 : [];
var aiMenuItems = allComponents.filter(function (c) {
var _c$parents;
return c.type === 'menu-item' && ((_c$parents = c.parents) === null || _c$parents === void 0 ? void 0 : _c$parents.some(function (p) {
return p.key === AI_PASTE_MENU_SECTION.key;
}));
});
return getVisibleKeys(aiMenuItems, ['menu-item']).length > 0;
};
export var getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
var api = _ref3.api;
return [{
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: function isHidden() {
var _api$pasteOptionsTool, _pluginState$showLega;
var pluginState = api === null || api === 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: function component(props) {
var 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: function component(props) {
var 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: function component(props) {
return /*#__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: function component() {
return /*#__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: function component() {
return /*#__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: function component() {
return /*#__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]
}]
}];
};