mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-11-04 13:52:55 +00:00
Code Issues Releases Wiki Activity

Replace ACE with monaco – with lots of UI issues

Browse Source
This commit is contained in:
Kristóf Tóth
2018-06-05 01:12:24 +02:00
parent 309ffca9e7
commit 0fbaf2275e
6 changed files with 275 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@@ -6,7 +6,6 @@ import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AceEditorModule } from 'ng2-ace-editor';
import { AppComponent } from './app.component';
@@ -28,6 +27,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio
import { SafePipe } from './pipes/safe.pipe';
import { ConsoleComponent } from './console/console.component';
import { ProcessLogService } from './services/processlog.service';
import { MonacoEditorModule } from 'ngx-monaco-editor';
@NgModule({
@@ -49,8 +49,8 @@ import { ProcessLogService } from './services/processlog.service';
FormsModule,
HttpClientModule,
NgbModule.forRoot(),
AceEditorModule,
AppRoutingModule,
MonacoEditorModule.forRoot()
],
providers: [
MarkdownService,

10
src/app/ide/ide.component.html
View File

@@ -37,11 +37,17 @@
</div>
</div>
<div (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
<!--div (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
ace-editor
[(text)]="code"
[mode]="language"
[theme]="theme"
[options]="options"
class="tfw-ace-editor">
</div>
</div-->
<ngx-monaco-editor [(ngModel)]="code"
class="tfw-ace-editor"
(keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
[options]="editorOptions"
></ngx-monaco-editor>

20
src/app/ide/ide.component.ts
View File

@@ -3,20 +3,6 @@
import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
import * as brace from 'brace';
import 'brace/ext/modelist';
import 'brace/ext/language_tools';
import 'brace/mode/c_cpp';
import 'brace/mode/csharp';
import 'brace/mode/java';
import 'brace/mode/typescript';
import 'brace/mode/javascript';
import 'brace/mode/json';
import 'brace/mode/python';
import 'brace/mode/sql';
import 'brace/theme/cobalt';
import { IDECommand } from '../message-types/ide-command';
import { WebSocketService } from '../services/websocket.service';
import { ProcessManagerService } from '../services/processmanager.service';
@@ -24,9 +10,6 @@ import { DeploymentNotificationService } from '../services/deployment-notificati
import { config } from '../config';
import { CommandMessage } from '../message-types/command-message';
const modelist = brace.acequire('ace/ext/modelist');
const langTools = brace.acequire('ace/ext/language_tools');
enum DeployButtonState {
DEPLOYED,
@@ -63,7 +46,7 @@ export class IdeComponent implements OnInit {
autosave = null;
language: string = config.ide.defaultLanguage;
theme = 'cobalt';
editorOptions = {theme: 'vs-dark', language: 'python'};
@Output() newLogs = new EventEmitter<any>();
@@ -125,7 +108,6 @@ export class IdeComponent implements OnInit {
this.filename = data.filename;
this.directory = data.directory;
this.code = (data.content != null) ? data.content : this.code;
this.language = modelist.getModeForPath(this.filename).name;
this.files = data.files;
}