@gechiui/block-editor/src/hooks/anchor.js

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { addFilter } from '@gechiui/hooks';
import { PanelBody, TextControl, ExternalLink } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { hasBlockSupport } from '@gechiui/blocks';
import { createHigherOrderComponent } from '@gechiui/compose';
import { Platform } from '@gechiui/element';

/**
 * Internal dependencies
 */
import { InspectorControls } from '../components';

/**
 * Regular expression matching invalid anchor characters for replacement.
 *
 * @type {RegExp}
 */
const ANCHOR_REGEX = /[\s#]/g;

/**
 * Filters registered block settings, extending attributes with anchor using ID
 * of the first node.
 *
 * @param {Object} settings Original block settings.
 *
 * @return {Object} Filtered block settings.
 */
export function addAttribute( settings ) {
	// allow blocks to specify their own attribute definition with default values if needed.
	if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {
		return settings;
	}
	if ( hasBlockSupport( settings, 'anchor' ) ) {
		// Gracefully handle if settings.attributes is undefined.
		settings.attributes = {
			...settings.attributes,
			anchor: {
				type: 'string',
				source: 'attribute',
				attribute: 'id',
				selector: '*',
			},
		};
	}

	return settings;
}

/**
 * Override the default edit UI to include a new block inspector control for
 * assigning the anchor ID, if block supports anchor.
 *
 * @param {GCComponent} BlockEdit Original component.
 *
 * @return {GCComponent} Wrapped component.
 */
export const withInspectorControl = createHigherOrderComponent(
	( BlockEdit ) => {
		return ( props ) => {
			const hasAnchor = hasBlockSupport( props.name, 'anchor' );

			if ( hasAnchor && props.isSelected ) {
				const isWeb = Platform.OS === 'web';
				const textControl = (
					<TextControl
						className="html-anchor-control"
						label={ __( 'HTML锚点' ) }
						help={
							<>
								{ __(
									'输入一两个词（无需空格）即可为此区块创建一个唯一网址，称为“锚点”。之后，您就可以直接链接至页面的此部分。'
								) }

								{ isWeb && (
									<ExternalLink
										href={ __(
											'https://www.gechiui.com/support/article/page-jumps/'
										) }
									>
										{ __( '了解关于锚点的细节' ) }
									</ExternalLink>
								) }
							</>
						}
						value={ props.attributes.anchor || '' }
						placeholder={ ! isWeb ? __( '添加锚点' ) : null }
						onChange={ ( nextValue ) => {
							nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
							props.setAttributes( {
								anchor: nextValue,
							} );
						} }
						autoCapitalize="none"
						autoComplete="off"
					/>
				);

				return (
					<>
						<BlockEdit { ...props } />
						{ isWeb && (
							<InspectorControls __experimentalGroup="advanced">
								{ textControl }
							</InspectorControls>
						) }
						{ /*
						 * We plan to remove scoping anchors to 'core/heading' to support
						 * anchors for all eligble blocks. Additionally we plan to explore
						 * leveraging InspectorAdvancedControls instead of a custom
						 * PanelBody title. https://git.io/Jtcov
						 */ }
						{ ! isWeb && props.name === 'core/heading' && (
							<InspectorControls>
								<PanelBody title={ __( '标题设置' ) }>
									{ textControl }
								</PanelBody>
							</InspectorControls>
						) }
					</>
				);
			}

			return <BlockEdit { ...props } />;
		};
	},
	'withInspectorControl'
);

/**
 * Override props assigned to save component to inject anchor ID, if block
 * supports anchor. This is only applied if the block's save result is an
 * element and not a markup string.
 *
 * @param {Object} extraProps Additional props applied to save element.
 * @param {Object} blockType  Block type.
 * @param {Object} attributes Current block attributes.
 *
 * @return {Object} Filtered props applied to save element.
 */
export function addSaveProps( extraProps, blockType, attributes ) {
	if ( hasBlockSupport( blockType, 'anchor' ) ) {
		extraProps.id = attributes.anchor === '' ? null : attributes.anchor;
	}

	return extraProps;
}

addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
addFilter(
	'editor.BlockEdit',
	'core/editor/anchor/with-inspector-control',
	withInspectorControl
);
addFilter(
	'blocks.getSaveContent.extraProps',
	'core/anchor/save-props',
	addSaveProps
);