# code-block-pro/1.28.0/src/editor/components/SlotFactory.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.28.0. 30 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/editor/components/SlotFactory.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.28.0/raw/src/editor/components/SlotFactory.tsx
- Modified: 2026-04-12T13:22:22+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/editor/components/SlotFactory.tsx#L10-L20`.

```tsx
import { createSlotFill } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import type { AttributesPropsAndSetter } from '../../types';
import { decode, encode } from '../../util/code';
import { languages } from '../../util/languages';

export const SlotFactory = ({
	name,
	attributes,
	setAttributes,
}: AttributesPropsAndSetter & { name: string }) => {
	const { Slot } = useMemo(() => {
		return createSlotFill(name);
	}, [name]);
	return (
		<Slot
			fillProps={{
				attributes,
				setAttributes,
				languages,
				getCode: () => decode(attributes.code, attributes),
				setCode: (code: string) =>
					setAttributes({
						code: encode(code, attributes),
					}),
			}}
		/>
	);
};

```