react-codemirror2 sql

         <CodeMirror
              value={statement}
              options={{
                mode: "sql",
                matchBrackets: true,
                styleActiveLine: true,
                autoCloseBrackets: true,
                lint: true,
                extraKeys: { Tab: "autocomplete" },
                hintOptions: { completeSingle: false },
                gutters: ["CodeMirror-lint-markers"],
                lineNumbers: true,
              }}
              onBeforeChange={(editor, data, value) => {
                setStatement(value);
              }}
              onInputRead={editor => {
                const hintOptions = {
                  tables: winTableCodeTips,
                  completeSingle: false,
                };
                editor.setOption("hintOptions", hintOptions);
                editor.showHint();
              }}
              onCursorActivity={editor => {
                let value = editor.getSelection();
                if (value) {
                  setSelectionValue(value);
                }
              }}
              onCursor={(editor, data): void => {
                let sql: string = "";
                let semiSymbol = ";";
                // get the SQL statement before the current location (up to the last semicolon)
                const beforeSemicolon = editor.getRange({ line: 0, ch: 0 }, { line: data.line, ch: data.ch });
                // get the SQL statement after getting the current location (up to the next semicolon)
                const lastLine = editor.lastLine();
                const afterSemicolon = editor.getRange({ line: data.line, ch: data.ch }, { line: lastLine, ch: editor.getLine(lastLine).length });
                const isEndSemicolon = beforeSemicolon.endsWith(semiSymbol);
                const before = beforeSemicolon.split(semiSymbol).slice(-1)[0];
                const after = afterSemicolon.split(semiSymbol)[0];
                if (isEndSemicolon || (before.trim() === "" && after.trim() === "")) {
                  sql = beforeSemicolon.split(semiSymbol).slice(-2)[0];
                } else {
                  sql = `${before}${after};`;
                }
                setSelectionValue(sql);
              }}
            />