ngx-editor-custom
Version:
WYSIWYG Editor for Angular Applications
1,184 lines (1,175 loc) • 139 kB
JavaScript
import { Injectable, Component, Input, Output, ViewChild, EventEmitter, Renderer2, forwardRef, HostListener, NgModule } from '@angular/core';
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
import { Subject } from 'rxjs';
import { NG_VALUE_ACCESSOR, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { fromTextArea } from 'codemirror';
import 'codemirror/addon/display/placeholder.js';
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import { PopoverConfig, PopoverModule } from 'ngx-bootstrap';
import { CommonModule } from '@angular/common';
import { ColorSketchModule } from 'ngx-color/sketch';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* enable or disable toolbar based on configuration
*
* @param {?} value toolbar item
* @param {?} toolbar toolbar configuration object
* @return {?}
*/
function canEnableToolbarOptions(value, toolbar) {
if (value) {
if (toolbar['length'] === 0) {
return true;
}
else {
/** @type {?} */
const found = toolbar.filter(array => {
return array.indexOf(value) !== -1;
});
return found.length ? true : false;
}
}
else {
return false;
}
}
/**
* set editor configuration
*
* @param {?} value configuration via [config] property
* @param {?} ngxEditorConfig default editor configuration
* @param {?} input direct configuration inputs via directives
* @return {?}
*/
function getEditorConfiguration(value, ngxEditorConfig, input) {
for (const i in ngxEditorConfig) {
if (i) {
if (input[i] !== undefined) {
value[i] = input[i];
}
if (!value.hasOwnProperty(i)) {
value[i] = ngxEditorConfig[i];
}
}
}
return value;
}
/**
* return vertical if the element is the resizer property is set to basic
*
* @param {?} resizer type of resizer, either basic or stack
* @return {?}
*/
function canResize(resizer) {
if (resizer === 'basic') {
return 'vertical';
}
return false;
}
/**
* save selection when the editor is focussed out
* @return {?}
*/
function saveSelection() {
if (window.getSelection) {
/** @type {?} */
const sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
}
else if (document.getSelection && document.createRange) {
return document.createRange();
}
return null;
}
/**
* restore selection when the editor is focussed in
*
* @param {?} range saved selection when the editor is focussed out
* @return {?}
*/
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
/** @type {?} */
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
return true;
}
else if (document.getSelection && range.select) {
range.select();
return true;
}
}
else {
return false;
}
}
var Utils = /*#__PURE__*/Object.freeze({
canEnableToolbarOptions: canEnableToolbarOptions,
getEditorConfiguration: getEditorConfiguration,
canResize: canResize,
saveSelection: saveSelection,
restoreSelection: restoreSelection
});
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class CommandExecutorService {
/**
*
* @param {?} _http HTTP Client for making http requests
*/
constructor(_http) {
this._http = _http;
/**
* saves the selection from the editor when focussed out
*/
this.savedSelection = undefined;
}
/**
* executes command from the toolbar
*
* @param {?} command command to be executed
* @return {?}
*/
execute(command) {
if (!this.savedSelection && command !== 'enableObjectResizing') {
throw new Error('Range out of Editor');
}
if (command === 'enableObjectResizing') {
document.execCommand('enableObjectResizing', true);
}
if (command === 'blockquote') {
document.execCommand('formatBlock', false, 'blockquote');
}
if (command === 'removeBlockquote') {
document.execCommand('formatBlock', false, 'div');
}
document.execCommand(command, false, null);
}
/**
* inserts image in the editor
*
* @param {?} imageURI url of the image to be inserted
* @return {?}
*/
insertImage(imageURI) {
if (this.savedSelection) {
if (imageURI) {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored) {
console.log('insert image', imageURI);
/** @type {?} */
const inserted = document.execCommand('insertImage', false, imageURI);
if (!inserted) {
throw new Error('Invalid URL');
}
}
}
}
else {
throw new Error('Range out of the editor');
}
}
/**
* inserts image in the editor
*
* @param {?} videParams url of the image to be inserted
* @return {?}
*/
insertVideo(videParams) {
if (this.savedSelection) {
if (videParams) {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored) {
if (this.isYoutubeLink(videParams.videoUrl)) {
/** @type {?} */
const youtubeURL = '<iframe width="' + videParams.width + '" height="' + videParams.height + '"'
+ 'src="' + videParams.videoUrl + '"></iframe>';
this.insertHtml(youtubeURL);
}
else if (this.checkTagSupportInBrowser('video')) {
if (this.isValidURL(videParams.videoUrl)) {
/** @type {?} */
const videoSrc = '<video width="' + videParams.width + '" height="' + videParams.height + '"'
+ ' controls="true"><source src="' + videParams.videoUrl + '"></video>';
this.insertHtml(videoSrc);
}
else {
throw new Error('Invalid video URL');
}
}
else {
throw new Error('Unable to insert video');
}
}
}
}
else {
throw new Error('Range out of the editor');
}
}
/**
* checks the input url is a valid youtube URL or not
*
* @param {?} url Youtue URL
* @return {?}
*/
isYoutubeLink(url) {
/** @type {?} */
const ytRegExp = /^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/;
return ytRegExp.test(url);
}
/**
* check whether the string is a valid url or not
* @param {?} url url
* @return {?}
*/
isValidURL(url) {
/** @type {?} */
const urlRegExp = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
return urlRegExp.test(url);
}
/**
* uploads image to the server
*
* @param {?} file file that has to be uploaded
* @param {?} endPoint enpoint to which the image has to be uploaded
* @return {?}
*/
uploadImage(file, endPoint) {
if (!endPoint) {
throw new Error('Image Endpoint isn`t provided or invalid');
}
/** @type {?} */
const formData = new FormData();
if (file) {
formData.append('file', file);
/** @type {?} */
const req = new HttpRequest('POST', endPoint, formData, {
reportProgress: true
});
return this._http.request(req);
}
else {
throw new Error('Invalid Image');
}
}
/**
* inserts link in the editor
*
* @param {?} params parameters that holds the information for the link
* @return {?}
*/
createLink(params) {
if (this.savedSelection) {
/**
* check whether the saved selection contains a range or plain selection
*/
if (params.urlNewTab) {
if (!params.urlText) {
params.urlText = this.deleteAndGetElement();
}
/** @type {?} */
const newUrl = '<a href="' + params.urlLink + '" target="_blank">' + params.urlText + '</a>';
if (document.getSelection().type !== 'Range') {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored) {
this.insertHtml(newUrl);
}
}
else {
throw new Error('Only new links can be inserted. You cannot edit URL`s');
}
}
else {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored) {
document.execCommand('createLink', false, params.urlLink);
}
}
}
else {
throw new Error('Range out of the editor');
}
}
/**
* insert color either font or background
*
* @param {?} color color to be inserted
* @return {?}
*/
insertColor(color) {
// debugger
if (this.savedSelection) {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored && this.checkSelection()) {
document.execCommand('foreColor', false, color);
}
}
else {
throw new Error('Range out of the editor');
}
}
/**
* set font size for text
*
* @param {?} fontSize font-size to be set
* @return {?}
*/
setFontSize(fontSize) {
restoreSelection(this.savedSelection);
this.checkSelection();
document.execCommand('fontSize', false, '20');
/** @type {?} */
const fontElements = document.getElementsByTagName('font');
for (let i = 0, len = fontElements.length; i < len; ++i) {
/** @type {?} */
const size = fontElements[i].getAttribute('size');
if (size === '7') {
fontElements[i].removeAttribute('size');
fontElements[i].style.fontSize = fontSize + 'px';
}
}
}
/**
* set font name/family for text
*
* @param {?} fontName font-family to be set
* @return {?}
*/
setFontName(fontName) {
restoreSelection(this.savedSelection);
this.checkSelection();
document.execCommand('fontName', false, fontName);
}
/**
* insert HTML
* @param {?} html
* @return {?}
*/
insertHtml(html) {
/** @type {?} */
const isHTMLInserted = document.execCommand('insertHTML', false, html);
if (!isHTMLInserted) {
throw new Error('Unable to perform the operation');
}
}
/**
* check whether the value is a number or string
* if number return true
* else return false
* @param {?} value
* @return {?}
*/
isNumeric(value) {
return /^-{0,1}\d+$/.test(value);
}
/**
* delete the text at selected range and return the value
* @return {?}
*/
deleteAndGetElement() {
/** @type {?} */
let slectedText;
if (this.savedSelection) {
slectedText = this.savedSelection.toString();
this.savedSelection.deleteContents();
return slectedText;
}
return false;
}
/**
* check any slection is made or not
* @return {?}
*/
checkSelection() {
/** @type {?} */
const slectedText = this.savedSelection.toString();
if (slectedText.length === 0) {
throw new Error('No Selection Made');
}
return true;
}
/**
* check tag is supported by browser or not
*
* @param {?} tag HTML tag
* @return {?}
*/
checkTagSupportInBrowser(tag) {
return !(document.createElement(tag) instanceof HTMLUnknownElement);
}
}
CommandExecutorService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
CommandExecutorService.ctorParameters = () => [
{ type: HttpClient }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/** *
* time in which the message has to be cleared
@type {?} */
const DURATION = 7000;
class MessageService {
constructor() {
/**
* variable to hold the user message
*/
this.message = new Subject();
}
/**
* returns the message sent by the editor
* @return {?}
*/
getMessage() {
return this.message.asObservable();
}
/**
* sends message to the editor
*
* @param {?} message message to be sent
* @return {?}
*/
sendMessage(message) {
this.message.next(message);
this.clearMessageIn(DURATION);
}
/**
* a short interval to clear message
*
* @param {?} milliseconds time in seconds in which the message has to be cleared
* @return {?}
*/
clearMessageIn(milliseconds) {
setTimeout(() => {
this.message.next(undefined);
}, milliseconds);
}
}
MessageService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
MessageService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/** *
* toolbar default configuration
@type {?} */
const ngxEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '0',
width: 'auto',
minWidth: '0',
translate: 'yes',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter text here...',
imageEndPoint: '',
toolbar: [
['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
['fontName', 'fontSize', 'color'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
['link', 'unlink', 'image', 'video'],
['code']
]
};
/** *
* codemirror configuaration
@type {?} */
const codeMirrorConfig = {
lineNumbers: true,
gutter: true,
lineWrapping: true,
mode: 'htmlmixed',
autofocus: true,
htmlMode: true
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class NgxEditorComponent {
/**
* @param {?} _messageService service to send message to the editor message component
* @param {?} _commandExecutor executes command from the toolbar
* @param {?} _renderer access and manipulate the dom element
*/
constructor(_messageService, _commandExecutor, _renderer) {
this._messageService = _messageService;
this._commandExecutor = _commandExecutor;
this._renderer = _renderer;
/**
* The editor can be resized vertically.
*
* `basic` resizer enables the html5 reszier. Check here https://www.w3schools.com/cssref/css3_pr_resize.asp
*
* `stack` resizer enable a resizer that looks like as if in https://stackoverflow.com
*/
this.resizer = 'stack';
/**
* The config property is a JSON object
*
* All avaibale inputs inputs can be provided in the configuration as JSON
* inputs provided directly are considered as top priority
*/
this.config = ngxEditorConfig;
/**
* emits `blur` event when focused out from the textarea
*/
this.blur = new EventEmitter();
/**
* emits `focus` event when focused in to the textarea
*/
this.focus = new EventEmitter();
this.chooseImageGallery = new EventEmitter();
this.Utils = Utils;
this.codeEditorMode = false;
this.ngxCodeMirror = undefined;
}
/**
* events
* @return {?}
*/
onTextAreaFocus() {
this.focus.emit('focus');
}
/**
* focus the text area when the editor is focussed
* @return {?}
*/
onEditorFocus() {
this.textArea.nativeElement.focus();
}
/**
* Executed from the contenteditable section while the input property changes
* @param {?} innerHTML
* @return {?}
*/
onContentChange(innerHTML) {
if (typeof this.onChange === 'function') {
this.onChange(innerHTML);
this.togglePlaceholder(innerHTML);
}
}
/**
* @return {?}
*/
onTextAreaBlur() {
/** save selection if focussed out */
this._commandExecutor.savedSelection = saveSelection();
if (typeof this.onTouched === 'function') {
this.onTouched();
}
this.blur.emit('blur');
}
/**
* resizing text area
*
* @param {?} offsetY vertical height of the eidtable portion of the editor
* @return {?}
*/
resizeTextArea(offsetY) {
/** @type {?} */
let newHeight = parseInt(this.height, 10);
newHeight += offsetY;
this.height = newHeight + 'px';
this.textArea.nativeElement.style.height = this.height;
/**
* update code-editor height only on editor mode
*/
if (this.codeEditorMode) {
this.ngxCodeMirror.setSize('100%', this.height);
}
return;
}
/**
* editor actions, i.e., executes command from toolbar
*
* @param {?} commandName name of the command to be executed
* @return {?}
*/
executeCommand(commandName) {
if (commandName === 'refresh') {
/** @type {?} */
const value = this.textArea.nativeElement.innerHTML;
this.onContentChange(value);
return;
}
if (commandName === 'code') {
this.toggleCodeEditor();
return;
}
try {
this._commandExecutor.execute(commandName);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
}
/**
* Write a new value to the element.
*
* @param {?} value value to be executed when there is a change in contenteditable
* @return {?}
*/
writeValue(value) {
this.togglePlaceholder(value);
if (value === null || value === undefined || value === '' || value === '<br>') {
value = null;
}
this.refreshView(value);
}
/**
* Set the function to be called
* when the control receives a change event.
*
* @param {?} fn a function
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* Set the function to be called
* when the control receives a touch event.
*
* @param {?} fn a function
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* refresh view/HTML of the editor
*
* @param {?} value html string from the editor
* @return {?}
*/
refreshView(value) {
/** @type {?} */
const normalizedValue = value === null ? '' : value;
this._renderer.setProperty(this.textArea.nativeElement, 'innerHTML', normalizedValue);
}
/**
* toggle between codeview and editor
* @return {?}
*/
toggleCodeEditor() {
this.codeEditorMode = !this.codeEditorMode;
if (this.codeEditorMode) {
this.ngxCodeMirror = fromTextArea(this.codeEditor.nativeElement, codeMirrorConfig);
/** set value of the code editor */
this.ngxCodeMirror.setValue(this.textArea.nativeElement.innerHTML);
/** sets height of the code editor as same as the height of the textArea */
this.ngxCodeMirror.setSize('100%', this.height);
}
else {
/** remove/ destroy code editor */
this.ngxCodeMirror.toTextArea();
/** update the model value and html content on the contenteditable */
this.refreshView(this.ngxCodeMirror.getValue());
this.onContentChange(this.ngxCodeMirror.getValue());
}
return;
}
/**
* toggles placeholder based on input string
*
* @param {?} value A HTML string from the editor
* @return {?}
*/
togglePlaceholder(value) {
if (!value || value === '<br>' || value === '') {
this._renderer.addClass(this.ngxWrapper.nativeElement, 'show-placeholder');
}
else {
this._renderer.removeClass(this.ngxWrapper.nativeElement, 'show-placeholder');
}
}
/**
* returns a json containing input params
* @return {?}
*/
getCollectiveParams() {
return {
editable: this.editable,
spellcheck: this.spellcheck,
placeholder: this.placeholder,
translate: this.translate,
height: this.height,
minHeight: this.minHeight,
width: this.width,
minWidth: this.minWidth,
enableToolbar: this.enableToolbar,
showToolbar: this.showToolbar,
imageEndPoint: this.imageEndPoint,
toolbar: this.toolbar
};
}
/**
* @return {?}
*/
ngOnInit() {
/**
* set configuartion
*/
this.config = this.Utils.getEditorConfiguration(this.config, ngxEditorConfig, this.getCollectiveParams());
this.height = this.height || this.textArea.nativeElement.offsetHeight;
this.executeCommand('enableObjectResizing');
}
/**
* @param {?} event
* @return {?}
*/
chooseImageGalleryFunc(event) {
this.chooseImageGallery.emit(event);
}
}
NgxEditorComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-editor',
template: "<div class=\"ngx-editor\"\n id=\"ngxEditor\"\n [style.width]=\"config['width']\"\n [style.minWidth]=\"config['minWidth']\" tabindex=\"0\"\n (focus)=\"onEditorFocus()\"\n (click)=\"onEditorFocus()\">\n\n <app-ngx-editor-toolbar\n [config]=\"config\"\n (execute)=\"executeCommand($event)\"\n (chooseImageGallery)=\"chooseImageGalleryFunc($event)\"\n ></app-ngx-editor-toolbar>\n\n <!-- text area -->\n <div class=\"ngx-wrapper\" [hidden]=\"codeEditorMode\" #ngxWrapper>\n <div class=\"ngx-editor-textarea\" [attr.contenteditable]=\"config['editable']\" (input)=\"onContentChange($event.target.innerHTML)\"\n [attr.translate]=\"config['translate']\" [attr.spellcheck]=\"config['spellcheck']\" [style.height]=\"config['height']\"\n [style.minHeight]=\"config['minHeight']\" [style.resize]=\"Utils?.canResize(resizer)\" (focus)=\"onTextAreaFocus()\"\n (blur)=\"onTextAreaBlur()\" #ngxTextArea></div>\n\n <span class=\"ngx-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n </div>\n\n <textarea [attr.placeholder]=\"placeholder || config['placeholder']\" [hidden]=\"true\" #ngxCodeEditor></textarea>\n\n <app-ngx-editor-message></app-ngx-editor-message>\n <app-ngx-grippie *ngIf=\"resizer === 'stack'\"></app-ngx-grippie>\n\n</div>\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxEditorComponent),
multi: true
}],
styles: [".ngx-editor{position:relative}.ngx-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);display:block;color:#868e96;opacity:1}.ngx-editor .ngx-wrapper{position:relative}.ngx-editor .ngx-wrapper .ngx-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border:1px solid #ddd;background-color:transparent;overflow-x:hidden;overflow-y:auto;z-index:2;position:relative}.ngx-editor .ngx-wrapper .ngx-editor-textarea.focus,.ngx-editor .ngx-wrapper .ngx-editor-textarea:focus{outline:0}.ngx-editor .ngx-wrapper .ngx-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.ngx-editor .ngx-wrapper ::ng-deep p{margin-bottom:0}.ngx-editor .ngx-wrapper .ngx-editor-placeholder{display:none;position:absolute;top:0;padding:.5rem .8rem 1rem .9rem;z-index:1;color:#6c757d;opacity:1}.ngx-editor .ngx-wrapper.show-placeholder .ngx-editor-placeholder{display:block}.ngx-editor ::ng-deep .CodeMirror{border:1px solid #ddd;z-index:2}.ngx-editor ::ng-deep .CodeMirror .CodeMirror-placeholder{color:#6c757d}"]
}] }
];
/** @nocollapse */
NgxEditorComponent.ctorParameters = () => [
{ type: MessageService },
{ type: CommandExecutorService },
{ type: Renderer2 }
];
NgxEditorComponent.propDecorators = {
editable: [{ type: Input }],
spellcheck: [{ type: Input }],
placeholder: [{ type: Input }],
translate: [{ type: Input }],
height: [{ type: Input }],
minHeight: [{ type: Input }],
width: [{ type: Input }],
minWidth: [{ type: Input }],
toolbar: [{ type: Input }],
resizer: [{ type: Input }],
config: [{ type: Input }],
showToolbar: [{ type: Input }],
enableToolbar: [{ type: Input }],
imageEndPoint: [{ type: Input }],
blur: [{ type: Output }],
focus: [{ type: Output }],
chooseImageGallery: [{ type: Output }],
textArea: [{ type: ViewChild, args: ['ngxTextArea',] }],
codeEditor: [{ type: ViewChild, args: ['ngxCodeEditor',] }],
ngxWrapper: [{ type: ViewChild, args: ['ngxWrapper',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class NgxGrippieComponent {
/**
* Constructor
*
* @param {?} _editorComponent Editor component
*/
constructor(_editorComponent) {
this._editorComponent = _editorComponent;
/**
* previous value befor resizing the editor
*/
this.oldY = 0;
/**
* set to true on mousedown event
*/
this.grabber = false;
}
/**
*
* @param {?} event Mouseevent
*
* Update the height of the editor when the grabber is dragged
* @return {?}
*/
onMouseMove(event) {
if (!this.grabber) {
return;
}
this._editorComponent.resizeTextArea(event.clientY - this.oldY);
this.oldY = event.clientY;
}
/**
*
* @param {?} event Mouseevent
*
* set the grabber to false on mouse up action
* @return {?}
*/
onMouseUp(event) {
this.grabber = false;
}
/**
* @param {?} event
* @param {?=} resizer
* @return {?}
*/
onResize(event, resizer) {
this.grabber = true;
this.oldY = event.clientY;
event.preventDefault();
}
}
NgxGrippieComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-grippie',
template: "<div class=\"ngx-editor-grippie\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"isolation:isolate\" viewBox=\"651.6 235 26 5\"\n width=\"26\" height=\"5\">\n <g id=\"sprites\">\n <path d=\" M 651.6 235 L 653.6 235 L 653.6 237 L 651.6 237 M 654.6 238 L 656.6 238 L 656.6 240 L 654.6 240 M 660.6 238 L 662.6 238 L 662.6 240 L 660.6 240 M 666.6 238 L 668.6 238 L 668.6 240 L 666.6 240 M 672.6 238 L 674.6 238 L 674.6 240 L 672.6 240 M 657.6 235 L 659.6 235 L 659.6 237 L 657.6 237 M 663.6 235 L 665.6 235 L 665.6 237 L 663.6 237 M 669.6 235 L 671.6 235 L 671.6 237 L 669.6 237 M 675.6 235 L 677.6 235 L 677.6 237 L 675.6 237\"\n fill=\"rgb(147,153,159)\" />\n </g>\n </svg>\n</div>\n",
styles: [".ngx-editor-grippie{height:9px;background-color:#f1f1f1;position:relative;text-align:center;cursor:s-resize;border:1px solid #ddd;border-top:transparent}.ngx-editor-grippie svg{position:absolute;top:1.5px;width:50%;right:25%}"]
}] }
];
/** @nocollapse */
NgxGrippieComponent.ctorParameters = () => [
{ type: NgxEditorComponent }
];
NgxGrippieComponent.propDecorators = {
onMouseMove: [{ type: HostListener, args: ['document:mousemove', ['$event'],] }],
onMouseUp: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }],
onResize: [{ type: HostListener, args: ['mousedown', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class NgxEditorMessageComponent {
/**
* @param {?} _messageService service to send message to the editor
*/
constructor(_messageService) {
this._messageService = _messageService;
/**
* property that holds the message to be displayed on the editor
*/
this.ngxMessage = undefined;
this._messageService.getMessage().subscribe((message) => this.ngxMessage = message);
}
/**
* clears editor message
* @return {?}
*/
clearMessage() {
this.ngxMessage = undefined;
}
}
NgxEditorMessageComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-editor-message',
template: "<div class=\"ngx-editor-message\" *ngIf=\"ngxMessage\" (dblclick)=\"clearMessage()\">\n {{ ngxMessage }}\n</div>\n",
styles: [".ngx-editor-message{font-size:80%;background-color:#f1f1f1;border:1px solid #ddd;border-top:transparent;padding:0 .5rem .1rem;transition:.5s ease-in}"]
}] }
];
/** @nocollapse */
NgxEditorMessageComponent.ctorParameters = () => [
{ type: MessageService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class NgxEditorToolbarComponent {
/**
* @param {?} _popOverConfig
* @param {?} _formBuilder
* @param {?} _messageService
* @param {?} _commandExecutorService
*/
constructor(_popOverConfig, _formBuilder, _messageService, _commandExecutorService) {
this._popOverConfig = _popOverConfig;
this._formBuilder = _formBuilder;
this._messageService = _messageService;
this._commandExecutorService = _commandExecutorService;
/**
* set to false when image is being uploaded
*/
this.uploadComplete = true;
/**
* upload percentage
*/
this.updloadPercentage = 0;
/**
* set to true when the image is being uploaded
*/
this.isUploading = false;
/**
* which tab to active for color insetion
*/
this.selectedColorTab = 'textColor';
/**
* font family name
*/
this.fontName = '';
/**
* font size
*/
this.fontSize = '';
/**
* hex color code
*/
this.hexColor = '';
/**
* show/hide image uploader
*/
this.isImageUploader = false;
/**
* set array for drobdown fontSize text
*/
this.arrayFontSize = Array(99).fill(1).map((_, i) => i + 2);
/**
* Emits an event when a toolbar button is clicked
*/
this.execute = new EventEmitter();
this.chooseImageGallery = new EventEmitter();
this._popOverConfig.outsideClick = true;
this._popOverConfig.placement = 'bottom';
this._popOverConfig.container = 'body';
}
/**
* enable or diable toolbar based on configuration
*
* @param {?} value name of the toolbar buttons
* @return {?}
*/
canEnableToolbarOptions(value) {
return canEnableToolbarOptions(value, this.config['toolbar']);
}
/**
* triggers command from the toolbar to be executed and emits an event
*
* @param {?} command name of the command to be executed
* @return {?}
*/
triggerCommand(command) {
this.execute.emit(command);
}
/**
* create URL insert form
* @return {?}
*/
buildUrlForm() {
this.urlForm = this._formBuilder.group({
urlLink: ['', [Validators.required]],
urlText: [''],
urlNewTab: [false]
});
}
/**
* inserts link in the editor
* @return {?}
*/
insertLink() {
try {
this._commandExecutorService.createLink(this.urlForm.value);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
/** reset form to default */
this.buildUrlForm();
/** close inset URL pop up */
this.urlPopover.hide();
}
/**
* create insert image form
* @return {?}
*/
buildImageForm() {
this.imageForm = this._formBuilder.group({
imageUrl: ['', [Validators.required]]
});
}
/**
* create insert image form
* @return {?}
*/
buildVideoForm() {
this.videoForm = this._formBuilder.group({
videoUrl: ['', [Validators.required]],
height: [''],
width: ['']
});
}
/**
* Executed when file is selected
*
* @param {?} e onChange event
* @return {?}
*/
onFileChange(e) {
this.uploadComplete = false;
this.isUploading = true;
if (e.target.files.length > 0) {
/** @type {?} */
const file = e.target.files[0];
try {
this._commandExecutorService.uploadImage(file, this.config.imageEndPoint).subscribe(event => {
if (event.type) {
this.updloadPercentage = Math.round(100 * event.loaded / event.total);
}
if (event instanceof HttpResponse) {
try {
this._commandExecutorService.insertImage(event.body.url);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
this.uploadComplete = true;
this.isUploading = false;
}
});
}
catch (error) {
this._messageService.sendMessage(error.message);
this.uploadComplete = true;
this.isUploading = false;
}
}
}
/**
* insert image in the editor
* @return {?}
*/
insertImage() {
try {
this._commandExecutorService.insertImage(this.imageForm.value.imageUrl);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
/** reset form to default */
this.buildImageForm();
/** close inset URL pop up */
this.imagePopover.hide();
}
/**
* insert image in the editor
* @return {?}
*/
insertVideo() {
try {
this._commandExecutorService.insertVideo(this.videoForm.value);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
/** reset form to default */
this.buildVideoForm();
/** close inset URL pop up */
this.videoPopover.hide();
}
/**
* @param {?} event
* @return {?}
*/
handleChange(event) {
this.insertColor(event.color.hex);
}
/**
* inser text/background color
* @param {?} color
* @return {?}
*/
insertColor(color) {
try {
this._commandExecutorService.insertColor(color);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
this.colorPopover.hide();
}
/**
* set font size
* @param {?} fontSize
* @return {?}
*/
setFontSize(fontSize) {
try {
this._commandExecutorService.setFontSize(fontSize);
this.triggerCommand('refresh');
}
catch (error) {
this._messageService.sendMessage(error.message);
}
this.fontSizePopover.hide();
}
/**
* set font Name/family
* @param {?} fontName
* @return {?}
*/
setFontName(fontName) {
try {
this._commandExecutorService.setFontName(fontName);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
this.fontSizePopover.hide();
}
/**
* @return {?}
*/
ngOnInit() {
this.buildUrlForm();
this.buildImageForm();
this.buildVideoForm();
}
/**
* @param {?} imageUrl
* @return {?}
*/
insertImageFromLibrary(imageUrl) {
try {
this._commandExecutorService.insertImage(imageUrl);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
}
/**
* @return {?}
*/
chooseImageFromGallery() {
this.imagePopover.hide();
this.chooseImageGallery.emit(this);
}
}
NgxEditorToolbarComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-editor-toolbar',
template: "<div class=\"ngx-toolbar\" *ngIf=\"config['showToolbar']\">\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('bold')\" (click)=\"triggerCommand('bold')\"\n title=\"Bold\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-bold\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('italic')\" (click)=\"triggerCommand('italic')\"\n title=\"Italic\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-italic\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('underline')\" (click)=\"triggerCommand('underline')\"\n title=\"Underline\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-underline\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('strikeThrough')\" (click)=\"triggerCommand('strikeThrough')\"\n title=\"Strikethrough\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-strikethrough\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('superscript')\" (click)=\"triggerCommand('superscript')\"\n title=\"Superscript\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-superscript\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('subscript')\" (click)=\"triggerCommand('subscript')\"\n title=\"Subscript\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-subscript\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('fontName')\" (click)=\"fontName = ''\"\n title=\"Font Family\" [popover]=\"fontNameTemplate\" #fontNamePopover=\"bs-popover\" containerClass=\"ngxePopover\"\n [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-font\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('fontSize')\" (click)=\"fontSize = ''\"\n title=\"Font Size\" [popover]=\"fontSizeTemplate\" #fontSizePopover=\"bs-popover\" containerClass=\"ngxePopover\"\n [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-text-height\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('color')\" (click)=\"hexColor = ''\"\n title=\"Color Picker\" [popover]=\"insertColorTemplate\" #colorPopover=\"bs-popover\" containerClass=\"ngxePopover\"\n [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-tint\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyLeft')\" (click)=\"triggerCommand('justifyLeft')\"\n title=\"Justify Left\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-align-left\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyCenter')\" (click)=\"triggerCommand('justifyCenter')\"\n title=\"Justify Center\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-align-center\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyRight')\" (click)=\"triggerCommand('justifyRight')\"\n title=\"Justify Right\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-align-right\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyFull')\" (click)=\"triggerCommand('justifyFull')\"\n title=\"Justify\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-align-justify\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('indent')\" (click)=\"triggerCommand('indent')\"\n title=\"Indent\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-indent\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('outdent')\" (click)=\"triggerCommand('outdent')\"\n title=\"Outdent\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-outdent\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('cut')\" (click)=\"triggerCommand('cut')\"\n title=\"Cut\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-scissors\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('copy')\" (click)=\"triggerCommand('copy')\"\n title=\"Copy\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-files-o\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('delete')\" (click)=\"triggerCommand('delete')\"\n title=\"Delete\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-trash\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('removeFormat')\" (click)=\"triggerCommand('removeFormat')\"\n title=\"Clear Formatting\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-eraser\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('undo')\" (click)=\"triggerCommand('undo')\"\n title=\"Undo\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-undo\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('redo')\" (click)=\"triggerCommand('redo')\"\n title=\"Redo\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-repeat\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('paragraph')\" (click)=\"triggerCommand('insertParagraph')\"\n title=\"Paragraph\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-paragraph\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('blockquote')\" (click)=\"triggerCommand('blockquote')\"\n title=\"Blockquote\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-quote-left\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('removeBlockquote')\" (click)=\"triggerCommand('removeBlockquote')\"\n title=\"Remove Blockquote\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-quote-right\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('horizontalLine')\" (click)=\"triggerCommand('insertHorizontalRule')\"\n title=\"Horizontal Line\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('unorderedList')\" (click)=\"triggerCommand('insertUnorderedList')\"\n title=\"Unordered List\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-list-ul\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('orderedList')\" (click)=\"triggerCommand('insertOrderedList')\"\n title=\"Ordered List\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-list-ol\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('link')\" (click)=\"buildUrlForm()\"\n [popover]=\"insertLinkTemplate\" title=\"Insert Link\" #urlPopover=\"bs-popover\" containerClass=\"ngxePopover\"\n [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-link\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('unlink')\" (click)=\"triggerCommand('unlink')\"\n title=\"Unlink\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-chain-broken\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('image')\" (click)=\"buildImageForm()\"\n title=\"Insert Image\" [popover]=\"insertImageTemplate\" #imagePopover=\"bs-popover\" containerClass=\"ngxePopover\"\n [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-picture-o\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('video')\" (click)=\"buildVideoForm()\"\n title=\"Insert Video\" [popover]=\"insertVideoTemplate\" #videoPopover=\"bs-popover\" containerClass=\"ngxePopover\"\n [disabled]=\"!config['enableToolbar']\">\n <i class=\"fab fa-youtube\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"ngx-toolbar-set\">\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('code')\" (click)=\"triggerCommand('code')\"\n title=\"View Code\" [disabled]=\"!config['enableToolbar']\">\n <i class=\"fa fa-code\" aria-hidden=\"true\"></i>\n </button>\n </div>\n</div>\n\n<!-- URL Popover template -->\n<ng-template #insertLinkTemplate>\n <div class=\"ngxe-popover extra-gt\">\n <form [formGroup]=\"urlForm\" (ngSubmit)=\"urlForm.valid && insertLink()\" autocomplete=\"off\">\n <div class=\"form-group\">\n <label for=\"urlInput\" class=\"small\">URL</label>\n <input type=\"text\" class=\"form-control-sm\" id=\"URLInput\" placeholder=\"URL\" formControlName=\"urlLink\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"urlTextInput\" class=\"small\">Text</label>\n <input type=\"text\" class=\"form-control-sm\" id=\"urlTextInput\" placeholder=\"Text\" formControlName=\"urlText\">\n </div>\n <div class=\"form-check\">\n <input type=\"checkbox\" class=\"form-check-input\" id=\"urlNewTab\" formControlName=\"urlNewTab\">\n <label class=\"form-check-label\" for=\"urlNewTab\">Open in new tab</label>\n </div>\n <button type=\"submit\" class=\"btn-primary btn-sm btn\">Submit</button>\n </form>\n </div>\n</ng-template>\n\n<!-- Image Uploader Popover template -->\n<ng-template #insertImageTemplate>\n <div class=\"ngxe-popover imgc-ctnr\">\n <div class=\"imgc-topbar btn-ctnr\">\n <button type=\"button\" class=\"btn\" [ngClass]=\"{active: isImageUploader}\" (click)=\"isImageUploader = true\">\n <i class=\"fa fa-upload\"></i>\n </button>\n <button type=\"button\" class=\"btn\" [ngClass]=\"{active: !isImageUploader}\" (click)=\"isImageUploader = false\">\n <i class=\"fa fa-link\"></i>\n <