# code-block-pro/1.1.0/src/editor/Edit.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.1.0. 105 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.1.0/code/src/editor/Edit.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.1.0/raw/src/editor/Edit.tsx
- Modified: 2022-08-22T22:25:46+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.1.0/code/src/editor/Edit.tsx#L10-L20`.

```tsx
import { useEffect, useRef } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import Editor from 'react-simple-code-editor';
import { useTheme } from '../hooks/useTheme';
import { useGlobalStore } from '../state/global';
import { useLanguageStore } from '../state/language';
import { useThemeStore } from '../state/theme';
import { AttributesPropsAndSetter } from '../types';

export const Edit = ({
    attributes,
    setAttributes,
}: AttributesPropsAndSetter) => {
    const {
        language,
        theme,
        code = '',
        bgColor: backgroundColor,
        textColor: color,
    } = attributes;
    const textAreaRef = useRef<HTMLDivElement>(null);
    const handleChange = (code: string) => setAttributes({ code });
    const { previousLanguage } = useLanguageStore();
    const { previousSettings } = useGlobalStore();
    const { previousTheme } = useThemeStore();
    const { highlighter, error, loading } = useTheme({
        theme,
        lang: language ?? previousLanguage,
    });

    useEffect(() => {
        if (!attributes.copyButton) {
            setAttributes({ copyButton: previousSettings.copyButton });
        }
    }, [previousSettings, attributes, setAttributes]);

    useEffect(() => {
        if (theme) return;
        setAttributes({ theme: previousTheme });
    }, [previousTheme, theme, setAttributes]);

    useEffect(() => {
        if (!highlighter) return;
        setAttributes({
            bgColor: highlighter.getBackgroundColor(),
            textColor: highlighter.getForegroundColor(),
        });
    }, [theme, highlighter, setAttributes]);

    useEffect(() => {
        if (!highlighter) return;
        // applyFilters()
        setAttributes({
            codeHTML: applyFilters(
                'blocks.codeBlockPro.codeHTML',
                highlighter.codeToHtml(code, {
                    lang: language ?? previousLanguage,
                }),
                attributes,
            ) as string,
        });
    }, [
        highlighter,
        code,
        language,
        setAttributes,
        previousLanguage,
        attributes,
    ]);

    if ((loading && code) || error) {
        return (
            <div
                className="p-8 px-6 text-left"
                style={{ backgroundColor, color }}>
                {error?.message ?? ''}
            </div>
        );
    }

    return (
        <div ref={textAreaRef}>
            <Editor
                value={code}
                onValueChange={handleChange}
                padding={24}
                style={{ backgroundColor, color }}
                // eslint-disable-next-line
                onKeyDown={(e: any) =>
                    e.key === 'Tab' &&
                    // Tab lock here. Pressing Escape will unlock.
                    textAreaRef.current?.querySelector('textarea')?.focus()
                }
                highlight={(code: string) =>
                    highlighter
                        ?.codeToHtml(code, {
                            lang: language ?? previousLanguage,
                        })
                        ?.replace(/<\/?[pre|code][^>]*>/g, '')
                }
            />
        </div>
    );
};

```