@firestitch/html-editor 9.5.2 → 9.5.6

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

@@ -15,6 +15,7 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
     private _editor;
     private _html;
     private _initialize$;
+    private _froalaReady$;
     private _destroy$;
     constructor(_defaultConfig: any, _cdRef: ChangeDetectorRef, _fr: FsFroalaLoaderService);
     onChange: (data: any) => void;
@@ -22,7 +23,7 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
     readonly el: any;
     readonly html: string;
     readonly editor: any;
-    readonly froalaReady$: Observable<boolean>;
+    readonly froalaLoaded$: Observable<boolean>;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     hasContent(): boolean;
@@ -48,4 +49,6 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
     private _initPlugins;
     private _createOptions;
     private _listenLazyInit;
+    private _contentChanged;
+    private _setupFroala;
 }

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

@@ -5,9 +5,9 @@ export declare class FsFroalaLoaderService {
     private _FroalaEditor;
     private _froalaLoaded;
     private _defaultPluginsLoaded;
-    private _ready$;
+    private _loaded$;
     constructor(_defaultConfig: FsHtmlEditorConfig);
-    readonly ready$: Observable<boolean>;
+    readonly loaded$: Observable<boolean>;
     readonly ready: boolean;
     readonly FroalaEditor: any;
     private _load;

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

@@ -25,11 +25,13 @@
     var extendStatics = function(d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
 
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -119,8 +121,8 @@
         o[k2] = m[k];
     });
 
-    function __exportStar(m, exports) {
-        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    function __exportStar(m, o) {
+        for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
     }
 
     function __values(o) {
@@ -152,19 +154,31 @@
         return ar;
     }
 
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
 
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
         for (var r = Array(s), k = 0, i = 0; i < il; i++)
             for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                 r[k] = a[j];
         return r;
-    };
+    }
+
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
 
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -210,7 +224,7 @@
     function __importStar(mod) {
         if (mod && mod.__esModule) return mod;
         var result = {};
-        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+        if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
         __setModuleDefault(result, mod);
         return result;
     }
@@ -219,19 +233,17 @@
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
 
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
 
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m") throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var RichButtons = [
@@ -358,7 +370,7 @@
             this._defaultConfig = _defaultConfig;
             this._froalaLoaded = new rxjs.BehaviorSubject(false);
             this._defaultPluginsLoaded = new rxjs.BehaviorSubject(false);
-            this._ready$ = rxjs.combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
+            this._loaded$ = rxjs.combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
                 .pipe(operators.map(function (_a) {
                 var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
                 return pluginsRead && FroalaReady;
@@ -373,9 +385,9 @@
             }
             this._load();
         }
-        Object.defineProperty(FsFroalaLoaderService.prototype, "ready$", {
+        Object.defineProperty(FsFroalaLoaderService.prototype, "loaded$", {
             get: function () {
-                return this._ready$;
+                return this._loaded$;
             },
             enumerable: true,
             configurable: true
@@ -450,6 +462,7 @@
             this.config = {};
             this.initialized = false;
             this._initialize$ = new rxjs.ReplaySubject();
+            this._froalaReady$ = new rxjs.BehaviorSubject(null);
             this._destroy$ = new rxjs.Subject();
             this.onChange = function (data) { };
             this.onTouched = function () { };
@@ -476,9 +489,9 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(FsHtmlEditorComponent.prototype, "froalaReady$", {
+        Object.defineProperty(FsHtmlEditorComponent.prototype, "froalaLoaded$", {
             get: function () {
-                return this._fr.ready$;
+                return this._fr.loaded$;
             },
             enumerable: true,
             configurable: true
@@ -508,96 +521,9 @@
             if (options === void 0) { options = {}; }
             var config = this._createConfig();
             this._initPlugins(config);
-            this.el.innerHTML = this._html;
+            // this.el.innerHTML = this._html || '';
             this._editor = new this._fr.FroalaEditor(this.el, this._createOptions(), function () {
-                _this._cdRef.markForCheck();
-                if (config.disabled) {
-                    _this.disable();
-                }
-                if (config.froalaConfig.events) {
-                    if (config.froalaConfig.events.initialized) {
-                        config.froalaConfig.events.initialized();
-                    }
-                }
-                _this._editor.events.on('focus', function () {
-                    _this.classFocused = true;
-                    _this._cdRef.markForCheck();
-                });
-                _this._editor.events.on('blur', function () {
-                    _this.classFocused = false;
-                    _this._cdRef.markForCheck();
-                });
-                _this._editor.events.on('contentChanged', function () {
-                    var editorHTML = _this._editor.html.get();
-                    if (_this.html !== editorHTML) {
-                        _this._change(editorHTML);
-                    }
-                });
-                _this._editor.events.on('paste.afterCleanup', function (html) {
-                    var div = document.createElement('div');
-                    div.innerHTML = html;
-                    div.querySelectorAll('*')
-                        .forEach(function (el) {
-                        for (var i = 0; i < el.attributes.length; i++) {
-                            var name_1 = el.attributes[0].name;
-                            if (name_1 !== 'href') {
-                                el.removeAttribute(name_1);
-                            }
-                        }
-                    });
-                    return div.innerHTML;
-                });
-                _this._editor.events.on('keydown', function () {
-                    _this.onTouched();
-                });
-                if (_this.config.image && _this.config.image.upload) {
-                    _this._editor.events.on('image.beforePasteUpload', function (image) {
-                        fetch(image.getAttribute('src'))
-                            .then(function (res) {
-                            res.blob()
-                                .then(function (blob) {
-                                _this._processImageUpload(blob)
-                                    .pipe(operators.takeUntil(_this._destroy$))
-                                    .subscribe(function (url) {
-                                    image.setAttribute('src', url);
-                                    image.removeAttribute('data-fr-image-pasted');
-                                });
-                            });
-                        });
-                        return false;
-                    });
-                    _this._editor.events.on('image.beforeUpload', function (blobs) {
-                        _this._processImageUpload(blobs[0])
-                            .pipe(operators.takeUntil(_this._destroy$))
-                            .subscribe(function (url) {
-                            _this.editor.image.insert(url, null, null, _this.editor.image.get());
-                        });
-                        return false;
-                    });
-                }
-                if (_this.el.querySelector('.fr-second-toolbar')) {
-                    _this.el.querySelector('.fr-second-toolbar').remove();
-                }
-                var selection = options.selection;
-                if (selection) {
-                    var node = Array.from(_this.el.querySelectorAll('.fr-element *')).find(function (node) {
-                        return selection.node === node.textContent;
-                    });
-                    if (node) {
-                        var range = document.createRange();
-                        var sel = window.getSelection();
-                        range.setStart(_this._getTextNode(node), selection.offset);
-                        range.collapse(true);
-                        sel.removeAllRanges();
-                        sel.addRange(range);
-                    }
-                    else if (_this.config.autofocus) {
-                        _this.focus();
-                    }
-                }
-                else if (_this.config.autofocus) {
-                    _this.focus();
-                }
+                _this._froalaReady$.next({ config: config, options: options });
             });
         };
         FsHtmlEditorComponent.prototype._processImageUpload = function (blob) {
@@ -605,8 +531,9 @@
             var processor = new file.FileProcessor();
             var file$1 = new file.FsFile(blob);
             return processor.process([file$1], this.config.image)
-                .pipe(operators.switchMap(function (img) {
-                return _this.config.image.upload(img.file);
+                .pipe(operators.switchMap(function (_a) {
+                var _b = __read(_a, 1), f = _b[0];
+                return _this.config.image.upload(f.file);
             }));
         };
         FsHtmlEditorComponent.prototype._getTextNode = function (node) {
@@ -682,23 +609,15 @@
             this.writeValue(html);
         };
         FsHtmlEditorComponent.prototype.writeValue = function (html) {
-            var _this = this;
             this._html = html || '';
-            this._cdRef.markForCheck();
-            // SP-T2298 timeout needed for the case, when froala was already initated and
-            // second instance opened in dialog/drawer. In this case init step pass much faster, writeValue trigger
-            // after init and froala ignore new html. At the same time froala was initied but editor not yet, and next
-            // code doesn't work without timeout. We've got time range when too late for initiate value, and to early
-            // for change event.
-            setTimeout(function () {
-                if (_this.editor && _this.editor.html) {
-                    try {
-                        _this.editor.html.set(_this._html);
-                    }
-                    catch (e) {
-                    }
+            if (this.editor && this.editor.html) {
+                try {
+                    this.editor.html.set(this._html);
                 }
-            });
+                catch (e) {
+                }
+            }
+            this._cdRef.markForCheck();
         };
         FsHtmlEditorComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -724,7 +643,7 @@
             return lodashEs.merge({ froalaConfig: {} }, this._defaultConfig, this.config);
         };
         FsHtmlEditorComponent.prototype._change = function (html) {
-            this._html = html;
+            // this._html = html;
             this.onChange(html);
         };
         FsHtmlEditorComponent.prototype._initPlugins = function (config) {
@@ -820,9 +739,8 @@
         };
         FsHtmlEditorComponent.prototype._listenLazyInit = function () {
             var _this = this;
-            this.froalaReady$
-                .pipe(operators.filter(function (ready) { return ready; }), operators.switchMap(function () { return _this._initialize$; }))
-                .subscribe(function () {
+            this.froalaLoaded$
+                .pipe(operators.filter(function (ready) { return ready; }), operators.switchMap(function () { return _this._initialize$; }), operators.tap(function () {
                 var selection = window.getSelection();
                 var options = {};
                 if (selection.baseNode) {
@@ -832,7 +750,117 @@
                     };
                 }
                 _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;
+                _this._setupFroala(config, options);
+            }))
+                .subscribe();
+        };
+        FsHtmlEditorComponent.prototype._contentChanged = function () {
+            var editorHTML = this._editor.html.get();
+            if (this.html !== editorHTML) {
+                this._change(editorHTML);
+            }
+        };
+        FsHtmlEditorComponent.prototype._setupFroala = function (config, options) {
+            var _this = this;
+            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', function () {
+                _this.classFocused = true;
+                _this._cdRef.markForCheck();
+            });
+            this._editor.events.on('blur', function () {
+                _this.classFocused = false;
+                _this._cdRef.markForCheck();
+            });
+            rxjs.fromEventPattern(function (handler) {
+                _this._editor.events.on('contentChanged', handler);
+            }, function () { })
+                .pipe(operators.startWith(this._html), operators.map(function () { return _this.editor.html.get(); }), operators.distinctUntilChanged(), operators.skip(1))
+                .subscribe(function () {
+                _this._contentChanged();
             });
+            // this._editor.events.on('contentChanged', () => {
+            //   console.log('test');
+            //   if (!this._firstChange) {
+            //     this._contentChanged();
+            //   }
+            // });
+            this._editor.events.on('paste.afterCleanup', function (html) {
+                var div = document.createElement('div');
+                div.innerHTML = html;
+                div.querySelectorAll('*')
+                    .forEach(function (el) {
+                    for (var i = 0; i < el.attributes.length; i++) {
+                        var name_1 = el.attributes[0].name;
+                        if (name_1 !== 'href') {
+                            el.removeAttribute(name_1);
+                        }
+                    }
+                });
+                return div.innerHTML;
+            });
+            this._editor.events.on('keydown', function () {
+                _this.onTouched();
+            });
+            if (this.config.image && this.config.image.upload) {
+                this._editor.events.on('image.beforePasteUpload', function (image) {
+                    fetch(image.getAttribute('src'))
+                        .then(function (res) {
+                        res.blob()
+                            .then(function (blob) {
+                            _this._processImageUpload(blob)
+                                .pipe(operators.takeUntil(_this._destroy$))
+                                .subscribe(function (url) {
+                                image.setAttribute('src', url);
+                                image.removeAttribute('data-fr-image-pasted');
+                                _this._contentChanged();
+                            });
+                        });
+                    });
+                    return false;
+                });
+                this._editor.events.on('image.beforeUpload', function (blobs) {
+                    _this._processImageUpload(blobs[0])
+                        .pipe(operators.takeUntil(_this._destroy$))
+                        .subscribe(function (url) {
+                        _this.editor.image.insert(url, null, null, _this.editor.image.get());
+                    });
+                    return false;
+                });
+            }
+            if (this.el.querySelector('.fr-second-toolbar')) {
+                this.el.querySelector('.fr-second-toolbar').remove();
+            }
+            var selection = options.selection;
+            if (selection) {
+                var node = Array.from(this.el.querySelectorAll('.fr-element *')).find(function (node) {
+                    return selection.node === node.textContent;
+                });
+                if (node) {
+                    var range = document.createRange();
+                    var sel = window.getSelection();
+                    range.setStart(this._getTextNode(node), selection.offset);
+                    range.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+                else if (this.config.autofocus) {
+                    this.focus();
+                }
+            }
+            else if (this.config.autofocus) {
+                this.focus();
+            }
         };
         var FsHtmlEditorComponent_1;
         FsHtmlEditorComponent.ctorParameters = function () { return [
@@ -859,7 +887,7 @@
         FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
             core.Component({
                 selector: 'fs-html-editor',
-                template: "<div class=\"fs-html-editor-default\">\n  <ng-container *ngIf=\"initialized\">\n    <ng-container *fsSkeleton=\"(froalaReady$ | async) !== false\">\n    </ng-container>\n  </ng-container>\n\n  <div #elRef></div>\n\n  <div class=\"bottom-line\"></div>\n  <div class=\"disabled-line\"></div>\n  <fs-html-renderer\n    *ngIf=\"!initialized\"\n    [html]=\"html\"\n    (click)=\"uninitializedClick($event)\">\n  </fs-html-renderer>\n</div>\n",
+                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: forms.NG_VALUE_ACCESSOR,