File size: 2,102 Bytes
03d9a71 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import { useScroll, useSize } from 'ahooks';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useExternalTextareaObserver } from '@/hooks/useExternalTextareaObserver';
import SyntaxHighlighter from './SyntaxHighlighter';
import grammar from './prompt.tmLanguage.json';
import { themeConfig } from './promptTheme';
import { useStyles } from './style';
const options: any = {
langs: [
{
aliases: ['prompt'],
grammar,
id: 'prompt',
scopeName: 'source.prompt',
},
],
themes: [themeConfig(true), themeConfig(false)],
};
interface AppProps {
parentId: string;
}
const App = memo<AppProps>(({ parentId }) => {
const ref: any = useRef(null);
const [prompt, setPrompt] = useState<string>('');
const { styles, theme } = useStyles();
const nativeTextareaValue = useExternalTextareaObserver(`${parentId} label textarea`);
const nativeTextarea = useMemo(
() => gradioApp().querySelector(`${parentId} label textarea`) as HTMLTextAreaElement,
[parentId],
);
const size = useSize(nativeTextarea);
const scroll = useScroll(nativeTextarea);
const handlePromptChange = useCallback((event: any) => {
setPrompt(event.target.value);
}, []);
useEffect(() => {
ref.current.scroll(0, scroll?.top || 0);
}, [scroll?.top]);
useEffect(() => {
nativeTextarea.addEventListener('change', handlePromptChange);
return () => {
nativeTextarea.removeEventListener('change', handlePromptChange);
};
}, []);
useEffect(() => {
if (theme) {
nativeTextarea.style.color = 'transparent';
nativeTextarea.style.caretColor = theme.colorSuccess;
}
}, [theme]);
useEffect(() => {
setPrompt(nativeTextareaValue);
}, [nativeTextareaValue]);
return (
<div
className={styles.container}
data-code-type="highlighter"
ref={ref}
style={{ height: size?.height, width: size?.width }}
>
<SyntaxHighlighter language="prompt" options={options}>
{prompt.trim()}
</SyntaxHighlighter>
</div>
);
});
export default App;
|