From 4502a45eda1db7405a1fda5d6e6cb632aafb4c37 Mon Sep 17 00:00:00 2001
From: Prev Wong <prevwong@gmail.com>
Date: Tue, 11 Jun 2024 17:56:30 +0800
Subject: [PATCH] fix: codemirror extensions

---
 packages/react-code-editor/src/CodeEditor.tsx | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/react-code-editor/src/CodeEditor.tsx b/packages/react-code-editor/src/CodeEditor.tsx
index 1a38e26..3b96a11 100644
--- a/packages/react-code-editor/src/CodeEditor.tsx
+++ b/packages/react-code-editor/src/CodeEditor.tsx
@@ -1,10 +1,27 @@
-import { indentWithTab } from '@codemirror/commands';
+import { closeBracketsKeymap } from '@codemirror/autocomplete';
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from '@codemirror/commands';
 import {
   defaultHighlightStyle,
   syntaxHighlighting,
+  foldGutter,
+  indentOnInput,
+  foldKeymap,
 } from '@codemirror/language';
 import { EditorState, Extension } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import {
+  EditorView,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  keymap,
+  lineNumbers,
+} from '@codemirror/view';
 import { reka as rekaCodemirrorExtension } from '@rekajs/codemirror';
 import { Parser } from '@rekajs/parser';
 import { useReka } from '@rekajs/react';
@@ -170,7 +187,21 @@ export const CodeEditor = ({
       state: EditorState.create({
         doc: currentCodeStringRef.current,
         extensions: [
-          keymap.of([indentWithTab]),
+          lineNumbers(),
+          foldGutter(),
+          indentOnInput(),
+          highlightActiveLine(),
+          highlightActiveLineGutter(),
+          history(),
+          drawSelection(),
+          dropCursor(),
+          keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...historyKeymap,
+            ...foldKeymap,
+            indentWithTab,
+          ]),
           rekaCodemirrorExtension(),
           syntaxHighlighting(defaultHighlightStyle, {
             fallback: true,