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

Insert block plugin for @atlaskit/editor-core

import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { createItems } from '../ToolbarInsertBlock/create-items';
const selector = states => {
  var _states$dateState, _states$hyperlinkStat, _states$hyperlinkStat2, _states$typeAheadStat, _states$blockTypeStat, _states$imageUploadSt, _states$placeholderTe, _states$emojiState, _states$mentionState, _states$mentionState2, _states$mediaState;
  return {
    dateEnabled: (_states$dateState = states.dateState) === null || _states$dateState === void 0 ? void 0 : _states$dateState.isInitialised,
    canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
    activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
    isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed,
    availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
    imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
    placeholderTextAllowInserting: (_states$placeholderTe = states.placeholderTextState) === null || _states$placeholderTe === void 0 ? void 0 : _states$placeholderTe.allowInserting,
    emojiProvider: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.emojiProvider,
    mentionProvider: (_states$mentionState = states.mentionState) === null || _states$mentionState === void 0 ? void 0 : _states$mentionState.mentionProvider,
    canInsertMention: (_states$mentionState2 = states.mentionState) === null || _states$mentionState2 === void 0 ? void 0 : _states$mentionState2.canInsertMention,
    mediaAllowsUploads: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.allowsUploads
  };
};
export const useInsertMenuRailItems = (editorView, options, api) => {
  const {
    formatMessage
  } = useIntl();
  const {
    dateEnabled,
    canInsertLink,
    activeLinkMark,
    isTypeAheadAllowed,
    availableWrapperBlockTypes,
    imageUploadEnabled,
    placeholderTextAllowInserting,
    emojiProvider,
    mentionProvider,
    canInsertMention,
    mediaAllowsUploads
  } = useSharedPluginStateWithSelector(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText'], selector);
  const [_, dropdownItems] = useMemo(() => {
    return createItems({
      isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
      tableSupported: !!editorView.state.schema.nodes.table,
      tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
      mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
      mediaSupported: mediaAllowsUploads !== undefined,
      imageUploadSupported: !!(api !== null && api !== void 0 && api.imageUpload),
      imageUploadEnabled: imageUploadEnabled,
      mentionsSupported: !!mentionProvider,
      mentionsDisabled: !canInsertMention,
      actionSupported: !!editorView.state.schema.nodes.taskItem,
      decisionSupported: !!editorView.state.schema.nodes.decisionItem,
      linkSupported: canInsertLink !== undefined,
      linkDisabled: !canInsertLink || !!activeLinkMark,
      emojiDisabled: !emojiProvider,
      nativeStatusSupported: options.nativeStatusSupported,
      dateEnabled: !!dateEnabled,
      placeholderTextEnabled: placeholderTextAllowInserting,
      horizontalRuleEnabled: options.horizontalRuleEnabled,
      layoutSectionEnabled: Boolean(api === null || api === void 0 ? void 0 : api.layout),
      expandEnabled: !!options.allowExpand,
      showElementBrowserLink: options.showElementBrowserLink,
      emojiProvider: emojiProvider,
      availableWrapperBlockTypes: availableWrapperBlockTypes,
      insertMenuItems: options.insertMenuItems,
      schema: editorView.state.schema,
      // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
      // is not easily available here. I've used 7 as it's the value used for most widths see toolbarSizeToButtons
      numberOfButtons: 7,
      formatMessage,
      isNewMenuEnabled: true
    });
  }, [activeLinkMark, api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, availableWrapperBlockTypes, canInsertLink, canInsertMention, dateEnabled, editorView.state.schema, emojiProvider, formatMessage, imageUploadEnabled, isTypeAheadAllowed, mediaAllowsUploads, mentionProvider, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextAllowInserting]);
  return dropdownItems;
};