@atlaskit/renderer
Version:
Renderer component
246 lines (243 loc) • 12.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MarkComponent = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _adfSchema = require("@atlaskit/adf-schema");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _reactIntl = require("react-intl");
var _messages = require("../../../messages");
var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
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) { (0, _defineProperty2.default)(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; } /**
* @jsxRuntime classic
* @jsx jsx
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var markStyles = (0, _react2.css)((0, _defineProperty2.default)({
color: 'inherit',
backgroundColor: 'unset',
WebkitTapHighlightColor: 'transparent'
}, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), {
// was from blur in AnnotationSharedCSSByState().blur
background: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
borderBottom: "var(--ds-border-width-selected, 2px)".concat(" 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)".concat(" 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'
}
}));
var markStylesLayeringFix = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.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)"
}
}));
var markStylesWithUpdatedShadow = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.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)"
}
}));
var markStylesWithInlineComments = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), {
// was from common in AnnotationSharedCSSByState().common
borderBottom: "var(--ds-border-width-selected, 2px)".concat(" solid transparent"),
cursor: 'pointer',
padding: "1px 0 ".concat("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)"
}
}));
var markStylesWithCommentsPanel = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.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)"
}
}));
var isMobile = function 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);
};
var accessibilityStylesOld = (0, _react2.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)] '"
}
});
var accessibilityStylesNew = (0, _react2.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)']
}
});
var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
var annotationParentIds = _ref.annotationParentIds,
children = _ref.children,
dataAttributes = _ref.dataAttributes,
id = _ref.id,
state = _ref.state,
hasFocus = _ref.hasFocus,
isHovered = _ref.isHovered,
onClick = _ref.onClick,
useBlockLevel = _ref.useBlockLevel;
var intl = (0, _reactIntl.useIntl)();
var annotationIds = (0, _react.useMemo)(function () {
return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
}, [id, annotationParentIds]);
var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
annotationManager = _useAnnotationManager.annotationManager,
dispatch = _useAnnotationManager.dispatch;
var _useAnnotationManager2 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
currentSelectedAnnotationId = _useAnnotationManager2.currentSelectedAnnotationId;
var isAnnotationManagerEnabled = !!annotationManager;
// after creating a new annotation, we need to set the markRef to the new mark
var markRef = (0, _react.useCallback)(function (node) {
if (id === currentSelectedAnnotationId && node) {
dispatch({
type: 'setSelectedMarkRef',
data: {
markRef: node
}
});
}
}, [dispatch, id, currentSelectedAnnotationId]);
var onMarkClick = (0, _react.useCallback)(function (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 !== _adfSchema.AnnotationMarkStates.ACTIVE) {
return;
}
if ((0, _platformFeatureFlags.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: annotationIds
});
} else {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
onClick({
eventTarget: event.target,
annotationIds: annotationIds
});
}
}, [annotationIds, onClick, state, isAnnotationManagerEnabled]);
var onMarkEnter = function onMarkEnter(evt) {
var _document$activeEleme;
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- keyboard focus for mark / Enter handling
var focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;
if (focusedElementTag === 'MARK' && evt.key === 'Enter') {
onMarkClick(evt);
}
};
var overriddenData = !state ? dataAttributes : _objectSpread(_objectSpread({}, dataAttributes), {}, {
'data-mark-annotation-state': state,
'data-has-focus': hasFocus,
'data-is-hovered': isHovered
});
var desktopAccessibilityAttributes = isMobile() ? {} : {
role: 'button',
tabIndex: 0,
onKeyDown: onMarkEnter,
'aria-expanded': hasFocus
};
var accessibility = state !== _adfSchema.AnnotationMarkStates.ACTIVE ? {
'aria-disabled': true
} : _objectSpread({
'aria-details': annotationIds.join(', ')
}, desktopAccessibilityAttributes);
return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
ref: id === currentSelectedAnnotationId ? markRef : undefined,
id: id
}, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
css: [markStyles, markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, markStylesWithCommentsPanel, !isMobile() && ((0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? accessibilityStylesNew : accessibilityStylesOld), markStylesWithUpdatedShadow],
style: (0, _platformFeatureFlags.fg)('platform_renderer_a11y_inline_comment_fix') ? {
'--ak-renderer-annotation-startmarker': "\"".concat(intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart), "\""),
'--ak-renderer-annotation-endmarker': "\"".concat(intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd), "\"")
} : {
'--ak-renderer-annotation-startmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart),
'--ak-renderer-annotation-endmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
}
}), children);
};