@worktile/theia 13.0.0 → 13.0.1

package/fesm2015/worktile-theia.mjs

@@ -2779,6 +2779,8 @@ class TheImageComponent extends TheBaseElementComponent {
         this.overlay = overlay;
         this.thyImageService = thyImageService;
         this.viewContainerRef = viewContainerRef;
+        this.naturalWidth = 0;
+        this.naturalHeight = 0;
         this.imageEntry = {};
         this.uploading = false;
         this.percentage = 0;
@@ -2844,6 +2846,12 @@ class TheImageComponent extends TheBaseElementComponent {
     get isOpen() {
         return this.layoutToolbarRef && this.layoutToolbarRef.getOverlayRef() && this.layoutToolbarRef.getOverlayRef().hasAttached();
     }
+    get imageBindingWidth() {
+        var _a, _b, _c;
+        return ((_a = this.imageEntry) === null || _a === void 0 ? void 0 : _a.layout) && ((_b = this.imageEntry) === null || _b === void 0 ? void 0 : _b.width) > this.layoutDefaultWidth && !((_c = this.imageEntry) === null || _c === void 0 ? void 0 : _c.reSized)
+            ? this.layoutDefaultWidth
+            : this.imageEntry.width;
+    }
     ngOnInit() {
         var _a;
         this.layoutDefaultWidth = this.theContextService.layoutDefaultWidth();
@@ -2897,10 +2905,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
     uploadImage(file) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { width, height } = yield this.resolveImageSize(file, this.theContextService.getOptions().width);
             this.imageEntry = {
-                height,
-                width,
                 align: this.imageEntry.align || Alignment.center,
                 thumbUrl: this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(file))
             };
@@ -2910,8 +2915,6 @@ class TheImageComponent extends TheBaseElementComponent {
             const { thumbUrl, originUrl } = uploadFileEntity;
             const imageInfo = {
                 name: file.name,
-                width: this.imageEntry.width,
-                height: this.imageEntry.height,
                 thumbUrl,
                 originUrl,
                 align: this.imageEntry.align || Alignment.center
@@ -2919,20 +2922,6 @@ class TheImageComponent extends TheBaseElementComponent {
             this.setImageNodes(imageInfo);
         });
     }
-    resolveImageSize(imageFile, maxSize) {
-        const image = new Image();
-        return new Promise(resolve => {
-            image.onload = () => {
-                const imageHeight = image.height;
-                const imageWidth = image.width;
-                const ratio = imageWidth > maxSize ? imageWidth / maxSize : false;
-                const height = ratio ? imageHeight / ratio : imageHeight;
-                const width = ratio ? imageWidth / ratio : imageWidth;
-                resolve({ height, width });
-            };
-            image.src = URL.createObjectURL(imageFile);
-        });
-    }
     startDrag(event, axis) {
         event.preventDefault();
         this.dragable = true;
@@ -2996,8 +2985,7 @@ class TheImageComponent extends TheBaseElementComponent {
             if (!this.imageEntry.reSized && this.imageEntry.width !== width) {
                 this.imageEntry.reSized = true;
             }
-            this.imageContent.nativeElement.style.width = width + 'px';
-            this.imageContent.nativeElement.style.height = height + 'px';
+            this.img.nativeElement.style.width = width + 'px';
             this.imageEntry.width = width;
             this.imageEntry.height = height;
         }
@@ -3006,6 +2994,12 @@ class TheImageComponent extends TheBaseElementComponent {
         if (this.dragable) {
             this.dragable = false;
             this.mouseMoveSubscription.unsubscribe();
+            if (this.imageEntry.width === this.theContextService.getOptions().width &&
+                this.imageEntry.width <= this.naturalWidth &&
+                this.element.width) {
+                this.imageEntry.width = null;
+                this.imageEntry.height = null;
+            }
             Transforms.setNodes(this.editor, Object.assign({ type: ElementKinds.image }, this.imageEntry), { at: this.selection });
         }
     }
@@ -3111,12 +3105,17 @@ class TheImageComponent extends TheBaseElementComponent {
             .withPush(false)
             .withPositions([bottomPosition]);
     }
+    imageLoaded(event) {
+        const img = event.target;
+        this.naturalWidth = img.naturalWidth;
+        this.naturalHeight = img.naturalHeight;
+    }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i5$1.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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 }], 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\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i7.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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 }], 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\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\">\n        <img #img [ngStyle]=\"{'width.px': imageBindingWidth}\" class=\"main-image\" (load)=\"imageLoaded($event)\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i7.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$2.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", 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\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n" }]
+            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\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\">\n        <img #img [ngStyle]=\"{'width.px': imageBindingWidth}\" class=\"main-image\" (load)=\"imageLoaded($event)\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\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\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }, { type: undefined, decorators: [{
                         type: Inject,
@@ -9229,7 +9228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
     } });
 
 class TheTableComponent extends TheBaseElementComponent {
-    constructor(elementRef, eventDispatcher, resizeNotifier, tableStore, cdr, ngZone, tableService, theContextService, theTableContextMenuService) {
+    constructor(elementRef, eventDispatcher, resizeNotifier, tableStore, cdr, ngZone, tableService, theTableContextMenuService) {
         super(elementRef, cdr);
         this.eventDispatcher = eventDispatcher;
         this.resizeNotifier = resizeNotifier;
@@ -9237,14 +9236,13 @@ class TheTableComponent extends TheBaseElementComponent {
         this.cdr = cdr;
         this.ngZone = ngZone;
         this.tableService = tableService;
-        this.theContextService = theContextService;
         this.theTableContextMenuService = theTableContextMenuService;
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
     }
     get columns() {
-        return this.normalizedColumns || (this.element && this.element.columns);
+        return this.element && this.element.columns;
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -9277,9 +9275,6 @@ class TheTableComponent extends TheBaseElementComponent {
             });
             this.getIsInTable();
             this.getColControls();
-            if (this.normalizedColumns) {
-                this.normalizeShowColumns();
-            }
         }
     }
     ngOnInit() {
@@ -9287,6 +9282,12 @@ class TheTableComponent extends TheBaseElementComponent {
         this.getColControls();
         this.getIsInTable();
     }
+    getWrapperWidth() {
+        const tableContainer = this.nativeElement.firstChild;
+        const paddingLeft = coercePixelsFromCssValue(window.getComputedStyle(tableContainer)['paddingLeft']);
+        const width = tableContainer.offsetWidth - paddingLeft;
+        return width;
+    }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => __awaiter(this, void 0, void 0, function* () {
             var _a;
@@ -9298,7 +9299,6 @@ class TheTableComponent extends TheBaseElementComponent {
             this.subscribeCellsChange();
             this.subscribeCellPositionChange();
             this.listenTableContextMenuEvent();
-            this.useTableWrapperWidth();
             if ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) {
                 const loadImageDone = yield this.resolveImage();
                 // 等待序号列表格内图片加载完成后再去渲染表格行高度
@@ -9321,17 +9321,6 @@ class TheTableComponent extends TheBaseElementComponent {
             this.cdr.detectChanges();
         });
     }
-    useTableWrapperWidth() {
-        const rootWidth = this.theContextService.getOptions().width;
-        const tablePath = TheEditor.findPath(this.editor, this.element);
-        if (tablePath.length > 1) {
-            // 解决table不在顶层时，拖动单元格宽度计算问题
-            this.theTableWrapperWidth = this.tableWrapper.nativeElement.offsetWidth;
-        }
-        else {
-            this.theTableWrapperWidth = rootWidth;
-        }
-    }
     subscribeCellsChange() {
         this.tableStore
             .dangerousOrSelectedCellsChange()
@@ -9491,33 +9480,19 @@ class TheTableComponent extends TheBaseElementComponent {
             this.isInTable = false;
         }
     }
-    normalizeShowColumns() {
-        const table = this.element;
-        const tr = table.children[0];
+    initializeColumns() {
         if (this.element.columns) {
-            let isGood = true;
-            this.normalizedColumns = table.columns.map(item => {
-                return Object.assign({}, item);
+            const columns = [];
+            this.tableWrapper.nativeElement.querySelectorAll('col').forEach((ele) => {
+                columns.push({ width: ele.clientWidth });
             });
-            if (this.element.columns.length !== tr.children.length) {
-                this.normalizedColumns = tr.children.map((item, i) => this.columns[i] || { width: 200 });
-                isGood = false;
-            }
-            const totalWidth = this.normalizedColumns.reduce((pre, cur) => {
-                return pre + cur.width;
-            }, 0);
-            if (totalWidth < this.theTableWrapperWidth) {
-                const lastColumnWidth = this.theTableWrapperWidth - totalWidth + this.normalizedColumns[this.normalizedColumns.length - 1].width;
-                this.normalizedColumns[this.normalizedColumns.length - 1] = { width: lastColumnWidth };
-                isGood = false;
-            }
-            if (isGood) {
-                this.normalizedColumns = null;
+            // Editor container width changes, resulting in column widths no longer valid #WIK-6766
+            const warning = this.element.columns.some((col, index) => { var _a; return col.width !== ((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.width); });
+            if (warning) {
+                setNode(this.editor, { columns }, this.element);
             }
         }
-    }
-    initializeColumns() {
-        if (!this.element.columns) {
+        else {
             const tr = this.element.children[0];
             const tableWidth = AngularEditor.toDOMNode(this.editor, tr).offsetWidth;
             const columns = tr.children.map(cell => {
@@ -9626,7 +9601,7 @@ class TheTableComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheContextService }, { token: TheTableContextMenuService }], target: i0.ɵɵFactoryTarget.Component });
+TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }], target: i0.ɵɵFactoryTarget.Component });
 TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
         TableStore,
         TableService,
@@ -9651,7 +9626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             useExisting: TheTableComponent
                         }
                     ], template: "<!-- \u7C7B\u540D the-temp-*: \u4E34\u65F6\u89E3\u51B3\u56E0\u53D7portal\u5F71\u54CD\u8868\u683C\u6837\u5F0F\u95EE\u9898\uFF0C\u540E\u671F\u6539\u56DEthe-* -->\n<div\n    class=\"the-temp-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-temp-table-with-controls': isInTable,\n        'the-temp-numbered-column-container': element?.options?.numberedColumn,\n        'the-temp-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-temp-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-temp-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-temp-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                active: isSelectedAllCell,\n                dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n            }\"\n        >\n            <div class=\"the-temp-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n            <div class=\"the-temp-table-corner-controls-insert-row-marker\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-temp-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-temp-table-row-controls\">\n            <div class=\"the-temp-table-row-controls-inner\">\n                <div\n                    class=\"the-temp-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-temp-table-row-controls-button the-temp-table-controls-button\"\n                        ></button>\n                    </ng-container>\n                    <ng-container *ngIf=\"element?.options?.numberedColumn\">\n                        <div\n                            [contentEditable]=\"false\"\n                            contenteditable=\"false\"\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            class=\"the-temp-table-numbered-controls-button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                        >\n                            <p class=\"row-number d-flex align-items-center\">{{ i + 1 }}</p>\n                        </div>\n                    </ng-container>\n                    <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-temp-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-temp-table-numbered': element?.options?.numberedColumn }\">\n        <table class=\"the-temp-table\" #theTable [ngClass]=\"{ 'the-temp-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-temp-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-temp-table-col-controls\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark *ngIf=\"isInTable\" type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\">\n                        </the-table-insert-mark>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TableService }, { type: TheContextService }, { type: TheTableContextMenuService }]; }, propDecorators: { tableWrapper: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TableService }, { type: TheTableContextMenuService }]; }, propDecorators: { tableWrapper: [{
                 type: ViewChild,
                 args: ['tableWrapper', { read: ElementRef, static: true }]
             }], theTableElement: [{
@@ -10142,11 +10117,6 @@ class TheTdComponent extends TheBaseElementComponent {
     get resizeNotifier() {
         return this.tableComponent.resizeNotifier;
     }
-    get theTableWrapperWidth() {
-        const tableContainer = this.tableComponent.nativeElement.firstChild;
-        const paddingLeft = coercePixelsFromCssValue(window.getComputedStyle(tableContainer)['paddingLeft']);
-        return this.tableComponent.theTableWrapperWidth - paddingLeft;
-    }
     get tableElement() {
         return this.tableComponent.theTableElement.nativeElement;
     }
@@ -10599,7 +10569,7 @@ class TheTdComponent extends TheBaseElementComponent {
                 }
             }
             else {
-                const scrollWidth = getElementWidth(this.tableElement) - this.theTableWrapperWidth;
+                const scrollWidth = getElementWidth(this.tableElement) - this.tableComponent.getWrapperWidth();
                 if (scrollWidth > 0) {
                     if (scrollWidth > Math.abs(deltaX)) {
                         this.applyLeftCols(cols, deltaX, cellIndex);
@@ -12296,6 +12266,8 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
     constructor(thyPopover) {
         super();
         this.thyPopover = thyPopover;
+        this.defaultColorLine = '#FF0100';
+        this.defaultBackgroundColorLine = '#FFDA00';
     }
     get isOpenColorSelect() {
         return this.colorSelectRef && this.colorSelectRef.componentInstance;
@@ -12359,7 +12331,11 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             thyTooltipPlacement="top"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="toolbarItem.icon" thyIconType="twotone" [thyTwotoneColor]="active"></thy-icon>
+            <thy-icon
+                [thyIconName]="toolbarItem.icon"
+                thyIconType="twotone"
+                [thyTwotoneColor]="active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)"
+            ></thy-icon>
             <thy-icon
                 [ngClass]="{
                     'link-down-icon': true,
@@ -12386,7 +12362,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             thyTooltipPlacement="top"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="toolbarItem.icon" thyIconType="twotone" [thyTwotoneColor]="active"></thy-icon>
+            <thy-icon
+                [thyIconName]="toolbarItem.icon"
+                thyIconType="twotone"
+                [thyTwotoneColor]="active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)"
+            ></thy-icon>
             <thy-icon
                 [ngClass]="{
                     'link-down-icon': true,