@atlaskit/renderer
Version:
Renderer component
398 lines (393 loc) • 18.4 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
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) { _defineProperty(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; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @jsxRuntime classic
* @jsx jsx
* @jsxFrag
*/
import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
import { jsx, css } from '@emotion/react';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
import { fg } from '@atlaskit/platform-feature-flags';
import { MediaCard } from '../../../ui/MediaCard';
import { AnnotationMarkStates } from '@atlaskit/adf-schema';
import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
import { getEventHandler } from '../../../utils';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
import { MODE, PLATFORM } from '../../../analytics/events';
import AnnotationComponent from '../../marks/annotation';
import { CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
import { useAnnotationRangeState } from '../../../ui/annotations/contexts/AnnotationRangeContext';
var linkStyle = css({
position: 'absolute',
background: 'transparent',
top: 0,
right: 0,
bottom: 0,
left: 0,
cursor: 'pointer',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: '100% !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
height: '100% !important'
});
var borderStyle = css({
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: '100% !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
height: '100% !important'
});
var MediaBorder = function MediaBorder(_ref) {
var _mark$attrs$color, _mark$attrs$size;
var mark = _ref.mark,
children = _ref.children;
if (!mark) {
return jsx(Fragment, null, children);
}
var borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
var borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
// [FEATURE FLAG: platform_editor_media_border_radius_fix]
// Fixes border radius to properly match image with 8px radius
// To clean up: keep only flag-on behavior ('8px')
var borderRadius = fg('platform_editor_media_border_radius_fix') ? "var(--ds-radius-large, 8px)" : "".concat(borderWidth, "px"); // OLD BEHAVIOR (to be removed when flag is cleaned up)
return jsx("div", {
"data-mark-type": "border",
"data-color": borderColor,
"data-size": borderWidth,
css: borderStyle,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
borderRadius: borderRadius,
boxShadow: "0 0 0 ".concat(borderWidth, "px ").concat(paletteColorValue)
}
}, jsx(MediaBorderGapFiller, {
borderColor: borderColor
}), children);
};
var MediaLink = function MediaLink(_ref2) {
var mark = _ref2.mark,
children = _ref2.children,
onClick = _ref2.onClick;
if (!mark) {
return jsx(Fragment, null, children);
}
var linkHref = mark === null || mark === void 0 ? void 0 : mark.attrs.href;
return (
// eslint-disable-next-line @atlaskit/design-system/no-html-anchor
jsx("a", {
href: linkHref,
rel: "noreferrer noopener",
onClick: onClick,
"data-block-link": linkHref,
css: linkStyle
}, children)
);
};
var MediaAnnotation = function MediaAnnotation(_ref3) {
var mark = _ref3.mark,
children = _ref3.children;
if (!mark) {
return jsx(Fragment, null, children);
}
return jsx(AnnotationComponent, {
id: mark.attrs.id,
annotationType: mark.attrs.annotationType
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
dataAttributes: {
'data-renderer-mark': true,
'data-block-mark': true
}
// This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
annotationParentIds: [],
allowAnnotations: true,
useBlockLevel: true
}, children);
};
var _MediaAnnotations = function MediaAnnotations(_ref4) {
var _ref4$marks = _ref4.marks,
marks = _ref4$marks === void 0 ? [] : _ref4$marks,
children = _ref4.children;
// Early Exit
if (marks.length === 0) {
return jsx(Fragment, null, children);
}
// Recursive marks
var currentMark = marks[0];
var otherMarks = marks.slice(1);
return jsx(Fragment, null, jsx(MediaAnnotation, {
key: currentMark.attrs.id,
mark: currentMark
}, otherMarks.length ? jsx(_MediaAnnotations, {
marks: otherMarks
}, children) : jsx(Fragment, null, children)));
};
var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
var _marks$map;
var marks = _ref5.marks,
mediaSingleElement = _ref5.mediaSingleElement,
_ref5$isDrafting = _ref5.isDrafting,
isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
rest = _objectWithoutProperties(_ref5, _excluded);
var _useState = useState('default'),
_useState2 = _slicedToArray(_useState, 2),
status = _useState2[0],
setStatus = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
entered = _useState4[0],
setEntered = _useState4[1];
var updateSubscriber = useInlineCommentSubscriberContext();
var activeParentIds = useInlineCommentsFilter({
annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
return mark.attrs.id;
})) !== null && _marks$map !== void 0 ? _marks$map : [''],
filter: {
state: AnnotationMarkStates.ACTIVE
}
});
useEffect(function () {
var observer = new MutationObserver(function (mutationList) {
mutationList.forEach(function (mutation) {
var parentNode = mutation.target.parentNode;
if (mutation.attributeName === 'data-has-focus') {
var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && !isMediaCaption;
elementHasFocus ? setStatus('active') : setStatus('default');
}
});
});
if (mediaSingleElement) {
observer.observe(mediaSingleElement, {
attributes: true,
subtree: true,
attributeFilter: ['data-has-focus']
});
}
return function () {
observer.disconnect();
};
}, [mediaSingleElement, setStatus]);
if (!isDrafting && !activeParentIds.length) {
return null;
}
var onClick = function onClick(e) {
e.preventDefault();
if (updateSubscriber) {
updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
annotationIds: activeParentIds,
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
eventTarget: e.target,
// use mediaSingle here to align with annotation viewed event dispatched in editor
eventTargetType: 'mediaSingle',
viewMethod: VIEW_METHOD.BADGE
});
}
};
return jsx(CommentBadgeNext
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, _extends({
onMouseEnter: function onMouseEnter() {
return setEntered(true);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseLeave: function onMouseLeave() {
return setEntered(false);
},
status: entered ? 'entered' : status,
onClick: onClick,
mediaSingleElement: mediaSingleElement
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, rest));
};
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var Media = /*#__PURE__*/function (_PureComponent) {
function Media(props) {
var _this;
_classCallCheck(this, Media);
_this = _callSuper(this, Media, [props]);
_defineProperty(_this, "renderCard", function () {
var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var contextIdentifierProvider = providers.contextIdentifierProvider;
var _this$props = _this.props,
allowAltTextOnImages = _this$props.allowAltTextOnImages,
alt = _this$props.alt,
featureFlags = _this$props.featureFlags,
allowMediaViewer = _this$props.shouldOpenMediaViewer,
enableDownloadButton = _this$props.enableDownloadButton,
ssr = _this$props.ssr,
width = _this$props.width,
height = _this$props.height,
mediaSingleElement = _this$props.mediaSingleElement,
_this$props$isDraftin = _this$props.isDrafting,
isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
var borderMark = _this.props.marks.find(_this.props.isBorderMark);
var linkMark = _this.props.marks.find(_this.props.isLinkMark);
var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
var showCommentBadge = !!annotationMarks && !isInPageInclude && !isIncludeExcerpt;
return jsx(MediaLink, {
mark: linkMark,
onClick: _this.handleMediaLinkClickFn
}, jsx(_MediaAnnotations, {
marks: annotationMarks
}, jsx(MediaBorder, {
mark: borderMark
}, jsx(AnalyticsContext
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
data: _defineProperty({}, MEDIA_CONTEXT, {
border: !!borderMark
})
}, jsx(MediaBadges, {
mediaElement: mediaSingleElement,
mediaWidth: width,
mediaHeight: height,
useMinimumZIndex: true
}, function (_ref7) {
var visible = _ref7.visible;
return jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
type: _this.props.type,
url: _this.props.type === 'external' ? _this.props.url : undefined
}), showCommentBadge && jsx(CommentBadgeWrapper, {
marks: annotationMarks,
mediaSingleElement: mediaSingleElement,
isDrafting: isDrafting
}));
}), jsx(MediaCard, _extends({
contextIdentifierProvider: contextIdentifierProvider
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, _this.props, {
shouldOpenMediaViewer: shouldOpenMediaViewer,
eventHandlers: eventHandlers,
alt: allowAltTextOnImages ? alt : undefined,
featureFlags: featureFlags,
shouldEnableDownloadButton: enableDownloadButton,
ssr: ssr
}))))));
});
_defineProperty(_this, "handleMediaLinkClick", function (event) {
var _this$props2 = _this.props,
fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
isLinkMark = _this$props2.isLinkMark,
marks = _this$props2.marks;
if (fireAnalyticsEvent) {
fireAnalyticsEvent({
action: ACTION.VISITED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: ACTION_SUBJECT_ID.LINK,
eventType: EVENT_TYPE.TRACK,
attributes: {
platform: PLATFORM.WEB,
mode: MODE.RENDERER
}
});
}
var linkMark = _this.props.marks.find(_this.props.isLinkMark);
var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
var handler = getEventHandler(_this.props.eventHandlers, 'link');
if (handler) {
var _linkMark = marks.find(isLinkMark);
handler(event, _linkMark && linkHref);
}
});
_this.handleMediaLinkClickFn = _this.handleMediaLinkClick.bind(_this);
return _this;
}
_inherits(Media, _PureComponent);
return _createClass(Media, [{
key: "render",
value: function render() {
var providers = this.props.providers;
if (!providers) {
return this.renderCard();
}
return jsx(WithProviders
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
providers: ['mediaProvider', 'contextIdentifierProvider'],
providerFactory: providers,
renderNode: this.renderCard
});
}
}]);
}(PureComponent);
var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
var _useAnnotationRangeSt = useAnnotationRangeState(),
draftPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
var dataAttributes = props.dataAttributes;
var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
position = _useState6[0],
setPosition = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
shouldApplyDraftAnnotation = _useState8[0],
setShouldApplyDraftAnnotation = _useState8[1];
useEffect(function () {
var _draftPosition$from;
if (pos === undefined) {
return;
}
var posToCheck = ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1;
if (draftPosition !== null && posToCheck === pos) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setShouldApplyDraftAnnotation(true);
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setPosition(posToCheck);
} else if (draftPosition === null && shouldApplyDraftAnnotation) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setShouldApplyDraftAnnotation(false);
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setPosition(undefined);
}
}, [draftPosition, pos, shouldApplyDraftAnnotation]);
var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
var dataAttributesWithDraftAnnotation = useMemo(function () {
return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
'data-annotation-draft-mark': true,
'data-renderer-mark': true
}) : dataAttributes;
}, [applyDraftAnnotation, dataAttributes]);
return jsx(Media
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, props, {
dataAttributes: dataAttributesWithDraftAnnotation,
isDrafting: shouldApplyDraftAnnotation
}));
};
export default MediaWithDraftAnnotation;