From 3a9f8aab316dd5729a4cb4c463ecd2864442ad68 Mon Sep 17 00:00:00 2001 From: yowari Date: Tue, 12 Jun 2018 19:40:37 +0200 Subject: [PATCH 1/3] extract MonacoService from BaseEditor class --- src/platform/editor/base-editor.ts | 44 +++-------------- src/platform/editor/diff-editor.component.ts | 5 +- src/platform/editor/editor.component.ts | 5 +- src/platform/editor/editor.module.ts | 4 ++ src/platform/editor/monaco.service.ts | 52 ++++++++++++++++++++ 5 files changed, 68 insertions(+), 42 deletions(-) create mode 100644 src/platform/editor/monaco.service.ts diff --git a/src/platform/editor/base-editor.ts b/src/platform/editor/base-editor.ts index 6c56aff..34278ef 100644 --- a/src/platform/editor/base-editor.ts +++ b/src/platform/editor/base-editor.ts @@ -1,6 +1,7 @@ import { AfterViewInit, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core'; import { Subscription } from 'rxjs'; import { NgxMonacoEditorConfig } from './config'; +import { MonacoService } from './monaco.service'; let loadedMonaco: boolean = false; let loadPromise: Promise; @@ -26,46 +27,13 @@ export abstract class BaseEditor implements AfterViewInit, OnDestroy { return this._options; } - constructor(private config: NgxMonacoEditorConfig) {} + constructor(private monacoService: MonacoService, private config: NgxMonacoEditorConfig) {} ngAfterViewInit(): void { - if (loadedMonaco) { - // Wait until monaco editor is available - loadPromise.then(() => { - this.initMonaco(this.options); - }); - } else { - loadedMonaco = true; - loadPromise = new Promise((resolve: any) => { - const baseUrl = this.config.baseUrl || '/assets'; - if (typeof((window).monaco) === 'object') { - resolve(); - return; - } - const onGotAmdLoader: any = () => { - // Load monaco - (window).require.config({ paths: { 'vs': `${baseUrl}/monaco/vs` } }); - (window).require(['vs/editor/editor.main'], () => { - if (typeof this.config.onMonacoLoad === 'function') { - this.config.onMonacoLoad(); - } - this.initMonaco(this.options); - resolve(); - }); - }; - - // Load AMD loader if necessary - if (!(window).require) { - const loaderScript: HTMLScriptElement = document.createElement('script'); - loaderScript.type = 'text/javascript'; - loaderScript.src = `${baseUrl}/monaco/vs/loader.js`; - loaderScript.addEventListener('load', onGotAmdLoader); - document.body.appendChild(loaderScript); - } else { - onGotAmdLoader(); - } - }); - } + // Wait until monaco editor is available + this.monacoService.loadMonaco().then(() => { + this.initMonaco(this.options); + }); } protected abstract initMonaco(options: any): void; diff --git a/src/platform/editor/diff-editor.component.ts b/src/platform/editor/diff-editor.component.ts index 49d015b..37cd4c1 100755 --- a/src/platform/editor/diff-editor.component.ts +++ b/src/platform/editor/diff-editor.component.ts @@ -5,6 +5,7 @@ import { BaseEditor } from './base-editor'; import { NGX_MONACO_EDITOR_CONFIG, NgxMonacoEditorConfig } from './config'; import { DiffEditorModel } from './types'; import { fromEvent } from 'rxjs'; +import { MonacoService } from './monaco.service'; @Component({ selector: 'ngx-monaco-diff-editor', @@ -44,8 +45,8 @@ export class DiffEditorComponent extends BaseEditor { } } - constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) { - super(editorConfig); + constructor(monacoService: MonacoService, @Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) { + super(monacoService, editorConfig); } protected initMonaco(options: any): void { diff --git a/src/platform/editor/editor.component.ts b/src/platform/editor/editor.component.ts index f3f5466..6ba41ad 100755 --- a/src/platform/editor/editor.component.ts +++ b/src/platform/editor/editor.component.ts @@ -6,6 +6,7 @@ import { BaseEditor } from './base-editor'; import { NGX_MONACO_EDITOR_CONFIG, NgxMonacoEditorConfig } from './config'; import { NgxEditorModel } from './types'; import { fromEvent } from 'rxjs'; +import { MonacoService } from './monaco.service'; @Component({ selector: 'ngx-monaco-editor', @@ -42,8 +43,8 @@ export class EditorComponent extends BaseEditor implements ControlValueAccessor } } - constructor(private zone: NgZone, @Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) { - super(editorConfig); + constructor(monacoService: MonacoService, private zone: NgZone, @Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) { + super(monacoService, editorConfig); } writeValue(value: any): void { diff --git a/src/platform/editor/editor.module.ts b/src/platform/editor/editor.module.ts index 516ade4..50acb1d 100755 --- a/src/platform/editor/editor.module.ts +++ b/src/platform/editor/editor.module.ts @@ -1,3 +1,4 @@ +import { MonacoService } from './monaco.service'; import { CommonModule } from '@angular/common'; import { ModuleWithProviders, NgModule } from '@angular/core'; @@ -16,6 +17,9 @@ import { EditorComponent } from './editor.component'; exports: [ EditorComponent, DiffEditorComponent + ], + providers: [ + MonacoService ] }) export class MonacoEditorModule { diff --git a/src/platform/editor/monaco.service.ts b/src/platform/editor/monaco.service.ts new file mode 100644 index 0000000..718466c --- /dev/null +++ b/src/platform/editor/monaco.service.ts @@ -0,0 +1,52 @@ +import { Injectable, Inject } from "@angular/core"; +import { NgxMonacoEditorConfig, NGX_MONACO_EDITOR_CONFIG } from './config'; + +let loadedMonaco: boolean = false; +let loadPromise: Promise; +declare const require: any; + +@Injectable() +export class MonacoService { + + private baseHref: string; + + constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private config: NgxMonacoEditorConfig) { + } + + loadMonaco(): Promise { + if (!loadedMonaco) { + loadedMonaco = true; + loadPromise = new Promise((resolve: any) => { + const baseUrl = this.config.baseUrl || '/assets'; + if (typeof((window).monaco) === 'object') { + resolve(); + return; + } + const onGotAmdLoader: any = () => { + // Load monaco + (window).require.config({ paths: { 'vs': `${baseUrl}/monaco/vs` } }); + (window).require(['vs/editor/editor.main'], () => { + if (typeof this.config.onMonacoLoad === 'function') { + this.config.onMonacoLoad(); + } + resolve(); + }); + }; + + // Load AMD loader if necessary + if (!(window).require) { + const loaderScript: HTMLScriptElement = document.createElement('script'); + loaderScript.type = 'text/javascript'; + loaderScript.src = `${baseUrl}/monaco/vs/loader.js`; + loaderScript.addEventListener('load', onGotAmdLoader); + document.body.appendChild(loaderScript); + } else { + onGotAmdLoader(); + } + }); + } + + return loadPromise; + } + +} From 4cfeb430965f2c3bf5cec7c3bb90601e7faa4fb0 Mon Sep 17 00:00:00 2001 From: yowari Date: Tue, 12 Jun 2018 19:46:39 +0200 Subject: [PATCH 2/3] prepend baseUrl with base-href when no baseUrl config provided --- src/platform/editor/monaco.service.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/platform/editor/monaco.service.ts b/src/platform/editor/monaco.service.ts index 718466c..0f2a318 100644 --- a/src/platform/editor/monaco.service.ts +++ b/src/platform/editor/monaco.service.ts @@ -1,4 +1,5 @@ import { Injectable, Inject } from "@angular/core"; +import { PlatformLocation, Location } from "@angular/common"; import { NgxMonacoEditorConfig, NGX_MONACO_EDITOR_CONFIG } from './config'; let loadedMonaco: boolean = false; @@ -10,14 +11,15 @@ export class MonacoService { private baseHref: string; - constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private config: NgxMonacoEditorConfig) { + constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private config: NgxMonacoEditorConfig, platformLocation: PlatformLocation) { + this.baseHref = platformLocation.getBaseHrefFromDOM(); } loadMonaco(): Promise { if (!loadedMonaco) { loadedMonaco = true; loadPromise = new Promise((resolve: any) => { - const baseUrl = this.config.baseUrl || '/assets'; + const baseUrl = this.config.baseUrl || Location.joinWithSlash(this.baseHref, '/assets'); if (typeof((window).monaco) === 'object') { resolve(); return; From 8add3620011822dc537119723213523e7abca7fe Mon Sep 17 00:00:00 2001 From: yowari Date: Tue, 12 Jun 2018 19:50:07 +0200 Subject: [PATCH 3/3] remove moved variables --- src/platform/editor/base-editor.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/platform/editor/base-editor.ts b/src/platform/editor/base-editor.ts index 34278ef..1facd4c 100644 --- a/src/platform/editor/base-editor.ts +++ b/src/platform/editor/base-editor.ts @@ -3,10 +3,6 @@ import { Subscription } from 'rxjs'; import { NgxMonacoEditorConfig } from './config'; import { MonacoService } from './monaco.service'; -let loadedMonaco: boolean = false; -let loadPromise: Promise; -declare const require: any; - export abstract class BaseEditor implements AfterViewInit, OnDestroy { @ViewChild('editorContainer') _editorContainer: ElementRef; @Output() onInit = new EventEmitter();