@atlaskit/editor-plugin-paste-options-toolbar
Version:
Paste options toolbar for @atlaskit/editor-core
247 lines (246 loc) • 12 kB
JavaScript
/* PasteMenuComponents.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isPasteOptionSelected = exports.getPasteMenuComponents = void 0;
require("./PasteMenuComponents.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@compiled/react");
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
var _clipboard = _interopRequireDefault(require("@atlaskit/icon/core/clipboard"));
var _compiled = require("@atlaskit/primitives/compiled");
var _commands = require("../../editor-commands/commands");
var _types = require("../../types/types");
var _hasVisibleButton = require("./hasVisibleButton");
var _PasteOptionsDropdownButton = require("./PasteOptionsDropdownButton");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var nestedMenuStyles = {
narrowSection: "_10gv1lit"
};
var isPasteOptionSelected = exports.isPasteOptionSelected = function isPasteOptionSelected(pasteType, selectedOption) {
switch (pasteType) {
case 'rich-text':
return selectedOption === _types.ToolbarDropdownOption.RichText;
case 'markdown':
return selectedOption === _types.ToolbarDropdownOption.Markdown;
case 'plain-text':
return selectedOption === _types.ToolbarDropdownOption.PlainText;
default:
return false;
}
};
var PasteMenuItem = function PasteMenuItem(_ref) {
var _api$analytics;
var api = _ref.api,
pasteType = _ref.pasteType;
var intl = (0, _reactIntl.useIntl)();
var _useEditorToolbar = (0, _toolbar.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 = (0, _hooks.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 : _types.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 = (0, _react.useCallback)(function (type) {
switch (type) {
case 'rich-text':
return intl.formatMessage(_messages.pasteOptionsToolbarMessages.richTextAction);
case 'markdown':
return intl.formatMessage(_messages.pasteOptionsToolbarMessages.markdownAction);
case 'plain-text':
return intl.formatMessage(_messages.pasteOptionsToolbarMessages.plainTextAction);
default:
return type;
}
}, [intl]);
var handleClick = (0, _react.useCallback)(function (e) {
e.preventDefault();
if (!editorView) {
return;
}
switch (pasteType) {
case 'rich-text':
(0, _commands.changeToRichTextWithAnalytics)(editorAnalyticsAPI, 'pasteMenu')()(editorView.state, editorView.dispatch);
break;
case 'markdown':
(0, _commands.changeToMarkdownWithAnalytics)(editorAnalyticsAPI, plaintextLength, 'pasteMenu')()(editorView.state, editorView.dispatch);
break;
case 'plain-text':
(0, _commands.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.default.createElement(_editorToolbar.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 = (0, _reactIntl.useIntl)();
var label = intl.formatMessage(_messages.pasteOptionsToolbarMessages.pasteMenuActionsPasteAs);
if (!hasVisibleAiActions) {
return /*#__PURE__*/_react.default.createElement(_PasteOptionsDropdownButton.PasteOptionsDropdownButton, {
elemBefore: /*#__PURE__*/_react.default.createElement(_clipboard.default, {
size: "small",
label: ""
}),
elemAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
size: "small",
label: ""
}),
label: label,
testId: "paste-options-nested-menu",
tooltipContent: label
}, children);
}
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
elemBefore: /*#__PURE__*/_react.default.createElement(_clipboard.default, {
size: "small",
label: label
}),
elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
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(_toolbar.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 === _toolbar.AI_PASTE_MENU_SECTION.key;
}));
});
return (0, _hasVisibleButton.getVisibleKeys)(aiMenuItems, ['menu-item']).length > 0;
};
var getPasteMenuComponents = exports.getPasteMenuComponents = function getPasteMenuComponents(_ref3) {
var api = _ref3.api;
return [{
type: _toolbar.PASTE_MENU.type,
key: _toolbar.PASTE_MENU.key
}, {
type: _toolbar.PASTE_MENU_SECTION.type,
key: _toolbar.PASTE_MENU_SECTION.key,
parents: [{
type: _toolbar.PASTE_MENU.type,
key: _toolbar.PASTE_MENU.key,
rank: _toolbar.PASTE_MENU_RANK[_toolbar.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.default.createElement(_compiled.Box, {
padding: "space.050"
}, props.children);
}
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
hasSeparator: true
}, props.children);
}
}, {
type: _toolbar.PASTE_NESTED_MENU.type,
key: _toolbar.PASTE_NESTED_MENU.key,
parents: [{
type: _toolbar.PASTE_MENU_SECTION.type,
key: _toolbar.PASTE_MENU_SECTION.key,
rank: _toolbar.PASTE_MENU_SECTION_RANK[_toolbar.PASTE_NESTED_MENU.key]
}],
component: function component(props) {
var hasVisibleAiActions = getHasVisibleAiActions(api);
return /*#__PURE__*/_react.default.createElement(PasteOptionsNestedMenu, {
hasVisibleAiActions: hasVisibleAiActions
}, props.children);
}
}, {
type: _toolbar.PASTE_MENU_NESTED_SECTION.type,
key: _toolbar.PASTE_MENU_NESTED_SECTION.key,
parents: [{
type: _toolbar.PASTE_NESTED_MENU.type,
key: _toolbar.PASTE_NESTED_MENU.key,
rank: _toolbar.PASTE_NESTED_MENU_RANK[_toolbar.PASTE_MENU_NESTED_SECTION.key]
}],
component: function component(props) {
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _react2.cx)(nestedMenuStyles.narrowSection)
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children));
}
}, {
key: _toolbar.PASTE_RICH_TEXT_MENU_ITEM.key,
type: _toolbar.PASTE_RICH_TEXT_MENU_ITEM.type,
component: function component() {
return /*#__PURE__*/_react.default.createElement(PasteMenuItem, {
api: api,
pasteType: "rich-text"
});
},
parents: [{
key: _toolbar.PASTE_MENU_NESTED_SECTION.key,
type: _toolbar.PASTE_MENU_NESTED_SECTION.type,
rank: _toolbar.PASTE_MENU_NESTED_SECTION_RANK[_toolbar.PASTE_RICH_TEXT_MENU_ITEM.key]
}]
}, {
key: _toolbar.PASTE_MARKDOWN_MENU_ITEM.key,
type: _toolbar.PASTE_MARKDOWN_MENU_ITEM.type,
component: function component() {
return /*#__PURE__*/_react.default.createElement(PasteMenuItem, {
api: api,
pasteType: "markdown"
});
},
parents: [{
key: _toolbar.PASTE_MENU_NESTED_SECTION.key,
type: _toolbar.PASTE_MENU_NESTED_SECTION.type,
rank: _toolbar.PASTE_MENU_NESTED_SECTION_RANK[_toolbar.PASTE_MARKDOWN_MENU_ITEM.key]
}]
}, {
key: _toolbar.PASTE_PLAIN_TEXT_MENU_ITEM.key,
type: _toolbar.PASTE_PLAIN_TEXT_MENU_ITEM.type,
component: function component() {
return /*#__PURE__*/_react.default.createElement(PasteMenuItem, {
api: api,
pasteType: "plain-text"
});
},
parents: [{
key: _toolbar.PASTE_MENU_NESTED_SECTION.key,
type: _toolbar.PASTE_MENU_NESTED_SECTION.type,
rank: _toolbar.PASTE_MENU_NESTED_SECTION_RANK[_toolbar.PASTE_PLAIN_TEXT_MENU_ITEM.key]
}]
}];
};