@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
94 lines (93 loc) • 4.12 kB
JavaScript
import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { createItems } from '../../ToolbarInsertBlock/create-items';
import { filterDropdownItemsByBreakpoint } from './filterDropdownItems';
export const useInsertButtonState = ({
api,
breakpoint,
editorView,
horizontalRuleEnabled,
insertMenuItems,
itemFilter,
nativeStatusSupported,
numberOfButtons,
tableSelectorSupported,
expandEnabled,
showElementBrowserLink,
toolbarConfig
}) => {
const {
formatMessage
} = useIntl();
const isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
const imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
const mentionsSupported = !!useSharedPluginStateSelector(api, 'mention.mentionProvider');
const canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
const dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
const placeholderTextEnabled = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
const mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
const canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
const activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
const emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
const availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
// Computed values
const mediaUploadsEnabled = mediaAllowsUploads;
const mediaSupported = mediaAllowsUploads !== undefined;
const isEditorOffline = isOfflineMode(connectivityMode);
const imageUploadSupported = !!(api !== null && api !== void 0 && api.imageUpload);
const mentionsDisabled = !canInsertMention;
const linkSupported = canInsertLink !== undefined;
const linkDisabled = !canInsertLink || !!activeLinkMark;
const emojiDisabled = !emojiProvider;
const actionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem);
const decisionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.decisionItem);
const layoutSectionEnabled = !!(api !== null && api !== void 0 && api.layout);
const [, allDropdownItems] = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
isTypeAheadAllowed: isTypeAheadAllowed,
tableSupported: !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table),
tableSelectorSupported,
mediaUploadsEnabled,
mediaSupported,
isEditorOffline,
imageUploadSupported,
imageUploadEnabled,
mentionsSupported,
mentionsDisabled,
actionSupported,
decisionSupported,
linkSupported,
linkDisabled,
emojiDisabled,
hasEmojiPlugin: !!(api !== null && api !== void 0 && api.emoji),
hasMentionsPlugin: !!(api !== null && api !== void 0 && api.mention),
hasMediaPlugin: !!(api !== null && api !== void 0 && api.media),
nativeStatusSupported,
dateEnabled,
placeholderTextEnabled,
horizontalRuleEnabled,
layoutSectionEnabled,
expandEnabled,
showElementBrowserLink,
emojiProvider,
availableWrapperBlockTypes,
insertMenuItems,
itemFilter,
schema: editorView === null || editorView === void 0 ? void 0 : editorView.state.schema,
numberOfButtons: numberOfButtons || 0,
formatMessage
}) : [, []];
const dropdownItems = useMemo(() => {
if (!breakpoint || !toolbarConfig) {
return allDropdownItems;
}
return filterDropdownItemsByBreakpoint(allDropdownItems, breakpoint, toolbarConfig);
}, [allDropdownItems, breakpoint, toolbarConfig]);
return {
dropdownItems,
emojiProvider,
isTypeAheadAllowed
};
};