@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
109 lines (108 loc) • 5.89 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SyncBlockLabel = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntlNext = require("react-intl-next");
var _messages = require("@atlaskit/editor-common/messages");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
var _compiled = require("@atlaskit/primitives/compiled");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
var _time = require("./utils/time");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 = (0, _reactIntlNext.useIntl)();
var formatMessage = intl.formatMessage;
var _useState = (0, _react.useState)(formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip)),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
tooltipContent = _useState2[0],
setTooltipContent = _useState2[1];
var tooltipMessage = formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip);
if (title) {
tooltipMessage = formatMessage(_messages.syncBlockMessages.referenceSyncBlockTooltip, {
title: title
});
}
var updateTooltipContent = (0, _react.useCallback)(function () {
var tooltipContent = tooltipMessage;
if (contentUpdatedAt) {
var elapsedTime = (0, _time.formatElapsedTime)(contentUpdatedAt, intl);
tooltipContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse"
}, tooltipMessage), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse",
weight: "bold"
}, formatMessage(_messages.syncBlockMessages.referenceSyncBlockLastEdited)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse"
}, elapsedTime));
}
setTooltipContent(tooltipContent);
}, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
var ariaDescribedById = "sync-block-label-description-".concat(localId);
var getLabelContent = (0, _react.useMemo)(function () {
if (isUnsyncedBlock) {
return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.subtle"
}, formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
}
if (isSource || !title) {
return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.subtle"
}, formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
}
return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
maxLines: 1,
size: "small",
color: "color.text.subtle"
}, title);
}, [formatMessage, isSource, isUnsyncedBlock, title]);
var label = /*#__PURE__*/_react.default.createElement("div", {
"data-testid": SyncBlockLabelDataId
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName,
"aria-describedby": (isSource || isUnsyncedBlock) && (0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
exposure: true
}) ? undefined : ariaDescribedById
}, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
color: "var(--ds-icon-subtle, #505258)",
size: "small",
label: ""
}), getLabelContent);
if (isSource || isUnsyncedBlock) {
return label;
}
return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
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.default.createElement(_visuallyHidden.default, {
id: ariaDescribedById
}, tooltipContent));
};
var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);