@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
72 lines (71 loc) • 3.91 kB
JavaScript
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { syncBlockMessages } from '@atlaskit/editor-common/messages';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
var api = _ref.api;
var intl = useIntl();
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'connectivity'], function (states) {
var _states$selectionStat, _states$connectivityS;
return {
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
};
}),
selection = _useSharedPluginState.selection,
mode = _useSharedPluginState.mode;
// for toolbar button, we allow both creating a new synced block
// and converting existing block to synced block
var canBeConverted = Boolean(selection && canBeConvertedToSyncBlock(selection));
var canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
var isDisabled = Boolean(isOfflineMode(mode) || !canBeConverted && !canInsertEmptyBlock);
var onClick = useCallback(function () {
var _api$core;
// Insert the synced block and stop preserving the selection in a single
// transaction so the caret that insertSyncedBlock places inside the new
// block survives (EDITOR-7949). The toolbar is not normally opened via the
// block menu, but stopping preservation is defensive and keeps behaviour
// consistent with the block-menu create item should preservation ever be
// active (e.g. a block is selected via block-controls). Then re-focus so
// the caret is active, but only when the transaction was actually
// dispatched — otherwise a failed insertion would still steal DOM focus
// into the editor (mirrors CreateSyncedBlockDropdownItem).
var dispatched = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(function (_ref2) {
var _api$blockControls;
var tr = _ref2.tr;
var result = api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock(INPUT_METHOD.SYNCED_BLOCK_TB)({
tr: tr
});
if (!result) {
return null;
}
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.stopPreservingSelection()({
tr: tr
});
return tr;
});
if (dispatched) {
var _api$core2;
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
}
}, [api]);
var message = intl.formatMessage(syncBlockMessages.syncBlockLabel);
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: message
}, /*#__PURE__*/React.createElement(ToolbarButton, {
label: message,
iconBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
size: "small",
label: ""
}),
isDisabled: isDisabled,
testId: SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate,
onClick: onClick
}));
};