@atlaskit/editor-plugin-help-dialog 1.1.1 → 1.2.0

package/dist/cjs/ui/styles.js

@@ -1,31 +1,76 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.title = exports.shortcutsArray = exports.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = exports.componentFromKeymapWrapperStyles = exports.column = exports.codeSm = exports.codeMd = exports.codeLg = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var header = exports.header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: ", ";\n  padding: ", " ", ";\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n"])), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-space-300, 24px)", "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", (0, _editorSharedStyles.relativeFontSizeToBase16)(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), "var(--ds-border-radius, 3px)");
-var footer = exports.footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-space-250, 20px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), "var(--ds-space-300, 24px)");
-var contentWrapper = exports.contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", ";\n  border-bottom-right-radius: ", ";\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", "var(--ds-border-radius, 3px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
-var line = exports.line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: ", ";\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)", "var(--ds-space-025, 2px)");
-var content = exports.content = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
+var header = exports.header = (0, _react.css)({
+  zIndex: _editorSharedStyles.akEditorUnitZIndex,
+  minHeight: "var(--ds-space-300, 24px)",
+  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxShadow: "'none'",
+  color: "var(--ds-text, ".concat(colors.N400, ")"),
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var footer = exports.footer = (0, _react.css)({
+  zIndex: _editorSharedStyles.akEditorUnitZIndex,
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
+  lineHeight: "var(--ds-space-250, 20px)",
+  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+  padding: "var(--ds-space-300, 24px)",
+  textAlign: 'right',
+  boxShadow: "'none'"
+});
+var contentWrapper = exports.contentWrapper = (0, _react.css)({
+  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
+  borderBottomRightRadius: "var(--ds-border-radius, 3px)",
+  overflow: 'auto',
+  position: 'relative',
+  color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")")
+});
+var line = exports.line = (0, _react.css)({
+  background: "var(--ds-background-neutral-subtle, #fff)",
+  content: "''",
+  display: 'block',
+  height: "var(--ds-space-025, 2px)",
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  width: '100%',
+  minWidth: '604px'
+});
+var content = exports.content = (0, _react.css)({
+  minWidth: '524px',
+  width: '100%',
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'space-between'
+});
 var column = exports.column = {
   width: '44%',
   '& > ul': {
     padding: 0
   }
 };
-var row = exports.row = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  display: flex;\n  justify-content: space-between;\n"])), "var(--ds-space-250, 20px)");
+var row = exports.row = (0, _react.css)({
+  margin: "var(--ds-space-250, 20px)".concat(" 0"),
+  display: 'flex',
+  justifyContent: 'space-between'
+});
 var dialogHeader = exports.dialogHeader = {
   '&': {
     fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
@@ -44,8 +89,39 @@ var title = exports.title = {
     lineHeight: 1.42857142857143
   }
 };
-var codeSm = exports.codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", ";\n  width: ", ";\n  display: inline-block;\n  height: ", ";\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
-var codeMd = exports.codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", ";\n  display: inline-block;\n  height: ", ";\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)");
-var codeLg = exports.codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", ";\n  display: inline-block;\n  height: ", ";\n  line-height: ", ";\n  padding: 0 ", ";\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
-var shortcutsArray = exports.shortcutsArray = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: ", ";\n"])), "var(--ds-space-150, 12px)");
-var componentFromKeymapWrapperStyles = exports.componentFromKeymapWrapperStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  flex-shrink: 0;\n"])));
+var codeSm = exports.codeSm = (0, _react.css)({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  width: "var(--ds-space-300, 24px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: '24px',
+  textAlign: 'center'
+});
+var codeMd = exports.codeMd = (0, _react.css)({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: '24px',
+  width: '50px',
+  textAlign: 'center'
+});
+var codeLg = exports.codeLg = (0, _react.css)({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: "var(--ds-space-300, 24px)",
+  padding: "0 ".concat("var(--ds-space-150, 12px)"),
+  textAlign: 'center'
+});
+var shortcutsArray = exports.shortcutsArray = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+  gap: "var(--ds-space-150, 12px)"
+});
+var componentFromKeymapWrapperStyles = exports.componentFromKeymapWrapperStyles = (0, _react.css)({
+  flexShrink: 0
+});

package/dist/cjs/ui/utils.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortcutNamesWithoutKeymap = exports.getComponentFromKeymap = void 0;
+var _react = require("@emotion/react");
+var _utils = require("@atlaskit/editor-common/utils");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var getKeyParts = function getKeyParts(keymap) {
+  var shortcut = keymap[_utils.browser.mac ? 'mac' : 'windows'];
+  if (_utils.browser.mac) {
+    shortcut = shortcut.replace('Alt', 'Opt');
+  }
+  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
+};
+var shortcutNamesWithoutKeymap = exports.shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
+var getComponentFromKeymap = exports.getComponentFromKeymap = function getComponentFromKeymap(keymap) {
+  var keyParts = getKeyParts(keymap);
+  return (0, _react.jsx)("span", {
+    css: _styles.componentFromKeymapWrapperStyles
+  }, keyParts.map(function (part, index) {
+    if (part === '+') {
+      return (0, _react.jsx)("span", {
+        key: "".concat(keyParts, "-").concat(index)
+      }, ' + ');
+    } else if (part === 'Cmd') {
+      return (0, _react.jsx)("span", {
+        css: _styles.codeSm,
+        key: "".concat(keyParts, "-").concat(index)
+      }, "\u2318");
+    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
+      return (0, _react.jsx)("span", {
+        css: _styles.codeMd,
+        key: "".concat(keyParts, "-").concat(index)
+      }, part);
+    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
+      return (0, _react.jsx)("span", {
+        css: _styles.codeLg,
+        key: "".concat(keyParts, "-").concat(index)
+      }, part);
+    } else if (part.toLowerCase() === 'enter') {
+      return (0, _react.jsx)("span", {
+        css: _styles.codeSm,
+        key: "".concat(keyParts, "-").concat(index)
+      }, '⏎');
+    }
+    return (0, _react.jsx)("span", {
+      css: _styles.codeSm,
+      key: "".concat(keyParts, "-").concat(index)
+    }, part.toUpperCase());
+  }));
+};

package/dist/es2019/ui/Format.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/Modal.js

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useModal } from '@atlaskit/modal-dialog';
+import { ModalContent } from './ModalContent';
+const Modal = ({
+  formatting
+}) => {
+  const {
+    onClose
+  } = useModal();
+  return jsx(ModalContent, {
+    formatting: formatting,
+    onClose: onClose
+  });
+};
+export default Modal;

package/dist/es2019/ui/ModalContent.js

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+/** @jsxFrag */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
+import { browser } from '@atlaskit/editor-common/utils';
+import ModalFooter from './ModalFooter';
+import ModalHeader from './ModalHeader';
+import { column, content, contentWrapper, line, row, title } from './styles';
+import { getComponentFromKeymap, shortcutNamesWithoutKeymap } from './utils';
+export const ModalContent = ({
+  formatting,
+  onClose
+}) => {
+  return jsx(React.Fragment, null, jsx(ModalHeader, {
+    onClose: onClose
+  }), jsx("div", {
+    css: contentWrapper
+  }, jsx("div", {
+    css: line
+  }), jsx("div", {
+    css: content
+  }, jsx("div", {
+    css: column
+  }, jsx("h2", {
+    css: title
+  }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(form => {
+    const keymap = form.keymap && form.keymap();
+    return keymap && keymap[browser.mac ? 'mac' : 'windows'];
+  }).map(form => jsx("li", {
+    css: row,
+    key: `textFormatting-${form.name}`
+  }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form => jsx("li", {
+    css: row,
+    key: `autoFormatting-${form.name}`
+  }, jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
+    css: line
+  }), jsx("div", {
+    css: column
+  }, jsx("h2", {
+    css: title
+  }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting && jsx("li", {
+    key: `autoFormatting-${form.name}`,
+    css: row
+  }, jsx("span", null, form.name), form.autoFormatting())))))), jsx(ModalFooter, null));
+};
+export default ModalContent;

package/dist/es2019/ui/ModalFooter.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { openHelp } from '@atlaskit/editor-common/keymaps';
+import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
+import { footer } from './styles';
+import { getComponentFromKeymap } from './utils';
+const ModalFooter = () => jsx("div", {
+  css: footer
+}, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
+  values: {
+    keyMap: getComponentFromKeymap(openHelp)
+  }
+})));
+export default ModalFooter;

package/dist/es2019/ui/ModalHeader.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { dialogHeader, header } from './styles';
+const ModalHeader = injectIntl(({
+  intl: {
+    formatMessage
+  },
+  onClose
+}) => {
+  return jsx("div", {
+    css: header
+  }, jsx("h1", {
+    css: dialogHeader
+  }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
+  // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
+  , {
+    onClick: onClose,
+    title: formatMessage(messages.closeHelpDialog),
+    spacing: "compact",
+    iconBefore: jsx(CrossIcon, {
+      label: formatMessage(messages.closeHelpDialog),
+      size: "medium"
+    })
+  })));
+});
+export default ModalHeader;

package/dist/es2019/ui/formatting.js

@@ -0,0 +1,355 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, 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 { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { codeLg, codeMd, codeSm, shortcutsArray } from './styles';
+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("span", {
+    css: codeLg
+  }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"))
+}, {
+  name: formatMessage(toolbarMessages.italic),
+  type: 'em',
+  keymap: () => toggleItalic,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"))
+}, {
+  name: formatMessage(toolbarMessages.underline),
+  type: 'underline',
+  keymap: () => toggleUnderline
+}, {
+  name: formatMessage(toolbarMessages.strike),
+  type: 'strike',
+  keymap: () => toggleStrikethrough,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "~~", jsx(FormattedMessage, 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("span", {
+    css: codeSm
+  }, "#"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading2),
+  type: 'heading',
+  keymap: () => toggleHeading2,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "##"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading3),
+  type: 'heading',
+  keymap: () => toggleHeading3,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "###"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading4),
+  type: 'heading',
+  keymap: () => toggleHeading4,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "####"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading5),
+  type: 'heading',
+  keymap: () => toggleHeading5,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "#####"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading6),
+  type: 'heading',
+  keymap: () => toggleHeading6,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "######"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.normal),
+  type: 'paragraph',
+  keymap: () => setNormalText
+}, {
+  name: formatMessage(listMessages.orderedList),
+  type: 'orderedList',
+  keymap: () => toggleOrderedList,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "1."), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(listMessages.unorderedList),
+  type: 'bulletList',
+  keymap: () => toggleBulletList,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "*"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.blockquote),
+  type: 'blockquote',
+  keymap: () => toggleBlockQuote,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, '>'), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.codeblock),
+  type: 'codeBlock',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "```"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
+  type: 'rule',
+  keymap: () => insertRule,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "---"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.link),
+  type: 'link',
+  keymap: () => addLink,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "[", jsx(FormattedMessage, toolbarInsertBlockMessages.link), "](http://a.com)"))
+}, {
+  name: formatMessage(toolbarMessages.code),
+  type: 'code',
+  keymap: () => toggleCode,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.action),
+  type: 'taskItem',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "[]"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.decision),
+  type: 'decisionItem',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "<>"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.emoji),
+  type: 'emoji',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, ":"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.mention),
+  type: 'mention',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "@"))
+}, {
+  name: formatMessage(alignmentMessages.alignLeft),
+  type: 'alignment',
+  keymap: () => alignLeft
+}, ...(getBooleanFF('platform.editor.text-alignment-keyboard-shortcuts') ? [{
+  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: () => jsx("span", {
+    css: shortcutsArray
+  }, jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "Shift"), ' + ', jsx("span", {
+    css: codeSm
+  }, "\u2190")), jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "Shift"), ' + ', jsx("span", {
+    css: codeSm
+  }, "\u2192")))
+}, {
+  name: formatMessage(messages.selectTableColumn),
+  type: 'table',
+  autoFormatting: () => jsx("span", {
+    css: shortcutsArray
+  }, jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "Shift"), ' + ', jsx("span", {
+    css: codeSm
+  }, "\u2191")), jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "Shift"), ' + ', jsx("span", {
+    css: codeSm
+  }, "\u2193")))
+}, ...(getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? [{
+  name: formatMessage(messages.selectColumnResize),
+  type: 'table',
+  autoFormatting: () => jsx("span", {
+    css: shortcutsArray
+  }, jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "Shift"), ' + ', jsx("span", {
+    css: codeSm
+  }, "C")))
+}, {
+  name: formatMessage(messages.increaseColumnSize),
+  type: 'table',
+  autoFormatting: () => jsx("span", {
+    css: shortcutsArray
+  }, jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "[")))
+}, {
+  name: formatMessage(messages.decreaseColumnSize),
+  type: 'table',
+  autoFormatting: () => jsx("span", {
+    css: shortcutsArray
+  }, jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+    css: codeMd
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeMd
+  }, "]")))
+}] : [])];
+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 imageAutoFormat = {
+  name: 'Image',
+  type: 'image',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"))
+};
+const quickInsertAutoFormat = ({
+  formatMessage
+}) => ({
+  name: formatMessage(messages.quickInsert),
+  type: 'quickInsert',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "/"))
+});
+const isAnyA11yResizeFeatureFlagEnabled = getBooleanFF('platform.editor.a11y-media-resizing_b5v0o') || getBooleanFF('platform.editor.a11y-table-resizing_uapcv');
+export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {
+  const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
+  return [...navigationKeymaps(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...otherFormatting(intl), ...(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), ...(getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : [])];
+};