@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
72 lines • 3.18 kB
JavaScript
import React, { useCallback, useMemo, useState } from 'react';
import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { CommentBadgeNext } from '@atlaskit/editor-common/media-single';
const selector = states => {
var _states$annotationSta, _states$annotationSta2, _states$annotationSta3;
return {
selectedAnnotations: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.selectedAnnotations,
isInlineCommentViewClosed: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.isInlineCommentViewClosed,
annotations: (_states$annotationSta3 = states.annotationState) === null || _states$annotationSta3 === void 0 ? void 0 : _states$annotationSta3.annotations
};
};
export const CommentBadgeWrapper = ({
api,
mediaNode,
view,
getPos,
isDrafting
}) => {
const [entered, setEntered] = useState(false);
const {
selectedAnnotations,
isInlineCommentViewClosed,
annotations
} = useSharedPluginStateWithSelector(api, ['annotation'], selector);
const {
state: {
schema: {
nodes: {
media
},
marks: {
annotation
}
}
},
state,
dispatch
} = view;
const status = useMemo(() => {
if (!selectedAnnotations || !mediaNode) {
return 'default';
}
return selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !isInlineCommentViewClosed ? 'active' : 'default';
}, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
const onClick = useCallback(() => {
if (api !== null && api !== void 0 && api.annotation && mediaNode) {
const {
showCommentForBlockNode
} = api.annotation.actions;
showCommentForBlockNode(mediaNode, VIEW_METHOD.BADGE)(state, dispatch);
}
}, [api === null || api === void 0 ? void 0 : api.annotation, dispatch, mediaNode, state]);
const pos = getPos();
const hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id]);
if (!isDrafting && hasNoComments || !mediaNode) {
return null;
}
const maybeMediaSingleElement = view.domAtPos(pos + 1).node;
const mediaSingleElement = maybeMediaSingleElement instanceof HTMLElement ? maybeMediaSingleElement : null;
return /*#__PURE__*/React.createElement(CommentBadgeNext, {
onClick: onClick,
mediaSingleElement: mediaSingleElement,
status: entered ? 'entered' : status
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseEnter: () => setEntered(true)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseLeave: () => setEntered(false)
});
};