@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
67 lines • 2.54 kB
JavaScript
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
});
}
};
});
};