@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
247 lines • 9.93 kB
JavaScript
import React from 'react';
import { BLOCK_ACTIONS_COPY_MENU_SECTION, BLOCK_ACTIONS_COPY_MENU_SECTION_RANK, BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM, BLOCK_ACTIONS_MENU_SECTION, DELETE_MENU_SECTION, DELETE_MENU_SECTION_RANK, DELETE_MENU_ITEM, POSITION_MENU_SECTION, POSITION_MENU_SECTION_RANK, POSITION_MOVE_DOWN_MENU_ITEM, POSITION_MOVE_UP_MENU_ITEM, TRANSFORM_MENU_ITEM, TRANSFORM_MENU_ITEM_RANK, TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_SUGGESTED_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_HEADINGS_MENU_SECTION, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
import { buildChildrenMap, getChildrenMapKey, willComponentRender } from './block-menu-renderer/utils';
import { CopyLinkDropdownItem } from './copy-link';
import { CopySection } from './copy-section';
import { DeleteDropdownItem } from './delete-button';
import { DeleteSection } from './delete-section';
import { FormatMenuComponent } from './format-menu-nested';
import { FormatMenuSection } from './format-menu-section';
import { MenuSection } from './MenuSection';
import { MoveDownDropdownItem } from './move-down';
import { MoveUpDropdownItem } from './move-up';
import { SuggestedItemsMenuSection } from './suggested-items-menu-section';
import { SuggestedMenuItems } from './suggested-menu-items';
import { hasContentBeforeCreate, hasContentBeforeStructure, hasContentBeforeHeadings } from './utils/checkHasPreviousSectionContent';
import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
import { createMenuItemsMap } from './utils/createMenuItemsMap';
import { getSuggestedItemsFromSelection } from './utils/getSuggestedItemsFromSelection';
const MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS = 7;
const getTotalNumberOfAvailableNativeTransforms = blockMenuComponents => {
if (!blockMenuComponents) {
return 0;
}
const childrenMap = buildChildrenMap(blockMenuComponents);
const headingsKey = getChildrenMapKey(TRANSFORM_HEADINGS_MENU_SECTION.key, 'block-menu-section');
const structureKey = getChildrenMapKey(TRANSFORM_STRUCTURE_MENU_SECTION.key, 'block-menu-section');
const headingsChildren = childrenMap.get(headingsKey) || [];
const structureChildren = childrenMap.get(structureKey) || [];
return [...headingsChildren, ...structureChildren].filter(c => willComponentRender(c, childrenMap)).length;
};
const getMoveUpMoveDownMenuComponents = api => {
return [{
type: 'block-menu-item',
key: POSITION_MOVE_UP_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: POSITION_MENU_SECTION.key,
rank: POSITION_MENU_SECTION_RANK[POSITION_MOVE_UP_MENU_ITEM.key]
},
component: () => /*#__PURE__*/React.createElement(MoveUpDropdownItem, {
api: api
})
}, {
type: 'block-menu-item',
key: POSITION_MOVE_DOWN_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: POSITION_MENU_SECTION.key,
rank: POSITION_MENU_SECTION_RANK[POSITION_MOVE_DOWN_MENU_ITEM.key]
},
component: () => /*#__PURE__*/React.createElement(MoveDownDropdownItem, {
api: api
})
}];
};
const getTurnIntoMenuComponents = api => {
return [{
type: 'block-menu-nested',
key: TRANSFORM_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: TRANSFORM_MENU_SECTION.key,
rank: TRANSFORM_MENU_SECTION_RANK[TRANSFORM_MENU_ITEM.key]
},
component: ({
children
} = {
children: null
}) => {
return /*#__PURE__*/React.createElement(FormatMenuComponent, {
api: api
}, children);
},
isHidden: () => checkIsFormatMenuHidden(api)
}, {
type: 'block-menu-section',
key: TRANSFORM_SUGGESTED_MENU_SECTION.key,
parent: {
type: 'block-menu-nested',
key: TRANSFORM_MENU_ITEM.key,
rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_SUGGESTED_MENU_SECTION.key]
},
component: ({
children
} = {
children: null
}) => /*#__PURE__*/React.createElement(SuggestedItemsMenuSection, {
api: api
}, children)
}, {
type: 'block-menu-item',
key: TRANSFORM_SUGGESTED_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: TRANSFORM_SUGGESTED_MENU_SECTION.key,
rank: TRANSFORM_SUGGESTED_MENU_SECTION_RANK[TRANSFORM_SUGGESTED_MENU_ITEM.key]
},
component: () => /*#__PURE__*/React.createElement(SuggestedMenuItems, {
api: api
}),
isHidden: () => {
var _api$blockMenu, _api$selection, _api$selection$shared, _api$blockControls, _api$blockControls$sh;
const blockMenuComponents = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
if (getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) < MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS) {
return true;
}
const menuItemsMap = createMenuItemsMap(blockMenuComponents);
const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState.currentState()) === null || _api$selection$shared === void 0 ? void 0 : _api$selection$shared.selection;
const preservedSelection = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection;
const currentSelection = preservedSelection || selection;
const suggestedItems = getSuggestedItemsFromSelection(menuItemsMap, currentSelection);
return suggestedItems.length === 0;
}
}, {
type: 'block-menu-section',
key: TRANSFORM_CREATE_MENU_SECTION.key,
parent: {
type: 'block-menu-nested',
key: TRANSFORM_MENU_ITEM.key,
rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
},
component: ({
children
} = {
children: null
}) => {
return /*#__PURE__*/React.createElement(MenuSection, {
title: blockMenuMessages.create,
hasSeparator: hasContentBeforeCreate(api)
}, children);
}
}, {
type: 'block-menu-section',
key: TRANSFORM_STRUCTURE_MENU_SECTION.key,
parent: {
type: 'block-menu-nested',
key: TRANSFORM_MENU_ITEM.key,
rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_STRUCTURE_MENU_SECTION.key]
},
component: ({
children
} = {
children: null
}) => {
return /*#__PURE__*/React.createElement(MenuSection, {
title: blockMenuMessages.structure,
hasSeparator: hasContentBeforeStructure(api)
}, children);
}
}, {
type: 'block-menu-section',
key: TRANSFORM_HEADINGS_MENU_SECTION.key,
parent: {
type: 'block-menu-nested',
key: TRANSFORM_MENU_ITEM.key,
rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_HEADINGS_MENU_SECTION.key]
},
component: ({
children
} = {
children: null
}) => {
return /*#__PURE__*/React.createElement(MenuSection, {
title: blockMenuMessages.headings,
hasSeparator: hasContentBeforeHeadings(api)
}, children);
}
}, {
type: 'block-menu-section',
key: TRANSFORM_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[TRANSFORM_MENU_SECTION.key],
component: ({
children
}) => {
return /*#__PURE__*/React.createElement(FormatMenuSection, {
api: api
}, children);
}
}];
};
export const getBlockMenuComponents = ({
api,
config
}) => {
return [...getTurnIntoMenuComponents(api), {
type: 'block-menu-section',
key: BLOCK_ACTIONS_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[BLOCK_ACTIONS_MENU_SECTION.key],
component: ({
children
}) => /*#__PURE__*/React.createElement(CopySection, null, children)
}, {
type: 'block-menu-section',
key: BLOCK_ACTIONS_COPY_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[BLOCK_ACTIONS_COPY_MENU_SECTION.key],
component: ({
children
}) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
hasSeparator: true
}, children)
}, {
type: 'block-menu-item',
key: BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: BLOCK_ACTIONS_COPY_MENU_SECTION.key,
rank: BLOCK_ACTIONS_COPY_MENU_SECTION_RANK[BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM.key]
},
component: () => /*#__PURE__*/React.createElement(CopyLinkDropdownItem, {
api: api,
config: config
})
}, {
type: 'block-menu-section',
key: POSITION_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[POSITION_MENU_SECTION.key],
component: ({
children
}) => {
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
hasSeparator: true
}, children);
}
}, ...getMoveUpMoveDownMenuComponents(api), {
type: 'block-menu-section',
key: DELETE_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[DELETE_MENU_SECTION.key],
component: ({
children
}) => {
return /*#__PURE__*/React.createElement(DeleteSection, null, children);
}
}, {
type: 'block-menu-item',
key: DELETE_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: DELETE_MENU_SECTION.key,
rank: DELETE_MENU_SECTION_RANK[DELETE_MENU_ITEM.key]
},
component: () => /*#__PURE__*/React.createElement(DeleteDropdownItem, {
api: api
})
}];
};