@firestitch/html-editor 9.5.4 → 9.5.7

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;
@@ -49,4 +50,5 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
     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

@@ -370,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;
@@ -385,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
@@ -462,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 () { };
@@ -488,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
@@ -520,94 +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 () {
-                    _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();
-                }
+                _this._froalaReady$.next({ config: config, options: options });
             });
         };
         FsHtmlEditorComponent.prototype._processImageUpload = function (blob) {
@@ -693,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;
@@ -735,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) {
@@ -831,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) {
@@ -843,7 +750,11 @@
                     };
                 }
                 _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();
@@ -851,6 +762,106 @@
                 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 [
             { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
@@ -876,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,
@@ -890,7 +901,7 @@
                     },
                 ],
                 changeDetection: core.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{position:-webkit-sticky;position:sticky;z-index:2;border-radius:0;background-color:transparent}:host ::ng-deep .fr-toolbar .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar .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 div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top{border:0}:host ::ng-deep .fr-toolbar .fr-newline{margin:0}:host ::ng-deep .fr-toolbar .fr-more-toolbar{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar .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}"]
+                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{position:-webkit-sticky;position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar .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 div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top{border:0}:host ::ng-deep .fr-toolbar .fr-newline{margin:0}:host ::ng-deep .fr-toolbar .fr-more-toolbar{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar .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, core.Optional()), __param(0, core.Inject(FS_HTML_EDITOR_CONFIG)),
             __metadata("design:paramtypes", [Object, core.ChangeDetectorRef,