@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
52 lines (51 loc) • 2.53 kB
JavaScript
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl-next';
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 const CreateSyncedBlockButton = ({
api
}) => {
const intl = useIntl();
const {
selection,
mode
} = useSharedPluginStateWithSelector(api, ['selection', 'connectivity'], 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
};
});
// for toolbar button, we allow both creating a new synced block
// and converting existing block to synced block
const canBeConverted = Boolean(selection && canBeConvertedToSyncBlock(selection));
const canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
const isDisabled = Boolean(isOfflineMode(mode) || !canBeConverted && !canInsertEmptyBlock);
const onClick = useCallback(() => {
var _api$core, _api$core2;
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
tr
}) => api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
tr
}));
api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
}, [api]);
const message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
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
}));
};