@@ -27,7 +27,7 @@ import {
2727foldKeymap ,
2828indentOnInput ,
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) {
493506basicSetup ,
494507defaultTheme ,
495508highlightJsExt ,
496- autocompletionExtension ,
497509focusExtension ,
498510lineNoExt ,
499511languageExt ,
500512onChangeExt ,
501513placeholderExt ,
502514indentWithTabExt ,
515+ autocompletionExtension ,
503516tooltipExt ,
504517lintExt ,
505518iconExt ,
506519] ,
507520[
508521highlightJsExt ,
509- autocompletionExtension ,
510522focusExtension ,
511523lineNoExt ,
512524languageExt ,
513525onChangeExt ,
514526placeholderExt ,
515527indentWithTabExt ,
528+ autocompletionExtension ,
516529tooltipExt ,
517530lintExt ,
518531iconExt ,