Added ability to set monaco editor path

leolorenzoluis · Aug 15, 2017 · 5b2766e · 5b2766e
1 parent 82c506a
commit 5b2766e
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,50 @@ An easy to use Monaco Editor Loader Service for Angular 2 and 4! Just add `*load
 
 ```
 <div *loadMonacoEditor id="container"></div> 
+
+```
+
+With custom monaco-editor path
+```
+<div *loadMonacoEditor="'libs/monaco-editor/vs'" id="container"></div> 
+
+```
+
+# Prerequisites
+
+- Make sure that you are serving `Monaco Editor` in `/assets/monaco-editor/vs`
+## Using webpack
+- If you are using `Webpack` do the following:
+```
+plugins: [
+     new CopyWebpackPlugin([
+         {
+             from: 'node_modules/monaco-editor/min/vs',
+             to: './src/assets/monaco',
+         }
+     ]),
+ ],
+ ```
+ ## Using Angular CLI
+ - Modify `.angular-cli.json` to the following:
+ ```
+ "assets": [
+        {
+          "glob": "**/*",
+          "input": "../node_modules/monaco-editor/min/",
+          "output": "./assets/monaco-editor/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/monaco-editor/min-maps/",
+          "output": "./assets/min-maps/"
+        },
+        {
+          "glob": "favicon.ico",
+          "input": "./",
+          "output": "./"
+        }
+      ]
 ```
 
 # Usage

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -4,4 +4,4 @@ <h1>
   Welcome to {{title}}!
 </h1>
 
-<monaco-editor *loadMonacoEditor></monaco-editor>
+<monaco-editor *loadMonacoEditor="'pekpek/blah'"></monaco-editor>
diff --git a/lib/monaco-editor-loader/monaco-editor-loader.directive.ts b/lib/monaco-editor-loader/monaco-editor-loader.directive.ts
@@ -1,42 +1,22 @@
 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
 import { MonacoEditorLoaderService } from './monaco-editor-loader.service';
 
-/**
- * Removes or recreates a portion of the DOM tree based on an {expression}.
- *
- * If the expression assigned to `ng-if` evaluates to a false value then the element
- * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
- *
- * # Example:
- *
- * ```
- * <div *ng-if="errorCount > 0" class="error">
- *   <!-- Error message displayed when the errorCount property on the current context is greater
- * than 0. -->
- *   {{errorCount}} errors detected
- * </div>
- * ```
- *
- * # Syntax
- *
- * - `<div *ng-if="condition">...</div>`
- * - `<div template="ng-if condition">...</div>`
- * - `<template [ng-if]="condition"><div>...</div></template>`
- *
- * @exportedAs angular2/directives
- */
 @Directive({ selector: '[loadMonacoEditor]' })
 export class MonacoEditorLoaderDirective {
+    @Input() set loadMonacoEditor(value) {
+        this.monacoEditorLoaderService.monacoPath = value;
+    }
+
     constructor(
         private templateRef: TemplateRef<any>,
         private viewContainer: ViewContainerRef,
         private monacoEditorLoaderService: MonacoEditorLoaderService) {
         monacoEditorLoaderService.isMonacoLoaded.subscribe(isLoaded => {
             if (isLoaded) {
-                this.viewContainer.clear();
+                this.viewContainer.createEmbeddedView(this.templateRef);
             }
             else {
-                this.viewContainer.createEmbeddedView(this.templateRef);
+                this.viewContainer.clear();
             }
         });
     }

diff --git a/lib/monaco-editor-loader/monaco-editor-loader.service.ts b/lib/monaco-editor-loader/monaco-editor-loader.service.ts
@@ -4,11 +4,18 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 @Injectable()
 export class MonacoEditorLoaderService {
     isMonacoLoaded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    private _monacoPath = 'assets/monaco-editor/vs';
+    set monacoPath(value) {
+        if (value) {
+            this._monacoPath = value;
+        }
+    }
 
     constructor(ngZone: NgZone) {
         var onGotAmdLoader = () => {
             // Load monaco
-            (<any>window).require.config({ paths: { 'vs': 'assets/monaco-editor/vs' } });
+            console.log(this._monacoPath);
+            (<any>window).require.config({ paths: { 'vs': this._monacoPath } });
             (<any>window).require(['vs/editor/editor.main'], () => {
                 ngZone.run(() => this.isMonacoLoaded.next(true));
             });
@@ -18,7 +25,7 @@ export class MonacoEditorLoaderService {
         if (!(<any>window).require) {
             var loaderScript = document.createElement('script');
             loaderScript.type = 'text/javascript';
-            loaderScript.src = 'assets/monaco-editor/vs/loader.js';
+            loaderScript.src = `${this._monacoPath}/loader.js`;
             loaderScript.addEventListener('load', onGotAmdLoader);
             document.body.appendChild(loaderScript);
         } else {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abc.xyz/angular-monaco-editor-loader",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An awesome angular 2/4 monaco editor loader.",
   "main": "bundles/xyz-dropdown-treeview.umd.js",
   "module": "index.js",