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

Help Dialog plugin for @atlaskit/editor-core

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
/**
 * @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';
var 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'
});
var 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'
});
var 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'
});
var navigationKeymaps = function navigationKeymaps(_ref) {
  var formatMessage = _ref.formatMessage;
  return [{
    name: formatMessage(toolbarMessages.navigateToEditorToolbar),
    type: 'navigation',
    keymap: function keymap() {
      return navToEditorToolbar;
    }
  }, {
    name: formatMessage(toolbarMessages.navigateToFloatingToolbar),
    type: 'navigation',
    keymap: function keymap() {
      return navToFloatingToolbar;
    }
  }];
};
export var formatting = function formatting(_ref2) {
  var formatMessage = _ref2.formatMessage;
  return [{
    name: formatMessage(toolbarMessages.bold),
    type: 'strong',
    keymap: function keymap() {
      return toggleBold;
    },
    autoFormatting: function autoFormatting() {
      return 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: function keymap() {
      return toggleItalic;
    },
    autoFormatting: function autoFormatting() {
      return 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: function keymap() {
      return toggleUnderline;
    }
  }, {
    name: formatMessage(toolbarMessages.strike),
    type: 'strike',
    keymap: function keymap() {
      return toggleStrikethrough;
    },
    autoFormatting: function autoFormatting() {
      return 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: function keymap() {
      return toggleSubscript;
    }
  }, {
    name: formatMessage(toolbarMessages.superscript),
    type: 'subsup',
    keymap: function keymap() {
      return toggleSuperscript;
    }
  }, {
    name: formatMessage(blockTypeMessages.heading1),
    type: 'heading',
    keymap: function keymap() {
      return toggleHeading1;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeSm
      }, "#"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.heading2),
    type: 'heading',
    keymap: function keymap() {
      return toggleHeading2;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "##"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.heading3),
    type: 'heading',
    keymap: function keymap() {
      return toggleHeading3;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "###"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.heading4),
    type: 'heading',
    keymap: function keymap() {
      return toggleHeading4;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "####"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.heading5),
    type: 'heading',
    keymap: function keymap() {
      return toggleHeading5;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "#####"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.heading6),
    type: 'heading',
    keymap: function keymap() {
      return toggleHeading6;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "######"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.normal),
    type: 'paragraph',
    keymap: function keymap() {
      return setNormalText;
    }
  }, {
    name: formatMessage(listMessages.orderedList),
    type: 'orderedList',
    keymap: function keymap() {
      return toggleOrderedList;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeSm
      }, "1."), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(listMessages.unorderedList),
    type: 'bulletList',
    keymap: function keymap() {
      return toggleBulletList;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeSm
      }, "*"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.blockquote),
    type: 'blockquote',
    keymap: function keymap() {
      return toggleBlockQuote;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, '>'), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(blockTypeMessages.codeblock),
    type: 'codeBlock',
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "```"));
    }
  }, {
    name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
    type: 'rule',
    keymap: function keymap() {
      return insertRule;
    },
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "---"));
    }
  }, {
    name: formatMessage(toolbarInsertBlockMessages.link),
    type: 'link',
    keymap: function keymap() {
      return addLink;
    },
    autoFormatting: function autoFormatting() {
      return 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: function keymap() {
      return toggleCode;
    },
    autoFormatting: function autoFormatting() {
      return 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: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeSm
      }, "[]"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(toolbarInsertBlockMessages.decision),
    type: 'decisionItem',
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeSm
      }, "<>"), ' ', jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "Space"));
    }
  }, {
    name: formatMessage(toolbarInsertBlockMessages.emoji),
    type: 'emoji',
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, ":"));
    }
  }, {
    name: formatMessage(toolbarInsertBlockMessages.mention),
    type: 'mention',
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "@"));
    }
  }, {
    name: formatMessage(alignmentMessages.alignLeft),
    type: 'alignment',
    keymap: function keymap() {
      return alignLeft;
    }
  }, {
    name: formatMessage(alignmentMessages.alignCenter),
    type: 'alignment',
    keymap: function keymap() {
      return alignCenter;
    }
  }, {
    name: formatMessage(alignmentMessages.alignRight),
    type: 'alignment',
    keymap: function keymap() {
      return alignRight;
    }
  }];
};
var otherFormatting = function otherFormatting(_ref3) {
  var formatMessage = _ref3.formatMessage;
  return [{
    name: formatMessage(toolbarMessages.clearFormatting),
    type: 'clearFormatting',
    keymap: function keymap() {
      return clearFormatting;
    }
  }, {
    name: formatMessage(undoRedoMessages.undo),
    type: 'undo',
    keymap: function keymap() {
      return undo;
    }
  }, {
    name: formatMessage(undoRedoMessages.redo),
    type: 'redo',
    keymap: function keymap() {
      return redo;
    }
  }, {
    name: formatMessage(messages.pastePlainText),
    type: 'paste',
    keymap: function keymap() {
      return pastePlainText;
    }
  }, {
    name: formatMessage(annotationMessages.createComment),
    type: 'annotation',
    keymap: function keymap() {
      return addInlineComment;
    }
  }, {
    name: formatMessage(messages.CheckUncheckActionItem),
    type: 'checkbox',
    keymap: function keymap() {
      return toggleTaskItemCheckbox;
    }
  }, {
    name: formatMessage(messages.selectTableRow),
    type: 'table',
    autoFormatting: function autoFormatting() {
      return (
        // 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: function autoFormatting() {
      return (
        // 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")))
      );
    }
  }].concat([{
    name: formatMessage(messages.InsertTableColumn),
    type: 'table',
    autoFormatting: function autoFormatting() {
      return (
        // 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: function autoFormatting() {
      return (
        // 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: function autoFormatting() {
      return (
        // 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: function keymap() {
      return toggleHighlightPalette;
    }
  }]);
};
var resizeInformationFormatting = function resizeInformationFormatting(_ref4) {
  var formatMessage = _ref4.formatMessage;
  return [{
    name: formatMessage(messages.increaseSize),
    type: 'media',
    keymap: function keymap() {
      return increaseMediaSize;
    }
  }, {
    name: formatMessage(messages.decreaseSize),
    type: 'media',
    keymap: function keymap() {
      return decreaseMediaSize;
    }
  }];
};
var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref5) {
  var formatMessage = _ref5.formatMessage;
  return [{
    name: formatMessage(messages.focusTableResizeHandle),
    type: 'navigation',
    keymap: function keymap() {
      return focusTableResizer;
    }
  }];
};
var openCellOptionsFormattingtoFormat = function openCellOptionsFormattingtoFormat(_ref6) {
  var formatMessage = _ref6.formatMessage;
  return [{
    name: formatMessage(messages.openCellOptions),
    type: 'image',
    keymap: function keymap() {
      return focusToContextMenuTrigger;
    }
  }];
};
var imageAutoFormat = {
  name: 'Image',
  type: 'image',
  autoFormatting: function autoFormatting() {
    return 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)"));
  }
};
var quickInsertAutoFormat = function quickInsertAutoFormat(_ref7) {
  var formatMessage = _ref7.formatMessage;
  return {
    name: formatMessage(messages.quickInsert),
    type: 'quickInsert',
    autoFormatting: function autoFormatting() {
      return jsx("span", null, jsx(Box, {
        as: "span",
        xcss: codeLg
      }, "/"));
    }
  };
};
export var getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
) {
  var supportedBySchema = formatting(intl).filter(function (format) {
    return schema.nodes[format.type] || schema.marks[format.type];
  });
  return [].concat(_toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(otherFormatting(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(focusTableResizeHandleFormatting(intl)), _toConsumableArray(resizeInformationFormatting(intl)), _toConsumableArray(openCellOptionsFormattingtoFormat(intl)));
};