-
@@ -100,8 +39,7 @@
(valueChanged)="onCodeChanged($event)"
(loaded)="onEditorLoaded($event)"
(codeModelChanged)="onCodeModelChanged($event)"
- >
-
+ />
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 6d3003b2..8cdb0ed0 100644
--- a/src/app/code-editor-demo/code-editor-demo.component.scss
+++ b/src/app/code-editor-demo/code-editor-demo.component.scss
@@ -15,16 +15,9 @@
flex: 1 1 1e-9px;
}
-.page-layout-sidebar {
- flex: 1 1 100%;
- box-sizing: border-box;
- max-width: 20%;
-}
-
.page-layout-content {
flex: 1 1 100%;
box-sizing: border-box;
- max-width: 80%;
}
.ngs-code-editor {
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 37a602d8..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,23 +1,9 @@
-import { NestedTreeControl } from '@angular/cdk/tree';
-import {
- Component,
- HostBinding,
- OnInit,
- ViewChild,
- ViewEncapsulation
-} from '@angular/core';
-import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
-import {
- CodeEditorComponent,
- CodeEditorModule,
- CodeEditorService,
- CodeModel,
- CodeModelChangedEvent
-} 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';
@@ -25,6 +11,8 @@ 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,
@@ -37,8 +25,11 @@ import { editor } from 'monaco-editor';
MatMenuModule,
MatIconModule,
MatProgressBarModule,
- MatTreeModule,
- CodeEditorModule
+ MatFormField,
+ MatSelect,
+ MatOption,
+ MatLabel,
+ CodeEditorComponent
],
selector: 'app-code-editor-demo',
templateUrl: './code-editor-demo.component.html',
@@ -47,9 +38,6 @@ import { editor } from 'monaco-editor';
providers: [FileDatabase]
})
export class CodeEditorDemoComponent implements OnInit {
- nestedTreeControl: NestedTreeControl