@firestitch/html-editor 14.0.0 → 16.0.0

package/{fesm2020 → fesm2022}/firestitch-html-editor.mjs

@@ -15,1040 +15,1064 @@ import { map, shareReplay, tap, concatMap, switchMap, filter, startWith, distinc
 import { merge, debounce } from 'lodash-es';
 import Tribute from 'tributejs';
 
-class FsHtmlRendererComponent {
-    constructor(sanitized, _cdRef) {
-        this.sanitized = sanitized;
-        this._cdRef = _cdRef;
-    }
-    set setHtml(html) {
-        this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
-        this._cdRef.markForCheck();
-    }
-}
-FsHtmlRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlRendererComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsHtmlRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-html-renderer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
-                type: Input,
-                args: ['html']
+class FsHtmlRendererComponent {
+    sanitized;
+    _cdRef;
+    set setHtml(html) {
+        this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
+        this._cdRef.markForCheck();
+    }
+    trustedHtml;
+    constructor(sanitized, _cdRef) {
+        this.sanitized = sanitized;
+        this._cdRef = _cdRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-html-renderer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
+                type: Input,
+                args: ['html']
             }] } });
 
-class FsHtmlRendererModule {
-}
-FsHtmlRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsHtmlRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [CommonModule], exports: [FsHtmlRendererComponent] });
-FsHtmlRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlRendererModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlRendererModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [
-                        FsHtmlRendererComponent,
-                    ],
-                    declarations: [
-                        FsHtmlRendererComponent,
-                    ],
-                }]
+class FsHtmlRendererModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [CommonModule], exports: [FsHtmlRendererComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        FsHtmlRendererComponent,
+                    ],
+                    declarations: [
+                        FsHtmlRendererComponent,
+                    ],
+                }]
         }] });
 
-class FsHtmlEditorContainerDirective {
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-}
-FsHtmlEditorContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsHtmlEditorContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FsHtmlEditorContainerDirective, selector: "[fsHtmlEditorContainer]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorContainerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[fsHtmlEditorContainer]' }]
+class FsHtmlEditorContainerDirective {
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FsHtmlEditorContainerDirective, selector: "[fsHtmlEditorContainer]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorContainerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[fsHtmlEditorContainer]' }]
         }] });
 
-const FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default-config');
+const FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default-config');
 const FS_HTML_EDITOR_CONFIG = new InjectionToken('fs-html-editor.config');
 
-class FsFroalaLoaderService {
-    constructor(_defaultConfig, _document) {
-        this._defaultConfig = _defaultConfig;
-        this._document = _document;
-        this._froalaLoaded = new BehaviorSubject(false);
-        this._froalaPluginsLoaded = new BehaviorSubject(false);
-        this._sourceLoader = fsSourceLoader;
-        this._loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
-            .pipe(map(([FroalaReady, pluginsRead]) => {
-            return pluginsRead && FroalaReady;
-        }), shareReplay(1));
-        this._sourceLoader.setDocument(this._document);
-        this._load();
-    }
-    get loaded$() {
-        return this._loaded$;
-    }
-    get FroalaEditor() {
-        return this._froalaEditor;
-    }
-    _load() {
-        const baseDir = '/assets/froala/';
-        this._sourceLoader.registerResources({
-            froala: [
-                `${baseDir}js/froala_editor.min.js`,
-                `${baseDir}css/froala_editor.pkgd.min.css`,
-            ],
-            froala_align: `${baseDir}js/plugins/align.min.js`,
-            froala_colors: `${baseDir}js/plugins/colors.min.js`,
-            froala_image: `${baseDir}js/plugins/image.min.js`,
-            froala_link: `${baseDir}js/plugins/link.min.js`,
-            froala_lists: `${baseDir}js/plugins/lists.min.js`,
-            froala_paragraph_format: `${baseDir}js/plugins/paragraph_format.min.js`,
-            froala_table: `${baseDir}js/plugins/table.min.js`,
-            froala_url: `${baseDir}js/plugins/url.min.js`,
-            froala_video: `${baseDir}js/plugins/video.min.js`,
-            froala_quote: `${baseDir}js/plugins/quote.min.js`,
-            froala_draggable: `${baseDir}js/plugins/draggable.min.js`,
-            froala_font_size: `${baseDir}js/plugins/font_size.min.js`,
-            froala_quick_insert: `${baseDir}js/plugins/quick_insert.min.js`,
-            froala_line_height: `${baseDir}js/plugins/line_height.min.js`,
-        });
-        this._sourceLoader.loadResource('froala')
-            .pipe(tap(() => {
-            this._froalaEditor = window.FroalaEditor;
-            this._froalaDone();
-        }), concatMap(() => {
-            return this._loadPlugins();
-        }), tap(() => {
-            this._froalaPluginsDone();
-        }))
-            .subscribe();
-    }
-    _loadPlugins() {
-        const resources = this._defaultConfig
-            .froalaPlugins
-            .map((pluginName) => `froala_${pluginName}`);
-        return this._sourceLoader.loadResources(resources);
-    }
-    _froalaDone() {
-        this._froalaLoaded.next(true);
-    }
-    _froalaPluginsDone() {
-        this._froalaPluginsLoaded.next(true);
-    }
-}
-FsFroalaLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-FsFroalaLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsFroalaLoaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FS_HTML_EDITOR_CONFIG]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
+class FsFroalaLoaderService {
+    _defaultConfig;
+    _document;
+    _froalaEditor;
+    _froalaLoaded = new BehaviorSubject(false);
+    _froalaPluginsLoaded = new BehaviorSubject(false);
+    _sourceLoader = fsSourceLoader;
+    _loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
+        .pipe(map(([FroalaReady, pluginsRead]) => {
+        return pluginsRead && FroalaReady;
+    }), shareReplay(1));
+    constructor(_defaultConfig, _document) {
+        this._defaultConfig = _defaultConfig;
+        this._document = _document;
+        this._sourceLoader.setDocument(this._document);
+        this._load();
+    }
+    get loaded$() {
+        return this._loaded$;
+    }
+    get FroalaEditor() {
+        return this._froalaEditor;
+    }
+    _load() {
+        const baseDir = '/assets/froala/';
+        this._sourceLoader.registerResources({
+            froala: [
+                `${baseDir}js/froala_editor.min.js`,
+                `${baseDir}css/froala_editor.pkgd.min.css`,
+            ],
+            froala_align: `${baseDir}js/plugins/align.min.js`,
+            froala_colors: `${baseDir}js/plugins/colors.min.js`,
+            froala_image: `${baseDir}js/plugins/image.min.js`,
+            froala_link: `${baseDir}js/plugins/link.min.js`,
+            froala_lists: `${baseDir}js/plugins/lists.min.js`,
+            froala_paragraph_format: `${baseDir}js/plugins/paragraph_format.min.js`,
+            froala_table: `${baseDir}js/plugins/table.min.js`,
+            froala_url: `${baseDir}js/plugins/url.min.js`,
+            froala_video: `${baseDir}js/plugins/video.min.js`,
+            froala_quote: `${baseDir}js/plugins/quote.min.js`,
+            froala_draggable: `${baseDir}js/plugins/draggable.min.js`,
+            froala_font_size: `${baseDir}js/plugins/font_size.min.js`,
+            froala_quick_insert: `${baseDir}js/plugins/quick_insert.min.js`,
+            froala_line_height: `${baseDir}js/plugins/line_height.min.js`,
+        });
+        this._sourceLoader.loadResource('froala')
+            .pipe(tap(() => {
+            this._froalaEditor = window.FroalaEditor;
+            this._froalaDone();
+        }), concatMap(() => {
+            return this._loadPlugins();
+        }), tap(() => {
+            this._froalaPluginsDone();
+        }))
+            .subscribe();
+    }
+    _loadPlugins() {
+        const resources = this._defaultConfig
+            .froalaPlugins
+            .map((pluginName) => `froala_${pluginName}`);
+        return this._sourceLoader.loadResources(resources);
+    }
+    _froalaDone() {
+        this._froalaLoaded.next(true);
+    }
+    _froalaPluginsDone() {
+        this._froalaPluginsLoaded.next(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsFroalaLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FS_HTML_EDITOR_CONFIG]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }]; } });
 
-const ParagraphButtons = [
-    'align',
-    'formatOL',
-    'formatUL',
-    'checklist',
-    'indent',
-    'outdent',
-    'lineHeight'
+const ParagraphButtons = [
+    'align',
+    'formatOL',
+    'formatUL',
+    'checklist',
+    'indent',
+    'outdent',
+    'lineHeight'
 ];
 
-const RichButtons = [
-    'insertTable',
-    'insertImage',
-    'insertLink',
-    'insertVideo',
+const RichButtons = [
+    'insertTable',
+    'insertImage',
+    'insertLink',
+    'insertVideo',
 ];
 
-const TextButtons = [
-    'paragraphFormat',
-    'bold',
-    'italic',
-    'underline',
-    'strikeThrough',
-    'subscript',
-    'superscript',
-    'fontFamily',
-    'fontSize',
-    'textColor',
-    'backgroundColor',
-    'inlineClass',
-    'inlineStyle',
-    'clearFormatting',
-    'quote',
-    'code',
+const TextButtons = [
+    'paragraphFormat',
+    'bold',
+    'italic',
+    'underline',
+    'strikeThrough',
+    'subscript',
+    'superscript',
+    'fontFamily',
+    'fontSize',
+    'textColor',
+    'backgroundColor',
+    'inlineClass',
+    'inlineStyle',
+    'clearFormatting',
+    'quote',
+    'code',
 ];
 
-class FsHtmlEditorComponent {
-    constructor(_defaultConfig, _cdRef, _fr) {
-        this._defaultConfig = _defaultConfig;
-        this._cdRef = _cdRef;
-        this._fr = _fr;
-        this.classFocused = false;
-        this.config = {};
-        this.disabled = false;
-        this.initialized = false;
-        this.containerID = `fs-html-editor-${guid('xxx')}`;
-        this._initialize$ = new ReplaySubject();
-        this._froalaReady$ = new BehaviorSubject(null);
-        this._destroy$ = new Subject();
-    }
-    get el() {
-        return this.elRef.nativeElement;
-    }
-    get html() {
-        return this._html;
-    }
-    get editor() {
-        return this._editor;
-    }
-    get froalaLoaded$() {
-        return this._fr.loaded$;
-    }
-    ngOnInit() {
-        this.config = this.config || {};
-        this.config.autofocus = this.config.autofocus && (!this.config.disabled || !this.disabled);
-        this.initialized = !this.config.initOnClick;
-    }
-    ngAfterViewInit() {
-        this._listenLazyInit();
-        this._initialize$.next();
-    }
-    hasContent() {
-        const el = document.createElement('div');
-        if (el.querySelector('img')) {
-            return true;
-        }
-        el.innerHTML = this._html;
-        return !!el.innerText.length;
-    }
-    uninitialize() {
-        this.initialized = false;
-    }
-    initialize(options = {}) {
-        const config = this._createConfig();
-        this._initPlugins(config);
-        this._initButtons(config);
-        this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), () => {
-            this._froalaReady$.next({ config, options });
-        });
-    }
-    updateSize() {
-        // Hack: To trigger the toolbar button size modes
-        window.dispatchEvent(new Event('resize'));
-    }
-    validate(control) {
-        const err = {};
-        if (this.config.maxLength && this._html) {
-            const maxLength = this.config.maxLength;
-            const length = this._html.length;
-            if (length > maxLength) {
-                err.maxLengthError = `Must be ${maxLength} characters or fewer. You entered ${length} characters.`;
-            }
-        }
-        return Object.keys(err).length ? err : null;
-    }
-    focus(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();
-        const elSelection = this.editor.selection.element();
-        if (elSelection) {
-            elSelection.scrollIntoView({ block: 'center' });
-        }
-    }
-    clear() {
-        this.writeValue('');
-    }
-    disable() {
-        this.disabled = true;
-    }
-    setHtml(html) {
-        this.writeValue(html);
-    }
-    writeValue(html) {
-        this._html = html || '';
-        if (Array.isArray(this._html)) {
-            this._html = this._html.pop();
-        }
-        this._html = this._html
-            .replace(/<(li)>\s?<(div)>/g, '<li>')
-            .replace(/<\/(div)><\/(li)>/g, '</li>');
-        if (this.editor && this.editor.html) {
-            try {
-                this.editor.html.set(this._html);
-            }
-            catch (e) {
-                //
-            }
-        }
-        this._cdRef.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    ngOnDestroy() {
-        this._initialize$.complete();
-        this._destroy$.next();
-        this._destroy$.complete();
-        this.destroy();
-    }
-    destroy() {
-        if (this.editor) {
-            this.editor.destroy();
-        }
-        this.initialized = false;
-        this._cdRef.markForCheck();
-    }
-    _processImageUpload(blob) {
-        const processor = new FileProcessor();
-        const file = new FsFile(blob);
-        const config = {
-            orientate: true,
-            quality: this.config.image.quality,
-            format: this.config.image.format,
-            maxWidth: this.config.image.width,
-            maxHeight: this.config.image.height,
-            minWidth: this.config.image.minWidth,
-            minHeight: this.config.image.minHeight,
-        };
-        return processor.processFile(file, config)
-            .pipe(switchMap((fsFile) => {
-            return this.config.image.upload(fsFile.file);
-        }));
-    }
-    _createConfig() {
-        return merge({ froalaConfig: {} }, this._defaultConfig, this.config);
-    }
-    _change(html) {
-        this._html = html;
-        this.onChange(html);
-    }
-    _initButtons(config) {
-        (config.buttons || [])
-            .forEach((button) => {
-            /*
-              Svg Keys:
-              ["add", "advancedImageEditor", "alignCenter", "alignJustify", "alignLeft", "alignRight",
-              "anchors", "back", "backgroundColor", "blockquote", "bold", "cellBackground",
-              "cellBorderColor", "cellOptions", "cellStyle", "clearFormatting", "close", "codeView",
-              "cogs", "columns", "editLink", "exitFullscreen", "fontAwesome", "fontFamily",
-              "fontSize", "fullscreen", "help", "horizontalLine", "imageAltText", "imageCaption",
-              "imageClass", "imageDisplay", "imageManager", "imageSize", "indent", "inlineClass",
-              "inlineStyle", "insertEmbed", "insertFile", "insertImage", "insertLink", "insertMore",
-              "insertTable", "insertVideo", "upload", "italic", "search", "lineHeight", "linkStyles",
-              "mention", "more", "openLink", "orderedList", "outdent", "pageBreaker",
-              "paragraphFormat", "paragraphMore", "paragraphStyle", "pdfExport", "print",
-              "redo", "removeTable", "remove", "replaceImage", "row", "selectAll", "smile",
-              "spellcheck", "star", "strikeThrough", "subscript", "superscript", "symbols", "tags",
-              "tableHeader", "tableStyle", "textColor", "textMore", "underline", "undo", "unlink",
-              "unorderedList", "verticalAlignBottom", "verticalAlignMiddle", "verticalAlignTop"]
-            */
-            if (button.svgKey) {
-                this._fr.FroalaEditor.DefineIcon(button.name, { SVG_KEY: button.svgKey });
-            }
-            this._fr.FroalaEditor.RegisterCommand(button.name, {
-                title: button.title,
-                focus: button.focus ?? true,
-                undo: button.undo ?? true,
-                refreshAfterCallback: button.refreshAfterCallback ?? true,
-                callback() {
-                    button.click(this);
-                },
-            });
-        });
-    }
-    _initPlugins(config) {
-        (config.prependToolbarTextButtons || [])
-            .forEach((button) => {
-            this._defineButton(button);
-        });
-        (config.plugins || []).forEach((plugin) => {
-            this._fr.FroalaEditor.PLUGINS[plugin.config.name] = function (editor) {
-                plugin.editor = editor;
-                plugin.initialize();
-                return plugin;
-            };
-            (plugin.config.buttons || [])
-                .forEach((button) => {
-                this._defineButton(button);
-            });
-        });
-    }
-    _defineButton(button) {
-        if (button.html) {
-            this._fr.FroalaEditor
-                .DefineIconTemplate(`${button.name}-template`, button.html);
-            this._fr.FroalaEditor
-                .DefineIcon(button.name, {
-                NAME: `${button.name}-icon`,
-                template: `${button.name}-template`,
-            });
-        }
-        else {
-            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() {
-                if (button.click) {
-                    button.click(this);
-                }
-            },
-            refresh(event) {
-                if (event.refresh) {
-                    event.refresh(this, event);
-                }
-            },
-        });
-    }
-    _createOptions() {
-        const config = this._createConfig();
-        const textButtons = [
-            ...(config.prependToolbarTextButtons || [])
-                .map((item) => item.name),
-            ...TextButtons,
-        ];
-        return merge(
-        // For some reason editor store somewhere pointer on default config object and dublicate options each time on init
-        // Extra merge level fixed this problem and allow to init config properly without legacy data
-        {}, {
-            shortcutsEnabled: ['show', 'bold', 'italic', 'underline', 'indent', 'outdent', 'undo', 'redo', 'insertImage', 'createLink'],
-            key: config.activationKey,
-            placeholderText: config.placeholder,
-            linkAlwaysBlank: true,
-            tabSpaces: 2,
-            typingTimer: 250,
-            tooltips: false,
-            wordPasteModal: false,
-            imageDefaultWidth: 0,
-            paragraphStyles: {
-                class1: 'Class 1',
-                class2: 'Class 2',
-            },
-            imageDefaultAlign: 'left',
-            fontFamilyDefaultSelection: 'Font Family',
-            quickInsertEnabled: false,
-            scrollableContainer: `#${this.containerID}`,
-            paragraphDefaultSelection: 'Format',
-            videoUpload: false,
-            imagePaste: !!config.image?.upload,
-            imageUpload: !!config.image?.upload,
-            paragraphFormat: {
-                N: 'Normal',
-                H1: 'Heading 1',
-                H2: 'Heading 2',
-                H3: 'Heading 3',
-                H4: 'Heading 4',
-                BLOCKQUOTE: 'Quote',
-            },
-            lineHeights: {
-                Default: '',
-                0.5: '0.5',
-                Single: '1',
-                1.15: '1.15',
-                1.5: '1.5',
-                Double: '2',
-            },
-            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);
-    }
-    _listenLazyInit() {
-        this.froalaLoaded$
-            .pipe(filter((ready) => ready), switchMap(() => this._initialize$), tap(() => {
-            const selection = window.getSelection();
-            const options = {};
-            if (selection.baseNode) {
-                options.selection = {
-                    node: selection.baseNode.nodeValue,
-                    offset: selection.baseOffset,
-                };
-            }
-            this.initialize(options);
-        }), switchMap(() => this._froalaReady$), filter((data) => !!data), tap(({ config, options }) => {
-            this._setupFroala(config, options);
-        }))
-            .subscribe();
-    }
-    _contentChanged() {
-        const editorHTML = this._editor.html.get();
-        if (this.html !== editorHTML) {
-            this._change(editorHTML);
-        }
-    }
-    _setupFroala(config, options) {
-        this._cdRef.markForCheck();
-        this.setHtml(this._html);
-        if (config.disabled) {
-            this.disable();
-        }
-        if (config.froalaConfig.events) {
-            if (config.froalaConfig.events.initialized) {
-                config.froalaConfig.events.initialized();
-            }
-        }
-        this._editor.events.on('focus', () => {
-            this.classFocused = true;
-            this._cdRef.markForCheck();
-        });
-        this._editor.events.on('blur', () => {
-            this.classFocused = false;
-            this._cdRef.markForCheck();
-        });
-        this._editor.events.on('click', () => {
-            if (this.config.initOnClick && !this.initialized) {
-                this.initialized = true;
-                this._cdRef.markForCheck();
-            }
-        });
-        fromEventPattern((handler) => {
-            this._editor.events.on('contentChanged', handler);
-        }, () => {
-            //
-        })
-            .pipe(startWith(this._html), map(() => this.editor.html.get()), distinctUntilChanged(), skip(1))
-            .subscribe(() => {
-            this._contentChanged();
-        });
-        this._editor.events.on('paste.afterCleanup', (html) => {
-            const div = document.createElement('div');
-            div.innerHTML = html;
-            div.querySelectorAll('*')
-                .forEach((el) => {
-                for (let i = 0; i < el.attributes.length; i++) {
-                    const name = el.attributes[0].name;
-                    if (name !== 'href') {
-                        el.removeAttribute(name);
-                    }
-                }
-            });
-            return div.innerHTML;
-        });
-        this._editor.events.on('keydown', () => {
-            this.onTouched();
-        });
-        if (this.config.image && this.config.image.upload) {
-            this._editor.events.on('image.beforePasteUpload', (image) => {
-                fetch(image.getAttribute('src'))
-                    .then((res) => {
-                    res.blob()
-                        .then((blob) => {
-                        this._processImageUpload(blob)
-                            .pipe(takeUntil(this._destroy$))
-                            .subscribe((url) => {
-                            image.setAttribute('src', url);
-                            image.removeAttribute('data-fr-image-pasted');
-                            this._contentChanged();
-                        });
-                    });
-                });
-                return false;
-            });
-            this._editor.events.on('image.beforeUpload', (blobs) => {
-                this._processImageUpload(blobs[0])
-                    .pipe(takeUntil(this._destroy$))
-                    .subscribe((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();
-        }
-        if (this.config.autofocus && !this.config.initOnClick) {
-            this.focus();
-        }
-    }
-}
-FsHtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorComponent, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i0.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-FsHtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled", "class.initialized": "this.initialized" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FsHtmlEditorComponent),
-            multi: true,
-        },
-        {
-            provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => FsHtmlEditorComponent),
-            multi: true,
-        },
-    ], queries: [{ propertyName: "htmlEditorContainer", first: true, predicate: FsHtmlEditorContainerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}: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-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .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.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .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}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::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 #0003,0 4px 5px #00000024,0 1px 10px #0000001f;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}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i4.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
-        {
-            provide: ControlContainer,
-            deps: [[Optional, NgForm]],
-            useFactory: (ngForm) => ngForm,
-        },
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-html-editor', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FsHtmlEditorComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => FsHtmlEditorComponent),
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
-                        {
-                            provide: ControlContainer,
-                            deps: [[Optional, NgForm]],
-                            useFactory: (ngForm) => ngForm,
-                        },
-                    ], template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}: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-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .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.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .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}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::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 #0003,0 4px 5px #00000024,0 1px 10px #0000001f;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}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FS_HTML_EDITOR_CONFIG]
-                }] }, { type: i0.ChangeDetectorRef }, { type: FsFroalaLoaderService }]; }, propDecorators: { htmlEditorContainer: [{
-                type: ContentChild,
-                args: [FsHtmlEditorContainerDirective, { read: TemplateRef }]
-            }], classFocused: [{
-                type: HostBinding,
-                args: ['class.focused']
-            }], elRef: [{
-                type: ViewChild,
-                args: ['elRef']
-            }], config: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.disabled']
-            }], initialized: [{
-                type: HostBinding,
-                args: ['class.initialized']
+class FsHtmlEditorComponent {
+    _defaultConfig;
+    _cdRef;
+    _fr;
+    htmlEditorContainer;
+    classFocused = false;
+    elRef;
+    config = {};
+    disabled = false;
+    initialized = false;
+    containerID = `fs-html-editor-${guid('xxx')}`;
+    onTouched;
+    onChange;
+    _editor;
+    _html;
+    _initialize$ = new ReplaySubject();
+    _froalaReady$ = new BehaviorSubject(null);
+    _destroy$ = new Subject();
+    constructor(_defaultConfig, _cdRef, _fr) {
+        this._defaultConfig = _defaultConfig;
+        this._cdRef = _cdRef;
+        this._fr = _fr;
+    }
+    get el() {
+        return this.elRef.nativeElement;
+    }
+    get html() {
+        return this._html;
+    }
+    get editor() {
+        return this._editor;
+    }
+    get froalaLoaded$() {
+        return this._fr.loaded$;
+    }
+    ngOnInit() {
+        this.config = this.config || {};
+        this.config.autofocus = this.config.autofocus && (!this.config.disabled || !this.disabled);
+        this.initialized = !this.config.initOnClick;
+    }
+    ngAfterViewInit() {
+        this._listenLazyInit();
+        this._initialize$.next();
+    }
+    hasContent() {
+        const el = document.createElement('div');
+        if (el.querySelector('img')) {
+            return true;
+        }
+        el.innerHTML = this._html;
+        return !!el.innerText.length;
+    }
+    uninitialize() {
+        this.initialized = false;
+    }
+    initialize(options = {}) {
+        const config = this._createConfig();
+        this._initPlugins(config);
+        this._initButtons(config);
+        this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), () => {
+            this._froalaReady$.next({ config, options });
+        });
+    }
+    updateSize() {
+        // Hack: To trigger the toolbar button size modes
+        window.dispatchEvent(new Event('resize'));
+    }
+    validate(control) {
+        const err = {};
+        if (this.config.maxLength && this._html) {
+            const maxLength = this.config.maxLength;
+            const length = this._html.length;
+            if (length > maxLength) {
+                err.maxLengthError = `Must be ${maxLength} characters or fewer. You entered ${length} characters.`;
+            }
+        }
+        return Object.keys(err).length ? err : null;
+    }
+    focus(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();
+        const elSelection = this.editor.selection.element();
+        if (elSelection) {
+            elSelection.scrollIntoView({ block: 'center' });
+        }
+    }
+    clear() {
+        this.writeValue('');
+    }
+    disable() {
+        this.disabled = true;
+    }
+    setHtml(html) {
+        this.writeValue(html);
+    }
+    writeValue(html) {
+        this._html = html || '';
+        if (Array.isArray(this._html)) {
+            this._html = this._html.pop();
+        }
+        this._html = this._html
+            .replace(/<(li)>\s?<(div)>/g, '<li>')
+            .replace(/<\/(div)><\/(li)>/g, '</li>');
+        if (this.editor && this.editor.html) {
+            try {
+                this.editor.html.set(this._html);
+            }
+            catch (e) {
+                //
+            }
+        }
+        this._cdRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    ngOnDestroy() {
+        this._initialize$.complete();
+        this._destroy$.next();
+        this._destroy$.complete();
+        this.destroy();
+    }
+    destroy() {
+        if (this.editor) {
+            this.editor.destroy();
+        }
+        this.initialized = false;
+        this._cdRef.markForCheck();
+    }
+    _processImageUpload(blob) {
+        const processor = new FileProcessor();
+        const file = new FsFile(blob);
+        const config = {
+            orientate: true,
+            quality: this.config.image.quality,
+            format: this.config.image.format,
+            maxWidth: this.config.image.width,
+            maxHeight: this.config.image.height,
+            minWidth: this.config.image.minWidth,
+            minHeight: this.config.image.minHeight,
+        };
+        return processor.processFile(file, config)
+            .pipe(switchMap((fsFile) => {
+            return this.config.image.upload(fsFile.file);
+        }));
+    }
+    _createConfig() {
+        return merge({ froalaConfig: {} }, this._defaultConfig, this.config);
+    }
+    _change(html) {
+        this._html = html;
+        this.onChange(html);
+    }
+    _initButtons(config) {
+        (config.buttons || [])
+            .forEach((button) => {
+            /*
+              Svg Keys:
+              ["add", "advancedImageEditor", "alignCenter", "alignJustify", "alignLeft", "alignRight",
+              "anchors", "back", "backgroundColor", "blockquote", "bold", "cellBackground",
+              "cellBorderColor", "cellOptions", "cellStyle", "clearFormatting", "close", "codeView",
+              "cogs", "columns", "editLink", "exitFullscreen", "fontAwesome", "fontFamily",
+              "fontSize", "fullscreen", "help", "horizontalLine", "imageAltText", "imageCaption",
+              "imageClass", "imageDisplay", "imageManager", "imageSize", "indent", "inlineClass",
+              "inlineStyle", "insertEmbed", "insertFile", "insertImage", "insertLink", "insertMore",
+              "insertTable", "insertVideo", "upload", "italic", "search", "lineHeight", "linkStyles",
+              "mention", "more", "openLink", "orderedList", "outdent", "pageBreaker",
+              "paragraphFormat", "paragraphMore", "paragraphStyle", "pdfExport", "print",
+              "redo", "removeTable", "remove", "replaceImage", "row", "selectAll", "smile",
+              "spellcheck", "star", "strikeThrough", "subscript", "superscript", "symbols", "tags",
+              "tableHeader", "tableStyle", "textColor", "textMore", "underline", "undo", "unlink",
+              "unorderedList", "verticalAlignBottom", "verticalAlignMiddle", "verticalAlignTop"]
+            */
+            if (button.svgKey) {
+                this._fr.FroalaEditor.DefineIcon(button.name, { SVG_KEY: button.svgKey });
+            }
+            this._fr.FroalaEditor.RegisterCommand(button.name, {
+                title: button.title,
+                focus: button.focus ?? true,
+                undo: button.undo ?? true,
+                refreshAfterCallback: button.refreshAfterCallback ?? true,
+                callback() {
+                    button.click(this);
+                },
+            });
+        });
+    }
+    _initPlugins(config) {
+        (config.prependToolbarTextButtons || [])
+            .forEach((button) => {
+            this._defineButton(button);
+        });
+        (config.plugins || []).forEach((plugin) => {
+            this._fr.FroalaEditor.PLUGINS[plugin.config.name] = function (editor) {
+                plugin.editor = editor;
+                plugin.initialize();
+                return plugin;
+            };
+            (plugin.config.buttons || [])
+                .forEach((button) => {
+                this._defineButton(button);
+            });
+        });
+    }
+    _defineButton(button) {
+        if (button.html) {
+            this._fr.FroalaEditor
+                .DefineIconTemplate(`${button.name}-template`, button.html);
+            this._fr.FroalaEditor
+                .DefineIcon(button.name, {
+                NAME: `${button.name}-icon`,
+                template: `${button.name}-template`,
+            });
+        }
+        else {
+            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() {
+                if (button.click) {
+                    button.click(this);
+                }
+            },
+            refresh(event) {
+                if (event.refresh) {
+                    event.refresh(this, event);
+                }
+            },
+        });
+    }
+    _createOptions() {
+        const config = this._createConfig();
+        const textButtons = [
+            ...(config.prependToolbarTextButtons || [])
+                .map((item) => item.name),
+            ...TextButtons,
+        ];
+        return merge(
+        // For some reason editor store somewhere pointer on default config object and dublicate options each time on init
+        // Extra merge level fixed this problem and allow to init config properly without legacy data
+        {}, {
+            shortcutsEnabled: ['show', 'bold', 'italic', 'underline', 'indent', 'outdent', 'undo', 'redo', 'insertImage', 'createLink'],
+            key: config.activationKey,
+            placeholderText: config.placeholder,
+            linkAlwaysBlank: true,
+            tabSpaces: 2,
+            typingTimer: 250,
+            tooltips: false,
+            wordPasteModal: false,
+            imageDefaultWidth: 0,
+            paragraphStyles: {
+                class1: 'Class 1',
+                class2: 'Class 2',
+            },
+            imageDefaultAlign: 'left',
+            fontFamilyDefaultSelection: 'Font Family',
+            quickInsertEnabled: false,
+            scrollableContainer: `#${this.containerID}`,
+            paragraphDefaultSelection: 'Format',
+            videoUpload: false,
+            imagePaste: !!config.image?.upload,
+            imageUpload: !!config.image?.upload,
+            paragraphFormat: {
+                N: 'Normal',
+                H1: 'Heading 1',
+                H2: 'Heading 2',
+                H3: 'Heading 3',
+                H4: 'Heading 4',
+                BLOCKQUOTE: 'Quote',
+            },
+            lineHeights: {
+                Default: '',
+                0.5: '0.5',
+                Single: '1',
+                1.15: '1.15',
+                1.5: '1.5',
+                Double: '2',
+            },
+            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);
+    }
+    _listenLazyInit() {
+        this.froalaLoaded$
+            .pipe(filter((ready) => ready), switchMap(() => this._initialize$), tap(() => {
+            const selection = window.getSelection();
+            const options = {};
+            if (selection.baseNode) {
+                options.selection = {
+                    node: selection.baseNode.nodeValue,
+                    offset: selection.baseOffset,
+                };
+            }
+            this.initialize(options);
+        }), switchMap(() => this._froalaReady$), filter((data) => !!data), tap(({ config, options }) => {
+            this._setupFroala(config, options);
+        }))
+            .subscribe();
+    }
+    _contentChanged() {
+        const editorHTML = this._editor.html.get();
+        if (this.html !== editorHTML) {
+            this._change(editorHTML);
+        }
+    }
+    _setupFroala(config, options) {
+        this._cdRef.markForCheck();
+        this.setHtml(this._html);
+        if (config.disabled) {
+            this.disable();
+        }
+        if (config.froalaConfig.events) {
+            if (config.froalaConfig.events.initialized) {
+                config.froalaConfig.events.initialized();
+            }
+        }
+        this._editor.events.on('focus', () => {
+            this.classFocused = true;
+            this._cdRef.markForCheck();
+        });
+        this._editor.events.on('blur', () => {
+            this.classFocused = false;
+            this._cdRef.markForCheck();
+        });
+        this._editor.events.on('click', () => {
+            if (this.config.initOnClick && !this.initialized) {
+                this.initialized = true;
+                this._cdRef.markForCheck();
+            }
+        });
+        fromEventPattern((handler) => {
+            this._editor.events.on('contentChanged', handler);
+        }, () => {
+            //
+        })
+            .pipe(startWith(this._html), map(() => this.editor.html.get()), distinctUntilChanged(), skip(1))
+            .subscribe(() => {
+            this._contentChanged();
+        });
+        this._editor.events.on('paste.afterCleanup', (html) => {
+            const div = document.createElement('div');
+            div.innerHTML = html;
+            div.querySelectorAll('*')
+                .forEach((el) => {
+                for (let i = 0; i < el.attributes.length; i++) {
+                    const name = el.attributes[0].name;
+                    if (name !== 'href') {
+                        el.removeAttribute(name);
+                    }
+                }
+            });
+            return div.innerHTML;
+        });
+        this._editor.events.on('keydown', () => {
+            this.onTouched();
+        });
+        if (this.config.image && this.config.image.upload) {
+            this._editor.events.on('image.beforePasteUpload', (image) => {
+                fetch(image.getAttribute('src'))
+                    .then((res) => {
+                    res.blob()
+                        .then((blob) => {
+                        this._processImageUpload(blob)
+                            .pipe(takeUntil(this._destroy$))
+                            .subscribe((url) => {
+                            image.setAttribute('src', url);
+                            image.removeAttribute('data-fr-image-pasted');
+                            this._contentChanged();
+                        });
+                    });
+                });
+                return false;
+            });
+            this._editor.events.on('image.beforeUpload', (blobs) => {
+                this._processImageUpload(blobs[0])
+                    .pipe(takeUntil(this._destroy$))
+                    .subscribe((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();
+        }
+        if (this.config.autofocus && !this.config.initOnClick) {
+            this.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorComponent, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i0.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled", "class.initialized": "this.initialized" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FsHtmlEditorComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => FsHtmlEditorComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "htmlEditorContainer", first: true, predicate: FsHtmlEditorContainerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}: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-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .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.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .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}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::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 #0003,0 4px 5px #00000024,0 1px 10px #0000001f;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}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i4.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
+            {
+                provide: ControlContainer,
+                deps: [[Optional, NgForm]],
+                useFactory: (ngForm) => ngForm,
+            },
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-html-editor', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FsHtmlEditorComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => FsHtmlEditorComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            deps: [[Optional, NgForm]],
+                            useFactory: (ngForm) => ngForm,
+                        },
+                    ], template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}: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-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .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.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .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}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::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 #0003,0 4px 5px #00000024,0 1px 10px #0000001f;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FS_HTML_EDITOR_CONFIG]
+                }] }, { type: i0.ChangeDetectorRef }, { type: FsFroalaLoaderService }]; }, propDecorators: { htmlEditorContainer: [{
+                type: ContentChild,
+                args: [FsHtmlEditorContainerDirective, { read: TemplateRef }]
+            }], classFocused: [{
+                type: HostBinding,
+                args: ['class.focused']
+            }], elRef: [{
+                type: ViewChild,
+                args: ['elRef']
+            }], config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.disabled']
+            }], initialized: [{
+                type: HostBinding,
+                args: ['class.initialized']
             }] } });
 
-class FsHtmlEditorModule {
-    static forRoot(config = {}) {
-        return {
-            ngModule: FsHtmlEditorModule,
-            providers: [
-                { provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
-                {
-                    provide: FS_HTML_EDITOR_CONFIG,
-                    useFactory: FsHtmlEditorConfigFactory,
-                    deps: [FS_HTML_EDITOR_DEFAULT_CONFIG],
-                },
-            ],
-        };
-    }
-}
-FsHtmlEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsHtmlEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent,
-        FsHtmlEditorContainerDirective], imports: [CommonModule,
-        FsSkeletonModule,
-        FsLabelModule,
-        FsHtmlRendererModule], exports: [FsHtmlEditorComponent,
-        FsHtmlEditorContainerDirective] });
-FsHtmlEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
-        FsSkeletonModule,
-        FsLabelModule,
-        FsHtmlRendererModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FsSkeletonModule,
-                        FsLabelModule,
-                        FsHtmlRendererModule,
-                    ],
-                    exports: [
-                        FsHtmlEditorComponent,
-                        FsHtmlEditorContainerDirective,
-                    ],
-                    declarations: [
-                        FsHtmlEditorComponent,
-                        FsHtmlEditorContainerDirective,
-                    ],
-                }]
-        }] });
-function FsHtmlEditorConfigFactory(config) {
-    return {
-        froalaPlugins: [
-            "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 */,
-            "line_height" /* LineHeight */,
-        ],
-        ...config,
-    };
+class FsHtmlEditorModule {
+    static forRoot(config = {}) {
+        return {
+            ngModule: FsHtmlEditorModule,
+            providers: [
+                { provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
+                {
+                    provide: FS_HTML_EDITOR_CONFIG,
+                    useFactory: FsHtmlEditorConfigFactory,
+                    deps: [FS_HTML_EDITOR_DEFAULT_CONFIG],
+                },
+            ],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent,
+            FsHtmlEditorContainerDirective], imports: [CommonModule,
+            FsSkeletonModule,
+            FsLabelModule,
+            FsHtmlRendererModule], exports: [FsHtmlEditorComponent,
+            FsHtmlEditorContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
+            FsSkeletonModule,
+            FsLabelModule,
+            FsHtmlRendererModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FsSkeletonModule,
+                        FsLabelModule,
+                        FsHtmlRendererModule,
+                    ],
+                    exports: [
+                        FsHtmlEditorComponent,
+                        FsHtmlEditorContainerDirective,
+                    ],
+                    declarations: [
+                        FsHtmlEditorComponent,
+                        FsHtmlEditorContainerDirective,
+                    ],
+                }]
+        }] });
+function FsHtmlEditorConfigFactory(config) {
+    return {
+        froalaPlugins: [
+            "align" /* FroalaPlugin.Align */,
+            "colors" /* FroalaPlugin.Colors */,
+            "image" /* FroalaPlugin.Image */,
+            "link" /* FroalaPlugin.Link */,
+            "lists" /* FroalaPlugin.Lists */,
+            "paragraph_format" /* FroalaPlugin.ParagraphFormat */,
+            "quote" /* FroalaPlugin.Quote */,
+            "table" /* FroalaPlugin.Table */,
+            "url" /* FroalaPlugin.Url */,
+            "video" /* FroalaPlugin.Video */,
+            "draggable" /* FroalaPlugin.Draggable */,
+            "font_size" /* FroalaPlugin.FontSize */,
+            "line_height" /* FroalaPlugin.LineHeight */,
+        ],
+        ...config,
+    };
 }
 
-class Plugin {
-    initialize() { }
-    destroy() { }
+class Plugin {
+    config;
+    editor;
+    initialize() { }
+    destroy() { }
 }
 
-class ChecklistPlugin extends Plugin {
-    constructor(config = { name: 'checklist' }) {
-        super();
-        this.config = config;
-        this.config = {
-            ...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: (editor) => {
-                        editor.html.insert('<ul class="checklist"><li></li></ul>');
-                    }
-                }
-            ]
-        };
-    }
-    initialize() {
-        this.editor.events.on('click', (e) => {
-            const li = e.target;
-            if (li.nodeName === 'LI' && e.offsetX < 0) {
-                const items = [li, ...li.querySelectorAll('li')];
-                if (li.classList.contains('checked')) {
-                    items.forEach((item) => {
-                        item.classList.remove('checked');
-                    });
-                }
-                else {
-                    items.forEach((item) => {
-                        item.classList.add('checked');
-                    });
-                }
-            }
-        }, false);
-    }
+class ChecklistPlugin extends Plugin {
+    config;
+    constructor(config = { name: 'checklist' }) {
+        super();
+        this.config = config;
+        this.config = {
+            ...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: (editor) => {
+                        editor.html.insert('<ul class="checklist"><li></li></ul>');
+                    }
+                }
+            ]
+        };
+    }
+    initialize() {
+        this.editor.events.on('click', (e) => {
+            const li = e.target;
+            if (li.nodeName === 'LI' && e.offsetX < 0) {
+                const items = [li, ...li.querySelectorAll('li')];
+                if (li.classList.contains('checked')) {
+                    items.forEach((item) => {
+                        item.classList.remove('checked');
+                    });
+                }
+                else {
+                    items.forEach((item) => {
+                        item.classList.add('checked');
+                    });
+                }
+            }
+        }, false);
+    }
 }
 
-class CodePlugin extends Plugin {
-    constructor(config = { name: 'code' }) {
-        super();
-        this.config = config;
-        this.config = {
-            ...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: (editor) => {
-                        const node = editor.selection.get();
-                        const 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>');
-                        }
-                    }
-                }
-            ]
-        };
-    }
-    initialize() {
-        this.editor.events.on('keydown', (e) => {
-            if (e.keyCode === 13) {
-                const selection = this.editor.selection.get();
-                if (selection && this._getCodeEl(selection.baseNode)) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.stopImmediatePropagation();
-                    let br = '<br>';
-                    const base = selection.baseNode;
-                    if (base.nodeName === '#text' && selection.baseOffset === base.length) {
-                        if (!(base.nextSibling && base.nextSibling.nodeName === 'BR')) {
-                            br += '<br>';
-                        }
-                    }
-                    else {
-                        const 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);
-    }
-    destroy() { }
-    _getCodeEl(el) {
-        if (el) {
-            if (el.classList && el.classList.contains('code')) {
-                return el;
-            }
-            if (el.parentElement) {
-                return this._getCodeEl(el.parentElement);
-            }
-        }
-        return null;
-    }
+class CodePlugin extends Plugin {
+    config;
+    constructor(config = { name: 'code' }) {
+        super();
+        this.config = config;
+        this.config = {
+            ...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: (editor) => {
+                        const node = editor.selection.get();
+                        const 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>');
+                        }
+                    }
+                }
+            ]
+        };
+    }
+    initialize() {
+        this.editor.events.on('keydown', (e) => {
+            if (e.keyCode === 13) {
+                const selection = this.editor.selection.get();
+                if (selection && this._getCodeEl(selection.baseNode)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    let br = '<br>';
+                    const base = selection.baseNode;
+                    if (base.nodeName === '#text' && selection.baseOffset === base.length) {
+                        if (!(base.nextSibling && base.nextSibling.nodeName === 'BR')) {
+                            br += '<br>';
+                        }
+                    }
+                    else {
+                        const 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);
+    }
+    destroy() { }
+    _getCodeEl(el) {
+        if (el) {
+            if (el.classList && el.classList.contains('code')) {
+                return el;
+            }
+            if (el.parentElement) {
+                return this._getCodeEl(el.parentElement);
+            }
+        }
+        return null;
+    }
 }
 
-class MentionPlugin extends Plugin {
-    constructor(config) {
-        super();
-        this.config = config;
-        this._guid = guid();
-        this.selected = (event) => {
-            if (this.config.selected) {
-                if (MentionPlugin._currentGuid === this._guid) {
-                    this.config.selected(event.detail.item.original);
-                }
-            }
-        };
-        this.config = {
-            ...config,
-            buttons: [
-                {
-                    name: config.name,
-                    tooltip: config.tooltip,
-                    svgPath: config.iconPath,
-                    click: (editor) => {
-                        this._closeAll();
-                        this._tribute.showMenuForCollection(editor.el);
-                    }
-                }
-            ]
-        };
-        this._tribute = new Tribute({
-            values: debounce(this._loadValues.bind(this), 200),
-            searchOpts: {
-                pre: '',
-                post: '',
-                skip: true
-            },
-            containerClass: `fs-html-editor-mention-container ${this.config.containerClass || ''}`,
-            itemClass: `fs-html-editor-mention-menu-item ${this.config.menuItemClass || ''}`,
-            trigger: this.config.trigger,
-            allowSpaces: true,
-            menuItemTemplate: (item) => {
-                return this.config.menuItemTemplate(item.original);
-            },
-            selectTemplate: (item) => {
-                const template = this.config.selectedTemplate(item.original);
-                let p = document.createElement('p');
-                p.innerHTML = template;
-                let 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);
-    }
-    initialize() {
-        this._tribute.attach(this.editor.el);
-        this.editor.events.on('keydown', (e) => {
-            if (e.key === 'Enter' && this._tribute.isActive) {
-                return false;
-            }
-        }, true);
-        this.editor.el.addEventListener("tribute-replaced", this.selected);
-    }
-    destroy() {
-        this.editor.el.removeEventListener("tribute-replaced", this.selected);
-    }
-    _closeAll() {
-        MentionPlugin._tributes.forEach((tribute) => {
-            if (tribute.menu) {
-                tribute.hideMenu();
-            }
-        });
-    }
-    _loadValues(keyword, cb) {
-        MentionPlugin._currentGuid = this._guid;
-        return this.config.fetch(keyword)
-            .subscribe((data) => {
-            cb(data);
-        });
-    }
-}
-MentionPlugin._currentGuid = null;
-MentionPlugin._tributes = [];
+class MentionPlugin extends Plugin {
+    config;
+    static _currentGuid = null;
+    static _tributes = [];
+    _tribute;
+    _guid = guid();
+    constructor(config) {
+        super();
+        this.config = config;
+        this.config = {
+            ...config,
+            buttons: [
+                {
+                    name: config.name,
+                    tooltip: config.tooltip,
+                    svgPath: config.iconPath,
+                    click: (editor) => {
+                        this._closeAll();
+                        this._tribute.showMenuForCollection(editor.el);
+                    }
+                }
+            ]
+        };
+        this._tribute = new Tribute({
+            values: debounce(this._loadValues.bind(this), 200),
+            searchOpts: {
+                pre: '',
+                post: '',
+                skip: true
+            },
+            containerClass: `fs-html-editor-mention-container ${this.config.containerClass || ''}`,
+            itemClass: `fs-html-editor-mention-menu-item ${this.config.menuItemClass || ''}`,
+            trigger: this.config.trigger,
+            allowSpaces: true,
+            menuItemTemplate: (item) => {
+                return this.config.menuItemTemplate(item.original);
+            },
+            selectTemplate: (item) => {
+                const template = this.config.selectedTemplate(item.original);
+                let p = document.createElement('p');
+                p.innerHTML = template;
+                let 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);
+    }
+    initialize() {
+        this._tribute.attach(this.editor.el);
+        this.editor.events.on('keydown', (e) => {
+            if (e.key === 'Enter' && this._tribute.isActive) {
+                return false;
+            }
+        }, true);
+        this.editor.el.addEventListener("tribute-replaced", this.selected);
+    }
+    selected = (event) => {
+        if (this.config.selected) {
+            if (MentionPlugin._currentGuid === this._guid) {
+                this.config.selected(event.detail.item.original);
+            }
+        }
+    };
+    destroy() {
+        this.editor.el.removeEventListener("tribute-replaced", this.selected);
+    }
+    _closeAll() {
+        MentionPlugin._tributes.forEach((tribute) => {
+            if (tribute.menu) {
+                tribute.hideMenu();
+            }
+        });
+    }
+    _loadValues(keyword, cb) {
+        MentionPlugin._currentGuid = this._guid;
+        return this.config.fetch(keyword)
+            .subscribe((data) => {
+            cb(data);
+        });
+    }
+}
 
-class RealtimePlugin extends Plugin {
-    constructor(config = { name: 'realtime' }) {
-        super();
-        this.config = config;
-        this.config = {
-            ...config,
-            name: 'realtime',
-        };
-    }
-    initialize() {
-        this.editor.events.on('click', (e) => {
-        }, false);
-    }
+class RealtimePlugin extends Plugin {
+    config;
+    constructor(config = { name: 'realtime' }) {
+        super();
+        this.config = config;
+        this.config = {
+            ...config,
+            name: 'realtime',
+        };
+    }
+    initialize() {
+        this.editor.events.on('click', (e) => {
+        }, false);
+    }
 }
 
-class ScreenRecordPlugin extends Plugin {
-    constructor(config = {}) {
-        super();
-        this.config = config;
-        this.config = {
-            ...config,
-            name: config.name || 'screenRecord',
-            buttons: [
-                {
-                    name: 'screenRecord',
+class ScreenRecordPlugin extends Plugin {
+    config;
+    _activeEl;
+    constructor(config = {}) {
+        super();
+        this.config = config;
+        this.config = {
+            ...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
 	c-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
-  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: (editor) => {
-                        navigator.mediaDevices.getDisplayMedia({ video: true })
-                            .then((stream) => {
-                            const chunks = [];
-                            const options = { mimeType: 'video/webm; codecs=vp9' };
-                            let mediaRecorder = new MediaRecorder(stream, options);
-                            stream.addEventListener('inactive', (e) => {
-                                mediaRecorder.stop();
-                                mediaRecorder = null;
-                                stream.getTracks().forEach((track) => track.stop());
-                                stream = null;
-                                const blob = new Blob(chunks, { type: 'video/webm' });
-                                config.upload(blob)
-                                    .subscribe((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', (event) => {
-                                if (event.data && event.data.size > 0) {
-                                    chunks.push(event.data);
-                                }
-                            });
-                            mediaRecorder.start(10);
-                        })
-                            .catch((e) => { });
-                    }
-                }
-            ]
-        };
-    }
-    async initialize() {
-        const FroalaEditor = window.FroalaEditor;
-        this.editor.events.on('mouseup', (e) => {
-            const 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: () => {
-                if (this._activeEl) {
-                    this._activeEl.remove();
-                }
-            }
-        });
-    }
-    _createPopup() {
-        const template = {
-            buttons: `<div class="fr-buttons">${this.editor.button.buildList(['popupClose'])}</div>`,
-        };
-        return this.editor.popups.create('screenRecordPlugin.popup', template);
-    }
-    _showPopup(el) {
-        var $popup = this.editor.popups.get('screenRecordPlugin.popup');
-        if (!$popup) {
-            $popup = this._createPopup();
-        }
-        this.editor.popups.setContainer('screenRecordPlugin.popup', this.editor.$(el));
-        const left = el.offsetLeft + el.offsetWidth / 2;
-        this.editor.popups.show('screenRecordPlugin.popup', left, null);
-    }
-    _getEl(el) {
-        if (el && el.classList) {
-            if (el.classList.contains('fr-screen-record'))
-                return el;
-            return this._getEl(el.parentNode);
-        }
-    }
+  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: (editor) => {
+                        navigator.mediaDevices.getDisplayMedia({ video: true })
+                            .then((stream) => {
+                            const chunks = [];
+                            const options = { mimeType: 'video/webm; codecs=vp9' };
+                            let mediaRecorder = new MediaRecorder(stream, options);
+                            stream.addEventListener('inactive', (e) => {
+                                mediaRecorder.stop();
+                                mediaRecorder = null;
+                                stream.getTracks().forEach((track) => track.stop());
+                                stream = null;
+                                const blob = new Blob(chunks, { type: 'video/webm' });
+                                config.upload(blob)
+                                    .subscribe((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', (event) => {
+                                if (event.data && event.data.size > 0) {
+                                    chunks.push(event.data);
+                                }
+                            });
+                            mediaRecorder.start(10);
+                        })
+                            .catch((e) => { });
+                    }
+                }
+            ]
+        };
+    }
+    async initialize() {
+        const FroalaEditor = window.FroalaEditor;
+        this.editor.events.on('mouseup', (e) => {
+            const 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: () => {
+                if (this._activeEl) {
+                    this._activeEl.remove();
+                }
+            }
+        });
+    }
+    _createPopup() {
+        const template = {
+            buttons: `<div class="fr-buttons">${this.editor.button.buildList(['popupClose'])}</div>`,
+        };
+        return this.editor.popups.create('screenRecordPlugin.popup', template);
+    }
+    _showPopup(el) {
+        var $popup = this.editor.popups.get('screenRecordPlugin.popup');
+        if (!$popup) {
+            $popup = this._createPopup();
+        }
+        this.editor.popups.setContainer('screenRecordPlugin.popup', this.editor.$(el));
+        const left = el.offsetLeft + el.offsetWidth / 2;
+        this.editor.popups.show('screenRecordPlugin.popup', left, null);
+    }
+    _getEl(el) {
+        if (el && el.classList) {
+            if (el.classList.contains('fr-screen-record'))
+                return el;
+            return this._getEl(el.parentNode);
+        }
+    }
 }
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ChecklistPlugin, CodePlugin, FS_HTML_EDITOR_CONFIG, FsHtmlEditorComponent, FsHtmlEditorContainerDirective, FsHtmlEditorModule, FsHtmlRendererComponent, FsHtmlRendererModule, MentionPlugin, ParagraphButtons, RealtimePlugin, RichButtons, ScreenRecordPlugin, TextButtons };