From 503693aea6dcbcac255624d16c3fab2991a5fd64 Mon Sep 17 00:00:00 2001 From: Stefano Cappa Date: Tue, 24 Jul 2018 02:16:06 +0200 Subject: [PATCH] fix(): improve readme tutorial --- @ks89/ngx-codemirror/.gitignore | 7 + @ks89/ngx-codemirror/.npmignore | 1 + @ks89/ngx-codemirror/LICENSE | 22 ++ @ks89/ngx-codemirror/README.md | 141 +++++++++++ @ks89/ngx-codemirror/package-lock.json | 220 ++++++++++++++++++ @ks89/ngx-codemirror/package.json | 57 +++++ .../src/codemirror.component.ts | 127 ++++++++++ @ks89/ngx-codemirror/src/codemirror.module.ts | 21 ++ @ks89/ngx-codemirror/src/index.ts | 2 + @ks89/ngx-codemirror/tsconfig-aot.json | 28 +++ @ks89/ngx-codemirror/tsconfig.json | 23 ++ @ks89/ngx-codemirror/tslint.json | 57 +++++ @ks89/ngx-codemirror/yarn.lock | 118 ++++++++++ README.md | 64 +++-- package-lock.json | 2 +- package.json | 2 +- 16 files changed, 875 insertions(+), 17 deletions(-) create mode 100644 @ks89/ngx-codemirror/.gitignore create mode 100644 @ks89/ngx-codemirror/.npmignore create mode 100644 @ks89/ngx-codemirror/LICENSE create mode 100644 @ks89/ngx-codemirror/README.md create mode 100644 @ks89/ngx-codemirror/package-lock.json create mode 100644 @ks89/ngx-codemirror/package.json create mode 100644 @ks89/ngx-codemirror/src/codemirror.component.ts create mode 100644 @ks89/ngx-codemirror/src/codemirror.module.ts create mode 100644 @ks89/ngx-codemirror/src/index.ts create mode 100644 @ks89/ngx-codemirror/tsconfig-aot.json create mode 100644 @ks89/ngx-codemirror/tsconfig.json create mode 100644 @ks89/ngx-codemirror/tslint.json create mode 100644 @ks89/ngx-codemirror/yarn.lock diff --git a/@ks89/ngx-codemirror/.gitignore b/@ks89/ngx-codemirror/.gitignore new file mode 100644 index 0000000..bba7fe5 --- /dev/null +++ b/@ks89/ngx-codemirror/.gitignore @@ -0,0 +1,7 @@ +node_modules/* +*.iml +.idea +aot/* +lib/* +npm-debug.log +.DS_Store \ No newline at end of file diff --git a/@ks89/ngx-codemirror/.npmignore b/@ks89/ngx-codemirror/.npmignore new file mode 100644 index 0000000..c496702 --- /dev/null +++ b/@ks89/ngx-codemirror/.npmignore @@ -0,0 +1 @@ +aot/* diff --git a/@ks89/ngx-codemirror/LICENSE b/@ks89/ngx-codemirror/LICENSE new file mode 100644 index 0000000..7feeefc --- /dev/null +++ b/@ks89/ngx-codemirror/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2018 Stefano Cappa (Ks89) +Copyright (c) 2016 Simon Babay + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/@ks89/ngx-codemirror/README.md b/@ks89/ngx-codemirror/README.md new file mode 100644 index 0000000..bb41d4e --- /dev/null +++ b/@ks89/ngx-codemirror/README.md @@ -0,0 +1,141 @@ +# @ks89/ngx-codemirror + +**Fork of the official [ng2-codemirror](https://github.com/chymz/ng2-codemirror) library with angular-universal / Server side rendering support.** + +

+ +**Tested only with Angular 6.x.x and angular-cli 6.x.x** + + +## Installation + +`npm i --save @ks89/ngx-codemirror@latest codemirror` + +## Configuration + +1. Install `npm i --save-dev @types/node` +2. Modify your tsconfig.app.json adding this: + + ``` + "compilerOptions": { + "types": [ + "node" + ] + } + ``` + +3. Add this in your main tsconfig.json (if already not available): + + ``` + "compilerOptions": { + "typeRoots": [ + "node_modules/@types" + ] + } + ``` + +4. Import language in main.ts + + ``` + import 'codemirror/mode/htmlmixed/htmlmixed'; + import 'codemirror/mode/javascript/javascript'; + ``` + +5. Add `"node_modules/codemirror/lib/codemirror.js"` in all scripts arrays of yout angular.json file + + ``` + ... + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + ... + "scripts": [ + "node_modules/codemirror/lib/codemirror.js" + ], + ... + } + } + }, + ... + "test": { + ... + "scripts": [ + "node_modules/codemirror/lib/codemirror.js" + ], + ... + } + + ``` + +

+ +## Contributions + +To build this project run `tsc` in the root folder. + +

+ +Use the [CodeMirror (5.x)](http://codemirror.net/) code editor in your Angular application. + +**Demo** : https://embed.plnkr.co/8e9gxss9u10VeFrv29Zt/ + +### Installation + +- Include Codemirror javascript files in your application (with files for modes) +- Install ng2-codemirror + - JSPM : `jspm install npm:ng2-codemirror` + - NPM : `npm install ng2-codemirror` + +### Dependencies +CodeMirror library is required for this component : + - Install via NPM : `npm install codemirror` + - Install via JSPM : `jspm install npm:codemirror` + +CodeMirror need to be accessible by `import 'codemirror'` + +Then you need to include base CSS of codemirror located in `codemirror/lib/codemirror.css` + +### Sample + +Include `CodemirrorModule` in your main module : + +```javascript +import { CodemirrorModule } from 'ng2-codemirror'; + +@NgModule({ + // ... + imports: [ + CodemirrorModule + ], + // ... +}) +export class AppModule { } +``` + +```javascript +import { Component } from 'angular2/core'; + +@Component({ + selector: 'sample', + template: ` + + + ` +}) +export class Sample{ + constructor(){ + this.code = `// Some code...`; + } +} +``` + +### Configuration + +* `config` : The configuration object for CodeMirror see http://codemirror.net/doc/manual.html#config + +### Licence +See `LICENSE` file diff --git a/@ks89/ngx-codemirror/package-lock.json b/@ks89/ngx-codemirror/package-lock.json new file mode 100644 index 0000000..969ed9e --- /dev/null +++ b/@ks89/ngx-codemirror/package-lock.json @@ -0,0 +1,220 @@ +{ + "name": "@ks89/ngx-codemirror", + "version": "2.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@angular/animations": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.7.tgz", + "integrity": "sha512-clP1xZw3KCfdj5rGDies5L5iwLgXzVFQ/B66Yj9oc24mJyK9oZARmuXdHfu+y8YtlW2b3wNSK2JH3qygaxbNLA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/common": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.7.tgz", + "integrity": "sha512-5R0POjbT4CR+8vXS7P33SiozJpTEKDsHq07EMm90OCwoofU5DIKDLNyEqr362zsbpzGUTmhGbSiLZib5Qt4djA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/compiler": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.7.tgz", + "integrity": "sha512-aiRh86RqHMTgJ7xckQWzG2UTnq23+WuDVhYh/QL19R43areZLglqgtKSkfezg9aatO5CGzxDA3qL5WGhccQ5EQ==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/compiler-cli": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.7.tgz", + "integrity": "sha512-vzphs9galtMV29CW+ihp6v0HwSQrjAFqs04swqt9o0jEJET6/mPi1EFjJRNZiFn6ghh6lxUPr3vThy7CrSNxHg==", + "dev": true, + "requires": { + "@angular/tsc-wrapped": "4.4.7", + "minimist": "^1.2.0", + "reflect-metadata": "^0.1.2" + } + }, + "@angular/core": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.7.tgz", + "integrity": "sha512-Jxs6gNTl5KjXflg5vi5rlnokq1johFccN94qSOgDv+Mg1iuGF2i9p7EHkw3Y8jBCVaSLw1qgHE+wMb6KTlJDLA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/forms": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.7.tgz", + "integrity": "sha512-EXGutI4GNBptpwkCQdCTxWAlJll8aCV7m3cA1FHZgFP7VNSgYF0pD+PscM5jSeajG30cRjaKxgL4cqj6yMMtww==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/platform-browser": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.7.tgz", + "integrity": "sha512-5WGMhUbaepmNoE597N/6R4jDdSqe4wwJblfi6bOJI34QStmD6QRnmg3H7ujr8lLhRBo9P3zH+hn7bM3RxUIEJg==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/platform-server": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-4.4.7.tgz", + "integrity": "sha512-csBsh+JCDQPMyC09bLS1rrHzTyBeSgZatJXZ7v3Im+x0tAkD2Sp4PnAmeNL08Pcz6c3Q5jrCillGJRQT1PNRsQ==", + "dev": true, + "requires": { + "parse5": "^3.0.1", + "tslib": "^1.7.1", + "xhr2": "^0.1.4" + } + }, + "@angular/tsc-wrapped": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.7.tgz", + "integrity": "sha512-R9w7sTU+HSTMPOa4NgvPL753qB6aqnPc1AVh2rwSl5FOpLS/AeeyzIhRnBsVXGrZrTcBQVLp/Cxg1oUSXE2k4Q==", + "dev": true, + "requires": { + "tsickle": "^0.21.0" + } + }, + "@types/ckeditor": { + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/@types/ckeditor/-/ckeditor-0.0.33.tgz", + "integrity": "sha1-u1GVp8vbXcHVT5axa4WdIPsf2rc=", + "dev": true + }, + "@types/core-js": { + "version": "0.9.46", + "resolved": "https://registry.npmjs.org/@types/core-js/-/core-js-0.9.46.tgz", + "integrity": "sha512-LooLR6XHes9V+kNYRz1Qm8w3atw9QMn7XeZUmIpUelllF9BdryeUKd/u0Wh5ErcjpWfG39NrToU9MF7ngsTFVw==", + "dev": true + }, + "@types/node": { + "version": "6.0.114", + "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.114.tgz", + "integrity": "sha512-5ViC9dwf1VIAtrOFTvOuN04lJgw28eKjuy0Vg2Bd/fSlxKP2feCSkIw04ZgOENL2ywdWrtbkthp1XVLEjJmouw==", + "dev": true + }, + "codemirror": { + "version": "5.39.2", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.39.2.tgz", + "integrity": "sha512-mchBy0kQ1Wggi+e58SmoLgKO4nG7s/BqNg6/6TRbhsnXI/KRG+fKAvRQ1LLhZZ6ZtUoDQ0dl5aMhE+IkSRh60Q==" + }, + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + }, + "dependencies": { + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + } + } + }, + "parse5": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", + "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, + "reflect-metadata": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz", + "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==", + "dev": true + }, + "rxjs": { + "version": "5.5.11", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.11.tgz", + "integrity": "sha512-3bjO7UwWfA2CV7lmwYMBzj4fQ6Cq+ftHc2MvUe+WMS7wcdJ1LosDWmdjPQanYp2dBRj572p7PeU81JUxHKOcBA==", + "dev": true, + "requires": { + "symbol-observable": "1.0.1" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "source-map-support": { + "version": "0.4.18", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz", + "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==", + "dev": true, + "requires": { + "source-map": "^0.5.6" + } + }, + "symbol-observable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", + "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", + "dev": true + }, + "tsickle": { + "version": "0.21.6", + "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz", + "integrity": "sha1-U7Abl5xcE/2xOvs/uVgXflmRWI0=", + "dev": true, + "requires": { + "minimist": "^1.2.0", + "mkdirp": "^0.5.1", + "source-map": "^0.5.6", + "source-map-support": "^0.4.2" + } + }, + "tslib": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", + "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", + "dev": true + }, + "typescript": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", + "dev": true + }, + "xhr2": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz", + "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8=", + "dev": true + }, + "zone.js": { + "version": "0.8.26", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.26.tgz", + "integrity": "sha512-W9Nj+UmBJG251wkCacIkETgra4QgBo/vgoEkb4a2uoLzpQG7qF9nzwoLXWU5xj3Fg2mxGvEDh47mg24vXccYjA==", + "dev": true + } + } +} diff --git a/@ks89/ngx-codemirror/package.json b/@ks89/ngx-codemirror/package.json new file mode 100644 index 0000000..85a7d1f --- /dev/null +++ b/@ks89/ngx-codemirror/package.json @@ -0,0 +1,57 @@ +{ + "name": "@ks89/ngx-codemirror", + "version": "2.0.1", + "description": "Angular2 Codemirror component", + "main": "lib/index.js", + "typings": "lib/index.d.ts", + "keywords": [ + "angular", + "angular2", + "ssr", + "universal", + "server-side-rendering", + "component", + "codemirror" + ], + "private": false, + "authors": "Simon Babay", + "contributors": [ + "Stefano Cappa (https://github.com/Ks89)" + ], + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/Ks89/ngx-codemirror.git" + }, + "bugs": { + "url": "https://github.com/Ks89/ngx-codemirror/issues" + }, + "homepage": "https://github.com/Ks89/ngx-codemirror#readme", + "dependencies": { + "codemirror": "^5.22.2" + }, + "devDependencies": { + "@angular/animations": "^4.0.0", + "@angular/common": "^2.1.0 || ^4.0.0", + "@angular/compiler": "^2.1.0 || ^4.0.0", + "@angular/compiler-cli": "^2.1.0 || ^4.0.0", + "@angular/core": "^2.1.0 || ^4.0.0", + "@angular/forms": "^2.1.0 || ^4.0.0", + "@angular/platform-browser": "^2.1.0 || ^4.0.0", + "@angular/platform-server": "^2.1.0 || ^4.0.0", + "@types/ckeditor": "0.0.33", + "@types/core-js": "^0.9.34", + "@types/node": "^6.0.45", + "rxjs": "^5.2.0", + "typescript": "^2.2.1", + "zone.js": "^0.8.5" + }, + "peerDependencies": { + "@angular/core": "^2.1.0 || ^4.0.0", + "@angular/forms": "^2.1.0 || ^4.0.0", + "@angular/common": "^2.1.0 || ^4.0.0" + }, + "directories": { + "lib": "lib" + } +} diff --git a/@ks89/ngx-codemirror/src/codemirror.component.ts b/@ks89/ngx-codemirror/src/codemirror.component.ts new file mode 100644 index 0000000..c02406b --- /dev/null +++ b/@ks89/ngx-codemirror/src/codemirror.component.ts @@ -0,0 +1,127 @@ +// Imports +import { + Component, + Input, + Output, + ElementRef, + ViewChild, + EventEmitter, + forwardRef, + AfterViewInit, + OnDestroy, +} from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +// import * as CodeMirror from 'codemirror'; + +/** + * CodeMirror component + * Usage : + * + */ +@Component({ + selector: 'codemirror', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => CodemirrorComponent), + multi: true + } + ], + template: ``, +}) +export class CodemirrorComponent implements AfterViewInit, OnDestroy { + + @Input() config; + @Output() change = new EventEmitter(); + @Output() focus = new EventEmitter(); + @Output() blur = new EventEmitter(); + @Output() cursorActivity = new EventEmitter(); + + @ViewChild('host') host; + + @Output() instance = null; + + _value = ''; + + codemirror: any; + + /** + * Constructor + */ + constructor() { + if (typeof window !== 'undefined') { + this.codemirror = require('codemirror'); + } + } + + get value() { return this._value; } + + @Input() set value(v) { + if (v !== this._value) { + this._value = v; + this.onChange(v); + } + } + + /** + * On component destroy + */ + ngOnDestroy() { + + } + + /** + * On component view init + */ + ngAfterViewInit() { + this.config = this.config || {}; + this.codemirrorInit(this.config); + } + + /** + * Initialize codemirror + */ + codemirrorInit(config) { + this.instance = this.codemirror.fromTextArea(this.host.nativeElement, config); + this.instance.setValue(this._value); + + this.instance.on('change', () => { + this.updateValue(this.instance.getValue()); + }); + + this.instance.on('focus', (instance, event) => { + this.focus.emit({instance, event}); + }); + + this.instance.on('cursorActivity', (instance) => { + this.cursorActivity.emit({instance}); + }); + + this.instance.on('blur', (instance, event) => { + this.blur.emit({instance, event}); + }); + } + + /** + * Value update process + */ + updateValue(value) { + this.value = value; + this.onTouched(); + this.change.emit(value); + } + + /** + * Implements ControlValueAccessor + */ + writeValue(value) { + this._value = value || ''; + if (this.instance) { + this.instance.setValue(this._value); + } + } + onChange(_) {} + onTouched() {} + registerOnChange(fn) { this.onChange = fn; } + registerOnTouched(fn) { this.onTouched = fn; } +} diff --git a/@ks89/ngx-codemirror/src/codemirror.module.ts b/@ks89/ngx-codemirror/src/codemirror.module.ts new file mode 100644 index 0000000..d0dd64e --- /dev/null +++ b/@ks89/ngx-codemirror/src/codemirror.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { CodemirrorComponent } from './codemirror.component'; + +/** + * CodemirrorModule + */ +@NgModule({ + imports: [ + CommonModule + ], + declarations: [ + CodemirrorComponent, + ], + exports: [ + CodemirrorComponent, + ] +}) + +export class CodemirrorModule {} diff --git a/@ks89/ngx-codemirror/src/index.ts b/@ks89/ngx-codemirror/src/index.ts new file mode 100644 index 0000000..cdbfe79 --- /dev/null +++ b/@ks89/ngx-codemirror/src/index.ts @@ -0,0 +1,2 @@ +export { CodemirrorModule } from './codemirror.module'; +export { CodemirrorComponent } from './codemirror.component'; diff --git a/@ks89/ngx-codemirror/tsconfig-aot.json b/@ks89/ngx-codemirror/tsconfig-aot.json new file mode 100644 index 0000000..c83b2b7 --- /dev/null +++ b/@ks89/ngx-codemirror/tsconfig-aot.json @@ -0,0 +1,28 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "lib": ["es2017", "dom"], + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": false, + "outDir": "lib", + "declaration": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "**/*.spec.ts" + ], + + "angularCompilerOptions": { + "genDir": "aot", + "skipMetadataEmit" : false + } +} diff --git a/@ks89/ngx-codemirror/tsconfig.json b/@ks89/ngx-codemirror/tsconfig.json new file mode 100644 index 0000000..78a6c3e --- /dev/null +++ b/@ks89/ngx-codemirror/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "lib": ["es2017", "dom"], + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": false, + "outDir": "lib", + "declaration": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "**/*.spec.ts" + ] +} diff --git a/@ks89/ngx-codemirror/tslint.json b/@ks89/ngx-codemirror/tslint.json new file mode 100644 index 0000000..04bd63d --- /dev/null +++ b/@ks89/ngx-codemirror/tslint.json @@ -0,0 +1,57 @@ +{ + "rules": { + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "indent": [ + true, + "spaces" + ], + "no-duplicate-variable": true, + "no-eval": true, + "no-internal-module": true, + "no-trailing-whitespace": true, + "no-unsafe-finally": true, + "no-var-keyword": true, + "one-line": [ + true, + "check-open-brace", + "check-whitespace" + ], + "quotemark": [ + true, + "simple" + ], + "semicolon": [ + true, + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": [ + true, + "ban-keywords" + ], + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator" + ] + } +} diff --git a/@ks89/ngx-codemirror/yarn.lock b/@ks89/ngx-codemirror/yarn.lock new file mode 100644 index 0000000..d268bf6 --- /dev/null +++ b/@ks89/ngx-codemirror/yarn.lock @@ -0,0 +1,118 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@angular/common@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.5.tgz#ada1a22b7ba01d1fdeb300115584478e031e9a4f" + +"@angular/compiler-cli@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-2.4.5.tgz#efabbe10558b233dcdfe985af2bd2e84f1414c97" + dependencies: + "@angular/tsc-wrapped" "0.5.1" + minimist "^1.2.0" + reflect-metadata "^0.1.2" + +"@angular/compiler@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.5.tgz#521da325e2e002398e8f9de52cfb03d303729e72" + +"@angular/core@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.5.tgz#8b05156398afde9636e65527ffb61fc74236af5a" + +"@angular/forms@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-2.4.5.tgz#468bd040518595c3598742ac1a22c506a7f1ab0f" + +"@angular/platform-browser@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.5.tgz#fa1bc891b1309bca83845787b9a08db36a787fee" + +"@angular/platform-server@^2.1.0": + version "2.4.5" + resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-2.4.5.tgz#4322d6a3609603edf34101f286d47db8762a08bc" + dependencies: + parse5 "^2.2.1" + +"@angular/tsc-wrapped@0.5.1": + version "0.5.1" + resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-0.5.1.tgz#7a69bec999eef41903dddaaccdc862cfcface52c" + dependencies: + tsickle "^0.2" + +"@types/ckeditor@0.0.33": + version "0.0.33" + resolved "https://registry.yarnpkg.com/@types/ckeditor/-/ckeditor-0.0.33.tgz#bb5195a7cbdb5dc1d54f96b16b859d20fb1fdab7" + +"@types/core-js@^0.9.34": + version "0.9.35" + resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.35.tgz#444064e63711cdcc62ea844d27642f6efc2285f2" + +"@types/node@^6.0.45": + version "6.0.62" + resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.62.tgz#85222c077b54f25b57417bb708b9f877bda37f89" + +codemirror@^5.22.2: + version "5.23.0" + resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.23.0.tgz#ac9b6b2e163a79e915b44cf0f43cd115cf6982dc" + +minimist@0.0.8: + version "0.0.8" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" + +minimist@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" + +mkdirp@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" + dependencies: + minimist "0.0.8" + +parse5@^2.2.1: + version "2.2.3" + resolved "https://registry.yarnpkg.com/parse5/-/parse5-2.2.3.tgz#0c4fc41c1000c5e6b93d48b03f8083837834e9f6" + +reflect-metadata@^0.1.2: + version "0.1.9" + resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.9.tgz#987238dc87a516895fe457f130435ffbd763a4d4" + +rxjs@5.0.0-beta.12: + version "5.0.0-beta.12" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.0.0-beta.12.tgz#cdfde2d8c4639d20ae7794bff8fddf32da7ad337" + dependencies: + symbol-observable "^1.0.1" + +source-map-support@^0.4.2: + version "0.4.10" + resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.10.tgz#d7b19038040a14c0837a18e630a196453952b378" + dependencies: + source-map "^0.5.3" + +source-map@^0.5.3, source-map@^0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" + +symbol-observable@^1.0.1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d" + +tsickle@^0.2: + version "0.2.4" + resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.2.4.tgz#98f4837bf45eb142a90fec751f8e30c6a5bc7c06" + dependencies: + minimist "^1.2.0" + mkdirp "^0.5.1" + source-map "^0.5.6" + source-map-support "^0.4.2" + +typescript@^2.0.3: + version "2.1.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.1.5.tgz#6fe9479e00e01855247cea216e7561bafcdbcd4a" + +zone.js@^0.6.26: + version "0.6.26" + resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.6.26.tgz#067c13b8b80223a89b62e9dc82680f09762c4636" diff --git a/README.md b/README.md index f505996..bb41d4e 100644 --- a/README.md +++ b/README.md @@ -9,30 +9,64 @@ ## Installation -`npm i --save @ks89/ngx-codemirror@latest` +`npm i --save @ks89/ngx-codemirror@latest codemirror` ## Configuration 1. Install `npm i --save-dev @types/node` 2. Modify your tsconfig.app.json adding this: -``` -"compilerOptions": { - "types": [ - "node" - ] -} -``` + ``` + "compilerOptions": { + "types": [ + "node" + ] + } + ``` 3. Add this in your main tsconfig.json (if already not available): -``` -"compilerOptions": { - "typeRoots": [ - "node_modules/@types" - ] -} -``` + ``` + "compilerOptions": { + "typeRoots": [ + "node_modules/@types" + ] + } + ``` + +4. Import language in main.ts + + ``` + import 'codemirror/mode/htmlmixed/htmlmixed'; + import 'codemirror/mode/javascript/javascript'; + ``` + +5. Add `"node_modules/codemirror/lib/codemirror.js"` in all scripts arrays of yout angular.json file + + ``` + ... + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + ... + "scripts": [ + "node_modules/codemirror/lib/codemirror.js" + ], + ... + } + } + }, + ... + "test": { + ... + "scripts": [ + "node_modules/codemirror/lib/codemirror.js" + ], + ... + } + + ```

diff --git a/package-lock.json b/package-lock.json index 823e5c1..969ed9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ks89/ngx-codemirror", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 7173ab0..85a7d1f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ks89/ngx-codemirror", - "version": "2.0.0", + "version": "2.0.1", "description": "Angular2 Codemirror component", "main": "lib/index.js", "typings": "lib/index.d.ts",