@firestitch/html-editor 12.0.1 → 12.0.4

package/app/components/html-editor/html-editor.component.d.ts

@@ -30,7 +30,6 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
     hasContent(): boolean;
     initialize(options?: any): void;
     private _processImageUpload;
-    private _getTextNode;
     uninitializedClick(event: UIEvent): void;
     updateSize(): void;
     validate(control: AbstractControl): ValidationErrors | null;
@@ -47,11 +46,13 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
     destroy(): void;
     private _createConfig;
     private _change;
+    private _initButtons;
     private _initPlugins;
     private _createOptions;
     private _listenLazyInit;
     private _contentChanged;
     private _setupFroala;
+    private _getTextNode;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsHtmlEditorComponent, [{ optional: true; }, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FsHtmlEditorComponent, "fs-html-editor", never, { "config": "config"; }, {}, never, never>;
 }

package/app/enums/default-plugin.enum.d.ts

@@ -1,4 +1,4 @@
-export declare const enum DefaultPlugin {
+export declare const enum FroalaPlugin {
     Align = "align",
     Colors = "colors",
     Image = "image",
@@ -10,5 +10,6 @@ export declare const enum DefaultPlugin {
     Video = "video",
     Quote = "quote",
     Draggable = "draggable",
-    FontSize = "font_size"
+    FontSize = "font_size",
+    QuickInsert = "quick_insert"
 }

package/app/fs-html-editor.module.d.ts

@@ -1,15 +1,16 @@
 import { ModuleWithProviders } from '@angular/core';
 import { FsHtmlEditorConfig } from './interfaces/html-editor-config';
-import { DefaultPlugin } from './enums/default-plugin.enum';
+import { FroalaPlugin } from './enums/default-plugin.enum';
 import * as i0 from "@angular/core";
 import * as i1 from "./components/html-editor/html-editor.component";
 import * as i2 from "./components/html-renderer/html-renderer.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@firestitch/skeleton";
+import * as i5 from "@firestitch/label";
 export declare class FsHtmlEditorModule {
     static forRoot(config?: FsHtmlEditorConfig): ModuleWithProviders<FsHtmlEditorModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsHtmlEditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FsHtmlEditorModule, [typeof i1.FsHtmlEditorComponent, typeof i2.FsHtmlRendererComponent], [typeof i3.CommonModule, typeof i4.FsSkeletonModule], [typeof i1.FsHtmlEditorComponent, typeof i2.FsHtmlRendererComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FsHtmlEditorModule, [typeof i1.FsHtmlEditorComponent, typeof i2.FsHtmlRendererComponent], [typeof i3.CommonModule, typeof i4.FsSkeletonModule, typeof i5.FsLabelModule], [typeof i1.FsHtmlEditorComponent, typeof i2.FsHtmlRendererComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FsHtmlEditorModule>;
 }
 export declare function FsHtmlEditorConfigFactory(config: FsHtmlEditorConfig): {
@@ -22,12 +23,21 @@ export declare function FsHtmlEditorConfigFactory(config: FsHtmlEditorConfig): {
     placeholder?: string;
     maxLength?: number;
     autofocus?: boolean;
-    froalaConfig?: any;
     disabled?: boolean;
     activationKey?: any;
     tooltip?: string;
     plugins?: import("./classes/plugin").Plugin[];
-    defaultPlugins: DefaultPlugin[];
+    froalaPlugins: FroalaPlugin[];
+    froalaConfig?: any;
     assetsJSPath?: string;
     assetsCSSPath?: string;
+    buttons?: {
+        name: string;
+        svgKey?: string;
+        title?: string;
+        focus?: boolean;
+        undo?: boolean;
+        refreshAfterCallback?: boolean;
+        click: (editor: any) => void;
+    }[];
 };

package/app/interfaces/html-editor-config.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { Plugin } from '../classes/plugin';
-import { DefaultPlugin } from '../enums/default-plugin.enum';
+import { FroalaPlugin } from '../enums/default-plugin.enum';
 export interface FsHtmlEditorConfig {
     image?: FsHtmlEditorUploadConfig;
     label?: string;
@@ -11,14 +11,23 @@ export interface FsHtmlEditorConfig {
     placeholder?: string;
     maxLength?: number;
     autofocus?: boolean;
-    froalaConfig?: any;
     disabled?: boolean;
     activationKey?: any;
     tooltip?: string;
     plugins?: Plugin[];
-    defaultPlugins?: DefaultPlugin[];
+    froalaPlugins?: FroalaPlugin[];
+    froalaConfig?: any;
     assetsJSPath?: string;
     assetsCSSPath?: string;
+    buttons?: {
+        name: string;
+        svgKey?: string;
+        title?: string;
+        focus?: boolean;
+        undo?: boolean;
+        refreshAfterCallback?: boolean;
+        click: (editor: any) => void;
+    }[];
 }
 export interface FsHtmlEditorUploadConfig {
     width?: number | undefined;

package/app/services/froala-loader.service.d.ts

@@ -5,7 +5,7 @@ export declare class FsFroalaLoaderService {
     private _defaultConfig;
     private _FroalaEditor;
     private _froalaLoaded;
-    private _defaultPluginsLoaded;
+    private _froalaPluginsLoaded;
     private _loaded$;
     constructor(_defaultConfig: FsHtmlEditorConfig);
     get loaded$(): Observable<boolean>;
@@ -14,7 +14,7 @@ export declare class FsFroalaLoaderService {
     private _load;
     private _loadPlugins;
     private _froalaDone;
-    private _defaultPluginsDone;
+    private _froalaPluginsDone;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsFroalaLoaderService, [{ optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FsFroalaLoaderService>;
 }

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@firestitch/skeleton'), require('@angular/forms'), require('@firestitch/file'), require('rxjs'), require('rxjs/operators'), require('lodash-es'), require('@angular/platform-browser'), require('tributejs'), require('@firestitch/common')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/html-editor', ['exports', '@angular/core', '@angular/common', '@firestitch/skeleton', '@angular/forms', '@firestitch/file', 'rxjs', 'rxjs/operators', 'lodash-es', '@angular/platform-browser', 'tributejs', '@firestitch/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["html-editor"] = {}), global.ng.core, global.ng.common, global.i4, global.ng.forms, global.file, global.rxjs, global.rxjs.operators, global.lodashEs, global.ng.platformBrowser, global.Tribute, global.common));
-})(this, (function (exports, i0, i3, i4, forms, file, rxjs, operators, lodashEs, i1, Tribute, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@firestitch/label'), require('@firestitch/skeleton'), require('@angular/forms'), require('@firestitch/file'), require('rxjs'), require('rxjs/operators'), require('lodash-es'), require('@angular/platform-browser'), require('tributejs'), require('@firestitch/common')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/html-editor', ['exports', '@angular/core', '@angular/common', '@firestitch/label', '@firestitch/skeleton', '@angular/forms', '@firestitch/file', 'rxjs', 'rxjs/operators', 'lodash-es', '@angular/platform-browser', 'tributejs', '@firestitch/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["html-editor"] = {}), global.ng.core, global.ng.common, global.i2, global.i5, global.ng.forms, global.file, global.rxjs, global.rxjs.operators, global.lodashEs, global.ng.platformBrowser, global.Tribute, global.common));
+})(this, (function (exports, i0, i4, i2, i5, forms, file, rxjs, operators, lodashEs, i1, Tribute, common) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,8 +25,9 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var Tribute__default = /*#__PURE__*/_interopDefaultLegacy(Tribute);
 
@@ -405,6 +406,7 @@
             quote: 'plugins/quote.min.js',
             draggable: 'plugins/draggable.min.js',
             font_size: 'plugins/font_size.min.js',
+            quick_insert: 'plugins/quick_insert.min.js',
         };
         var stylesPaths = {
             froala: 'froala_editor.pkgd.min.css',
@@ -471,8 +473,8 @@
         function FsFroalaLoaderService(_defaultConfig) {
             this._defaultConfig = _defaultConfig;
             this._froalaLoaded = new rxjs.BehaviorSubject(false);
-            this._defaultPluginsLoaded = new rxjs.BehaviorSubject(false);
-            this._loaded$ = rxjs.combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
+            this._froalaPluginsLoaded = new rxjs.BehaviorSubject(false);
+            this._loaded$ = rxjs.combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
                 .pipe(operators.map(function (_a) {
                 var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
                 return pluginsRead && FroalaReady;
@@ -496,7 +498,7 @@
         });
         Object.defineProperty(FsFroalaLoaderService.prototype, "ready", {
             get: function () {
-                return this._froalaLoaded.getValue() && this._defaultPluginsLoaded.getValue();
+                return this._froalaLoaded.getValue() && this._froalaPluginsLoaded.getValue();
             },
             enumerable: false,
             configurable: true
@@ -520,13 +522,13 @@
             }), operators.concatMap(function () {
                 return _this._loadPlugins();
             }), operators.tap(function () {
-                _this._defaultPluginsDone();
+                _this._froalaPluginsDone();
             }))
                 .subscribe();
         };
         FsFroalaLoaderService.prototype._loadPlugins = function () {
             var imports = this._defaultConfig
-                .defaultPlugins
+                .froalaPlugins
                 .reduce(function (acc, pluginName) {
                 var import$ = ResourceLoader.loadResource(pluginName);
                 acc.push(import$);
@@ -537,8 +539,8 @@
         FsFroalaLoaderService.prototype._froalaDone = function () {
             this._froalaLoaded.next(true);
         };
-        FsFroalaLoaderService.prototype._defaultPluginsDone = function () {
-            this._defaultPluginsLoaded.next(true);
+        FsFroalaLoaderService.prototype._froalaPluginsDone = function () {
+            this._froalaPluginsLoaded.next(true);
         };
         return FsFroalaLoaderService;
     }());
@@ -656,7 +658,7 @@
             if (options === void 0) { options = {}; }
             var config = this._createConfig();
             this._initPlugins(config);
-            // this.el.innerHTML = this._html || '';
+            this._initButtons(config);
             this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), function () {
                 _this._froalaReady$.next({ config: config, options: options });
             });
@@ -666,21 +668,11 @@
             var processor = new file.FileProcessor();
             var file$1 = new file.FsFile(blob);
             return processor.process([file$1], this.config.image)
-                .pipe(operators.switchMap(function (_a) {
-                var _b = __read(_a, 1), f = _b[0];
+                .pipe(operators.switchMap(function (_d) {
+                var _e = __read(_d, 1), f = _e[0];
                 return _this.config.image.upload(f.file);
             }));
         };
-        FsHtmlEditorComponent.prototype._getTextNode = function (node) {
-            if (node) {
-                if (node.nodeType === Node.TEXT_NODE) {
-                    return node;
-                }
-                if (node.childNodes) {
-                    return this._getTextNode(node.childNodes[0]);
-                }
-            }
-        };
         FsHtmlEditorComponent.prototype.uninitializedClick = function (event) {
             if (!event.defaultPrevented) {
                 var target_1 = event.target;
@@ -778,9 +770,45 @@
             return lodashEs.merge({ froalaConfig: {} }, this._defaultConfig, this.config);
         };
         FsHtmlEditorComponent.prototype._change = function (html) {
-            // this._html = html;
+            this._html = html;
             this.onChange(html);
         };
+        FsHtmlEditorComponent.prototype._initButtons = function (config) {
+            var _this = this;
+            (config.buttons || [])
+                .forEach(function (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);
+                    }
+                });
+            });
+        };
         FsHtmlEditorComponent.prototype._initPlugins = function (config) {
             var _this = this;
             (config.plugins || []).forEach(function (plugin) {
@@ -886,8 +914,8 @@
                     };
                 }
                 _this.initialize(options);
-            }), operators.switchMap(function () { return _this._froalaReady$; }), operators.filter(function (data) { return !!data; }), operators.tap(function (_a) {
-                var config = _a.config, options = _a.options;
+            }), operators.switchMap(function () { return _this._froalaReady$; }), operators.filter(function (data) { return !!data; }), operators.tap(function (_d) {
+                var config = _d.config, options = _d.options;
                 _this._setupFroala(config, options);
             }))
                 .subscribe();
@@ -998,6 +1026,16 @@
                 this.focus();
             }
         };
+        FsHtmlEditorComponent.prototype._getTextNode = function (node) {
+            if (node) {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return node;
+                }
+                if (node.childNodes) {
+                    return this._getTextNode(node.childNodes[0]);
+                }
+            }
+        };
         return FsHtmlEditorComponent;
     }());
     FsHtmlEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorComponent, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -1012,7 +1050,7 @@
                 useExisting: i0.forwardRef(function () { return FsHtmlEditorComponent; }),
                 multi: true
             },
-        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0__namespace, template: "<fs-label-field>\n  <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n  <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  \n  <fs-label-message>\n    <div class=\"fs-form-message\"></div>\n  </fs-label-message>\n</fs-label-field>\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: i2__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2__namespace.FsLabelComponent, selector: "fs-label" }, { type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: i2__namespace.FsLabelMessageComponent, selector: "fs-label-message" }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1074,19 +1112,22 @@
     }());
     FsHtmlEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     FsHtmlEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent,
-            FsHtmlRendererComponent], imports: [i3.CommonModule,
-            i4.FsSkeletonModule], exports: [FsHtmlEditorComponent,
+            FsHtmlRendererComponent], imports: [i4.CommonModule,
+            i5.FsSkeletonModule,
+            i2.FsLabelModule], exports: [FsHtmlEditorComponent,
             FsHtmlRendererComponent] });
     FsHtmlEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, imports: [[
-                i3.CommonModule,
-                i4.FsSkeletonModule,
+                i4.CommonModule,
+                i5.FsSkeletonModule,
+                i2.FsLabelModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3.CommonModule,
-                            i4.FsSkeletonModule,
+                            i4.CommonModule,
+                            i5.FsSkeletonModule,
+                            i2.FsLabelModule,
                         ],
                         exports: [
                             FsHtmlEditorComponent,
@@ -1099,7 +1140,7 @@
                     }]
             }] });
     function FsHtmlEditorConfigFactory(config) {
-        return Object.assign({ defaultPlugins: [
+        return Object.assign({ froalaPlugins: [
                 "align" /* Align */,
                 "colors" /* Colors */,
                 "image" /* Image */,