61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import Editor from '@monaco-editor/react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
|
|
export const StandardEditor = ({
|
|
content,
|
|
onChange,
|
|
readOnly = false,
|
|
language = 'xml',
|
|
validationError = null,
|
|
autoScroll = false,
|
|
}) => {
|
|
const editorRef = React.useRef(null);
|
|
|
|
const scrollToBottom = () => {
|
|
if (editorRef.current && autoScroll) {
|
|
const model = editorRef.current.getModel();
|
|
const lineCount = model.getLineCount();
|
|
editorRef.current.revealLine(lineCount, monaco.editor.ScrollType.Smooth);
|
|
}
|
|
};
|
|
|
|
const handleEditorDidMount = (editor) => {
|
|
editorRef.current = editor;
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 10);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
scrollToBottom();
|
|
}, [content, autoScroll]);
|
|
|
|
return (
|
|
<Card className="h-[calc(100vh-8rem)]">
|
|
<CardContent className="p-0 h-full">
|
|
{validationError && (
|
|
<Alert variant="destructive" className="m-4">
|
|
<AlertDescription>{validationError}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
<Editor
|
|
height="100%"
|
|
language={language}
|
|
value={content}
|
|
onChange={onChange}
|
|
onMount={handleEditorDidMount}
|
|
options={{
|
|
minimap: { enabled: false },
|
|
lineNumbers: 'on',
|
|
readOnly,
|
|
fontSize: 14,
|
|
automaticLayout: true,
|
|
wordWrap: 'on',
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}; |