@@ -27,7 +27,7 @@ import {
2727 foldKeymap ,
2828 indentOnInput ,
2929} from "@codemirror/language" ;
30- import { defaultKeymap , history , historyKeymap , indentWithTab } from "@codemirror/commands" ;
30+ import { defaultKeymap , history , historyKeymap , insertTab , indentLess , indentMore } from "@codemirror/commands" ;
3131import { highlightSelectionMatches , searchKeymap } from "@codemirror/search" ;
3232import { Diagnostic , linter , lintKeymap } from "@codemirror/lint" ;
3333import { type EditorState , Prec } from "@codemirror/state" ;
@@ -282,7 +282,20 @@ export function useFocusExtension(onFocus?: (focused: boolean) => void): [Extens
282282}
283283
284284function indentWithTabExtension ( open ?: boolean ) {
285- return open ?? true ? keymap . of ( [ indentWithTab ] ) : [ ] ;
285+ if ( ! ( open ?? true ) ) return [ ] ;
286+ return keymap . of ( [
287+ {
288+ key : "Tab" ,
289+ run : ( view : EditorView ) => {
290+ const { main } = view . state . selection ;
291+ if ( ! main . empty && main . from !== main . to ) {
292+ return indentMore ( view ) ;
293+ }
294+ return insertTab ( view ) ;
295+ } ,
296+ } ,
297+ { key : "Shift-Tab" , run : indentLess } ,
298+ ] ) ;
286299}
287300
288301export function lineNoExtension ( showLineNumber ?: boolean ) {
@@ -493,26 +506,26 @@ export function useExtensions(props: CodeEditorProps) {
493506 basicSetup ,
494507 defaultTheme ,
495508 highlightJsExt ,
496- autocompletionExtension ,
497509 focusExtension ,
498510 lineNoExt ,
499511 languageExt ,
500512 onChangeExt ,
501513 placeholderExt ,
502514 indentWithTabExt ,
515+ autocompletionExtension ,
503516 tooltipExt ,
504517 lintExt ,
505518 iconExt ,
506519 ] ,
507520 [
508521 highlightJsExt ,
509- autocompletionExtension ,
510522 focusExtension ,
511523 lineNoExt ,
512524 languageExt ,
513525 onChangeExt ,
514526 placeholderExt ,
515527 indentWithTabExt ,
528+ autocompletionExtension ,
516529 tooltipExt ,
517530 lintExt ,
518531 iconExt ,
0 commit comments