Initial commit

.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Andrey Kolkov
+
+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.

README.md

@@ -0,0 +1,62 @@
+# AngularEditor
+A simple native wysiwyg editor for Angular 6+
+
+## Getting Started
+
+### Installation
+
+Install via [npm][npm] package manager
+
+```bash
+npm install angular-editor --save
+```
+
+### Usage
+
+Import `angular-editor` module
+
+```typescript
+import { AngularEditorModule } from 'angular-editor';
+
+@NgModule({
+  imports: [ AngularEditorModule ]
+})
+```
+
+Import [font-awesome](https://github.com/FortAwesome/Font-Awesome) into your application
+
+Then in HTML
+
+```html
+<angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></angular-editor>
+```
+
+or
+
+```html
+<angular-editor formControlName="htmlContent" [config]="editorConfig"></angular-editor>
+```
+
+where
+
+```typescript
+import { AngularEditorConfig } from 'angular-editor';
+
+...
+
+editorConfig: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    height: '25rem',
+    minHeight: '5rem',
+    placeholder: 'Enter text here...',
+    translate: 'no'
+  };
+```
+
+For `ngModel` to work, you must import `FormsModule` from `@angular/forms`, or for `formControlName`, you must import `ReactiveFormsModule` from `@angular/forms`
+
+
+
+
+[npm]: https://www.npmjs.com/

karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/kolkov/angular-editor",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

ng-package.prod.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/kolkov/angular-editor",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@kolkov/angular-editor",
+  "version": "0.1.0",
+  "author": "Andrey Kolkov <[email protected]>",
+  "repository": "https://github.com/kolkov/angular-editor",
+  "license": "MIT",
+  "private": false,
+  "peerDependencies": {
+    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
+    "@angular/core": "^6.0.0-rc.0 || ^6.0.0"
+  }
+}

src/lib/angular-editor-toolbar.component.html

@@ -0,0 +1,81 @@
+<div class="angular-toolbar">
+  <div class="angular-toolbar-set">
+    <button type="button" title="Undo" class="angular-editor-button" (click)="triggerCommand('undo')"><i
+      class='fa fa-undo'></i></button>
+    <button type="button" title="Redo" class="angular-editor-button" (click)="triggerCommand('redo')"><i
+      class='fa fa-repeat'></i></button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button id="bold" type="button" title="Bold" class="angular-editor-button" (click)="triggerCommand('bold')"><i
+      class='fa fa-bold'></i></button>
+    <button id="italic" type="button" title="Italic" class="angular-editor-button" (click)="triggerCommand('italic')"><i
+      class='fa fa-italic'></i></button>
+    <button id="underline" type="button" title="Underline" class="angular-editor-button"
+            (click)="triggerCommand('underline')"><i class='fa fa-underline'></i></button>
+    <button id="strikeThrough" type="button" title="Strikethrough" class="angular-editor-button"
+            (click)="triggerCommand('strikeThrough')"><i class='fa fa-strikethrough'></i></button>
+    <button id="subscript" type="button" title="Subscript" class="angular-editor-button"
+            (click)="triggerCommand('subscript')"><i class='fa fa-subscript'></i></button>
+    <button id="superscript" type="button" title="Superscript" class="angular-editor-button"
+            (click)="triggerCommand('superscript')"><i class='fa fa-superscript'></i></button>
+
+  </div>
+  <div class="angular-toolbar-set">
+    <button type="button" title="Justify Left" class="angular-editor-button" (click)="triggerCommand('justifyLeft')"><i
+      class='fa fa-align-left'></i></button>
+    <button type="button" title="Justify Center" class="angular-editor-button"
+            (click)="triggerCommand('justifyCenter')"><i class='fa fa-align-center'></i></button>
+    <button type="button" title="Justify Right" class="angular-editor-button" (click)="triggerCommand('justifyRight')">
+      <i class='fa fa-align-right'></i></button>
+    <button type="button" title="Justify Full" class="angular-editor-button" (click)="triggerCommand('justifyFull')"><i
+      class='fa fa-align-justify'></i></button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button id="indent" type="button" title="Indent" class="angular-editor-button" (click)="triggerCommand('indent')"><i
+      class='fa fa-indent'></i></button>
+    <button type="button" title="Outdent" class="angular-editor-button" (click)="triggerCommand('outdent')"><i
+      class='fa fa-outdent'></i></button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button id="insertUnorderedList" type="button" title="Unordered List" class="angular-editor-button"
+            (click)="triggerCommand('insertUnorderedList')"><i class='fa fa-list-ul'></i></button>
+    <button id="insertOrderedList" type="button" title="Ordered List" class="angular-editor-button"
+            (click)="triggerCommand('insertOrderedList')"><i class='fa fa-list-ol'></i></button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button id="h1" type="button" title="Heading 1" class="angular-editor-button" (click)="triggerCommand('h1')">H1
+    </button>
+    <button id="h2" type="button" title="Heading 2" class="angular-editor-button" (click)="triggerCommand('h2')">H2
+    </button>
+    <button id="h3" type="button" title="Heading 3" class="angular-editor-button" (click)="triggerCommand('h3')">H3
+    </button>
+    <button id="h4" type="button" title="Heading 4" class="angular-editor-button" (click)="triggerCommand('h4')">H4
+    </button>
+    <button id="h5" type="button" title="Heading 5" class="angular-editor-button" (click)="triggerCommand('h5')">H5
+    </button>
+    <button id="h6" type="button" title="Heading 6" class="angular-editor-button" (click)="triggerCommand('h6')">H6
+    </button>
+    <button id="p" type="button" title="Paragraph" class="angular-editor-button" (click)="triggerCommand('p')">P
+    </button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button id="link" type="button" class="angular-editor-button" (click)="insertUrl()"
+            title="Insert Link">
+      <i class="fa fa-link"></i>
+    </button>
+    <button type="button" class="angular-editor-button" (click)="triggerCommand('unlink')"
+            title="Unlink">
+      <i class="fa fa-chain-broken"></i>
+    </button>
+    <button type="button" title="Horizontal Line" class="angular-editor-button"
+            (click)="triggerCommand('insertHorizontalRule')"><i class="fa fa-minus"></i></button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button type="button" title="Clear Formatting" class="angular-editor-button"
+            (click)="triggerCommand('removeFormat')"><i class='fa fa-eraser'></i></button>
+  </div>
+  <div class="angular-toolbar-set">
+    <button id="toggleEditorMode" type="button" title="HTML code" class="angular-editor-button"
+            (click)="triggerCommand('toggleEditorMode')"><i class='fa fa-code'></i></button>
+  </div>
+</div>

src/lib/angular-editor-toolbar.component.scss

@@ -0,0 +1 @@
+@import "style";

src/lib/angular-editor-toolbar.component.ts

@@ -0,0 +1,74 @@
+import {Component, EventEmitter, Output, Renderer2} from "@angular/core";
+import {AngularEditorService} from "./angular-editor.service";
+
+@Component({
+  selector: 'angular-editor-toolbar',
+  templateUrl: './angular-editor-toolbar.component.html',
+  styleUrls: ['./angular-editor-toolbar.component.scss']
+})
+
+export class AngularEditorToolbarComponent {
+
+  tagMap = {
+    B: "bold",
+    I: "italic",
+    U: "underline",
+    STRIKE: "strikeThrough",
+    SUB: "subscript",
+    SUP: "superscript",
+    H1: "h1",
+    H2: "h2",
+    H3: "h3",
+    H4: "h4",
+    H5: "h5",
+    H6: "h6",
+    P: "p",
+    UL: "insertUnorderedList",
+    OL: "insertOrderedList",
+    BLOCKQUOTE: "indent",
+    A: "link"
+  };
+
+  @Output() execute: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(private _renderer: Renderer2, private editorService: AngularEditorService){}
+
+  triggerCommand(command: string){
+
+    this.execute.emit(command);
+
+    let elementById = document.getElementById(command);
+    if (elementById){
+      const result = elementById.classList.contains("active");
+      if (result) {
+        this._renderer.removeClass(elementById, "active");
+      } else {
+        this._renderer.addClass(elementById, "active");
+      }
+    }
+
+    return;
+  }
+
+  triggerButton(nodes: any[]){
+    Object.keys(this.tagMap).map(e => {
+
+      let elementById = document.getElementById(this.tagMap[e]);
+
+      let node = nodes.find(x => x.nodeName == e);
+
+        if (node != undefined && e == node.nodeName) {
+          this._renderer.addClass(elementById, "active");
+        } else {
+          this._renderer.removeClass(elementById, "active");
+        }
+    });
+  }
+
+  insertUrl(){
+    const url = prompt("Insert URL link", 'http:\/\/');
+    if(url && url!='' && url != 'http://'){
+      this.editorService.createLink(url);
+    }
+  }
+}

src/lib/angular-editor.component.html

@@ -0,0 +1,14 @@
+<div (focus)="onEditorFocus()" class="angular-editor" id="angularEditor" [style.width]="config.width"
+     [style.minWidth]="config.minWidth">
+  <angular-editor-toolbar #editorToolbar (execute)="executeCommand($event)"></angular-editor-toolbar>
+
+  <div class="angular-editor-wrapper" #editorWrapper>
+    <div #editor id="editor" class="angular-editor-textarea" [attr.contenteditable]="config.editable" [attr.translate]="config.translate"
+         [attr.spellcheck]="config.spellcheck" [style.height]="config.height" [style.minHeight]="config.minHeight"
+         (input)="onContentChange($event.target.innerHTML)" (blur)="onTextAreaBlur()" (click)="exec()" (keyup)="exec()">
+    </div>
+    <span class="angular-editor-placeholder">{{ placeholder || config['placeholder'] }}</span>
+  </div>
+</div>
+
+