Check wiki for more information
- \ No newline at end of file + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d25471ff..b4b54fa1 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,14 +1,18 @@ .container { padding-top: 1rem; + .block { margin-bottom: 1rem; } + .logo { text-align: center; + img { margin-bottom: 0.3rem; } } + .htmlblock { .html { border: 1px solid #ddd; @@ -31,4 +35,4 @@ mark { background-color: #f1f1f1; padding: 0.1rem 0.4rem; border-radius: 3px; -} \ No newline at end of file +} diff --git a/src/app/ngx-editor/common/services/command-executor.service.spec.ts b/src/app/ngx-editor/common/services/command-executor.service.spec.ts new file mode 100644 index 00000000..7728715a --- /dev/null +++ b/src/app/ngx-editor/common/services/command-executor.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { CommandExecutorService } from './command-executor.service'; + +describe('CommandExecutorService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [CommandExecutorService] + }); + }); + + it('should be created', inject([CommandExecutorService], (service: CommandExecutorService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/ngx-editor/common/services/command-executor.service.ts b/src/app/ngx-editor/common/services/command-executor.service.ts new file mode 100644 index 00000000..82841977 --- /dev/null +++ b/src/app/ngx-editor/common/services/command-executor.service.ts @@ -0,0 +1,66 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class CommandExecutorService { + + public execute(command: string): void { + + if (command === 'enableObjectResizing') { + document.execCommand('enableObjectResizing', true, true); + return; + } + + if (command === 'blockquote') { + document.execCommand('formatBlock', false, ''); + return; + } + + if (command === 'removeBlockquote') { + document.execCommand('formatBlock', false, 'div'); + return; + } + + if (command === 'link') { + this.createLink(); + return; + } + + if (command === 'image') { + this.insertImage(); + return; + } + + document.execCommand(command, false, null); + } + + private insertImage() { + const imageURI = prompt('Enter Image URL', 'http://'); + if (imageURI) { + const inserted = document.execCommand('insertImage', false, imageURI); + if (!inserted) { + throw new Error('Invalid URL'); + } + } + } + + private createLink() { + const selection = document.getSelection(); + + if (selection.anchorNode.parentElement.tagName === 'A') { + const linkURL = prompt('Enter URL', selection.anchorNode.parentElement.getAttribute('href')); + if (linkURL) { + document.execCommand('createLink', false, linkURL); + } + } else { + if (selection['type'] === 'None') { + throw new Error('No selection made'); + } else { + const linkURL = prompt('Enter URL', 'http://'); + if (linkURL) { + document.execCommand('createLink', false, linkURL); + } + } + } + } + +} diff --git a/src/app/ngx-editor/common/services/message.service.spec.ts b/src/app/ngx-editor/common/services/message.service.spec.ts new file mode 100644 index 00000000..63ecfd8f --- /dev/null +++ b/src/app/ngx-editor/common/services/message.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { MessageService } from './message.service'; + +describe('MessageService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [MessageService] + }); + }); + + it('should be created', inject([MessageService], (service: MessageService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/ngx-editor/common/services/message.service.ts b/src/app/ngx-editor/common/services/message.service.ts new file mode 100644 index 00000000..a8758487 --- /dev/null +++ b/src/app/ngx-editor/common/services/message.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/map'; + +const FIVE_SECONDS = 5000; + +@Injectable() +export class MessageService { + + private message: Subject= new Subject(); + + constructor() { } + + getMessage(): Observable { + return this.message.asObservable(); + } + + sendMessage(message: string) { + this.message.next(message); + this.clearMessageIn(FIVE_SECONDS); + } + + private clearMessageIn(milliseconds: number): void { + setTimeout(() => { + this.message.next(undefined); + }, milliseconds); + } + +} diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html new file mode 100644 index 00000000..c0192d2d --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.html @@ -0,0 +1,3 @@ + diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss new file mode 100644 index 00000000..b368807e --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.scss @@ -0,0 +1,9 @@ +.ngx-editor-message { + font-size: 80%; + background-color: #f1f1f1; + border: 1px solid #ddd; + border-top: transparent; + padding: 0 0.5rem; + padding-bottom: 0.1rem; + transition: 0.5s ease-in; +} diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts new file mode 100644 index 00000000..6cb21838 --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.spec.ts @@ -0,0 +1,27 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NgxEditorMessageComponent } from './ngx-editor-message.component'; +import { MessageService } from '../common/services/message.service'; + +describe('NgxEditorMessageComponent', () => { + let component: NgxEditorMessageComponent; + let fixture: ComponentFixture ; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + providers: [MessageService], + declarations: [NgxEditorMessageComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NgxEditorMessageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts new file mode 100644 index 00000000..3fbbcbf7 --- /dev/null +++ b/src/app/ngx-editor/ngx-editor-message/ngx-editor-message.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; + +import { MessageService } from '../common/services/message.service'; + +@Component({ + selector: 'app-ngx-editor-message', + templateUrl: './ngx-editor-message.component.html', + styleUrls: ['./ngx-editor-message.component.scss'] +}) + +export class NgxEditorMessageComponent { + + ngxMessage = ''; + + constructor(private _messageService: MessageService) { + this._messageService.getMessage().subscribe((message: string) => this.ngxMessage = message); + } + + clearMessage() { + this.ngxMessage = undefined; + } +} diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html index 1f9a743a..48aa69f5 100644 --- a/src/app/ngx-editor/ngx-editor.component.html +++ b/src/app/ngx-editor/ngx-editor.component.html @@ -1,130 +1,14 @@ - - +\ No newline at end of file + + diff --git a/src/app/ngx-editor/ngx-editor.component.scss b/src/app/ngx-editor/ngx-editor.component.scss index 81164e98..ea606ca2 100644 --- a/src/app/ngx-editor/ngx-editor.component.scss +++ b/src/app/ngx-editor/ngx-editor.component.scss @@ -4,57 +4,13 @@ .ngx-editor { position: relative; - ::ng-deep [contenteditable=true]:empty:before { + + ::ng-deep [contenteditable=true]:empty:before { content: attr(placeholder); display: block; // for firefox + } - .ngx-toolbar { - background-color: #f5f5f5; - border-bottom: 1px solid #ddd; - font-size: 0.8rem; - padding: 0.2rem; - border: 1px solid #ddd; - .ngx-toolbar-set { - display: inline-block; - border: 1px solid #ddd; - border-radius: 5px; - background-color: white; - .ngx-editor-button { - background-color: #f5f5f5; - background-color: transparent; - border: 0; - padding: 0.4rem; - min-width: 2.5rem; - float: left; - border-right: 1px solid #ddd; - &:hover { - cursor: pointer; - background-color: #f1f1f1; - transition: 0.2s ease; - } - &:focus, - &.focus { - outline: 0; - } - &:last-child { - border-right: transparent; - } - &:first-child { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - } - &:last-child { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - } - &:disabled { - background-color: #f5f5f5; - pointer-events: none; - cursor: not-allowed; - } - } - } - } + .ngx-editor-textarea { min-height: 5rem; padding: 0.5rem 0.8rem 1rem 0.8rem; @@ -62,23 +18,16 @@ border-top: transparent !important; background-color: #fff; overflow: auto; + &:focus, &.focus { outline: 0; } - ::ng-deep blockquote { + + ::ng-deep blockquote { margin-left: 1rem; border-left: 0.2em solid #dfe2e5; padding-left: 0.5rem; } } - .ngx-editor-message { - font-size: 80%; - background-color: #f1f1f1; - border: 1px solid #ddd; - border-top: transparent; - padding: 0 0.5rem; - padding-bottom: 0.1rem; - transition: 0.5s ease-in; - } -} \ No newline at end of file +} diff --git a/src/app/ngx-editor/ngx-editor.component.spec.ts b/src/app/ngx-editor/ngx-editor.component.spec.ts index 80a72641..e69d7b1d 100644 --- a/src/app/ngx-editor/ngx-editor.component.spec.ts +++ b/src/app/ngx-editor/ngx-editor.component.spec.ts @@ -2,6 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NgxEditorComponent } from './ngx-editor.component'; import { NgxGrippieComponent } from './ngx-grippie/ngx-grippie.component'; +import { NgxToolbarComponent } from './ngx-toolbar/ngx-toolbar.component'; +import { NgxEditorMessageComponent } from './ngx-editor-message/ngx-editor-message.component'; +import { MessageService } from './common/services/message.service'; +import { CommandExecutorService } from './common/services/command-executor.service'; describe('NgxEditorComponent', () => { let component: NgxEditorComponent; @@ -9,7 +13,12 @@ describe('NgxEditorComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [NgxEditorComponent, NgxGrippieComponent] + providers: [MessageService, CommandExecutorService], + declarations: [NgxEditorComponent, + NgxGrippieComponent, + NgxToolbarComponent, + NgxEditorMessageComponent + ] }) .compileComponents(); })); diff --git a/src/app/ngx-editor/ngx-editor.component.ts b/src/app/ngx-editor/ngx-editor.component.ts index fe6fcf84..11aaad53 100644 --- a/src/app/ngx-editor/ngx-editor.component.ts +++ b/src/app/ngx-editor/ngx-editor.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit, HostListener, Input, Output, ElementRef, EventEmitter, ViewChild } from '@angular/core'; +import { Component, OnInit, Input, Output, ViewChild, HostListener, ElementRef, EventEmitter } from '@angular/core'; + import { ngxEditorConfig } from './ngx-editor.defaults'; -import * as Utils from './ngx-editor.utils'; +import { CommandExecutorService } from './common/services/command-executor.service'; +import { MessageService } from './common/services/message.service'; @Component({ selector: 'app-ngx-editor', @@ -17,7 +19,6 @@ export class NgxEditorComponent implements OnInit { _config: any; _html: any; _resizer: string; - ngxMessage: string; enableToolbar = false; @Input() editable: boolean; @@ -31,22 +32,20 @@ export class NgxEditorComponent implements OnInit { @Input() toolbar: any; // set resizer - @Input() - set resizer(value: string) { - console.log(value); + @Input() set resizer(value: string) { if (value === 'basic') { this._resizer = value; } else { this._resizer = 'stack'; } } + get resizer(): string { return this._resizer || 'stack'; } // set configuration - @Input() - set config(value: JSON) { + @Input() set config(value: JSON) { for (const i in ngxEditorConfig) { if (i) { @@ -60,15 +59,16 @@ export class NgxEditorComponent implements OnInit { } this._config = value; } + get config(): JSON { return this._config || ngxEditorConfig; } // set HTML value - @Input() - set html(value: any) { + @Input() set html(value: any) { this._html = value; } + get html(): any { return this._html; } @@ -76,7 +76,7 @@ export class NgxEditorComponent implements OnInit { /* * update html on changes in content editable */ - htmlContentChange(value) { + htmlContentChange(value: string) { if (value === '- - + -
') { this.htmlChange.emit(''); } else { @@ -84,69 +84,10 @@ export class NgxEditorComponent implements OnInit { } } - constructor(private _element: ElementRef) { } - - /* - * editor actions - */ - executeCommand(commandName) { - document.execCommand(commandName, false, null); - } - - // blockquote - blockQuote() { - document.execCommand('formatBlock', false, ''); - } - - removeQuote() { - document.execCommand('formatBlock', false, 'div'); - } - - // insert link - createLink() { - const selection = document.getSelection(); - - if (selection.anchorNode.parentElement.tagName === 'A') { - const linkURL = prompt('Enter URL', selection.anchorNode.parentElement.getAttribute('href')); - if (linkURL) { - document.execCommand('createLink', false, linkURL); - } - } else { - if (selection['type'] === 'None') { - this.createMessage('No selection made'); - } else { - const linkURL = prompt('Enter URL', 'http://'); - if (linkURL) { - document.execCommand('createLink', false, linkURL); - } - } - } - } - - // insert image - insertImage() { - const imageURI = prompt('Enter Image URL', 'http://'); - if (imageURI) { - const inserted = document.execCommand('insertImage', false, imageURI); - if (!inserted) { - this.createMessage('Invalid URL'); - } - } - } - - /* - * message box - */ - createMessage(message) { - this.ngxMessage = message; - setTimeout(() => { - this.clearMessage(); - }, 5000); - } - - clearMessage() { - this.ngxMessage = undefined; - } + constructor( + private _element: ElementRef, + private _messageService: MessageService, + private _commandExecutor: CommandExecutorService) { } /* * focus event @@ -156,24 +97,13 @@ export class NgxEditorComponent implements OnInit { } @HostListener('document:click', ['$event']) onDocumentClick(event) { - if (this._element.nativeElement.contains(event.target)) { - this.enableToolbar = true; - } else { - this.enableToolbar = false; - } - } - - /* - * enable or diable toolbar based on configuration - */ - canEnableToolbarOptions(value) { - return Utils.canEnableToolbarOptions(value, this.config['toolbar']); + this.enableToolbar = !!this._element.nativeElement.contains(event.target); } /* * resizing text area */ - resizeTextArea(offsetY) { + resizeTextArea(offsetY: number) { let newHeight = parseInt(this.height, 10); newHeight += offsetY; this.height = newHeight + 'px'; @@ -196,7 +126,17 @@ export class NgxEditorComponent implements OnInit { this.height = this.height || this.textArea.nativeElement.offsetHeight; - document.execCommand('enableObjectResizing', true, true); + this.executeCommand('enableObjectResizing'); } + /* + * editor actions + */ + executeCommand(commandName: string) { + try { + this._commandExecutor.execute(commandName); + } catch (error) { + this._messageService.sendMessage(error.message); + } + } } diff --git a/src/app/ngx-editor/ngx-editor.module.ts b/src/app/ngx-editor/ngx-editor.module.ts index fa317b27..a43a7c0b 100644 --- a/src/app/ngx-editor/ngx-editor.module.ts +++ b/src/app/ngx-editor/ngx-editor.module.ts @@ -1,14 +1,23 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; + +// components import { NgxEditorComponent } from './ngx-editor.component'; import { NgxGrippieComponent } from './ngx-grippie/ngx-grippie.component'; +import { NgxToolbarComponent } from './ngx-toolbar/ngx-toolbar.component'; +import { NgxEditorMessageComponent } from './ngx-editor-message/ngx-editor-message.component'; + +// services +import { MessageService } from './common/services/message.service'; +import { CommandExecutorService } from './common/services/command-executor.service'; @NgModule({ imports: [ CommonModule ], - declarations: [NgxEditorComponent, NgxGrippieComponent], - exports: [NgxEditorComponent, NgxGrippieComponent] + declarations: [NgxEditorComponent, NgxGrippieComponent, NgxToolbarComponent, NgxEditorMessageComponent], + exports: [NgxEditorComponent, NgxGrippieComponent], + providers: [CommandExecutorService, MessageService] }) export class NgxEditorModule { } diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html index 411dd0e8..2e3bd6a4 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.html @@ -6,4 +6,4 @@ fill="rgb(147,153,159)" /> - \ No newline at end of file + diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss index 1c904de2..7901bb5b 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.scss @@ -6,8 +6,9 @@ cursor: s-resize; border: 1px solid #ddd; border-top: transparent; + svg { position: absolute; top: 1.5px; } -} \ No newline at end of file +} diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts index 24e461e2..83fabfdf 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.spec.ts @@ -1,8 +1,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - import { ElementRef } from '@angular/core'; + import { NgxGrippieComponent } from './ngx-grippie.component'; import { NgxEditorComponent } from '../ngx-editor.component'; +import { MessageService } from '../common/services/message.service'; +import { CommandExecutorService } from '../common/services/command-executor.service'; export class MockElementRef extends ElementRef { constructor() { super(null); } @@ -15,7 +17,10 @@ describe('NgxGrippieComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [NgxGrippieComponent], - providers: [NgxEditorComponent, + providers: [ + NgxEditorComponent, + MessageService, + CommandExecutorService, { provide: ElementRef, useClass: MockElementRef }] }) .compileComponents(); diff --git a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts index 0d40445b..d2ddd6b9 100644 --- a/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts +++ b/src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, HostListener, EventEmitter } from '@angular/core'; +import { Component, OnInit, HostListener } from '@angular/core'; import { NgxEditorComponent } from '../ngx-editor.component'; @Component({ @@ -15,8 +15,7 @@ export class NgxGrippieComponent { constructor(private _editorComponent: NgxEditorComponent) { } - @HostListener('document:mousemove', ['$event']) - onMouseMove(event: MouseEvent) { + @HostListener('document:mousemove', ['$event']) onMouseMove(event: MouseEvent) { if (!this.grabber) { return; @@ -26,8 +25,7 @@ export class NgxGrippieComponent { this.oldY = event.clientY; } - @HostListener('document:mouseup', ['$event']) - onMouseUp(event: MouseEvent) { + @HostListener('document:mouseup', ['$event']) onMouseUp(event: MouseEvent) { this.grabber = false; } diff --git a/src/app/ngx-editor/ngx-editor.utils.ts b/src/app/ngx-editor/ngx-toolbar/ngx-editor.utils.ts similarity index 100% rename from src/app/ngx-editor/ngx-editor.utils.ts rename to src/app/ngx-editor/ngx-toolbar/ngx-editor.utils.ts diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html new file mode 100644 index 00000000..f2203118 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.html @@ -0,0 +1,116 @@ + + diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss new file mode 100644 index 00000000..21066462 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.scss @@ -0,0 +1,55 @@ +.ngx-toolbar { + background-color: #f5f5f5; + border-bottom: 1px solid #ddd; + font-size: 0.8rem; + padding: 0.2rem; + border: 1px solid #ddd; + + .ngx-toolbar-set { + display: inline-block; + border: 1px solid #ddd; + border-radius: 5px; + background-color: white; + + .ngx-editor-button { + background-color: #f5f5f5; + background-color: transparent; + border: 0; + padding: 0.4rem; + min-width: 2.5rem; + float: left; + border-right: 1px solid #ddd; + + &:hover { + cursor: pointer; + background-color: #f1f1f1; + transition: 0.2s ease; + } + + &:focus, + &.focus { + outline: 0; + } + + &:last-child { + border-right: transparent; + } + + &:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + &:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + + &:disabled { + background-color: #f5f5f5; + pointer-events: none; + cursor: not-allowed; + } + } + } +} diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts new file mode 100644 index 00000000..982c9621 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.spec.ts @@ -0,0 +1,28 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NgxToolbarComponent } from './ngx-toolbar.component'; +import { ngxEditorConfig } from '../ngx-editor.defaults'; + +describe('NgxToolbarComponent', () => { + let component: NgxToolbarComponent; + let fixture: ComponentFixture; + + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NgxToolbarComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NgxToolbarComponent); + component = fixture.componentInstance; + component.config = ngxEditorConfig; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts new file mode 100644 index 00000000..d56d4235 --- /dev/null +++ b/src/app/ngx-editor/ngx-toolbar/ngx-toolbar.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import * as Utils from './ngx-editor.utils'; + +@Component({ + selector: 'app-ngx-toolbar', + templateUrl: './ngx-toolbar.component.html', + styleUrls: ['./ngx-toolbar.component.scss'] +}) + +export class NgxToolbarComponent { + + @Input() config: any; + @Input() enableToolbar = false; + @Output() execute = new EventEmitter(); + + constructor() { } + + /* + * enable or diable toolbar based on configuration + */ + canEnableToolbarOptions(value) { + return Utils.canEnableToolbarOptions(value, this.config['toolbar']); + } + + triggerCommand(command: string): void { + this.execute.emit(command); + } +} diff --git a/tsconfig.json b/tsconfig.json index ada797a8..cf17ddff 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,4 +19,4 @@ "exclude": [ ".ng_build" ] -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index cf6df331..6fdba1e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32,14 +32,14 @@ dependencies: tslib "^1.7.1" -"@angular/cli@1.5.0": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.5.0.tgz#2abc3ff1648d54ad4a14f82f9d517f371370406c" +"@angular/cli@1.5.3": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.5.3.tgz#9d98abbfdf42706853dfeb10f33410adf6b8038b" dependencies: "@angular-devkit/build-optimizer" "~0.0.31" "@angular-devkit/schematics" "~0.0.34" "@ngtools/json-schema" "1.1.0" - "@ngtools/webpack" "1.8.0" + "@ngtools/webpack" "1.8.3" "@schematics/angular" "~0.1.0" autoprefixer "^6.5.3" chalk "~2.2.0" @@ -64,13 +64,14 @@ license-webpack-plugin "^1.0.0" lodash "^4.11.1" memory-fs "^0.4.1" + minimatch "^3.0.4" node-modules-path "^1.0.0" nopt "^4.0.1" opn "~5.1.0" portfinder "~1.0.12" postcss-custom-properties "^6.1.0" - postcss-loader "^1.3.3" - postcss-url "^5.1.2" + postcss-loader "^2.0.8" + postcss-url "^7.1.2" raw-loader "^0.5.1" resolve "^1.1.7" rxjs "^5.5.2" @@ -166,9 +167,9 @@ version "1.1.0" resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922" -"@ngtools/webpack@1.8.0": - version "1.8.0" - resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.8.0.tgz#443204e016aa3a287544eacadb4c95964ae6e2c4" +"@ngtools/webpack@1.8.3": + version "1.8.3" + resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.8.3.tgz#8bafa749fc2626d11e146899e5b14e3e85bc787f" dependencies: chalk "~2.2.0" enhanced-resolve "^3.1.0" @@ -480,10 +481,6 @@ async@^2.0.0-rc.5, async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1, async dependencies: lodash "^4.14.0" -async@~0.2.6: - version "0.2.10" - resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1" - asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" @@ -946,7 +943,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^2.0.0, chalk@^2.1.0: +chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba" dependencies: @@ -1504,6 +1501,10 @@ csso@~2.3.1: clap "^1.0.9" source-map "^0.5.3" +cuint@latest: + version "0.2.2" + resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b" + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -1702,14 +1703,6 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" -directory-encoder@^0.7.2: - version "0.7.2" - resolved "https://registry.yarnpkg.com/directory-encoder/-/directory-encoder-0.7.2.tgz#59b4e2aa4f25422f6c63b527b462f5e2d0dd2c58" - dependencies: - fs-extra "^0.23.1" - handlebars "^1.3.0" - img-stats "^0.5.2" - dns-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d" @@ -2435,15 +2428,6 @@ fs-exists-sync@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add" -fs-extra@^0.23.1: - version "0.23.1" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.23.1.tgz#6611dba6adf2ab8dc9c69fab37cddf8818157e3d" - dependencies: - graceful-fs "^4.1.2" - jsonfile "^2.1.0" - path-is-absolute "^1.0.0" - rimraf "^2.2.8" - fs-extra@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950" @@ -2734,14 +2718,6 @@ handle-thing@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" -handlebars@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-1.3.0.tgz#9e9b130a93e389491322d975cf3ec1818c37ce34" - dependencies: - optimist "~0.3" - optionalDependencies: - uglify-js "~2.3" - handlebars@^4.0.3: version "4.0.11" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" @@ -3027,12 +3003,6 @@ image-size@~0.5.0: version "0.5.5" resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c" -img-stats@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/img-stats/-/img-stats-0.5.2.tgz#c203496c42f2d9eb2e5ab8232fa756bab32c9e2b" - dependencies: - xmldom "^0.1.19" - import-local@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8" @@ -3452,7 +3422,7 @@ jasminewd2@^2.1.0: version "2.2.0" resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e" -js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9: +js-base64@^2.1.8, js-base64@^2.1.9: version "2.3.2" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf" @@ -4377,7 +4347,7 @@ object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" -object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -4433,12 +4403,6 @@ optimist@^0.6.1, optimist@~0.6.0: minimist "~0.0.1" wordwrap "~0.0.2" -optimist@~0.3, optimist@~0.3.5: - version "0.3.7" - resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9" - dependencies: - wordwrap "~0.0.2" - options@>=0.0.5: version "0.0.6" resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f" @@ -4779,14 +4743,14 @@ postcss-load-plugins@^2.3.0: cosmiconfig "^2.1.1" object-assign "^4.1.0" -postcss-loader@^1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.3.3.tgz#a621ea1fa29062a83972a46f54486771301916eb" +postcss-loader@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.8.tgz#8c67ddb029407dfafe684a406cfc16bad2ce0814" dependencies: - loader-utils "^1.0.2" - object-assign "^4.1.1" - postcss "^5.2.15" + loader-utils "^1.1.0" + postcss "^6.0.0" postcss-load-config "^1.2.0" + schema-utils "^0.3.0" postcss-merge-idents@^2.1.5: version "2.1.7" @@ -4944,17 +4908,15 @@ postcss-unique-selectors@^2.0.2: postcss "^5.0.4" uniqs "^2.0.0" -postcss-url@^5.1.2: - version "5.1.2" - resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-5.1.2.tgz#98b3165be8d592471cb0caadde2c0d1f832f133e" +postcss-url@^7.1.2: + version "7.2.1" + resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-7.2.1.tgz#bf47ff1b5395538567cea19ef3241a70fb925f5c" dependencies: - directory-encoder "^0.7.2" - js-base64 "^2.1.5" - mime "^1.2.11" - minimatch "^3.0.0" + mime "^1.4.1" + minimatch "^3.0.4" mkdirp "^0.5.0" - path-is-absolute "^1.0.0" - postcss "^5.0.0" + postcss "^6.0.1" + xxhashjs "^0.2.1" postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0: version "3.3.0" @@ -4968,7 +4930,7 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" -postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.15, postcss@^5.2.16: +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" dependencies: @@ -4977,6 +4939,14 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0. source-map "^0.5.6" supports-color "^3.2.3" +postcss@^6.0.0: + version "6.0.14" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885" + dependencies: + chalk "^2.3.0" + source-map "^0.6.1" + supports-color "^4.4.0" + postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.2: version "6.0.13" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.13.tgz#b9ecab4ee00c89db3ec931145bd9590bbf3f125f" @@ -5873,7 +5843,7 @@ source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.2, dependencies: source-map "^0.5.6" -source-map@0.1.x, source-map@~0.1.7: +source-map@0.1.x: version "0.1.43" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" dependencies: @@ -6432,14 +6402,6 @@ uglify-js@^2.6, uglify-js@^2.8.29: optionalDependencies: uglify-to-browserify "~1.0.0" -uglify-js@~2.3: - version "2.3.6" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a" - dependencies: - async "~0.2.6" - optimist "~0.3.5" - source-map "~0.1.7" - uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" @@ -6919,10 +6881,6 @@ xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1: version "9.0.4" resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f" -xmldom@^0.1.19: - version "0.1.27" - resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9" - xmlhttprequest-ssl@1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d" @@ -6931,6 +6889,12 @@ xmlhttprequest-ssl@1.5.3: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af" +xxhashjs@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.1.tgz#9bbe9be896142976dfa34c061b2d068c43d30de0" + dependencies: + cuint latest + y18n@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"