@atlaskit/editor-plugin-layout/dist/es2019/ui/quick-insert/getLayoutQuickInsertComponents.js

Layout plugin for @atlaskit/editor-core

import React from 'react';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
import { toolbarMessages as layoutMessages } from '@atlaskit/editor-common/messages/layout';
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';
const layoutItems = [{
  columnCount: 2,
  description: messages.columnsDescriptionAdvancedLayout,
  item: TWO_COLUMNS_LAYOUT_MENU_ITEM,
  keyword: 'two column',
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVMM.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJY.png'
  },
  title: layoutMessages.twoColumnsAdvancedLayout
}, {
  columnCount: 3,
  description: messages.columnsDescriptionAdvancedLayout,
  item: THREE_COLUMNS_LAYOUT_MENU_ITEM,
  keyword: 'three column',
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNM.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK3.png'
  },
  title: layoutMessages.threeColumnsAdvancedLayout
}, {
  columnCount: 4,
  description: messages.columnsDescriptionAdvancedLayout,
  item: FOUR_COLUMNS_LAYOUT_MENU_ITEM,
  keyword: 'four column',
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNI.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK5.png'
  },
  title: layoutMessages.fourColumns
}, {
  columnCount: 5,
  description: messages.columnsDescriptionAdvancedLayout,
  item: FIVE_COLUMNS_LAYOUT_MENU_ITEM,
  keyword: 'five column',
  previewImageUrls: {
    light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNO.png',
    dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJV.png'
  },
  title: layoutMessages.fiveColumns
}];
export const getLayoutQuickInsertComponents = ({
  api
}) => layoutItems.map(({
  columnCount,
  description,
  item,
  keyword,
  previewImageUrls,
  title
}) => ({
  key: item.key,
  type: item.type,
  parents: [{
    key: STRUCTURE_SECTION.key,
    type: STRUCTURE_SECTION.type,
    rank: STRUCTURE_SECTION_RANK[item.key]
  }],
  match: createQuickInsertMatcher(({
    formatMessage
  }) => ({
    description: formatMessage(description, {
      numberOfColumns: columnCount
    }),
    keywords: ['layout', 'column', 'section', 'col', keyword],
    title: formatMessage(title)
  })),
  component: () => /*#__PURE__*/React.createElement(LayoutQuickInsertMenuItem, {
    api: api,
    columnCount: columnCount,
    previewImageUrls: previewImageUrls,
    title: title
  })
}));