@atlaskit/editor-plugin-synced-block/dist/esm/ui/CreateSyncedBlockButton.js

SyncedBlock plugin for @atlaskit/editor-core

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 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, _api$core2;
    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
      var tr = _ref2.tr;
      return api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
        tr: tr
      });
    });
    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
  }, [api]);
  var 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
  }));
};