0
# Editor Components
1

2
The editor system provides a pluggable architecture with two implementations: CodeMirror for lightweight editing and Monaco for full language service support. Both editors conform to a standard interface for seamless switching.
3

4
## Capabilities
5

6
### Editor Interface
7

8
Standard interface that all editor components must implement for pluggable editor support.
9

10
```typescript { .api }
11
/**
12
 * Standard props interface for all editor components
13
 */
14
interface EditorProps {
15
  /** Current file content to display */
16
  value: string;
17
  /** Filename for language detection and display */
18
  filename: string;
19
  /** Whether editor should be read-only */
20
  readonly?: boolean;
21
  /** Override automatic language mode detection */
22
  mode?: EditorMode;
23
}
24

25
/**
26
 * Events emitted by editor components
27
 */
28
interface EditorEmits {
29
  /** Emitted when editor content changes */
30
  (e: 'change', code: string): void;
31
}
32

33
/**
34
 * Editor component type constraint
35
 */
36
type EditorComponentType = Component<EditorProps>;
37

38
/**
39
 * Editor display modes for compiled output
40
 */
41
type EditorMode = 'js' | 'css' | 'ssr';
42
```
43

44
### CodeMirror Editor
45

46
Lightweight editor implementation using CodeMirror 5 with syntax highlighting and basic editing features.
47

48
**Package Import:**
49

50
```typescript
51
import CodeMirror from "@vue/repl/codemirror-editor";
52
```
53

54
**Features:**
55
- Syntax highlighting for Vue, JavaScript, TypeScript, CSS, HTML
56
- Lightweight bundle size (~100KB)
57
- Fast initialization and rendering
58
- Basic editing features (search, replace, etc.)
59
- Suitable for embedding and simple use cases
60

61
**Usage Examples:**
62

63
```typescript
64
import { Repl } from "@vue/repl";
65
import CodeMirror from "@vue/repl/codemirror-editor";
66

67
// Basic usage
68
<template>
69
  <Repl :editor="CodeMirror" />
70
</template>
71

72
// With additional props
73
<template>
74
  <Repl 
75
    :editor="CodeMirror"
76
    theme="dark"
77
    :showCompileOutput="false"
78
  />
79
</template>
80
```
81

82
**CodeMirror Modes:**
83

84
The CodeMirror editor automatically maps file extensions to appropriate modes:
85

86
```typescript
87
const modes = {
88
  'css': 'css',
89
  'html': 'htmlmixed',
90
  'js': { name: 'javascript' },
91
  'json': { name: 'javascript', json: true },
92
  'ts': { name: 'javascript', typescript: true },
93
  'vue': 'htmlmixed'
94
};
95
```
96

97
### Monaco Editor
98

99
Full-featured editor implementation using Monaco Editor with Volar language service integration.
100

101
**Package Import:**
102

103
```typescript
104
import Monaco from "@vue/repl/monaco-editor";
105
```
106

107
**Features:**
108
- Full TypeScript/Vue language service (Volar)
109
- IntelliSense autocomplete with type information
110
- Error and warning underlines
111
- Go-to-definition and hover information
112
- Semantic syntax highlighting
113
- Code formatting and refactoring
114
- Larger bundle size (~2MB) but loads incrementally
115
- Best for standalone development environments
116

117
**Usage Examples:**
118

119
```typescript
120
import { Repl } from "@vue/repl";
121
import Monaco from "@vue/repl/monaco-editor";
122

123
// Basic usage with Monaco
124
<template>
125
  <Repl :editor="Monaco" />
126
</template>
127

128
// With Monaco-specific options
129
<template>
130
  <Repl 
131
    :editor="Monaco"
132
    :editorOptions="{
133
      monacoOptions: {
134
        fontSize: 14,
135
        minimap: { enabled: false },
136
        scrollBeyondLastLine: false,
137
        wordWrap: 'on'
138
      }
139
    }"
140
  />
141
</template>
142
```
143

144
**Monaco Options:**
145

146
Monaco editor supports extensive configuration through `editorOptions.monacoOptions`:
147

148
```typescript
149
interface MonacoOptions {
150
  /** Font size in pixels */
151
  fontSize?: number;
152
  /** Font family */
153
  fontFamily?: string;
154
  /** Enable/disable minimap */
155
  minimap?: { enabled: boolean };
156
  /** Word wrapping */
157
  wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
158
  /** Line numbers display */
159
  lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
160
  /** Enable/disable folding */
161
  folding?: boolean;
162
  /** Scroll beyond last line */
163
  scrollBeyondLastLine?: boolean;
164
  /** Tab size */
165
  tabSize?: number;
166
  /** Use spaces instead of tabs */
167
  insertSpaces?: boolean;
168
  // ... many more options available
169
}
170
```
171

172
### Editor Selection
173

174
Choose the appropriate editor based on your use case:
175

176
**Use CodeMirror when:**
177
- Bundle size is critical
178
- Simple editing needs
179
- Embedding in documentation or tutorials  
180
- Mobile/touch devices (lighter weight)
181
- No need for advanced language features
182

183
**Use Monaco when:**
184
- Full development environment
185
- TypeScript/Vue language service needed
186
- Advanced editing features required
187
- Desktop-focused applications
188
- Bundle size is not a primary concern
189

190
**Comparison:**
191

192
| Feature | CodeMirror | Monaco |
193
|---------|------------|--------|
194
| Bundle Size | ~100KB | ~2MB |
195
| Language Service | None | Full Volar |
196
| Autocomplete | Basic | IntelliSense |
197
| Error Detection | Compilation only | Real-time |
198
| Performance | Faster startup | Heavier but rich |
199
| Mobile Support | Better | Good |
200
201
### Editor Integration
202

203
Both editors integrate seamlessly with the REPL system:
204

205
**Automatic Features:**
206
- File switching with view state persistence
207
- Real-time compilation and error display
208
- Theme synchronization (dark/light mode)
209
- Syntax highlighting based on filename
210
- Auto-save functionality
211

212
**View State Persistence:**
213

214
```typescript
215
// Editor state is automatically preserved when switching files
216
// Cursor position, scroll position, and selections are maintained
217

218
// Access current file's editor state
219
const activeFile = store.activeFile;
220
console.log(activeFile.editorViewState); // Monaco editor state object
221
```
222

223
### Custom Editor Implementation
224

225
You can create custom editor components by implementing the EditorComponentType interface:
226

227
```typescript
228
// Custom editor component
229
<script setup lang="ts">
230
import type { EditorProps, EditorEmits } from "@vue/repl";
231

232
const props = defineProps<EditorProps>();
233
const emit = defineEmits<EditorEmits>();
234

235
// Editor implementation
236
const handleChange = (newValue: string) => {
237
  emit('change', newValue);
238
};
239
</script>
240

241
<template>
242
  <!-- Custom editor implementation -->
243
  <div class="custom-editor">
244
    <textarea 
245
      :value="props.value"
246
      @input="handleChange($event.target.value)"
247
    />
248
  </div>
249
</template>
250
```
251

252
### Editor Error Handling
253

254
Both editors handle various error conditions gracefully:
255

256
**CodeMirror Error Handling:**
257
- Invalid mode fallback to JavaScript
258
- Graceful degradation on unsupported features
259
- Console warnings for configuration issues
260

261
**Monaco Error Handling:**
262
- Language service connection failures
263
- WebAssembly loading issues (graceful fallback)
264
- Memory management for large files
265
- Worker thread error recovery
266

267
### Performance Considerations
268

269
**CodeMirror Performance:**
270
- Fast rendering for large files
271
- Minimal memory footprint
272
- Efficient syntax highlighting
273
- Good for mobile devices
274

275
**Monaco Performance:**
276
- Lazy loading of language features
277
- WebAssembly compilation caching
278
- Incremental parsing and validation
279
- Background processing via web workers
280

281
**Optimization Tips:**
282

283
```typescript
284
// Optimize Monaco for better performance
285
<Repl 
286
  :editor="Monaco"
287
  :editorOptions="{
288
    monacoOptions: {
289
      // Disable expensive features for better performance
290
      minimap: { enabled: false },
291
      codeLens: false,
292
      scrollBeyondLastLine: false,
293
      // Limit suggestions for faster autocomplete
294
      quickSuggestions: {
295
        other: false,
296
        comments: false,
297
        strings: false
298
      }
299
    }
300
  }"
301
/>
302
```