@gechiui/block-editor/src/components/block-settings-menu/block-mode-toggle.js

Generic block editor.

/**
 * External dependencies
 */
import { noop } from 'lodash';

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { MenuItem } from '@gechiui/components';
import { getBlockType, hasBlockSupport } from '@gechiui/blocks';
import { withSelect, withDispatch } from '@gechiui/data';
import { compose } from '@gechiui/compose';

/**
 * Internal dependencies
 */
import { store as blockEditorStore } from '../../store';

export function BlockModeToggle( {
	blockType,
	mode,
	onToggleMode,
	small = false,
	isCodeEditingEnabled = true,
} ) {
	if (
		! hasBlockSupport( blockType, 'html', true ) ||
		! isCodeEditingEnabled
	) {
		return null;
	}

	const label =
		mode === 'visual' ? __( '作为HTML编辑' ) : __( '可视化编辑' );

	return <MenuItem onClick={ onToggleMode }>{ ! small && label }</MenuItem>;
}

export default compose( [
	withSelect( ( select, { clientId } ) => {
		const { getBlock, getBlockMode, getSettings } = select(
			blockEditorStore
		);
		const block = getBlock( clientId );
		const isCodeEditingEnabled = getSettings().codeEditingEnabled;

		return {
			mode: getBlockMode( clientId ),
			blockType: block ? getBlockType( block.name ) : null,
			isCodeEditingEnabled,
		};
	} ),
	withDispatch( ( dispatch, { onToggle = noop, clientId } ) => ( {
		onToggleMode() {
			dispatch( blockEditorStore ).toggleBlockMode( clientId );
			onToggle();
		},
	} ) ),
] )( BlockModeToggle );