@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
75 lines • 6.11 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { createItems } from '../ToolbarInsertBlock/create-items';
var selector = function 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 var useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText'], selector),
dateEnabled = _useSharedPluginState.dateEnabled,
canInsertLink = _useSharedPluginState.canInsertLink,
activeLinkMark = _useSharedPluginState.activeLinkMark,
isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed,
availableWrapperBlockTypes = _useSharedPluginState.availableWrapperBlockTypes,
imageUploadEnabled = _useSharedPluginState.imageUploadEnabled,
placeholderTextAllowInserting = _useSharedPluginState.placeholderTextAllowInserting,
emojiProvider = _useSharedPluginState.emojiProvider,
mentionProvider = _useSharedPluginState.mentionProvider,
canInsertMention = _useSharedPluginState.canInsertMention,
mediaAllowsUploads = _useSharedPluginState.mediaAllowsUploads;
var _useMemo = useMemo(function () {
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: 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]),
_useMemo2 = _slicedToArray(_useMemo, 2),
_ = _useMemo2[0],
dropdownItems = _useMemo2[1];
return dropdownItems;
};