@firestitch/html-editor 9.4.5 → 9.5.0

package/fesm5/firestitch-html-editor.js

@@ -3,1032 +3,1039 @@ import { InjectionToken, Optional, Inject, ɵɵdefineInjectable, ɵɵinject, Inj
 import { CommonModule } from '@angular/common';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { FileProcessor, FsFile } from '@firestitch/file';
 import { Observable, BehaviorSubject, combineLatest, ReplaySubject, Subject } from 'rxjs';
-import { shareReplay, map, tap, concatMap, takeUntil, filter, switchMap } from 'rxjs/operators';
+import { shareReplay, map, tap, concatMap, takeUntil, switchMap, filter } from 'rxjs/operators';
 import { merge, debounce } from 'lodash-es';
 import { DomSanitizer } from '@angular/platform-browser';
 import Tribute from 'tributejs';
 
-var RichButtons = [
-    'insertTable',
-    'insertImage',
-    'insertLink',
-    'insertVideo',
+var RichButtons = [
+    'insertTable',
+    'insertImage',
+    'insertLink',
+    'insertVideo',
 ];
 
-var TextButtons = [
-    'paragraphFormat',
-    'code',
-    'bold',
-    'italic',
-    'underline',
-    'strikeThrough',
-    'subscript',
-    'superscript',
-    'fontFamily',
-    'fontSize',
-    'textColor',
-    'backgroundColor',
-    'inlineClass',
-    'inlineStyle',
-    'clearFormatting',
-    'quote',
+var TextButtons = [
+    'paragraphFormat',
+    'code',
+    'bold',
+    'italic',
+    'underline',
+    'strikeThrough',
+    'subscript',
+    'superscript',
+    'fontFamily',
+    'fontSize',
+    'textColor',
+    'backgroundColor',
+    'inlineClass',
+    'inlineStyle',
+    'clearFormatting',
+    'quote',
 ];
 
-var ParagraphButtons = [
-    'align',
-    'formatOL',
-    'formatUL',
-    'checklist',
-    'indent',
-    'outdent',
+var ParagraphButtons = [
+    'align',
+    'formatOL',
+    'formatUL',
+    'checklist',
+    'indent',
+    'outdent',
 ];
 
-var FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default-config');
+var FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default-config');
 var FS_HTML_EDITOR_CONFIG = new InjectionToken('fs-html-editor.config');
 
-function resourceLoaderFactory() {
-    var resourceBase = '/assets/js/froala/';
-    var stylesBase = '/assets/css/';
-    var head = document.getElementsByTagName('head')[0];
-    var files = new Map();
-    var resourcePaths = {
-        froala: 'froala_editor.min.js',
-        align: 'plugins/align.min.js',
-        colors: 'plugins/colors.min.js',
-        image: 'plugins/image.min.js',
-        link: 'plugins/link.min.js',
-        lists: 'plugins/lists.min.js',
-        paragraph_format: 'plugins/paragraph_format.min.js',
-        table: 'plugins/table.min.js',
-        url: 'plugins/url.min.js',
-        video: 'plugins/video.min.js',
-        quote: 'plugins/quote.min.js',
-        draggable: 'plugins/draggable.min.js',
-        font_size: 'plugins/font_size.min.js',
-    };
-    var stylesPaths = {
-        froala: 'froala_editor.pkgd.min.css',
-    };
-    var loadResource = function (scriptPath) {
-        if (!files.has(scriptPath)) {
-            var obs$ = new Observable(function (obs) {
-                var script = document.createElement('script');
-                script.src = scriptPath;
-                head.appendChild(script);
-                script.onload = function () {
-                    obs.next();
-                    obs.complete();
-                };
-                script.onerror = function (err) {
-                    obs.error(err);
-                };
-            })
-                .pipe(shareReplay(1));
-            files.set(scriptPath, obs$);
-        }
-        return files.get(scriptPath);
-    };
-    var loadStyles = function (stylePath) {
-        if (!files.has(stylePath)) {
-            var obs$ = new Observable(function (obs) {
-                var style = document.createElement('link');
-                style.id = stylePath;
-                style.rel = 'stylesheet';
-                style.href = "" + stylePath;
-                head.appendChild(style);
-                style.onload = function () {
-                    obs.next();
-                    obs.complete();
-                };
-                style.onerror = function (err) {
-                    obs.error(err);
-                };
-            });
-            files.set(stylePath, obs$);
-        }
-        return files.get(stylePath);
-    };
-    return {
-        setResourceBase: function (path) {
-            resourceBase = path;
-        },
-        setStylesBase: function (path) {
-            stylesBase = path;
-        },
-        loadResource: function (resourceName) {
-            var path = resourcePaths[resourceName] || resourceName;
-            return loadResource(resourceBase + path);
-        },
-        loadStyles: function (resourceName) {
-            var path = stylesPaths[resourceName] || resourceName;
-            return loadStyles(stylesBase + path);
-        }
-    };
-}
+function resourceLoaderFactory() {
+    var resourceBase = '/assets/js/froala/';
+    var stylesBase = '/assets/css/';
+    var head = document.getElementsByTagName('head')[0];
+    var files = new Map();
+    var resourcePaths = {
+        froala: 'froala_editor.min.js',
+        align: 'plugins/align.min.js',
+        colors: 'plugins/colors.min.js',
+        image: 'plugins/image.min.js',
+        link: 'plugins/link.min.js',
+        lists: 'plugins/lists.min.js',
+        paragraph_format: 'plugins/paragraph_format.min.js',
+        table: 'plugins/table.min.js',
+        url: 'plugins/url.min.js',
+        video: 'plugins/video.min.js',
+        quote: 'plugins/quote.min.js',
+        draggable: 'plugins/draggable.min.js',
+    };
+    var stylesPaths = {
+        froala: 'froala_editor.pkgd.min.css',
+    };
+    var loadResource = function (scriptPath) {
+        if (!files.has(scriptPath)) {
+            var obs$ = new Observable(function (obs) {
+                var script = document.createElement('script');
+                script.src = scriptPath;
+                head.appendChild(script);
+                script.onload = function () {
+                    obs.next();
+                    obs.complete();
+                };
+                script.onerror = function (err) {
+                    obs.error(err);
+                };
+            })
+                .pipe(shareReplay(1));
+            files.set(scriptPath, obs$);
+        }
+        return files.get(scriptPath);
+    };
+    var loadStyles = function (stylePath) {
+        if (!files.has(stylePath)) {
+            var obs$ = new Observable(function (obs) {
+                var style = document.createElement('link');
+                style.id = stylePath;
+                style.rel = 'stylesheet';
+                style.href = "" + stylePath;
+                head.appendChild(style);
+                style.onload = function () {
+                    obs.next();
+                    obs.complete();
+                };
+                style.onerror = function (err) {
+                    obs.error(err);
+                };
+            });
+            files.set(stylePath, obs$);
+        }
+        return files.get(stylePath);
+    };
+    return {
+        setResourceBase: function (path) {
+            resourceBase = path;
+        },
+        setStylesBase: function (path) {
+            stylesBase = path;
+        },
+        loadResource: function (resourceName) {
+            var path = resourcePaths[resourceName] || resourceName;
+            return loadResource(resourceBase + path);
+        },
+        loadStyles: function (resourceName) {
+            var path = stylesPaths[resourceName] || resourceName;
+            return loadStyles(stylesBase + path);
+        }
+    };
+}
 var ResourceLoader = resourceLoaderFactory();
 
-var FsFroalaLoaderService = /** @class */ (function () {
-    function FsFroalaLoaderService(_defaultConfig) {
-        this._defaultConfig = _defaultConfig;
-        this._froalaLoaded = new BehaviorSubject(false);
-        this._defaultPluginsLoaded = new BehaviorSubject(false);
-        this._ready$ = combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
-            .pipe(map(function (_a) {
-            var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
-            return pluginsRead && FroalaReady;
-        }), shareReplay(1));
-        if (this._defaultConfig) {
-            if (this._defaultConfig.assetsJSPath) {
-                ResourceLoader.setResourceBase(this._defaultConfig.assetsJSPath);
-            }
-            if (this._defaultConfig.assetsCSSPath) {
-                ResourceLoader.setStylesBase(this._defaultConfig.assetsCSSPath);
-            }
-        }
-        this._load();
-    }
-    Object.defineProperty(FsFroalaLoaderService.prototype, "ready$", {
-        get: function () {
-            return this._ready$;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FsFroalaLoaderService.prototype, "ready", {
-        get: function () {
-            return this._froalaLoaded.getValue() && this._defaultPluginsLoaded.getValue();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FsFroalaLoaderService.prototype, "FroalaEditor", {
-        get: function () {
-            return this._FroalaEditor;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FsFroalaLoaderService.prototype._load = function () {
-        var _this = this;
-        combineLatest([
-            ResourceLoader.loadResource('froala'),
-            ResourceLoader.loadStyles('froala')
-        ])
-            .pipe(tap(function () {
-            _this._FroalaEditor = window.FroalaEditor;
-            _this._froalaDone();
-        }), concatMap(function () {
-            return _this._loadPlugins();
-        }), tap(function () {
-            _this._defaultPluginsDone();
-        }))
-            .subscribe();
-    };
-    FsFroalaLoaderService.prototype._loadPlugins = function () {
-        var imports = this._defaultConfig
-            .defaultPlugins
-            .reduce(function (acc, pluginName) {
-            var import$ = ResourceLoader.loadResource(pluginName);
-            acc.push(import$);
-            return acc;
-        }, []);
-        return combineLatest(imports);
-    };
-    FsFroalaLoaderService.prototype._froalaDone = function () {
-        this._froalaLoaded.next(true);
-    };
-    FsFroalaLoaderService.prototype._defaultPluginsDone = function () {
-        this._defaultPluginsLoaded.next(true);
-    };
-    FsFroalaLoaderService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] }
-    ]; };
-    FsFroalaLoaderService.ɵprov = ɵɵdefineInjectable({ factory: function FsFroalaLoaderService_Factory() { return new FsFroalaLoaderService(ɵɵinject(FS_HTML_EDITOR_CONFIG, 8)); }, token: FsFroalaLoaderService, providedIn: "root" });
-    FsFroalaLoaderService = __decorate([
-        Injectable({
-            providedIn: 'root',
-        }),
-        __param(0, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
-        __metadata("design:paramtypes", [Object])
-    ], FsFroalaLoaderService);
-    return FsFroalaLoaderService;
+var FsFroalaLoaderService = /** @class */ (function () {
+    function FsFroalaLoaderService(_defaultConfig) {
+        this._defaultConfig = _defaultConfig;
+        this._froalaLoaded = new BehaviorSubject(false);
+        this._defaultPluginsLoaded = new BehaviorSubject(false);
+        this._ready$ = combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
+            .pipe(map(function (_a) {
+            var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
+            return pluginsRead && FroalaReady;
+        }), shareReplay(1));
+        if (this._defaultConfig) {
+            if (this._defaultConfig.assetsJSPath) {
+                ResourceLoader.setResourceBase(this._defaultConfig.assetsJSPath);
+            }
+            if (this._defaultConfig.assetsCSSPath) {
+                ResourceLoader.setStylesBase(this._defaultConfig.assetsCSSPath);
+            }
+        }
+        this._load();
+    }
+    Object.defineProperty(FsFroalaLoaderService.prototype, "ready$", {
+        get: function () {
+            return this._ready$;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FsFroalaLoaderService.prototype, "ready", {
+        get: function () {
+            return this._froalaLoaded.getValue() && this._defaultPluginsLoaded.getValue();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FsFroalaLoaderService.prototype, "FroalaEditor", {
+        get: function () {
+            return this._FroalaEditor;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FsFroalaLoaderService.prototype._load = function () {
+        var _this = this;
+        combineLatest([
+            ResourceLoader.loadResource('froala'),
+            ResourceLoader.loadStyles('froala')
+        ])
+            .pipe(tap(function () {
+            _this._FroalaEditor = window.FroalaEditor;
+            _this._froalaDone();
+        }), concatMap(function () {
+            return _this._loadPlugins();
+        }), tap(function () {
+            _this._defaultPluginsDone();
+        }))
+            .subscribe();
+    };
+    FsFroalaLoaderService.prototype._loadPlugins = function () {
+        var imports = this._defaultConfig
+            .defaultPlugins
+            .reduce(function (acc, pluginName) {
+            var import$ = ResourceLoader.loadResource(pluginName);
+            acc.push(import$);
+            return acc;
+        }, []);
+        return combineLatest(imports);
+    };
+    FsFroalaLoaderService.prototype._froalaDone = function () {
+        this._froalaLoaded.next(true);
+    };
+    FsFroalaLoaderService.prototype._defaultPluginsDone = function () {
+        this._defaultPluginsLoaded.next(true);
+    };
+    FsFroalaLoaderService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] }
+    ]; };
+    FsFroalaLoaderService.ɵprov = ɵɵdefineInjectable({ factory: function FsFroalaLoaderService_Factory() { return new FsFroalaLoaderService(ɵɵinject(FS_HTML_EDITOR_CONFIG, 8)); }, token: FsFroalaLoaderService, providedIn: "root" });
+    FsFroalaLoaderService = __decorate([
+        Injectable({
+            providedIn: 'root',
+        }),
+        __param(0, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
+        __metadata("design:paramtypes", [Object])
+    ], FsFroalaLoaderService);
+    return FsFroalaLoaderService;
 }());
 
-var FsHtmlEditorComponent = /** @class */ (function () {
-    function FsHtmlEditorComponent(_defaultConfig, _cdRef, _fr) {
-        this._defaultConfig = _defaultConfig;
-        this._cdRef = _cdRef;
-        this._fr = _fr;
-        this.classFocused = false;
-        this.classDisabled = false;
-        this.config = {};
-        this.initialized = false;
-        this._initialize$ = new ReplaySubject();
-        this._destroy$ = new Subject();
-        this.onChange = function (data) { };
-        this.onTouched = function () { };
-    }
-    FsHtmlEditorComponent_1 = FsHtmlEditorComponent;
-    Object.defineProperty(FsHtmlEditorComponent.prototype, "el", {
-        get: function () {
-            return this.elRef.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FsHtmlEditorComponent.prototype, "html", {
-        get: function () {
-            return this._html;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FsHtmlEditorComponent.prototype, "editor", {
-        get: function () {
-            return this._editor;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FsHtmlEditorComponent.prototype, "froalaReady$", {
-        get: function () {
-            return this._fr.ready$;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FsHtmlEditorComponent.prototype.ngOnInit = function () {
-        this.config = this.config || {};
-        this.config.autofocus = this.config.autofocus !== false && !this.config.disabled;
-        this.initialized = !this.config.initOnClick;
-        this._listenLazyInit();
-    };
-    FsHtmlEditorComponent.prototype.ngAfterViewInit = function () {
-        if (!this.config.initOnClick || !this.hasContent()) {
-            this.initialized = true;
-            this._initialize$.next();
-        }
-    };
-    FsHtmlEditorComponent.prototype.hasContent = function () {
-        var el = document.createElement('div');
-        if (el.querySelector('img')) {
-            return true;
-        }
-        el.innerHTML = this._html;
-        return !!el.innerText.length;
-    };
-    FsHtmlEditorComponent.prototype.initialize = function (options) {
-        var _this = this;
-        if (options === void 0) { options = {}; }
-        var config = this._createConfig();
-        this._initPlugins(config);
-        this.el.innerHTML = this._html;
-        this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), function () {
-            _this._cdRef.markForCheck();
-            if (config.disabled) {
-                _this.disable();
-            }
-            if (config.froalaConfig.events) {
-                if (config.froalaConfig.events.initialized) {
-                    config.froalaConfig.events.initialized();
-                }
-            }
-            _this._editor.events.on('focus', function () {
-                _this.classFocused = true;
-                _this._cdRef.markForCheck();
-            });
-            _this._editor.events.on('blur', function () {
-                _this.classFocused = false;
-                _this._cdRef.markForCheck();
-            });
-            _this._editor.events.on('contentChanged', function () {
-                var editorHTML = _this._editor.html.get();
-                if (_this.html !== editorHTML) {
-                    _this._change(editorHTML);
-                }
-            });
-            _this._editor.events.on('paste.afterCleanup', function (html) {
-                var div = document.createElement('div');
-                div.innerHTML = html;
-                div.querySelectorAll('*')
-                    .forEach(function (el) {
-                    for (var i = 0; i < el.attributes.length; i++) {
-                        var name_1 = el.attributes[0].name;
-                        if (name_1 !== 'href') {
-                            el.removeAttribute(name_1);
-                        }
-                    }
-                });
-                return div.innerHTML;
-            });
-            _this._editor.events.on('keydown', function () {
-                _this.onTouched();
-            });
-            if (_this.config.image && _this.config.image.upload) {
-                _this._editor.events.on('image.beforePasteUpload', function (image) {
-                    fetch(image.getAttribute('src'))
-                        .then(function (res) {
-                        res.blob()
-                            .then(function (blob) {
-                            _this._processImageUpload(blob)
-                                .subscribe(function (url) {
-                                image.setAttribute('src', url);
-                                image.removeAttribute('data-fr-image-pasted');
-                            });
-                        });
-                    });
-                    return false;
-                });
-                _this._editor.events.on('image.beforeUpload', function (blobs) {
-                    _this._processImageUpload(blobs[0]).subscribe(function (url) {
-                        _this.editor.image.insert(url, null, null, _this.editor.image.get());
-                    });
-                    return false;
-                });
-            }
-            if (_this.el.querySelector('.fr-second-toolbar')) {
-                _this.el.querySelector('.fr-second-toolbar').remove();
-            }
-            var selection = options.selection;
-            if (selection) {
-                var node = Array.from(_this.el.querySelectorAll('.fr-element *')).find(function (node) {
-                    return selection.node === node.textContent;
-                });
-                if (node) {
-                    var range = document.createRange();
-                    var sel = window.getSelection();
-                    range.setStart(_this._getTextNode(node), selection.offset);
-                    range.collapse(true);
-                    sel.removeAllRanges();
-                    sel.addRange(range);
-                }
-                else if (_this.config.autofocus) {
-                    _this.focus();
-                }
-            }
-            else if (_this.config.autofocus) {
-                _this.focus();
-            }
-        });
-    };
-    FsHtmlEditorComponent.prototype._processImageUpload = function (blob) {
-        return this.config.image.upload(blob)
-            .pipe(takeUntil(this._destroy$));
-    };
-    FsHtmlEditorComponent.prototype._getTextNode = function (node) {
-        if (node) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                return node;
-            }
-            if (node.childNodes) {
-                return this._getTextNode(node.childNodes[0]);
-            }
-        }
-    };
-    FsHtmlEditorComponent.prototype.uninitializedClick = function (event) {
-        if (!event.defaultPrevented) {
-            var target_1 = event.target;
-            if (target_1 && target_1.nodeName === 'A' && target_1.getAttribute('href')) {
-                var targetTarget_1 = target_1.getAttribute('target');
-                target_1.setAttribute('target', '_blank');
-                setTimeout(function () {
-                    if (targetTarget_1) {
-                        target_1.setAttribute('target', targetTarget_1);
-                    }
-                    else {
-                        target_1.removeAttribute('target');
-                    }
-                });
-            }
-            else {
-                if (this.config.initClick) {
-                    this.config.initClick(event);
-                }
-                this._initialize$.next();
-                this.initialized = true;
-            }
-        }
-    };
-    FsHtmlEditorComponent.prototype.updateSize = function () {
-        // Hack: To trigger the toolbar button size modes
-        window.dispatchEvent(new Event('resize'));
-    };
-    FsHtmlEditorComponent.prototype.validate = function (control) {
-        var err = {};
-        if (this.config.maxLength && this._html) {
-            var maxLength = this.config.maxLength;
-            var length_1 = this._html.length;
-            if (length_1 > maxLength) {
-                err.maxLengthError = "Must be " + maxLength + " characters or fewer. You entered " + length_1 + " characters.";
-            }
-        }
-        return Object.keys(err).length ? err : null;
-    };
-    FsHtmlEditorComponent.prototype.focus = function (options) {
-        options = options ? options : {};
-        if (options.cursorPosition === 'end') {
-            this.editor.selection.setAtEnd(this.editor.$el.get(0));
-        }
-        else {
-            this.editor.selection.setAtStart(this.editor.$el.get(0));
-        }
-        this.editor.selection.restore();
-        var elSelection = this.editor.selection.element();
-        if (elSelection) {
-            elSelection.scrollIntoView({ block: 'center' });
-        }
-    };
-    FsHtmlEditorComponent.prototype.clear = function () {
-        this.writeValue('');
-    };
-    FsHtmlEditorComponent.prototype.disable = function () {
-        this.classDisabled = true;
-    };
-    FsHtmlEditorComponent.prototype.setHtml = function (html) {
-        this.writeValue(html);
-    };
-    FsHtmlEditorComponent.prototype.writeValue = function (html) {
-        var _this = this;
-        this._html = html || '';
-        this._cdRef.markForCheck();
-        // SP-T2298 timeout needed for the case, when froala was already initated and
-        // second instance opened in dialog/drawer. In this case init step pass much faster, writeValue trigger
-        // after init and froala ignore new html. At the same time froala was initied but editor not yet, and next
-        // code doesn't work without timeout. We've got time range when too late for initiate value, and to early
-        // for change event.
-        setTimeout(function () {
-            if (_this.editor && _this.editor.html) {
-                try {
-                    _this.editor.html.set(_this._html);
-                }
-                catch (e) {
-                }
-            }
-        });
-    };
-    FsHtmlEditorComponent.prototype.registerOnChange = function (fn) {
-        this.onChange = fn;
-    };
-    FsHtmlEditorComponent.prototype.registerOnTouched = function (fn) {
-        this.onTouched = fn;
-    };
-    FsHtmlEditorComponent.prototype.ngOnDestroy = function () {
-        this._initialize$.complete();
-        this._destroy$.next();
-        this._destroy$.complete();
-        this.destroy();
-    };
-    FsHtmlEditorComponent.prototype.destroy = function () {
-        if (this.editor) {
-            this.editor.destroy();
-        }
-        this.initialized = false;
-        this._cdRef.markForCheck();
-        this.el.innerHTML = '';
-    };
-    FsHtmlEditorComponent.prototype._createConfig = function () {
-        return merge({ froalaConfig: {} }, this._defaultConfig, this.config);
-    };
-    FsHtmlEditorComponent.prototype._change = function (html) {
-        this._html = html;
-        this.onChange(html);
-    };
-    FsHtmlEditorComponent.prototype._initPlugins = function (config) {
-        var _this = this;
-        (config.plugins || []).forEach(function (plugin) {
-            _this._fr.FroalaEditor.PLUGINS[plugin.config.name] = function (editor) {
-                plugin.editor = editor;
-                plugin.initialize();
-                return plugin;
-            };
-            (plugin.config.buttons || []).forEach(function (button) {
-                _this._fr.FroalaEditor.DefineIcon(button.name, {
-                    NAME: button.name,
-                    PATH: button.svgPath,
-                });
-                _this._fr.FroalaEditor.RegisterCommand(button.name, {
-                    icon: button.name,
-                    title: button.tooltip,
-                    undo: button.undo,
-                    focus: button.focus,
-                    showOnMobile: button.showOnMobile,
-                    refreshAfterCallback: button.refreshAfterCallback,
-                    callback: function () {
-                        if (button.click) {
-                            button.click(this);
-                        }
-                    },
-                    refresh: function (button) {
-                        if (button.refresh) {
-                            button.refresh(this, button);
-                        }
-                    }
-                });
-            });
-        });
-    };
-    FsHtmlEditorComponent.prototype._createOptions = function () {
-        var config = this._createConfig();
-        return merge(
-        // For some reason editor store somewhere pointer on default config object and dublicate options each time on init
-        // Extra merge level fixed this problem and allow to init config properly without legacy data
-        {}, {
-            key: config.activationKey,
-            placeholderText: config.placeholder,
-            linkAlwaysBlank: true,
-            tabSpaces: 2,
-            typingTimer: 250,
-            tooltips: false,
-            wordPasteModal: false,
-            imageDefaultWidth: 0,
-            imageDefaultAlign: 'left',
-            quickInsertEnabled: false,
-            paragraphDefaultSelection: 'Format',
-            videoUpload: false,
-            paragraphFormat: {
-                N: 'Normal',
-                H1: 'Heading 1',
-                H2: 'Heading 2',
-                H3: 'Heading 3',
-                H4: 'Heading 4',
-                BLOCKQUOTE: 'Quote',
-            },
-            paragraphFormatSelection: true,
-            toolbarButtonsXS: {
-                moreText: {
-                    buttons: TextButtons,
-                    buttonsVisible: 1,
-                },
-                moreParagraph: {
-                    buttons: ParagraphButtons,
-                    buttonsVisible: 2,
-                },
-                moreRich: {
-                    buttons: RichButtons,
-                    buttonsVisible: 0,
-                },
-            },
-            toolbarButtons: {
-                moreText: {
-                    buttons: TextButtons,
-                    buttonsVisible: 3,
-                },
-                moreParagraph: {
-                    buttons: ParagraphButtons,
-                    buttonsVisible: 5,
-                },
-                moreRich: {
-                    buttons: RichButtons,
-                    buttonsVisible: 3,
-                },
-            },
-        }, config.froalaConfig);
-    };
-    FsHtmlEditorComponent.prototype._listenLazyInit = function () {
-        var _this = this;
-        this.froalaReady$
-            .pipe(filter(function (ready) { return ready; }), switchMap(function () { return _this._initialize$; }))
-            .subscribe(function () {
-            var selection = window.getSelection();
-            var options = {};
-            if (selection.baseNode) {
-                options.selection = {
-                    node: selection.baseNode.nodeValue,
-                    offset: selection.baseOffset,
-                };
-            }
-            _this.initialize(options);
-        });
-    };
-    var FsHtmlEditorComponent_1;
-    FsHtmlEditorComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
-        { type: ChangeDetectorRef },
-        { type: FsFroalaLoaderService }
-    ]; };
-    __decorate([
-        HostBinding('class.focused'),
-        __metadata("design:type", Object)
-    ], FsHtmlEditorComponent.prototype, "classFocused", void 0);
-    __decorate([
-        HostBinding('class.disabled'),
-        __metadata("design:type", Object)
-    ], FsHtmlEditorComponent.prototype, "classDisabled", void 0);
-    __decorate([
-        ViewChild('elRef'),
-        __metadata("design:type", ElementRef)
-    ], FsHtmlEditorComponent.prototype, "elRef", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], FsHtmlEditorComponent.prototype, "config", void 0);
-    FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
-        Component({
-            selector: 'fs-html-editor',
-            template: "<div class=\"fs-html-editor-default\">\n  <ng-container *ngIf=\"initialized\">\n    <ng-container *fsSkeleton=\"(froalaReady$ | async) !== false\">\n    </ng-container>\n  </ng-container>\n\n  <div #elRef></div>\n\n  <div class=\"bottom-line\"></div>\n  <div class=\"disabled-line\"></div>\n  <fs-html-renderer\n    *ngIf=\"!initialized\"\n    [html]=\"html\"\n    (click)=\"uninitializedClick($event)\">\n  </fs-html-renderer>\n</div>\n",
-            providers: [
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return FsHtmlEditorComponent_1; }),
-                    multi: true
-                },
-                {
-                    provide: NG_VALIDATORS,
-                    useExisting: forwardRef(function () { return FsHtmlEditorComponent_1; }),
-                    multi: true
-                },
-            ],
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [":host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar{transition:none!important}:host ::ng-deep .fr-toolbar{position:-webkit-sticky;position:sticky;z-index:2;border-radius:0;background-color:transparent}:host ::ng-deep .fr-toolbar .fr-btn-grp{margin:0 20px 0 0;position:relative}:host ::ng-deep .fr-toolbar .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top{border:0}:host ::ng-deep .fr-toolbar .fr-newline{margin:0}:host ::ng-deep .fr-toolbar .fr-more-toolbar{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view ol,:host ::ng-deep .fr-view ul{list-style-position:unset}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}:host.disabled ::ng-deep .disabled-line{display:block}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}.disabled-line{display:none;position:absolute;bottom:-1px;z-index:1;background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);background-size:4px 100%;background-repeat:repeat-x;height:1px;width:100%}.bottom-line{opacity:0;transform-origin:50%;transform:scaleX(.5);transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%;border-bottom:2px solid #949494;position:absolute;bottom:-1px;z-index:1}:host{position:relative;display:block}:host.focused .bottom-line{opacity:1;display:block;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}"]
-        }),
-        __param(0, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
-        __metadata("design:paramtypes", [Object, ChangeDetectorRef,
-            FsFroalaLoaderService])
-    ], FsHtmlEditorComponent);
-    return FsHtmlEditorComponent;
+var FsHtmlEditorComponent = /** @class */ (function () {
+    function FsHtmlEditorComponent(_defaultConfig, _cdRef, _fr) {
+        this._defaultConfig = _defaultConfig;
+        this._cdRef = _cdRef;
+        this._fr = _fr;
+        this.classFocused = false;
+        this.classDisabled = false;
+        this.config = {};
+        this.initialized = false;
+        this._initialize$ = new ReplaySubject();
+        this._destroy$ = new Subject();
+        this.onChange = function (data) { };
+        this.onTouched = function () { };
+    }
+    FsHtmlEditorComponent_1 = FsHtmlEditorComponent;
+    Object.defineProperty(FsHtmlEditorComponent.prototype, "el", {
+        get: function () {
+            return this.elRef.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FsHtmlEditorComponent.prototype, "html", {
+        get: function () {
+            return this._html;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FsHtmlEditorComponent.prototype, "editor", {
+        get: function () {
+            return this._editor;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FsHtmlEditorComponent.prototype, "froalaReady$", {
+        get: function () {
+            return this._fr.ready$;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FsHtmlEditorComponent.prototype.ngOnInit = function () {
+        this.config = this.config || {};
+        this.config.autofocus = this.config.autofocus !== false && !this.config.disabled;
+        this.initialized = !this.config.initOnClick;
+        this._listenLazyInit();
+    };
+    FsHtmlEditorComponent.prototype.ngAfterViewInit = function () {
+        if (!this.config.initOnClick || !this.hasContent()) {
+            this.initialized = true;
+            this._initialize$.next();
+        }
+    };
+    FsHtmlEditorComponent.prototype.hasContent = function () {
+        var el = document.createElement('div');
+        if (el.querySelector('img')) {
+            return true;
+        }
+        el.innerHTML = this._html;
+        return !!el.innerText.length;
+    };
+    FsHtmlEditorComponent.prototype.initialize = function (options) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        var config = this._createConfig();
+        this._initPlugins(config);
+        this.el.innerHTML = this._html;
+        this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), function () {
+            _this._cdRef.markForCheck();
+            if (config.disabled) {
+                _this.disable();
+            }
+            if (config.froalaConfig.events) {
+                if (config.froalaConfig.events.initialized) {
+                    config.froalaConfig.events.initialized();
+                }
+            }
+            _this._editor.events.on('focus', function () {
+                _this.classFocused = true;
+                _this._cdRef.markForCheck();
+            });
+            _this._editor.events.on('blur', function () {
+                _this.classFocused = false;
+                _this._cdRef.markForCheck();
+            });
+            _this._editor.events.on('contentChanged', function () {
+                var editorHTML = _this._editor.html.get();
+                if (_this.html !== editorHTML) {
+                    _this._change(editorHTML);
+                }
+            });
+            _this._editor.events.on('paste.afterCleanup', function (html) {
+                var div = document.createElement('div');
+                div.innerHTML = html;
+                div.querySelectorAll('*')
+                    .forEach(function (el) {
+                    for (var i = 0; i < el.attributes.length; i++) {
+                        var name_1 = el.attributes[0].name;
+                        if (name_1 !== 'href') {
+                            el.removeAttribute(name_1);
+                        }
+                    }
+                });
+                return div.innerHTML;
+            });
+            _this._editor.events.on('keydown', function () {
+                _this.onTouched();
+            });
+            if (_this.config.image && _this.config.image.upload) {
+                _this._editor.events.on('image.beforePasteUpload', function (image) {
+                    fetch(image.getAttribute('src'))
+                        .then(function (res) {
+                        res.blob()
+                            .then(function (blob) {
+                            _this._processImageUpload(blob)
+                                .pipe(takeUntil(_this._destroy$))
+                                .subscribe(function (url) {
+                                image.setAttribute('src', url);
+                                image.removeAttribute('data-fr-image-pasted');
+                            });
+                        });
+                    });
+                    return false;
+                });
+                _this._editor.events.on('image.beforeUpload', function (blobs) {
+                    _this._processImageUpload(blobs[0])
+                        .pipe(takeUntil(_this._destroy$))
+                        .subscribe(function (url) {
+                        _this.editor.image.insert(url, null, null, _this.editor.image.get());
+                    });
+                    return false;
+                });
+            }
+            if (_this.el.querySelector('.fr-second-toolbar')) {
+                _this.el.querySelector('.fr-second-toolbar').remove();
+            }
+            var selection = options.selection;
+            if (selection) {
+                var node = Array.from(_this.el.querySelectorAll('.fr-element *')).find(function (node) {
+                    return selection.node === node.textContent;
+                });
+                if (node) {
+                    var range = document.createRange();
+                    var sel = window.getSelection();
+                    range.setStart(_this._getTextNode(node), selection.offset);
+                    range.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+                else if (_this.config.autofocus) {
+                    _this.focus();
+                }
+            }
+            else if (_this.config.autofocus) {
+                _this.focus();
+            }
+        });
+    };
+    FsHtmlEditorComponent.prototype._processImageUpload = function (blob) {
+        var _this = this;
+        var processor = new FileProcessor();
+        var file = new FsFile(blob);
+        return processor.process([file], this.config.image)
+            .pipe(switchMap(function (img) {
+            return _this.config.image.upload(img.file);
+        }));
+    };
+    FsHtmlEditorComponent.prototype._getTextNode = function (node) {
+        if (node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node;
+            }
+            if (node.childNodes) {
+                return this._getTextNode(node.childNodes[0]);
+            }
+        }
+    };
+    FsHtmlEditorComponent.prototype.uninitializedClick = function (event) {
+        if (!event.defaultPrevented) {
+            var target_1 = event.target;
+            if (target_1 && target_1.nodeName === 'A' && target_1.getAttribute('href')) {
+                var targetTarget_1 = target_1.getAttribute('target');
+                target_1.setAttribute('target', '_blank');
+                setTimeout(function () {
+                    if (targetTarget_1) {
+                        target_1.setAttribute('target', targetTarget_1);
+                    }
+                    else {
+                        target_1.removeAttribute('target');
+                    }
+                });
+            }
+            else {
+                if (this.config.initClick) {
+                    this.config.initClick(event);
+                }
+                this._initialize$.next();
+                this.initialized = true;
+            }
+        }
+    };
+    FsHtmlEditorComponent.prototype.updateSize = function () {
+        // Hack: To trigger the toolbar button size modes
+        window.dispatchEvent(new Event('resize'));
+    };
+    FsHtmlEditorComponent.prototype.validate = function (control) {
+        var err = {};
+        if (this.config.maxLength && this._html) {
+            var maxLength = this.config.maxLength;
+            var length_1 = this._html.length;
+            if (length_1 > maxLength) {
+                err.maxLengthError = "Must be " + maxLength + " characters or fewer. You entered " + length_1 + " characters.";
+            }
+        }
+        return Object.keys(err).length ? err : null;
+    };
+    FsHtmlEditorComponent.prototype.focus = function (options) {
+        options = options ? options : {};
+        if (options.cursorPosition === 'end') {
+            this.editor.selection.setAtEnd(this.editor.$el.get(0));
+        }
+        else {
+            this.editor.selection.setAtStart(this.editor.$el.get(0));
+        }
+        this.editor.selection.restore();
+        var elSelection = this.editor.selection.element();
+        if (elSelection) {
+            elSelection.scrollIntoView({ block: 'center' });
+        }
+    };
+    FsHtmlEditorComponent.prototype.clear = function () {
+        this.writeValue('');
+    };
+    FsHtmlEditorComponent.prototype.disable = function () {
+        this.classDisabled = true;
+    };
+    FsHtmlEditorComponent.prototype.setHtml = function (html) {
+        this.writeValue(html);
+    };
+    FsHtmlEditorComponent.prototype.writeValue = function (html) {
+        var _this = this;
+        this._html = html || '';
+        this._cdRef.markForCheck();
+        // SP-T2298 timeout needed for the case, when froala was already initated and
+        // second instance opened in dialog/drawer. In this case init step pass much faster, writeValue trigger
+        // after init and froala ignore new html. At the same time froala was initied but editor not yet, and next
+        // code doesn't work without timeout. We've got time range when too late for initiate value, and to early
+        // for change event.
+        setTimeout(function () {
+            if (_this.editor && _this.editor.html) {
+                try {
+                    _this.editor.html.set(_this._html);
+                }
+                catch (e) {
+                }
+            }
+        });
+    };
+    FsHtmlEditorComponent.prototype.registerOnChange = function (fn) {
+        this.onChange = fn;
+    };
+    FsHtmlEditorComponent.prototype.registerOnTouched = function (fn) {
+        this.onTouched = fn;
+    };
+    FsHtmlEditorComponent.prototype.ngOnDestroy = function () {
+        this._initialize$.complete();
+        this._destroy$.next();
+        this._destroy$.complete();
+        this.destroy();
+    };
+    FsHtmlEditorComponent.prototype.destroy = function () {
+        if (this.editor) {
+            this.editor.destroy();
+        }
+        this.initialized = false;
+        this._cdRef.markForCheck();
+        this.el.innerHTML = '';
+    };
+    FsHtmlEditorComponent.prototype._createConfig = function () {
+        return merge({ froalaConfig: {} }, this._defaultConfig, this.config);
+    };
+    FsHtmlEditorComponent.prototype._change = function (html) {
+        this._html = html;
+        this.onChange(html);
+    };
+    FsHtmlEditorComponent.prototype._initPlugins = function (config) {
+        var _this = this;
+        (config.plugins || []).forEach(function (plugin) {
+            _this._fr.FroalaEditor.PLUGINS[plugin.config.name] = function (editor) {
+                plugin.editor = editor;
+                plugin.initialize();
+                return plugin;
+            };
+            (plugin.config.buttons || []).forEach(function (button) {
+                _this._fr.FroalaEditor.DefineIcon(button.name, {
+                    NAME: button.name,
+                    PATH: button.svgPath,
+                });
+                _this._fr.FroalaEditor.RegisterCommand(button.name, {
+                    icon: button.name,
+                    title: button.tooltip,
+                    undo: button.undo,
+                    focus: button.focus,
+                    showOnMobile: button.showOnMobile,
+                    refreshAfterCallback: button.refreshAfterCallback,
+                    callback: function () {
+                        if (button.click) {
+                            button.click(this);
+                        }
+                    },
+                    refresh: function (button) {
+                        if (button.refresh) {
+                            button.refresh(this, button);
+                        }
+                    }
+                });
+            });
+        });
+    };
+    FsHtmlEditorComponent.prototype._createOptions = function () {
+        var config = this._createConfig();
+        return merge(
+        // For some reason editor store somewhere pointer on default config object and dublicate options each time on init
+        // Extra merge level fixed this problem and allow to init config properly without legacy data
+        {}, {
+            key: config.activationKey,
+            placeholderText: config.placeholder,
+            linkAlwaysBlank: true,
+            tabSpaces: 2,
+            typingTimer: 250,
+            tooltips: false,
+            wordPasteModal: false,
+            imageDefaultWidth: 0,
+            imageDefaultAlign: 'left',
+            quickInsertEnabled: false,
+            paragraphDefaultSelection: 'Format',
+            videoUpload: false,
+            paragraphFormat: {
+                N: 'Normal',
+                H1: 'Heading 1',
+                H2: 'Heading 2',
+                H3: 'Heading 3',
+                H4: 'Heading 4',
+                BLOCKQUOTE: 'Quote',
+            },
+            paragraphFormatSelection: true,
+            toolbarButtonsXS: {
+                moreText: {
+                    buttons: TextButtons,
+                    buttonsVisible: 1,
+                },
+                moreParagraph: {
+                    buttons: ParagraphButtons,
+                    buttonsVisible: 2,
+                },
+                moreRich: {
+                    buttons: RichButtons,
+                    buttonsVisible: 0,
+                },
+            },
+            toolbarButtons: {
+                moreText: {
+                    buttons: TextButtons,
+                    buttonsVisible: 3,
+                },
+                moreParagraph: {
+                    buttons: ParagraphButtons,
+                    buttonsVisible: 5,
+                },
+                moreRich: {
+                    buttons: RichButtons,
+                    buttonsVisible: 3,
+                },
+            },
+        }, config.froalaConfig);
+    };
+    FsHtmlEditorComponent.prototype._listenLazyInit = function () {
+        var _this = this;
+        this.froalaReady$
+            .pipe(filter(function (ready) { return ready; }), switchMap(function () { return _this._initialize$; }))
+            .subscribe(function () {
+            var selection = window.getSelection();
+            var options = {};
+            if (selection.baseNode) {
+                options.selection = {
+                    node: selection.baseNode.nodeValue,
+                    offset: selection.baseOffset,
+                };
+            }
+            _this.initialize(options);
+        });
+    };
+    var FsHtmlEditorComponent_1;
+    FsHtmlEditorComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
+        { type: ChangeDetectorRef },
+        { type: FsFroalaLoaderService }
+    ]; };
+    __decorate([
+        HostBinding('class.focused'),
+        __metadata("design:type", Object)
+    ], FsHtmlEditorComponent.prototype, "classFocused", void 0);
+    __decorate([
+        HostBinding('class.disabled'),
+        __metadata("design:type", Object)
+    ], FsHtmlEditorComponent.prototype, "classDisabled", void 0);
+    __decorate([
+        ViewChild('elRef'),
+        __metadata("design:type", ElementRef)
+    ], FsHtmlEditorComponent.prototype, "elRef", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], FsHtmlEditorComponent.prototype, "config", void 0);
+    FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
+        Component({
+            selector: 'fs-html-editor',
+            template: "<div class=\"fs-html-editor-default\">\n  <ng-container *ngIf=\"initialized\">\n    <ng-container *fsSkeleton=\"(froalaReady$ | async) !== false\">\n    </ng-container>\n  </ng-container>\n\n  <div #elRef></div>\n\n  <div class=\"bottom-line\"></div>\n  <div class=\"disabled-line\"></div>\n  <fs-html-renderer\n    *ngIf=\"!initialized\"\n    [html]=\"html\"\n    (click)=\"uninitializedClick($event)\">\n  </fs-html-renderer>\n</div>\n",
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return FsHtmlEditorComponent_1; }),
+                    multi: true
+                },
+                {
+                    provide: NG_VALIDATORS,
+                    useExisting: forwardRef(function () { return FsHtmlEditorComponent_1; }),
+                    multi: true
+                },
+            ],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [":host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar{transition:none!important}:host ::ng-deep .fr-toolbar{position:-webkit-sticky;position:sticky;z-index:2;border-radius:0;background-color:transparent}:host ::ng-deep .fr-toolbar .fr-btn-grp{margin:0 20px 0 0;position:relative}:host ::ng-deep .fr-toolbar .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top{border:0}:host ::ng-deep .fr-toolbar .fr-newline{margin:0}:host ::ng-deep .fr-toolbar .fr-more-toolbar{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection:after{right:10px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view ol,:host ::ng-deep .fr-view ul{list-style-position:unset}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}:host.disabled ::ng-deep .disabled-line{display:block}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}.disabled-line{display:none;position:absolute;bottom:-1px;z-index:1;background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);background-size:4px 100%;background-repeat:repeat-x;height:1px;width:100%}.bottom-line{opacity:0;transform-origin:50%;transform:scaleX(.5);transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%;border-bottom:2px solid #949494;position:absolute;bottom:-1px;z-index:1}:host{position:relative;display:block}:host.focused .bottom-line{opacity:1;display:block;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}"]
+        }),
+        __param(0, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
+        __metadata("design:paramtypes", [Object, ChangeDetectorRef,
+            FsFroalaLoaderService])
+    ], FsHtmlEditorComponent);
+    return FsHtmlEditorComponent;
 }());
 
-var FsHtmlRendererComponent = /** @class */ (function () {
-    function FsHtmlRendererComponent(sanitized, _cdRef) {
-        this.sanitized = sanitized;
-        this._cdRef = _cdRef;
-    }
-    Object.defineProperty(FsHtmlRendererComponent.prototype, "setHtml", {
-        set: function (html) {
-            this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html);
-            this._cdRef.markForCheck();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FsHtmlRendererComponent.ctorParameters = function () { return [
-        { type: DomSanitizer },
-        { type: ChangeDetectorRef }
-    ]; };
-    __decorate([
-        Input('html'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], FsHtmlRendererComponent.prototype, "setHtml", null);
-    FsHtmlRendererComponent = __decorate([
-        Component({
-            selector: 'fs-html-renderer',
-            template: "<div class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></div>\n",
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [""]
-        }),
-        __metadata("design:paramtypes", [DomSanitizer,
-            ChangeDetectorRef])
-    ], FsHtmlRendererComponent);
-    return FsHtmlRendererComponent;
+var FsHtmlRendererComponent = /** @class */ (function () {
+    function FsHtmlRendererComponent(sanitized, _cdRef) {
+        this.sanitized = sanitized;
+        this._cdRef = _cdRef;
+    }
+    Object.defineProperty(FsHtmlRendererComponent.prototype, "setHtml", {
+        set: function (html) {
+            this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html);
+            this._cdRef.markForCheck();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FsHtmlRendererComponent.ctorParameters = function () { return [
+        { type: DomSanitizer },
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input('html'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], FsHtmlRendererComponent.prototype, "setHtml", null);
+    FsHtmlRendererComponent = __decorate([
+        Component({
+            selector: 'fs-html-renderer',
+            template: "<div class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></div>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [""]
+        }),
+        __metadata("design:paramtypes", [DomSanitizer,
+            ChangeDetectorRef])
+    ], FsHtmlRendererComponent);
+    return FsHtmlRendererComponent;
 }());
 
-var FsHtmlEditorModule = /** @class */ (function () {
-    function FsHtmlEditorModule() {
-    }
-    FsHtmlEditorModule_1 = FsHtmlEditorModule;
-    FsHtmlEditorModule.forRoot = function (config) {
-        if (config === void 0) { config = {}; }
-        return {
-            ngModule: FsHtmlEditorModule_1,
-            providers: [
-                { provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
-                {
-                    provide: FS_HTML_EDITOR_CONFIG,
-                    useFactory: FsHtmlEditorConfigFactory,
-                    deps: [FS_HTML_EDITOR_DEFAULT_CONFIG]
-                }
-            ]
-        };
-    };
-    var FsHtmlEditorModule_1;
-    FsHtmlEditorModule = FsHtmlEditorModule_1 = __decorate([
-        NgModule({
-            imports: [
-                CommonModule,
-                FsSkeletonModule,
-            ],
-            exports: [
-                FsHtmlEditorComponent,
-                FsHtmlRendererComponent,
-            ],
-            declarations: [
-                FsHtmlEditorComponent,
-                FsHtmlRendererComponent,
-            ],
-        })
-    ], FsHtmlEditorModule);
-    return FsHtmlEditorModule;
-}());
-function FsHtmlEditorConfigFactory(config) {
-    return __assign({ defaultPlugins: [
-            "align" /* Align */,
-            "colors" /* Colors */,
-            "image" /* Image */,
-            "link" /* Link */,
-            "lists" /* Lists */,
-            "paragraph_format" /* ParagraphFormat */,
-            "quote" /* Quote */,
-            "table" /* Table */,
-            "url" /* Url */,
-            "video" /* Video */,
-            "draggable" /* Draggable */,
-            "font_size" /* FontSize */,
-        ] }, config);
+var FsHtmlEditorModule = /** @class */ (function () {
+    function FsHtmlEditorModule() {
+    }
+    FsHtmlEditorModule_1 = FsHtmlEditorModule;
+    FsHtmlEditorModule.forRoot = function (config) {
+        if (config === void 0) { config = {}; }
+        return {
+            ngModule: FsHtmlEditorModule_1,
+            providers: [
+                { provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
+                {
+                    provide: FS_HTML_EDITOR_CONFIG,
+                    useFactory: FsHtmlEditorConfigFactory,
+                    deps: [FS_HTML_EDITOR_DEFAULT_CONFIG]
+                }
+            ]
+        };
+    };
+    var FsHtmlEditorModule_1;
+    FsHtmlEditorModule = FsHtmlEditorModule_1 = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                FsSkeletonModule,
+            ],
+            exports: [
+                FsHtmlEditorComponent,
+                FsHtmlRendererComponent,
+            ],
+            declarations: [
+                FsHtmlEditorComponent,
+                FsHtmlRendererComponent,
+            ],
+        })
+    ], FsHtmlEditorModule);
+    return FsHtmlEditorModule;
+}());
+function FsHtmlEditorConfigFactory(config) {
+    return __assign({ defaultPlugins: [
+            "align" /* Align */,
+            "colors" /* Colors */,
+            "image" /* Image */,
+            "link" /* Link */,
+            "lists" /* Lists */,
+            "paragraph_format" /* ParagraphFormat */,
+            "quote" /* Quote */,
+            "table" /* Table */,
+            "url" /* Url */,
+            "video" /* Video */,
+            "draggable" /* Draggable */,
+        ] }, config);
 }
 
-var Plugin = /** @class */ (function () {
-    function Plugin() {
-    }
-    Plugin.prototype.initialize = function () { };
-    Plugin.prototype.destroy = function () { };
-    return Plugin;
+var Plugin = /** @class */ (function () {
+    function Plugin() {
+    }
+    Plugin.prototype.initialize = function () { };
+    Plugin.prototype.destroy = function () { };
+    return Plugin;
 }());
 
-var MentionPlugin = /** @class */ (function (_super) {
-    __extends(MentionPlugin, _super);
-    function MentionPlugin(config) {
-        var _this = _super.call(this) || this;
-        _this.config = config;
-        _this.config = __assign(__assign({}, config), { buttons: [
-                {
-                    name: config.name,
-                    tooltip: config.tooltip,
-                    svgPath: config.iconPath,
-                    click: function (editor) {
-                        _this._closeAll();
-                        _this._tribute.showMenuForCollection(editor.el);
-                    }
-                }
-            ] });
-        _this._tribute = new Tribute({
-            values: debounce(_this._loadValues.bind(_this), 200),
-            searchOpts: {
-                pre: '',
-                post: '',
-                skip: true
-            },
-            containerClass: "fs-html-editor-mention-container " + (_this.config.containerClass || ''),
-            itemClass: "fs-html-editor-mention-menu-item " + (_this.config.menuItemClass || ''),
-            trigger: _this.config.trigger,
-            allowSpaces: true,
-            menuItemTemplate: function (item) {
-                return _this.config.menuItemTemplate(item.original);
-            },
-            selectTemplate: function (item) {
-                var template = _this.config.selectedTemplate(item.original);
-                var p = document.createElement('p');
-                p.innerHTML = template;
-                var node = p.firstElementChild;
-                if (!node) {
-                    node = document.createElement('span');
-                    node.innerHTML = template;
-                }
-                node.setAttribute('contenteditable', 'false');
-                node.classList.add('fr-deletable');
-                return node.outerHTML;
-            },
-        });
-        MentionPlugin._tributes.push(_this._tribute);
-        return _this;
-    }
-    MentionPlugin.prototype.initialize = function () {
-        var _this = this;
-        this._tribute.attach(this.editor.el);
-        this.editor.events.on('keydown', function (e) {
-            if (e.key === 'Enter' && _this._tribute.isActive) {
-                return false;
-            }
-        }, true);
-    };
-    MentionPlugin.prototype.destroy = function () { };
-    MentionPlugin.prototype._closeAll = function () {
-        MentionPlugin._tributes.forEach(function (tribute) {
-            if (tribute.menu) {
-                tribute.hideMenu();
-            }
-        });
-    };
-    MentionPlugin.prototype._loadValues = function (keyword, cb) {
-        return this.config.fetch(keyword)
-            .subscribe(function (data) {
-            cb(data);
-        });
-    };
-    MentionPlugin._tributes = [];
-    return MentionPlugin;
+var MentionPlugin = /** @class */ (function (_super) {
+    __extends(MentionPlugin, _super);
+    function MentionPlugin(config) {
+        var _this = _super.call(this) || this;
+        _this.config = config;
+        _this.config = __assign(__assign({}, config), { buttons: [
+                {
+                    name: config.name,
+                    tooltip: config.tooltip,
+                    svgPath: config.iconPath,
+                    click: function (editor) {
+                        _this._closeAll();
+                        _this._tribute.showMenuForCollection(editor.el);
+                    }
+                }
+            ] });
+        _this._tribute = new Tribute({
+            values: debounce(_this._loadValues.bind(_this), 200),
+            searchOpts: {
+                pre: '',
+                post: '',
+                skip: true
+            },
+            containerClass: "fs-html-editor-mention-container " + (_this.config.containerClass || ''),
+            itemClass: "fs-html-editor-mention-menu-item " + (_this.config.menuItemClass || ''),
+            trigger: _this.config.trigger,
+            allowSpaces: true,
+            menuItemTemplate: function (item) {
+                return _this.config.menuItemTemplate(item.original);
+            },
+            selectTemplate: function (item) {
+                var template = _this.config.selectedTemplate(item.original);
+                var p = document.createElement('p');
+                p.innerHTML = template;
+                var node = p.firstElementChild;
+                if (!node) {
+                    node = document.createElement('span');
+                    node.innerHTML = template;
+                }
+                node.setAttribute('contenteditable', 'false');
+                node.classList.add('fr-deletable');
+                return node.outerHTML;
+            },
+        });
+        MentionPlugin._tributes.push(_this._tribute);
+        return _this;
+    }
+    MentionPlugin.prototype.initialize = function () {
+        var _this = this;
+        this._tribute.attach(this.editor.el);
+        this.editor.events.on('keydown', function (e) {
+            if (e.key === 'Enter' && _this._tribute.isActive) {
+                return false;
+            }
+        }, true);
+    };
+    MentionPlugin.prototype.destroy = function () { };
+    MentionPlugin.prototype._closeAll = function () {
+        MentionPlugin._tributes.forEach(function (tribute) {
+            if (tribute.menu) {
+                tribute.hideMenu();
+            }
+        });
+    };
+    MentionPlugin.prototype._loadValues = function (keyword, cb) {
+        return this.config.fetch(keyword)
+            .subscribe(function (data) {
+            cb(data);
+        });
+    };
+    MentionPlugin._tributes = [];
+    return MentionPlugin;
 }(Plugin));
 
-var ChecklistPlugin = /** @class */ (function (_super) {
-    __extends(ChecklistPlugin, _super);
-    function ChecklistPlugin(config) {
-        if (config === void 0) { config = { name: 'checklist' }; }
-        var _this = _super.call(this) || this;
-        _this.config = config;
-        _this.config = __assign(__assign({}, config), { name: 'checklist', buttons: [
-                {
-                    name: 'checklist',
-                    svgPath: 'M8.4,10.3l-1.2,1.2l4,4L20,6.7l-1.2-1.2l-7.6,7.6L8.4,10.3z M18.2,18.2H5.8V5.8h8.9V4H5.8C4.8,4,4,4.8,4,5.8v12.4c0,1,0.8,1.8,1.8,1.8h12.4c1,0,1.8-0.8,1.8-1.8v-7.1h-1.8V18.2z',
-                    click: function (editor) {
-                        editor.html.insert('<ul class="checklist"><li></li></ul>');
-                    }
-                }
-            ] });
-        return _this;
-    }
-    ChecklistPlugin.prototype.initialize = function () {
-        this.editor.events.on('click', function (e) {
-            var li = e.target;
-            if (li.nodeName === 'LI' && e.offsetX < 0) {
-                var items = __spread([li], li.querySelectorAll('li'));
-                if (li.classList.contains('checked')) {
-                    items.forEach(function (item) {
-                        item.classList.remove('checked');
-                    });
-                }
-                else {
-                    items.forEach(function (item) {
-                        item.classList.add('checked');
-                    });
-                }
-            }
-        }, false);
-    };
-    return ChecklistPlugin;
+var ChecklistPlugin = /** @class */ (function (_super) {
+    __extends(ChecklistPlugin, _super);
+    function ChecklistPlugin(config) {
+        if (config === void 0) { config = { name: 'checklist' }; }
+        var _this = _super.call(this) || this;
+        _this.config = config;
+        _this.config = __assign(__assign({}, config), { name: 'checklist', buttons: [
+                {
+                    name: 'checklist',
+                    svgPath: 'M8.4,10.3l-1.2,1.2l4,4L20,6.7l-1.2-1.2l-7.6,7.6L8.4,10.3z M18.2,18.2H5.8V5.8h8.9V4H5.8C4.8,4,4,4.8,4,5.8v12.4c0,1,0.8,1.8,1.8,1.8h12.4c1,0,1.8-0.8,1.8-1.8v-7.1h-1.8V18.2z',
+                    click: function (editor) {
+                        editor.html.insert('<ul class="checklist"><li></li></ul>');
+                    }
+                }
+            ] });
+        return _this;
+    }
+    ChecklistPlugin.prototype.initialize = function () {
+        this.editor.events.on('click', function (e) {
+            var li = e.target;
+            if (li.nodeName === 'LI' && e.offsetX < 0) {
+                var items = __spread([li], li.querySelectorAll('li'));
+                if (li.classList.contains('checked')) {
+                    items.forEach(function (item) {
+                        item.classList.remove('checked');
+                    });
+                }
+                else {
+                    items.forEach(function (item) {
+                        item.classList.add('checked');
+                    });
+                }
+            }
+        }, false);
+    };
+    return ChecklistPlugin;
 }(Plugin));
 
-var CodePlugin = /** @class */ (function (_super) {
-    __extends(CodePlugin, _super);
-    function CodePlugin(config) {
-        if (config === void 0) { config = { name: 'code' }; }
-        var _this = _super.call(this) || this;
-        _this.config = config;
-        _this.config = __assign(__assign({}, config), { name: 'code', buttons: [
-                {
-                    name: 'code',
-                    svgPath: 'M8.9,7.3L4.2,12l4.7,4.7l1.1-1.1L6.4,12L10,8.4L8.9,7.3z M15.1,7.3L14,8.4l3.6,3.6L14,15.6l1.1,1.1l4.7-4.7L15.1,7.3z',
-                    click: function (editor) {
-                        var node = editor.selection.get();
-                        var codeEl = _this._getCodeEl(node.baseNode);
-                        if (codeEl) {
-                            codeEl.classList.remove('code');
-                        }
-                        else {
-                            editor.html.insert('<p class="code">' + editor.selection.get().toString().replace(/\n{1,}/g, '<br>') + '</p>');
-                        }
-                    }
-                }
-            ] });
-        return _this;
-    }
-    CodePlugin.prototype.initialize = function () {
-        var _this = this;
-        this.editor.events.on('keydown', function (e) {
-            if (e.keyCode === 13) {
-                var selection = _this.editor.selection.get();
-                if (selection && _this._getCodeEl(selection.baseNode)) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.stopImmediatePropagation();
-                    var br = '<br>';
-                    var base = selection.baseNode;
-                    if (base.nodeName === '#text' && selection.baseOffset === base.length) {
-                        if (!(base.nextSibling && base.nextSibling.nodeName === 'BR')) {
-                            br += '<br>';
-                        }
-                    }
-                    else {
-                        var el = Array.from(base.childNodes).splice(selection.baseOffset - 1, 1).pop();
-                        if (el && el.nodeName !== 'BR') {
-                            br += '<br>';
-                        }
-                    }
-                    _this.editor.html.insert(br);
-                    return false;
-                }
-            }
-        }, true);
-    };
-    CodePlugin.prototype.destroy = function () { };
-    CodePlugin.prototype._getCodeEl = function (el) {
-        if (el) {
-            if (el.classList && el.classList.contains('code')) {
-                return el;
-            }
-            if (el.parentElement) {
-                return this._getCodeEl(el.parentElement);
-            }
-        }
-        return null;
-    };
-    return CodePlugin;
+var CodePlugin = /** @class */ (function (_super) {
+    __extends(CodePlugin, _super);
+    function CodePlugin(config) {
+        if (config === void 0) { config = { name: 'code' }; }
+        var _this = _super.call(this) || this;
+        _this.config = config;
+        _this.config = __assign(__assign({}, config), { name: 'code', buttons: [
+                {
+                    name: 'code',
+                    svgPath: 'M8.9,7.3L4.2,12l4.7,4.7l1.1-1.1L6.4,12L10,8.4L8.9,7.3z M15.1,7.3L14,8.4l3.6,3.6L14,15.6l1.1,1.1l4.7-4.7L15.1,7.3z',
+                    click: function (editor) {
+                        var node = editor.selection.get();
+                        var codeEl = _this._getCodeEl(node.baseNode);
+                        if (codeEl) {
+                            codeEl.classList.remove('code');
+                        }
+                        else {
+                            editor.html.insert('<p class="code">' + editor.selection.get().toString().replace(/\n{1,}/g, '<br>') + '</p>');
+                        }
+                    }
+                }
+            ] });
+        return _this;
+    }
+    CodePlugin.prototype.initialize = function () {
+        var _this = this;
+        this.editor.events.on('keydown', function (e) {
+            if (e.keyCode === 13) {
+                var selection = _this.editor.selection.get();
+                if (selection && _this._getCodeEl(selection.baseNode)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    var br = '<br>';
+                    var base = selection.baseNode;
+                    if (base.nodeName === '#text' && selection.baseOffset === base.length) {
+                        if (!(base.nextSibling && base.nextSibling.nodeName === 'BR')) {
+                            br += '<br>';
+                        }
+                    }
+                    else {
+                        var el = Array.from(base.childNodes).splice(selection.baseOffset - 1, 1).pop();
+                        if (el && el.nodeName !== 'BR') {
+                            br += '<br>';
+                        }
+                    }
+                    _this.editor.html.insert(br);
+                    return false;
+                }
+            }
+        }, true);
+    };
+    CodePlugin.prototype.destroy = function () { };
+    CodePlugin.prototype._getCodeEl = function (el) {
+        if (el) {
+            if (el.classList && el.classList.contains('code')) {
+                return el;
+            }
+            if (el.parentElement) {
+                return this._getCodeEl(el.parentElement);
+            }
+        }
+        return null;
+    };
+    return CodePlugin;
 }(Plugin));
 
-var ScreenRecordPlugin = /** @class */ (function (_super) {
-    __extends(ScreenRecordPlugin, _super);
-    function ScreenRecordPlugin(config) {
-        if (config === void 0) { config = {}; }
-        var _this = _super.call(this) || this;
-        _this.config = config;
-        _this.config = __assign(__assign({}, config), { name: config.name || 'screenRecord', buttons: [
-                {
-                    name: 'screenRecord',
-                    svgPath: "M14.7,7.7v6.1H7.1V7.7H14.7 M16.3,9.6V6.9c0-0.4-0.3-0.8-0.8-0.8H6.4c-0.4,0-0.8,0.3-0.8,0.8v7.6c0,0.4,0.3,0.8,0.8,0.8h9.1c0.4,0,0.8-0.3,0.8-0.8v-2.7l1.7,1.7c0.3,0.3,0.8,0.3,1.1,0c0.1-0.1,0.2-0.3,0.2-0.5V8.4c0-0.4-0.3-0.8-0.8-0.8\n\tc-0.2,0-0.4,0.1-0.5,0.2L16.3,9.6z M21.5,1.6H2.9c-0.7,0-1.3,0.7-1.3,1.6v14.6c0,0.9,0.6,1.6,1.3,1.6h7.6v1.1l-5,1c-0.2,0-0.4,0.3-0.4,0.6c0,0.3,0.2,0.4,0.4,0.4c0,0,0,0,0.1,0l5.3-1h2.6l5.3,1c0,0,0,0,0.1,0c0.2,0,0.4-0.2,0.4-0.4\n  c0-0.3-0.1-0.6-0.4-0.6l-5-1v-1.1h7.6c0.7,0,1.3-0.7,1.3-1.6V3.2C22.9,2.3,22.3,1.6,21.5,1.6z M21.1,17.3H3.3V3.7h17.8L21.1,17.3L21.1,17.3z",
-                    tooltip: 'Screen Record',
-                    click: function (editor) {
-                        navigator.mediaDevices.getDisplayMedia({ video: true })
-                            .then(function (stream) {
-                            var chunks = [];
-                            var options = { mimeType: 'video/webm; codecs=vp9' };
-                            var mediaRecorder = new MediaRecorder(stream, options);
-                            stream.addEventListener('inactive', function (e) {
-                                mediaRecorder.stop();
-                                mediaRecorder = null;
-                                stream.getTracks().forEach(function (track) { return track.stop(); });
-                                stream = null;
-                                var blob = new Blob(chunks, { type: 'video/webm' });
-                                config.upload(blob)
-                                    .subscribe(function (url) {
-                                    editor.html.insert("<span class=\"fr-screen-record fr-deletable fr-draggable\"><video controls style=\"max-width:" + config.maxWidth + "\"><source src=\"" + url + "\" type=\"video/webm\"></video></span>");
-                                });
-                            });
-                            mediaRecorder.addEventListener('dataavailable', function (event) {
-                                if (event.data && event.data.size > 0) {
-                                    chunks.push(event.data);
-                                }
-                            });
-                            mediaRecorder.start(10);
-                        })
-                            .catch(function (e) { });
-                    }
-                }
-            ] });
-        return _this;
-    }
-    ScreenRecordPlugin.prototype.initialize = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var FroalaEditor;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, ResourceLoader.loadStyles('froala')
-                            .toPromise()];
-                    case 1:
-                        _a.sent();
-                        FroalaEditor = window.FroalaEditor;
-                        this.editor.events.on('mouseup', function (e) {
-                            var el = _this._getEl(e.target);
-                            if (el) {
-                                _this.editor.popups.hideAll();
-                                _this._activeEl = el;
-                                _this._showPopup(el);
-                            }
-                        });
-                        FroalaEditor.POPUP_TEMPLATES["screenRecordPlugin.popup"] = '[_BUTTONS_]';
-                        FroalaEditor.DefineIcon('popupClose', { NAME: 'trash', SVG_KEY: 'remove' });
-                        FroalaEditor.RegisterCommand('popupClose', {
-                            title: 'Remove',
-                            undo: false,
-                            focus: false,
-                            callback: function () {
-                                if (_this._activeEl) {
-                                    _this._activeEl.remove();
-                                }
-                            }
-                        });
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    ScreenRecordPlugin.prototype._createPopup = function () {
-        var template = {
-            buttons: "<div class=\"fr-buttons\">" + this.editor.button.buildList(['popupClose']) + "</div>",
-        };
-        return this.editor.popups.create('screenRecordPlugin.popup', template);
-    };
-    ScreenRecordPlugin.prototype._showPopup = function (el) {
-        var $popup = this.editor.popups.get('screenRecordPlugin.popup');
-        if (!$popup) {
-            $popup = this._createPopup();
-        }
-        this.editor.popups.setContainer('screenRecordPlugin.popup', this.editor.$(el));
-        var left = el.offsetLeft + el.offsetWidth / 2;
-        this.editor.popups.show('screenRecordPlugin.popup', left, null);
-    };
-    ScreenRecordPlugin.prototype._getEl = function (el) {
-        if (el && el.classList) {
-            if (el.classList.contains('fr-screen-record'))
-                return el;
-            return this._getEl(el.parentNode);
-        }
-    };
-    return ScreenRecordPlugin;
+var ScreenRecordPlugin = /** @class */ (function (_super) {
+    __extends(ScreenRecordPlugin, _super);
+    function ScreenRecordPlugin(config) {
+        if (config === void 0) { config = {}; }
+        var _this = _super.call(this) || this;
+        _this.config = config;
+        _this.config = __assign(__assign({}, config), { name: config.name || 'screenRecord', buttons: [
+                {
+                    name: 'screenRecord',
+                    svgPath: "M14.7,7.7v6.1H7.1V7.7H14.7 M16.3,9.6V6.9c0-0.4-0.3-0.8-0.8-0.8H6.4c-0.4,0-0.8,0.3-0.8,0.8v7.6c0,0.4,0.3,0.8,0.8,0.8h9.1c0.4,0,0.8-0.3,0.8-0.8v-2.7l1.7,1.7c0.3,0.3,0.8,0.3,1.1,0c0.1-0.1,0.2-0.3,0.2-0.5V8.4c0-0.4-0.3-0.8-0.8-0.8\n\tc-0.2,0-0.4,0.1-0.5,0.2L16.3,9.6z M21.5,1.6H2.9c-0.7,0-1.3,0.7-1.3,1.6v14.6c0,0.9,0.6,1.6,1.3,1.6h7.6v1.1l-5,1c-0.2,0-0.4,0.3-0.4,0.6c0,0.3,0.2,0.4,0.4,0.4c0,0,0,0,0.1,0l5.3-1h2.6l5.3,1c0,0,0,0,0.1,0c0.2,0,0.4-0.2,0.4-0.4\n  c0-0.3-0.1-0.6-0.4-0.6l-5-1v-1.1h7.6c0.7,0,1.3-0.7,1.3-1.6V3.2C22.9,2.3,22.3,1.6,21.5,1.6z M21.1,17.3H3.3V3.7h17.8L21.1,17.3L21.1,17.3z",
+                    tooltip: 'Screen Record',
+                    click: function (editor) {
+                        navigator.mediaDevices.getDisplayMedia({ video: true })
+                            .then(function (stream) {
+                            var chunks = [];
+                            var options = { mimeType: 'video/webm; codecs=vp9' };
+                            var mediaRecorder = new MediaRecorder(stream, options);
+                            stream.addEventListener('inactive', function (e) {
+                                mediaRecorder.stop();
+                                mediaRecorder = null;
+                                stream.getTracks().forEach(function (track) { return track.stop(); });
+                                stream = null;
+                                var blob = new Blob(chunks, { type: 'video/webm' });
+                                config.upload(blob)
+                                    .subscribe(function (url) {
+                                    editor.html.insert("<span class=\"fr-screen-record fr-deletable fr-draggable\"><video controls style=\"max-width:" + config.maxWidth + "\"><source src=\"" + url + "\" type=\"video/webm\"></video></span>");
+                                });
+                            });
+                            mediaRecorder.addEventListener('dataavailable', function (event) {
+                                if (event.data && event.data.size > 0) {
+                                    chunks.push(event.data);
+                                }
+                            });
+                            mediaRecorder.start(10);
+                        })
+                            .catch(function (e) { });
+                    }
+                }
+            ] });
+        return _this;
+    }
+    ScreenRecordPlugin.prototype.initialize = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var FroalaEditor;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, ResourceLoader.loadStyles('froala')
+                            .toPromise()];
+                    case 1:
+                        _a.sent();
+                        FroalaEditor = window.FroalaEditor;
+                        this.editor.events.on('mouseup', function (e) {
+                            var el = _this._getEl(e.target);
+                            if (el) {
+                                _this.editor.popups.hideAll();
+                                _this._activeEl = el;
+                                _this._showPopup(el);
+                            }
+                        });
+                        FroalaEditor.POPUP_TEMPLATES["screenRecordPlugin.popup"] = '[_BUTTONS_]';
+                        FroalaEditor.DefineIcon('popupClose', { NAME: 'trash', SVG_KEY: 'remove' });
+                        FroalaEditor.RegisterCommand('popupClose', {
+                            title: 'Remove',
+                            undo: false,
+                            focus: false,
+                            callback: function () {
+                                if (_this._activeEl) {
+                                    _this._activeEl.remove();
+                                }
+                            }
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ScreenRecordPlugin.prototype._createPopup = function () {
+        var template = {
+            buttons: "<div class=\"fr-buttons\">" + this.editor.button.buildList(['popupClose']) + "</div>",
+        };
+        return this.editor.popups.create('screenRecordPlugin.popup', template);
+    };
+    ScreenRecordPlugin.prototype._showPopup = function (el) {
+        var $popup = this.editor.popups.get('screenRecordPlugin.popup');
+        if (!$popup) {
+            $popup = this._createPopup();
+        }
+        this.editor.popups.setContainer('screenRecordPlugin.popup', this.editor.$(el));
+        var left = el.offsetLeft + el.offsetWidth / 2;
+        this.editor.popups.show('screenRecordPlugin.popup', left, null);
+    };
+    ScreenRecordPlugin.prototype._getEl = function (el) {
+        if (el && el.classList) {
+            if (el.classList.contains('fr-screen-record'))
+                return el;
+            return this._getEl(el.parentNode);
+        }
+    };
+    return ScreenRecordPlugin;
 }(Plugin));
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ChecklistPlugin, CodePlugin, FS_HTML_EDITOR_CONFIG, FsHtmlEditorComponent, FsHtmlEditorModule, FsHtmlRendererComponent, MentionPlugin, ParagraphButtons, RichButtons, ScreenRecordPlugin, TextButtons, FsHtmlEditorConfigFactory as ɵa, FS_HTML_EDITOR_DEFAULT_CONFIG as ɵb, FsFroalaLoaderService as ɵc, Plugin as ɵe };