Skip to content
Permalink
Browse files

feat(module:code-editor): add code editor component (#3706)

* feat(module:code-editor): add component

* docs: change docs

* fix: remove style export in primary entrance
  • Loading branch information...
wendzhue authored and vthinkxie committed Aug 13, 2019
1 parent bd14abf commit df78b2eeea1158a82bb62f5885825d7100ee00b9
Showing with 1,055 additions and 0 deletions.
  1. +12 −0 angular.json
  2. +14 −0 components/code-editor/demo/basic.md
  3. +21 −0 components/code-editor/demo/basic.ts
  4. +14 −0 components/code-editor/demo/complex.md
  5. +82 −0 components/code-editor/demo/complex.ts
  6. +14 −0 components/code-editor/demo/config.md
  7. +38 −0 components/code-editor/demo/config.ts
  8. +14 −0 components/code-editor/demo/diff.md
  9. +32 −0 components/code-editor/demo/diff.ts
  10. +14 −0 components/code-editor/demo/full-control.md
  11. +33 −0 components/code-editor/demo/full-control.ts
  12. +7 −0 components/code-editor/demo/module
  13. +66 −0 components/code-editor/doc/index.en-US.md
  14. +66 −0 components/code-editor/doc/index.zh-CN.md
  15. +9 −0 components/code-editor/index.ts
  16. +7 −0 components/code-editor/nz-code-editor.component.html
  17. +253 −0 components/code-editor/nz-code-editor.component.ts
  18. +43 −0 components/code-editor/nz-code-editor.definitions.ts
  19. +22 −0 components/code-editor/nz-code-editor.module.ts
  20. +129 −0 components/code-editor/nz-code-editor.service.ts
  21. +78 −0 components/code-editor/nz-code-editor.spec.ts
  22. +7 −0 components/code-editor/package.json
  23. +12 −0 components/code-editor/public-api.ts
  24. +1 −0 components/code-editor/style/entry.less
  25. +48 −0 components/code-editor/style/index.less
  26. +1 −0 components/core/util/public-api.ts
  27. +16 −0 components/core/util/tick.ts
  28. +1 −0 package.json
  29. +1 −0 scripts/site/_site/doc/styles.less
@@ -27,6 +27,11 @@
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
},
{
"glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs",
"output": "/assets/vs/"
}
],
"styles": [
@@ -210,6 +215,13 @@
"with": "components/core/environments/environment.test.ts"
}
],
"assets": [
{
"glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs",
"output": "/assets/vs/"
}
],
"main": "components/test.ts",
"karmaConfig": "components/karma.conf.js",
"polyfills": "components/polyfills.ts",
@@ -0,0 +1,14 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
---

## zh-CN

最简单的用法。

## en-US

The simplest usage.
@@ -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 {}`;
}
@@ -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.
@@ -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();
}
}
@@ -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.
@@ -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' });
}
}
@@ -0,0 +1,14 @@
---
order: 1
title:
zh-CN: Diff 编辑器
en-US: Diff Editor
---

## zh-CN

使用 diff 模式。

## en-US

Use diff editor mode.
@@ -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 {}`;
}
@@ -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.
@@ -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'));
}
}
@@ -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 ];
@@ -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` | - |

0 comments on commit df78b2e

Please sign in to comment.
You can’t perform that action at this time.