@firestitch/html-editor 9.5.4 → 9.5.7

package/fesm2015/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 @@ let FsFroalaLoaderService = class FsFroalaLoaderService {
         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(([FroalaReady, pluginsRead]) => {
             return pluginsRead && FroalaReady;
         }), shareReplay(1));
@@ -148,8 +148,8 @@ let FsFroalaLoaderService = class FsFroalaLoaderService {
         }
         this._load();
     }
-    get ready$() {
-        return this._ready$;
+    get loaded$() {
+        return this._loaded$;
     }
     get ready() {
         return this._froalaLoaded.getValue() && this._defaultPluginsLoaded.getValue();
@@ -212,6 +212,7 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
         this.config = {};
         this.initialized = false;
         this._initialize$ = new ReplaySubject();
+        this._froalaReady$ = new BehaviorSubject(null);
         this._destroy$ = new Subject();
         this.onChange = (data) => { };
         this.onTouched = () => { };
@@ -225,8 +226,8 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
     get editor() {
         return this._editor;
     }
-    get froalaReady$() {
-        return this._fr.ready$;
+    get froalaLoaded$() {
+        return this._fr.loaded$;
     }
     ngOnInit() {
         this.config = this.config || {};
@@ -251,94 +252,9 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
     initialize(options = {}) {
         const 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(), () => {
-            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', () => {
-                this.classFocused = true;
-                this._cdRef.markForCheck();
-            });
-            this._editor.events.on('blur', () => {
-                this.classFocused = false;
-                this._cdRef.markForCheck();
-            });
-            this._editor.events.on('contentChanged', () => {
-                this._contentChanged();
-            });
-            this._editor.events.on('paste.afterCleanup', (html) => {
-                var div = document.createElement('div');
-                div.innerHTML = html;
-                div.querySelectorAll('*')
-                    .forEach((el) => {
-                    for (var i = 0; i < el.attributes.length; i++) {
-                        const name = el.attributes[0].name;
-                        if (name !== 'href') {
-                            el.removeAttribute(name);
-                        }
-                    }
-                });
-                return div.innerHTML;
-            });
-            this._editor.events.on('keydown', () => {
-                this.onTouched();
-            });
-            if (this.config.image && this.config.image.upload) {
-                this._editor.events.on('image.beforePasteUpload', (image) => {
-                    fetch(image.getAttribute('src'))
-                        .then((res) => {
-                        res.blob()
-                            .then((blob) => {
-                            this._processImageUpload(blob)
-                                .pipe(takeUntil(this._destroy$))
-                                .subscribe((url) => {
-                                image.setAttribute('src', url);
-                                image.removeAttribute('data-fr-image-pasted');
-                                this._contentChanged();
-                            });
-                        });
-                    });
-                    return false;
-                });
-                this._editor.events.on('image.beforeUpload', (blobs) => {
-                    this._processImageUpload(blobs[0])
-                        .pipe(takeUntil(this._destroy$))
-                        .subscribe((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();
-            }
-            const selection = options.selection;
-            if (selection) {
-                const node = Array.from(this.el.querySelectorAll('.fr-element *')).find((node) => {
-                    return selection.node === node.textContent;
-                });
-                if (node) {
-                    const range = document.createRange();
-                    const 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, options });
         });
     }
     _processImageUpload(blob) {
@@ -423,21 +339,14 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
     }
     writeValue(html) {
         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(() => {
-            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();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -463,7 +372,7 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
         return merge({ froalaConfig: {} }, this._defaultConfig, this.config);
     }
     _change(html) {
-        this._html = html;
+        // this._html = html;
         this.onChange(html);
     }
     _initPlugins(config) {
@@ -557,9 +466,8 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
         }, config.froalaConfig);
     }
     _listenLazyInit() {
-        this.froalaReady$
-            .pipe(filter((ready) => ready), switchMap(() => this._initialize$))
-            .subscribe(() => {
+        this.froalaLoaded$
+            .pipe(filter((ready) => ready), switchMap(() => this._initialize$), tap(() => {
             const selection = window.getSelection();
             const options = {};
             if (selection.baseNode) {
@@ -569,7 +477,10 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
                 };
             }
             this.initialize(options);
-        });
+        }), switchMap(() => this._froalaReady$), filter((data) => !!data), tap(({ config, options }) => {
+            this._setupFroala(config, options);
+        }))
+            .subscribe();
     }
     _contentChanged() {
         const editorHTML = this._editor.html.get();
@@ -577,6 +488,105 @@ let FsHtmlEditorComponent = FsHtmlEditorComponent_1 = class FsHtmlEditorComponen
             this._change(editorHTML);
         }
     }
+    _setupFroala(config, options) {
+        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', () => {
+            this.classFocused = true;
+            this._cdRef.markForCheck();
+        });
+        this._editor.events.on('blur', () => {
+            this.classFocused = false;
+            this._cdRef.markForCheck();
+        });
+        fromEventPattern((handler) => {
+            this._editor.events.on('contentChanged', handler);
+        }, () => { })
+            .pipe(startWith(this._html), map(() => this.editor.html.get()), distinctUntilChanged(), skip(1))
+            .subscribe(() => {
+            this._contentChanged();
+        });
+        // this._editor.events.on('contentChanged', () => {
+        //   console.log('test');
+        //   if (!this._firstChange) {
+        //     this._contentChanged();
+        //   }
+        // });
+        this._editor.events.on('paste.afterCleanup', (html) => {
+            var div = document.createElement('div');
+            div.innerHTML = html;
+            div.querySelectorAll('*')
+                .forEach((el) => {
+                for (var i = 0; i < el.attributes.length; i++) {
+                    const name = el.attributes[0].name;
+                    if (name !== 'href') {
+                        el.removeAttribute(name);
+                    }
+                }
+            });
+            return div.innerHTML;
+        });
+        this._editor.events.on('keydown', () => {
+            this.onTouched();
+        });
+        if (this.config.image && this.config.image.upload) {
+            this._editor.events.on('image.beforePasteUpload', (image) => {
+                fetch(image.getAttribute('src'))
+                    .then((res) => {
+                    res.blob()
+                        .then((blob) => {
+                        this._processImageUpload(blob)
+                            .pipe(takeUntil(this._destroy$))
+                            .subscribe((url) => {
+                            image.setAttribute('src', url);
+                            image.removeAttribute('data-fr-image-pasted');
+                            this._contentChanged();
+                        });
+                    });
+                });
+                return false;
+            });
+            this._editor.events.on('image.beforeUpload', (blobs) => {
+                this._processImageUpload(blobs[0])
+                    .pipe(takeUntil(this._destroy$))
+                    .subscribe((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();
+        }
+        const selection = options.selection;
+        if (selection) {
+            const node = Array.from(this.el.querySelectorAll('.fr-element *')).find((node) => {
+                return selection.node === node.textContent;
+            });
+            if (node) {
+                const range = document.createRange();
+                const 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();
+        }
+    }
 };
 FsHtmlEditorComponent.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_HTML_EDITOR_CONFIG,] }] },
@@ -602,7 +612,7 @@ __decorate([
 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,
@@ -616,7 +626,7 @@ FsHtmlEditorComponent = FsHtmlEditorComponent_1 = __decorate([
             },
         ],
         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,