@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
131 lines (127 loc) • 4.68 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
var _data = require("@wordpress/data");
var _interface = require("@wordpress/interface");
var _config = require("./config");
var _shortcut = _interopRequireDefault(require("./shortcut"));
var _dynamicShortcut = _interopRequireDefault(require("./dynamic-shortcut"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const KEYBOARD_SHORTCUT_HELP_MODAL_NAME = 'editor/keyboard-shortcut-help';
const ShortcutList = ({
shortcuts
}) =>
/*#__PURE__*/
/*
* Disable reason: The `list` ARIA role is redundant but
* Safari+VoiceOver won't announce the list otherwise.
*/
/* eslint-disable jsx-a11y/no-redundant-roles */
(0, _jsxRuntime.jsx)("ul", {
className: "editor-keyboard-shortcut-help-modal__shortcut-list",
role: "list",
children: shortcuts.map((shortcut, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
className: "editor-keyboard-shortcut-help-modal__shortcut",
children: typeof shortcut === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dynamicShortcut.default, {
name: shortcut
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_shortcut.default, {
...shortcut
})
}, index))
})
/* eslint-enable jsx-a11y/no-redundant-roles */;
const ShortcutSection = ({
title,
shortcuts,
className
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
className: (0, _clsx.default)('editor-keyboard-shortcut-help-modal__section', className),
children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
className: "editor-keyboard-shortcut-help-modal__section-title",
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutList, {
shortcuts: shortcuts
})]
});
const ShortcutCategorySection = ({
title,
categoryName,
additionalShortcuts = []
}) => {
const categoryShortcuts = (0, _data.useSelect)(select => {
return select(_keyboardShortcuts.store).getCategoryShortcuts(categoryName);
}, [categoryName]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutSection, {
title: title,
shortcuts: categoryShortcuts.concat(additionalShortcuts)
});
};
function KeyboardShortcutHelpModal() {
const isModalActive = (0, _data.useSelect)(select => select(_interface.store).isModalActive(KEYBOARD_SHORTCUT_HELP_MODAL_NAME), []);
const {
openModal,
closeModal
} = (0, _data.useDispatch)(_interface.store);
const toggleModal = () => {
if (isModalActive) {
closeModal();
} else {
openModal(KEYBOARD_SHORTCUT_HELP_MODAL_NAME);
}
};
(0, _keyboardShortcuts.useShortcut)('core/editor/keyboard-shortcuts', toggleModal);
if (!isModalActive) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Modal, {
className: "editor-keyboard-shortcut-help-modal",
title: (0, _i18n.__)('Keyboard shortcuts'),
closeButtonLabel: (0, _i18n.__)('Close'),
onRequestClose: toggleModal,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutSection, {
className: "editor-keyboard-shortcut-help-modal__main-shortcuts",
shortcuts: ['core/editor/keyboard-shortcuts']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutCategorySection, {
title: (0, _i18n.__)('Global shortcuts'),
categoryName: "global"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutCategorySection, {
title: (0, _i18n.__)('Selection shortcuts'),
categoryName: "selection"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutCategorySection, {
title: (0, _i18n.__)('Block shortcuts'),
categoryName: "block",
additionalShortcuts: [{
keyCombination: {
character: '/'
},
description: (0, _i18n.__)('Change the block type after adding a new paragraph.'),
/* translators: The forward-slash character. e.g. '/'. */
ariaLabel: (0, _i18n.__)('Forward-slash')
}]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutSection, {
title: (0, _i18n.__)('Text formatting'),
shortcuts: _config.textFormattingShortcuts
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShortcutCategorySection, {
title: (0, _i18n.__)('List View shortcuts'),
categoryName: "list-view"
})]
});
}
var _default = exports.default = KeyboardShortcutHelpModal;
//# sourceMappingURL=index.js.map