@firestitch/html-editor 12.4.2 → 12.5.0

package/app/modules/html-editor/services/froala-loader.service.d.ts

@@ -7,11 +7,10 @@ export declare class FsFroalaLoaderService {
     private _FroalaEditor;
     private _froalaLoaded;
     private _froalaPluginsLoaded;
-    private _resourceLoader;
+    private _sourceLoader;
     private _loaded$;
     constructor(_defaultConfig: FsHtmlEditorConfig, _document: Document);
     get loaded$(): Observable<boolean>;
-    get ready(): boolean;
     get FroalaEditor(): any;
     private _load;
     private _loadPlugins;

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/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';
+    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('@firestitch/common'), require('@angular/platform-browser'), require('tributejs')) :
+    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', '@firestitch/common', '@angular/platform-browser', 'tributejs'], 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.common, global.ng.platformBrowser, global.Tribute));
+})(this, (function (exports, i0, i4, i2, i5, forms, file, rxjs, operators, lodashEs, common, i1, Tribute) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -388,114 +388,19 @@
     var FS_HTML_EDITOR_DEFAULT_CONFIG = new i0.InjectionToken('fs-html-editor.default-config');
     var FS_HTML_EDITOR_CONFIG = new i0.InjectionToken('fs-html-editor.config');
 
-    function resourceLoaderFactory(document) {
-        var resourceBase = '/assets/js/froala/';
-        var stylesBase = '/assets/css/';
-        var head = document.getElementsByTagName('head')[0];
-        var files = new Map();
-        var window = document.defaultView;
-        var resourcePaths = {
-            froala: 'froala_editor.min.js',
-            align: 'plugins/align.min.js',
-            colors: 'plugins/colors.min.js',
-            image: 'plugins/image.min.js',
-            link: 'plugins/link.min.js',
-            lists: 'plugins/lists.min.js',
-            paragraph_format: 'plugins/paragraph_format.min.js',
-            table: 'plugins/table.min.js',
-            url: 'plugins/url.min.js',
-            video: 'plugins/video.min.js',
-            quote: 'plugins/quote.min.js',
-            draggable: 'plugins/draggable.min.js',
-            font_size: 'plugins/font_size.min.js',
-            quick_insert: 'plugins/quick_insert.min.js',
-            line_height: 'plugins/line_height.min.js'
-        };
-        var stylesPaths = {
-            froala: 'froala_editor.pkgd.min.css',
-        };
-        var loadResource = function (scriptPath) {
-            if (!files.has(scriptPath)) {
-                var obs$ = new rxjs.Observable(function (obs) {
-                    var script = document.createElement('script');
-                    script.src = scriptPath;
-                    head.appendChild(script);
-                    script.onload = function () {
-                        obs.next();
-                        obs.complete();
-                    };
-                    script.onerror = function (err) {
-                        obs.error(err);
-                    };
-                })
-                    .pipe(operators.shareReplay(1));
-                files.set(scriptPath, obs$);
-            }
-            return files.get(scriptPath);
-        };
-        var loadStyles = function (stylePath) {
-            if (!files.has(stylePath)) {
-                var obs$ = new rxjs.Observable(function (obs) {
-                    var style = document.createElement('link');
-                    style.id = stylePath;
-                    style.rel = 'stylesheet';
-                    style.href = "" + stylePath;
-                    head.appendChild(style);
-                    style.onload = function () {
-                        obs.next();
-                        obs.complete();
-                    };
-                    style.onerror = function (err) {
-                        obs.error(err);
-                    };
-                });
-                files.set(stylePath, obs$);
-            }
-            return files.get(stylePath);
-        };
-        return {
-            setResourceBase: function (path) {
-                resourceBase = path;
-            },
-            setStylesBase: function (path) {
-                stylesBase = path;
-            },
-            loadResource: function (resourceName) {
-                /*
-                 this line must be here for cases when html-editor loaded together with text-editor
-                 monaco-editor has it's own loader and it declares "define" variable, so froala tryes to load itself in wrong way
-                */
-                window.define = null;
-                var path = resourcePaths[resourceName] || resourceName;
-                return loadResource(resourceBase + path);
-            },
-            loadStyles: function (resourceName) {
-                var path = stylesPaths[resourceName] || resourceName;
-                return loadStyles(stylesBase + path);
-            }
-        };
-    }
-
     var FsFroalaLoaderService = /** @class */ (function () {
         function FsFroalaLoaderService(_defaultConfig, _document) {
             this._defaultConfig = _defaultConfig;
             this._document = _document;
             this._froalaLoaded = new rxjs.BehaviorSubject(false);
             this._froalaPluginsLoaded = new rxjs.BehaviorSubject(false);
-            this._resourceLoader = resourceLoaderFactory(this._document);
+            this._sourceLoader = common.fsSourceLoader;
             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;
             }), operators.shareReplay(1));
-            if (this._defaultConfig) {
-                if (this._defaultConfig.assetsJSPath) {
-                    this._resourceLoader.setResourceBase(this._defaultConfig.assetsJSPath);
-                }
-                if (this._defaultConfig.assetsCSSPath) {
-                    this._resourceLoader.setStylesBase(this._defaultConfig.assetsCSSPath);
-                }
-            }
+            this._sourceLoader.setDocument(this._document);
             this._load();
         }
         Object.defineProperty(FsFroalaLoaderService.prototype, "loaded$", {
@@ -505,13 +410,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(FsFroalaLoaderService.prototype, "ready", {
-            get: function () {
-                return this._froalaLoaded.getValue() && this._froalaPluginsLoaded.getValue();
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(FsFroalaLoaderService.prototype, "FroalaEditor", {
             get: function () {
                 return this._FroalaEditor;
@@ -521,10 +419,27 @@
         });
         FsFroalaLoaderService.prototype._load = function () {
             var _this = this;
-            rxjs.combineLatest([
-                this._resourceLoader.loadResource('froala'),
-                this._resourceLoader.loadStyles('froala')
-            ])
+            this._sourceLoader.registerResources({
+                froala: [
+                    '/assets/js/froala/froala_editor.min.js',
+                    '/assets/css/froala_editor.pkgd.min.css',
+                ],
+                froala_align: '/assets/js/froala/plugins/align.min.js',
+                froala_colors: '/assets/js/froala/plugins/colors.min.js',
+                froala_image: '/assets/js/froala/plugins/image.min.js',
+                froala_link: '/assets/js/froala/plugins/link.min.js',
+                froala_lists: '/assets/js/froala/plugins/lists.min.js',
+                froala_paragraph_format: '/assets/js/froala/plugins/paragraph_format.min.js',
+                froala_table: '/assets/js/froala/plugins/table.min.js',
+                froala_url: '/assets/js/froala/plugins/url.min.js',
+                froala_video: '/assets/js/froala/plugins/video.min.js',
+                froala_quote: '/assets/js/froala/plugins/quote.min.js',
+                froala_draggable: '/assets/js/froala/plugins/draggable.min.js',
+                froala_font_size: '/assets/js/froala/plugins/font_size.min.js',
+                froala_quick_insert: '/assets/js/froala/plugins/quick_insert.min.js',
+                froala_line_height: '/assets/js/froala/plugins/line_height.min.js'
+            });
+            this._sourceLoader.loadResource('froala')
                 .pipe(operators.tap(function () {
                 _this._FroalaEditor = window.FroalaEditor;
                 _this._froalaDone();
@@ -536,15 +451,10 @@
                 .subscribe();
         };
         FsFroalaLoaderService.prototype._loadPlugins = function () {
-            var _this = this;
-            var imports = this._defaultConfig
+            var resources = this._defaultConfig
                 .froalaPlugins
-                .reduce(function (acc, pluginName) {
-                var import$ = _this._resourceLoader.loadResource(pluginName);
-                acc.push(import$);
-                return acc;
-            }, []);
-            return rxjs.combineLatest(imports);
+                .map(function (pluginName) { return "froala_" + pluginName; });
+            return this._sourceLoader.loadResources(resources);
         };
         FsFroalaLoaderService.prototype._froalaDone = function () {
             this._froalaLoaded.next(true);
@@ -1454,34 +1364,28 @@
                 var FroalaEditor;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, resourceLoaderFactory(document).loadStyles('froala')
-                                .toPromise()];
-                        case 1:
-                            _a.sent();
-                            FroalaEditor = window.FroalaEditor;
-                            this.editor.events.on('mouseup', function (e) {
-                                var el = _this._getEl(e.target);
-                                if (el) {
-                                    _this.editor.popups.hideAll();
-                                    _this._activeEl = el;
-                                    _this._showPopup(el);
-                                }
-                            });
-                            FroalaEditor.POPUP_TEMPLATES["screenRecordPlugin.popup"] = '[_BUTTONS_]';
-                            FroalaEditor.DefineIcon('popupClose', { NAME: 'trash', SVG_KEY: 'remove' });
-                            FroalaEditor.RegisterCommand('popupClose', {
-                                title: 'Remove',
-                                undo: false,
-                                focus: false,
-                                callback: function () {
-                                    if (_this._activeEl) {
-                                        _this._activeEl.remove();
-                                    }
-                                }
-                            });
-                            return [2 /*return*/];
-                    }
+                    FroalaEditor = window.FroalaEditor;
+                    this.editor.events.on('mouseup', function (e) {
+                        var el = _this._getEl(e.target);
+                        if (el) {
+                            _this.editor.popups.hideAll();
+                            _this._activeEl = el;
+                            _this._showPopup(el);
+                        }
+                    });
+                    FroalaEditor.POPUP_TEMPLATES["screenRecordPlugin.popup"] = '[_BUTTONS_]';
+                    FroalaEditor.DefineIcon('popupClose', { NAME: 'trash', SVG_KEY: 'remove' });
+                    FroalaEditor.RegisterCommand('popupClose', {
+                        title: 'Remove',
+                        undo: false,
+                        focus: false,
+                        callback: function () {
+                            if (_this._activeEl) {
+                                _this._activeEl.remove();
+                            }
+                        }
+                    });
+                    return [2 /*return*/];
                 });
             });
         };