@atlaskit/editor-plugin-insert-block/dist/es2019/ui/ToolbarInsertBlock/item.js

Insert block plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import memoizeOne from 'memoize-one';
import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
import FieldTextIcon from '@atlaskit/icon-lab/core/field-text';
import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
import CalendarIcon from '@atlaskit/icon/core/calendar';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import ExpandNodeIcon from '@atlaskit/icon/core/chevron-right';
import DecisionIcon from '@atlaskit/icon/core/decision';
import EmojiIcon from '@atlaskit/icon/core/emoji';
import GridIcon from '@atlaskit/icon/core/grid';
import ImageIcon from '@atlaskit/icon/core/image';
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
import LinkIcon from '@atlaskit/icon/core/link';
import MentionIcon from '@atlaskit/icon/core/mention';
import HorizontalRuleIcon from '@atlaskit/icon/core/minus';
import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
import InformationIcon from '@atlaskit/icon/core/status-information';
import TaskIcon from '@atlaskit/icon/core/task';
import { shallowEquals } from './shallow-equals';
const from = init => ({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  value: {
    name: init.name
  },
  elemBefore: jsx(init.Icon, {
    label: "",
    color: "currentColor",
    spacing: "spacious"
  }),
  elemAfter: init.shortcut ?
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
  jsx("div", {
    css: shortcutStyle
  }, init.shortcut) : undefined,
  'aria-label': init.shortcut ? init.content + ' ' + init.shortcut : init.content,
  'aria-haspopup': init['aria-haspopup'],
  'aria-keyshortcuts': init['aria-keyshortcuts'],
  shortcut: init.shortcut,
  isDisabled: init.disabled
});
const mem = fn => memoizeOne(fn, shallowEquals);
export const action = mem(init => {
  return from({
    content: init.content,
    tooltipDescription: init.tooltipDescription,
    disabled: init.disabled,
    name: 'action',
    shortcut: '[]',
    Icon: () => jsx(TaskIcon, {
      label: "",
      color: "currentColor",
      spacing: "spacious"
    }),
    'aria-keyshortcuts': '[ ] Space'
  });
});
export const link = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'link',
  shortcut: tooltip(addLink),
  Icon: LinkIcon,
  'aria-haspopup': init['aria-haspopup'],
  'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
}));
export const media = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'media',
  Icon: ImageIcon
}));
export const imageUpload = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'image upload',
  Icon: ImageIcon
}));
export const mention = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'mention',
  Icon: MentionIcon,
  shortcut: '@',
  'aria-haspopup': init['aria-haspopup'],
  'aria-keyshortcuts': 'Shift+2 Space'
}));
export const emoji = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'emoji',
  Icon: EmojiIcon,
  shortcut: ':',
  'aria-haspopup': init['aria-haspopup'],
  'aria-keyshortcuts': 'Shift+;'
}));
export const table = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'table',
  Icon: GridIcon,
  shortcut: tooltip(toggleTable),
  'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
}));
export const tableSelector = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'table selector',
  Icon: () => jsx(ChevronDownIcon, {
    label: "",
    color: "currentColor",
    size: "small"
  })
}));
export const layout = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'layout',
  Icon: LayoutTwoColumnsIcon
}));
export const codeblock = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'codeblock',
  Icon: AngleBracketsIcon,
  shortcut: init.shortcut,
  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
}));
export const panel = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'panel',
  Icon: InformationIcon,
  shortcut: init.shortcut,
  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
}));
export const blockquote = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'blockquote',
  Icon: QuotationMarkIcon,
  shortcut: init.shortcut,
  'aria-keyshortcuts': 'Shift+. Space'
}));
export const decision = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'decision',
  Icon: DecisionIcon,
  shortcut: '<>',
  'aria-keyshortcuts': 'Shift+, Shift+. Space'
}));
export const horizontalrule = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'horizontalrule',
  Icon: HorizontalRuleIcon,
  shortcut: '---',
  'aria-keyshortcuts': '- - -'
}));
export const expand = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'expand',
  Icon: iconProps => jsx(ExpandNodeIcon, {
    label: iconProps.label,
    size: "small"
  })
}));
export const date = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'date',
  Icon: CalendarIcon,
  shortcut: '//',
  'aria-keyshortcuts': '/ / Enter'
}));
export const placeholder = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'placeholder text',
  Icon: () => jsx(FieldTextIcon, {
    label: "",
    spacing: "spacious",
    color: "currentColor"
  })
}));
export const status = mem(init => from({
  content: init.content,
  tooltipDescription: init.tooltipDescription,
  disabled: init.disabled,
  name: 'status',
  Icon: () => jsx(LozengeIcon, {
    label: "",
    color: "currentColor",
    spacing: "spacious"
  })
}));