@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
81 lines (79 loc) • 2.14 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
/**
* Set of available mode options.
*
* @type {Array}
*/
import { jsx as _jsx } from "react/jsx-runtime";
const MODES = [{
value: 'visual',
label: __('Visual editor')
}, {
value: 'text',
label: __('Code editor')
}];
function ModeSwitcher() {
const {
shortcut,
isRichEditingEnabled,
isCodeEditingEnabled,
mode
} = useSelect(select => ({
shortcut: select(keyboardShortcutsStore).getShortcutRepresentation('core/editor/toggle-mode'),
isRichEditingEnabled: select(editorStore).getEditorSettings().richEditingEnabled,
isCodeEditingEnabled: select(editorStore).getEditorSettings().codeEditingEnabled,
mode: select(editorStore).getEditorMode()
}), []);
const {
switchEditorMode
} = useDispatch(editorStore);
let selectedMode = mode;
if (!isRichEditingEnabled && mode === 'visual') {
selectedMode = 'text';
}
if (!isCodeEditingEnabled && mode === 'text') {
selectedMode = 'visual';
}
const choices = MODES.map(choice => {
if (!isCodeEditingEnabled && choice.value === 'text') {
choice = {
...choice,
disabled: true
};
}
if (!isRichEditingEnabled && choice.value === 'visual') {
choice = {
...choice,
disabled: true,
info: __('You can enable the visual editor in your profile settings.')
};
}
if (choice.value !== selectedMode && !choice.disabled) {
return {
...choice,
shortcut
};
}
return choice;
});
return /*#__PURE__*/_jsx(MenuGroup, {
label: __('Editor'),
children: /*#__PURE__*/_jsx(MenuItemsChoice, {
choices: choices,
value: selectedMode,
onSelect: switchEditorMode
})
});
}
export default ModeSwitcher;
//# sourceMappingURL=index.js.map