ngx-editor-imageupload
Version:
WYSIWYG Editor for Angular Applications
1,511 lines (1,502 loc) • 85.4 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 {?} */
var found = toolbar.filter((/**
* @param {?} array
* @return {?}
*/
function (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 (var 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 {?} */
var 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 {?} */
var 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
*/
var CommandExecutorService = /** @class */ (function () {
/**
*
* @param _http HTTP Client for making http requests
*/
function CommandExecutorService(_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
*/
/**
* executes command from the toolbar
*
* @param {?} command command to be executed
* @return {?}
*/
CommandExecutorService.prototype.execute = /**
* executes command from the toolbar
*
* @param {?} command command to be executed
* @return {?}
*/
function (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
*/
/**
* inserts image in the editor
*
* @param {?} imageURI url of the image to be inserted
* @return {?}
*/
CommandExecutorService.prototype.insertImage = /**
* inserts image in the editor
*
* @param {?} imageURI url of the image to be inserted
* @return {?}
*/
function (imageURI) {
if (this.savedSelection) {
if (imageURI) {
/** @type {?} */
var restored = restoreSelection(this.savedSelection);
if (restored) {
/** @type {?} */
var 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
*/
/**
* inserts image in the editor
*
* @param {?} videParams url of the image to be inserted
* @return {?}
*/
CommandExecutorService.prototype.insertVideo = /**
* inserts image in the editor
*
* @param {?} videParams url of the image to be inserted
* @return {?}
*/
function (videParams) {
if (this.savedSelection) {
if (videParams) {
/** @type {?} */
var restored = restoreSelection(this.savedSelection);
if (restored) {
if (this.isYoutubeLink(videParams.videoUrl)) {
/** @type {?} */
var 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 {?} */
var 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
*/
/**
* checks the input url is a valid youtube URL or not
*
* @private
* @param {?} url Youtue URL
* @return {?}
*/
CommandExecutorService.prototype.isYoutubeLink = /**
* checks the input url is a valid youtube URL or not
*
* @private
* @param {?} url Youtue URL
* @return {?}
*/
function (url) {
/** @type {?} */
var 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
*/
/**
* check whether the string is a valid url or not
* @private
* @param {?} url url
* @return {?}
*/
CommandExecutorService.prototype.isValidURL = /**
* check whether the string is a valid url or not
* @private
* @param {?} url url
* @return {?}
*/
function (url) {
/** @type {?} */
var 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
*/
/**
* 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 {?}
*/
CommandExecutorService.prototype.uploadImage = /**
* 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 {?}
*/
function (file, endPoint) {
if (!endPoint) {
throw new Error('Image Endpoint isn`t provided or invalid');
}
/** @type {?} */
var formData = new FormData();
if (file) {
formData.append('file', file);
/** @type {?} */
var 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
*/
/**
* inserts link in the editor
*
* @param {?} params parameters that holds the information for the link
* @return {?}
*/
CommandExecutorService.prototype.createLink = /**
* inserts link in the editor
*
* @param {?} params parameters that holds the information for the link
* @return {?}
*/
function (params) {
if (this.savedSelection) {
/**
* check whether the saved selection contains a range or plain selection
*/
if (params.urlNewTab) {
/** @type {?} */
var newUrl = '<a href="' + params.urlLink + '" target="_blank">' + params.urlText + '</a>';
if (document.getSelection().type !== 'Range') {
/** @type {?} */
var 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 {?} */
var 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
*/
/**
* 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 {?}
*/
CommandExecutorService.prototype.insertColor = /**
* 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 {?}
*/
function (color, where) {
if (this.savedSelection) {
/** @type {?} */
var 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
*/
/**
* set font size for text
*
* @param {?} fontSize font-size to be set
* @return {?}
*/
CommandExecutorService.prototype.setFontSize = /**
* set font size for text
*
* @param {?} fontSize font-size to be set
* @return {?}
*/
function (fontSize) {
if (this.savedSelection && this.checkSelection()) {
/** @type {?} */
var deletedValue = this.deleteAndGetElement();
if (deletedValue) {
/** @type {?} */
var restored = restoreSelection(this.savedSelection);
if (restored) {
if (this.isNumeric(fontSize)) {
/** @type {?} */
var fontPx = '<span style="font-size: ' + fontSize + 'px;">' + deletedValue + '</span>';
this.insertHtml(fontPx);
}
else {
/** @type {?} */
var 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
*/
/**
* set font name/family for text
*
* @param {?} fontName font-family to be set
* @return {?}
*/
CommandExecutorService.prototype.setFontName = /**
* set font name/family for text
*
* @param {?} fontName font-family to be set
* @return {?}
*/
function (fontName) {
if (this.savedSelection && this.checkSelection()) {
/** @type {?} */
var deletedValue = this.deleteAndGetElement();
if (deletedValue) {
/** @type {?} */
var restored = restoreSelection(this.savedSelection);
if (restored) {
if (this.isNumeric(fontName)) {
/** @type {?} */
var fontFamily = '<span style="font-family: ' + fontName + 'px;">' + deletedValue + '</span>';
this.insertHtml(fontFamily);
}
else {
/** @type {?} */
var fontFamily = '<span style="font-family: ' + fontName + ';">' + deletedValue + '</span>';
this.insertHtml(fontFamily);
}
}
}
}
else {
throw new Error('Range out of the editor');
}
};
/** insert HTML */
/**
* insert HTML
* @private
* @param {?} html
* @return {?}
*/
CommandExecutorService.prototype.insertHtml = /**
* insert HTML
* @private
* @param {?} html
* @return {?}
*/
function (html) {
/** @type {?} */
var 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
*/
/**
* check whether the value is a number or string
* if number return true
* else return false
* @private
* @param {?} value
* @return {?}
*/
CommandExecutorService.prototype.isNumeric = /**
* check whether the value is a number or string
* if number return true
* else return false
* @private
* @param {?} value
* @return {?}
*/
function (value) {
return /^-{0,1}\d+$/.test(value);
};
/** delete the text at selected range and return the value */
/**
* delete the text at selected range and return the value
* @private
* @return {?}
*/
CommandExecutorService.prototype.deleteAndGetElement = /**
* delete the text at selected range and return the value
* @private
* @return {?}
*/
function () {
/** @type {?} */
var slectedText;
if (this.savedSelection) {
slectedText = this.savedSelection.toString();
this.savedSelection.deleteContents();
return slectedText;
}
return false;
};
/** check any slection is made or not */
/**
* check any slection is made or not
* @private
* @return {?}
*/
CommandExecutorService.prototype.checkSelection = /**
* check any slection is made or not
* @private
* @return {?}
*/
function () {
/** @type {?} */
var 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
*/
/**
* check tag is supported by browser or not
*
* @private
* @param {?} tag HTML tag
* @return {?}
*/
CommandExecutorService.prototype.checkTagSupportInBrowser = /**
* check tag is supported by browser or not
*
* @private
* @param {?} tag HTML tag
* @return {?}
*/
function (tag) {
return !(document.createElement(tag) instanceof HTMLUnknownElement);
};
CommandExecutorService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
CommandExecutorService.ctorParameters = function () { return [
{ type: HttpClient }
]; };
return CommandExecutorService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* time in which the message has to be cleared
* @type {?}
*/
var DURATION = 7000;
var MessageService = /** @class */ (function () {
function MessageService() {
/**
* variable to hold the user message
*/
this.message = new Subject();
}
/** returns the message sent by the editor */
/**
* returns the message sent by the editor
* @return {?}
*/
MessageService.prototype.getMessage = /**
* returns the message sent by the editor
* @return {?}
*/
function () {
return this.message.asObservable();
};
/**
* sends message to the editor
*
* @param message message to be sent
*/
/**
* sends message to the editor
*
* @param {?} message message to be sent
* @return {?}
*/
MessageService.prototype.sendMessage = /**
* sends message to the editor
*
* @param {?} message message to be sent
* @return {?}
*/
function (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
*/
/**
* a short interval to clear message
*
* @private
* @param {?} milliseconds time in seconds in which the message has to be cleared
* @return {?}
*/
MessageService.prototype.clearMessageIn = /**
* a short interval to clear message
*
* @private
* @param {?} milliseconds time in seconds in which the message has to be cleared
* @return {?}
*/
function (milliseconds) {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
_this.message.next(undefined);
}), milliseconds);
};
MessageService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
MessageService.ctorParameters = function () { return []; };
return MessageService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* toolbar default configuration
* @type {?}
*/
var 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
*/
var NgxEditorComponent = /** @class */ (function () {
/**
* @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
*/
function NgxEditorComponent(_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
*/
/**
* events
* @return {?}
*/
NgxEditorComponent.prototype.onTextAreaFocus = /**
* events
* @return {?}
*/
function () {
this.focus.emit('focus');
};
/** focus the text area when the editor is focussed */
/**
* focus the text area when the editor is focussed
* @return {?}
*/
NgxEditorComponent.prototype.onEditorFocus = /**
* focus the text area when the editor is focussed
* @return {?}
*/
function () {
this.textArea.nativeElement.focus();
};
/**
* Executed from the contenteditable section while the input property changes
* @param html html string from contenteditable
*/
/**
* Executed from the contenteditable section while the input property changes
* @param {?} innerHTML
* @return {?}
*/
NgxEditorComponent.prototype.onContentChange = /**
* Executed from the contenteditable section while the input property changes
* @param {?} innerHTML
* @return {?}
*/
function (innerHTML) {
if (typeof this.onChange === 'function') {
this.onChange(innerHTML);
this.togglePlaceholder(innerHTML);
}
};
/**
* @return {?}
*/
NgxEditorComponent.prototype.onTextAreaBlur = /**
* @return {?}
*/
function () {
/** 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
*/
/**
* Executed when the image from the disc is selected
* @param {?} image uploaded file object
* @return {?}
*/
NgxEditorComponent.prototype.onUploadImage = /**
* Executed when the image from the disc is selected
* @param {?} image uploaded file object
* @return {?}
*/
function (image) {
this.uploadImage.emit(image);
};
/**
* resizing text area
*
* @param offsetY vertical height of the eidtable portion of the editor
*/
/**
* resizing text area
*
* @param {?} offsetY vertical height of the eidtable portion of the editor
* @return {?}
*/
NgxEditorComponent.prototype.resizeTextArea = /**
* resizing text area
*
* @param {?} offsetY vertical height of the eidtable portion of the editor
* @return {?}
*/
function (offsetY) {
/** @type {?} */
var 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
*/
/**
* editor actions, i.e., executes command from toolbar
*
* @param {?} commandName name of the command to be executed
* @return {?}
*/
NgxEditorComponent.prototype.executeCommand = /**
* editor actions, i.e., executes command from toolbar
*
* @param {?} commandName name of the command to be executed
* @return {?}
*/
function (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
*/
/**
* Write a new value to the element.
*
* @param {?} value value to be executed when there is a change in contenteditable
* @return {?}
*/
NgxEditorComponent.prototype.writeValue = /**
* Write a new value to the element.
*
* @param {?} value value to be executed when there is a change in contenteditable
* @return {?}
*/
function (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
*/
/**
* Set the function to be called
* when the control receives a change event.
*
* @param {?} fn a function
* @return {?}
*/
NgxEditorComponent.prototype.registerOnChange = /**
* Set the function to be called
* when the control receives a change event.
*
* @param {?} fn a function
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* Set the function to be called
* when the control receives a touch event.
*
* @param fn a function
*/
/**
* Set the function to be called
* when the control receives a touch event.
*
* @param {?} fn a function
* @return {?}
*/
NgxEditorComponent.prototype.registerOnTouched = /**
* Set the function to be called
* when the control receives a touch event.
*
* @param {?} fn a function
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* refresh view/HTML of the editor
*
* @param value html string from the editor
*/
/**
* refresh view/HTML of the editor
*
* @param {?} value html string from the editor
* @return {?}
*/
NgxEditorComponent.prototype.refreshView = /**
* refresh view/HTML of the editor
*
* @param {?} value html string from the editor
* @return {?}
*/
function (value) {
/** @type {?} */
var 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
*/
/**
* toggles placeholder based on input string
*
* @param {?} value A HTML string from the editor
* @return {?}
*/
NgxEditorComponent.prototype.togglePlaceholder = /**
* toggles placeholder based on input string
*
* @param {?} value A HTML string from the editor
* @return {?}
*/
function (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
*/
/**
* returns a json containing input params
* @return {?}
*/
NgxEditorComponent.prototype.getCollectiveParams = /**
* returns a json containing input params
* @return {?}
*/
function () {
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 {?}
*/
NgxEditorComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/**
* 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 {?}
*/
NgxEditorComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (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 {?}
*/
function () { 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 = function () { return [
{ 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',] }]
};
return NgxEditorComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxGrippieComponent = /** @class */ (function () {
/**
* Constructor
*
* @param _editorComponent Editor component
*/
function NgxGrippieComponent(_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
*/
/**
*
* @param {?} event Mouseevent
*
* Update the height of the editor when the grabber is dragged
* @return {?}
*/
NgxGrippieComponent.prototype.onMouseMove = /**
*
* @param {?} event Mouseevent
*
* Update the height of the editor when the grabber is dragged
* @return {?}
*/
function (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
*/
/**
*
* @param {?} event Mouseevent
*
* set the grabber to false on mouse up action
* @return {?}
*/
NgxGrippieComponent.prototype.onMouseUp = /**
*
* @param {?} event Mouseevent
*
* set the grabber to false on mouse up action
* @return {?}
*/
function (event) {
this.grabber = false;
};
/**
* @param {?} event
* @param {?=} resizer
* @return {?}
*/
NgxGrippieComponent.prototype.onResize = /**
* @param {?} event
* @param {?=} resizer
* @return {?}
*/
function (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 = function () { return [
{ type: NgxEditorComponent }
]; };
NgxGrippieComponent.propDecorators = {
onMouseMove: [{ type: HostListener, args: ['document:mousemove', ['$event'],] }],
onMouseUp: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }],
onResize: [{ type: HostListener, args: ['mousedown', ['$event'],] }]
};
return NgxGrippieComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxEditorMessageComponent = /** @class */ (function () {
/**
* @param _messageService service to send message to the editor
*/
function NgxEditorMessageComponent(_messageService) {
var _this = this;
this._messageService = _messageService;
/**
* property that holds the message to be displayed on the editor
*/
this.ngxMessage = undefined;
this._messageService.getMessage().subscribe((/**
* @param {?} message
* @return {?}
*/
function (message) { return _this.ngxMessage = message; }));
}
/**
* clears editor message
*/
/**
* clears editor message
* @return {?}
*/
NgxEditorMessageComponent.prototype.clearMessage = /**
* clears editor message
* @return {?}
*/
function () {
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 = function () { return [
{ type: MessageService }
]; };
return NgxEditorMessageComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxEditorToolbarComponent = /** @class */ (function () {
function NgxEditorToolbarComponent(_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
*/
/**
* enable or diable toolbar based on configuration
*
* @param {?} value name of the toolbar buttons
* @return {?}
*/
NgxEditorToolbarComponent.prototype.canEnableToolbarOptions = /**
* enable or diable toolbar based on configuration
*
* @param {?} value name of the toolbar buttons
* @return {?}
*/
function (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
*/
/**
* triggers command from the toolbar to be executed and emits an event
*
* @param {?} command name of the command to be executed
* @return {?}
*/
NgxEditorToolbarComponent.prototype.triggerCommand = /**
* triggers command from the toolbar to be executed and emits an event
*
* @param {?} command name of the command to be executed
* @return {?}
*/
function (command) {
this.execute.emit(command);
};
/**
* create URL insert form
*/
/**
* create URL insert form
* @return {?}
*/
NgxEditorToolbarComponent.prototype.buildUrlForm = /**
* create URL insert form
* @return {?}
*/
function () {
this.urlForm = this._formBuilder.group({
urlLink: ['', [Validators.required]],
urlText: ['', [Validators.required]],
urlNewTab: [true]
});
};
/**
* inserts link in the editor
*/
/**
* inserts link in the editor
* @return {?}
*/
NgxEditorToolbarComponent.prototype.insertLink = /**
* inserts link in the editor
* @return {?}
*/
function () {
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
*/
/**
* create insert image form
* @return {?}
*/
NgxEditorToolbarComponent.prototype.buildImageForm = /**
* create insert image form
* @return {?}
*/
function () {
this.imageForm = this._formBuilder.group({
imageUrl: ['', [Validators.required]]
});
};
/**
* create insert image form
*/
/**
* create insert image form
* @return {?}
*/
NgxEditorToolbarComponent.prototype.buildVideoForm = /**
* create insert image form
* @return {?}
*/
function () {
this.videoForm = this._formBuilder.group({
videoUrl: ['', [Validators.required]],
height: [''],
width: ['']
});
};
/**
* Executed when file is selected
*
* @param e onChange event
*/
/**
* Executed when file is selected
*
* @param {?} e onChange event
* @return {?}
*/
NgxEditorToolbarComponent.prototype.onFileChange = /**
* Executed when file is selected
*
* @param {?} e onChange event
* @return {?}
*/
function (e) {
var _this = this;
this.uploadComplete = false;
this.isUploading = true;
if (e.target.files.length > 0) {
/** @type {?} */
var 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 {?}
*/
function (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 */
/**
* insert image in the editor
* @pa