@atlaskit/editor-plugin-floating-toolbar
Version:
Floating toolbar plugin for @atlaskit/editor-core
781 lines (771 loc) • 37.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Component } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import ButtonGroup from '@atlaskit/button/button-group';
import Announcer from '@atlaskit/editor-common/announcer';
import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
import messages from '@atlaskit/editor-common/floating-toolbar/messages';
import Button from '@atlaskit/editor-common/FloatingToolbar/Button';
import Separator from '@atlaskit/editor-common/FloatingToolbar/Separator';
import commonMessages from '@atlaskit/editor-common/messages';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color/ColorPalette/paletteMessagesTokenModeNames';
import ColorPickerButton from '@atlaskit/editor-common/ui-menu/ColorPickerButton';
import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu/ToolbarArrowKeyNavigationProvider';
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette/background';
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
import Dropdown from './Dropdown';
import { EmojiPickerButton } from './EmojiPickerButton';
import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
import { Input } from './Input';
import { ScrollButton } from './ScrollButton';
import { ScrollButtons } from './ScrollButtons';
import Select from './Select';
// eslint-disable-next-line jsdoc/require-jsdoc
export function groupItems(items, areAnyNewToolbarFlagsEnabled) {
var groupItems = items.reduce(function (accumulator, item, i) {
var finalOutput = accumulator.finalOutput,
buttonGroup = accumulator.buttonGroup;
if (item.type === 'button') {
var notLastItem = i < items.length - 1;
var nextItemIsButton = items[i + 1] && items[i + 1].type === 'button';
var wasPreviousButton = items[i - 1] && items[i - 1].type === 'button';
var shouldBeRadioButton = notLastItem && nextItemIsButton || wasPreviousButton;
// Only group as radio button if not explicitly set to false
var isRadioButton = shouldBeRadioButton && item.isRadioButton !== false;
if (isRadioButton) {
item.isRadioButton = true;
buttonGroup.push(item);
if (!nextItemIsButton && wasPreviousButton) {
finalOutput.push(buttonGroup);
accumulator.buttonGroup = [];
}
} else {
finalOutput.push(item);
}
} else if (item.type === 'separator' && areAnyNewToolbarFlagsEnabled) {
var _items;
var isLeadingSeparator = i === 0;
var isTrailingSeparator = i === items.length - 1;
var isDuplicateSeparator = ((_items = items[i - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'separator';
!isLeadingSeparator && !isTrailingSeparator && !isDuplicateSeparator && finalOutput.push(item);
} else {
finalOutput.push(item);
}
return accumulator;
}, {
buttonGroup: [],
finalOutput: []
});
return groupItems.finalOutput;
}
var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
var items = _ref.items,
groupLabel = _ref.groupLabel,
dispatchCommand = _ref.dispatchCommand,
popupsMountPoint = _ref.popupsMountPoint,
popupsBoundariesElement = _ref.popupsBoundariesElement,
editorView = _ref.editorView,
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
popupsScrollableElement = _ref.popupsScrollableElement,
scrollable = _ref.scrollable,
providerFactory = _ref.providerFactory,
extensionsProvider = _ref.extensionsProvider,
node = _ref.node,
setDisableScroll = _ref.setDisableScroll,
mountRef = _ref.mountRef,
api = _ref.api,
intl = _ref.intl;
var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
var renderItem = function renderItem(item, idx) {
var _api$contextPanel, _api$extension;
switch (item.type) {
case 'button':
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var ButtonIcon = item.icon;
var onClickHandler = function onClickHandler() {
if (item.confirmDialog) {
dispatchCommand(showConfirmDialog(idx));
} else {
dispatchCommand(item.onClick);
if (item.focusEditoronEnter && !(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
editorView === null || editorView === void 0 || editorView.focus();
}
}
};
var getIconColor = function getIconColor(disabled, selected) {
if (disabled) {
return "var(--ds-icon-disabled, #080F214A)";
}
if (selected) {
return "var(--ds-icon-selected, #1868DB)";
}
return 'currentColor';
};
return jsx(Button
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
, {
className: item.className,
key: idx,
title: item.title,
href: item.href,
icon: item.icon ? jsx(ButtonIcon, {
color: getIconColor(item.disabled, item.selected),
spacing: "spacious",
label: undefined,
"aria-hidden": true // Icon is described by the button for screen readers
}) : undefined,
iconAfter: item.iconAfter ? jsx(item.iconAfter, {
label: ""
}) : undefined,
appearance: item.appearance,
target: item.target,
onClick: onClickHandler
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseEnter: function onMouseEnter() {
return dispatchCommand(item.onMouseEnter);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseLeave: function onMouseLeave() {
return dispatchCommand(item.onMouseLeave);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onFocus: function onFocus() {
return dispatchCommand(item.onFocus);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onBlur: function onBlur() {
return dispatchCommand(item.onBlur);
},
onMount: item.onMount,
onUnmount: item.onUnmount,
selected: item.selected,
disabled: item.disabled,
tooltipContent: item.tooltipContent,
testId: item.testId,
hideTooltipOnClick: item.hideTooltipOnClick,
hasNewContentOnTriggerClick: item.hasNewContentOnTriggerClick,
ariaHasPopup: item.ariaHasPopup,
tabIndex: item.tabIndex,
isRadioButton: item.isRadioButton,
ariaLabel: item === null || item === void 0 ? void 0 : item.ariaLabel,
pulse: item.pulse,
interactionName: item.interactionName,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}, item.showTitle && item.title);
case 'input':
return jsx(Input, {
key: idx,
mountPoint: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
defaultValue: item.defaultValue,
placeholder: item.placeholder
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSubmit: function onSubmit(value) {
return dispatchCommand(item.onSubmit(value));
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onBlur: function onBlur(value) {
return dispatchCommand(item.onBlur(value));
}
});
case 'custom':
{
return item.render(editorView, idx, dispatchAnalyticsEvent, {
popupsBoundariesElement: popupsBoundariesElement,
popupsMountPoint: popupsMountPoint,
popupsScrollableElement: popupsScrollableElement,
scrollable: scrollable,
setDisableParentScroll: scrollable ? setDisableScroll : undefined
});
}
case 'overflow-dropdown':
// if an option has a confirmDialog, we need to replace its onClick handler
// to set the state to show the confirm dialog
// crudely done here to avoid greater coupling with DropdownMenuItem from `floating-toolbar`
// which would need knowledge of indexes, showConfirmDialog etc.
var options = item.options.map(function (option, optionIndex) {
if (!('type' in option) && option.confirmDialog) {
var onClick = option.confirmDialog ? showConfirmDialog(idx, optionIndex) : option.onClick;
return _objectSpread(_objectSpread({}, option), {}, {
onClick: onClick
});
}
return option;
});
return jsx(Dropdown, {
alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
key: idx,
title: intl.formatMessage(commonMessages.viewMore),
icon: jsx(ShowMoreHorizontalIcon, {
label: "",
spacing: "spacious"
}),
dispatchCommand: dispatchCommand,
options: options,
disabled: item.disabled,
tooltip: item.tooltip,
hideExpandIcon: true,
mountPoint: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
dropdownWidth: item.dropdownWidth,
showSelected: item.showSelected,
buttonTestId: item.testId,
editorView: editorView,
setDisableParentScroll: scrollable ? setDisableScroll : undefined,
dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
alignDropdownWithToolbar: items.length === 1,
onClick: item.onClick,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
case 'dropdown':
var DropdownIcon = item.icon;
var BeforeIcon = item.iconBefore;
return jsx(Dropdown, {
key: idx,
title: item.title,
icon: DropdownIcon && jsx(DropdownIcon, {
label: item.title
}),
iconBefore: BeforeIcon && jsx(BeforeIcon, {
label: ""
}),
dispatchCommand: dispatchCommand,
options: item.options,
disabled: item.disabled,
tooltip: item.tooltip,
hideExpandIcon: item.hideExpandIcon,
mountPoint: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
dropdownWidth: item.dropdownWidth,
showSelected: item.showSelected,
buttonTestId: item.testId,
editorView: editorView,
setDisableParentScroll: scrollable ? setDisableScroll : undefined,
dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
alignDropdownWithToolbar: items.length === 1,
onToggle: item.onToggle,
footer: item.footer,
onMount: item.onMount,
onClick: item.onClick,
pulse: item.pulse,
shouldFitContainer: item.shouldFitContainer,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
case 'select':
if (item.selectType === 'list') {
var ariaLabel = item.title || item.placeholder;
return jsx(Select, {
key: idx,
dispatchCommand: dispatchCommand,
options: item.options,
hideExpandIcon: item.hideExpandIcon
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
mountPoint: scrollable ? mountRef.current : undefined,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
defaultValue: item.defaultValue,
placeholder: item.placeholder
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(selected) {
return dispatchCommand(item.onChange(selected));
},
ariaLabel: ariaLabel,
filterOption: item.filterOption,
setDisableParentScroll: scrollable ? setDisableScroll : undefined,
classNamePrefix: 'floating-toolbar-select'
});
}
if (item.selectType === 'color') {
var _item$hexToPaletteCol, _item$paletteColorToo;
return jsx(ColorPickerButton, {
skipFocusButtonAfterPick: true,
key: idx,
isAriaExpanded: item.isAriaExpanded,
hideExpandIcon: item.hideExpandIcon,
title: item.title
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(selected) {
dispatchCommand(item.onChange(selected));
},
cols: item.cols,
colorPalette: item.options,
currentColor: item.defaultValue ? item.defaultValue.value : undefined,
placement: "Panels",
mountPoint: emojiAndColourPickerMountPoint,
setDisableParentScroll: scrollable ? setDisableScroll : undefined,
hexToPaletteColor: isExperimentEnabled('platform_editor_lovability_dividers') ? (_item$hexToPaletteCol = item.hexToPaletteColor) !== null && _item$hexToPaletteCol !== void 0 ? _item$hexToPaletteCol : hexToEditorBackgroundPaletteColor : hexToEditorBackgroundPaletteColor,
paletteColorTooltipMessages: isExperimentEnabled('platform_editor_lovability_dividers') ? (_item$paletteColorToo = item.paletteColorTooltipMessages) !== null && _item$paletteColorToo !== void 0 ? _item$paletteColorToo : backgroundPaletteTooltipMessages : backgroundPaletteTooltipMessages,
returnEscToButton: item.returnEscToButton
});
}
if (item.selectType === 'emoji') {
return jsx(EmojiPickerButton, {
key: idx,
editorView: editorView,
title: item.title,
providerFactory: providerFactory,
isSelected: item.selected
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(selected) {
return dispatchCommand(item.onChange(selected));
},
mountPoint: emojiAndColourPickerMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
setDisableParentScroll: scrollable ? setDisableScroll : undefined,
pluginInjectionApi: api
});
}
return null;
case 'extensions-placeholder':
if (!editorView || !extensionsProvider) {
return null;
}
return jsx(ExtensionsPlaceholder, {
key: idx,
node: node,
editorView: editorView,
extensionProvider: extensionsProvider,
separator: item.separator,
applyChangeToContextPanel: api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api(),
dispatchCommand: dispatchCommand,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
alignDropdownWithToolbar: items.length === 1,
scrollable: scrollable,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
case 'separator':
if (areAnyNewToolbarFlagsEnabled) {
return item.fullHeight ? jsx(Separator, {
key: idx,
fullHeight: true,
areAnyNewToolbarFlagsEnabled: true
}) : null;
}
return jsx(Separator, {
key: idx,
fullHeight: item.fullHeight,
areAnyNewToolbarFlagsEnabled: false
});
}
};
var groupedItems = groupItems(
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
items.filter(function (item) {
return !item.hidden;
}), areAnyNewToolbarFlagsEnabled);
return jsx(ButtonGroup, {
testId: "editor-floating-toolbar-items"
}, groupedItems.map(function (element, index) {
var isGroup = Array.isArray(element);
if (isGroup) {
return jsx("div", {
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
key: index,
css: areAnyNewToolbarFlagsEnabled ? buttonGroupStylesNew : buttonGroupStyles,
role: "radiogroup",
"aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
"data-testid": "editor-floating-toolbar-grouped-buttons"
}, element.map(function (element) {
var indexInAllItems = items.findIndex(function (item) {
return item === element;
});
return renderItem(element, indexInAllItems);
}));
} else {
var indexInAllItems = items.findIndex(function (item) {
return item === element;
});
return renderItem(element, indexInAllItems);
}
}));
}, function (prevProps, nextProps) {
if (!nextProps.node) {
return false;
}
// only rerender toolbar items if the node is different
// otherwise it causes an issue where multiple popups stays open
return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || prevProps.popupsBoundariesElement !== nextProps.popupsBoundariesElement || prevProps.popupsMountPoint !== nextProps.popupsMountPoint || prevProps.popupsScrollableElement !== nextProps.popupsScrollableElement || prevProps.scrollable !== nextProps.scrollable || prevProps.setDisableScroll !== nextProps.setDisableScroll || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
});
var buttonGroupStyles = css({
display: 'flex',
gap: "var(--ds-space-050, 4px)"
});
var buttonGroupStylesNew = css({
display: 'flex',
gap: "var(--ds-space-075, 6px)"
});
var toolbarContainerBase = css({
display: 'flex',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1,
boxSizing: 'border-box',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > div > div': {
alignItems: 'center'
}
});
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
return css(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
containerSurface === 'none' ? undefined : {
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
borderRadius: "var(--ds-radius-small, 3px)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
containerSurface === 'none' ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
padding: "var(--ds-space-0, 0px)"
}) : scrollable ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
hasSelect ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
height: '40px'
}) :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
height: '32px'
}), {
overflow: 'hidden'
}) :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
areAnyNewToolbarFlagsEnabled ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
padding: "var(--ds-space-0, 0px)".concat(" 4px ", "var(--ds-space-0, 0px)", " 4px")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
firstElementIsSelect &&
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
paddingLeft: "var(--ds-space-050, 4px)"
})) :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
firstElementIsSelect &&
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
paddingLeft: "var(--ds-space-050, 4px)"
})),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
areAnyNewToolbarFlagsEnabled ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
css({
minHeight: "var(--ds-space-500, 40px)"
}) : undefined);
};
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
var toolbarOverflow = function toolbarOverflow(_ref2) {
var scrollable = _ref2.scrollable,
scrollDisabled = _ref2.scrollDisabled,
firstElementIsSelect = _ref2.firstElementIsSelect,
areAnyNewToolbarFlagsEnabled = _ref2.areAnyNewToolbarFlagsEnabled;
return css(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
scrollable ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
scrollDisabled ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
overflow: 'hidden'
}) :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
css({
overflowX: 'auto',
overflowY: 'hidden',
// When scrollable is true, ScrollButtons will be shown, hence we want to hide show default horizontal scrollbar
scrollbarWidth: 'none'
}), {
WebkitOverflowScrolling: 'touch',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
padding: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-050, 4px)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'> div': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
'> div:first-child': firstElementIsSelect ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
marginLeft: "var(--ds-space-050, 4px)"
}) :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
marginLeft: "var(--ds-space-100, 8px)"
}),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'> div:nth-last-child(1 of :not(:where([popover], dialog)))': {
marginRight: "var(--ds-space-100, 8px)"
}
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
areAnyNewToolbarFlagsEnabled ?
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
padding: "var(--ds-space-0, 0px)".concat(" 4px ", "var(--ds-space-600, 48px)", " 4px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> div': {
minHeight: "var(--ds-space-500, 40px)",
gap: "var(--ds-space-075, 6px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'> div:first-child': {
marginLeft: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'> div:nth-last-child(1 of :not(:where([popover], dialog)))': {
marginRight: 0
}
}
}) : undefined) :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
css({
display: 'flex'
}));
};
// eslint-disable-next-line @repo/internal/react/no-class-components
var Toolbar = /*#__PURE__*/function (_Component) {
function Toolbar(props) {
var _this;
_classCallCheck(this, Toolbar);
_this = _callSuper(this, Toolbar, [props]);
_defineProperty(_this, "setDisableScroll", function (disabled) {
// wait before setting disabled state incase users jumping from one popup to another
if (disabled) {
requestAnimationFrame(function () {
_this.setState({
scrollDisabled: disabled
});
});
} else {
_this.setState({
scrollDisabled: disabled
});
}
});
_defineProperty(_this, "shouldHandleArrowKeys", function () {
var _this$props$items;
//To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
//Usually the button which has menus or popups
return !((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(function (item) {
return item.type === 'custom' && item.disableArrowNavigation;
}));
});
_defineProperty(_this, "handleEscape", function (event) {
var _this$props$editorVie;
// If any menu is open inside the floating toolbar 'Esc' key should not
// focus the editorview.
// Event can't be stopped as they are not childnodes of floating toolbar
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
var isDropdownOpen = !!document.querySelector('[data-role="droplistContent"]');
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
var isSelectMenuOpen = !!document.querySelector('.floating-toolbar-select__menu');
if (isDropdownOpen || isSelectMenuOpen) {
return;
}
(_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 || _this$props$editorVie.focus();
event.preventDefault();
event.stopPropagation();
});
_defineProperty(_this, "captureMouseEvent", function (event) {
var _this$props$items2;
// Don't capture mouse event for custom toolbars e.g. insert hyperlink
if (((_this$props$items2 = _this.props.items) === null || _this$props$items2 === void 0 ? void 0 : _this$props$items2.length) === 1 && _this.props.items[0].type === 'custom') {
return;
}
// Prevents toolbar from closing when clicking on the toolbar itself and not on the buttons
event.stopPropagation();
event.preventDefault();
});
_defineProperty(_this, "isShortcutToFocusToolbar", function (event) {
//Alt + F10 to reach first element in this floating toolbar
return event.altKey && (event.key === 'F10' || event.keyCode === 121);
});
_this.scrollContainerRef = /*#__PURE__*/React.createRef();
_this.mountRef = /*#__PURE__*/React.createRef();
_this.toolbarContainerRef = /*#__PURE__*/React.createRef();
_this.state = {
scrollDisabled: false,
mounted: false
};
return _this;
}
// remove any decorations added by toolbar buttons i.e danger and selected styling
// this prevents https://product-fabric.atlassian.net/browse/ED-10207
_inherits(Toolbar, _Component);
return _createClass(Toolbar, [{
key: "resetStyling",
value: function resetStyling() {
if (this.props.editorView) {
var _this$props$api;
var _this$props$editorVie2 = this.props.editorView,
state = _this$props$editorVie2.state,
dispatch = _this$props$editorVie2.dispatch;
(_this$props$api = this.props.api) === null || _this$props$api === void 0 || (_this$props$api = _this$props$api.decorations) === null || _this$props$api === void 0 || _this$props$api.actions.removeDecoration(state, dispatch);
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
mounted: true
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props;
checkShouldForceFocusAndApply((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
if (this.props.node !== prevProps.node) {
this.resetStyling();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var editorView = this.props.editorView;
if (editorView) {
var tr = editorView.state.tr,
dispatch = editorView.dispatch;
dispatch(forceFocusSelector(null)(tr));
}
this.resetStyling();
}
}, {
key: "render",
value: function render() {
var _this$props$api2,
_this2 = this;
var _this$props2 = this.props,
items = _this$props2.items,
className = _this$props2.className,
node = _this$props2.node,
intl = _this$props2.intl,
scrollable = _this$props2.scrollable,
mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean((_this$props$api2 = this.props.api) === null || _this$props$api2 === void 0 ? void 0 : _this$props$api2.toolbar));
if (!items || !items.length) {
return null;
}
// Select has left padding of 4px to the border, everything else 8px
var firstElementIsSelect = items[0].type === 'select';
var hasSelect = items.find(function (item) {
return item.type === 'select' && item.selectType === 'list';
});
return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
editorView: this.props.editorView,
handleEscape: this.handleEscape,
disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
childComponentSelector: "[data-testid='editor-floating-toolbar']",
isShortcutToFocusToolbar: this.isShortcutToFocusToolbar,
intl: intl
}, jsx("div", {
ref: this.toolbarContainerRef,
css: function css() {
return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
},
"aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
role: "toolbar",
"data-testid": "editor-floating-toolbar"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
onMouseDown: areAnyNewToolbarFlagsEnabled ? this.captureMouseEvent : undefined
}, jsx(Announcer, {
text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
delay: 250
}), scrollable && areAnyNewToolbarFlagsEnabled && jsx(ScrollButton, {
intl: intl,
scrollContainerRef: this.scrollContainerRef,
node: node,
disabled: this.state.scrollDisabled,
side: "left"
}), jsx("div", {
"data-testid": "floating-toolbar-items",
ref: this.scrollContainerRef
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
,
css: toolbarOverflow({
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled,
scrollable: scrollable,
scrollDisabled: this.state.scrollDisabled,
firstElementIsSelect: firstElementIsSelect
})
}, jsx(ToolbarItems
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, this.props, {
setDisableScroll: this.setDisableScroll,
mountRef: this.mountRef,
mounted: this.state.mounted
}))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {
intl: intl,
scrollContainerRef: this.scrollContainerRef,
node: node,
disabled: this.state.scrollDisabled,
side: "right"
}) : jsx(ScrollButtons, {
intl: intl,
scrollContainerRef: this.scrollContainerRef,
node: node,
disabled: this.state.scrollDisabled,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}))), jsx("div", {
ref: this.mountRef
})));
}
}]);
}(Component); // eslint-disable-next-line @typescript-eslint/no-restricted-types
var _default_1 = injectIntl(Toolbar);
export default _default_1;