@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
100 lines • 4.49 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useMemo, useState } from 'react';
import { useIntl } from 'react-intl-next';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
import { Text } from '@atlaskit/primitives/compiled';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import Tooltip from '@atlaskit/tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden';
import { formatElapsedTime } from './utils/time';
var SyncBlockLabelDataId = 'sync-block-label';
var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
var contentUpdatedAt = _ref.contentUpdatedAt,
isSource = _ref.isSource,
localId = _ref.localId,
title = _ref.title,
isUnsyncedBlock = _ref.isUnsyncedBlock;
var intl = useIntl();
var formatMessage = intl.formatMessage;
var _useState = useState(formatMessage(messages.defaultSyncBlockTooltip)),
_useState2 = _slicedToArray(_useState, 2),
tooltipContent = _useState2[0],
setTooltipContent = _useState2[1];
var tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
if (title) {
tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
title: title
});
}
var updateTooltipContent = useCallback(function () {
var tooltipContent = tooltipMessage;
if (contentUpdatedAt) {
var elapsedTime = formatElapsedTime(contentUpdatedAt, intl);
tooltipContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.inverse"
}, tooltipMessage), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.inverse",
weight: "bold"
}, formatMessage(messages.referenceSyncBlockLastEdited)), /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.inverse"
}, elapsedTime));
}
setTooltipContent(tooltipContent);
}, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
var ariaDescribedById = "sync-block-label-description-".concat(localId);
var getLabelContent = useMemo(function () {
if (isUnsyncedBlock) {
return /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.subtle"
}, formatMessage(messages.unsyncedBlockLabel));
}
if (isSource || !title) {
return /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.subtle"
}, formatMessage(messages.syncedBlockLabel));
}
return /*#__PURE__*/React.createElement(Text, {
maxLines: 1,
size: "small",
color: "color.text.subtle"
}, title);
}, [formatMessage, isSource, isUnsyncedBlock, title]);
var label = /*#__PURE__*/React.createElement("div", {
"data-testid": SyncBlockLabelDataId
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: SyncBlockLabelSharedCssClassName.labelClassName,
"aria-describedby": (isSource || isUnsyncedBlock) && editorExperiment('platform_synced_block_patch_6', true, {
exposure: true
}) ? undefined : ariaDescribedById
}, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
color: "var(--ds-icon-subtle, #505258)",
size: "small",
label: ""
}), getLabelContent);
if (isSource || isUnsyncedBlock) {
return label;
}
return /*#__PURE__*/React.createElement(Tooltip, {
position: "top",
content: tooltipContent
// workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
// this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
// tooltip content is available for screen readers in visually hidden content after the label
,
isScreenReaderAnnouncementDisabled: true
// using this to ensure that the 'last edited' time is updated when the tooltip is opened
,
onShow: updateTooltipContent
}, label, /*#__PURE__*/React.createElement(VisuallyHidden, {
id: ariaDescribedById
}, tooltipContent));
};
export var SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);