Make tab and shift-tab keybindings configurable

Author: davidmyersdev

README.md

@@ -205,7 +205,7 @@ The `ink-mde/svelte` subpath exports a Svelte component.
 These are the default options, and any of them can be overridden when initializing (or reconfiguring) an instance of `ink-mde`.
 
 ```ts
-// ./src/store.ts#L12-L58
+// ./src/store.ts#L12-L65
 const options = {
   doc: '',
   files: {
@@ -230,6 +230,11 @@ const options = {
     toolbar: false,
   },
   katex: false,
+  keybindings: {
+    // Todo: Set these to false by default. https://codemirror.net/examples/tab
+    tab: true,
+    shiftTab: true,
+  },
   placeholder: '',
   plugins: [
     katex(),
@@ -251,6 +256,8 @@ const options = {
     taskList: true,
     upload: false,
   },
+  // This value overrides both `tab` and `shiftTab` keybindings.
+  trapTab: undefined,
   vim: false,
 }
 ```

src/extensions.ts

@@ -101,6 +101,19 @@ export const lazyResolvers: InkInternal.LazyExtensionResolvers = [
 
     return compartment.reconfigure([])
   },
+  async ([state]: InkInternal.Store, compartment: InkInternal.Vendor.Compartment) => {
+    const { keybindings, trapTab } = state().options
+    const tab = trapTab ?? keybindings.tab
+    const shiftTab = trapTab ?? keybindings.shiftTab
+
+    if (tab || shiftTab) {
+      const { indentWithTab } = await import('/src/vendor/extensions/indentWithTab')
+
+      return compartment.reconfigure(indentWithTab({ tab, shiftTab }))
+    }
+
+    return compartment.reconfigure([])
+  },
   async ([state]: InkInternal.Store, compartment: InkInternal.Vendor.Compartment) => {
     if (state().options.interface.lists) {
       const { lists } = await import('/src/vendor/extensions/lists')

src/store.ts

@@ -33,6 +33,11 @@ export const blankState = (): InkInternal.StateResolved => {
       toolbar: false,
     },
     katex: false,
+    keybindings: {
+      // Todo: Set these to false by default. https://codemirror.net/examples/tab
+      tab: true,
+      shiftTab: true,
+    },
     placeholder: '',
     plugins: [
       katex(),
@@ -54,6 +59,8 @@ export const blankState = (): InkInternal.StateResolved => {
       taskList: true,
       upload: false,
     },
+    // This value overrides both `tab` and `shiftTab` keybindings.
+    trapTab: undefined,
     vim: false,
   }
 

src/vendor/extensions/indentWithTab.ts

@@ -0,0 +1,16 @@
+import { indentLess, indentMore } from '@codemirror/commands'
+import { type Extension } from '@codemirror/state'
+import { keymap } from '@codemirror/view'
+
+export const indentWithTab = ({ tab = true, shiftTab = true } = {}): Extension => {
+  return keymap.of([
+    {
+      key: 'Tab',
+      run: tab ? indentMore : undefined,
+    },
+    {
+      key: 'Shift-Tab',
+      run: shiftTab ? indentLess : undefined,
+    },
+  ])
+}

src/vendor/extensions/keymaps.ts

@@ -1,11 +1,11 @@
-import { history } from '@codemirror/commands'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
 import { type EditorSelection, EditorState } from '@codemirror/state'
+import { keymap } from '@codemirror/view'
 import { toCodeMirror } from './adapters/selections'
 import { buildVendors } from '/src/extensions'
 import { blockquote } from '/src/vendor/extensions/blockquote'
 import { code } from '/src/vendor/extensions/code'
 import { ink } from '/src/vendor/extensions/ink'
-import { keymaps } from '/src/vendor/extensions/keymaps'
 import { lineWrapping } from '/src/vendor/extensions/line_wrapping'
 import { theme } from '/src/vendor/extensions/theme'
 import type * as Ink from '/types/ink'
@@ -21,11 +21,14 @@ export const makeState = ([state, setState]: InkInternal.Store): InkInternal.Ven
     doc: state().options.doc,
     selection: toVendorSelection(state().options.selections),
     extensions: [
+      keymap.of([
+        ...defaultKeymap,
+        ...historyKeymap,
+      ]),
       blockquote(),
       code(),
       history(),
       ink(),
-      keymaps(),
       lineWrapping(),
       theme(),
       ...buildVendors([state, setState]),