@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
115 lines • 4.25 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { forwardRef, useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import debounce from 'lodash/debounce';
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
import CommentIcon from '@atlaskit/icon/core/comment';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
import { commentMessages as messages } from '../media';
const commentBadgeWrapper = css({
position: 'absolute',
// closest parent element with position relative is .resizer-hover-zone, which includes 10px padding
right: '2px',
top: '2px',
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
borderRadius: "var(--ds-radius-small, 3px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
zIndex: akEditorUnitZIndex * 10
});
const commentBadgeEditorOverrides = badgeOffsetRight => css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
right: badgeOffsetRight,
zIndex: 100
});
export const getBadgeSize = (width, height) => {
// width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
return width && width < 70 || height && height < 70 ? 'small' : 'medium';
};
export const CommentBadge = /*#__PURE__*/forwardRef(({
intl,
width,
height,
status = 'default',
mediaSingleElement,
onClick,
onMouseEnter,
onMouseLeave,
badgeOffsetRight
}, ref) => {
const [badgeSize, setBadgeSize] = useState(getBadgeSize(width, height));
const title = intl.formatMessage(messages.viewCommentsOnMedia);
useEffect(() => {
const observer = new ResizeObserver(debounce(entries => {
const [entry] = entries;
const {
width,
height
} = entry.contentRect;
setBadgeSize(getBadgeSize(width, height));
}));
if (mediaSingleElement instanceof HTMLElement) {
observer.observe(mediaSingleElement);
}
return () => {
observer.disconnect();
};
}, [mediaSingleElement]);
const badgeDimensions = badgeSize === 'medium' ? '24px' : '16px';
const colourToken = useMemo(() => {
switch (status) {
case 'active':
return "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)";
case 'entered':
return "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)";
default:
return "var(--ds-background-accent-yellow-subtlest, #FEF7C8)";
}
}, [status]);
const memoizedBadgeStyle = useMemo(() => ({
height: badgeDimensions,
width: badgeDimensions,
background: colourToken,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}), [badgeDimensions, colourToken]);
const badgeStyle = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedBadgeStyle : {
height: badgeDimensions,
width: badgeDimensions,
background: colourToken,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
return jsx("div", {
ref: ref,
css: badgeOffsetRight ? [commentBadgeWrapper,
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
commentBadgeEditorOverrides(badgeOffsetRight)] : commentBadgeWrapper
// This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
// can target the correct div
,
"data-comment-badge": "true"
}, jsx(Tooltip, {
position: "top",
content: title
}, jsx(CustomThemeButton
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
, {
style: badgeStyle,
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
iconAfter: jsx(CommentIcon, {
label: title,
spacing: "spacious",
color: "currentColor"
})
})));
});