forked from Gerome-Elassaad/CodingIT
-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathcode-editor.tsx
More file actions
99 lines (93 loc) · 2.8 KB
/
Copy pathcode-editor.tsx
File metadata and controls
99 lines (93 loc) · 2.8 KB
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import Editor, { Monaco } from '@monaco-editor/react'
import { useRef } from 'react'
import * as monacoEditor from 'monaco-editor'
import { useTheme } from 'next-themes'
// @ts-ignore
import './code-theme.css'
export function CodeEditor({
code,
lang,
onChange,
}: {
code: string
lang: string
onChange: (value: string | undefined) => void
}) {
const { theme } = useTheme()
const editorRef = useRef<monacoEditor.editor.IStandaloneCodeEditor | null>(
null,
)
function handleEditorDidMount(
editor: monacoEditor.editor.IStandaloneCodeEditor,
monaco: Monaco,
) {
editorRef.current = editor
// Quick save shortcut (Ctrl/Cmd + S)
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
// Trigger save event - the parent component should handle this
const currentCode = editor.getValue()
onChange(currentCode)
})
// Find and replace (Ctrl/Cmd + H) - Monaco has this built-in but let's ensure it's enabled
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyH, () => {
editor.trigger('', 'editor.action.startFindReplaceAction', {})
})
// Format document (Alt + Shift + F)
editor.addCommand(monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF, () => {
editor.trigger('', 'editor.action.formatDocument', {})
})
}
return (
<Editor
height="100%"
language={lang}
value={code}
onChange={onChange}
theme={theme === 'dark' ? 'vs-dark' : 'vs'}
onMount={handleEditorDidMount}
options={{
minimap: {
enabled: false,
},
fontSize: 14,
fontFamily: 'JetBrains Mono, SF Mono, Monaco, Inconsolata, Fira Code, Droid Sans Mono, Consolas, monospace',
wordWrap: 'on',
scrollBeyondLastLine: false,
automaticLayout: true,
tabSize: 2,
insertSpaces: true,
detectIndentation: true,
renderWhitespace: 'selection',
bracketPairColorization: {
enabled: true,
},
guides: {
bracketPairs: true,
indentation: true,
},
suggest: {
showKeywords: true,
showSnippets: true,
},
quickSuggestions: {
other: true,
comments: true,
strings: true,
},
folding: true,
foldingStrategy: 'indentation',
showFoldingControls: 'mouseover',
lineNumbers: 'on',
glyphMargin: true,
lineDecorationsWidth: 10,
lineNumbersMinChars: 3,
// Enable find widget
find: {
addExtraSpaceOnTop: false,
autoFindInSelection: 'never',
seedSearchStringFromSelection: 'always',
},
}}
/>
)
}