@atlaskit/editor-plugin-help-dialog
Version:
Help Dialog plugin for @atlaskit/editor-core
87 lines (86 loc) • 3.78 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
/** @jsxFrag */
import { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { FormattedMessage, useIntl } from 'react-intl';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
import Heading from '@atlaskit/heading';
import { Text } from '@atlaskit/primitives/compiled';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import ModalFooter from './ModalFooter';
import ModalHeader from './ModalHeader';
import { column, content, contentWrapper, line, row } from './styles';
import { getComponentFromKeymap, shortcutNamesWithoutKeymap } from './utils';
export const ModalContent = ({
formatting,
onClose
}) => {
const browser = getBrowserInfo();
const intl = useIntl();
const isA11yFixEnabled = expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true);
return jsx(Fragment, null, jsx(ModalHeader, {
onClose: onClose
}), jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
css: contentWrapper,
tabIndex: 0,
role: isA11yFixEnabled ? 'region' : undefined,
"aria-label": isA11yFixEnabled ? intl.formatMessage(messages.editorHelp) : undefined
}, jsx("div", {
css: line
}), jsx("div", {
css: content
}, jsx("div", {
css: column
}, jsx(Heading, {
size: "medium"
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(form => {
const keymap = form.keymap && form.keymap();
return keymap && keymap[browser.mac ? 'mac' : 'windows'];
}).map(form => {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const keymap = form.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("li", {
css: row,
key: `textFormatting-${form.name}`
}, jsx(Text, null, form.name), getComponentFromKeymap(keymap()))
);
}), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form => {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const autoFormatting = form.autoFormatting;
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("li", {
css: row,
key: `autoFormatting-${form.name}`
}, jsx(Text, null, form.name), autoFormatting())
);
}))), jsx("div", {
css: line
}), jsx("div", {
css: column
}, jsx(Heading, {
size: "medium"
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, messages.markdown)), jsx("ul", null, formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting &&
// 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("li", {
key: `autoFormatting-${form.name}`,
css: row
}, jsx("span", null, form.name), form.autoFormatting())))))), jsx(ModalFooter, null));
};
export default ModalContent;