@worktile/theia 16.3.13 → 16.3.15

package/fesm2022/worktile-theia.mjs

@@ -24,7 +24,7 @@ import { ThyDropdownDirective, ThyDropdownModule } from 'ngx-tethys/dropdown';
 import * as i8 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
 import { DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ENTER } from '@angular/cdk/keycodes';
-import { fromEvent, Subject, combineLatest, Observable, timer, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
+import { fromEvent, Subject, combineLatest, Observable, timer, firstValueFrom, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
 import { debounceTime, takeUntil, startWith, distinctUntilChanged, skip, map as map$1, share, take, delay, filter, mapTo, pairwise } from 'rxjs/operators';
 import { mixinUnsubscribe, MixinBase, ScrollToService } from 'ngx-tethys/core';
 import { isKeyHotkey } from 'is-hotkey';
@@ -49,7 +49,7 @@ import { ThyColorPickerModule } from 'ngx-tethys/color-picker';
 import { marked } from 'marked';
 import * as i1$3 from 'ngx-tethys/alert';
 import { ThyAlertModule } from 'ngx-tethys/alert';
-import * as i4$1 from 'ngx-tethys/image';
+import * as i1$4 from 'ngx-tethys/image';
 import { ThyImageDirective, ThyImageModule } from 'ngx-tethys/image';
 import { ThyUploadStatus } from 'ngx-tethys/upload';
 import * as i9$1 from 'ngx-tethys/progress';
@@ -5735,6 +5735,9 @@ class TheContextService {
         this.uploadingFiles.push(file);
     }
     removeUploadFile(file) {
+        if (!file) {
+            return;
+        }
         this.uploadingFiles.splice(this.uploadingFiles.findIndex(item => item.url === file.url), 1);
     }
     ngOnDestroy() {
@@ -5800,6 +5803,23 @@ const ImageEditor = {
             file: new File([blob], `${new Date().getTime()}.${ext}`, { type: contentType })
         });
     },
+    handleExternalImageElement(editor, image) {
+        const contextService = editor.injector.get(TheContextService);
+        const imageUploaderService = editor.injector.get(THE_UPLOAD_SERVICE_TOKEN);
+        const isExternalUrl = image?.hasOwnProperty('externalUrl')
+            ? image?.externalUrl
+            : imageUploaderService.isExternalUrl?.(image.thumbUrl);
+        if (isExternalUrl) {
+            const url = image.thumbUrl;
+            image.url = url;
+            image.externalUrl = url;
+            image.thumbUrl = null;
+            contextService.addUploadingFiles({
+                url: image.url,
+                file: image.url
+            });
+        }
+    },
     verifyImage(editor, image) {
         if (!PICTURE_ACCEPTED_UPLOAD_MIME.includes(image.type)) {
             editor.onError({
@@ -5835,20 +5855,6 @@ const ImageEditor = {
     isBase64(url) {
         return isString(url) && url.includes('base64');
     },
-    /**
-     * 设置图片来源
-     * @param editor 编辑器对象
-     * @param image 图片节点
-     */
-    setImageSource(editor, image) {
-        const imageUploaderService = editor.injector.get(THE_UPLOAD_SERVICE_TOKEN);
-        const externalSource = image?.hasOwnProperty('externalSource')
-            ? image?.externalSource
-            : imageUploaderService.isExternalSource?.(image.thumbUrl);
-        if (externalSource) {
-            image.externalSource = externalSource;
-        }
-    },
     removeImage(editor, image) {
         if (image) {
             deleteElement(editor, image);
@@ -6267,11 +6273,11 @@ const MentionEditor = {
             scrollStrategy: overlay.scrollStrategies.reposition(),
             autoAdaptive: true
         });
+        THE_EDITOR_POPOVER_REF.set(editor, popoverRef);
         popoverRef?.afterClosed().subscribe(() => {
             MentionEditor.close(editor);
         });
         MentionEditor.updatePositionStrategy(editor, isSoftBreak);
-        THE_EDITOR_POPOVER_REF.set(editor, popoverRef);
         cdr.markForCheck();
     },
     close(editor) {
@@ -8636,7 +8642,7 @@ const withDeserializeHTML = (editor) => {
                         ImageEditor.handleBase64ImageElement(editor, node);
                     }
                     else {
-                        ImageEditor.setImageSource(editor, node);
+                        ImageEditor.handleExternalImageElement(editor, node);
                     }
                 }
             });
@@ -8750,7 +8756,7 @@ const withDeserializeMd = (editor) => {
                                                     ImageEditor.handleBase64ImageElement(editor, node);
                                                 }
                                                 else {
-                                                    ImageEditor.setImageSource(editor, node);
+                                                    ImageEditor.handleExternalImageElement(editor, node);
                                                 }
                                             }
                                         });
@@ -9142,16 +9148,17 @@ class TheImageComponent extends TheBaseElementComponent {
             ? this.layoutDefaultWidth
             : this.imageEntry.width;
     }
-    constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay, viewContainerRef, imageGroupComponent) {
+    constructor(elementRef, cdr, imageGroupComponent, imageUploaderService, theContextService, thyPopover, overlay, viewContainerRef, destroyRef) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
-        this.imageUploaderService = imageUploaderService;
         this.cdr = cdr;
+        this.imageGroupComponent = imageGroupComponent;
+        this.imageUploaderService = imageUploaderService;
         this.theContextService = theContextService;
         this.thyPopover = thyPopover;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.imageGroupComponent = imageGroupComponent;
+        this.destroyRef = destroyRef;
         this.naturalWidth = 0;
         this.naturalHeight = 0;
         this.imageEntry = {};
@@ -9204,68 +9211,35 @@ class TheImageComponent extends TheBaseElementComponent {
         this.dragable = false;
         this.beforeContextChange = (value) => {
             if (value.element !== this.element && value.element.thumbUrl) {
-                const externalSource = value.element?.externalSource;
                 let thumbUrl = value.element.thumbUrl;
                 let originUrl = value.element.originUrl;
-                if (!externalSource && this.imageUploaderService?.buildImageUrl) {
+                if (this.imageUploaderService?.buildImageUrl) {
                     thumbUrl = this.imageUploaderService.buildImageUrl(thumbUrl);
                     originUrl = this.imageUploaderService.buildImageUrl(originUrl);
                 }
                 this.imageEntry = {
-                    name: value.element.name,
-                    width: value.element.width,
-                    height: value.element.height,
-                    align: value.element.align || Alignment.left,
-                    layout: value.element.layout,
-                    reSized: value.element.reSized || false,
-                    size: value.element.size,
+                    ...value.element,
                     thumbUrl,
-                    originUrl
+                    originUrl,
+                    align: value.element.align || Alignment.left,
+                    reSized: value.element.reSized || false
                 };
                 this.setBlockCardLayoutAttr();
             }
         };
     }
     ngOnInit() {
-        this.fileItem = this.theContextService.uploadingFiles.find(item => item.url === this.element.url);
-        if (this.fileItem?.file && this.fileItem.file instanceof File) {
-            this.uploadImage(this.fileItem.file);
-        }
         super.ngOnInit();
-        this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
-        if (this.imagePluginOptions.disablePreview && typeof this.imagePluginOptions.disablePreview === 'function') {
-            this.disablePreview = this.imagePluginOptions.disablePreview(this.editor);
-        }
-        else {
-            this.disablePreview = this.imagePluginOptions.disablePreview;
+        this.setImageFileItem();
+        if (this.fileItem?.file) {
+            this.uploadImage();
         }
+        this.setImagePluginOptions();
+        this.setDisablePreview();
     }
-    imageClick() {
-        const index = this.imageGroupComponent.images.findIndex(item => item === this.imageDirective);
-        const imageGroup = this.imageGroupComponent.images.map(item => {
-            return {
-                originUrl: item.thyOriginSrc,
-                thumbUrl: item.thyPreviewSrc,
-                name: item.thyImageMeta.name,
-                size: item.thyImageMeta.size
-            };
-        });
-        const { originUrl, thumbUrl, name, size } = this.element;
-        if (this.imagePluginOptions.preview) {
-            this.imagePluginOptions.preview({
-                editor: this.editor,
-                previewImageInfo: {
-                    image: {
-                        originUrl,
-                        thumbUrl,
-                        name,
-                        size
-                    },
-                    imageGroup,
-                    index
-                }
-            });
-        }
+    ngAfterViewInit() {
+        this.subscribeMouseUp();
+        this.subscribeImageUploadingState();
     }
     onContextChange() {
         super.onContextChange();
@@ -9280,18 +9254,35 @@ class TheImageComponent extends TheBaseElementComponent {
     }
     ngOnDestroy() {
         this.uploadingSubscription.unsubscribe();
-        this.mouseUpSubscription.unsubscribe();
         this.theContextService.removeUploadFile(this.fileItem);
         if (this.uploading) {
             this.theContextService.uploadingStatus$.next(false);
         }
         super.ngOnDestroy();
     }
-    ngAfterViewInit() {
-        this.mouseUpSubscription = this.theContextService.onMouseUp$.subscribe(e => this.endDrag(e));
+    setImagePluginOptions() {
+        this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
+    }
+    setDisablePreview() {
+        const { disablePreview } = this.imagePluginOptions;
+        if (disablePreview && typeof disablePreview === 'function') {
+            this.disablePreview = disablePreview(this.editor);
+        }
+        else {
+            this.disablePreview = disablePreview;
+        }
+    }
+    setImageFileItem() {
+        this.fileItem = this.theContextService.uploadingFiles.find(item => item.url === this.element.url);
+    }
+    subscribeMouseUp() {
+        this.theContextService.onMouseUp$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(e => this.endDrag(e));
+    }
+    subscribeImageUploadingState() {
         this.uploadingSubscription = this.imageUploaderService
             .getUploadingItems$()
-            .pipe(map$1(fileUploadingItem => this.fileItem?.file && fileUploadingItem.find(item => item.file === this.fileItem?.file)))
+            .pipe(map$1(fileUploadingItem => this.fileItem?.file &&
+            fileUploadingItem.find(item => item.file === this.fileItem?.file || item?.url === this.fileItem?.file)))
             .subscribe(uploadingItem => {
             if (!uploadingItem || !uploadingItem.result) {
                 return;
@@ -9313,21 +9304,24 @@ class TheImageComponent extends TheBaseElementComponent {
         const data = { type: ElementKinds.image, url: null, ...imageInfo };
         HistoryEditor.withoutSaving(this.editor, () => Transforms.setNodes(this.editor, data, { at: path }));
     }
-    async uploadImage(file) {
-        this.imageEntry = {
-            align: this.imageEntry.align || Alignment.center,
-            thumbUrl: URL.createObjectURL(file)
-        };
+    async uploadImage() {
         this.uploading = true;
+        const file = this.fileItem.file;
+        if (file instanceof File) {
+            this.imageEntry = {
+                align: this.imageEntry.align || Alignment.center,
+                thumbUrl: URL.createObjectURL(file)
+            };
+        }
         this.theContextService.uploadingStatus$.next(true);
-        const [uploadFileEntity] = await this.imageUploaderService.uploadFileHandle([file]).toPromise();
-        const { thumbUrl, originUrl } = uploadFileEntity;
+        const [fileEntity] = await firstValueFrom(this.imageUploaderService.uploadFileHandle(file));
+        const { name, size, thumbUrl, originUrl } = fileEntity;
         const imageInfo = {
-            name: file.name,
+            name,
             thumbUrl,
             originUrl,
-            align: this.imageEntry.align || Alignment.center,
-            size: file.size
+            size,
+            align: this.imageEntry.align || Alignment.center
         };
         this.setImageNodes(imageInfo);
     }
@@ -9519,16 +9513,43 @@ class TheImageComponent extends TheBaseElementComponent {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i4$1.ThyImageGroupComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <div *ngIf=\"uploading\" class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] }); }
+    imageClick() {
+        const index = this.imageGroupComponent.images.findIndex(item => item === this.imageDirective);
+        const imageGroup = this.imageGroupComponent.images.map(item => {
+            return {
+                originUrl: item.thyOriginSrc,
+                thumbUrl: item.thyPreviewSrc,
+                name: item.thyImageMeta.name,
+                size: item.thyImageMeta.size
+            };
+        });
+        const { originUrl, thumbUrl, name, size } = this.element;
+        if (this.imagePluginOptions.preview) {
+            this.imagePluginOptions.preview({
+                editor: this.editor,
+                previewImageInfo: {
+                    image: {
+                        originUrl,
+                        thumbUrl,
+                        name,
+                        size
+                    },
+                    imageGroup,
+                    index
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyImageGroupComponent }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl; else imageLoading\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n</div>\n\n<ng-template #imageLoading>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n\n  <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n</ng-template>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  <div *ngIf=\"uploading\" class=\"uploading\">\n    <div class=\"uploading-percentage\">\n      <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n      <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i1$4.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <div *ngIf=\"uploading\" class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl; else imageLoading\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n</div>\n\n<ng-template #imageLoading>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n\n  <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n</ng-template>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  <div *ngIf=\"uploading\" class=\"uploading\">\n    <div class=\"uploading-percentage\">\n      <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n      <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyImageGroupComponent }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [THE_UPLOAD_SERVICE_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1.ThyPopover }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i4$1.ThyImageGroupComponent }]; }, propDecorators: { imageContent: [{
+                }] }, { type: TheContextService }, { type: i1.ThyPopover }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.DestroyRef }]; }, propDecorators: { imageContent: [{
                 type: ViewChild,
                 args: ['imageContent']
             }], img: [{
@@ -16680,7 +16701,7 @@ class TheEditorComponent {
                 useExisting: forwardRef(() => TheEditorComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!options?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': options?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"options?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!options?.readonly && options?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!options?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!options?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': options?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"options?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!options?.readonly && options?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!options?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$4.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,