@atlaskit/editor-plugin-help-dialog/dist/es2019/ui/formatting.js

Help Dialog plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl-next';
import { browser } from '@atlaskit/editor-common/browser';
import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, focusToContextMenuTrigger, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
import { Box, xcss } from '@atlaskit/primitives';
import { shortcutsArray } from './styles';
const codeSm = xcss({
  backgroundColor: 'color.background.neutral',
  borderRadius: 'border.radius',
  width: "var(--ds-space-300, 24px)",
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  textAlign: 'center'
});
const codeMd = xcss({
  backgroundColor: 'color.background.neutral',
  borderRadius: 'border.radius',
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  width: '50px',
  textAlign: 'center'
});
const codeLg = xcss({
  borderRadius: 'border.radius',
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  textAlign: 'center',
  paddingInline: 'space.150',
  backgroundColor: 'color.background.neutral'
});
const navigationKeymaps = ({
  formatMessage
}) => [{
  name: formatMessage(toolbarMessages.navigateToEditorToolbar),
  type: 'navigation',
  keymap: () => navToEditorToolbar
}, {
  name: formatMessage(toolbarMessages.navigateToFloatingToolbar),
  type: 'navigation',
  keymap: () => navToFloatingToolbar
}];
export const formatting = ({
  formatMessage
}) => [{
  name: formatMessage(toolbarMessages.bold),
  type: 'strong',
  keymap: () => toggleBold,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "**", jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , toolbarMessages.bold), "**"))
}, {
  name: formatMessage(toolbarMessages.italic),
  type: 'em',
  keymap: () => toggleItalic,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "*", jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , toolbarMessages.italic), "*"))
}, {
  name: formatMessage(toolbarMessages.underline),
  type: 'underline',
  keymap: () => toggleUnderline
}, {
  name: formatMessage(toolbarMessages.strike),
  type: 'strike',
  keymap: () => toggleStrikethrough,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "~~", jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , toolbarMessages.strike), "~~"))
}, {
  name: formatMessage(toolbarMessages.subscript),
  type: 'subsup',
  keymap: () => toggleSubscript
}, {
  name: formatMessage(toolbarMessages.superscript),
  type: 'subsup',
  keymap: () => toggleSuperscript
}, {
  name: formatMessage(blockTypeMessages.heading1),
  type: 'heading',
  keymap: () => toggleHeading1,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "#"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.heading2),
  type: 'heading',
  keymap: () => toggleHeading2,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "##"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.heading3),
  type: 'heading',
  keymap: () => toggleHeading3,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "###"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.heading4),
  type: 'heading',
  keymap: () => toggleHeading4,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "####"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.heading5),
  type: 'heading',
  keymap: () => toggleHeading5,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "#####"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.heading6),
  type: 'heading',
  keymap: () => toggleHeading6,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "######"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.normal),
  type: 'paragraph',
  keymap: () => setNormalText
}, {
  name: formatMessage(listMessages.orderedList),
  type: 'orderedList',
  keymap: () => toggleOrderedList,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "1."), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(listMessages.unorderedList),
  type: 'bulletList',
  keymap: () => toggleBulletList,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "*"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.blockquote),
  type: 'blockquote',
  keymap: () => toggleBlockQuote,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, '>'), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(blockTypeMessages.codeblock),
  type: 'codeBlock',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "```"))
}, {
  name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
  type: 'rule',
  keymap: () => insertRule,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "---"))
}, {
  name: formatMessage(toolbarInsertBlockMessages.link),
  type: 'link',
  keymap: () => addLink,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "[", jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , toolbarInsertBlockMessages.link), "](http://a.com)"))
}, {
  name: formatMessage(toolbarMessages.code),
  type: 'code',
  keymap: () => toggleCode,
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "`", jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , toolbarMessages.code), "`"))
}, {
  name: formatMessage(toolbarInsertBlockMessages.action),
  type: 'taskItem',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "[]"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(toolbarInsertBlockMessages.decision),
  type: 'decisionItem',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "<>"), ' ', jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "Space"))
}, {
  name: formatMessage(toolbarInsertBlockMessages.emoji),
  type: 'emoji',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, ":"))
}, {
  name: formatMessage(toolbarInsertBlockMessages.mention),
  type: 'mention',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "@"))
}, {
  name: formatMessage(alignmentMessages.alignLeft),
  type: 'alignment',
  keymap: () => alignLeft
}, {
  name: formatMessage(alignmentMessages.alignCenter),
  type: 'alignment',
  keymap: () => alignCenter
}, {
  name: formatMessage(alignmentMessages.alignRight),
  type: 'alignment',
  keymap: () => alignRight
}];
const otherFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(toolbarMessages.clearFormatting),
  type: 'clearFormatting',
  keymap: () => clearFormatting
}, {
  name: formatMessage(undoRedoMessages.undo),
  type: 'undo',
  keymap: () => undo
}, {
  name: formatMessage(undoRedoMessages.redo),
  type: 'redo',
  keymap: () => redo
}, {
  name: formatMessage(messages.pastePlainText),
  type: 'paste',
  keymap: () => pastePlainText
}, {
  name: formatMessage(annotationMessages.createComment),
  type: 'annotation',
  keymap: () => addInlineComment
}, {
  name: formatMessage(messages.CheckUncheckActionItem),
  type: 'checkbox',
  keymap: () => toggleTaskItemCheckbox
}, {
  name: formatMessage(messages.selectTableRow),
  type: 'table',
  autoFormatting: () =>
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
  jsx("span", {
    css: shortcutsArray
  }, jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, "Shift"), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "\u2190")), jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, "Shift"), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "\u2192")))
}, {
  name: formatMessage(messages.selectTableColumn),
  type: 'table',
  autoFormatting: () =>
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
  jsx("span", {
    css: shortcutsArray
  }, jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, "Shift"), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "\u2191")), jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, "Shift"), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "\u2193")))
}, ...[{
  name: formatMessage(messages.InsertTableColumn),
  type: 'table',
  autoFormatting: () =>
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
  jsx("span", {
    css: shortcutsArray
  }, jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "=")), jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "-")))
}, {
  name: formatMessage(messages.InsertTableRow),
  type: 'table',
  autoFormatting: () =>
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
  jsx("span", {
    css: shortcutsArray
  }, jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "]")), jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "[")))
}], ...[{
  name: formatMessage(messages.selectColumnResize),
  type: 'table',
  autoFormatting: () =>
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
  jsx("span", {
    css: shortcutsArray
  }, jsx("span", null, jsx(Box, {
    as: "span",
    xcss: browser.mac ? codeSm : codeMd
  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
    as: "span",
    xcss: codeMd
  }, "Shift"), ' + ', jsx(Box, {
    as: "span",
    xcss: codeSm
  }, "C")))
}], {
  name: formatMessage(messages.highlightColor),
  type: 'highlight',
  keymap: () => toggleHighlightPalette
}];
const resizeInformationFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(messages.increaseSize),
  type: 'media',
  keymap: () => increaseMediaSize
}, {
  name: formatMessage(messages.decreaseSize),
  type: 'media',
  keymap: () => decreaseMediaSize
}];
const focusTableResizeHandleFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(messages.focusTableResizeHandle),
  type: 'navigation',
  keymap: () => focusTableResizer
}];
const openCellOptionsFormattingtoFormat = ({
  formatMessage
}) => [{
  name: formatMessage(messages.openCellOptions),
  type: 'image',
  keymap: () => focusToContextMenuTrigger
}];
const imageAutoFormat = {
  name: 'Image',
  type: 'image',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "![", jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , messages.altText), "](http://www.image.com)"))
};
const quickInsertAutoFormat = ({
  formatMessage
}) => ({
  name: formatMessage(messages.quickInsert),
  type: 'quickInsert',
  autoFormatting: () => jsx("span", null, jsx(Box, {
    as: "span",
    xcss: codeLg
  }, "/"))
});
export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
) => {
  const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
  return [...navigationKeymaps(intl), ...otherFormatting(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...focusTableResizeHandleFormatting(intl), ...resizeInformationFormatting(intl), ...openCellOptionsFormattingtoFormat(intl)];
};