2761857b0d
- Implemented `owl_to_mermaid.py` to convert OWL/Turtle files into Mermaid class diagrams. - Implemented `owl_to_plantuml.py` to convert OWL/Turtle files into PlantUML class diagrams. - Added two new PlantUML files for custodian multi-aspect diagrams.
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
/**
|
|
* Query Editor Component
|
|
*
|
|
* Syntax-highlighted SPARQL query editor using CodeMirror.
|
|
*/
|
|
|
|
import { type FC } from 'react';
|
|
import CodeMirror from '@uiw/react-codemirror';
|
|
import { javascript } from '@codemirror/lang-javascript';
|
|
import './QueryEditor.css';
|
|
|
|
interface QueryEditorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
readOnly?: boolean;
|
|
height?: string;
|
|
}
|
|
|
|
export const QueryEditor: FC<QueryEditorProps> = ({
|
|
value,
|
|
onChange,
|
|
readOnly = false,
|
|
height = '400px',
|
|
}) => {
|
|
return (
|
|
<div className="query-editor">
|
|
<CodeMirror
|
|
value={value}
|
|
height={height}
|
|
extensions={[javascript()]} // Using JavaScript mode (closest to SPARQL)
|
|
onChange={onChange}
|
|
editable={!readOnly}
|
|
theme="light"
|
|
basicSetup={{
|
|
lineNumbers: true,
|
|
highlightActiveLineGutter: true,
|
|
highlightSpecialChars: true,
|
|
foldGutter: true,
|
|
drawSelection: true,
|
|
dropCursor: true,
|
|
allowMultipleSelections: true,
|
|
indentOnInput: true,
|
|
syntaxHighlighting: true,
|
|
bracketMatching: true,
|
|
closeBrackets: true,
|
|
autocompletion: true,
|
|
rectangularSelection: true,
|
|
crosshairCursor: true,
|
|
highlightActiveLine: true,
|
|
highlightSelectionMatches: true,
|
|
closeBracketsKeymap: true,
|
|
searchKeymap: true,
|
|
foldKeymap: true,
|
|
completionKeymap: true,
|
|
lintKeymap: true,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|