SqlEditor

Shell

Edit SQL with CodeMirror syntax highlighting and autocomplete.

editor

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { SqlEditor } from "@reopt-ai/opt-ui/sql-editor";

Live preview

Change the width and theme, then interact with the components.

100%

Ctrl+Enter to run

SqlEditor

Prop	Type	Default	Description
valueRequired	string	—	편집 중인 SQL
onChangeRequired	(sql: string) => void	—	본문 변경 핸들러
onRun	(sql: string, context: SqlEditorRunContext) => void	—	Mod+Enter 실행 핸들러. 두 번째 인자로 선택 영역과 커서 위치
onRunAndAdvance	(sql: string, context: SqlEditorRunContext) => void	—	Shift+Enter — 실행 후 다음 셀/탭으로 이동
schema	SqlEditorSchema	—	테이블/컬럼 자동완성 스키마. 변경 시 에디터를 다시 만들지 않고 자동완성만 재구성
completionSources	SqlEditorCompletionSource[]	—	스키마 자동완성에 더할 완성 소스 (함수 시그니처, 스니펫)
keymap	SqlEditorKeyBinding[]	—	추가 키 바인딩. 내장 실행 바인딩보다 먼저 평가
extensions	SqlEditorExtension[]	—	임의의 CodeMirror 확장. 내장 확장 뒤에 붙어 우선권을 가짐
height	number \| "fill"	—	px 고정 높이. fill이면 부모가 정한 높이를 채움
placeholder	string	—	빈 편집기 안내 문구
readOnly	boolean	—	편집 잠금
ariaLabel	string	—	편집 영역 접근성 레이블
autoFocus	boolean	—	마운트 시 포커스
showFooter	boolean	—	실행 힌트/버튼 표시. 기본값은 onRun이 있을 때 표시
lineNumbers	boolean	true	줄 번호 거터
theme	SqlEditorTheme	"auto"	편집기 색상. auto는 OptThemeProvider의 resolved mode를 따름
labels	SqlEditorLabels	—	문구 오버라이드
className	string	—	기본 스타일 오버라이드

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

CodeMirror를 동적 초기화하고 실행 버튼으로 현재 SQL을 전달한다

Blocks that use this component

SqlWorkspace

Blocks

Compose a SQL editing screen from SqlEditor and QueryResultsTable.

Related components

EditorToolbar

Shells

Build a rich-text editing toolbar from Toolbar and Tooltip components.

CodeSnippetViewer

Shells

Read and copy code snippets with line numbers, a focusable scroll region, and syntaxTheme styling.

RichTextEditor

Shells

Edit Markdown with a formatting toolbar and textarea.

CodeDiffViewer

Shells

Compare code in unified or split views using an LCS diff and focusable scroll regions.

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

SqlEditor

Shell

Edit SQL with CodeMirror syntax highlighting and autocomplete.

editor

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { SqlEditor } from "@reopt-ai/opt-ui/sql-editor";

Live preview

Change the width and theme, then interact with the components.

100%

Ctrl+Enter to run

SqlEditor

Prop	Type	Default	Description
valueRequired	string	—	편집 중인 SQL
onChangeRequired	(sql: string) => void	—	본문 변경 핸들러
onRun	(sql: string, context: SqlEditorRunContext) => void	—	Mod+Enter 실행 핸들러. 두 번째 인자로 선택 영역과 커서 위치
onRunAndAdvance	(sql: string, context: SqlEditorRunContext) => void	—	Shift+Enter — 실행 후 다음 셀/탭으로 이동
schema	SqlEditorSchema	—	테이블/컬럼 자동완성 스키마. 변경 시 에디터를 다시 만들지 않고 자동완성만 재구성
completionSources	SqlEditorCompletionSource[]	—	스키마 자동완성에 더할 완성 소스 (함수 시그니처, 스니펫)
keymap	SqlEditorKeyBinding[]	—	추가 키 바인딩. 내장 실행 바인딩보다 먼저 평가
extensions	SqlEditorExtension[]	—	임의의 CodeMirror 확장. 내장 확장 뒤에 붙어 우선권을 가짐
height	number \| "fill"	—	px 고정 높이. fill이면 부모가 정한 높이를 채움
placeholder	string	—	빈 편집기 안내 문구
readOnly	boolean	—	편집 잠금
ariaLabel	string	—	편집 영역 접근성 레이블
autoFocus	boolean	—	마운트 시 포커스
showFooter	boolean	—	실행 힌트/버튼 표시. 기본값은 onRun이 있을 때 표시
lineNumbers	boolean	true	줄 번호 거터
theme	SqlEditorTheme	"auto"	편집기 색상. auto는 OptThemeProvider의 resolved mode를 따름
labels	SqlEditorLabels	—	문구 오버라이드
className	string	—	기본 스타일 오버라이드