@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
201 lines (197 loc) • 8.52 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToolbarDropdown = ToolbarDropdown;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _listBulletedEditorBulletList = _interopRequireDefault(require("@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list"));
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _types = require("../types");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function ToolbarDropdown(props) {
var _useIntl = (0, _reactIntlNext.useIntl)(),
formatMessage = _useIntl.formatMessage;
var disabled = props.disabled,
isReducedSpacing = props.isReducedSpacing,
bulletListActive = props.bulletListActive,
orderedListActive = props.orderedListActive,
popupsMountPoint = props.popupsMountPoint,
popupsBoundariesElement = props.popupsBoundariesElement,
popupsScrollableElement = props.popupsScrollableElement,
onItemActivated = props.onItemActivated,
pluginInjectionApi = props.pluginInjectionApi;
var _React$useState = _react.default.useState(false),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
isDropdownOpen = _React$useState2[0],
setIsDropdownOpen = _React$useState2[1];
var _React$useState3 = _react.default.useState(false),
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
isOpenedByKeyboard = _React$useState4[0],
setOpenedByKeyboard = _React$useState4[1];
var labelLists = formatMessage(_messages.listMessages.lists);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var onOpenChange = function onOpenChange(attrs) {
setIsDropdownOpen(attrs.isDropdownOpen);
};
var handleTriggerClick = function handleTriggerClick() {
onOpenChange({
isDropdownOpen: !isDropdownOpen
});
};
var handleOnKeyDown = function handleOnKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
setIsDropdownOpen(!isDropdownOpen);
setOpenedByKeyboard(true);
}
};
var items = useItems(props);
var handleOnItemActivated = function handleOnItemActivated(_ref) {
var item = _ref.item,
_ref$shouldCloseMenu = _ref.shouldCloseMenu,
shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
setIsDropdownOpen(!shouldCloseMenu);
return onItemActivated({
editorView: props.editorView,
buttonName: item.value.name
});
};
var reducedSpacing = props.toolbarType === _types.ToolbarType.FLOATING ? 'compact' : 'none';
return (
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("span", {
css: _styles.wrapperStyle
}, (0, _react2.jsx)(_uiMenu.DropdownMenuWithKeyboardNavigation, {
items: items,
onItemActivated: handleOnItemActivated,
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
isOpen: isDropdownOpen,
onOpenChange: onOpenChange,
fitHeight: 188,
fitWidth: 175,
shouldUseDefaultRole: true,
shouldFocusFirstItem: function shouldFocusFirstItem() {
if (isOpenedByKeyboard) {
setOpenedByKeyboard(false);
}
return isOpenedByKeyboard;
}
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
spacing: isReducedSpacing ? reducedSpacing : 'default',
selected: bulletListActive || orderedListActive || isDropdownOpen,
"aria-expanded": isDropdownOpen,
"aria-haspopup": true,
"aria-label": labelLists,
disabled: disabled,
onClick: handleTriggerClick,
onKeyDown: handleOnKeyDown,
title: labelLists,
iconBefore:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("span", {
css: _styles.wrapperStyle
}, (0, _react2.jsx)(_listBulletedEditorBulletList.default, {
color: "currentColor",
spacing: "spacious",
label: labelLists
}), (0, _react2.jsx)("span", {
css: [
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
_styles.expandIconContainerStyle]
}, (0, _react2.jsx)(_chevronDown.default, {
color: "currentColor",
label: "",
LEGACY_margin: "0 0 0 -8px"
})))
})), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("span", {
css: _styles.separatorStyles
}))
);
}
function useItems(props) {
var _useIntl2 = (0, _reactIntlNext.useIntl)(),
formatMessage = _useIntl2.formatMessage;
var labelUnorderedList = formatMessage(_messages.listMessages.unorderedList);
var labelOrderedList = formatMessage(_messages.listMessages.orderedList);
var items = [{
key: 'unorderedList',
content: labelUnorderedList,
value: {
name: 'bullet_list'
},
isDisabled: props.bulletListDisabled,
isActive: Boolean(props.bulletListActive),
elemAfter:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, (0, _keymaps.tooltip)(_keymaps.toggleBulletList))
}, {
key: 'orderedList',
content: labelOrderedList,
value: {
name: 'ordered_list'
},
isDisabled: props.orderedListDisabled,
isActive: Boolean(props.orderedListActive),
elemAfter:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList))
}];
if (props.showIndentationButtons) {
var labelIndent = formatMessage(_messages.indentationMessages.indent);
var labelOutdent = formatMessage(_messages.indentationMessages.outdent);
items.push({
key: 'outdent',
content: labelOutdent,
value: {
name: 'outdent'
},
isDisabled: props.outdentDisabled,
isActive: false,
elemAfter:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, (0, _keymaps.tooltip)(_keymaps.outdent))
}, {
key: 'indent',
content: labelIndent,
value: {
name: 'indent'
},
isDisabled: props.indentDisabled,
isActive: false,
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
elemAfter: (0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, (0, _keymaps.tooltip)(_keymaps.indent))
});
}
return [{
items: items
}];
}