@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
142 lines (141 loc) • 6.38 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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-next';
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 StatusSuccessIcon from '@atlaskit/icon/core/status-success';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import { syncedBlockPluginKey } from '../pm-plugins/main';
import { FLAG_ID } from '../types';
var flagMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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'
});
export var Flag = function Flag(_ref) {
var api = _ref.api;
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;
if (!activeFlag) {
return;
}
var _flagMap$activeFlag$i = flagMap[activeFlag.id],
title = _flagMap$activeFlag$i.title,
description = _flagMap$activeFlag$i.description,
action = _flagMap$activeFlag$i.action,
type = _flagMap$activeFlag$i.type;
var onRetry = activeFlag.onRetry,
onDismissedCallback = activeFlag.onDismissed;
// 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 onDismissed = function onDismissed() {
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;
});
api === null || api === void 0 || api.core.actions.focus();
};
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'
}];
}
return undefined;
};
var FlagComponent = type === 'info' ? AutoDismissFlag : AkFlag;
return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__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()
}));
};
var typeToIcon = function typeToIcon(type) {
if (type === 'error') {
return /*#__PURE__*/React.createElement(StatusWarningIcon, {
label: "",
color: "var(--ds-icon-warning, #E06C00)"
});
}
return /*#__PURE__*/React.createElement(StatusSuccessIcon, {
label: "",
color: "var(--ds-icon-success, #6A9A23)"
});
};