0
# Editor Factory
1

2
The `CodeMirrorEditorFactory` provides a service for creating CodeMirror editors with different configurations optimized for inline and document use cases.
3

4
## Capabilities
5

6
### CodeMirrorEditorFactory Class
7

8
Factory service implementing the JupyterLab editor factory interface for creating CodeMirror editors.
9

10
```typescript { .api }
11
/**
12
 * CodeMirror editor factory service
13
 * Creates editors with optimized configurations for different use cases
14
 */
15
class CodeMirrorEditorFactory implements IEditorFactoryService {
16
  constructor(options?: IEditorFactoryOptions);
17
  
18
  /**
19
   * Create a new editor for inline code
20
   * Optimized for single-line or short code snippets
21
   */
22
  readonly newInlineEditor: (options: CodeEditor.IOptions) => CodeMirrorEditor;
23
  
24
  /**
25
   * Create a new editor for a full document
26
   * Optimized for multi-line documents with full editing features
27
   */
28
  readonly newDocumentEditor: (options: CodeEditor.IOptions) => CodeMirrorEditor;
29
  
30
  // Protected properties for customization
31
  protected extensions: IEditorExtensionRegistry;
32
  protected languages: IEditorLanguageRegistry;
33
  protected translator: ITranslator;
34
  protected inlineCodeMirrorConfig: Record<string, any>;
35
  protected documentCodeMirrorConfig: Record<string, any>;
36
}
37

38
interface IEditorFactoryOptions {
39
  extensions?: IEditorExtensionRegistry;
40
  languages?: IEditorLanguageRegistry;
41
  translator?: ITranslator;
42
}
43
```
44

45
**Usage Examples:**
46

47
```typescript
48
import { CodeMirrorEditorFactory } from "@jupyterlab/codemirror";
49
import { CodeEditor } from "@jupyterlab/codeeditor";
50

51
// Create factory with default registries
52
const factory = new CodeMirrorEditorFactory();
53

54
// Create document editor for full editing experience
55
const model = new CodeEditor.Model();
56
const documentEditor = factory.newDocumentEditor({
57
  model,
58
  host: document.createElement('div'),
59
  config: {
60
    lineNumbers: true,
61
    scrollPastEnd: true
62
  }
63
});
64

65
// Create inline editor for simple input
66
const inlineModel = new CodeEditor.Model();
67
const inlineEditor = factory.newInlineEditor({
68
  model: inlineModel,
69
  host: document.createElement('div'),
70
  config: {
71
    searchWithCM: true
72
  }
73
});
74

75
// Set content and language
76
model.sharedModel.setSource("# Python Code\nprint('Hello, World!')");
77
model.mimeType = "text/x-python";
78

79
inlineModel.sharedModel.setSource("console.log('Inline JS');");
80
inlineModel.mimeType = "text/javascript";
81
```
82

83
### Factory Configuration
84

85
The factory comes with pre-configured settings for different editor types.
86

87
```typescript { .api }
88
// Default inline editor configuration
89
protected inlineCodeMirrorConfig: Record<string, any> = {
90
  searchWithCM: true
91
};
92

93
// Default document editor configuration  
94
protected documentCodeMirrorConfig: Record<string, any> = {
95
  lineNumbers: true,
96
  scrollPastEnd: true
97
};
98
```
99

100
### Custom Factory Setup
101

102
Create a factory with custom registries and configurations.
103

104
```typescript
105
import { 
106
  CodeMirrorEditorFactory,
107
  EditorExtensionRegistry,
108
  EditorLanguageRegistry,
109
  EditorThemeRegistry
110
} from "@jupyterlab/codemirror";
111
import { nullTranslator } from "@jupyterlab/translation";
112

113
// Create custom registries
114
const extensions = new EditorExtensionRegistry();
115
const languages = new EditorLanguageRegistry();
116
const translator = nullTranslator;
117

118
// Add custom extensions
119
extensions.addExtension({
120
  name: 'myCustomExtension',
121
  factory: (options) => ({
122
    instance: (value) => myCustomExtension(value),
123
    reconfigure: (value) => null
124
  }),
125
  default: true
126
});
127

128
// Create factory with custom setup
129
const customFactory = new CodeMirrorEditorFactory({
130
  extensions,
131
  languages,
132
  translator
133
});
134

135
// Create editors using custom factory
136
const editor = customFactory.newDocumentEditor({
137
  model: new CodeEditor.Model(),
138
  host: document.createElement('div'),
139
  config: {
140
    // Custom configuration options
141
    myCustomExtension: true,
142
    lineNumbers: false,
143
    theme: 'dark'
144
  }
145
});
146
```
147

148
### Editor Type Differences
149

150
Understanding the differences between inline and document editors.
151

152
**Inline Editor Characteristics:**
153
- Optimized for single-line or short snippets
154
- Minimal UI chrome
155
- Search functionality enabled by default
156
- No line numbers by default
157
- Compact appearance
158

159
**Document Editor Characteristics:**
160
- Full-featured editing experience
161
- Line numbers enabled by default
162
- Scroll past end enabled
163
- Optimized for multi-line documents
164
- Complete feature set
165

166
```typescript
167
// Inline editor optimized configuration
168
const inlineEditor = factory.newInlineEditor({
169
  model,
170
  host: inlineContainer,
171
  config: {
172
    searchWithCM: true,    // Enable search panel
173
    lineNumbers: false,    // No line numbers for compact view
174
    lineWrap: true        // Wrap long lines
175
  }
176
});
177

178
// Document editor full-featured configuration
179
const documentEditor = factory.newDocumentEditor({
180
  model,
181
  host: documentContainer,
182
  config: {
183
    lineNumbers: true,     // Show line numbers
184
    scrollPastEnd: true,   // Allow scrolling past document end
185
    codeFolding: true,     // Enable code folding
186
    rulers: [80, 120]      // Show ruler lines
187
  }
188
});
189
```
190

191
### Advanced Factory Usage
192

193
Extending the factory for custom editor types.
194

195
```typescript
196
class CustomCodeMirrorEditorFactory extends CodeMirrorEditorFactory {
197
  constructor(options?: IEditorFactoryOptions) {
198
    super(options);
199
    
200
    // Customize configurations
201
    this.inlineCodeMirrorConfig = {
202
      ...this.inlineCodeMirrorConfig,
203
      customInlineFeature: true
204
    };
205
    
206
    this.documentCodeMirrorConfig = {
207
      ...this.documentCodeMirrorConfig,
208
      customDocumentFeature: true,
209
      lineNumbers: true,
210
      scrollPastEnd: true
211
    };
212
  }
213
  
214
  // Create specialized editor type
215
  readonly newConsoleEditor = (options: CodeEditor.IOptions): CodeMirrorEditor => {
216
    options.host.dataset.type = 'console';
217
    return this.newEditor({
218
      ...options,
219
      config: {
220
        searchWithCM: false,
221
        lineNumbers: false,
222
        scrollPastEnd: false,
223
        ...options.config
224
      },
225
      inline: false
226
    });
227
  };
228
  
229
  // Override protected method for custom behavior
230
  protected newEditor(
231
    options: CodeEditor.IOptions & IEditorExtensionFactory.IOptions
232
  ): CodeMirrorEditor {
233
    // Add custom logic before creating editor
234
    const editor = super.newEditor(options);
235
    
236
    // Post-creation customization
237
    editor.setOption('customSetting', true);
238
    
239
    return editor;
240
  }
241
}
242
```
243

244
### Integration with JupyterLab
245

246
Using the factory within JupyterLab's dependency injection system.
247

248
```typescript
249
import { JupyterFrontEnd, JupyterFrontEndPlugin } from "@jupyterlab/application";
250
import { IEditorServices } from "@jupyterlab/codeeditor";
251
import { 
252
  CodeMirrorEditorFactory,
253
  IEditorExtensionRegistry,
254
  IEditorLanguageRegistry
255
} from "@jupyterlab/codemirror";
256

257
const plugin: JupyterFrontEndPlugin<void> = {
258
  id: 'my-editor-plugin',
259
  autoStart: true,
260
  requires: [IEditorExtensionRegistry, IEditorLanguageRegistry],
261
  provides: IEditorServices,
262
  activate: (
263
    app: JupyterFrontEnd,
264
    extensions: IEditorExtensionRegistry,
265
    languages: IEditorLanguageRegistry
266
  ) => {
267
    const factory = new CodeMirrorEditorFactory({
268
      extensions,
269
      languages,
270
      translator: app.translator
271
    });
272
    
273
    return {
274
      factoryService: factory,
275
      mimeTypeService: new CodeMirrorMimeTypeService(languages)
276
    };
277
  }
278
};
279
```
280

281
## Types
282

283
```typescript { .api }
284
interface IEditorFactoryService {
285
  newInlineEditor(options: CodeEditor.IOptions): CodeEditor.IEditor;
286
  newDocumentEditor(options: CodeEditor.IOptions): CodeEditor.IEditor;
287
}
288

289
interface IEditorFactoryOptions {
290
  extensions?: IEditorExtensionRegistry;
291
  languages?: IEditorLanguageRegistry;
292
  translator?: ITranslator;
293
}
294

295
interface IEditorExtensionFactory.IOptions {
296
  inline: boolean;
297
  model: CodeEditor.IModel;
298
}
299
```