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

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

- Page: https://pluginprobe.com/plugins/code-block-pro/1.27.5/code/src/editor/components/SlotFactory.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.27.5/raw/src/editor/components/SlotFactory.tsx
- Modified: 2023-11-14T00:09:42+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.27.5/code/src/editor/components/SlotFactory.tsx#L10-L20`.

```tsx
import { createSlotFill } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { 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),
                    }),
            }}
        />
    );
};

```