@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
213 lines (211 loc) • 10 kB
JavaScript
/* Flag.tsx generated by @compiled/babel-plugin v2.0.0 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _flagMap;
import "./Flag.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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; }
import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import AkFlag, { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { syncedBlockPluginKey } from '../pm-plugins/main';
import { FLAG_ID } from '../types';
var feedbackFlagStyles = null;
var flagMap = (_flagMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_flagMap, FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
title: messages.failToDeleteTitle,
description: messages.failToDeleteWhenOfflineDescription,
type: 'error'
}), FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE, {
title: messages.failToEditTitle,
description: messages.failToEditWhenOfflineDescription,
type: 'error'
}), FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE, {
title: messages.failToCreateTitle,
description: messages.failToCreateWhenOfflineDescription,
type: 'error'
}), FLAG_ID.FAIL_TO_DELETE, {
title: messages.cannotDeleteTitle,
description: messages.cannotDeleteDescription,
type: 'error'
}), FLAG_ID.SYNC_BLOCK_COPIED, {
title: messages.syncBlockCopiedTitle,
type: 'info'
}), FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED, {
title: messages.unpublishedSyncBlockPastedTitle,
description: messages.unpublishedSyncBlockPastedDescription,
type: 'info'
}), FLAG_ID.CANNOT_CREATE_SYNC_BLOCK, {
title: messages.cannotCreateSyncBlockTitle,
description: messages.CannotCreateSyncBlockDescription,
type: 'error'
}), FLAG_ID.EXTENSION_IN_SYNC_BLOCK, {
title: messages.extensionInSyncBlockTitle,
description: messages.extensionInSyncBlockDescription,
type: 'error'
}), FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK, {
title: messages.inlineExtensionInSyncBlockTitle,
description: messages.inlineExtensionInSyncBlockDescription,
type: 'error'
}), FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK, {
title: messages.duplicateSourceSyncBlockTitle,
description: messages.duplicateSourceSyncBlockDescription,
type: 'error'
}), _defineProperty(_flagMap, FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT, {
title: messages.feedbackFlagTitle,
description: messages.feedbackFlagDescription,
type: 'feedback'
}));
export var getSyncBlockCopiedDescription = function getSyncBlockCopiedDescription(activeFlag, isSyncBlockActivationEnabled) {
if (!activeFlag || activeFlag.id !== FLAG_ID.SYNC_BLOCK_COPIED || activeFlag.sourceProduct !== 'confluence-page' || !isSyncBlockActivationEnabled) {
return undefined;
}
return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? messages.syncBlockCopiedLivePageDescription : messages.syncBlockCopiedUnpublishedDescription;
};
export var Flag = function Flag(_ref) {
var api = _ref.api,
onFeedbackPromptShown = _ref.onFeedbackPromptShown,
onGiveFeedback = _ref.onGiveFeedback;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], function (states) {
var _states$syncedBlockSt, _states$connectivityS;
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
};
}),
activeFlag = _useSharedPluginState.activeFlag,
mode = _useSharedPluginState.mode;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var isFeedbackPromptVisible = activeFlag && activeFlag.id === FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
React.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;
// For the unpublished-paste flag, swap to the Jira-flavoured copy when the source
// is a Jira work item. Other flags don't currently vary by product.
var isJiraUnpublishedPaste = activeFlag.id === FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
var copiedDescription = getSyncBlockCopiedDescription(activeFlag, activeFlag.id === FLAG_ID.SYNC_BLOCK_COPIED && expValEquals('platform_editor_sync_block_activation', 'isEnabled', true));
var title = isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
var description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
// Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
if (isOfflineMode(mode) && !!onRetry) {
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
tr.setMeta(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(syncedBlockPluginKey);
tr.setMeta(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.deleteRetryButton),
onClick: onRetry
}];
}
} else if (type === 'info' && action) {
return [{
content: formatMessage(action),
href: SYNCED_BLOCKS_DOCUMENTATION_URL,
target: '_blank',
rel: 'noopener noreferrer'
}];
} else if (type === 'feedback' && activeFlag.id === FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT && activeFlag.feedbackContext) {
var feedbackContext = activeFlag.feedbackContext;
return [{
content: formatMessage(messages.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.feedbackFlagNoThanks),
onClick: onDismissed
}];
}
return undefined;
};
var FlagComponent = type === 'info' ? AutoDismissFlag : AkFlag;
var flag = /*#__PURE__*/React.createElement(FlagComponent, {
onDismissed: onDismissed,
title: formatMessage(title),
description: description ? formatMessage(description) : undefined,
id: activeFlag.id,
testId: activeFlag.id,
icon: typeToIcon(type),
actions: typeToActions()
});
return /*#__PURE__*/React.createElement(FlagGroup, null, type === 'feedback' ? /*#__PURE__*/React.createElement("div", {
id: activeFlag.id,
className: ax(["_btc7grf3"])
}, flag) : flag);
};
var typeToIcon = function typeToIcon(type) {
if (type === 'error') {
return /*#__PURE__*/React.createElement(StatusWarningIcon, {
label: "",
color: "var(--ds-icon-warning, #E06C00)"
});
}
if (type === 'feedback') {
return /*#__PURE__*/React.createElement(MegaphoneIcon, {
label: "",
spacing: "spacious",
color: "var(--ds-icon, #292A2E)"
});
}
return /*#__PURE__*/React.createElement(StatusSuccessIcon, {
label: "",
color: "var(--ds-icon-success, #6A9A23)"
});
};