ngx-editor-imageupload
Version:
WYSIWYG Editor for Angular Applications
1,181 lines (1,172 loc) • 71.5 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import { Injectable, Component, Input, Output, ViewChild, EventEmitter, Renderer2, forwardRef, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
import { PopoverConfig, PopoverModule } from 'ngx-bootstrap';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,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((/**
* @param {?} array
* @return {?}
*/
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,missingOverride,missingReturn,unusedPrivateMembers,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) {
/** @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
*
* @private
* @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
* @private
* @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) {
/** @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
* @param {?} where where the color has to be inserted either text/background
* @return {?}
*/
insertColor(color, where) {
if (this.savedSelection) {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored && this.checkSelection()) {
if (where === 'textColor') {
document.execCommand('foreColor', false, color);
}
else {
document.execCommand('hiliteColor', 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) {
if (this.savedSelection && this.checkSelection()) {
/** @type {?} */
const deletedValue = this.deleteAndGetElement();
if (deletedValue) {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored) {
if (this.isNumeric(fontSize)) {
/** @type {?} */
const fontPx = '<span style="font-size: ' + fontSize + 'px;">' + deletedValue + '</span>';
this.insertHtml(fontPx);
}
else {
/** @type {?} */
const fontPx = '<span style="font-size: ' + fontSize + ';">' + deletedValue + '</span>';
this.insertHtml(fontPx);
}
}
}
}
else {
throw new Error('Range out of the editor');
}
}
/**
* set font name/family for text
*
* @param {?} fontName font-family to be set
* @return {?}
*/
setFontName(fontName) {
if (this.savedSelection && this.checkSelection()) {
/** @type {?} */
const deletedValue = this.deleteAndGetElement();
if (deletedValue) {
/** @type {?} */
const restored = restoreSelection(this.savedSelection);
if (restored) {
if (this.isNumeric(fontName)) {
/** @type {?} */
const fontFamily = '<span style="font-family: ' + fontName + 'px;">' + deletedValue + '</span>';
this.insertHtml(fontFamily);
}
else {
/** @type {?} */
const fontFamily = '<span style="font-family: ' + fontName + ';">' + deletedValue + '</span>';
this.insertHtml(fontFamily);
}
}
}
}
else {
throw new Error('Range out of the editor');
}
}
/**
* insert HTML
* @private
* @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
* @private
* @param {?} value
* @return {?}
*/
isNumeric(value) {
return /^-{0,1}\d+$/.test(value);
}
/**
* delete the text at selected range and return the value
* @private
* @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
* @private
* @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
*
* @private
* @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,missingOverride,missingReturn,unusedPrivateMembers,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
*
* @private
* @param {?} milliseconds time in seconds in which the message has to be cleared
* @return {?}
*/
clearMessageIn(milliseconds) {
setTimeout((/**
* @return {?}
*/
() => {
this.message.next(undefined);
}), milliseconds);
}
}
MessageService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
MessageService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,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']
]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,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();
/**
* emits `uploadImage` event when image is selected
*/
this.uploadImage = new EventEmitter();
this.Utils = Utils;
}
/**
* 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');
}
/**
* Executed when the image from the disc is selected
* @param {?} image uploaded file object
* @return {?}
*/
onUploadImage(image) {
this.uploadImage.emit(image);
}
/**
* 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;
}
/**
* editor actions, i.e., executes command from toolbar
*
* @param {?} commandName name of the command to be executed
* @return {?}
*/
executeCommand(commandName) {
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);
}
/**
* 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 {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.uploadedImagePath && this.uploadedImagePath !== this.prevUploadedImagePath) {
this._commandExecutor.insertImage(this.uploadedImagePath);
this.prevUploadedImagePath = this.uploadedImagePath;
}
}
}
NgxEditorComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-editor',
template: "<div class=\"ngx-editor\" id=\"ngxEditor\" [style.width]=\"config['width']\" [style.minWidth]=\"config['minWidth']\" tabindex=\"0\"\r\n (focus)=\"onEditorFocus()\">\r\n\r\n <app-ngx-editor-toolbar [config]=\"config\" (execute)=\"executeCommand($event)\" (uploadImage)=\"onUploadImage($event)\"></app-ngx-editor-toolbar>\r\n\r\n <!-- text area -->\r\n <div class=\"ngx-wrapper\" #ngxWrapper>\r\n <div class=\"ngx-editor-textarea\" [attr.contenteditable]=\"config['editable']\" (input)=\"onContentChange($event.target.innerHTML)\"\r\n [attr.translate]=\"config['translate']\" [attr.spellcheck]=\"config['spellcheck']\" [attr.uploadedImagePath]=\"uploadedImagePath\" [style.height]=\"config['height']\"\r\n [style.minHeight]=\"config['minHeight']\" [style.resize]=\"Utils?.canResize(resizer)\" (focus)=\"onTextAreaFocus()\"\r\n (blur)=\"onTextAreaBlur()\" #ngxTextArea></div>\r\n\r\n <span class=\"ngx-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\r\n </div>\r\n\r\n <app-ngx-editor-message></app-ngx-editor-message>\r\n <app-ngx-grippie *ngIf=\"resizer === 'stack'\"></app-ngx-grippie>\r\n\r\n</div>\r\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => 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}"]
}] }
];
/** @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 }],
uploadedImagePath: [{ type: Input }],
showToolbar: [{ type: Input }],
enableToolbar: [{ type: Input }],
imageEndPoint: [{ type: Input }],
blur: [{ type: Output }],
focus: [{ type: Output }],
uploadImage: [{ type: Output }],
textArea: [{ type: ViewChild, args: ['ngxTextArea',] }],
ngxWrapper: [{ type: ViewChild, args: ['ngxWrapper',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,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\">\r\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\"\r\n width=\"26\" height=\"5\">\r\n <g id=\"sprites\">\r\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\"\r\n fill=\"rgb(147,153,159)\" />\r\n </g>\r\n </svg>\r\n</div>\r\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,missingOverride,missingReturn,unusedPrivateMembers,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((/**
* @param {?} message
* @return {?}
*/
(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()\">\r\n {{ ngxMessage }}\r\n</div>\r\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,missingOverride,missingReturn,unusedPrivateMembers,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;
/**
* Emits an event when a toolbar button is clicked
*/
this.execute = new EventEmitter();
/**
* Emits an event then an image is selected
*/
this.uploadImage = 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: ['', [Validators.required]],
urlNewTab: [true]
});
}
/**
* 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];
if (!this.config.imageEndPoint) {
this.uploadImage.emit(file);
this.uploadComplete = true;
this.isUploading = false;
}
else {
try {
this._commandExecutorService.uploadImage(file, this.config.imageEndPoint).subscribe((/**
* @param {?} event
* @return {?}
*/
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
* @param {?=} imagepath
* @return {?}
*/
insertImage(imagepath) {
try {
this._commandExecutorService.insertImage(imagepath || 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();
}
/**
* inser text/background color
* @param {?} color
* @param {?} where
* @return {?}
*/
insertColor(color, where) {
try {
this._commandExecutorService.insertColor(color, where);
}
catch (error) {
this._messageService.sendMessage(error.message);
}
this.colorPopover.hide();
}
/**
* set font size
* @param {?} fontSize
* @return {?}
*/
setFontSize(fontSize) {
try {
this._commandExecutorService.setFontSize(fontSize);
}
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();
}
}
NgxEditorToolbarComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-editor-toolbar',
template: "<div class=\"ngx-toolbar\" *ngIf=\"config['showToolbar']\">\r\n <div class=\"ngx-toolbar-set\">\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('bold')\" (click)=\"triggerCommand('bold')\"\r\n title=\"Bold\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-bold\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('italic')\" (click)=\"triggerCommand('italic')\"\r\n title=\"Italic\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-italic\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('underline')\" (click)=\"triggerCommand('underline')\"\r\n title=\"Underline\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-underline\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('strikeThrough')\" (click)=\"triggerCommand('strikeThrough')\"\r\n title=\"Strikethrough\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-strikethrough\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('superscript')\" (click)=\"triggerCommand('superscript')\"\r\n title=\"Superscript\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-superscript\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('subscript')\" (click)=\"triggerCommand('subscript')\"\r\n title=\"Subscript\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-subscript\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ngx-toolbar-set\">\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('fontName')\" (click)=\"fontName = ''\"\r\n title=\"Font Family\" [popover]=\"fontNameTemplate\" #fontNamePopover=\"bs-popover\" containerClass=\"ngxePopover\"\r\n [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-font\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('fontSize')\" (click)=\"fontSize = ''\"\r\n title=\"Font Size\" [popover]=\"fontSizeTemplate\" #fontSizePopover=\"bs-popover\" containerClass=\"ngxePopover\"\r\n [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-text-height\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('color')\" (click)=\"hexColor = ''\"\r\n title=\"Color Picker\" [popover]=\"insertColorTemplate\" #colorPopover=\"bs-popover\" containerClass=\"ngxePopover\"\r\n [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-tint\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ngx-toolbar-set\">\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyLeft')\" (click)=\"triggerCommand('justifyLeft')\"\r\n title=\"Justify Left\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-align-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyCenter')\" (click)=\"triggerCommand('justifyCenter')\"\r\n title=\"Justify Center\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-align-center\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyRight')\" (click)=\"triggerCommand('justifyRight')\"\r\n title=\"Justify Right\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-align-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('justifyFull')\" (click)=\"triggerCommand('justifyFull')\"\r\n title=\"Justify\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-align-justify\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('indent')\" (click)=\"triggerCommand('indent')\"\r\n title=\"Indent\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-indent\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('outdent')\" (click)=\"triggerCommand('outdent')\"\r\n title=\"Outdent\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-outdent\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ngx-toolbar-set\">\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('cut')\" (click)=\"triggerCommand('cut')\"\r\n title=\"Cut\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-scissors\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('copy')\" (click)=\"triggerCommand('copy')\"\r\n title=\"Copy\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-files-o\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('delete')\" (click)=\"triggerCommand('delete')\"\r\n title=\"Delete\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-trash\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('removeFormat')\" (click)=\"triggerCommand('removeFormat')\"\r\n title=\"Clear Formatting\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-eraser\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('undo')\" (click)=\"triggerCommand('undo')\"\r\n title=\"Undo\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-undo\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('redo')\" (click)=\"triggerCommand('redo')\"\r\n title=\"Redo\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-repeat\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ngx-toolbar-set\">\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('paragraph')\" (click)=\"triggerCommand('insertParagraph')\"\r\n title=\"Paragraph\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-paragraph\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('blockquote')\" (click)=\"triggerCommand('blockquote')\"\r\n title=\"Blockquote\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-quote-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('removeBlockquote')\" (click)=\"triggerCommand('removeBlockquote')\"\r\n title=\"Remove Blockquote\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-quote-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('horizontalLine')\" (click)=\"triggerCommand('insertHorizontalRule')\"\r\n title=\"Horizontal Line\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('unorderedList')\" (click)=\"triggerCommand('insertUnorderedList')\"\r\n title=\"Unordered List\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-list-ul\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('orderedList')\" (click)=\"triggerCommand('insertOrderedList')\"\r\n title=\"Ordered List\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-list-ol\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ngx-toolbar-set\">\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('link')\" (click)=\"buildUrlForm()\"\r\n [popover]=\"insertLinkTemplate\" title=\"Insert Link\" #urlPopover=\"bs-popover\" containerClass=\"ngxePopover\"\r\n [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-link\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('unlink')\" (click)=\"triggerCommand('unlink')\"\r\n title=\"Unlink\" [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-chain-broken\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('image')\" (click)=\"buildImageForm()\"\r\n title=\"Insert Image\" [popover]=\"insertImageTemplate\" #imagePopover=\"bs-popover\" containerClass=\"ngxePopover\"\r\n [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-picture-o\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" class=\"ngx-editor-button\" *ngIf=\"canEnableToolbarOptions('video')\" (click)=\"buildVideoForm()\"\r\n title=\"Insert Video\" [popover]=\"insertVideoTemplate\" #videoPopover=\"bs-popover\" containerClass=\"ngxePopover\"\r\n [disabled]=\"!config['enableToolbar']\">\r\n <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- URL Popover template -->\r\n<ng-template #insertLinkTemplate>\r\n <div class=\"ngxe-popover extra-gt\">\r\n <form [formGroup]=\"urlForm\" (ngSubmit)=\"urlForm.valid && insertL