forked from NG-ZORRO/ng-zorro-antd
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:code-editor): add code editor component (NG-ZORRO#3706)
* feat(module:code-editor): add component * docs: change docs * fix: remove style export in primary entrance
- Loading branch information
Showing
29 changed files
with
1,055 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 0 | ||
title: | ||
zh-CN: 基本 | ||
en-US: Basic | ||
--- | ||
|
||
## zh-CN | ||
|
||
最简单的用法。 | ||
|
||
## en-US | ||
|
||
The simplest usage. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-code-editor-basic', | ||
template: ` | ||
<nz-code-editor class="editor" [ngModel]="code" [nzEditorOption]="{ language: 'typescript' }"></nz-code-editor> | ||
`, | ||
styles: [ | ||
` | ||
.editor { | ||
height: 200px; | ||
} | ||
` | ||
] | ||
}) | ||
export class NzDemoCodeEditorBasicComponent { | ||
code = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor' | ||
@Component({}) | ||
export class SomeComponent {}`; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 4 | ||
title: | ||
zh-CN: 复杂 | ||
en-US: Complex | ||
--- | ||
|
||
## zh-CN | ||
|
||
带加载效果和工具条的更复杂的例子。 | ||
|
||
## en-US | ||
|
||
A more complex demo with loading effect and toolkit. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import { DOCUMENT } from '@angular/common'; | ||
import { Component, Inject, Renderer2, ViewChild } from '@angular/core'; | ||
import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-code-editor-complex', | ||
template: ` | ||
<p nz-paragraph style="margin-bottom: 8px;"> | ||
Loading | ||
<nz-switch [(ngModel)]="loading"></nz-switch> | ||
</p> | ||
<nz-code-editor | ||
class="editor" | ||
[class.full-screen]="fullScreen" | ||
[ngModel]="code" | ||
[nzLoading]="loading" | ||
[nzToolkit]="toolkit" | ||
[nzEditorOption]="{ language: 'javascript' }" | ||
></nz-code-editor> | ||
<ng-template #toolkit> | ||
<i | ||
nz-icon | ||
[class.active]="fullScreen" | ||
[nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'" | ||
(click)="toggleFullScreen()" | ||
></i> | ||
</ng-template> | ||
`, | ||
styles: [ | ||
` | ||
.editor { | ||
height: 200px; | ||
} | ||
.full-screen { | ||
position: fixed; | ||
z-index: 999; | ||
height: 100vh; | ||
left: 0; | ||
top: 0; | ||
bottom: 0; | ||
right: 0; | ||
} | ||
` | ||
] | ||
}) | ||
export class NzDemoCodeEditorComplexComponent { | ||
@ViewChild(NzCodeEditorComponent, { static: false }) editorComponent: NzCodeEditorComponent; | ||
|
||
loading = true; | ||
fullScreen = false; | ||
code = `function flatten(arr) { | ||
if (!(arr instanceof Array)) { | ||
throw new Error('The parameter must be an array.'); | ||
} | ||
function partial(arr_) { | ||
return arr_.reduce((previous, current) => { | ||
if (current instanceof Array) { | ||
previous.push(...partial(current)); | ||
return previous; | ||
} else { | ||
previous.push(current); | ||
return previous; | ||
} | ||
}, []); | ||
} | ||
return partial(arr); | ||
} | ||
console.log(flatten(['1', 2, [[3]]]))`; | ||
|
||
// tslint:disable-next-line no-any | ||
constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2) {} | ||
|
||
toggleFullScreen(): void { | ||
this.fullScreen = !this.fullScreen; | ||
this.renderer.setStyle((this.document as Document).body, 'overflow-y', this.fullScreen ? 'hidden' : null); | ||
this.editorComponent.layout(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 2 | ||
title: | ||
zh-CN: 修改配置 | ||
en-US: Change Config | ||
--- | ||
|
||
## zh-CN | ||
|
||
可以在运行时修改编辑器的默认配置,和页面上编辑器的配置。 | ||
|
||
## en-US | ||
|
||
You can change default options and options of existing editors at runtime. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { Component } from '@angular/core'; | ||
import { NzCodeEditorService } from 'ng-zorro-antd/code-editor'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-code-editor-config', | ||
template: ` | ||
<p nz-paragraph style="margin-bottom: 8px;"> | ||
Change Theme | ||
<nz-switch | ||
[ngModel]="dark" | ||
(ngModelChange)="onDarkModeChange($event)" | ||
[nzUnCheckedChildren]="unchecked" | ||
[nzCheckedChildren]="checked" | ||
></nz-switch> | ||
</p> | ||
<ng-template #unchecked> | ||
<i nz-icon nzType="bulb"></i> | ||
</ng-template> | ||
<ng-template #checked> | ||
<i nz-icon nzType="poweroff"></i> | ||
</ng-template> | ||
<nz-code-editor style="height: 200px" [ngModel]="code" [nzEditorOption]="{ language: 'markdown' }"></nz-code-editor> | ||
` | ||
}) | ||
export class NzDemoCodeEditorConfigComponent { | ||
dark = false; | ||
|
||
code = `**All monaco editor instances on the same page always have the same color. It's a by-design of monaco editor.** | ||
You can refer to [this issue](https://github.com/Microsoft/monaco-editor/issues/338).`; | ||
|
||
constructor(private nzCodeEditorService: NzCodeEditorService) {} | ||
|
||
onDarkModeChange(dark: boolean): void { | ||
this.dark = dark; | ||
this.nzCodeEditorService.updateDefaultOption({ theme: dark ? 'vs-dark' : 'vs' }); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 1 | ||
title: | ||
zh-CN: Diff 编辑器 | ||
en-US: Diff Editor | ||
--- | ||
|
||
## zh-CN | ||
|
||
使用 diff 模式。 | ||
|
||
## en-US | ||
|
||
Use diff editor mode. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-code-editor-diff', | ||
template: ` | ||
<nz-code-editor | ||
class="editor" | ||
[nzOriginalText]="originalCode" | ||
[nzEditorMode]="'diff'" | ||
[ngModel]="code" | ||
[nzEditorOption]="{ language: 'typescript' }" | ||
></nz-code-editor> | ||
`, | ||
styles: [ | ||
` | ||
.editor { | ||
height: 200px; | ||
} | ||
` | ||
] | ||
}) | ||
export class NzDemoCodeEditorDiffComponent { | ||
originalCode = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'; | ||
@Component({}) | ||
export class SomeComponent {}`; | ||
|
||
code = `import { NzCodeEditorModule } from 'ng-zorro-antd'; | ||
@Component({}) | ||
export class SomeComponent {}`; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 3 | ||
title: | ||
zh-CN: 完全受控模式 | ||
en-US: Full Control Mode | ||
--- | ||
|
||
## zh-CN | ||
|
||
使用完全受控模式,自行管理 monaco editor 的 TextModel。 | ||
|
||
## en-US | ||
|
||
Use full control mode and mangage TextModel of monaco editor by yourself. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
// tslint:disable-next-line no-any | ||
declare const monaco: any; | ||
|
||
@Component({ | ||
selector: 'nz-demo-code-editor-full-control', | ||
template: ` | ||
<nz-code-editor class="editor" [nzFullControl]="true" (nzEditorInitialized)="onEditorInit($event)"></nz-code-editor> | ||
`, | ||
styles: [ | ||
` | ||
.editor { | ||
height: 200px; | ||
} | ||
` | ||
] | ||
}) | ||
export class NzDemoCodeEditorFullControlComponent { | ||
// tslint:disable-next-line no-any | ||
editor: any; | ||
|
||
code = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor' | ||
@Component({}) | ||
export class SomeComponent {}`; | ||
|
||
// tslint:disable-next-line no-any | ||
onEditorInit(e: any): void { | ||
this.editor = e; | ||
this.editor.setModel(monaco.editor.createModel("console.log('Hello ng-zorro-antd')", 'typescript')); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'; | ||
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' | ||
|
||
export const moduleList = [ NzCodeEditorModule, NzSpinModule, NzIconModule, NzSwitchModule, NzTypographyModule ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
--- | ||
category: Components | ||
type: Date Entry | ||
title: Code Editor | ||
cols: 1 | ||
experimental: true | ||
--- | ||
|
||
Support monaco editor in Angular. | ||
|
||
## When To Use | ||
|
||
- When you want to use monaco editor in Angular. | ||
|
||
## API | ||
|
||
Before using this component, you should load resources of monaco editor itself. You can load these resources with Angular CLI. Write this configuration in angular.json: | ||
|
||
```diff | ||
"assets": [ | ||
+ { | ||
+ "glob": "**/*", | ||
+ "input": "./node_modules/monaco-editor/min/vs", | ||
+ "output": "/assets/vs/" | ||
+ } | ||
], | ||
``` | ||
|
||
Or you can provide an `assetsRoot` to determine where should the component load resources of monaco editor. | ||
|
||
And don't forget to install `monaco-editor`. | ||
|
||
```sh | ||
npm install monaco-editor | ||
``` | ||
|
||
### nz-code-editor | ||
|
||
| Parameter | Description | Type | Default | | ||
| --- | --- | --- | --- | | ||
| `[nzEditorMode]` | Mode of monaco editor | `normal`\|`diff` | `normal` | | ||
| `[nzLoading]` | Show the loading spin | `boolean` | `false` | | ||
| `[nzOriginalText]` | The content of the left editor in `diff` mode | `boolean` | `false` | | ||
| `[nzFullControl]` | Enable full control mode. User should manage `TextModel` manually in this mode | `boolean` | `false` | | ||
| `[nzEditorOption]` | [Please refer to the doc of monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` | | ||
| `[nzToolkit]` | A placeholder for adding some quick actions | `TemplateRef<void>` | - | | ||
| `(nzEditorInitialized)` | The event that a code editor is initialized | `IEditor` \| `IDiffEditor` | - | | ||
|
||
#### Methods | ||
|
||
| Method | Description | | ||
| --- | --- | | ||
| `layout()` | Force monaco editor to re-render itself | | ||
|
||
### NZ_CODE_EDITOR_CONFIG | ||
|
||
You can inject an object that implements `NzCodeEditorConfig` with the injection token `NZ_CODE_EDITOR_CONFIG`. | ||
|
||
| Parameter | Description | Type | Default | | ||
| --- | --- | --- | --- | | ||
| `assetsRoot` | Where should the component load resource of monaco editor | `string` \| `SageUrl` | - | | ||
| `defaultEditorOption` | Default options. [Please refer to the doc of monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` | | ||
| `onLoad` | The hook invoked when the resource of monaco editor is loaded. At this moment and afterwards the global variable `monaco` is usable | `() => void` | - | | ||
| `onFirstEditorInit` | The hook invoked when the first monaco editor is initialized | `() => void` | - | | ||
| `onInit` | The hook invoked every time a monaco editor is initialized | `() => void` | - | | ||
|
Oops, something went wrong.