38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
|
|
interface VNEditorProps {
|
|
scriptText: string;
|
|
onScriptChange: (text: string) => void;
|
|
}
|
|
|
|
export const VNEditor = forwardRef<HTMLTextAreaElement, VNEditorProps>(({
|
|
scriptText,
|
|
onScriptChange
|
|
}, ref) => {
|
|
return (
|
|
<div className="w-[40%] flex flex-col border-r border-gray-800">
|
|
<div className="flex-1 relative font-mono text-sm leading-6">
|
|
<textarea
|
|
ref={ref}
|
|
value={scriptText}
|
|
onChange={e => onScriptChange(e.target.value)}
|
|
spellCheck={false}
|
|
className="absolute inset-0 w-full h-full bg-[#0d1117] p-6 pl-12 outline-none resize-none text-gray-400 caret-cyan-400 z-10 custom-scrollbar"
|
|
style={{
|
|
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
|
whiteSpace: 'pre',
|
|
lineHeight: '24px'
|
|
}}
|
|
/>
|
|
<div className="absolute top-0 left-0 w-12 h-full bg-[#0b0e14] border-r border-gray-800 flex flex-col items-center py-6 text-[10px] text-gray-700 select-none z-0">
|
|
{scriptText.split('\n').map((_, i) => (
|
|
<div key={i} style={{ height: '24px' }}>{i + 1}</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
VNEditor.displayName = 'VNEditor';
|