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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-help-dialog
 
+## 1.2.0
+
+### Minor Changes
+
+- [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934) [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) - bumped editor-prosemirror version to 4.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.2
+
+### Patch Changes
+
+- [#91571](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91571) [`984cb24fae77`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/984cb24fae77) - refactored help dialog
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/cjs/ui/Format.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Modal.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _ModalContent = require("./ModalContent");
+/** @jsx jsx */
+
+var Modal = function Modal(_ref) {
+  var formatting = _ref.formatting;
+  var _useModal = (0, _modalDialog.useModal)(),
+    onClose = _useModal.onClose;
+  return (0, _react.jsx)(_ModalContent.ModalContent, {
+    formatting: formatting,
+    onClose: onClose
+  });
+};
+var _default = exports.default = Modal;

package/dist/cjs/ui/ModalContent.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _utils = require("@atlaskit/editor-common/utils");
+var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
+var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
+var _styles = require("./styles");
+var _utils2 = require("./utils");
+/** @jsx jsx */
+/** @jsxFrag */
+
+var ModalContent = exports.ModalContent = function ModalContent(_ref) {
+  var formatting = _ref.formatting,
+    onClose = _ref.onClose;
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_ModalHeader.default, {
+    onClose: onClose
+  }), (0, _react2.jsx)("div", {
+    css: _styles.contentWrapper
+  }, (0, _react2.jsx)("div", {
+    css: _styles.line
+  }), (0, _react2.jsx)("div", {
+    css: _styles.content
+  }, (0, _react2.jsx)("div", {
+    css: _styles.column
+  }, (0, _react2.jsx)("h2", {
+    css: _styles.title
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
+    var keymap = form.keymap && form.keymap();
+    return keymap && keymap[_utils.browser.mac ? 'mac' : 'windows'];
+  }).map(function (form) {
+    return (0, _react2.jsx)("li", {
+      css: _styles.row,
+      key: "textFormatting-".concat(form.name)
+    }, (0, _react2.jsx)("span", null, form.name), (0, _utils2.getComponentFromKeymap)(form.keymap()));
+  }), formatting.filter(function (form) {
+    return _utils2.shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
+  }).filter(function (form) {
+    return form.autoFormatting;
+  }).map(function (form) {
+    return (0, _react2.jsx)("li", {
+      css: _styles.row,
+      key: "autoFormatting-".concat(form.name)
+    }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
+  }))), (0, _react2.jsx)("div", {
+    css: _styles.line
+  }), (0, _react2.jsx)("div", {
+    css: _styles.column
+  }, (0, _react2.jsx)("h2", {
+    css: _styles.title
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
+    return _utils2.shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
+  }).map(function (form) {
+    return form.autoFormatting && (0, _react2.jsx)("li", {
+      key: "autoFormatting-".concat(form.name),
+      css: _styles.row
+    }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
+  }))))), (0, _react2.jsx)(_ModalFooter.default, null));
+};
+var _default = exports.default = ModalContent;

package/dist/cjs/ui/ModalFooter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("./styles");
+var _utils = require("./utils");
+/** @jsx jsx */
+
+var ModalFooter = function ModalFooter() {
+  return (0, _react.jsx)("div", {
+    css: _styles.footer
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.helpDialogMessages.helpDialogTips, {
+    values: {
+      keyMap: (0, _utils.getComponentFromKeymap)(_keymaps.openHelp)
+    }
+  })));
+};
+var _default = exports.default = ModalFooter;

package/dist/cjs/ui/ModalHeader.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
+  var formatMessage = _ref.intl.formatMessage,
+    onClose = _ref.onClose;
+  return (0, _react.jsx)("div", {
+    css: _styles.header
+  }, (0, _react.jsx)("h1", {
+    css: _styles.dialogHeader
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)), (0, _react.jsx)("div", null, (0, _react.jsx)(_uiMenu.ToolbarButton
+  // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
+  , {
+    onClick: onClose,
+    title: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
+    spacing: "compact",
+    iconBefore: (0, _react.jsx)(_cross.default, {
+      label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
+      size: "medium"
+    })
+  })));
+});
+var _default = exports.default = ModalHeader;

package/dist/cjs/ui/formatting.js

@@ -0,0 +1,492 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSupportedFormatting = exports.formatting = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var navigationKeymaps = function navigationKeymaps(_ref) {
+  var formatMessage = _ref.formatMessage;
+  return [{
+    name: formatMessage(_messages.toolbarMessages.navigateToEditorToolbar),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.navToEditorToolbar;
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.navigateToFloatingToolbar),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.navToFloatingToolbar;
+    }
+  }];
+};
+var formatting = exports.formatting = function formatting(_ref2) {
+  var formatMessage = _ref2.formatMessage;
+  return [{
+    name: formatMessage(_messages.toolbarMessages.bold),
+    type: 'strong',
+    keymap: function keymap() {
+      return _keymaps.toggleBold;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "**", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.bold), "**"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.italic),
+    type: 'em',
+    keymap: function keymap() {
+      return _keymaps.toggleItalic;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "*", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.italic), "*"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.underline),
+    type: 'underline',
+    keymap: function keymap() {
+      return _keymaps.toggleUnderline;
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.strike),
+    type: 'strike',
+    keymap: function keymap() {
+      return _keymaps.toggleStrikethrough;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "~~", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.strike), "~~"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.subscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return _keymaps.toggleSubscript;
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.superscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return _keymaps.toggleSuperscript;
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.heading1),
+    type: 'heading',
+    keymap: function keymap() {
+      return _keymaps.toggleHeading1;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "#"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.heading2),
+    type: 'heading',
+    keymap: function keymap() {
+      return _keymaps.toggleHeading2;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "##"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.heading3),
+    type: 'heading',
+    keymap: function keymap() {
+      return _keymaps.toggleHeading3;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "###"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.heading4),
+    type: 'heading',
+    keymap: function keymap() {
+      return _keymaps.toggleHeading4;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "####"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.heading5),
+    type: 'heading',
+    keymap: function keymap() {
+      return _keymaps.toggleHeading5;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "#####"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.heading6),
+    type: 'heading',
+    keymap: function keymap() {
+      return _keymaps.toggleHeading6;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "######"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.normal),
+    type: 'paragraph',
+    keymap: function keymap() {
+      return _keymaps.setNormalText;
+    }
+  }, {
+    name: formatMessage(_messages.listMessages.orderedList),
+    type: 'orderedList',
+    keymap: function keymap() {
+      return _keymaps.toggleOrderedList;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "1."), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.listMessages.unorderedList),
+    type: 'bulletList',
+    keymap: function keymap() {
+      return _keymaps.toggleBulletList;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "*"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.blockquote),
+    type: 'blockquote',
+    keymap: function keymap() {
+      return _keymaps.toggleBlockQuote;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, '>'), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.blockTypeMessages.codeblock),
+    type: 'codeBlock',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "```"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarInsertBlockMessages.horizontalRule),
+    type: 'rule',
+    keymap: function keymap() {
+      return _keymaps.insertRule;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "---"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarInsertBlockMessages.link),
+    type: 'link',
+    keymap: function keymap() {
+      return _keymaps.addLink;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "[", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarInsertBlockMessages.link), "](http://a.com)"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarMessages.code),
+    type: 'code',
+    keymap: function keymap() {
+      return _keymaps.toggleCode;
+    },
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "`", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.code), "`"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarInsertBlockMessages.action),
+    type: 'taskItem',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "[]"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarInsertBlockMessages.decision),
+    type: 'decisionItem',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "<>"), " ", (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
+    type: 'emoji',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, ":"));
+    }
+  }, {
+    name: formatMessage(_messages.toolbarInsertBlockMessages.mention),
+    type: 'mention',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "@"));
+    }
+  }, {
+    name: formatMessage(_messages.alignmentMessages.alignLeft),
+    type: 'alignment',
+    keymap: function keymap() {
+      return _keymaps.alignLeft;
+    }
+  }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.text-alignment-keyboard-shortcuts') ? [{
+    name: formatMessage(_messages.alignmentMessages.alignCenter),
+    type: 'alignment',
+    keymap: function keymap() {
+      return _keymaps.alignCenter;
+    }
+  }, {
+    name: formatMessage(_messages.alignmentMessages.alignRight),
+    type: 'alignment',
+    keymap: function keymap() {
+      return _keymaps.alignRight;
+    }
+  }] : []));
+};
+var otherFormatting = function otherFormatting(_ref3) {
+  var formatMessage = _ref3.formatMessage;
+  return [{
+    name: formatMessage(_messages.toolbarMessages.clearFormatting),
+    type: 'clearFormatting',
+    keymap: function keymap() {
+      return _keymaps.clearFormatting;
+    }
+  }, {
+    name: formatMessage(_messages.undoRedoMessages.undo),
+    type: 'undo',
+    keymap: function keymap() {
+      return _keymaps.undo;
+    }
+  }, {
+    name: formatMessage(_messages.undoRedoMessages.redo),
+    type: 'redo',
+    keymap: function keymap() {
+      return _keymaps.redo;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.pastePlainText),
+    type: 'paste',
+    keymap: function keymap() {
+      return _keymaps.pastePlainText;
+    }
+  }, {
+    name: formatMessage(_messages.annotationMessages.createComment),
+    type: 'annotation',
+    keymap: function keymap() {
+      return _keymaps.addInlineComment;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.CheckUncheckActionItem),
+    type: 'checkbox',
+    keymap: function keymap() {
+      return _keymaps.toggleTaskItemCheckbox;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.selectTableRow),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", {
+        css: _styles.shortcutsArray
+      }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "Shift"), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "\u2190")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "Shift"), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "\u2192")));
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.selectTableColumn),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", {
+        css: _styles.shortcutsArray
+      }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "Shift"), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "\u2191")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "Shift"), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "\u2193")));
+    }
+  }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz') ? [{
+    name: formatMessage(_messages.helpDialogMessages.selectColumnResize),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", {
+        css: _styles.shortcutsArray
+      }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "Shift"), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeSm
+      }, "C")));
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.increaseColumnSize),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", {
+        css: _styles.shortcutsArray
+      }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "[")));
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.decreaseColumnSize),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", {
+        css: _styles.shortcutsArray
+      }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _utils.browser.mac ? _styles.codeSm : _styles.codeMd
+      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
+        css: _styles.codeMd
+      }, "]")));
+    }
+  }] : []));
+};
+var resizeInformationFormatting = function resizeInformationFormatting(_ref4) {
+  var formatMessage = _ref4.formatMessage;
+  return [{
+    name: formatMessage(_messages.helpDialogMessages.increaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return _keymaps.increaseMediaSize;
+    }
+  }, {
+    name: formatMessage(_messages.helpDialogMessages.decreaseSize),
+    type: 'media',
+    keymap: function keymap() {
+      return _keymaps.decreaseMediaSize;
+    }
+  }];
+};
+var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref5) {
+  var formatMessage = _ref5.formatMessage;
+  return [{
+    name: formatMessage(_messages.helpDialogMessages.focusTableResizeHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return _keymaps.focusTableResizer;
+    }
+  }];
+};
+var imageAutoFormat = {
+  name: 'Image',
+  type: 'image',
+  autoFormatting: function autoFormatting() {
+    return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+      css: _styles.codeLg
+    }, "![", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.altText), "](http://www.image.com)"));
+  }
+};
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref6) {
+  var formatMessage = _ref6.formatMessage;
+  return {
+    name: formatMessage(_messages.helpDialogMessages.quickInsert),
+    type: 'quickInsert',
+    autoFormatting: function autoFormatting() {
+      return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
+        css: _styles.codeLg
+      }, "/"));
+    }
+  };
+};
+var isAnyA11yResizeFeatureFlagEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media-resizing_b5v0o') || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv');
+var getSupportedFormatting = exports.getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled) {
+  var supportedBySchema = formatting(intl).filter(function (format) {
+    return schema.nodes[format.type] || schema.marks[format.type];
+  });
+  return [].concat((0, _toConsumableArray2.default)(navigationKeymaps(intl)), (0, _toConsumableArray2.default)(supportedBySchema), (0, _toConsumableArray2.default)(imageEnabled ? [imageAutoFormat] : []), (0, _toConsumableArray2.default)(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), (0, _toConsumableArray2.default)(otherFormatting(intl)), (0, _toConsumableArray2.default)(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), (0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : []));
+};