@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
269 lines (267 loc) • 13.8 kB
JavaScript
/* Flag.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSyncBlockCopiedDescription = exports.Flag = void 0;
require("./Flag.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _autoDismissFlag = _interopRequireDefault(require("@atlaskit/flag/auto-dismiss-flag"));
var _flag = _interopRequireDefault(require("@atlaskit/flag/flag"));
var _flagGroup = require("@atlaskit/flag/flag-group");
var _megaphone = _interopRequireDefault(require("@atlaskit/icon/core/megaphone"));
var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _anchor = require("@atlaskit/primitives/compiled/anchor");
var _main = require("../pm-plugins/main");
var _types = require("../types");
var _flagMap;
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; }
var feedbackFlagStyles = null;
var flagMap = (_flagMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
title: _messages.syncBlockMessages.failToDeleteTitle,
description: _messages.syncBlockMessages.failToDeleteWhenOfflineDescription,
type: 'error'
}), _types.FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE, {
title: _messages.syncBlockMessages.failToEditTitle,
description: _messages.syncBlockMessages.failToEditWhenOfflineDescription,
type: 'error'
}), _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE, {
title: _messages.syncBlockMessages.failToCreateTitle,
description: _messages.syncBlockMessages.failToCreateWhenOfflineDescription,
type: 'error'
}), _types.FLAG_ID.FAIL_TO_DELETE, {
title: _messages.syncBlockMessages.cannotDeleteTitle,
description: _messages.syncBlockMessages.cannotDeleteDescription,
type: 'error'
}), _types.FLAG_ID.SYNC_BLOCK_COPIED, {
title: _messages.syncBlockMessages.syncBlockCopiedTitle,
type: 'info'
}), _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED, {
title: _messages.syncBlockMessages.unpublishedSyncBlockPastedTitle,
description: _messages.syncBlockMessages.unpublishedSyncBlockPastedDescription,
type: 'info'
}), _types.FLAG_ID.CANNOT_CREATE_SYNC_BLOCK, {
title: _messages.syncBlockMessages.cannotCreateSyncBlockTitle,
description: _messages.syncBlockMessages.CannotCreateSyncBlockDescription,
type: 'error'
}), _types.FLAG_ID.EXTENSION_IN_SYNC_BLOCK, {
title: _messages.syncBlockMessages.extensionInSyncBlockTitle,
description: _messages.syncBlockMessages.extensionInSyncBlockDescription,
type: 'error'
}), _types.FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK, {
title: _messages.syncBlockMessages.inlineExtensionInSyncBlockTitle,
description: _messages.syncBlockMessages.inlineExtensionInSyncBlockDescription,
type: 'error'
}), _types.FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK, {
title: _messages.syncBlockMessages.duplicateSourceSyncBlockTitle,
description: _messages.syncBlockMessages.duplicateSourceSyncBlockDescription,
type: 'error'
}), (0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT, {
title: _messages.syncBlockMessages.feedbackFlagTitle,
description: _messages.syncBlockMessages.feedbackFlagDescription,
type: 'feedback'
}));
var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = function getSyncBlockCopiedDescription(activeFlag, isCopiedDescriptionEnabled) {
if (!activeFlag || activeFlag.id !== _types.FLAG_ID.SYNC_BLOCK_COPIED || !isCopiedDescriptionEnabled) {
return undefined;
}
if (activeFlag.sourceProduct === 'jira-work-item') {
return activeFlag.isSourceContentUnpublished ? _messages.syncBlockMessages.syncBlockCopiedJiraUnsavedFieldDescription : _messages.syncBlockMessages.syncBlockCopiedLivePageDescription;
}
if (activeFlag.sourceProduct !== 'confluence-page') {
return undefined;
}
return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? _messages.syncBlockMessages.syncBlockCopiedLivePageDescription : _messages.syncBlockMessages.syncBlockCopiedUnpublishedDescription;
};
var useSyncBlockSourceUrl = function useSyncBlockSourceUrl(syncBlockStore, resourceId) {
var _React$useState = _react.default.useState(),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
sourceUrl = _React$useState2[0],
setSourceUrl = _React$useState2[1];
_react.default.useEffect(function () {
setSourceUrl(undefined);
if (!syncBlockStore || !resourceId) {
return;
}
var referenceManager = syncBlockStore.referenceManager;
var cachedSourceUrl = referenceManager.getSyncBlockURL(resourceId);
if (cachedSourceUrl) {
setSourceUrl(cachedSourceUrl);
return;
}
var isCancelled = false;
void referenceManager.fetchSyncBlockSourceInfo(resourceId).then(function (sourceInfo) {
if (!isCancelled) {
setSourceUrl(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url);
}
});
return function () {
isCancelled = true;
};
}, [syncBlockStore, resourceId]);
return sourceUrl;
};
var Flag = exports.Flag = function Flag(_ref) {
var api = _ref.api,
onFeedbackPromptShown = _ref.onFeedbackPromptShown,
onGiveFeedback = _ref.onGiveFeedback;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock', 'connectivity'], function (states) {
var _states$syncedBlockSt, _states$connectivityS, _states$syncedBlockSt2;
return {
activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
syncBlockStore: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.syncBlockStore
};
}),
activeFlag = _useSharedPluginState.activeFlag,
mode = _useSharedPluginState.mode,
syncBlockStore = _useSharedPluginState.syncBlockStore;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var isFeedbackPromptVisible = activeFlag && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
var isJiraUnpublishedPaste = !!activeFlag && activeFlag.id === _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
var sourceUrl = useSyncBlockSourceUrl(syncBlockStore, activeFlag && isJiraUnpublishedPaste && (0, _isExperimentEnabled.isExperimentEnabled)('editor_synced_blocks_jira_custom_rich_text') ? activeFlag.resourceId : undefined);
_react.default.useEffect(function () {
if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
return;
}
try {
var promptShownResult = onFeedbackPromptShown();
void Promise.resolve(promptShownResult).catch(function () {});
} catch (_unused) {
// Prompt persistence is optional product UI.
}
}, [isFeedbackPromptVisible, onFeedbackPromptShown]);
if (!activeFlag) {
return;
}
var _flagMap$activeFlag$i = flagMap[activeFlag.id],
defaultTitle = _flagMap$activeFlag$i.title,
defaultDescription = _flagMap$activeFlag$i.description,
action = _flagMap$activeFlag$i.action,
type = _flagMap$activeFlag$i.type;
var onRetry = activeFlag.onRetry,
onDismissedCallback = activeFlag.onDismissed;
var isCopiedFlag = activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_COPIED;
var isCopiedDescriptionEnabled = isCopiedFlag && ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11') || activeFlag.sourceProduct === 'confluence-page');
var copiedDescription = getSyncBlockCopiedDescription(activeFlag, isCopiedDescriptionEnabled);
var title = isJiraUnpublishedPaste ? _messages.syncBlockMessages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
var description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? _messages.syncBlockMessages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
var descriptionContent = description ? formatMessage(description, {
link: function link(chunks) {
return sourceUrl ? /*#__PURE__*/_react.default.createElement(_anchor.Anchor, {
href: sourceUrl,
target: "_blank",
rel: "noopener noreferrer"
}, chunks) : chunks;
}
}) : undefined;
// Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
if ((0, _editorPluginConnectivity.isOfflineMode)(mode) && !!onRetry) {
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
tr.setMeta(_main.syncedBlockPluginKey, {
activeFlag: false
});
return tr;
});
return;
}
var dismissFlag = function dismissFlag(shouldFocusEditor) {
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
var tr = _ref3.tr;
onDismissedCallback === null || onDismissedCallback === void 0 || onDismissedCallback(tr);
var oldMeta = tr.getMeta(_main.syncedBlockPluginKey);
tr.setMeta(_main.syncedBlockPluginKey, _objectSpread(_objectSpread({}, oldMeta), {}, {
activeFlag: false
}));
return tr;
});
if (shouldFocusEditor) {
api === null || api === void 0 || api.core.actions.focus();
}
};
var onDismissed = function onDismissed() {
return dismissFlag(true);
};
var typeToActions = function typeToActions() {
if (type === 'error') {
if (onRetry) {
return [{
content: formatMessage(_messages.syncBlockMessages.deleteRetryButton),
onClick: onRetry
}];
}
} else if (type === 'info' && action) {
return [{
content: formatMessage(action),
href: _syncBlock.SYNCED_BLOCKS_DOCUMENTATION_URL,
target: '_blank',
rel: 'noopener noreferrer'
}];
} else if (type === 'feedback' && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT && activeFlag.feedbackContext) {
var feedbackContext = activeFlag.feedbackContext;
return [{
content: formatMessage(_messages.syncBlockMessages.feedbackFlagGiveFeedback),
onClick: function onClick() {
dismissFlag(false);
try {
var feedbackResult = onGiveFeedback === null || onGiveFeedback === void 0 ? void 0 : onGiveFeedback(feedbackContext);
void Promise.resolve(feedbackResult).catch(function () {});
} catch (_unused2) {
// Feedback collectors are optional product UI.
}
}
}, {
content: formatMessage(_messages.syncBlockMessages.feedbackFlagNoThanks),
onClick: onDismissed
}];
}
return undefined;
};
var FlagComponent = type === 'info' ? _autoDismissFlag.default : _flag.default;
var flag = /*#__PURE__*/_react.default.createElement(FlagComponent, {
onDismissed: onDismissed,
title: formatMessage(title),
description: descriptionContent,
id: activeFlag.id,
testId: activeFlag.id,
icon: typeToIcon(type),
actions: typeToActions()
});
return /*#__PURE__*/_react.default.createElement(_flagGroup.FlagGroup, null, type === 'feedback' ? /*#__PURE__*/_react.default.createElement("div", {
id: activeFlag.id,
className: (0, _runtime.ax)(["_btc7grf3"])
}, flag) : flag);
};
var typeToIcon = function typeToIcon(type) {
if (type === 'error') {
return /*#__PURE__*/_react.default.createElement(_statusWarning.default, {
label: "",
color: "var(--ds-icon-warning, #E06C00)"
});
}
if (type === 'feedback') {
return /*#__PURE__*/_react.default.createElement(_megaphone.default, {
label: "",
spacing: "spacious",
color: "var(--ds-icon, #292A2E)"
});
}
return /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
label: "",
color: "var(--ds-icon-success, #6A9A23)"
});
};