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

package/dist/esm/plugin-key.js

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

package/dist/esm/plugin.js

@@ -0,0 +1,129 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { bindKeymapWithCommand, openHelp, tooltip } from '@atlaskit/editor-common/keymaps';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import { openHelpCommand } from './commands';
+import { pluginKey } from './plugin-key';
+import { HelpDialogLoader } from './ui/HelpDialogLoader';
+export function createPlugin(dispatch, imageEnabled) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          isVisible: false,
+          imageEnabled: imageEnabled
+        };
+      },
+      apply: function apply(tr, _value, state) {
+        var isVisible = tr.getMeta(pluginKey);
+        var currentState = pluginKey.getState(state);
+        if (isVisible !== undefined && isVisible !== currentState.isVisible) {
+          var newState = _objectSpread(_objectSpread({}, currentState), {}, {
+            isVisible: isVisible
+          });
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return currentState;
+      }
+    }
+  });
+}
+export var helpDialogPlugin = function helpDialogPlugin(_ref) {
+  var _ref$config = _ref.config,
+    imageUploadProviderExists = _ref$config === void 0 ? false : _ref$config,
+    api = _ref.api;
+  return {
+    name: 'helpDialog',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'helpDialog',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return createPlugin(dispatch, imageUploadProviderExists);
+        }
+      }, {
+        name: 'helpDialogKeymap',
+        plugin: function plugin() {
+          var _api$analytics;
+          return keymapPlugin(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
+      }];
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        return [{
+          id: 'helpdialog',
+          title: formatMessage(messages.help),
+          description: formatMessage(messages.helpDescription),
+          keywords: ['?'],
+          priority: 4000,
+          keyshortcut: tooltip(openHelp),
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+              label: ""
+            });
+          },
+          action: function action(insert) {
+            var _api$analytics2;
+            var tr = insert('');
+            openHelpCommand(tr);
+            api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+              action: ACTION.HELP_OPENED,
+              actionSubject: ACTION_SUBJECT.HELP,
+              actionSubjectId: ACTION_SUBJECT_ID.HELP_QUICK_INSERT,
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.UI
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    },
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView;
+      return /*#__PURE__*/React.createElement(HelpDialogLoader, {
+        pluginInjectionApi: api,
+        editorView: editorView,
+        quickInsertEnabled: !!(api !== null && api !== void 0 && api.quickInsert)
+      });
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return pluginKey.getState(editorState) || null;
+    }
+  };
+};
+var keymapPlugin = function keymapPlugin(editorAnalyticsAPI) {
+  var list = {};
+  bindKeymapWithCommand(openHelp.common, function (state, dispatch) {
+    var tr = state.tr;
+    var isVisible = tr.getMeta(pluginKey);
+    if (!isVisible) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.BUTTON_HELP,
+        attributes: {
+          inputMethod: INPUT_METHOD.SHORTCUT
+        },
+        eventType: EVENT_TYPE.UI
+      })(tr);
+      openHelpCommand(tr, dispatch);
+    }
+    return true;
+  }, list);
+  return keymap(list);
+};

package/dist/esm/ui/HelpDialogLoader.js

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+export var HelpDialogLoader = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_editor-core-helpdialog" */
+    './index').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});

package/dist/esm/ui/index.js

@@ -0,0 +1,552 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/** @jsx jsx */
+import { useCallback, useEffect } from 'react';
+import { jsx } from '@emotion/react';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { addInlineComment, addLink, alignLeft, clearFormatting, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, 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, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { browser } from '@atlaskit/editor-common/utils';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
+import { closeHelpCommand } from '../commands';
+import { codeLg, codeMd, codeSm, column, content, contentWrapper, dialogHeader, footer, header, line, row, title } from './styles';
+var messages = 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(toolbarMessages.navigateToEditorToolbar),
+    type: 'navigation',
+    keymap: function keymap() {
+      return navToEditorToolbar;
+    }
+  }, {
+    name: formatMessage(toolbarMessages.navigateToFloatingToolbar),
+    type: 'navigation',
+    keymap: function keymap() {
+      return navToFloatingToolbar;
+    }
+  }];
+};
+export var formatting = function formatting(_ref2) {
+  var formatMessage = _ref2.formatMessage;
+  return [{
+    name: formatMessage(toolbarMessages.bold),
+    type: 'strong',
+    keymap: function keymap() {
+      return toggleBold;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"));
+    }
+  }, {
+    name: formatMessage(toolbarMessages.italic),
+    type: 'em',
+    keymap: function keymap() {
+      return toggleItalic;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"));
+    }
+  }, {
+    name: formatMessage(toolbarMessages.underline),
+    type: 'underline',
+    keymap: function keymap() {
+      return toggleUnderline;
+    }
+  }, {
+    name: formatMessage(toolbarMessages.strike),
+    type: 'strike',
+    keymap: function keymap() {
+      return toggleStrikethrough;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"));
+    }
+  }, {
+    name: formatMessage(toolbarMessages.subscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return toggleSubscript;
+    }
+  }, {
+    name: formatMessage(toolbarMessages.superscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return toggleSuperscript;
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading1),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading1;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "#"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading2),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading2;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "##"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading3),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading3;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "###"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading4),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading4;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading5),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading5;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "#####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading6),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading6;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "######"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.normal),
+    type: 'paragraph',
+    keymap: function keymap() {
+      return setNormalText;
+    }
+  }, {
+    name: formatMessage(listMessages.orderedList),
+    type: 'orderedList',
+    keymap: function keymap() {
+      return toggleOrderedList;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "1."), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(listMessages.unorderedList),
+    type: 'bulletList',
+    keymap: function keymap() {
+      return toggleBulletList;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "*"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.blockquote),
+    type: 'blockquote',
+    keymap: function keymap() {
+      return toggleBlockQuote;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, '>'), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.codeblock),
+    type: 'codeBlock',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "```"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
+    type: 'rule',
+    keymap: function keymap() {
+      return insertRule;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "---"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.link),
+    type: 'link',
+    keymap: function keymap() {
+      return addLink;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "[", jsx(FormattedMessage, toolbarInsertBlockMessages.link), "](http://a.com)"));
+    }
+  }, {
+    name: formatMessage(toolbarMessages.code),
+    type: 'code',
+    keymap: function keymap() {
+      return toggleCode;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.action),
+    type: 'taskItem',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "[]"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.decision),
+    type: 'decisionItem',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "<>"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.emoji),
+    type: 'emoji',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, ":"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.mention),
+    type: 'mention',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "@"));
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignLeft),
+    type: 'alignment',
+    keymap: function keymap() {
+      return alignLeft;
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignRight),
+    type: 'alignment'
+  }];
+};
+var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
+var otherFormatting = function otherFormatting(_ref3) {
+  var formatMessage = _ref3.formatMessage;
+  return [{
+    name: formatMessage(toolbarMessages.clearFormatting),
+    type: 'clearFormatting',
+    keymap: function keymap() {
+      return clearFormatting;
+    }
+  }, {
+    name: formatMessage(undoRedoMessages.undo),
+    type: 'undo',
+    keymap: function keymap() {
+      return undo;
+    }
+  }, {
+    name: formatMessage(undoRedoMessages.redo),
+    type: 'redo',
+    keymap: function keymap() {
+      return redo;
+    }
+  }, {
+    name: formatMessage(messages.pastePlainText),
+    type: 'paste',
+    keymap: function keymap() {
+      return pastePlainText;
+    }
+  }, {
+    name: formatMessage(annotationMessages.createComment),
+    type: 'annotation',
+    keymap: function keymap() {
+      return addInlineComment;
+    }
+  }, {
+    name: formatMessage(messages.CheckUncheckActionItem),
+    type: 'checkbox',
+    keymap: function keymap() {
+      return toggleTaskItemCheckbox;
+    }
+  }];
+};
+var imageAutoFormat = {
+  name: 'Image',
+  type: 'image',
+  autoFormatting: function autoFormatting() {
+    return jsx("span", null, jsx("span", {
+      css: codeLg
+    }, "![", jsx(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 jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "/"));
+    }
+  };
+};
+var getKeyParts = function getKeyParts(keymap) {
+  var shortcut = keymap[browser.mac ? 'mac' : 'windows'];
+  if (browser.mac) {
+    shortcut = shortcut.replace('Alt', 'Opt');
+  }
+  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
+};
+export var 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(_toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(otherFormatting(intl)));
+};
+export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
+  var keyParts = getKeyParts(keymap);
+  return jsx("span", null, keyParts.map(function (part, index) {
+    if (part === '+') {
+      return jsx("span", {
+        key: "".concat(keyParts, "-").concat(index)
+      }, ' + ');
+    } else if (part === 'Cmd') {
+      return jsx("span", {
+        css: codeSm,
+        key: "".concat(keyParts, "-").concat(index)
+      }, "\u2318");
+    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
+      return jsx("span", {
+        css: codeMd,
+        key: "".concat(keyParts, "-").concat(index)
+      }, part);
+    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
+      return jsx("span", {
+        css: codeLg,
+        key: "".concat(keyParts, "-").concat(index)
+      }, part);
+    } else if (part.toLowerCase() === 'enter') {
+      return jsx("span", {
+        css: codeSm,
+        key: "".concat(keyParts, "-").concat(index)
+      }, '⏎');
+    }
+    return jsx("span", {
+      css: codeSm,
+      key: "".concat(keyParts, "-").concat(index)
+    }, part.toUpperCase());
+  }));
+};
+var ModalHeader = injectIntl(function (_ref5) {
+  var formatMessage = _ref5.intl.formatMessage;
+  var _useModal = useModal(),
+    onClose = _useModal.onClose;
+  return jsx("div", {
+    css: header
+  }, jsx("h1", {
+    css: dialogHeader
+  }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
+  // @ts-ignore
+  , {
+    onClick: onClose,
+    title: formatMessage(messages.closeHelpDialog),
+    spacing: "compact",
+    iconBefore: jsx(CrossIcon, {
+      label: formatMessage(messages.closeHelpDialog),
+      size: "medium"
+    })
+  })));
+});
+var ModalFooter = function ModalFooter() {
+  return jsx("div", {
+    css: footer
+  }, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
+    values: {
+      keyMap: getComponentFromKeymap(openHelp)
+    }
+  })));
+};
+var HelpDialog = function HelpDialog(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    editorView = _ref6.editorView,
+    quickInsertEnabled = _ref6.quickInsertEnabled,
+    intl = _ref6.intl;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['helpDialog']),
+    helpDialogState = _useSharedPluginState.helpDialogState;
+  var closeDialog = useCallback(function () {
+    var tr = editorView.state.tr,
+      dispatch = editorView.dispatch;
+    closeHelpCommand(tr, dispatch);
+  }, [editorView]);
+  var handleEsc = 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]);
+  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 jsx(ModalTransition, null, helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible ? jsx(AkModalDialog, {
+    width: "large",
+    onClose: closeDialog,
+    testId: "help-modal-dialog"
+  }, jsx(ModalHeader, null), 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(function (form) {
+    var keymap = form.keymap && form.keymap();
+    return keymap && keymap[browser.mac ? 'mac' : 'windows'];
+  }).map(function (form) {
+    return jsx("li", {
+      css: row,
+      key: "textFormatting-".concat(form.name)
+    }, 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 jsx("li", {
+      css: row,
+      key: "autoFormatting-".concat(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(function (form) {
+    return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
+  }).map(function (form) {
+    return form.autoFormatting && jsx("li", {
+      key: "autoFormatting-".concat(form.name),
+      css: row
+    }, jsx("span", null, form.name), form.autoFormatting());
+  }))))), jsx(ModalFooter, null)) : null);
+};
+export default injectIntl(HelpDialog);