@kolkov/angular-editor
Version:
A simple native WYSIWYG editor for Angular 6+, 7+, 8+. Rich Text editor component for Angular.
1,214 lines (1,211 loc) • 169 kB
JavaScript
import { Injectable, Inject, ɵɵdefineInjectable, ɵɵinject, EventEmitter, Component, Renderer2, Input, Output, ViewChild, SecurityContext, forwardRef, ChangeDetectorRef, Attribute, HostBinding, HostListener, ViewEncapsulation, ElementRef, NgModule } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DOCUMENT, CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { __values } from 'tslib';
import { DomSanitizer } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function UploadResponse() { }
if (false) {
/** @type {?} */
UploadResponse.prototype.imageUrl;
}
var AngularEditorService = /** @class */ (function () {
function AngularEditorService(http, doc) {
var _this = this;
this.http = http;
this.doc = doc;
/**
* save selection when the editor is focussed out
*/
this.saveSelection = (/**
* @return {?}
*/
function () {
if (_this.doc.getSelection) {
/** @type {?} */
var sel = _this.doc.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
_this.savedSelection = sel.getRangeAt(0);
_this.selectedText = sel.toString();
}
}
else if (_this.doc.getSelection && _this.doc.createRange) {
_this.savedSelection = document.createRange();
}
else {
_this.savedSelection = null;
}
});
}
/**
* Executed command from editor header buttons exclude toggleEditorMode
* @param command string from triggerCommand
*/
/**
* Executed command from editor header buttons exclude toggleEditorMode
* @param {?} command string from triggerCommand
* @return {?}
*/
AngularEditorService.prototype.executeCommand = /**
* Executed command from editor header buttons exclude toggleEditorMode
* @param {?} command string from triggerCommand
* @return {?}
*/
function (command) {
/** @type {?} */
var commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
if (commands.includes(command)) {
this.doc.execCommand('formatBlock', false, command);
return;
}
this.doc.execCommand(command, false, null);
};
/**
* Create URL link
* @param url string from UI prompt
*/
/**
* Create URL link
* @param {?} url string from UI prompt
* @return {?}
*/
AngularEditorService.prototype.createLink = /**
* Create URL link
* @param {?} url string from UI prompt
* @return {?}
*/
function (url) {
if (!url.includes('http')) {
this.doc.execCommand('createlink', false, url);
}
else {
/** @type {?} */
var newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
this.insertHtml(newUrl);
}
};
/**
* 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 {?}
*/
AngularEditorService.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) {
/** @type {?} */
var restored = this.restoreSelection();
if (restored) {
if (where === 'textColor') {
this.doc.execCommand('foreColor', false, color);
}
else {
this.doc.execCommand('hiliteColor', false, color);
}
}
};
/**
* Set font name
* @param fontName string
*/
/**
* Set font name
* @param {?} fontName string
* @return {?}
*/
AngularEditorService.prototype.setFontName = /**
* Set font name
* @param {?} fontName string
* @return {?}
*/
function (fontName) {
this.doc.execCommand('fontName', false, fontName);
};
/**
* Set font size
* @param fontSize string
*/
/**
* Set font size
* @param {?} fontSize string
* @return {?}
*/
AngularEditorService.prototype.setFontSize = /**
* Set font size
* @param {?} fontSize string
* @return {?}
*/
function (fontSize) {
this.doc.execCommand('fontSize', false, fontSize);
};
/**
* Create raw HTML
* @param html HTML string
*/
/**
* Create raw HTML
* @param {?} html HTML string
* @return {?}
*/
AngularEditorService.prototype.insertHtml = /**
* Create raw HTML
* @param {?} html HTML string
* @return {?}
*/
function (html) {
/** @type {?} */
var isHTMLInserted = this.doc.execCommand('insertHTML', false, html);
if (!isHTMLInserted) {
throw new Error('Unable to perform the operation');
}
};
/**
* restore selection when the editor is focused in
*
* saved selection when the editor is focused out
*/
/**
* restore selection when the editor is focused in
*
* saved selection when the editor is focused out
* @return {?}
*/
AngularEditorService.prototype.restoreSelection = /**
* restore selection when the editor is focused in
*
* saved selection when the editor is focused out
* @return {?}
*/
function () {
if (this.savedSelection) {
if (this.doc.getSelection) {
/** @type {?} */
var sel = this.doc.getSelection();
sel.removeAllRanges();
sel.addRange(this.savedSelection);
return true;
}
else if (this.doc.getSelection /*&& this.savedSelection.select*/) {
// this.savedSelection.select();
return true;
}
}
else {
return false;
}
};
/**
* setTimeout used for execute 'saveSelection' method in next event loop iteration
*/
/**
* setTimeout used for execute 'saveSelection' method in next event loop iteration
* @param {?} callbackFn
* @param {?=} timeout
* @return {?}
*/
AngularEditorService.prototype.executeInNextQueueIteration = /**
* setTimeout used for execute 'saveSelection' method in next event loop iteration
* @param {?} callbackFn
* @param {?=} timeout
* @return {?}
*/
function (callbackFn, timeout) {
if (timeout === void 0) { timeout = 1e2; }
setTimeout(callbackFn, timeout);
};
/** check any selection is made or not */
/**
* check any selection is made or not
* @private
* @return {?}
*/
AngularEditorService.prototype.checkSelection = /**
* check any selection is made or not
* @private
* @return {?}
*/
function () {
/** @type {?} */
var selectedText = this.savedSelection.toString();
if (selectedText.length === 0) {
throw new Error('No Selection Made');
}
return true;
};
/**
* Upload file to uploadUrl
* @param file The file
*/
/**
* Upload file to uploadUrl
* @param {?} file The file
* @return {?}
*/
AngularEditorService.prototype.uploadImage = /**
* Upload file to uploadUrl
* @param {?} file The file
* @return {?}
*/
function (file) {
/** @type {?} */
var uploadData = new FormData();
uploadData.append('file', file, file.name);
return this.http.post(this.uploadUrl, uploadData, {
reportProgress: true,
observe: 'events',
withCredentials: this.uploadWithCredentials,
});
};
/**
* Insert image with Url
* @param imageUrl The imageUrl.
*/
/**
* Insert image with Url
* @param {?} imageUrl The imageUrl.
* @return {?}
*/
AngularEditorService.prototype.insertImage = /**
* Insert image with Url
* @param {?} imageUrl The imageUrl.
* @return {?}
*/
function (imageUrl) {
this.doc.execCommand('insertImage', false, imageUrl);
};
/**
* @param {?} separator
* @return {?}
*/
AngularEditorService.prototype.setDefaultParagraphSeparator = /**
* @param {?} separator
* @return {?}
*/
function (separator) {
this.doc.execCommand('defaultParagraphSeparator', false, separator);
};
/**
* @param {?} customClass
* @return {?}
*/
AngularEditorService.prototype.createCustomClass = /**
* @param {?} customClass
* @return {?}
*/
function (customClass) {
/** @type {?} */
var newTag = this.selectedText;
if (customClass) {
/** @type {?} */
var tagName = customClass.tag ? customClass.tag : 'span';
newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
}
this.insertHtml(newTag);
};
/**
* @param {?} videoUrl
* @return {?}
*/
AngularEditorService.prototype.insertVideo = /**
* @param {?} videoUrl
* @return {?}
*/
function (videoUrl) {
if (videoUrl.match('www.youtube.com')) {
this.insertYouTubeVideoTag(videoUrl);
}
if (videoUrl.match('vimeo.com')) {
this.insertVimeoVideoTag(videoUrl);
}
};
/**
* @private
* @param {?} videoUrl
* @return {?}
*/
AngularEditorService.prototype.insertYouTubeVideoTag = /**
* @private
* @param {?} videoUrl
* @return {?}
*/
function (videoUrl) {
/** @type {?} */
var id = videoUrl.split('v=')[1];
/** @type {?} */
var imageUrl = "https://img.youtube.com/vi/" + id + "/0.jpg";
/** @type {?} */
var thumbnail = "\n <div style='position: relative'>\n <img style='position: absolute; left:200px; top:140px'\n src=\"https://img.icons8.com/color/96/000000/youtube-play.png\"/>\n <a href='" + videoUrl + "' target='_blank'>\n <img src=\"" + imageUrl + "\" alt=\"click to watch\"/>\n </a>\n </div>";
this.insertHtml(thumbnail);
};
/**
* @private
* @param {?} videoUrl
* @return {?}
*/
AngularEditorService.prototype.insertVimeoVideoTag = /**
* @private
* @param {?} videoUrl
* @return {?}
*/
function (videoUrl) {
var _this = this;
/** @type {?} */
var sub = this.http.get("https://vimeo.com/api/oembed.json?url=" + videoUrl).subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
/** @type {?} */
var imageUrl = data.thumbnail_url_with_play_button;
/** @type {?} */
var thumbnail = "<div>\n <a href='" + videoUrl + "' target='_blank'>\n <img src=\"" + imageUrl + "\" alt=\"" + data.title + "\"/>\n </a>\n </div>";
_this.insertHtml(thumbnail);
sub.unsubscribe();
}));
};
/**
* @param {?} node
* @return {?}
*/
AngularEditorService.prototype.nextNode = /**
* @param {?} node
* @return {?}
*/
function (node) {
if (node.hasChildNodes()) {
return node.firstChild;
}
else {
while (node && !node.nextSibling) {
node = node.parentNode;
}
if (!node) {
return null;
}
return node.nextSibling;
}
};
/**
* @param {?} range
* @param {?} includePartiallySelectedContainers
* @return {?}
*/
AngularEditorService.prototype.getRangeSelectedNodes = /**
* @param {?} range
* @param {?} includePartiallySelectedContainers
* @return {?}
*/
function (range, includePartiallySelectedContainers) {
/** @type {?} */
var node = range.startContainer;
/** @type {?} */
var endNode = range.endContainer;
/** @type {?} */
var rangeNodes = [];
// Special case for a range that is contained within a single node
if (node === endNode) {
rangeNodes = [node];
}
else {
// Iterate nodes until we hit the end container
while (node && node !== endNode) {
rangeNodes.push(node = this.nextNode(node));
}
// Add partially selected nodes at the start of the range
node = range.startContainer;
while (node && node !== range.commonAncestorContainer) {
rangeNodes.unshift(node);
node = node.parentNode;
}
}
// Add ancestors of the range container, if required
if (includePartiallySelectedContainers) {
node = range.commonAncestorContainer;
while (node) {
rangeNodes.push(node);
node = node.parentNode;
}
}
return rangeNodes;
};
/**
* @return {?}
*/
AngularEditorService.prototype.getSelectedNodes = /**
* @return {?}
*/
function () {
/** @type {?} */
var nodes = [];
if (this.doc.getSelection) {
/** @type {?} */
var sel = this.doc.getSelection();
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
nodes.push.apply(nodes, this.getRangeSelectedNodes(sel.getRangeAt(i), true));
}
}
return nodes;
};
/**
* @param {?} el
* @return {?}
*/
AngularEditorService.prototype.replaceWithOwnChildren = /**
* @param {?} el
* @return {?}
*/
function (el) {
/** @type {?} */
var parent = el.parentNode;
while (el.hasChildNodes()) {
parent.insertBefore(el.firstChild, el);
}
parent.removeChild(el);
};
/**
* @param {?} tagNames
* @return {?}
*/
AngularEditorService.prototype.removeSelectedElements = /**
* @param {?} tagNames
* @return {?}
*/
function (tagNames) {
var _this = this;
/** @type {?} */
var tagNamesArray = tagNames.toLowerCase().split(',');
this.getSelectedNodes().forEach((/**
* @param {?} node
* @return {?}
*/
function (node) {
if (node.nodeType === 1 &&
tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
// Remove the node and replace it with its children
_this.replaceWithOwnChildren(node);
}
}));
};
AngularEditorService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
AngularEditorService.ctorParameters = function () { return [
{ type: HttpClient },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
/** @nocollapse */ AngularEditorService.ngInjectableDef = ɵɵdefineInjectable({ factory: function AngularEditorService_Factory() { return new AngularEditorService(ɵɵinject(HttpClient), ɵɵinject(DOCUMENT)); }, token: AngularEditorService, providedIn: "root" });
return AngularEditorService;
}());
if (false) {
/** @type {?} */
AngularEditorService.prototype.savedSelection;
/** @type {?} */
AngularEditorService.prototype.selectedText;
/** @type {?} */
AngularEditorService.prototype.uploadUrl;
/** @type {?} */
AngularEditorService.prototype.uploadWithCredentials;
/**
* save selection when the editor is focussed out
* @type {?}
*/
AngularEditorService.prototype.saveSelection;
/**
* @type {?}
* @private
*/
AngularEditorService.prototype.http;
/**
* @type {?}
* @private
*/
AngularEditorService.prototype.doc;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function CustomClass() { }
if (false) {
/** @type {?} */
CustomClass.prototype.name;
/** @type {?} */
CustomClass.prototype.class;
/** @type {?|undefined} */
CustomClass.prototype.tag;
}
/**
* @record
*/
function Font() { }
if (false) {
/** @type {?} */
Font.prototype.name;
/** @type {?} */
Font.prototype.class;
}
/**
* @record
*/
function AngularEditorConfig() { }
if (false) {
/** @type {?|undefined} */
AngularEditorConfig.prototype.editable;
/** @type {?|undefined} */
AngularEditorConfig.prototype.spellcheck;
/** @type {?|undefined} */
AngularEditorConfig.prototype.height;
/** @type {?|undefined} */
AngularEditorConfig.prototype.minHeight;
/** @type {?|undefined} */
AngularEditorConfig.prototype.maxHeight;
/** @type {?|undefined} */
AngularEditorConfig.prototype.width;
/** @type {?|undefined} */
AngularEditorConfig.prototype.minWidth;
/** @type {?|undefined} */
AngularEditorConfig.prototype.translate;
/** @type {?|undefined} */
AngularEditorConfig.prototype.enableToolbar;
/** @type {?|undefined} */
AngularEditorConfig.prototype.showToolbar;
/** @type {?|undefined} */
AngularEditorConfig.prototype.placeholder;
/** @type {?|undefined} */
AngularEditorConfig.prototype.defaultParagraphSeparator;
/** @type {?|undefined} */
AngularEditorConfig.prototype.defaultFontName;
/** @type {?|undefined} */
AngularEditorConfig.prototype.defaultFontSize;
/** @type {?|undefined} */
AngularEditorConfig.prototype.uploadUrl;
/** @type {?|undefined} */
AngularEditorConfig.prototype.uploadWithCredentials;
/** @type {?|undefined} */
AngularEditorConfig.prototype.fonts;
/** @type {?|undefined} */
AngularEditorConfig.prototype.customClasses;
/** @type {?|undefined} */
AngularEditorConfig.prototype.sanitize;
/** @type {?|undefined} */
AngularEditorConfig.prototype.toolbarPosition;
/** @type {?|undefined} */
AngularEditorConfig.prototype.outline;
/** @type {?|undefined} */
AngularEditorConfig.prototype.toolbarHiddenButtons;
}
/** @type {?} */
var angularEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '0',
maxHeight: 'auto',
width: 'auto',
minWidth: '0',
translate: 'yes',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter text here...',
defaultParagraphSeparator: '',
defaultFontName: '',
defaultFontSize: '',
fonts: [
{ class: 'arial', name: 'Arial' },
{ class: 'times-new-roman', name: 'Times New Roman' },
{ class: 'calibri', name: 'Calibri' },
{ class: 'comic-sans-ms', name: 'Comic Sans MS' }
],
uploadUrl: 'v1/image',
uploadWithCredentials: false,
sanitize: true,
toolbarPosition: 'top',
outline: true,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AngularEditorToolbarComponent = /** @class */ (function () {
function AngularEditorToolbarComponent(r, editorService, doc) {
this.r = r;
this.editorService = editorService;
this.doc = doc;
this.htmlMode = false;
this.linkSelected = false;
this.block = 'default';
this.fontName = 'Times New Roman';
this.fontSize = '3';
this.headings = [
{
label: 'Heading 1',
value: 'h1',
},
{
label: 'Heading 2',
value: 'h2',
},
{
label: 'Heading 3',
value: 'h3',
},
{
label: 'Heading 4',
value: 'h4',
},
{
label: 'Heading 5',
value: 'h5',
},
{
label: 'Heading 6',
value: 'h6',
},
{
label: 'Heading 7',
value: 'h7',
},
{
label: 'Paragraph',
value: 'p',
},
{
label: 'Predefined',
value: 'pre'
},
{
label: 'Standard',
value: 'div'
},
{
label: 'default',
value: 'default'
}
];
this.fontSizes = [
{
label: '1',
value: '1',
},
{
label: '2',
value: '2',
},
{
label: '3',
value: '3',
},
{
label: '4',
value: '4',
},
{
label: '5',
value: '5',
},
{
label: '6',
value: '6',
},
{
label: '7',
value: '7',
}
];
this.customClassId = '-1';
this.customClassList = [{ label: '', value: '' }];
// uploadUrl: string;
this.tagMap = {
BLOCKQUOTE: 'indent',
A: 'link'
};
this.select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
this.buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
this.fonts = [{ label: '', value: '' }];
this.execute = new EventEmitter();
}
Object.defineProperty(AngularEditorToolbarComponent.prototype, "customClasses", {
set: /**
* @param {?} classes
* @return {?}
*/
function (classes) {
if (classes) {
this._customClasses = classes;
this.customClassList = this._customClasses.map((/**
* @param {?} x
* @param {?} i
* @return {?}
*/
function (x, i) { return ({ label: x.name, value: i.toString() }); }));
this.customClassList.unshift({ label: 'Clear Class', value: '-1' });
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(AngularEditorToolbarComponent.prototype, "defaultFontName", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this.fontName = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(AngularEditorToolbarComponent.prototype, "defaultFontSize", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this.fontSize = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(AngularEditorToolbarComponent.prototype, "isLinkButtonDisabled", {
get: /**
* @return {?}
*/
function () {
return this.htmlMode || !Boolean(this.editorService.selectedText);
},
enumerable: true,
configurable: true
});
/**
* Trigger command from editor header buttons
* @param command string from toolbar buttons
*/
/**
* Trigger command from editor header buttons
* @param {?} command string from toolbar buttons
* @return {?}
*/
AngularEditorToolbarComponent.prototype.triggerCommand = /**
* Trigger command from editor header buttons
* @param {?} command string from toolbar buttons
* @return {?}
*/
function (command) {
this.execute.emit(command);
};
/**
* highlight editor buttons when cursor moved or positioning
*/
/**
* highlight editor buttons when cursor moved or positioning
* @return {?}
*/
AngularEditorToolbarComponent.prototype.triggerButtons = /**
* highlight editor buttons when cursor moved or positioning
* @return {?}
*/
function () {
var _this = this;
if (!this.showToolbar) {
return;
}
this.buttons.forEach((/**
* @param {?} e
* @return {?}
*/
function (e) {
/** @type {?} */
var result = _this.doc.queryCommandState(e);
/** @type {?} */
var elementById = _this.doc.getElementById(e + '-' + _this.id);
if (result) {
_this.r.addClass(elementById, 'active');
}
else {
_this.r.removeClass(elementById, 'active');
}
}));
};
/**
* trigger highlight editor buttons when cursor moved or positioning in block
*/
/**
* trigger highlight editor buttons when cursor moved or positioning in block
* @param {?} nodes
* @return {?}
*/
AngularEditorToolbarComponent.prototype.triggerBlocks = /**
* trigger highlight editor buttons when cursor moved or positioning in block
* @param {?} nodes
* @return {?}
*/
function (nodes) {
var _this = this;
if (!this.showToolbar) {
return;
}
this.linkSelected = nodes.findIndex((/**
* @param {?} x
* @return {?}
*/
function (x) { return x.nodeName === 'A'; })) > -1;
/** @type {?} */
var found = false;
this.select.forEach((/**
* @param {?} y
* @return {?}
*/
function (y) {
/** @type {?} */
var node = nodes.find((/**
* @param {?} x
* @return {?}
*/
function (x) { return x.nodeName === y; }));
if (node !== undefined && y === node.nodeName) {
if (found === false) {
_this.block = node.nodeName.toLowerCase();
found = true;
}
}
else if (found === false) {
_this.block = 'default';
}
}));
found = false;
if (this._customClasses) {
this._customClasses.forEach((/**
* @param {?} y
* @param {?} index
* @return {?}
*/
function (y, index) {
/** @type {?} */
var node = nodes.find((/**
* @param {?} x
* @return {?}
*/
function (x) {
if (x instanceof Element) {
return x.className === y.class;
}
}));
if (node !== undefined) {
if (found === false) {
_this.customClassId = index.toString();
found = true;
}
}
else if (found === false) {
_this.customClassId = '-1';
}
}));
}
Object.keys(this.tagMap).map((/**
* @param {?} e
* @return {?}
*/
function (e) {
/** @type {?} */
var elementById = _this.doc.getElementById(_this.tagMap[e] + '-' + _this.id);
/** @type {?} */
var node = nodes.find((/**
* @param {?} x
* @return {?}
*/
function (x) { return x.nodeName === e; }));
if (node !== undefined && e === node.nodeName) {
_this.r.addClass(elementById, 'active');
}
else {
_this.r.removeClass(elementById, 'active');
}
}));
this.foreColour = this.doc.queryCommandValue('ForeColor');
this.fontSize = this.doc.queryCommandValue('FontSize');
this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
this.backColor = this.doc.queryCommandValue('backColor');
};
/**
* insert URL link
*/
/**
* insert URL link
* @return {?}
*/
AngularEditorToolbarComponent.prototype.insertUrl = /**
* insert URL link
* @return {?}
*/
function () {
/** @type {?} */
var url = 'https:\/\/';
/** @type {?} */
var selection = this.editorService.savedSelection;
if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
/** @type {?} */
var parent_1 = (/** @type {?} */ (selection.commonAncestorContainer.parentElement));
if (parent_1.href !== '') {
url = parent_1.href;
}
}
url = prompt('Insert URL link', url);
if (url && url !== '' && url !== 'https://') {
this.editorService.createLink(url);
}
};
/**
* insert Video link
*/
/**
* insert Video link
* @return {?}
*/
AngularEditorToolbarComponent.prototype.insertVideo = /**
* insert Video link
* @return {?}
*/
function () {
this.execute.emit('');
/** @type {?} */
var url = prompt('Insert Video link', "https://");
if (url && url !== '' && url !== "https://") {
this.editorService.insertVideo(url);
}
};
/** insert color */
/**
* insert color
* @param {?} color
* @param {?} where
* @return {?}
*/
AngularEditorToolbarComponent.prototype.insertColor = /**
* insert color
* @param {?} color
* @param {?} where
* @return {?}
*/
function (color, where) {
this.editorService.insertColor(color, where);
this.execute.emit('');
};
/**
* set font Name/family
* @param foreColor string
*/
/**
* set font Name/family
* @param {?} foreColor string
* @return {?}
*/
AngularEditorToolbarComponent.prototype.setFontName = /**
* set font Name/family
* @param {?} foreColor string
* @return {?}
*/
function (foreColor) {
this.editorService.setFontName(foreColor);
this.execute.emit('');
};
/**
* set font Size
* @param fontSize string
*/
/**
* set font Size
* @param {?} fontSize string
* @return {?}
*/
AngularEditorToolbarComponent.prototype.setFontSize = /**
* set font Size
* @param {?} fontSize string
* @return {?}
*/
function (fontSize) {
this.editorService.setFontSize(fontSize);
this.execute.emit('');
};
/**
* toggle editor mode (WYSIWYG or SOURCE)
* @param m boolean
*/
/**
* toggle editor mode (WYSIWYG or SOURCE)
* @param {?} m boolean
* @return {?}
*/
AngularEditorToolbarComponent.prototype.setEditorMode = /**
* toggle editor mode (WYSIWYG or SOURCE)
* @param {?} m boolean
* @return {?}
*/
function (m) {
/** @type {?} */
var toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
if (m) {
this.r.addClass(toggleEditorModeButton, 'active');
}
else {
this.r.removeClass(toggleEditorModeButton, 'active');
}
this.htmlMode = m;
};
/**
* Upload image when file is selected
*/
/**
* Upload image when file is selected
* @param {?} event
* @return {?}
*/
AngularEditorToolbarComponent.prototype.onFileChanged = /**
* Upload image when file is selected
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
/** @type {?} */
var file = event.target.files[0];
if (file.type.includes('image/')) {
if (this.uploadUrl) {
this.editorService.uploadImage(file).subscribe((/**
* @param {?} e
* @return {?}
*/
function (e) {
if (e instanceof HttpResponse) {
_this.editorService.insertImage(e.body.imageUrl);
_this.fileReset();
}
}));
}
else {
/** @type {?} */
var reader = new FileReader();
reader.onload = (/**
* @param {?} e
* @return {?}
*/
function (e) {
/** @type {?} */
var fr = (/** @type {?} */ (e.currentTarget));
_this.editorService.insertImage(fr.result.toString());
});
reader.readAsDataURL(file);
}
}
};
/**
* Reset Input
*/
/**
* Reset Input
* @return {?}
*/
AngularEditorToolbarComponent.prototype.fileReset = /**
* Reset Input
* @return {?}
*/
function () {
this.myInputFile.nativeElement.value = '';
};
/**
* Set custom class
*/
/**
* Set custom class
* @param {?} classId
* @return {?}
*/
AngularEditorToolbarComponent.prototype.setCustomClass = /**
* Set custom class
* @param {?} classId
* @return {?}
*/
function (classId) {
if (classId === '-1') {
this.execute.emit('clear');
}
else {
this.editorService.createCustomClass(this._customClasses[+classId]);
}
};
/**
* @param {?} name
* @return {?}
*/
AngularEditorToolbarComponent.prototype.isButtonHidden = /**
* @param {?} name
* @return {?}
*/
function (name) {
var e_1, _a;
if (!name) {
return false;
}
if (!(this.hiddenButtons instanceof Array)) {
return false;
}
/** @type {?} */
var result;
try {
for (var _b = __values(this.hiddenButtons), _c = _b.next(); !_c.done; _c = _b.next()) {
var arr = _c.value;
if (arr instanceof Array) {
result = arr.find((/**
* @param {?} item
* @return {?}
*/
function (item) { return item === name; }));
}
if (result) {
break;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return result !== undefined;
};
AngularEditorToolbarComponent.decorators = [
{ type: Component, args: [{
selector: 'angular-editor-toolbar',
template: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\n <div class=\"angular-editor-toolbar-set\">\n <button type=\"button\" title=\"Undo\" class=\"angular-editor-button\" (click)=\"triggerCommand('undo')\"\n [hidden]=\"isButtonHidden('undo')\" tabindex=\"-1\"><i\n class='fa fa-undo'></i></button>\n <button type=\"button\" title=\"Redo\" class=\"angular-editor-button\" (click)=\"triggerCommand('redo')\"\n [hidden]=\"isButtonHidden('redo')\" tabindex=\"-1\"><i\n class='fa fa-repeat'></i></button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'bold-'+id\" type=\"button\" title=\"Bold\" class=\"angular-editor-button\" (click)=\"triggerCommand('bold')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\" tabindex=\"-1\"><i class='fa fa-bold'></i></button>\n <button [id]=\"'italic-'+id\" type=\"button\" title=\"Italic\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('italic')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\" tabindex=\"-1\"><i class='fa fa-italic'></i>\n </button>\n <button [id]=\"'underline-'+id\" type=\"button\" title=\"Underline\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\"\n tabindex=\"-1\"><i class='fa fa-underline'></i></button>\n <button [id]=\"'strikeThrough-'+id\" type=\"button\" title=\"Strikethrough\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('strikeThrough')\"\n tabindex=\"-1\"><i class='fa fa-strikethrough'></i></button>\n <button [id]=\"'subscript-'+id\" type=\"button\" title=\"Subscript\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\"\n tabindex=\"-1\"><i class='fa fa-subscript'></i></button>\n <button [id]=\"'superscript-'+id\" type=\"button\" title=\"Superscript\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('superscript')\"\n tabindex=\"-1\"><i class='fa fa-superscript'></i></button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'justifyLeft-'+id\" type=\"button\" title=\"Justify Left\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('justifyLeft')\"\n tabindex=\"-1\"><i\n class='fa fa-align-left'></i></button>\n <button [id]=\"'justifyCenter-'+id\" type=\"button\" title=\"Justify Center\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('justifyCenter')\"\n tabindex=\"-1\"><i\n class='fa fa-align-center'></i></button>\n <button [id]=\"'justifyRight-'+id\" type=\"button\" title=\"Justify Right\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('justifyRight')\"\n tabindex=\"-1\">\n <i class='fa fa-align-right'></i></button>\n <button [id]=\"'justifyFull-'+id\" type=\"button\" title=\"Justify Full\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('justifyFull')\"\n tabindex=\"-1\"><i\n class='fa fa-align-justify'></i></button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'indent-'+id\" type=\"button\" title=\"Indent\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('indent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\" tabindex=\"-1\"><i\n class='fa fa-indent'></i></button>\n <button [id]=\"'outdent-'+id\" type=\"button\" title=\"Outdent\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('outdent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\" tabindex=\"-1\"><i\n class='fa fa-outdent'></i></button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'insertUnorderedList-'+id\" type=\"button\" title=\"Unordered List\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\"><i\n class='fa fa-list-ul'></i></button>\n <button [id]=\"'insertOrderedList-'+id\" type=\"button\" title=\"Ordered List\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\"><i\n class='fa fa-list-ol'></i></button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n\n <ae-select class=\"select-heading\" [options]=\"headings\"\n [(ngModel)]=\"block\"\n (change)=\"triggerCommand(block)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('heading')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n\n <ae-select class=\"select-font\" [options]=\"fonts\"\n [(ngModel)]=\"fontName\"\n (change)=\"setFontName(fontName)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontName')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n\n <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n [(ngModel)]=\"fontSize\"\n (change)=\"setFontSize(fontSize)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontSize')\"\n tabindex=\"-1\">\n </ae-select>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n #fgInput>\n <button [id]=\"'foregroundColorPicker-'+id\" type=\"button\" class=\"angular-editor-button\" (click)=\"fgInput.click()\"\n title=\"Text Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\" tabindex=\"-1\"><span\n class=\"color-label foreground\"><i class=\"fa fa-font\"></i></span>\n </button>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n #bgInput>\n <button [id]=\"'backgroundColorPicker-'+id\" type=\"button\" class=\"angular-editor-button\" (click)=\"bgInput.click()\"\n title=\"Background Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\" tabindex=\"-1\"><span\n class=\"color-label background\"><i class=\"fa fa-font\"></i></span>\n </button>\n </div>\n <div *ngIf=\"_customClasses\" class=\"angular-editor-toolbar-set\">\n <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n [(ngModel)]=\"customClassId\"\n (change)=\"setCustomClass(customClassId)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('customClasses')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'link-'+id\" type=\"button\" class=\"angular-editor-button\" (click)=\"insertUrl()\"\n title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\" tabindex=\"-1\">\n <i class=\"fa fa-link\"></i>\n </button>\n <button [id]=\"'unlink-'+id\" type=\"button\" class=\"angular-editor-button\" (click)=\"triggerCommand('unlink')\"\n title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\" tabindex=\"-1\">\n <i class=\"fa fa-chain-broken\"></i>\n </button>\n <input\n style=\"display: none\"\n accept=\"image/*\"\n type=\"file\" (change)=\"onFileChanged($event)\"\n #fileInput>\n <button [id]=\"'insertImage-'+id\" type=\"button\" class=\"angular-editor-button\" (click)=\"fileInput.click()\"\n title=\"Insert Image\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\" tabindex=\"-1\"><i class=\"fa fa-image\"></i>\n </button>\n <button [id]=\"'insertVideo-'+id\" type=\"button\" class=\"angular-editor-button\"\n (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertVideo')\"\n tabindex=\"-1\"><i\n class=\"fa fa-video-camera\"></i></button>\n <button [id]=\"'insertHorizontalRule-'+id\" type=\"button\" title=\"Horizontal Line\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertHorizontalRule')\" tabindex=\"-1\"><i\n class=\"fa fa-minus\"></i></button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'clearFormatting-'+id\" type=\"button\" title=\"Clear Formatting\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\"\n tabindex=\"-1\"><i class='fa fa-remove'></i>\n </button>\n </div>\n <div class=\"angular-editor-toolbar-set\">\n <button [id]=\"'toggleEditorMode-'+id\" type=\"button\" title=\"HTML Code\" class=\"angular-editor-button\"\n (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\" tabindex=\"-1\"><i\n class='fa fa-code'></i></button>\n </div>\n</div>\n",
styles: ["@charset \"UTF-8\";/*!\n * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome\n * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)\n */@font-face{font-family:FontAwesome;src:url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format(\"embedded-opentype\"),url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0) format(\"woff2\"),url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0) format(\"woff\"),url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0) format(\"truetype\"),url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format(\"svg\");font-weight:400;font-style:normal}.fa{display:inline-block;font:14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.2857142857em;text-align:center}.fa-ul{padding-left:0;margin-left:2.1428571429em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.1428571429em;width:2.1428571429em;top:.1428571429em;text-align:center}.fa-li.fa-lg{left:-1.8571428571em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:2s linear infinite fa-spin;animation:2s linear infinite fa-spin}.fa-pulse{-webkit-animation:1s steps(8) infinite fa-spin;animation:1s steps(8) infinite fa-spin}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:\"\uF000\"}.fa-music:before{content:\"\uF001\"}.fa-search:before{content:\"\uF002\"}.fa-envelope-o:before{content:\"\uF003\"}.fa-heart:before{content:\"\uF004\"}.fa-star:before{content:\"\uF005\"}.fa-star-o:before{content:\"\uF006\"}.fa-user:before{content:\"\uF007\"}.fa-film:before{content:\"\uF008\"}.fa-th-large:before{content:\"\uF009\"}.fa-th:before{content:\"\uF00A\"}.fa-th-list:before{content:\"\uF00B\"}.fa-check:before{content:\"\uF00C\"}.fa-close:before,.fa-remove:before,.fa-times:before{content:\"\uF00D\"}.fa-search-plus:before{content:\"\uF00E\"}.fa-search-minus:before{content:\"\uF010\"}.fa-power-off:before{content:\"\uF011\"}.fa-signal:before{content:\"\uF012\"}.fa-cog:b