@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
262 lines • 11.3 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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';
var MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS = 7;
var getTotalNumberOfAvailableNativeTransforms = function getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) {
if (!blockMenuComponents) {
return 0;
}
var childrenMap = buildChildrenMap(blockMenuComponents);
var headingsKey = getChildrenMapKey(TRANSFORM_HEADINGS_MENU_SECTION.key, 'block-menu-section');
var structureKey = getChildrenMapKey(TRANSFORM_STRUCTURE_MENU_SECTION.key, 'block-menu-section');
var headingsChildren = childrenMap.get(headingsKey) || [];
var structureChildren = childrenMap.get(structureKey) || [];
return [].concat(_toConsumableArray(headingsChildren), _toConsumableArray(structureChildren)).filter(function (c) {
return willComponentRender(c, childrenMap);
}).length;
};
var getMoveUpMoveDownMenuComponents = function 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: function component() {
return /*#__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: function component() {
return /*#__PURE__*/React.createElement(MoveDownDropdownItem, {
api: api
});
}
}];
};
var getTurnIntoMenuComponents = function 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: function component() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
children: null
},
children = _ref.children;
return /*#__PURE__*/React.createElement(FormatMenuComponent, {
api: api
}, children);
},
isHidden: function isHidden() {
return 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: function component() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
children: null
},
children = _ref2.children;
return /*#__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: function component() {
return /*#__PURE__*/React.createElement(SuggestedMenuItems, {
api: api
});
},
isHidden: function isHidden() {
var _api$blockMenu, _api$selection, _api$blockControls;
var blockMenuComponents = api === null || api === 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;
}
var menuItemsMap = createMenuItemsMap(blockMenuComponents);
var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
var preservedSelection = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection;
var currentSelection = preservedSelection || selection;
var 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: function component() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
children: null
},
children = _ref3.children;
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: function component() {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
children: null
},
children = _ref4.children;
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: function component() {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
children: null
},
children = _ref5.children;
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: function component(_ref6) {
var children = _ref6.children;
return /*#__PURE__*/React.createElement(FormatMenuSection, {
api: api
}, children);
}
}];
};
export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
var api = _ref7.api,
config = _ref7.config;
return [].concat(_toConsumableArray(getTurnIntoMenuComponents(api)), [{
type: 'block-menu-section',
key: BLOCK_ACTIONS_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[BLOCK_ACTIONS_MENU_SECTION.key],
component: function component(_ref8) {
var children = _ref8.children;
return /*#__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: function component(_ref9) {
var children = _ref9.children;
return /*#__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: function component() {
return /*#__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: function component(_ref0) {
var children = _ref0.children;
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
hasSeparator: true
}, children);
}
}], _toConsumableArray(getMoveUpMoveDownMenuComponents(api)), [{
type: 'block-menu-section',
key: DELETE_MENU_SECTION.key,
rank: MAIN_BLOCK_MENU_SECTION_RANK[DELETE_MENU_SECTION.key],
component: function component(_ref1) {
var children = _ref1.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: function component() {
return /*#__PURE__*/React.createElement(DeleteDropdownItem, {
api: api
});
}
}]);
};