@firestitch/html-editor 9.4.4 → 9.4.5

package/bundles/firestitch-html-editor.umd.js

@@ -234,1020 +234,1022 @@
         return value;
     }
 
-    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 core.InjectionToken('fs-html-editor.default-config');
+    var FS_HTML_EDITOR_DEFAULT_CONFIG = new core.InjectionToken('fs-html-editor.default-config');
     var FS_HTML_EDITOR_CONFIG = new core.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',
-        };
-        var stylesPaths = {
-            froala: 'froala_editor.pkgd.min.css',
-        };
-        var loadResource = function (scriptPath) {
-            if (!files.has(scriptPath)) {
-                var obs$ = new rxjs.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(operators.shareReplay(1));
-                files.set(scriptPath, obs$);
-            }
-            return files.get(scriptPath);
-        };
-        var loadStyles = function (stylePath) {
-            if (!files.has(stylePath)) {
-                var obs$ = new rxjs.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',
+            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 rxjs.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(operators.shareReplay(1));
+                files.set(scriptPath, obs$);
+            }
+            return files.get(scriptPath);
+        };
+        var loadStyles = function (stylePath) {
+            if (!files.has(stylePath)) {
+                var obs$ = new rxjs.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 rxjs.BehaviorSubject(false);
-            this._defaultPluginsLoaded = new rxjs.BehaviorSubject(false);
-            this._ready$ = rxjs.combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
-                .pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
-                return pluginsRead && FroalaReady;
-            }), operators.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;
-            rxjs.combineLatest([
-                ResourceLoader.loadResource('froala'),
-                ResourceLoader.loadStyles('froala')
-            ])
-                .pipe(operators.tap(function () {
-                _this._FroalaEditor = window.FroalaEditor;
-                _this._froalaDone();
-            }), operators.concatMap(function () {
-                return _this._loadPlugins();
-            }), operators.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 rxjs.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: core.Optional }, { type: core.Inject, args: [FS_HTML_EDITOR_CONFIG,] }] }
-        ]; };
-        FsFroalaLoaderService.ɵprov = core.ɵɵdefineInjectable({ factory: function FsFroalaLoaderService_Factory() { return new FsFroalaLoaderService(core.ɵɵinject(FS_HTML_EDITOR_CONFIG, 8)); }, token: FsFroalaLoaderService, providedIn: "root" });
-        FsFroalaLoaderService = __decorate([
-            core.Injectable({
-                providedIn: 'root',
-            }),
-            __param(0, core.Optional()), __param(0, core.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 rxjs.BehaviorSubject(false);
+            this._defaultPluginsLoaded = new rxjs.BehaviorSubject(false);
+            this._ready$ = rxjs.combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
+                .pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
+                return pluginsRead && FroalaReady;
+            }), operators.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;
+            rxjs.combineLatest([
+                ResourceLoader.loadResource('froala'),
+                ResourceLoader.loadStyles('froala')
+            ])
+                .pipe(operators.tap(function () {
+                _this._FroalaEditor = window.FroalaEditor;
+                _this._froalaDone();
+            }), operators.concatMap(function () {
+                return _this._loadPlugins();
+            }), operators.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 rxjs.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: core.Optional }, { type: core.Inject, args: [FS_HTML_EDITOR_CONFIG,] }] }
+        ]; };
+        FsFroalaLoaderService.ɵprov = core.ɵɵdefineInjectable({ factory: function FsFroalaLoaderService_Factory() { return new FsFroalaLoaderService(core.ɵɵinject(FS_HTML_EDITOR_CONFIG, 8)); }, token: FsFroalaLoaderService, providedIn: "root" });
+        FsFroalaLoaderService = __decorate([
+            core.Injectable({
+                providedIn: 'root',
+            }),
+            __param(0, core.Optional()), __param(0, core.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 rxjs.ReplaySubject();
-            this._destroy$ = new rxjs.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(operators.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 lodashEs.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 lodashEs.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(operators.filter(function (ready) { return ready; }), operators.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: core.Optional }, { type: core.Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
-            { type: core.ChangeDetectorRef },
-            { type: FsFroalaLoaderService }
-        ]; };
-        __decorate([
-            core.HostBinding('class.focused'),
-            __metadata("design:type", Object)
-        ], FsHtmlEditorComponent.prototype, "classFocused", void 0);
-        __decorate([
-            core.HostBinding('class.disabled'),
-            __metadata("design:type", Object)
-        ], FsHtmlEditorComponent.prototype, "classDisabled", void 0);
-        __decorate([
-            core.ViewChild('elRef'),
-            __metadata("design:type", core.ElementRef)
-        ], FsHtmlEditorComponent.prototype, "elRef", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsHtmlEditorComponent.prototype, "config", void 0);
-        FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
-            core.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: forms.NG_VALUE_ACCESSOR,
-                        useExisting: core.forwardRef(function () { return FsHtmlEditorComponent_1; }),
-                        multi: true
-                    },
-                    {
-                        provide: forms.NG_VALIDATORS,
-                        useExisting: core.forwardRef(function () { return FsHtmlEditorComponent_1; }),
-                        multi: true
-                    },
-                ],
-                changeDetection: core.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, core.Optional()), __param(0, core.Inject(FS_HTML_EDITOR_CONFIG)),
-            __metadata("design:paramtypes", [Object, core.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 rxjs.ReplaySubject();
+            this._destroy$ = new rxjs.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(operators.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 lodashEs.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 lodashEs.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(operators.filter(function (ready) { return ready; }), operators.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: core.Optional }, { type: core.Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
+            { type: core.ChangeDetectorRef },
+            { type: FsFroalaLoaderService }
+        ]; };
+        __decorate([
+            core.HostBinding('class.focused'),
+            __metadata("design:type", Object)
+        ], FsHtmlEditorComponent.prototype, "classFocused", void 0);
+        __decorate([
+            core.HostBinding('class.disabled'),
+            __metadata("design:type", Object)
+        ], FsHtmlEditorComponent.prototype, "classDisabled", void 0);
+        __decorate([
+            core.ViewChild('elRef'),
+            __metadata("design:type", core.ElementRef)
+        ], FsHtmlEditorComponent.prototype, "elRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsHtmlEditorComponent.prototype, "config", void 0);
+        FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
+            core.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: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return FsHtmlEditorComponent_1; }),
+                        multi: true
+                    },
+                    {
+                        provide: forms.NG_VALIDATORS,
+                        useExisting: core.forwardRef(function () { return FsHtmlEditorComponent_1; }),
+                        multi: true
+                    },
+                ],
+                changeDetection: core.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, core.Optional()), __param(0, core.Inject(FS_HTML_EDITOR_CONFIG)),
+            __metadata("design:paramtypes", [Object, core.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: platformBrowser.DomSanitizer },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input('html'),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], FsHtmlRendererComponent.prototype, "setHtml", null);
-        FsHtmlRendererComponent = __decorate([
-            core.Component({
-                selector: 'fs-html-renderer',
-                template: "<div class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></div>\n",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            }),
-            __metadata("design:paramtypes", [platformBrowser.DomSanitizer,
-                core.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: platformBrowser.DomSanitizer },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input('html'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], FsHtmlRendererComponent.prototype, "setHtml", null);
+        FsHtmlRendererComponent = __decorate([
+            core.Component({
+                selector: 'fs-html-renderer',
+                template: "<div class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></div>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            }),
+            __metadata("design:paramtypes", [platformBrowser.DomSanitizer,
+                core.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([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    skeleton.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 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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    skeleton.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 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: lodashEs.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: lodashEs.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));
 
     exports.ChecklistPlugin = ChecklistPlugin;