Multiple Editors Demo
2 |
3 |
12 |
--------------------------------------------------------------------------------
/src/app/code-editor-demo/file-node.ts:
--------------------------------------------------------------------------------
1 | import { CodeModel } from '@ngstack/code-editor';
2 |
3 | export enum FileNodeType {
4 | file = 'file',
5 | folder = 'folder',
6 | }
7 |
8 | export class FileNode {
9 | children?: FileNode[];
10 | name: string;
11 | type: FileNodeType;
12 |
13 | code?: CodeModel;
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | body { margin: 0; }
4 |
5 | html,
6 | body,
7 | app-root,
8 | app-code-editor-demo {
9 | display: flex;
10 | flex-direction: column;
11 | flex: 1;
12 | height: 100%;
13 | overflow: hidden;
14 | min-height: 0;
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { RouterOutlet } from '@angular/router';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | standalone: true,
7 | imports: [RouterOutlet],
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css']
10 | })
11 | export class AppComponent {}
12 |
--------------------------------------------------------------------------------
/projects/code-editor/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/lib",
5 | "declarationMap": true,
6 | "declaration": true,
7 | "sourceMap": true,
8 | "inlineSources": true,
9 | "types": []
10 | },
11 | "exclude": [
12 | "**/*.spec.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/projects/multiple-editors/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/projects/multiple-editors/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "include": [
11 | "src/**/*.spec.ts",
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/projects/multiple-editors/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
31 |
46 |
--------------------------------------------------------------------------------
/src/app/code-editor-demo/code-editor-demo.component.scss:
--------------------------------------------------------------------------------
1 | .demo-layout-root {
2 | height: 100%;
3 | min-height: 100%;
4 | min-width: 100%;
5 | width: 100%;
6 | flex-direction: column;
7 | box-sizing: border-box;
8 | display: flex;
9 | }
10 |
11 | .page-layout {
12 | flex-direction: row;
13 | box-sizing: border-box;
14 | display: flex;
15 | flex: 1 1 1e-9px;
16 | }
17 |
18 | .page-layout-content {
19 | flex: 1 1 100%;
20 | box-sizing: border-box;
21 | }
22 |
23 | .ngs-code-editor {
24 | display: flex;
25 | flex-direction: column;
26 | flex: 1;
27 | height: 100%;
28 | max-height: 100%;
29 | overflow: hidden;
30 | min-height: 0;
31 |
32 | .editor {
33 | border: 1px solid grey;
34 | // min-height: 400px;
35 | }
36 | }
37 |
38 | .file-tree-container {
39 | height: calc(100vh - 64px);
40 | overflow: hidden;
41 | }
42 |
43 | .file-tree {
44 | display: flex;
45 | flex-direction: column;
46 | flex: 1;
47 | height: 100%;
48 | max-height: 100%;
49 | overflow: hidden;
50 | min-height: 0;
51 | overflow: auto;
52 |
53 | &-invisible {
54 | display: none;
55 | }
56 | ul,
57 | li {
58 | margin-top: 0;
59 | margin-bottom: 0;
60 | list-style-type: none;
61 | }
62 |
63 | .mat-icon-button[disabled] {
64 | display: none;
65 | }
66 |
67 | .file-node-label {
68 | display: flex;
69 | cursor: pointer;
70 | user-select: none;
71 |
72 | &__icon {
73 | float: left;
74 | }
75 |
76 | &__text {
77 | float: left;
78 | margin-top: 4px;
79 | margin-left: 4px;
80 | white-space: nowrap;
81 | }
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/projects/code-editor/src/lib/code-editor.module.ts:
--------------------------------------------------------------------------------
1 | import { APP_INITIALIZER, ModuleWithProviders, NgModule, Provider } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { CodeEditorComponent } from './code-editor/code-editor.component';
4 | import { CodeEditorService, EDITOR_SETTINGS } from './services/code-editor.service';
5 | import { CodeEditorSettings } from './editor-settings';
6 | import { TypescriptDefaultsService } from './services/typescript-defaults.service';
7 | import { JavascriptDefaultsService } from './services/javascript-defaults.service';
8 | import { JsonDefaultsService } from './services/json-defaults.service';
9 |
10 | export function setupEditorService(service: CodeEditorService) {
11 | return () => service.loadEditor();
12 | }
13 |
14 | export function provideCodeEditor(settings?: CodeEditorSettings): Provider[] {
15 | return [
16 | { provide: EDITOR_SETTINGS, useValue: settings },
17 | CodeEditorService,
18 | TypescriptDefaultsService,
19 | JavascriptDefaultsService,
20 | JsonDefaultsService,
21 | {
22 | provide: APP_INITIALIZER,
23 | useFactory: setupEditorService,
24 | deps: [CodeEditorService],
25 | multi: true,
26 | },
27 | ];
28 | }
29 |
30 | /** @deprecated use `provideCodeEditor(settings)` instead */
31 | @NgModule({
32 | imports: [CommonModule, CodeEditorComponent],
33 | exports: [CodeEditorComponent],
34 | })
35 | export class CodeEditorModule {
36 | static forRoot(
37 | settings?: CodeEditorSettings
38 | ): ModuleWithProviders
32 |
33 |
34 |
35 |
44 |
45 | 
10 |
11 |
12 | ## Installing
13 |
14 | ```sh
15 | npm install @ngstack/code-editor
16 | ```
17 |
18 | ## Integrating with Angular CLI project
19 |
20 | Import `CodeEditorModule` into your main application module:
21 |
22 | ```ts
23 | import { CodeEditorModule } from '@ngstack/code-editor';
24 |
25 | @NgModule({
26 | imports: [CodeEditorModule.forRoot()]
27 | })
28 | export class AppModule {}
29 | ```
30 |
31 | If you want to use a specific version of the Monaco editor, use `editorVersion` parameter.
32 | If not provided, the component is always going to use the `latest` version.
33 |
34 | ```ts
35 | @NgModule({
36 | imports: [
37 | CodeEditorModule.forRoot({
38 | editorVersion: '0.44.0'
39 | })
40 | ]
41 | })
42 | export class AppModule {}
43 | ```
44 |
45 | Update template to use the `ngs-code-editor`:
46 |
47 | ```html
48 |
10 |
11 |
12 | ## Installing
13 |
14 | ```sh
15 | npm install @ngstack/code-editor
16 | ```
17 |
18 | ## Integrating with Standalone Angular Project
19 |
20 | Update the `app.config.ts` file to provide the code editor configuration:
21 |
22 | ```ts
23 | export const appConfig: ApplicationConfig = {
24 | providers: [
25 | provideZoneChangeDetection({ eventCoalescing: true }),
26 | provideRouter(routes),
27 | provideAnimationsAsync(),
28 |
29 | // Configure Code Editor
30 | provideCodeEditor({
31 | // editorVersion: '0.46.0',
32 | // use local Monaco installation
33 | baseUrl: 'assets/monaco',
34 | // use local Typings Worker
35 | typingsWorkerUrl: 'assets/workers/typings-worker.js'
36 | })
37 | ]
38 | };
39 | ```
40 |
41 | ## Integrating with Modules-based Angular Project
42 |
43 | Import `CodeEditorModule` into your main application module:
44 |
45 | ```ts
46 | import { provideCodeEditor } from '@ngstack/code-editor';
47 |
48 | @NgModule({
49 | providers: [provideCodeEditor()]
50 | })
51 | export class AppModule {}
52 | ```
53 |
54 | If you want to use a specific version of the Monaco editor, use `editorVersion` parameter.
55 | If not provided, the component is always going to use the `latest` version.
56 |
57 | > For a full list of Monaco versions and changes, please refer to the official [CHANGELOG.md](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md) file
58 |
59 | ```ts
60 | import { provideCodeEditor } from '@ngstack/code-editor';
61 |
62 | @NgModule({
63 | providers: [
64 | provideCodeEditor({
65 | editorVersion: '0.44.0'
66 | })
67 | ]
68 | })
69 | export class AppModule {}
70 | ```
71 |
72 | Update template to use the `ngs-code-editor`:
73 |
74 | ```html
75 |