@atlaskit/renderer
Version:
Renderer component
259 lines (256 loc) • 11.6 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useMemo, useCallback } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { AnnotationMarkStates } from '@atlaskit/adf-schema';
import { fg } from '@atlaskit/platform-feature-flags';
import { useIntl } from 'react-intl';
import { inlineCommentMessages } from '../../../messages';
import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
const markStyles = css({
color: 'inherit',
backgroundColor: 'unset',
WebkitTapHighlightColor: 'transparent',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
// was from blur in AnnotationSharedCSSByState().blur
background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-has-focus="true"]': {
background: "var(--ds-background-accent-yellow-subtler, #F5E989)",
borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
// TODO: DSP-4147 - Annotation shadow
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
cursor: 'pointer'
}
}
});
const markStylesLayeringFix = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
// Only apply transparency to nested marks when parent is focused
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-has-focus="true"] mark': {
backgroundColor: 'transparent'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-background-color-mark &[data-has-focus="true"], &[data-has-focus="true"]': {
background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"
}
}
});
const markStylesWithUpdatedShadow = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-has-focus="true"]': {
background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"
}
}
});
const markStylesWithInlineComments = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
// was from common in AnnotationSharedCSSByState().common
borderBottom: `${"var(--ds-border-width-selected, 2px)"} solid transparent`,
cursor: 'pointer',
padding: `1px 0 ${"var(--ds-space-025, 2px)"}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:has(.card), &:has([data-inline-card])': {
padding: '5px 0 3px 0'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:has(.date-lozenger-container)': {
paddingTop: "var(--ds-space-025, 2px)"
},
// was from blur in AnnotationSharedCSSByState().blur
background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-has-focus="true"]': {
background: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
}
}
});
const markStylesWithCommentsPanel = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'&[data-is-hovered="true"]:not([data-has-focus="true"])': {
background: "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
}
}
});
const isMobile = () => {
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
};
const accessibilityStylesOld = css({
'&::before, &::after': {
clipPath: 'inset(100%)',
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
whiteSpace: 'nowrap',
width: '1px'
},
'&::before': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
content: `' [var(--ak-renderer-annotation-startmarker)] '`
},
'&::after': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
content: `' [var(--ak-renderer-annotation-endmarker)] '`
}
});
const accessibilityStylesNew = css({
'&::before, &::after': {
clipPath: 'inset(100%)',
clip: 'rect(1px, 1px, 1px, 1px)',
height: '1px',
overflow: 'hidden',
position: 'absolute',
whiteSpace: 'nowrap',
width: '1px'
},
'&::before': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
content: ['var(--ak-renderer-annotation-startmarker)']
},
'&::after': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
content: ['var(--ak-renderer-annotation-endmarker)']
}
});
export const MarkComponent = ({
annotationParentIds,
children,
dataAttributes,
id,
state,
hasFocus,
isHovered,
onClick,
useBlockLevel
}) => {
const intl = useIntl();
const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
const {
annotationManager,
dispatch
} = useAnnotationManagerDispatch();
const {
currentSelectedAnnotationId
} = useAnnotationManagerState();
const isAnnotationManagerEnabled = !!annotationManager;
// after creating a new annotation, we need to set the markRef to the new mark
const markRef = useCallback(node => {
if (id === currentSelectedAnnotationId && node) {
dispatch({
type: 'setSelectedMarkRef',
data: {
markRef: node
}
});
}
}, [dispatch, id, currentSelectedAnnotationId]);
const onMarkClick = useCallback(event => {
// prevent inline mark logic for media block marks
if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
return;
}
// prevents multiple callback on overlapping annotations
if (event.defaultPrevented || state !== AnnotationMarkStates.ACTIVE) {
return;
}
if (fg('editor_inline_comments_on_inline_nodes')) {
// We only want to interfere with click events if the click is on some ui inside the renderer document
// This is to prevent the click events from portaled content (such as link previews and mention profiles)
if (event.target instanceof HTMLElement && event.target.closest('.ak-renderer-document')) {
if (event.target.closest('[data-mention-id]')) {
// don't prevent default for mentions
} else {
// prevents from opening link URL inside webView in Safari
event.preventDefault();
event.stopPropagation();
}
}
} else {
// prevents from opening link URL inside webView in Safari
event.preventDefault();
}
if (isAnnotationManagerEnabled) {
// currentTarget is the right element if there are multiple overlapping annotations
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
onClick({
eventTarget: event.currentTarget,
annotationIds
});
} else {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
onClick({
eventTarget: event.target,
annotationIds
});
}
}, [annotationIds, onClick, state, isAnnotationManagerEnabled]);
const onMarkEnter = evt => {
var _document$activeEleme;
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- keyboard focus for mark / Enter handling
const focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;
if (focusedElementTag === 'MARK' && evt.key === 'Enter') {
onMarkClick(evt);
}
};
const overriddenData = !state ? dataAttributes : {
...dataAttributes,
'data-mark-annotation-state': state,
'data-has-focus': hasFocus,
'data-is-hovered': isHovered
};
const desktopAccessibilityAttributes = isMobile() ? {} : {
role: 'button',
tabIndex: 0,
onKeyDown: onMarkEnter,
'aria-expanded': hasFocus
};
const accessibility = state !== AnnotationMarkStates.ACTIVE ? {
'aria-disabled': true
} : {
'aria-details': annotationIds.join(', '),
...desktopAccessibilityAttributes
};
return jsx(useBlockLevel ? 'div' : 'mark', {
ref: id === currentSelectedAnnotationId ? markRef : undefined,
id,
[fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick']: onMarkClick,
...accessibility,
...overriddenData,
...(!useBlockLevel && {
css: [markStyles, markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() && (fg('platform_renderer_a11y_inline_comment_fix') ? accessibilityStylesNew : accessibilityStylesOld), markStylesWithUpdatedShadow],
style: fg('platform_renderer_a11y_inline_comment_fix') ? {
'--ak-renderer-annotation-startmarker': `"${intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart)}"`,
'--ak-renderer-annotation-endmarker': `"${intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)}"`
} : {
'--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
'--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
}
})
}, children);
};