@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
195 lines (188 loc) • 7.1 kB
JavaScript
/**
* @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 const menuItemDimensions = {
width: 175,
height: 32
};
const labelStyles = css({
display: 'inline-block',
width: '100%'
});
const 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
const DropdownButtonItem = ButtonItem;
const SelectedIconBefore = ({
itemSelected,
intl,
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 const DropdownMenuItem = props => {
const {
item,
hide,
dispatchCommand,
editorView,
showSelected,
intl
} = props;
const itemSelected = item.selected;
const iconBefore = useMemo(() => {
if (item.icon) {
return item.icon;
} else {
return jsx(SelectedIconBefore, {
itemSelected: itemSelected,
showSelected: showSelected,
intl: intl
});
}
}, [itemSelected, showSelected, intl, item.icon]);
const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
const handleItemMouseOut = useCallback(() => {
setTooltipContent('');
if (item.onMouseOut) {
dispatchCommand(item.onMouseOut);
}
}, [item.onMouseOut, dispatchCommand]);
const handleItemMouseDown = useCallback(e => {
e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
if (item.onMouseDown) {
dispatchCommand(item.onMouseDown);
}
}, [item.onMouseDown, dispatchCommand]);
const handleItemMouseOver = useCallback(() => {
setTooltipContent(item.tooltip || '');
if (item.onMouseOver) {
dispatchCommand(item.onMouseOver);
}
}, [item.tooltip, item.onMouseOver, dispatchCommand]);
const handleItemMouseEnter = useCallback(e => {
if (item.onMouseEnter) {
e.preventDefault();
dispatchCommand(item.onMouseEnter);
}
}, [item.onMouseEnter, dispatchCommand]);
const handleItemMouseLeave = useCallback(e => {
if (item.onMouseLeave) {
e.preventDefault();
dispatchCommand(item.onMouseLeave);
}
}, [item.onMouseLeave, dispatchCommand]);
const handleItemOnFocus = useCallback(e => {
if (item.onFocus) {
e.preventDefault();
dispatchCommand(item.onFocus);
}
}, [item.onFocus, dispatchCommand]);
const handleItemOnBlur = useCallback(e => {
if (item.onBlur) {
e.preventDefault();
dispatchCommand(item.onBlur);
}
}, [item.onBlur, dispatchCommand]);
const handleItemClick = useCallback(() => {
/**
* 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 ? 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 */
const labelRef = useRef(null);
const handleTitleWrapperMouseEvent = useCallback(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
e => {
if (item.disabled) {
e.stopPropagation();
e.preventDefault();
}
}, [item.disabled]);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const isAriaChecked = item => {
const {
selected,
domItemOptions
} = item;
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
const 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(() => {
const labelRefCurrent = labelRef.current;
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
return () => {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
};
});
const 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;
};