make tab work in editor

Author: SharonStrats

src/lib/code-editor/CodeEditor.ts

@@ -2,7 +2,7 @@ import type { ThemeMode } from 'pane-registry'
 import { Compartment, EditorState } from '@codemirror/state'
 import { EditorView, drawSelection, keymap, lineNumbers } from '@codemirror/view'
 import { defaultHighlightStyle, syntaxHighlighting, StreamLanguage } from '@codemirror/language'
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 import { javascript } from '@codemirror/lang-javascript'
@@ -55,6 +55,7 @@ export class CodeEditor {
           }
         }),
         keymap.of([
+          indentWithTab,
           ...defaultKeymap,
           ...historyKeymap
         ])

test/unit/codeEditor.test.js

@@ -79,7 +79,8 @@ vi.mock('@codemirror/language', () => ({
 vi.mock('@codemirror/commands', () => ({
   defaultKeymap: [{ key: 'default' }],
   history: vi.fn(() => ({ type: 'history' })),
-  historyKeymap: [{ key: 'history' }]
+  historyKeymap: [{ key: 'history' }],
+  indentWithTab: { key: 'Tab', run: vi.fn() }
 }))
 
 vi.mock('@codemirror/lang-css', () => ({
@@ -187,4 +188,17 @@ describe('CodeEditor', () => {
     expect(onDirtyChange).toHaveBeenCalledTimes(1)
     expect(onDirtyChange).toHaveBeenCalledWith(true)
   })
+
+  it('keeps Tab in the editor for indentation', async () => {
+    const editor = new CodeEditor()
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    await editor.initialize(container, 'first', 'text/plain')
+
+    const keymapExtension = createdViews[0].state.extensions.find(
+      extension => extension.type === 'keymap'
+    )
+    expect(keymapExtension.value[0]).toMatchObject({ key: 'Tab' })
+  })
 })