@atlaskit/editor-plugin-help-dialog/dist/es2019/ui/utils.js

Help Dialog plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, xcss } from '@atlaskit/primitives';
import { componentFromKeymapWrapperStyles } from './styles';
const codeLg = xcss({
  borderRadius: 'radius.small',
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  textAlign: 'center',
  paddingInline: 'space.150',
  backgroundColor: 'color.background.neutral'
});
const codeMd = xcss({
  backgroundColor: 'color.background.neutral',
  borderRadius: 'radius.small',
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  width: '50px',
  textAlign: 'center'
});
const codeSm = xcss({
  backgroundColor: 'color.background.neutral',
  borderRadius: 'radius.small',
  width: "var(--ds-space-300, 24px)",
  display: 'inline-block',
  height: "var(--ds-space-300, 24px)",
  lineHeight: "var(--ds-space-300, 24px)",
  textAlign: 'center'
});
const arrowSymbols = {
  arrowup: '↑',
  arrowdown: '↓',
  arrowleft: '←',
  arrowright: '→'
};
const getKeyParts = keymap => {
  const browser = getBrowserInfo();
  let shortcut = keymap[browser.mac ? 'mac' : 'windows'];
  if (browser.mac) {
    shortcut = shortcut.replace('Alt', 'Opt');
  }
  // Ignored via go/ees005
  // eslint-disable-next-line require-unicode-regexp
  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
};
export const shortcutNamesWithoutKeymap = ['table', 'emoji', 'mention', 'quickInsert'];
export const getComponentFromKeymap = keymap => {
  const keyParts = getKeyParts(keymap);
  return (
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    jsx("span", {
      css: componentFromKeymapWrapperStyles
    }, keyParts.map((part, index) => {
      if (part === '+') {
        return (
          // Ignored via go/ees005
          // eslint-disable-next-line react/no-array-index-key
          jsx(Box, {
            as: "span",
            key: `${keyParts}-${index}`
          }, ' + ')
        );
      } else if (part === 'Cmd') {
        return (
          // Ignored via go/ees005
          // eslint-disable-next-line react/no-array-index-key
          jsx(Box, {
            as: "span",
            xcss: codeSm,
            key: `${keyParts}-${index}`
          }, "\u2318")
        );
      } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
        return (
          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
          // Ignored via go/ees005
          // eslint-disable-next-line react/no-array-index-key
          jsx(Box, {
            as: "span",
            xcss: codeMd,
            key: `${keyParts}-${index}`
          }, part)
        );
      } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
        return (
          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
          // Ignored via go/ees005
          // eslint-disable-next-line react/no-array-index-key
          jsx(Box, {
            as: "span",
            xcss: codeLg,
            key: `${keyParts}-${index}`
          }, part)
        );
      } else if (part.toLowerCase() === 'enter') {
        return jsx(Box, {
          as: "span",
          "data-editor-help-dialog-enter-keymap": "true",
          xcss: codeSm
          // Ignored via go/ees005
          // eslint-disable-next-line react/no-array-index-key
          ,
          key: `${keyParts}-${index}`
        }, '⏎');
      } else if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright'].indexOf(part.toLowerCase()) >= 0) {
        return (
          // Ignored via go/ees005
          // eslint-disable-next-line react/no-array-index-key
          jsx(Box, {
            as: "span",
            xcss: codeSm,
            key: `${keyParts}-${index}`
          }, arrowSymbols[part.toLowerCase()])
        );
      }
      return (
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
        // Ignored via go/ees005
        // eslint-disable-next-line react/no-array-index-key
        jsx(Box, {
          as: "span",
          xcss: codeSm,
          key: `${keyParts}-${index}`
        }, part.toUpperCase())
      );
    }))
  );
};