github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/repositories/repository/fileRenderers/editor.jsx (about)

     1  import React, {useCallback} from 'react';
     2  import Editor  from 'react-simple-code-editor';
     3  import Prism from 'prismjs';
     4  import 'prismjs/components/prism-sql';
     5  import "../../../../styles/ghsyntax.css";
     6  
     7  
     8  export const SQLEditor = ({ initialValue, onChange, onRun }) => {
     9      const [code, setCode] = React.useState(initialValue);
    10      const changeHandler = useCallback((code) => {
    11          setCode(code)
    12          if (onChange)
    13              onChange(code)
    14      }, [setCode, onChange])
    15      return (
    16          <Editor
    17              value={code}
    18              onValueChange={changeHandler}
    19              highlight={code => Prism.highlight(code, Prism.languages.sql, 'sql')}
    20              padding={10}
    21              className="syntax-editor"
    22              onKeyDown={(e) => {
    23                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
    24                      e.preventDefault();
    25                      e.stopPropagation();
    26                      onRun();
    27                  }
    28              }}
    29          />
    30      );
    31  }