0
# Extensions and Configuration
1

2
Default extension management and configuration utilities for setting up common CodeMirror features. The extensions system provides pre-configured setups for typical use cases while maintaining full customization capabilities.
3

4
## Capabilities
5

6
### Default Extensions
7

8
Function to generate default extension configurations based on common options.
9

10
```typescript { .api }
11
/**
12
 * Generate default extension array based on configuration options
13
 * @param options - Configuration options for default extensions
14
 * @returns Array of CodeMirror extensions ready for use
15
 */
16
function getDefaultExtensions(options?: DefaultExtensionsOptions): Extension[];
17

18
interface DefaultExtensionsOptions {
19
  /** Enable tab indentation - defaults to true */
20
  indentWithTab?: boolean;
21
  /** Basic setup configuration - defaults to true */
22
  basicSetup?: boolean | BasicSetupOptions;
23
  /** Placeholder text or element when editor is empty */
24
  placeholder?: string | HTMLElement;
25
  /** Theme selection - 'light', 'dark', 'none', or custom Extension */
26
  theme?: 'light' | 'dark' | 'none' | Extension;
27
  /** Whether content is read-only - defaults to false */
28
  readOnly?: boolean;
29
  /** Whether content is editable - defaults to true */
30
  editable?: boolean;
31
}
32
```
33

34
**Usage Examples:**
35

36
```typescript
37
import { getDefaultExtensions } from "@uiw/react-codemirror";
38
import { javascript } from "@codemirror/lang-javascript";
39
import { oneDark } from "@codemirror/theme-one-dark";
40

41
// Basic default extensions
42
const basicExtensions = getDefaultExtensions();
43

44
// Customized default extensions
45
const customExtensions = getDefaultExtensions({
46
  theme: 'dark',
47
  indentWithTab: true,
48
  placeholder: 'Enter your code here...',
49
  basicSetup: {
50
    lineNumbers: true,
51
    highlightActiveLine: true,
52
    bracketMatching: true,
53
    autocompletion: true,
54
  },
55
});
56

57
// Combined with language extensions
58
const fullExtensions = [
59
  ...getDefaultExtensions({ theme: oneDark }),
60
  javascript({ jsx: true }),
61
];
62
```
63

64
### Basic Setup Options
65

66
Comprehensive configuration options for CodeMirror's basic setup features.
67

68
```typescript { .api }
69
interface BasicSetupOptions {
70
  /** Show line numbers in the gutter */
71
  lineNumbers?: boolean;
72
  /** Highlight the line where the cursor is */
73
  highlightActiveLineGutter?: boolean;
74
  /** Highlight special characters */
75
  highlightSpecialChars?: boolean;
76
  /** Enable undo/redo history */
77
  history?: boolean;
78
  /** Enable code folding in the gutter */
79
  foldGutter?: boolean;
80
  /** Draw selection highlights */
81
  drawSelection?: boolean;
82
  /** Show drop cursor when dragging */
83
  dropCursor?: boolean;
84
  /** Allow multiple selections */
85
  allowMultipleSelections?: boolean;
86
  /** Auto-indent on input */
87
  indentOnInput?: boolean;
88
  /** Enable syntax highlighting */
89
  syntaxHighlighting?: boolean;
90
  /** Highlight matching brackets */
91
  bracketMatching?: boolean;
92
  /** Auto-close brackets */
93
  closeBrackets?: boolean;
94
  /** Enable autocompletion */
95
  autocompletion?: boolean;
96
  /** Enable rectangular selection */
97
  rectangularSelection?: boolean;
98
  /** Show crosshair cursor */
99
  crosshairCursor?: boolean;
100
  /** Highlight the active line */
101
  highlightActiveLine?: boolean;
102
  /** Highlight selection matches */
103
  highlightSelectionMatches?: boolean;
104
  /** Include close brackets keymap */
105
  closeBracketsKeymap?: boolean;
106
  /** Include default keymap */
107
  defaultKeymap?: boolean;
108
  /** Include search keymap */
109
  searchKeymap?: boolean;
110
  /** Include history keymap */
111
  historyKeymap?: boolean;
112
  /** Include fold keymap */
113
  foldKeymap?: boolean;
114
  /** Include completion keymap */
115
  completionKeymap?: boolean;
116
  /** Include lint keymap */
117
  lintKeymap?: boolean;
118
}
119
```
120

121
**Usage Examples:**
122

123
```typescript
124
import CodeMirror from "@uiw/react-codemirror";
125
import { python } from "@codemirror/lang-python";
126

127
// Minimal setup for simple editing
128
function MinimalEditor() {
129
  return (
130
    <CodeMirror
131
      value="print('Hello World')"
132
      basicSetup={{
133
        lineNumbers: false,
134
        highlightActiveLine: false,
135
        history: true,
136
        autocompletion: false,
137
      }}
138
      extensions={[python()]}
139
    />
140
  );
141
}
142

143
// Full-featured setup for development
144
function FullEditor() {
145
  return (
146
    <CodeMirror
147
      value="print('Hello World')"
148
      basicSetup={{
149
        lineNumbers: true,
150
        highlightActiveLine: true,
151
        highlightActiveLineGutter: true,
152
        history: true,
153
        foldGutter: true,
154
        bracketMatching: true,
155
        closeBrackets: true,
156
        autocompletion: true,
157
        syntaxHighlighting: true,
158
        rectangularSelection: true,
159
        highlightSelectionMatches: true,
160
        searchKeymap: true,
161
        historyKeymap: true,
162
        foldKeymap: true,
163
        completionKeymap: true,
164
      }}
165
      extensions={[python()]}
166
    />
167
  );
168
}
169
```
170

171
### Theme Configuration
172

173
Built-in theme options and support for custom themes.
174

175
```typescript { .api }
176
// Built-in theme constants exported from extensions
177
const defaultLightThemeOption: Extension;
178

179
// Re-exported from @codemirror/theme-one-dark
180
const oneDark: Extension;
181
```
182

183
**Usage Examples:**
184

185
```typescript
186
import CodeMirror from "@uiw/react-codemirror";
187
import { getDefaultExtensions, oneDark, defaultLightThemeOption } from "@uiw/react-codemirror";
188
import { EditorView } from "@codemirror/view";
189

190
// Using built-in themes
191
function ThemedEditor() {
192
  return (
193
    <div>
194
      {/* Light theme (default) */}
195
      <CodeMirror
196
        value="// Light theme"
197
        theme="light"
198
      />
199
      
200
      {/* Dark theme */}
201
      <CodeMirror
202
        value="// Dark theme"
203
        theme="dark"
204
      />
205
      
206
      {/* No theme */}
207
      <CodeMirror
208
        value="// No theme"
209
        theme="none"
210
      />
211
      
212
      {/* Custom theme extension */}
213
      <CodeMirror
214
        value="// Custom theme"
215
        theme={oneDark}
216
      />
217
    </div>
218
  );
219
}
220

221
// Creating custom theme
222
function CustomThemedEditor() {
223
  const customTheme = EditorView.theme({
224
    '&': {
225
      color: '#333',
226
      backgroundColor: '#f5f5f5',
227
    },
228
    '.cm-content': {
229
      padding: '10px',
230
    },
231
    '.cm-focused .cm-cursor': {
232
      borderLeftColor: '#ff6b6b',
233
    },
234
    '.cm-focused .cm-selectionBackground, ::selection': {
235
      backgroundColor: '#ffd93d55',
236
    },
237
  });
238

239
  return (
240
    <CodeMirror
241
      value="// Custom styled editor"
242
      theme={customTheme}
243
    />
244
  );
245
}
246
```
247

248
### Extension Combination
249

250
Patterns for combining default extensions with custom extensions.
251

252
**Usage Examples:**
253

254
```typescript
255
import CodeMirror from "@uiw/react-codemirror";
256
import { getDefaultExtensions } from "@uiw/react-codemirror";
257
import { javascript } from "@codemirror/lang-javascript";
258
import { linter, lintGutter } from "@codemirror/lint";
259
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
260

261
// Combining extensions systematically
262
function ExtendedEditor() {
263
  const baseExtensions = getDefaultExtensions({
264
    theme: 'dark',
265
    basicSetup: {
266
      lineNumbers: true,
267
      bracketMatching: true,
268
    },
269
  });
270

271
  const languageExtensions = [
272
    javascript({ jsx: true, typescript: true }),
273
  ];
274

275
  const lintingExtensions = [
276
    lintGutter(),
277
    linter((view) => {
278
      // Custom linting logic
279
      return [];
280
    }),
281
  ];
282

283
  const completionExtensions = [
284
    autocompletion(),
285
    completionKeymap,
286
  ];
287

288
  const allExtensions = [
289
    ...baseExtensions,
290
    ...languageExtensions,
291
    ...lintingExtensions,
292
    ...completionExtensions,
293
  ];
294

295
  return (
296
    <CodeMirror
297
      value="const greeting = 'Hello World';"
298
      extensions={allExtensions}
299
      height="300px"
300
    />
301
  );
302
}
303

304
// Conditional extension loading
305
function ConditionalEditor({ enableLinting = false, language = 'javascript' }) {
306
  const extensions = React.useMemo(() => {
307
    const base = getDefaultExtensions();
308
    const result = [...base];
309

310
    // Add language support
311
    if (language === 'javascript') {
312
      result.push(javascript({ jsx: true }));
313
    }
314

315
    // Conditionally add linting
316
    if (enableLinting) {
317
      result.push(lintGutter());
318
    }
319

320
    return result;
321
  }, [enableLinting, language]);
322

323
  return (
324
    <CodeMirror
325
      value="// Conditional extensions"
326
      extensions={extensions}
327
    />
328
  );
329
}
330
```