@worktile/theia 1.2.20 → 2.1.1

package/bundles/worktile-theia.umd.js

@@ -6932,14 +6932,12 @@
             _this.config = config;
             _this.startRenderCodemirror = false;
             _this.dropdownMode = exports.DropdownMode;
-            _this.codeMirrorFocused = false;
             _this.maxHeight = _this.config.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
             _this.menus = CODE_MODES.map(function (item) {
                 return { key: item.value, name: item.showName };
             });
             _this.ToolbarItemMode = exports.ToolbarItemMode;
-            _this.isAutoWrap = false;
-            _this.isResizing = false;
+            _this.isFocusCode = false;
             _this.resizeHeight = null;
             _this.options = {
                 mode: _this.menus[0].key,
@@ -6955,7 +6953,7 @@
             _this.onChangeLangulage = function (item) {
                 _this.options = Object.assign(Object.assign({}, _this.options), { mode: item.key });
                 _this.actives = item;
-                CodeEditor.setCodeAttribute(_this.editor, _this.element, { langulage: item.key });
+                CodeEditor.setCodeAttribute(_this.editor, _this.element, { language: item.key });
             };
             return _this;
         }
@@ -6966,11 +6964,6 @@
             enumerable: false,
             configurable: true
         });
-        TheCodeComponent.prototype.handleCodeMousedown = function (event) {
-            if (!(event.target instanceof HTMLElement && this.elementRef.nativeElement.contains(event.target))) {
-                this.codeMirrorFocused = false;
-            }
-        };
         TheCodeComponent.prototype.onContextChange = function () {
             _super.prototype.onContextChange.call(this);
             if (this.initialized) {
@@ -6980,8 +6973,14 @@
                 if (this.options.mode !== this.element.language) {
                     this.useMode();
                 }
-                if (!this.readonly && this.isCollapsed) {
-                    this.initializeCodemirrorFocus();
+                if (this.options.lineWrapping !== this.element.autoWrap) {
+                    this.useAutoWrap();
+                }
+                if (this.resizeHeight !== this.element.height) {
+                    this.useHeight();
+                }
+                if (!this.isCollapsed) {
+                    this.isFocusCode = false;
                 }
             }
         };
@@ -7009,10 +7008,6 @@
                 });
             }
         };
-        TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
-            if (codeMirrorFocused)
-                this.codeMirrorFocused = codeMirrorFocused;
-        };
         TheCodeComponent.prototype.renderCodemirror = function () {
             this.startRenderCodemirror = true;
             this.useReadonly();
@@ -7023,7 +7018,7 @@
         };
         TheCodeComponent.prototype.initializeCodemirrorFocus = function () {
             var _this = this;
-            if (this.isCollapsed && !this.isResizing) {
+            if (this.isCollapsed) {
                 setTimeout(function () {
                     if (_this.isCollapsed && _this.codemirror && _this.codemirror.editor && !_this.codemirror.editor.hasFocus()) {
                         i1.AngularEditor.blur(_this.editor);
@@ -7038,7 +7033,7 @@
         };
         TheCodeComponent.prototype.onDelete = function (event) {
             event.preventDefault();
-            this.codeMirrorFocused = false;
+            this.isFocusCode = false;
             deleteElement(this.editor, this.element);
         };
         TheCodeComponent.prototype.onCopy = function (event) {
@@ -7054,7 +7049,10 @@
             document.execCommand('copy');
             this.thyNotifyService.success('复制成功');
             i1.AngularEditor.deselect(this.editor);
-            this.codeMirrorFocused = false;
+        };
+        TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
+            if (codeMirrorFocused)
+                this.isFocusCode = codeMirrorFocused;
         };
         TheCodeComponent.prototype.useMode = function () {
             var _this = this;
@@ -7062,11 +7060,7 @@
             this.actives = this.menus.find(function (i) { return i.key === _this.element.language; });
         };
         TheCodeComponent.prototype.useAutoWrap = function () {
-            if (this.element.autoWrap) {
-                this.cdr.detectChanges();
-                this.isAutoWrap = this.element.autoWrap;
-                this.codemirror.setOptionIfChanged('lineWrapping', this.element.autoWrap);
-            }
+            this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: this.element.autoWrap || false });
         };
         TheCodeComponent.prototype.useHeight = function () {
             if (this.element.height) {
@@ -7080,25 +7074,20 @@
         TheCodeComponent.prototype.onResize = function (_a) {
             var height = _a.height;
             this.resizeHeight = height;
-            slate.Transforms.select(this.editor, i1.AngularEditor.findPath(this.editor, this.element));
-            CodeEditor.setCodeAttribute(this.editor, this.element, { height: height });
             this.maxHeight = height;
         };
-        TheCodeComponent.prototype.onStartResize = function () {
-            this.isResizing = true;
-        };
         TheCodeComponent.prototype.onEndResize = function () {
-            this.isResizing = false;
+            slate.Transforms.select(this.editor, i1.AngularEditor.findPath(this.editor, this.element));
+            CodeEditor.setCodeAttribute(this.editor, this.element, { height: this.resizeHeight });
         };
         TheCodeComponent.prototype.onChangeWrap = function (value) {
-            i1.AngularEditor.deselect(this.editor);
-            this.codemirror.setOptionIfChanged('lineWrapping', value);
+            this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: value || false });
             CodeEditor.setCodeAttribute(this.editor, this.element, { autoWrap: value ? value : null });
         };
         return TheCodeComponent;
     }(TheBaseElementComponent));
     TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", host: { listeners: { "document: mousedown": "handleCodeMousedown($event)" } }, viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"isAutoWrap\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div\n    thyResizable\n    [thyMinHeight]=\"42\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeStart)=\"onStartResize()\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"codeMirrorFocused && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isFocusCode && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div\n    thyResizable\n    [thyMinHeight]=\"42\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isFocusCode && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7114,9 +7103,6 @@
         }, propDecorators: { codemirror: [{
                     type: i0.ViewChild,
                     args: ['codemirror', { read: i8.CodeMirrorComponent, static: false }]
-                }], handleCodeMousedown: [{
-                    type: i0.HostListener,
-                    args: ['document: mousedown', ['$event']]
                 }] } });
 
     var withCode = function (editor) {