@atlaskit/editor-plugin-block-menu/dist/es2019/ui/flag.js

BlockMenu plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
import AkFlag, { FlagGroup, AutoDismissFlag } from '@atlaskit/flag';
import SuccessIcon from '@atlaskit/icon/core/check-circle';
import { FLAG_ID } from '../blockMenuPluginType';
import { blockMenuPluginKey } from '../pm-plugins/main';
const flagMap = {
  [FLAG_ID.LINK_COPIED_TO_CLIPBOARD]: {
    title: messages.linkCopiedToClipboard,
    autoDismiss: true
  }
};
export const Flag = ({
  api
}) => {
  const {
    showFlag
  } = useSharedPluginStateWithSelector(api, ['blockMenu'], states => {
    var _states$blockMenuStat;
    return {
      showFlag: (_states$blockMenuStat = states.blockMenuState) === null || _states$blockMenuStat === void 0 ? void 0 : _states$blockMenuStat.showFlag
    };
  });
  const {
    formatMessage
  } = useIntl();
  if (!showFlag) {
    return;
  }
  const {
    title
  } = flagMap[showFlag];
  const onDismissed = () => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      tr.setMeta(blockMenuPluginKey, {
        showFlag: false
      });
      return tr;
    });
    api === null || api === void 0 ? void 0 : api.core.actions.focus();
  };
  const FlagComponent = flagMap[showFlag].autoDismiss ? AutoDismissFlag : AkFlag;
  return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(FlagComponent, {
    onDismissed: onDismissed,
    title: formatMessage(title),
    id: showFlag,
    testId: showFlag,
    icon: /*#__PURE__*/React.createElement(SuccessIcon, {
      label: "",
      color: "var(--ds-icon-success, #6A9A23)",
      size: "small"
    })
  }));
};