CodeMirror에서 기본 바인딩 키와 사용자 지정 키 조합하기

LibraryCodeMirror

2년 전

30K

CodeMirror를 사용하다 보면 Backspace나 Enter 같은 기본 키를 눌렀을 때 텍스트 삭제나 줄 바꿈 같은 기본 동작 외에 추가적인 사용자 지정 동작을 실행해야 하는 경우가 있습니다.
하지만 CodeMirror는 standardKeymap, defaultKeymap 같은 기본 키맵이 우선하기 때문에 일반적인 keymap.of로 바인딩하면 사용자 지정 동작(함수)을 실행할 수 없습니다.
이때 Prec(Precedence) 모듈의 highest 메소드를 통해 사용자 지정 키맵이 기본 키맵보다 더 우선 동작하게 할 수 있습니다.

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { EditorView } from 'codemirror'
import { keymap } from '@codemirror/view'
import { Prec } from '@codemirror/state'

new EditorView({
  // ...
  extensions: [
    Prec.highest(
      keymap.of([
        {
          key: 'Backspace',
          run: () => {
            console.log('Backspace key!')
            return false // 다음 동작으로 넘어가 텍스트를 삭제할 수 있습니다.
          }
        },
        {
          key: 'Enter',
          run: () => {
            console.log('Enter key!')
            return true // 다음 동작으로 넘어가지 않아 줄 바꿈되지 않습니다.
          }
        }
      ])
    )
  ]
})

만약 각 키맵의 run 함수에서 true를 반환하면 다음 동작으로 넘어가지 않아 기본 키맵을 비활성화할 수 있습니다.
반면에 false를 반환하면 다음 동작으로 넘어가 기본 키맵과 조합해서 사용할 수 있습니다.