@firestitch/html-editor 9.5.9 → 12.0.2

package/fesm2015/firestitch-html-editor.js

@@ -1,15 +1,18 @@
-import { __decorate, __param, __metadata, __awaiter } from 'tslib';
-import { InjectionToken, Optional, Inject, ɵɵdefineInjectable, ɵɵinject, Injectable, ChangeDetectorRef, HostBinding, ViewChild, ElementRef, Input, Component, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, Component, ChangeDetectionStrategy, Input, forwardRef, HostBinding, ViewChild, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i4 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { FileProcessor, FsFile } from '@firestitch/file';
 import { Observable, BehaviorSubject, combineLatest, ReplaySubject, Subject, fromEventPattern } from 'rxjs';
 import { shareReplay, map, tap, concatMap, switchMap, filter, startWith, distinctUntilChanged, skip, takeUntil } from 'rxjs/operators';
 import { merge, debounce } from 'lodash-es';
-import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/platform-browser';
 import Tribute from 'tributejs';
 import { guid } from '@firestitch/common';
+import { __awaiter } from 'tslib';
 
 const RichButtons = [
     'insertTable',
@@ -68,6 +71,7 @@ function resourceLoaderFactory() {
         quote: 'plugins/quote.min.js',
         draggable: 'plugins/draggable.min.js',
         font_size: 'plugins/font_size.min.js',
+        quick_insert: 'plugins/quick_insert.min.js',
     };
     const stylesPaths = {
         froala: 'froala_editor.pkgd.min.css',
@@ -130,12 +134,12 @@ function resourceLoaderFactory() {
 }
 const ResourceLoader = resourceLoaderFactory();
 
-let FsFroalaLoaderService = class FsFroalaLoaderService {
+class FsFroalaLoaderService {
     constructor(_defaultConfig) {
         this._defaultConfig = _defaultConfig;
         this._froalaLoaded = new BehaviorSubject(false);
-        this._defaultPluginsLoaded = new BehaviorSubject(false);
-        this._loaded$ = combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
+        this._froalaPluginsLoaded = new BehaviorSubject(false);
+        this._loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
             .pipe(map(([FroalaReady, pluginsRead]) => {
             return pluginsRead && FroalaReady;
         }), shareReplay(1));
@@ -153,7 +157,7 @@ let FsFroalaLoaderService = class FsFroalaLoaderService {
         return this._loaded$;
     }
     get ready() {
-        return this._froalaLoaded.getValue() && this._defaultPluginsLoaded.getValue();
+        return this._froalaLoaded.getValue() && this._froalaPluginsLoaded.getValue();
     }
     get FroalaEditor() {
         return this._FroalaEditor;
@@ -169,13 +173,13 @@ let FsFroalaLoaderService = class FsFroalaLoaderService {
         }), concatMap(() => {
             return this._loadPlugins();
         }), tap(() => {
-            this._defaultPluginsDone();
+            this._froalaPluginsDone();
         }))
             .subscribe();
     }
     _loadPlugins() {
         const imports = this._defaultConfig
-            .defaultPlugins
+            .froalaPlugins
             .reduce((acc, pluginName) => {
             const import$ = ResourceLoader.loadResource(pluginName);
             acc.push(import$);
@@ -186,24 +190,50 @@ let FsFroalaLoaderService = class FsFroalaLoaderService {
     _froalaDone() {
         this._froalaLoaded.next(true);
     }
-    _defaultPluginsDone() {
-        this._defaultPluginsLoaded.next(true);
-    }
-};
-FsFroalaLoaderService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] }
-];
-FsFroalaLoaderService.ɵprov = ɵɵdefineInjectable({ factory: function FsFroalaLoaderService_Factory() { return new FsFroalaLoaderService(ɵɵinject(FS_HTML_EDITOR_CONFIG, 8)); }, token: FsFroalaLoaderService, providedIn: "root" });
-FsFroalaLoaderService = __decorate([
-    Injectable({
-        providedIn: 'root',
-    }),
-    __param(0, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
-    __metadata("design:paramtypes", [Object])
-], FsFroalaLoaderService);
+    _froalaPluginsDone() {
+        this._froalaPluginsLoaded.next(true);
+    }
+}
+FsFroalaLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+FsFroalaLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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]
+                }] }]; } });
 
-var FsHtmlEditorComponent_1;
-let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponent {
+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: "12.2.16", ngImport: i0, type: FsHtmlRendererComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FsHtmlRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<div class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-html-renderer',
+                    templateUrl: 'html-renderer.component.html',
+                    styleUrls: ['html-renderer.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
+                type: Input,
+                args: ['html']
+            }] } });
+
+class FsHtmlEditorComponent {
     constructor(_defaultConfig, _cdRef, _fr) {
         this._defaultConfig = _defaultConfig;
         this._cdRef = _cdRef;
@@ -253,7 +283,7 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
     initialize(options = {}) {
         const config = this._createConfig();
         this._initPlugins(config);
-        // this.el.innerHTML = this._html || '';
+        this._initButtons(config);
         this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), () => {
             this._froalaReady$.next({ config, options });
         });
@@ -266,16 +296,6 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
             return this.config.image.upload(f.file);
         }));
     }
-    _getTextNode(node) {
-        if (node) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                return node;
-            }
-            if (node.childNodes) {
-                return this._getTextNode(node.childNodes[0]);
-            }
-        }
-    }
     uninitializedClick(event) {
         if (!event.defaultPrevented) {
             const target = event.target;
@@ -376,6 +396,41 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
         // 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"]
+            */
+            var _a, _b, _c;
+            if (button.svgKey) {
+                this._fr.FroalaEditor.DefineIcon(button.name, { SVG_KEY: button.svgKey });
+            }
+            this._fr.FroalaEditor.RegisterCommand(button.name, {
+                title: button.title,
+                focus: (_a = button.focus) !== null && _a !== void 0 ? _a : true,
+                undo: (_b = button.undo) !== null && _b !== void 0 ? _b : true,
+                refreshAfterCallback: (_c = button.refreshAfterCallback) !== null && _c !== void 0 ? _c : true,
+                callback: function () {
+                    button.click(this);
+                }
+            });
+        });
+    }
     _initPlugins(config) {
         (config.plugins || []).forEach((plugin) => {
             this._fr.FroalaEditor.PLUGINS[plugin.config.name] = function (editor) {
@@ -415,6 +470,7 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
         // 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,
@@ -588,87 +644,72 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
             this.focus();
         }
     }
-};
-FsHtmlEditorComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
-    { type: ChangeDetectorRef },
-    { type: FsFroalaLoaderService }
-];
-__decorate([
-    HostBinding('class.focused'),
-    __metadata("design:type", Object)
-], FsHtmlEditorComponent.prototype, "classFocused", void 0);
-__decorate([
-    HostBinding('class.disabled'),
-    __metadata("design:type", Object)
-], FsHtmlEditorComponent.prototype, "classDisabled", void 0);
-__decorate([
-    ViewChild('elRef'),
-    __metadata("design:type", ElementRef)
-], FsHtmlEditorComponent.prototype, "elRef", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsHtmlEditorComponent.prototype, "config", void 0);
-FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
-    Component({
-        selector: 'fs-html-editor',
-        template: "<div class=\"fs-html-editor-default\">\n  <ng-container *ngIf=\"initialized\">\n    <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\">\n    </ng-container>\n  </ng-container>\n\n  <div #elRef></div>\n\n  <div class=\"bottom-line\"></div>\n  <div class=\"disabled-line\"></div>\n  <fs-html-renderer\n    *ngIf=\"!initialized\"\n    [html]=\"html\"\n    (click)=\"uninitializedClick($event)\">\n  </fs-html-renderer>\n</div>\n",
-        providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => FsHtmlEditorComponent_1),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => FsHtmlEditorComponent_1),
-                multi: true
-            },
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar{transition:none!important}:host ::ng-deep .fr-toolbar.fr-top{position:-webkit-sticky;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}: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}:host.disabled ::ng-deep .disabled-line{display:block}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}.disabled-line{display:none;position:absolute;bottom:-1px;z-index:1;background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);background-size:4px 100%;background-repeat:repeat-x;height:1px;width:100%}.bottom-line{opacity:0;transform-origin:50%;transform:scaleX(.5);transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%;border-bottom:2px solid #949494;position:absolute;bottom:-1px;z-index:1}:host{position:relative;display:block}:host.focused .bottom-line{opacity:1;display:block;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}"]
-    }),
-    __param(0, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
-    __metadata("design:paramtypes", [Object, ChangeDetectorRef,
-        FsFroalaLoaderService])
-], FsHtmlEditorComponent);
-
-let FsHtmlRendererComponent = class FsHtmlRendererComponent {
-    constructor(sanitized, _cdRef) {
-        this.sanitized = sanitized;
-        this._cdRef = _cdRef;
-    }
-    set setHtml(html) {
-        this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
-        this._cdRef.markForCheck();
+    _getTextNode(node) {
+        if (node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node;
+            }
+            if (node.childNodes) {
+                return this._getTextNode(node.childNodes[0]);
+            }
+        }
     }
-};
-FsHtmlRendererComponent.ctorParameters = () => [
-    { type: DomSanitizer },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input('html'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FsHtmlRendererComponent.prototype, "setHtml", null);
-FsHtmlRendererComponent = __decorate([
-    Component({
-        selector: 'fs-html-renderer',
-        template: "<div class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [""]
-    }),
-    __metadata("design:paramtypes", [DomSanitizer,
-        ChangeDetectorRef])
-], FsHtmlRendererComponent);
+}
+FsHtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.classDisabled" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FsHtmlEditorComponent),
+            multi: true
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => FsHtmlEditorComponent),
+            multi: true
+        },
+    ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<div class=\"fs-html-editor-default\">\n  <ng-container *ngIf=\"initialized\">\n    <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\">\n    </ng-container>\n  </ng-container>\n\n  <div #elRef></div>\n\n  <div class=\"bottom-line\"></div>\n  <div class=\"disabled-line\"></div>\n  <fs-html-renderer\n    *ngIf=\"!initialized\"\n    [html]=\"html\"\n    (click)=\"uninitializedClick($event)\">\n  </fs-html-renderer>\n</div>\n", styles: [":host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-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.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}: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}:host.disabled ::ng-deep .disabled-line{display:block}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}.disabled-line{display:none;position:absolute;bottom:-1px;z-index:1;background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);background-size:4px 100%;background-repeat:repeat-x;height:1px;width:100%}.bottom-line{opacity:0;transform-origin:50%;transform:scaleX(.5);transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%;border-bottom:2px solid #949494;position:absolute;bottom:-1px;z-index:1}:host{position:relative;display:block}:host.focused .bottom-line{opacity:1;display:block;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #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"], components: [{ type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHtmlEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-html-editor',
+                    templateUrl: 'html-editor.component.html',
+                    styleUrls: ['html-editor.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FsHtmlEditorComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => FsHtmlEditorComponent),
+                            multi: true
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FS_HTML_EDITOR_CONFIG]
+                }] }, { type: i0.ChangeDetectorRef }, { type: FsFroalaLoaderService }]; }, propDecorators: { classFocused: [{
+                type: HostBinding,
+                args: ['class.focused']
+            }], classDisabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], elRef: [{
+                type: ViewChild,
+                args: ['elRef']
+            }], config: [{
+                type: Input
+            }] } });
 
-var FsHtmlEditorModule_1;
-let FsHtmlEditorModule = FsHtmlEditorModule_1 = class FsHtmlEditorModule {
+class FsHtmlEditorModule {
     static forRoot(config = {}) {
         return {
-            ngModule: FsHtmlEditorModule_1,
+            ngModule: FsHtmlEditorModule,
             providers: [
                 { provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
                 {
@@ -679,25 +720,35 @@ let FsHtmlEditorModule = FsHtmlEditorModule_1 = class FsHtmlEditorModule {
             ]
         };
     }
-};
-FsHtmlEditorModule = FsHtmlEditorModule_1 = __decorate([
-    NgModule({
-        imports: [
+}
+FsHtmlEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsHtmlEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent,
+        FsHtmlRendererComponent], imports: [CommonModule,
+        FsSkeletonModule], exports: [FsHtmlEditorComponent,
+        FsHtmlRendererComponent] });
+FsHtmlEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHtmlEditorModule, imports: [[
             CommonModule,
             FsSkeletonModule,
-        ],
-        exports: [
-            FsHtmlEditorComponent,
-            FsHtmlRendererComponent,
-        ],
-        declarations: [
-            FsHtmlEditorComponent,
-            FsHtmlRendererComponent,
-        ],
-    })
-], FsHtmlEditorModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FsSkeletonModule,
+                    ],
+                    exports: [
+                        FsHtmlEditorComponent,
+                        FsHtmlRendererComponent,
+                    ],
+                    declarations: [
+                        FsHtmlEditorComponent,
+                        FsHtmlRendererComponent,
+                    ],
+                }]
+        }] });
 function FsHtmlEditorConfigFactory(config) {
-    return Object.assign({ defaultPlugins: [
+    return Object.assign({ froalaPlugins: [
             "align" /* Align */,
             "colors" /* Colors */,
             "image" /* Image */,
@@ -992,5 +1043,5 @@ class ScreenRecordPlugin extends Plugin {
  * Generated bundle index. Do not edit.
  */
 
-export { ChecklistPlugin, CodePlugin, FS_HTML_EDITOR_CONFIG, FsHtmlEditorComponent, FsHtmlEditorModule, FsHtmlRendererComponent, MentionPlugin, ParagraphButtons, RichButtons, ScreenRecordPlugin, TextButtons, FsHtmlEditorConfigFactory as ɵa, FS_HTML_EDITOR_DEFAULT_CONFIG as ɵb, FsFroalaLoaderService as ɵc, Plugin as ɵe };
+export { ChecklistPlugin, CodePlugin, FS_HTML_EDITOR_CONFIG, FsHtmlEditorComponent, FsHtmlEditorModule, FsHtmlRendererComponent, MentionPlugin, ParagraphButtons, RichButtons, ScreenRecordPlugin, TextButtons };
 //# sourceMappingURL=firestitch-html-editor.js.map