@atlaskit/editor-plugin-help-dialog 0.1.0 → 0.2.1

package/dist/cjs/ui/index.js

@@ -0,0 +1,563 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+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 _commands = require("../commands");
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  editorHelp: {
+    id: 'fabric.editor.editorHelp',
+    defaultMessage: 'Editor help',
+    description: 'Title of editor help dialog.'
+  },
+  helpDialogTips: {
+    id: 'fabric.editor.helpDialogTips',
+    defaultMessage: 'Press {keyMap} to quickly open this dialog at any time',
+    description: 'Hint about how to open a dialog quickly using a shortcut.'
+  },
+  keyboardShortcuts: {
+    id: 'fabric.editor.keyboardShortcuts',
+    defaultMessage: 'Keyboard shortcuts',
+    description: ''
+  },
+  markdown: {
+    id: 'fabric.editor.markdown',
+    defaultMessage: 'Markdown',
+    description: 'It is a name of popular markup language.'
+  },
+  pastePlainText: {
+    id: 'fabric.editor.pastePlainText',
+    defaultMessage: 'Paste plain text',
+    description: ''
+  },
+  CheckUncheckActionItem: {
+    id: 'fabric.editor.checkUncheckActionItem',
+    defaultMessage: 'Toggle action item',
+    description: 'For Check/Uncheck Action item use shortcut'
+  },
+  altText: {
+    id: 'fabric.editor.altText',
+    defaultMessage: 'Alt text',
+    description: 'Alternative text for image.'
+  },
+  closeHelpDialog: {
+    id: 'fabric.editor.closeHelpDialog',
+    defaultMessage: 'Close help dialog',
+    description: ''
+  },
+  // TODO: Move it inside quick insert plugin
+  quickInsert: {
+    id: 'fabric.editor.quickInsert',
+    defaultMessage: 'Quick insert',
+    description: 'Name of a feature, which let you insert items quickly.'
+  }
+});
+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;
+    }
+  }, {
+    name: formatMessage(_messages.alignmentMessages.alignRight),
+    type: 'alignment'
+  }];
+};
+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.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.CheckUncheckActionItem),
+    type: 'checkbox',
+    keymap: function keymap() {
+      return _keymaps.toggleTaskItemCheckbox;
+    }
+  }];
+};
+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.altText), "](http://www.image.com)"));
+  }
+};
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref4) {
+  var formatMessage = _ref4.formatMessage;
+  return {
+    name: formatMessage(messages.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 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)));
+};
+var getComponentFromKeymap = exports.getComponentFromKeymap = function getComponentFromKeymap(keymap) {
+  var keyParts = getKeyParts(keymap);
+  return (0, _react2.jsx)("span", null, 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 (_ref5) {
+  var formatMessage = _ref5.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.editorHelp)), (0, _react2.jsx)("div", null, (0, _react2.jsx)(_uiMenu.ToolbarButton
+  // @ts-ignore
+  , {
+    onClick: onClose,
+    title: formatMessage(messages.closeHelpDialog),
+    spacing: "compact",
+    iconBefore: (0, _react2.jsx)(_cross.default, {
+      label: formatMessage(messages.closeHelpDialog),
+      size: "medium"
+    })
+  })));
+});
+var ModalFooter = function ModalFooter() {
+  return (0, _react2.jsx)("div", {
+    css: _styles.footer
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.helpDialogTips, {
+    values: {
+      keyMap: getComponentFromKeymap(_keymaps.openHelp)
+    }
+  })));
+};
+var HelpDialog = function HelpDialog(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    editorView = _ref6.editorView,
+    quickInsertEnabled = _ref6.quickInsertEnabled,
+    intl = _ref6.intl;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['helpDialog']),
+    helpDialogState = _useSharedPluginState.helpDialogState;
+  var closeDialog = (0, _react.useCallback)(function () {
+    var tr = editorView.state.tr,
+      dispatch = editorView.dispatch;
+    (0, _commands.closeHelpCommand)(tr, dispatch);
+  }, [editorView]);
+  var handleEsc = (0, _react.useCallback)(function (e) {
+    if (e.key === 'Escape' && helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible) {
+      closeDialog();
+    }
+  }, [closeDialog, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.isVisible]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handleEsc);
+    return function () {
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [handleEsc]);
+  var 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.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.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);
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpDialog);

package/dist/cjs/ui/styles.js

@@ -0,0 +1,50 @@
+"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.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = 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 _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var header = exports.header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\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: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, "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, ")"), (0, _constants.borderRadius)());
+var footer = exports.footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: ", ";\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "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: ", " 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), "var(--ds-space-250, 20px)", (0, _constants.borderRadius)(), "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: 2px;\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 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 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 dialogHeader = exports.dialogHeader = {
+  '&': {
+    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
+    fontWeight: 400,
+    color: "var(--ds-text-subtle, ".concat(_colors.N400, ")"),
+    letterSpacing: 'normal',
+    lineHeight: 1.42857142857143
+  }
+};
+var title = exports.title = {
+  '&': {
+    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(18),
+    fontWeight: 400,
+    color: "var(--ds-text-subtle, ".concat(_colors.N400, ")"),
+    letterSpacing: 'normal',
+    lineHeight: 1.42857142857143
+  }
+};
+var codeSm = exports.codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
+var codeMd = exports.codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
+var codeLg = exports.codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());

package/dist/es2019/commands.js

@@ -0,0 +1,13 @@
+import { pluginKey } from './plugin-key';
+export const openHelpCommand = (tr, dispatch) => {
+  tr = tr.setMeta(pluginKey, true);
+  if (dispatch) {
+    dispatch(tr);
+    return true;
+  }
+  return false;
+};
+export const closeHelpCommand = (tr, dispatch) => {
+  tr = tr.setMeta(pluginKey, false);
+  dispatch(tr);
+};

package/dist/es2019/index.js

@@ -1 +1,6 @@
-export {};
+export { helpDialogPlugin } from './plugin';
+export {
+/**
+ * @deprecated DO NOT USE, it is only available to maintain an existing deprecated API
+ */
+openHelpCommand as deprecatedOpenHelpCommand } from './commands';

package/dist/es2019/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('helpDialogPlugin');