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

package/dist/es2019/plugin.js

@@ -0,0 +1,124 @@
+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() {
+        return {
+          isVisible: false,
+          imageEnabled
+        };
+      },
+      apply(tr, _value, state) {
+        const isVisible = tr.getMeta(pluginKey);
+        const currentState = pluginKey.getState(state);
+        if (isVisible !== undefined && isVisible !== currentState.isVisible) {
+          const newState = {
+            ...currentState,
+            isVisible
+          };
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return currentState;
+      }
+    }
+  });
+}
+export const helpDialogPlugin = ({
+  config: imageUploadProviderExists = false,
+  api
+}) => ({
+  name: 'helpDialog',
+  pmPlugins() {
+    return [{
+      name: 'helpDialog',
+      plugin: ({
+        dispatch
+      }) => createPlugin(dispatch, imageUploadProviderExists)
+    }, {
+      name: 'helpDialogKeymap',
+      plugin: () => {
+        var _api$analytics;
+        return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    }];
+  },
+  pluginsOptions: {
+    quickInsert: ({
+      formatMessage
+    }) => [{
+      id: 'helpdialog',
+      title: formatMessage(messages.help),
+      description: formatMessage(messages.helpDescription),
+      keywords: ['?'],
+      priority: 4000,
+      keyshortcut: tooltip(openHelp),
+      icon: () => /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+        label: ""
+      }),
+      action(insert) {
+        var _api$analytics2;
+        const tr = insert('');
+        openHelpCommand(tr);
+        api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? 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({
+    editorView
+  }) {
+    return /*#__PURE__*/React.createElement(HelpDialogLoader, {
+      pluginInjectionApi: api,
+      editorView: editorView,
+      quickInsertEnabled: !!(api !== null && api !== void 0 && api.quickInsert)
+    });
+  },
+  getSharedState(editorState) {
+    if (!editorState) {
+      return null;
+    }
+    return pluginKey.getState(editorState) || null;
+  }
+});
+const keymapPlugin = editorAnalyticsAPI => {
+  const list = {};
+  bindKeymapWithCommand(openHelp.common, (state, dispatch) => {
+    let {
+      tr
+    } = state;
+    const isVisible = tr.getMeta(pluginKey);
+    if (!isVisible) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? 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/es2019/ui/HelpDialogLoader.js

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

package/dist/es2019/ui/index.js

@@ -0,0 +1,441 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @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';
+const 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.'
+  }
+});
+const navigationKeymaps = ({
+  formatMessage
+}) => [{
+  name: formatMessage(toolbarMessages.navigateToEditorToolbar),
+  type: 'navigation',
+  keymap: () => navToEditorToolbar
+}, {
+  name: formatMessage(toolbarMessages.navigateToFloatingToolbar),
+  type: 'navigation',
+  keymap: () => navToFloatingToolbar
+}];
+export const formatting = ({
+  formatMessage
+}) => [{
+  name: formatMessage(toolbarMessages.bold),
+  type: 'strong',
+  keymap: () => toggleBold,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"))
+}, {
+  name: formatMessage(toolbarMessages.italic),
+  type: 'em',
+  keymap: () => toggleItalic,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"))
+}, {
+  name: formatMessage(toolbarMessages.underline),
+  type: 'underline',
+  keymap: () => toggleUnderline
+}, {
+  name: formatMessage(toolbarMessages.strike),
+  type: 'strike',
+  keymap: () => toggleStrikethrough,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"))
+}, {
+  name: formatMessage(toolbarMessages.subscript),
+  type: 'subsup',
+  keymap: () => toggleSubscript
+}, {
+  name: formatMessage(toolbarMessages.superscript),
+  type: 'subsup',
+  keymap: () => toggleSuperscript
+}, {
+  name: formatMessage(blockTypeMessages.heading1),
+  type: 'heading',
+  keymap: () => toggleHeading1,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "#"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading2),
+  type: 'heading',
+  keymap: () => toggleHeading2,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "##"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading3),
+  type: 'heading',
+  keymap: () => toggleHeading3,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "###"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading4),
+  type: 'heading',
+  keymap: () => toggleHeading4,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "####"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading5),
+  type: 'heading',
+  keymap: () => toggleHeading5,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "#####"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.heading6),
+  type: 'heading',
+  keymap: () => toggleHeading6,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "######"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.normal),
+  type: 'paragraph',
+  keymap: () => setNormalText
+}, {
+  name: formatMessage(listMessages.orderedList),
+  type: 'orderedList',
+  keymap: () => toggleOrderedList,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "1."), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(listMessages.unorderedList),
+  type: 'bulletList',
+  keymap: () => toggleBulletList,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "*"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.blockquote),
+  type: 'blockquote',
+  keymap: () => toggleBlockQuote,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, '>'), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(blockTypeMessages.codeblock),
+  type: 'codeBlock',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "```"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
+  type: 'rule',
+  keymap: () => insertRule,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "---"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.link),
+  type: 'link',
+  keymap: () => addLink,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "[", jsx(FormattedMessage, toolbarInsertBlockMessages.link), "](http://a.com)"))
+}, {
+  name: formatMessage(toolbarMessages.code),
+  type: 'code',
+  keymap: () => toggleCode,
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.action),
+  type: 'taskItem',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "[]"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.decision),
+  type: 'decisionItem',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeSm
+  }, "<>"), " ", jsx("span", {
+    css: codeLg
+  }, "Space"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.emoji),
+  type: 'emoji',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, ":"))
+}, {
+  name: formatMessage(toolbarInsertBlockMessages.mention),
+  type: 'mention',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "@"))
+}, {
+  name: formatMessage(alignmentMessages.alignLeft),
+  type: 'alignment',
+  keymap: () => alignLeft
+}, {
+  name: formatMessage(alignmentMessages.alignRight),
+  type: 'alignment'
+}];
+const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
+const otherFormatting = ({
+  formatMessage
+}) => [{
+  name: formatMessage(toolbarMessages.clearFormatting),
+  type: 'clearFormatting',
+  keymap: () => clearFormatting
+}, {
+  name: formatMessage(undoRedoMessages.undo),
+  type: 'undo',
+  keymap: () => undo
+}, {
+  name: formatMessage(undoRedoMessages.redo),
+  type: 'redo',
+  keymap: () => redo
+}, {
+  name: formatMessage(messages.pastePlainText),
+  type: 'paste',
+  keymap: () => pastePlainText
+}, {
+  name: formatMessage(annotationMessages.createComment),
+  type: 'annotation',
+  keymap: () => addInlineComment
+}, {
+  name: formatMessage(messages.CheckUncheckActionItem),
+  type: 'checkbox',
+  keymap: () => toggleTaskItemCheckbox
+}];
+const imageAutoFormat = {
+  name: 'Image',
+  type: 'image',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"))
+};
+const quickInsertAutoFormat = ({
+  formatMessage
+}) => ({
+  name: formatMessage(messages.quickInsert),
+  type: 'quickInsert',
+  autoFormatting: () => jsx("span", null, jsx("span", {
+    css: codeLg
+  }, "/"))
+});
+const getKeyParts = keymap => {
+  let shortcut = keymap[browser.mac ? 'mac' : 'windows'];
+  if (browser.mac) {
+    shortcut = shortcut.replace('Alt', 'Opt');
+  }
+  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
+};
+export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {
+  const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
+  return [...navigationKeymaps(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...otherFormatting(intl)];
+};
+export const getComponentFromKeymap = keymap => {
+  const keyParts = getKeyParts(keymap);
+  return jsx("span", null, keyParts.map((part, index) => {
+    if (part === '+') {
+      return jsx("span", {
+        key: `${keyParts}-${index}`
+      }, ' + ');
+    } else if (part === 'Cmd') {
+      return jsx("span", {
+        css: codeSm,
+        key: `${keyParts}-${index}`
+      }, "\u2318");
+    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
+      return jsx("span", {
+        css: codeMd,
+        key: `${keyParts}-${index}`
+      }, part);
+    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
+      return jsx("span", {
+        css: codeLg,
+        key: `${keyParts}-${index}`
+      }, part);
+    } else if (part.toLowerCase() === 'enter') {
+      return jsx("span", {
+        css: codeSm,
+        key: `${keyParts}-${index}`
+      }, '⏎');
+    }
+    return jsx("span", {
+      css: codeSm,
+      key: `${keyParts}-${index}`
+    }, part.toUpperCase());
+  }));
+};
+const ModalHeader = injectIntl(({
+  intl: {
+    formatMessage
+  }
+}) => {
+  const {
+    onClose
+  } = useModal();
+  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"
+    })
+  })));
+});
+const ModalFooter = () => jsx("div", {
+  css: footer
+}, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
+  values: {
+    keyMap: getComponentFromKeymap(openHelp)
+  }
+})));
+const HelpDialog = ({
+  pluginInjectionApi,
+  editorView,
+  quickInsertEnabled,
+  intl
+}) => {
+  const {
+    helpDialogState
+  } = useSharedPluginState(pluginInjectionApi, ['helpDialog']);
+  const closeDialog = useCallback(() => {
+    const {
+      state: {
+        tr
+      },
+      dispatch
+    } = editorView;
+    closeHelpCommand(tr, dispatch);
+  }, [editorView]);
+  const handleEsc = useCallback(e => {
+    if (e.key === 'Escape' && helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible) {
+      closeDialog();
+    }
+  }, [closeDialog, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.isVisible]);
+  useEffect(() => {
+    document.addEventListener('keydown', handleEsc);
+    return () => {
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [handleEsc]);
+  const 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(form => {
+    const keymap = form.keymap && form.keymap();
+    return keymap && keymap[browser.mac ? 'mac' : 'windows'];
+  }).map(form => jsx("li", {
+    css: row,
+    key: `textFormatting-${form.name}`
+  }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form => jsx("li", {
+    css: row,
+    key: `autoFormatting-${form.name}`
+  }, jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
+    css: line
+  }), jsx("div", {
+    css: column
+  }, jsx("h2", {
+    css: title
+  }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting && jsx("li", {
+    key: `autoFormatting-${form.name}`,
+    css: row
+  }, jsx("span", null, form.name), form.autoFormatting())))))), jsx(ModalFooter, null)) : null);
+};
+export default injectIntl(HelpDialog);

package/dist/es2019/ui/styles.js

@@ -0,0 +1,110 @@
+import { css } from '@emotion/react';
+import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import * as colors from '@atlaskit/theme/colors';
+import { N400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+export const header = css`
+  z-index: ${akEditorUnitZIndex};
+  min-height: 24px;
+  padding: ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-500, 40px)"};
+  font-size: ${relativeFontSizeToBase16(24)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 'none';
+  color: ${`var(--ds-text, ${colors.N400})`};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
+  border-radius: ${borderRadius()}px;
+`;
+export const footer = css`
+  z-index: ${akEditorUnitZIndex};
+  font-size: ${relativeFontSizeToBase16(14)};
+  line-height: 20px;
+  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
+  padding: ${"var(--ds-space-300, 24px)"};
+  text-align: right;
+  box-shadow: 'none';
+`;
+export const contentWrapper = css`
+  padding: ${"var(--ds-space-250, 20px)"} 44px;
+  border-bottom-right-radius: ${borderRadius()}px;
+  overflow: auto;
+  position: relative;
+  color: ${`var(--ds-text-subtle, ${colors.N400})`};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
+`;
+export const line = css`
+  background: ${"var(--ds-background-neutral-subtle, #fff)"};
+  content: '';
+  display: block;
+  height: 2px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  min-width: 604px;
+`;
+export const content = css`
+  min-width: 524px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+`;
+export const column = {
+  width: '44%',
+  '& > ul': {
+    padding: 0
+  }
+};
+export const row = css`
+  margin: ${"var(--ds-space-250, 20px)"} 0;
+  display: flex;
+  justify-content: space-between;
+`;
+export const dialogHeader = {
+  '&': {
+    fontSize: relativeFontSizeToBase16(24),
+    fontWeight: 400,
+    color: `var(--ds-text-subtle, ${N400})`,
+    letterSpacing: 'normal',
+    lineHeight: 1.42857142857143
+  }
+};
+export const title = {
+  '&': {
+    fontSize: relativeFontSizeToBase16(18),
+    fontWeight: 400,
+    color: `var(--ds-text-subtle, ${N400})`,
+    letterSpacing: 'normal',
+    lineHeight: 1.42857142857143
+  }
+};
+export const codeSm = css`
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
+  border-radius: ${borderRadius()}px;
+  width: 24px;
+  display: inline-block;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+`;
+export const codeMd = css`
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
+  border-radius: ${borderRadius()}px;
+  display: inline-block;
+  height: 24px;
+  line-height: 24px;
+  width: 50px;
+  text-align: center;
+`;
+export const codeLg = css`
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
+  border-radius: ${borderRadius()}px;
+  display: inline-block;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 10px;
+  text-align: center;
+`;

package/dist/esm/commands.js

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

package/dist/esm/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';