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

package/dist/cjs/ui/index.js

@@ -5,535 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSupportedFormatting = exports.getComponentFromKeymap = exports.formatting = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _keymaps = require("@atlaskit/editor-common/keymaps");
-var _messages = require("@atlaskit/editor-common/messages");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _utils = require("@atlaskit/editor-common/utils");
-var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
-var _styles = require("./styles");
+var _formatting = require("./formatting");
+var _Modal = _interopRequireDefault(require("./Modal"));
 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; }
 /** @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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "**", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.bold), "**"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarMessages.italic),
-    type: 'em',
-    keymap: function keymap() {
-      return _keymaps.toggleItalic;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "*", (0, _react2.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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "~~", (0, _react2.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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "#"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.heading2),
-    type: 'heading',
-    keymap: function keymap() {
-      return _keymaps.toggleHeading2;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "##"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.heading3),
-    type: 'heading',
-    keymap: function keymap() {
-      return _keymaps.toggleHeading3;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "###"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.heading4),
-    type: 'heading',
-    keymap: function keymap() {
-      return _keymaps.toggleHeading4;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "####"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.heading5),
-    type: 'heading',
-    keymap: function keymap() {
-      return _keymaps.toggleHeading5;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "#####"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.heading6),
-    type: 'heading',
-    keymap: function keymap() {
-      return _keymaps.toggleHeading6;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "######"), " ", (0, _react2.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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "1."), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.listMessages.unorderedList),
-    type: 'bulletList',
-    keymap: function keymap() {
-      return _keymaps.toggleBulletList;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "*"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.blockquote),
-    type: 'blockquote',
-    keymap: function keymap() {
-      return _keymaps.toggleBlockQuote;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, '>'), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.blockTypeMessages.codeblock),
-    type: 'codeBlock',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "```"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarInsertBlockMessages.horizontalRule),
-    type: 'rule',
-    keymap: function keymap() {
-      return _keymaps.insertRule;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "---"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarInsertBlockMessages.link),
-    type: 'link',
-    keymap: function keymap() {
-      return _keymaps.addLink;
-    },
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "[", (0, _react2.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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "`", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.code), "`"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarInsertBlockMessages.action),
-    type: 'taskItem',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "[]"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarInsertBlockMessages.decision),
-    type: 'decisionItem',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "<>"), " ", (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "Space"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
-    type: 'emoji',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, ":"));
-    }
-  }, {
-    name: formatMessage(_messages.toolbarInsertBlockMessages.mention),
-    type: 'mention',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", null, (0, _react2.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 shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
-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;
-    }
-  }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y.table-selection_9uv33') ? [{
-    name: formatMessage(_messages.helpDialogMessages.selectTableRow),
-    type: 'table',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", {
-        css: _styles.shortcutsArray
-      }, (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, "Shift"), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "\u2190")), (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, "Shift"), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "\u2192")));
-    }
-  }, {
-    name: formatMessage(_messages.helpDialogMessages.selectTableColumn),
-    type: 'table',
-    autoFormatting: function autoFormatting() {
-      return (0, _react2.jsx)("span", {
-        css: _styles.shortcutsArray
-      }, (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, "Shift"), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "\u2191")), (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, _utils.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeMd
-      }, "Shift"), ' + ', (0, _react2.jsx)("span", {
-        css: _styles.codeSm
-      }, "\u2193")));
-    }
-  }] : []));
-};
-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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-      css: _styles.codeLg
-    }, "![", (0, _react2.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, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
-        css: _styles.codeLg
-      }, "/"));
-    }
-  };
-};
-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 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) : []));
-};
-var getComponentFromKeymap = exports.getComponentFromKeymap = function getComponentFromKeymap(keymap) {
-  var keyParts = getKeyParts(keymap);
-  return (0, _react2.jsx)("span", {
-    css: _styles.componentFromKeymapWrapperStyles
-  }, keyParts.map(function (part, index) {
-    if (part === '+') {
-      return (0, _react2.jsx)("span", {
-        key: "".concat(keyParts, "-").concat(index)
-      }, ' + ');
-    } else if (part === 'Cmd') {
-      return (0, _react2.jsx)("span", {
-        css: _styles.codeSm,
-        key: "".concat(keyParts, "-").concat(index)
-      }, "\u2318");
-    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return (0, _react2.jsx)("span", {
-        css: _styles.codeMd,
-        key: "".concat(keyParts, "-").concat(index)
-      }, part);
-    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
-      return (0, _react2.jsx)("span", {
-        css: _styles.codeLg,
-        key: "".concat(keyParts, "-").concat(index)
-      }, part);
-    } else if (part.toLowerCase() === 'enter') {
-      return (0, _react2.jsx)("span", {
-        css: _styles.codeSm,
-        key: "".concat(keyParts, "-").concat(index)
-      }, '⏎');
-    }
-    return (0, _react2.jsx)("span", {
-      css: _styles.codeSm,
-      key: "".concat(keyParts, "-").concat(index)
-    }, part.toUpperCase());
-  }));
-};
-var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref7) {
-  var formatMessage = _ref7.intl.formatMessage;
-  var _useModal = (0, _modalDialog.useModal)(),
-    onClose = _useModal.onClose;
-  return (0, _react2.jsx)("div", {
-    css: _styles.header
-  }, (0, _react2.jsx)("h1", {
-    css: _styles.dialogHeader
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)), (0, _react2.jsx)("div", null, (0, _react2.jsx)(_uiMenu.ToolbarButton
-  // @ts-ignore
-  , {
-    onClick: onClose,
-    title: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
-    spacing: "compact",
-    iconBefore: (0, _react2.jsx)(_cross.default, {
-      label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
-      size: "medium"
-    })
-  })));
-});
-var ModalFooter = function ModalFooter() {
-  return (0, _react2.jsx)("div", {
-    css: _styles.footer
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.helpDialogMessages.helpDialogTips, {
-    values: {
-      keyMap: getComponentFromKeymap(_keymaps.openHelp)
-    }
-  })));
-};
-var HelpDialog = function HelpDialog(_ref8) {
-  var pluginInjectionApi = _ref8.pluginInjectionApi,
-    editorView = _ref8.editorView,
-    quickInsertEnabled = _ref8.quickInsertEnabled,
-    intl = _ref8.intl;
+var HelpDialog = function HelpDialog(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    editorView = _ref.editorView,
+    quickInsertEnabled = _ref.quickInsertEnabled,
+    intl = _ref.intl;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['helpDialog']),
     helpDialogState = _useSharedPluginState.helpDialogState;
   var closeDialog = (0, _react.useCallback)(function () {
@@ -552,51 +41,13 @@ var HelpDialog = function HelpDialog(_ref8) {
       document.removeEventListener('keydown', handleEsc);
     };
   }, [handleEsc]);
-  var formatting = getSupportedFormatting(editorView.state.schema, intl, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.imageEnabled, quickInsertEnabled);
+  var formatting = (0, _formatting.getSupportedFormatting)(editorView.state.schema, intl, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.imageEnabled, quickInsertEnabled);
   return (0, _react2.jsx)(_modalDialog.ModalTransition, null, helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible ? (0, _react2.jsx)(_modalDialog.default, {
     width: "large",
     onClose: closeDialog,
     testId: "help-modal-dialog"
-  }, (0, _react2.jsx)(ModalHeader, null), (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), getComponentFromKeymap(form.keymap()));
-  }), formatting.filter(function (form) {
-    return 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 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, null)) : null);
+  }, (0, _react2.jsx)(_Modal.default, {
+    formatting: formatting
+  })) : null);
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpDialog);

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;