fix(module:code-editor): remove overflow styles (#4016)

* fix(module:code-editor): remove overflow styles * docs: add tooltip to the complex demo * refactor: use types imported from monaco editor for better intellisense
NG-ZORRO · Aug 26, 2019 · ab832d9 · ab832d9
1 parent f7ddfbd
commit ab832d9
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 20 deletions.
diff --git a/components/code-editor/demo/complex.ts b/components/code-editor/demo/complex.ts
@@ -1,6 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { Component, Inject, Renderer2, ViewChild } from '@angular/core';
 import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
+import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'nz-demo-code-editor-complex',
@@ -21,6 +22,8 @@ import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
       <i
         nz-icon
         [class.active]="fullScreen"
+        nz-tooltip
+        nzTooltipTitle="Toggle Fullscreen"
         [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
         (click)="toggleFullScreen()"
       ></i>
@@ -46,6 +49,7 @@ import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
 })
 export class NzDemoCodeEditorComplexComponent {
   @ViewChild(NzCodeEditorComponent, { static: false }) editorComponent: NzCodeEditorComponent;
+  @ViewChild(NzTooltipDirective, { static: false }) tooltip: NzTooltipDirective;
 
   loading = true;
   fullScreen = false;
@@ -78,5 +82,6 @@ console.log(flatten(['1', 2, [[3]]]))`;
     this.fullScreen = !this.fullScreen;
     this.renderer.setStyle((this.document as Document).body, 'overflow-y', this.fullScreen ? 'hidden' : null);
     this.editorComponent.layout();
+    this.tooltip.hide();
   }
 }
diff --git a/components/code-editor/demo/module b/components/code-editor/demo/module
@@ -3,5 +3,6 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTypographyModule } from 'ng-zorro-antd/typography'
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzSwitchModule } from 'ng-zorro-antd/switch'
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
-export const moduleList = [ NzCodeEditorModule, NzSpinModule, NzIconModule, NzSwitchModule, NzTypographyModule ];
+export const moduleList = [ NzCodeEditorModule, NzSpinModule, NzIconModule, NzSwitchModule, NzTypographyModule, NzToolTipModule ];
diff --git a/components/code-editor/nz-code-editor.component.ts b/components/code-editor/nz-code-editor.component.ts
@@ -29,24 +29,16 @@ import { inNextTick, warn, InputBoolean } from 'ng-zorro-antd/core';
 import { JoinedEditorOption, NzEditorMode } from './nz-code-editor.definitions';
 import { NzCodeEditorService } from './nz-code-editor.service';
 
-// Avoid import monaco-editor. Otherwise importing `NgZorroAntdModule` would lead to force installation of monaco editor.
-
-// import { editor } from 'monaco-editor';
-// import IEditor = editor.IEditor;
-// import IDiffEditor = editor.IDiffEditor;
-// import ITextModel = editor.ITextModel;
-// import IEditorConstructionOptions = editor.IEditorConstructionOptions;
-// import IDiffEditorConstructionOptions = editor.IDiffEditorConstructionOptions;
-
-// tslint:disable no-any
-type IEditor = any;
-type IDiffEditor = any;
-type ITextModel = any;
-type IEditorConstructionOptions = any;
-type IDiffEditorConstructionOptions = any;
-
+// Import types from monaco editor.
+import { editor } from 'monaco-editor';
+import IEditor = editor.IEditor;
+import IDiffEditor = editor.IDiffEditor;
+import ITextModel = editor.ITextModel;
+import IEditorConstructionOptions = editor.IEditorConstructionOptions;
+import IDiffEditorConstructionOptions = editor.IDiffEditorConstructionOptions;
+
+// tslint:disable-next-line no-any
 declare const monaco: any;
-// tslint:enable no-any
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/components/code-editor/nz-code-editor.definitions.ts b/components/code-editor/nz-code-editor.definitions.ts
@@ -21,7 +21,6 @@ export enum NzCodeEditorLoadingStatus {
   LOADED = 'LOADED'
 }
 
-// TODO: move to config service in the future
 export interface NzCodeEditorConfig {
   assetsRoot?: string | SafeUrl;
   defaultEditorOption?: JoinedEditorOption;

diff --git a/components/code-editor/package.json b/components/code-editor/package.json
@@ -3,5 +3,8 @@
     "lib": {
       "entryFile": "public-api.ts"
     }
+  },
+  "peerDependencies": {
+    "monaco-editor": "^0.14.0"
   }
 }
diff --git a/components/code-editor/style/index.less b/components/code-editor/style/index.less
@@ -6,7 +6,6 @@
 .@{code-editor-prefix-cls} {
   display: block;
   position: relative;
-  overflow: hidden;
   height: 100%;
   width: 100%;
   background-color: @component-background;