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

Insert block plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RegisteredInsertButton = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _isOfflineMode = require("@atlaskit/editor-common/connectivity/isOfflineMode");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
var _context = require("@atlaskit/editor-common/toolbar/context");
var _keys = require("@atlaskit/editor-common/toolbar/keys");
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
var _constants = require("@atlaskit/editor-shared-styles/constants");
var _addIcon = require("@atlaskit/editor-toolbar/add-icon");
var _toolbarButton = require("@atlaskit/editor-toolbar/toolbar-button");
var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip");
var _uiContext = require("@atlaskit/editor-toolbar/ui-context");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _RegisteredInsertMenuContent = require("./RegisteredInsertMenuContent");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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.
 */
var RegisteredInsertButton = exports.RegisteredInsertButton = function RegisteredInsertButton(_ref) {
  var api = _ref.api;
  var _useEditorToolbar = (0, _context.useEditorToolbar)(),
    editorView = _useEditorToolbar.editorView;
  var isOptimistic = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic');
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
    isDisabled = _useToolbarUI.isDisabled,
    popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
    popupsMountPoint = _useToolbarUI.popupsMountPoint,
    popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var buttonRef = (0, _react.useRef)(null);
  var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
    target: buttonRef.current,
    boundariesElement: popupsBoundariesElement,
    scrollableElement: popupsScrollableElement,
    maxHeight: DEFAULT_MENU_MAX_HEIGHT,
    offset: POPUP_OFFSET[1],
    isOpen: isOpen
  });
  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.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 = (0, _react.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 = (0, _react.useCallback)(function () {
    // Early clicks must not queue a popup to open when the editor becomes ready.
    if (!editorView) {
      return;
    }
    setIsOpen(true);
  }, [editorView]);
  var onPopupUnmount = (0, _react.useCallback)(function () {
    // Outside dismissal must not move focus away from the element that was clicked.
    setIsOpen(false);
  }, []);
  var closeAndRestoreFocus = (0, _react.useCallback)(function () {
    return close(true);
  }, [close]);
  var closeForSelection = (0, _react.useCallback)(function () {
    return close(false);
  }, [close]);
  if (!(api !== null && api !== void 0 && api.insertBlock) || !editorView && !isOptimistic) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
      description: formatMessage(_insertBlock.toolbarInsertBlockMessages.insertMenu),
      keymap: _keymaps.insertElements
    })
  }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, {
    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.insertElements),
    iconBefore: /*#__PURE__*/_react.default.createElement(_addIcon.AddIcon, {
      size: "small",
      label: formatMessage(_insertBlock.toolbarInsertBlockMessages.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: _keys.TOOLBAR_BUTTON_TEST_ID.INSERT
  })), isOpen && buttonRef.current && editorView && /*#__PURE__*/_react.default.createElement(_Popup.default, {
    alignX: "right",
    boundariesElement: popupsBoundariesElement,
    fitHeight: menuHeight,
    fitWidth: 350,
    mountTo: popupsMountPoint,
    offset: POPUP_OFFSET,
    onUnmount: onPopupUnmount,
    preventOverflow: true,
    scrollableElement: popupsScrollableElement,
    target: buttonRef.current,
    zIndex: _constants.akEditorMenuZIndex
  }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuContent.RegisteredInsertMenuContent, {
    api: api,
    maxHeight: menuHeight,
    editorView: editorView,
    isOffline: (0, _isOfflineMode.isOfflineMode)(connectivityMode),
    onClose: closeAndRestoreFocus,
    onDismiss: closeForSelection,
    onSelect: closeForSelection,
    target: buttonRef.current
  })));
};