@atlaskit/editor-plugin-insert-block/dist/es2019/plugin.js

import React, { useLayoutEffect } from 'react';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
import { ToolbarSize } from '@atlaskit/editor-common/types';
import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
const toolbarSizeToButtons = toolbarSize => {
  switch (toolbarSize) {
    case ToolbarSize.XXL:
    case ToolbarSize.XL:
    case ToolbarSize.L:
    case ToolbarSize.M:
      return 7;
    case ToolbarSize.S:
      return 2;
    default:
      return 0;
  }
};
/**
 * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
 * @param name Block name
 */
function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
  return name => {
    if (name === CODE_BLOCK.name && insertCodeBlock) {
      return insertCodeBlock(INPUT_METHOD.TOOLBAR);
    }
    if (name === PANEL.name && insertPanel) {
      return insertPanel(INPUT_METHOD.TOOLBAR);
    }
    if (name === BLOCK_QUOTE.name && insertBlockQuote) {
      return insertBlockQuote(INPUT_METHOD.TOOLBAR);
    }
    return () => false;
  };
}
export const insertBlockPlugin = ({
  config: options = {},
  api
}) => {
  const toggleDropdownMenuOptionsRef = {
    current: null
  };
  const registerToggleDropdownMenuOptions = cb => {
    toggleDropdownMenuOptionsRef.current = cb;
    return () => {
      toggleDropdownMenuOptionsRef.current = null;
    };
  };
  return {
    name: 'insertBlock',
    actions: {
      toggleAdditionalMenu: () => {
        const toggle = toggleDropdownMenuOptionsRef.current;
        if (!toggle) {
          return;
        }
        toggle();
      }
    },
    usePluginHook: () => {
      useLayoutEffect(() => {
        return () => {
          toggleDropdownMenuOptionsRef.current = null;
        };
      }, []);
    },
    primaryToolbarComponent({
      editorView,
      editorActions,
      dispatchAnalyticsEvent,
      providerFactory,
      popupsMountPoint,
      popupsBoundariesElement,
      popupsScrollableElement,
      toolbarSize,
      disabled,
      isToolbarReducedSpacing,
      isLastItem
    }) {
      const renderNode = providers => {
        return /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
          pluginInjectionApi: api,
          editorView: editorView,
          editorActions: editorActions,
          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
          providerFactory: providerFactory,
          popupsMountPoint: popupsMountPoint,
          popupsBoundariesElement: popupsBoundariesElement,
          popupsScrollableElement: popupsScrollableElement,
          toolbarSize: toolbarSize,
          disabled: disabled,
          isToolbarReducedSpacing: isToolbarReducedSpacing,
          isLastItem: isLastItem,
          providers: providers,
          options: options,
          registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
        });
      };
      return /*#__PURE__*/React.createElement(WithProviders, {
        providerFactory: providerFactory,
        providers: ['emojiProvider'],
        renderNode: renderNode
      });
    }
  };
};
function ToolbarInsertBlockWithInjectionApi({
  editorView,
  editorActions,
  dispatchAnalyticsEvent,
  popupsMountPoint,
  popupsBoundariesElement,
  popupsScrollableElement,
  toolbarSize,
  disabled,
  isToolbarReducedSpacing,
  isLastItem,
  providers,
  pluginInjectionApi,
  options,
  registerToggleDropdownMenuOptions
}) {
  var _ref, _ref2, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
  const buttons = toolbarSizeToButtons(toolbarSize);
  const {
    dateState,
    hyperlinkState,
    imageUploadState,
    mentionState,
    emojiState,
    blockTypeState,
    mediaState,
    typeAheadState,
    placeholderTextState
  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
  return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
    pluginInjectionApi: pluginInjectionApi,
    buttons: buttons,
    isReducedSpacing: isToolbarReducedSpacing,
    isDisabled: disabled,
    isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
    editorView: editorView,
    tableSupported: !!editorView.state.schema.nodes.table,
    tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
    actionSupported: !!editorView.state.schema.nodes.taskItem,
    mentionsSupported: !!(mentionState && mentionState.mentionProvider),
    mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
    decisionSupported: !!editorView.state.schema.nodes.decisionItem,
    dateEnabled: !!dateState,
    placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
    layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
    expandEnabled: !!options.allowExpand,
    mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
    onShowMediaPicker: (_ref2 = mediaState && mediaState.showMediaPicker) !== null && _ref2 !== void 0 ? _ref2 : undefined,
    mediaSupported: !!mediaState,
    imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
    availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
    linkSupported: !!hyperlinkState,
    linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
    emojiDisabled: !emojiState || !providers.emojiProvider,
    emojiProvider: providers.emojiProvider,
    nativeStatusSupported: options.nativeStatusSupported,
    horizontalRuleEnabled: options.horizontalRuleEnabled,
    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
    onInsertMacroFromMacroBrowser: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e = pluginInjectionApi.extension) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.actions.insertMacroFromMacroBrowser,
    popupsMountPoint: popupsMountPoint,
    popupsBoundariesElement: popupsBoundariesElement,
    popupsScrollableElement: popupsScrollableElement,
    insertMenuItems: options.insertMenuItems,
    editorActions: editorActions,
    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
    replacePlusMenuWithElementBrowser: options.replacePlusMenuWithElementBrowser,
    showElementBrowserLink: options.showElementBrowserLink,
    showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
    registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
  });
}