@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';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, askAIQuickInsert, clearFormatting, decreaseMediaSize, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, focusTableResizer, showElementDragHandle, focusToContextMenuTrigger, increaseMediaSize, insertRule, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redoAlt, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, tableMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { shortcutsArray } from './styles';
const codeSm = xcss({
  backgroundColor: 'color.background.neutral',
  borderRadius: 'radius.small',
  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: 'radius.small',
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  width: '50px',
  textAlign: 'center'
});
const codeLg = xcss({
  borderRadius: 'radius.small',
  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
}, ...(expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? [{
  name: formatMessage(blockTypeMessages.smallText),
  type: 'fontSize',
  keymap: () => toggleSmallText
}] : []), {
  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 quickInsertAskAI = ({
  formatMessage
}) => ({
  name: formatMessage(toolbarMessages.askAI),
  type: 'AI',
  keymap: () => askAIQuickInsert
});
const otherFormatting = ({
  formatMessage
}) => {
  const browser = getBrowserInfo();
  return [{
    name: formatMessage(toolbarMessages.clearFormatting),
    type: 'clearFormatting',
    keymap: () => clearFormatting
  }, {
    name: formatMessage(undoRedoMessages.undo),
    type: 'undo',
    keymap: () => undo
  }, {
    name: formatMessage(undoRedoMessages.redo),
    type: 'redo',
    keymap: () => redoAlt
  }, {
    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 newResizeInformationFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(messages.increaseElementSize),
  type: 'media',
  keymap: () => increaseMediaSize
}, {
  name: formatMessage(messages.decreaseElementSize),
  type: 'media',
  keymap: () => decreaseMediaSize
}];
const focusTableResizeHandleFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(messages.focusTableResizeHandle),
  type: 'navigation',
  keymap: () => focusTableResizer
}];

// 'navigation' is used as the type for these entries because Format.type is designed to match ADF
// schema node/mark names — these shortcuts have no corresponding ADF type, so 'navigation' acts as
// a catch-all that passes the schema filter and routes entries to the keyboard shortcuts column in the UI.
const blockControlsShortcutsFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(messages.selectDragHandle),
  type: 'navigation',
  keymap: () => showElementDragHandle
}, {
  name: formatMessage(messages.moveSelectionUp),
  type: 'navigation',
  keymap: () => dragToMoveUp
}, {
  name: formatMessage(messages.moveSelectionDown),
  type: 'navigation',
  keymap: () => dragToMoveDown
}, {
  name: formatMessage(messages.moveSelectionLeft),
  type: 'navigation',
  keymap: () => dragToMoveLeft
}, {
  name: formatMessage(messages.moveSelectionRight),
  type: 'navigation',
  keymap: () => dragToMoveRight
}];
const moveTableRowColumnFormatting = ({
  formatMessage
}) => [{
  name: formatMessage(tableMessages.moveColumnLeftHelpDialogLabel),
  type: 'table',
  keymap: () => moveColumnLeft
}, {
  name: formatMessage(tableMessages.moveColumnRightHelpDialogLabel),
  type: 'table',
  keymap: () => moveColumnRight
}, {
  name: formatMessage(tableMessages.moveRowUpHelpDialogLabel),
  type: 'table',
  keymap: () => moveRowUp
}, {
  name: formatMessage(tableMessages.moveRowDownHelpDialogLabel),
  type: 'table',
  keymap: () => moveRowDown
}];
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, aiEnabled) => {
  const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
  return [...(aiEnabled ? [quickInsertAskAI(intl)] : []), ...navigationKeymaps(intl), ...otherFormatting(intl), ...supportedBySchema, ...(expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) ? blockControlsShortcutsFormatting(intl) : []), ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...focusTableResizeHandleFormatting(intl), ...(editorExperiment('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), ...openCellOptionsFormattingtoFormat(intl), ...(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : [])];
};