@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
194 lines (187 loc) • 7.5 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
import { ButtonItem } from '@atlaskit/menu';
import Tooltip from '@atlaskit/tooltip';
import { messages } from '../floating-toolbar';
export var menuItemDimensions = {
width: 175,
height: 32
};
var labelStyles = css({
display: 'inline-block',
width: '100%'
});
var spacerStyles = css({
display: 'flex',
flex: 1,
padding: "var(--ds-space-100, 8px)"
});
// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
var DropdownButtonItem = ButtonItem;
var SelectedIconBefore = function SelectedIconBefore(_ref) {
var itemSelected = _ref.itemSelected,
intl = _ref.intl,
showSelected = _ref.showSelected;
if (showSelected && itemSelected) {
return jsx("span", {
"aria-hidden": "true"
}, jsx(EditorDoneIcon, {
label: intl.formatMessage(messages.confirmModalOK),
spacing: "none"
}));
}
return jsx("span", {
css: spacerStyles
});
};
export var DropdownMenuItem = function DropdownMenuItem(props) {
var item = props.item,
hide = props.hide,
dispatchCommand = props.dispatchCommand,
editorView = props.editorView,
showSelected = props.showSelected,
intl = props.intl;
var itemSelected = item.selected;
var iconBefore = useMemo(function () {
if (item.icon) {
return item.icon;
} else {
return jsx(SelectedIconBefore, {
itemSelected: itemSelected,
showSelected: showSelected,
intl: intl
});
}
}, [itemSelected, showSelected, intl, item.icon]);
var _useState = useState(item.tooltip || ''),
_useState2 = _slicedToArray(_useState, 2),
tooltipContent = _useState2[0],
setTooltipContent = _useState2[1];
var handleItemMouseOut = useCallback(function () {
setTooltipContent('');
if (item.onMouseOut) {
dispatchCommand(item.onMouseOut);
}
}, [item.onMouseOut, dispatchCommand]);
var handleItemMouseDown = useCallback(function (e) {
e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
if (item.onMouseDown) {
dispatchCommand(item.onMouseDown);
}
}, [item.onMouseDown, dispatchCommand]);
var handleItemMouseOver = useCallback(function () {
setTooltipContent(item.tooltip || '');
if (item.onMouseOver) {
dispatchCommand(item.onMouseOver);
}
}, [item.tooltip, item.onMouseOver, dispatchCommand]);
var handleItemMouseEnter = useCallback(function (e) {
if (item.onMouseEnter) {
e.preventDefault();
dispatchCommand(item.onMouseEnter);
}
}, [item.onMouseEnter, dispatchCommand]);
var handleItemMouseLeave = useCallback(function (e) {
if (item.onMouseLeave) {
e.preventDefault();
dispatchCommand(item.onMouseLeave);
}
}, [item.onMouseLeave, dispatchCommand]);
var handleItemOnFocus = useCallback(function (e) {
if (item.onFocus) {
e.preventDefault();
dispatchCommand(item.onFocus);
}
}, [item.onFocus, dispatchCommand]);
var handleItemOnBlur = useCallback(function (e) {
if (item.onBlur) {
e.preventDefault();
dispatchCommand(item.onBlur);
}
}, [item.onBlur, dispatchCommand]);
var handleItemClick = useCallback(function () {
/**
* The order of dispatching the event and hide() is important, because
* the ClickAreaBlock will be relying on the element to calculate the
* click coordinate.
* For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
*/
dispatchCommand(item.onClick);
hide();
if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
editorView === null || editorView === void 0 || editorView.focus();
}
}, [dispatchCommand, item.onClick, hide, editorView]);
/* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
var labelRef = useRef(null);
var handleTitleWrapperMouseEvent = useCallback(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function (e) {
if (item.disabled) {
e.stopPropagation();
e.preventDefault();
}
}, [item.disabled]);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var isAriaChecked = function isAriaChecked(item) {
var selected = item.selected,
domItemOptions = item.domItemOptions;
return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
};
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var hasRole = function hasRole(item) {
var _item$domItemOptions;
// Always return proper menu roles to fix aria-required-children violations
return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : 'menuitem';
};
useEffect(function () {
var labelRefCurrent = labelRef.current;
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
return function () {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
};
});
var itemContent = jsx(DropdownButtonItem, {
isSelected: itemSelected,
iconBefore: iconBefore,
iconAfter: item.elemAfter,
onClick: handleItemClick,
"data-testid": item.testId,
isDisabled: item.disabled,
onMouseDown: handleItemMouseDown,
onMouseOver: handleItemMouseOver,
onMouseEnter: handleItemMouseEnter,
onMouseLeave: handleItemMouseLeave,
onMouseOut: handleItemMouseOut,
onFocus: handleItemOnFocus,
onBlur: handleItemOnBlur,
role: hasRole(item),
"aria-checked": isAriaChecked(item)
}, jsx("span", {
ref: labelRef,
css: labelStyles
}, item.title));
if (tooltipContent) {
return jsx(Tooltip, {
content: tooltipContent
}, itemContent);
}
return itemContent;
};