@atlaskit/editor-plugin-hyperlink/dist/es2019/ui/toolbar/LinkButton.js

Hyperlink plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
import { ToolTipContent, addLink } from '@atlaskit/editor-common/keymaps';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
import { LinkIcon } from '@atlaskit/editor-toolbar/link-icon';
import { ToolbarButton } from '@atlaskit/editor-toolbar/toolbar-button';
import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
export const LinkButton = ({
  api
}) => {
  const {
    formatMessage
  } = useIntl();
  const canInsertLink = useSharedPluginStateWithSelector(api, ['hyperlink'], state => {
    var _state$hyperlinkState, _state$hyperlinkState2;
    return (_state$hyperlinkState = state === null || state === void 0 ? void 0 : (_state$hyperlinkState2 = state.hyperlinkState) === null || _state$hyperlinkState2 === void 0 ? void 0 : _state$hyperlinkState2.canInsertLink) !== null && _state$hyperlinkState !== void 0 ? _state$hyperlinkState : true;
  });
  const onClick = () => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.hyperlink.commands.showLinkToolbar(INPUT_METHOD.FLOATING_TB));
  };
  const isEnabled = canInsertLink;
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
    content: /*#__PURE__*/React.createElement(ToolTipContent, {
      description: formatMessage(messages.link),
      keymap: addLink
    })
  }, /*#__PURE__*/React.createElement(ToolbarButton, {
    iconBefore: /*#__PURE__*/React.createElement(LinkIcon, {
      label: formatMessage(messages.link),
      size: "small"
    }),
    onClick: onClick,
    testId: 'editor-toolbar__link-button',
    isDisabled: !isEnabled
  }));
};