UNPKG

@atlaskit/editor-plugin-layout

Version:

Layout plugin for @atlaskit/editor-core

67 lines 2.54 kB
import React from 'react'; import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages'; import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher'; import { FIVE_COLUMNS_LAYOUT_MENU_ITEM, FOUR_COLUMNS_LAYOUT_MENU_ITEM, STRUCTURE_SECTION, THREE_COLUMNS_LAYOUT_MENU_ITEM, TWO_COLUMNS_LAYOUT_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys'; import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank'; import { LayoutQuickInsertMenuItem } from './LayoutQuickInsertMenuItem'; var layoutItems = [{ columnCount: 2, description: messages.columnsDescriptionAdvancedLayout, item: TWO_COLUMNS_LAYOUT_MENU_ITEM, keyword: 'two column', title: layoutMessages.twoColumnsAdvancedLayout }, { columnCount: 3, description: messages.columnsDescriptionAdvancedLayout, item: THREE_COLUMNS_LAYOUT_MENU_ITEM, keyword: 'three column', title: layoutMessages.threeColumnsAdvancedLayout }, { columnCount: 4, description: messages.columnsDescriptionAdvancedLayout, item: FOUR_COLUMNS_LAYOUT_MENU_ITEM, keyword: 'four column', title: layoutMessages.fourColumns }, { columnCount: 5, description: messages.columnsDescriptionAdvancedLayout, item: FIVE_COLUMNS_LAYOUT_MENU_ITEM, keyword: 'five column', title: layoutMessages.fiveColumns }]; export var getLayoutQuickInsertComponents = function getLayoutQuickInsertComponents(_ref) { var api = _ref.api; return layoutItems.map(function (_ref2) { var columnCount = _ref2.columnCount, description = _ref2.description, item = _ref2.item, keyword = _ref2.keyword, title = _ref2.title; return { key: item.key, type: item.type, parents: [{ key: STRUCTURE_SECTION.key, type: STRUCTURE_SECTION.type, rank: STRUCTURE_SECTION_RANK[item.key] }], match: createQuickInsertMatcher(function (_ref3) { var formatMessage = _ref3.formatMessage; return { description: formatMessage(description, { numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1] }), keywords: ['layout', 'column', 'section', 'col', keyword], title: formatMessage(title) }; }), component: function component() { return /*#__PURE__*/React.createElement(LayoutQuickInsertMenuItem, { api: api, columnCount: columnCount, title: title }); } }; }); };