@firestitch/html-editor 9.5.4 → 9.5.7

package/fesm5/firestitch-html-editor.js

@@ -4,8 +4,8 @@ import { CommonModule } from '@angular/common';
 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 } from 'rxjs';
-import { shareReplay, map, tap, concatMap, takeUntil, switchMap, filter } from 'rxjs/operators';
+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 Tribute from 'tributejs';
@@ -134,7 +134,7 @@ var FsFroalaLoaderService = /** @class */ (function () {
         this._defaultConfig = _defaultConfig;
         this._froalaLoaded = new BehaviorSubject(false);
         this._defaultPluginsLoaded = new BehaviorSubject(false);
-        this._ready$ = combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
+        this._loaded$ = combineLatest([this._froalaLoaded, this._defaultPluginsLoaded])
             .pipe(map(function (_a) {
             var _b = __read(_a, 2), FroalaReady = _b[0], pluginsRead = _b[1];
             return pluginsRead && FroalaReady;
@@ -149,9 +149,9 @@ var FsFroalaLoaderService = /** @class */ (function () {
         }
         this._load();
     }
-    Object.defineProperty(FsFroalaLoaderService.prototype, "ready$", {
+    Object.defineProperty(FsFroalaLoaderService.prototype, "loaded$", {
         get: function () {
-            return this._ready$;
+            return this._loaded$;
         },
         enumerable: true,
         configurable: true
@@ -226,6 +226,7 @@ var FsHtmlEditorComponent = /** @class */ (function () {
         this.config = {};
         this.initialized = false;
         this._initialize$ = new ReplaySubject();
+        this._froalaReady$ = new BehaviorSubject(null);
         this._destroy$ = new Subject();
         this.onChange = function (data) { };
         this.onTouched = function () { };
@@ -252,9 +253,9 @@ var FsHtmlEditorComponent = /** @class */ (function () {
         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
@@ -284,94 +285,9 @@ var FsHtmlEditorComponent = /** @class */ (function () {
         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(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(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) {
@@ -457,23 +373,15 @@ var FsHtmlEditorComponent = /** @class */ (function () {
         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;
@@ -499,7 +407,7 @@ var FsHtmlEditorComponent = /** @class */ (function () {
         return 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) {
@@ -595,9 +503,8 @@ var FsHtmlEditorComponent = /** @class */ (function () {
     };
     FsHtmlEditorComponent.prototype._listenLazyInit = function () {
         var _this = this;
-        this.froalaReady$
-            .pipe(filter(function (ready) { return ready; }), switchMap(function () { return _this._initialize$; }))
-            .subscribe(function () {
+        this.froalaLoaded$
+            .pipe(filter(function (ready) { return ready; }), switchMap(function () { return _this._initialize$; }), tap(function () {
             var selection = window.getSelection();
             var options = {};
             if (selection.baseNode) {
@@ -607,7 +514,11 @@ var FsHtmlEditorComponent = /** @class */ (function () {
                 };
             }
             _this.initialize(options);
-        });
+        }), switchMap(function () { return _this._froalaReady$; }), filter(function (data) { return !!data; }), 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();
@@ -615,6 +526,106 @@ var FsHtmlEditorComponent = /** @class */ (function () {
             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();
+        });
+        fromEventPattern(function (handler) {
+            _this._editor.events.on('contentChanged', handler);
+        }, function () { })
+            .pipe(startWith(this._html), map(function () { return _this.editor.html.get(); }), distinctUntilChanged(), 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(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(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: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
@@ -640,7 +651,7 @@ var FsHtmlEditorComponent = /** @class */ (function () {
     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=\"(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: NG_VALUE_ACCESSOR,
@@ -654,7 +665,7 @@ var FsHtmlEditorComponent = /** @class */ (function () {
                 },
             ],
             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{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, Optional()), __param(0, Inject(FS_HTML_EDITOR_CONFIG)),
         __metadata("design:paramtypes", [Object, ChangeDetectorRef,