+
## Installing
@@ -22,12 +22,22 @@ Import `CodeEditorModule` into your main application module:
```ts
import { CodeEditorModule } from '@ngstack/code-editor';
+@NgModule({
+ imports: [CodeEditorModule.forRoot()]
+})
+export class AppModule {}
+```
+
+If you want to use a specific version of the Monaco editor, use `editorVersion` parameter.
+If not provided, the component is always going to use the `latest` version.
+
+```ts
@NgModule({
imports: [
- ...,
- CodeEditorModule.forRoot()
- ],
- ...
+ CodeEditorModule.forRoot({
+ editorVersion: '0.44.0'
+ })
+ ]
})
export class AppModule {}
```
@@ -35,12 +45,7 @@ export class AppModule {}
Update template to use the `ngs-code-editor`:
```html
-
+
+
-
-
+
-
- ;
- nestedDataSource: MatTreeNestedDataSource;
-
themes = [
{ name: 'Visual Studio', value: 'vs' },
{ name: 'Visual Studio Dark', value: 'vs-dark' },
- { name: 'High Contrast Dark', value: 'hc-black' },
+ { name: 'High Contrast Dark', value: 'hc-black' }
];
selectedModel: CodeModel = null;
@@ -36,46 +50,44 @@ export class CodeEditorDemoComponent implements OnInit {
isLoading = false;
isLoading$: Observable;
- @ViewChild('file')
- fileInput: ElementRef;
+ private _codeEditor: CodeEditorComponent;
+
+ @ViewChild(CodeEditorComponent, { static: false })
+ set codeEditor(value: CodeEditorComponent) {
+ this._codeEditor = value;
+ }
+
+ get codeEditor(): CodeEditorComponent {
+ return this._codeEditor;
+ }
- options = {
+ @HostBinding('class')
+ class = 'app-code-editor-demo';
+
+ options: editor.IStandaloneEditorConstructionOptions = {
contextmenu: true,
minimap: {
- enabled: false,
- },
+ enabled: false
+ }
};
- constructor(database: FileDatabase, editorService: CodeEditorService) {
- this.nestedTreeControl = new NestedTreeControl(this._getChildren);
- this.nestedDataSource = new MatTreeNestedDataSource();
+ files: FileNode[];
+ selectedFile: FileNode;
- database.dataChange.subscribe(
- (data) => (this.nestedDataSource.data = data)
- );
+ constructor(database: FileDatabase, editorService: CodeEditorService) {
+ database.dataChange.subscribe((data) => {
+ this.files = data;
+ this.selectedFile = this.files[0];
+ this.selectNode(this.selectedFile);
+ });
this.isLoading$ = editorService.loadingTypings.pipe(debounceTime(300));
}
- hasNestedChild(_: number, nodeData: FileNode): boolean {
- return nodeData.type === FileNodeType.folder;
- }
-
- private _getChildren = (node: FileNode) => node.children;
-
onCodeChanged(value) {
// console.log('CODE', value);
}
- isNodeSelected(node: FileNode): boolean {
- return (
- node &&
- node.code &&
- this.selectedModel &&
- node.code === this.selectedModel
- );
- }
-
selectNode(node: FileNode) {
this.isLoading = false;
console.log(node);
@@ -93,7 +105,20 @@ export class CodeEditorDemoComponent implements OnInit {
*/
}
- onEditorLoaded() {
- console.log('loaded');
+ onEditorLoaded(editor: CodeEditorComponent) {
+ console.log('loaded', editor);
+ }
+
+ onCodeModelChanged(event: CodeModelChangedEvent) {
+ console.log('code model changed', event);
+
+ setTimeout(() => {
+ event.sender.formatDocument();
+ }, 100);
+ }
+
+ onSelectionChange($event: MatSelectChange) {
+ const fileNode = $event.value as FileNode;
+ this.selectNode(fileNode);
}
}
diff --git a/src/app/code-editor-demo/file-database.ts b/src/app/code-editor-demo/file-database.ts
index fb3053eb..0fe1644c 100644
--- a/src/app/code-editor-demo/file-database.ts
+++ b/src/app/code-editor-demo/file-database.ts
@@ -4,222 +4,116 @@ import { FileNode, FileNodeType } from './file-node';
const FILES_DATA: FileNode[] = [
{
- name: 'Files',
- type: FileNodeType.folder,
- children: [
- {
- name: 'json.json',
- type: FileNodeType.file,
- code: {
- language: 'json',
- uri: 'main.json',
- value: [
- '{',
- ' "$schema": "http://myserver/foo-schema.json",',
- ' "p1": "v3",',
- ' "p2": false',
- '}'
- ].join('\n'),
- schemas: [
- {
- uri: 'http://custom/schema.json',
- schema: {
- type: 'object',
- properties: {
- type: {
- enum: ['button', 'textbox']
- }
- }
- }
- }
- ]
- }
- },
- {
- name: 'javascript.js',
- type: FileNodeType.file,
- code: {
- language: 'javascript',
- uri: 'main.js',
- dependencies: ['@types/node'],
- value: [
- '// JavaScript Example',
- `import * as fs from 'fs';`,
- '',
- 'class Person {',
- ' greet() {',
- ` console.log('hello there');`,
- ` fs.mkdir('folder');`,
- ' }',
- '}'
- ].join('\n')
- }
- },
- {
- name: 'typescript.ts',
- type: FileNodeType.file,
- code: {
- language: 'typescript',
- uri: 'main.ts',
- dependencies: [
- '@types/node',
- '@ngstack/translate',
- '@ngstack/code-editor'
- ],
- value: [
- '// TypeScript Example',
- `import { TranslateModule, TranslateService } from '@ngstack/translate';`,
- `import { CodeEditorModule } from '@ngstack/code-editor';`,
- `import * as fs from 'fs';`,
- '',
- 'export class MyClass {',
- ' constructor(translate: TranslateService) {',
- ' ',
- ' }',
- '}'
- ].join('\n')
- }
- },
- {
- name: 'component.style.css',
- type: FileNodeType.file,
- code: {
- language: 'css',
- uri: 'component.style.css',
- value: [
- 'html {',
- ' background-color: #e2e2e2;',
- ' margin: 0;',
- ' padding: 0;',
- '}',
- '',
- 'body {',
- ' background-color: #fff;',
- ' border-top: solid 10px #000;',
- ' color: #333;',
- ' font-size: .85em;',
- ' font-family: "Segoe UI","HelveticaNeue-Light", sans-serif;',
- ' margin: 0;',
- ' padding: 0;',
- '}'
- ].join('\n')
- }
- }
- ]
+ name: 'schema.sql',
+ type: FileNodeType.file,
+ code: {
+ language: 'sql',
+ uri: 'schema.sql',
+ value: [
+ 'CREATE TABLE dbo.EmployeePhoto (',
+ ' EmployeeId INT NOT NULL PRIMARY KEY,',
+ ' Photo VARBINARY(MAX) FILESTREAM NULL,',
+ ' MyRowGuidColumn UNIQUEIDENTIFIER NOT NULL ROWGUIDCOL UNIQUE DEFAULT NEWID()',
+ ');'
+ ].join('\n')
+ }
},
{
- name: 'Applications',
- type: FileNodeType.folder,
- children: [
- {
- name: 'Calendar',
- type: FileNodeType.file
- },
- {
- name: 'Chrome',
- type: FileNodeType.file
- },
- {
- name: 'Webstorm',
- type: FileNodeType.file
- }
- ]
+ name: 'component.style.css',
+ type: FileNodeType.file,
+ code: {
+ language: 'css',
+ uri: 'component.style.css',
+ value: [
+ 'html {',
+ ' background-color: #e2e2e2;',
+ ' margin: 0;',
+ ' padding: 0;',
+ '}',
+ '',
+ 'body {',
+ ' background-color: #fff;',
+ ' border-top: solid 10px #000;',
+ ' color: #333;',
+ ' font-size: .85em;',
+ ' font-family: "Segoe UI","HelveticaNeue-Light", sans-serif;',
+ ' margin: 0;',
+ ' padding: 0;',
+ '}'
+ ].join('\n')
+ }
},
{
- name: 'Documents',
- type: FileNodeType.folder,
- children: [
- {
- name: 'angular',
- type: FileNodeType.folder,
- children: [
- {
- name: 'src',
- type: FileNodeType.folder,
- children: [
- {
- name: 'compiler.ts',
- type: FileNodeType.file
- },
- {
- name: 'core.ts',
- type: FileNodeType.file
+ name: 'json.json',
+ type: FileNodeType.file,
+ code: {
+ language: 'json',
+ uri: 'main.json',
+ value: [
+ '{',
+ ' "$schema": "http://custom/schema.json",',
+ ' "type": "button"',
+ '}'
+ ].join('\n'),
+ schemas: [
+ {
+ uri: 'http://custom/schema.json',
+ schema: {
+ type: 'object',
+ properties: {
+ type: {
+ enum: ['button', 'textbox']
}
- ]
- }
- ]
- },
- {
- name: 'material2',
- type: FileNodeType.folder,
- children: [
- {
- name: 'src',
- type: FileNodeType.folder,
- children: [
- {
- name: 'button.ts',
- type: FileNodeType.file
- },
- {
- name: 'checkbox.ts',
- type: FileNodeType.file
- },
- {
- name: 'input.ts',
- type: FileNodeType.file
- }
- ]
+ }
}
- ]
- }
- ]
+ }
+ ]
+ }
},
{
- name: 'Downloads',
- type: FileNodeType.folder,
- children: [
- {
- name: 'October.pdf',
- type: FileNodeType.file
- },
- {
- name: 'November.pdf',
- type: FileNodeType.file
- },
- {
- name: 'Tutorial.html',
- type: FileNodeType.file
- }
- ]
+ name: 'javascript.js',
+ type: FileNodeType.file,
+ code: {
+ language: 'javascript',
+ uri: 'main.js',
+ dependencies: [/*'@types/node'*/],
+ value: [
+ '// JavaScript Example',
+ `import * as fs from 'fs';`,
+ '',
+ 'class Person {',
+ ' greet() {',
+ ` console.log('hello there');`,
+ ` fs.mkdir('folder');`,
+ ' }',
+ '}'
+ ].join('\n')
+ }
},
{
- name: 'Pictures',
- type: FileNodeType.folder,
- children: [
- {
- name: 'Photo Booth Library',
- type: FileNodeType.folder,
- children: [
- {
- name: 'Contents',
- type: FileNodeType.folder
- },
- {
- name: 'Pictures',
- type: FileNodeType.folder
- }
- ]
- },
- {
- name: 'Sun.png',
- type: FileNodeType.file
- },
- {
- name: 'Woods.png',
- type: FileNodeType.file
- }
- ]
+ name: 'typescript.ts',
+ type: FileNodeType.file,
+ code: {
+ language: 'typescript',
+ uri: 'main.ts',
+ dependencies: [
+ // '@types/node',
+ // '@ngstack/translate',
+ // '@ngstack/code-editor'
+ ],
+ value: [
+ '// TypeScript Example',
+ `import { TranslateModule, TranslateService } from '@ngstack/translate';`,
+ `import { CodeEditorModule } from '@ngstack/code-editor';`,
+ `import * as fs from 'fs';`,
+ '',
+ 'export class MyClass {',
+ ' constructor(translate: TranslateService) {',
+ ' ',
+ ' }',
+ '}'
+ ].join('\n')
+ }
}
];
@@ -236,9 +130,7 @@ export class FileDatabase {
}
initialize() {
- const data = FILES_DATA;
-
// Notify the change.
- this.dataChange.next(data);
+ this.dataChange.next(FILES_DATA);
}
}
diff --git a/src/app/code-editor-demo/file-node.ts b/src/app/code-editor-demo/file-node.ts
index 62fc2ec9..4f11e037 100644
--- a/src/app/code-editor-demo/file-node.ts
+++ b/src/app/code-editor-demo/file-node.ts
@@ -1,8 +1,8 @@
-import { CodeModel } from '@ngstack/code-editor/public_api';
+import { CodeModel } from '@ngstack/code-editor';
export enum FileNodeType {
file = 'file',
- folder = 'folder'
+ folder = 'folder',
}
export class FileNode {
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
deleted file mode 100644
index 7796755e..00000000
--- a/src/app/material.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-// import { MatSelectModule } from '@angular/material/select';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTreeModule } from '@angular/material/tree';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-
-export function modules() {
- return [
- MatButtonModule,
- // MatSelectModule,
- MatToolbarModule,
- MatIconModule,
- MatMenuModule,
- MatTreeModule,
- MatProgressBarModule,
- ];
-}
-
-@NgModule({
- imports: modules(),
- exports: modules(),
-})
-export class MaterialModule {}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
deleted file mode 100644
index 3612073b..00000000
--- a/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true
-};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
deleted file mode 100644
index 72cd6397..00000000
--- a/src/environments/environment.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- production: false
-};
-
-/*
- * In development mode, to ignore zone related error stack frames such as
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
- * import the following file, but please comment it out in production mode
- * because it will have performance impact when throw error
- */
-// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/src/karma.conf.js b/src/karma.conf.js
deleted file mode 100644
index 2a9f4f29..00000000
--- a/src/karma.conf.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
- config.set({
- basePath: '',
- frameworks: ['jasmine', '@angular-devkit/build-angular'],
- plugins: [
- require('karma-jasmine'),
- require('karma-chrome-launcher'),
- require('karma-jasmine-html-reporter'),
- require('karma-coverage-istanbul-reporter'),
- require('@angular-devkit/build-angular/plugins/karma'),
- ],
- client: {
- clearContext: false, // leave Jasmine Spec Runner output visible in browser
- },
- coverageIstanbulReporter: {
- dir: require('path').join(__dirname, '../coverage'),
- reports: ['html', 'lcovonly'],
- fixWebpackSourcePaths: true,
- },
- reporters: ['progress', 'kjhtml'],
- port: 9876,
- colors: true,
- logLevel: config.LOG_INFO,
- autoWatch: true,
- browsers: ['Chrome'],
- singleRun: true,
- });
-};
diff --git a/src/main.ts b/src/main.ts
index 91ec6da5..17447a5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,5 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.log(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
deleted file mode 100644
index fd0b9b43..00000000
--- a/src/polyfills.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-// import 'core-js/es7/reflect';
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- */
-
-// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
-// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
-// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
-/*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
diff --git a/src/test.ts b/src/test.ts
deleted file mode 100644
index ae25f27c..00000000
--- a/src/test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(), {
- teardown: { destroyAfterEach: false }
-}
-);
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index f3a1b801..43b21ffd 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -5,8 +5,7 @@
"types": []
},
"files": [
- "main.ts",
- "polyfills.ts"
+ "main.ts"
],
"include": [
"src/**/*.d.ts"
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
index de773363..1a837a8d 100644
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -3,14 +3,9 @@
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
- "jasmine",
- "node"
+ "jasmine"
]
},
- "files": [
- "test.ts",
- "polyfills.ts"
- ],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
diff --git a/src/tslint.json b/src/tslint.json
deleted file mode 100644
index 52e2c1a5..00000000
--- a/src/tslint.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "extends": "../tslint.json",
- "rules": {
- "directive-selector": [
- true,
- "attribute",
- "app",
- "camelCase"
- ],
- "component-selector": [
- true,
- "element",
- "app",
- "kebab-case"
- ]
- }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 5e1e09fc..7a8484e0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,40 @@
{
"compileOnSave": false,
"compilerOptions": {
- "baseUrl": "./",
- "module": "es2020",
"outDir": "./dist/out-tsc",
+ "strict": false,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "baseUrl": "./",
+ "module": "ES2022",
"sourceMap": true,
"declaration": false,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"experimentalDecorators": true,
"target": "ES2022",
"typeRoots": [
"node_modules/@types"
],
"lib": [
- "es2017",
+ "ES2022",
"dom"
],
"paths": {
- "@ngstack/*": [
- "dist/@ngstack/*"
+ "@ngstack/code-editor": [
+ "projects/code-editor/src/public_api.ts"
]
},
"useDefineForClassFields": false
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
}
}
-
-
-
-
-
-
-
-
+
+ Example
+
+ @for (file of files; track file) {
+ {{file.name}}
+ }
+
+
+
-
-
-
-
-
-
-
- description
- {{node.name}}
-
-
-
-
-
-
- {{ nestedTreeControl.isExpanded(node) ? 'folder_open' : 'folder' }}
-
- {{node.name}}
-
- -
-
-
-
-
-
-
-
-
-
+
+
diff --git a/src/app/code-editor-demo/code-editor-demo.component.scss b/src/app/code-editor-demo/code-editor-demo.component.scss
index e0fb8a73..8cdb0ed0 100644
--- a/src/app/code-editor-demo/code-editor-demo.component.scss
+++ b/src/app/code-editor-demo/code-editor-demo.component.scss
@@ -1,3 +1,25 @@
+.demo-layout-root {
+ height: 100%;
+ min-height: 100%;
+ min-width: 100%;
+ width: 100%;
+ flex-direction: column;
+ box-sizing: border-box;
+ display: flex;
+}
+
+.page-layout {
+ flex-direction: row;
+ box-sizing: border-box;
+ display: flex;
+ flex: 1 1 1e-9px;
+}
+
+.page-layout-content {
+ flex: 1 1 100%;
+ box-sizing: border-box;
+}
+
.ngs-code-editor {
display: flex;
flex-direction: column;
@@ -31,7 +53,8 @@
&-invisible {
display: none;
}
- ul, li {
+ ul,
+ li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
diff --git a/src/app/code-editor-demo/code-editor-demo.component.spec.ts b/src/app/code-editor-demo/code-editor-demo.component.spec.ts
index 5d5ac51a..1e2e5ae6 100644
--- a/src/app/code-editor-demo/code-editor-demo.component.spec.ts
+++ b/src/app/code-editor-demo/code-editor-demo.component.spec.ts
@@ -1,9 +1,8 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { CodeEditorDemoComponent } from './code-editor-demo.component';
-import { CodeEditorModule } from '@ngstack/code-editor';
+import { provideCodeEditor } from '@ngstack/code-editor';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MaterialModule } from '../material.module';
describe('CodeEditorDemoComponent', () => {
let component: CodeEditorDemoComponent;
@@ -11,12 +10,8 @@ describe('CodeEditorDemoComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- imports: [
- BrowserAnimationsModule,
- MaterialModule,
- CodeEditorModule.forRoot()
- ],
- declarations: [CodeEditorDemoComponent]
+ imports: [BrowserAnimationsModule, CodeEditorDemoComponent],
+ providers: [provideCodeEditor()]
}).compileComponents();
}));
diff --git a/src/app/code-editor-demo/code-editor-demo.component.ts b/src/app/code-editor-demo/code-editor-demo.component.ts
index 985faa80..5728efb9 100644
--- a/src/app/code-editor-demo/code-editor-demo.component.ts
+++ b/src/app/code-editor-demo/code-editor-demo.component.ts
@@ -1,33 +1,47 @@
-import { NestedTreeControl } from '@angular/cdk/tree';
-import {
- Component,
- ElementRef,
- OnInit,
- ViewChild,
- ViewEncapsulation,
-} from '@angular/core';
-import { MatTreeNestedDataSource } from '@angular/material/tree';
-import { CodeEditorService, CodeModel } from '@ngstack/code-editor';
+import { Component, HostBinding, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { CodeEditorComponent, CodeEditorService, CodeModel, CodeModelChangedEvent } from '@ngstack/code-editor';
import { Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { FileDatabase } from './file-database';
-import { FileNode, FileNodeType } from './file-node';
+import { FileNode } from './file-node';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { editor } from 'monaco-editor';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectChange } from '@angular/material/select';
@Component({
+ standalone: true,
+ imports: [
+ NgIf,
+ NgFor,
+ AsyncPipe,
+ MatButtonModule,
+ MatToolbarModule,
+ MatMenuModule,
+ MatIconModule,
+ MatProgressBarModule,
+ MatFormField,
+ MatSelect,
+ MatOption,
+ MatLabel,
+ CodeEditorComponent
+ ],
selector: 'app-code-editor-demo',
templateUrl: './code-editor-demo.component.html',
styleUrls: ['./code-editor-demo.component.scss'],
encapsulation: ViewEncapsulation.None,
- providers: [FileDatabase],
+ providers: [FileDatabase]
})
export class CodeEditorDemoComponent implements OnInit {
- nestedTreeControl: NestedTreeControl
+
+
+
+