@atlaskit/editor-plugin-status/dist/es2019/ui/statusBlockMenuItem.js

Status plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
import { pluginKey } from '../pm-plugins/plugin-key';
import { createStatusNode } from '../utils/createStatusNode';
const StatusBlockMenuItem = ({
  api,
  isSuggested
}) => {
  const {
    formatMessage
  } = useIntl();
  const handleClick = () => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      var _api$blockMenu, _api$analytics, _api$analytics$action;
      const command = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformInlineNode({
        buildInlineNode: source => createStatusNode(tr.doc.type.schema, {
          text: source.textContent.trim()
        }),
        isSuggested,
        targetTypeName: 'status'
      });
      const nextTr = command === null || command === void 0 ? void 0 : command({
        tr
      });
      if (!(nextTr !== null && nextTr !== void 0 && nextTr.docChanged)) {
        return null;
      }
      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
        action: ACTION.INSERTED,
        actionSubject: ACTION_SUBJECT.DOCUMENT,
        actionSubjectId: ACTION_SUBJECT_ID.STATUS,
        attributes: {
          inputMethod: INPUT_METHOD.BLOCK_MENU
        },
        eventType: EVENT_TYPE.TRACK
      })(nextTr);
      return nextTr.setMeta(pluginKey, {
        focusStatusInput: true,
        isNew: true,
        showStatusPickerAt: nextTr.selection.from
      });
    });
  };
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    onClick: handleClick,
    elemBefore: /*#__PURE__*/React.createElement(LozengeIcon, {
      label: "",
      size: "small"
    })
  }, formatMessage(toolbarInsertBlockMessages.status));
};
export const createStatusBlockMenuItem = api => {
  return ({
    isSuggested
  } = {}) => /*#__PURE__*/React.createElement(StatusBlockMenuItem, {
    api: api,
    isSuggested: isSuggested
  });
};