@atlaskit/editor-plugin-card/dist/es2019/ui/EditToolbarButton/EditToolbarButtonPresentation.js

Card plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback, useRef, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl-next';
import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import EditIcon from '@atlaskit/icon/core/edit';
import { ButtonItem } from '@atlaskit/menu';
import { Flex } from '@atlaskit/primitives/compiled';
import { focusEditorView } from '../../pm-plugins/utils';
import { editDatasource } from '../editDatasourceAction';
const dropdownExpandContainer = css({
  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
});
const EditToolbarButtonPresentation = ({
  datasourceId,
  currentAppearance,
  editorAnalyticsApi,
  editVariant,
  editorView,
  extensionKey,
  onLinkEditClick,
  intl,
  areAnyNewToolbarFlagsEnabled
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef();
  const toggleOpen = () => setIsOpen(open => !open);
  const onClose = () => setIsOpen(false);
  const onEditLink = useCallback(() => {
    if (editorView) {
      onLinkEditClick(editorView.state, editorView.dispatch);
      focusEditorView(editorView);
    }
  }, [editorView, onLinkEditClick]);
  const onEditDatasource = useCallback(() => {
    if (editorView && datasourceId) {
      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
      focusEditorView(editorView);
    }
  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
  const icon = areAnyNewToolbarFlagsEnabled ? jsx(EditIcon, {
    label: ""
  }) : undefined;
  const tooltipContent = areAnyNewToolbarFlagsEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
  switch (editVariant) {
    case 'edit-link':
      {
        return jsx(Flex, {
          gap: "space.050"
        }, jsx(Button, {
          testId: "edit-link",
          onClick: onEditLink,
          icon: icon,
          tooltipContent: tooltipContent,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, !areAnyNewToolbarFlagsEnabled && jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , linkToolbarMessages.editLink)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-datasource':
      {
        return jsx(Flex, {
          gap: "space.050"
        }, jsx(Button, {
          testId: "edit-datasource",
          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
          onClick: onEditDatasource,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , linkToolbarMessages.editDatasourceStandalone)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-dropdown':
      {
        const trigger = jsx(Flex, {
          gap: "space.050"
        }, jsx(Button, {
          testId: "edit-dropdown-trigger",
          iconAfter: jsx("span", {
            css: dropdownExpandContainer
          }, jsx(ChevronDownIcon, {
            label: intl.formatMessage(messages.editDropdownTriggerTitle),
            size: "small"
          })),
          onClick: toggleOpen,
          selected: isOpen,
          disabled: false,
          ariaHasPopup: true,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , messages.editDropdownTriggerTitle)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
        return jsx(Flex, {
          ref: containerRef
        }, jsx(UiDropdown, {
          mountTo: containerRef.current,
          isOpen: isOpen,
          handleClickOutside: onClose,
          handleEscapeKeydown: onClose,
          trigger: trigger,
          scrollableElement: containerRef.current
          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
          ,
          arrowKeyNavigationProviderOptions: {
            type: ArrowKeyNavigationType.MENU
          }
        }, jsx(ButtonItem, {
          key: "edit.link",
          onClick: onEditLink,
          testId: "edit-dropdown-edit-link-item"
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
          key: "edit.datasource",
          onClick: onEditDatasource,
          testId: "edit-dropdown-edit-datasource-item"
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , messages.editDropdownEditDatasourceTitle))));
      }
    case 'none':
    default:
      return null;
  }
};
export default EditToolbarButtonPresentation;