SqlEditor.jsx

import React from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { sql } from '@codemirror/lang-sql'

export default function SqlEditor({ value, onChange }) {
  return (
    <div className="editor-wrapper">
      <CodeMirror
        value={value}
        height="100%"
        theme="light"
        extensions={[sql()]}
        onChange={onChange}
        placeholder={"请输入SQL语句...\n\n提示：使用 {{变量名}} 定义查询条件参数\n例如：SELECT * FROM users WHERE name LIKE {{name}} AND status = {{status}}"}
        basicSetup={{
          lineNumbers: true,
          highlightActiveLine: true,
          bracketMatching: true,
          autocompletion: true,
          foldGutter: true,
          indentOnInput: true,
          scrollPastEnd: false,
        }}
        style={{
          fontSize: '14px',
          width: '100%',
          height: '100%',
        }}
      />
    </div>
  )
}