@atlaskit/editor-plugin-insert-block/dist/esm/ui/registered-insert-menu/RegisteredInsertButton.js

Insert block plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
import Popup from '@atlaskit/editor-common/Popup';
import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar/context';
import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar/keys';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles/constants';
import { AddIcon } from '@atlaskit/editor-toolbar/add-icon';
import { ToolbarButton } from '@atlaskit/editor-toolbar/toolbar-button';
import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
import { useToolbarUI } from '@atlaskit/editor-toolbar/ui-context';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { RegisteredInsertMenuContent } from './RegisteredInsertMenuContent';
var DEFAULT_MENU_MAX_HEIGHT = 520;
var POPUP_OFFSET = [0, 3];
/**
 * The toolbar owns its popup lifecycle, but renders the same registered items
 * and menu model as slash command.
 */
export var RegisteredInsertButton = function RegisteredInsertButton(_ref) {
  var api = _ref.api;
  var _useEditorToolbar = useEditorToolbar(),
    editorView = _useEditorToolbar.editorView;
  var isOptimistic = isExperimentEnabled('platform_editor_ssr_toolbar_optimistic');
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var _useToolbarUI = useToolbarUI(),
    isDisabled = _useToolbarUI.isDisabled,
    popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
    popupsMountPoint = _useToolbarUI.popupsMountPoint,
    popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var buttonRef = useRef(null);
  var menuHeight = useMenuPopupSizing({
    target: buttonRef.current,
    boundariesElement: popupsBoundariesElement,
    scrollableElement: popupsScrollableElement,
    maxHeight: DEFAULT_MENU_MAX_HEIGHT,
    offset: POPUP_OFFSET[1],
    isOpen: isOpen
  });
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity', 'typeAhead'], function (states) {
      var _states$connectivityS, _states$typeAheadStat;
      return {
        connectivityMode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
        isAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
      };
    }),
    connectivityMode = _useSharedPluginState.connectivityMode,
    isAllowed = _useSharedPluginState.isAllowed;
  var close = useCallback(function () {
    var restoreFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    setIsOpen(false);
    if (restoreFocus) {
      requestAnimationFrame(function () {
        var _buttonRef$current;
        return (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
      });
    }
  }, []);
  var open = useCallback(function () {
    // Early clicks must not queue a popup to open when the editor becomes ready.
    if (!editorView) {
      return;
    }
    setIsOpen(true);
  }, [editorView]);
  var onPopupUnmount = useCallback(function () {
    // Outside dismissal must not move focus away from the element that was clicked.
    setIsOpen(false);
  }, []);
  var closeAndRestoreFocus = useCallback(function () {
    return close(true);
  }, [close]);
  var closeForSelection = useCallback(function () {
    return close(false);
  }, [close]);
  if (!(api !== null && api !== void 0 && api.insertBlock) || !editorView && !isOptimistic) {
    return null;
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarTooltip, {
    content: /*#__PURE__*/React.createElement(ToolTipContent, {
      description: formatMessage(messages.insertMenu),
      keymap: insertElements
    })
  }, /*#__PURE__*/React.createElement(ToolbarButton, {
    ariaKeyshortcuts: getAriaKeyshortcuts(insertElements),
    iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
      size: "small",
      label: formatMessage(messages.insertMenu)
    })
    // Keep the optimistic SSR button visible before the live view is attached.
    ,
    isDisabled: isDisabled || (!isOptimistic || !!editorView) && !isAllowed,
    isSelected: isOpen,
    onClick: isOpen ? function () {
      return close(true);
    } : open,
    ref: buttonRef,
    testId: TOOLBAR_BUTTON_TEST_ID.INSERT
  })), isOpen && buttonRef.current && editorView && /*#__PURE__*/React.createElement(Popup, {
    alignX: "right",
    boundariesElement: popupsBoundariesElement,
    fitHeight: menuHeight,
    fitWidth: 350,
    mountTo: popupsMountPoint,
    offset: POPUP_OFFSET,
    onUnmount: onPopupUnmount,
    preventOverflow: true,
    scrollableElement: popupsScrollableElement,
    target: buttonRef.current,
    zIndex: akEditorMenuZIndex
  }, /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
    api: api,
    maxHeight: menuHeight,
    editorView: editorView,
    isOffline: isOfflineMode(connectivityMode),
    onClose: closeAndRestoreFocus,
    onDismiss: closeForSelection,
    onSelect: closeForSelection,
    target: buttonRef.current
  })));
};