Skip to content

Commit b2b14c4

Browse files
HaydenOrzHaydenOrz
committed
docs: update docs
1 parent 57ca6ff commit b2b14c4

File tree

2 files changed

+98
-42
lines changed

2 files changed

+98
-42
lines changed

‎CHANGELOG.zh-CN.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@
66

77
<br/>
88

9+
## 暂未发布
10+
11+
`future`
12+
13+
- 🆕 新增 `editorWillMount`、 `editorDidMount`、 `editorWillUnMount` 三个生命周期钩子，`MonacoEditor` 与 `MonacoDiffEditor` 均支持。([57ca6ff](https://github.com/DTStack/dt-react-monaco-editor/commit/57ca6ff91126bf7cb35e45158ec56b3b76e22260))
14+
- 🚫 废弃 `MonacoEditor` 的 `editorInstanceRef` 属性和 `MonacoDiffEditor` 的 `diffEditorInstanceRef` 属性，并计划在未来版本移除，对应可以使用 `editorDidMount` 声明周期钩子替代。([57ca6ff](https://github.com/DTStack/dt-react-monaco-editor/commit/57ca6ff91126bf7cb35e45158ec56b3b76e22260))
15+
- 🆕 新增具名导出 `monaco`。([8524e17](https://github.com/DTStack/dt-react-monaco-editor/commit/8524e17c87cb82dd3850eebee87f8570c4206002))
16+
17+
<br/>
18+
919
## 1.0.1
1020

1121
`2023-7-13`
@@ -27,7 +37,7 @@
2737
- `dtPython3`
2838
- `dtlog`
2939
- 🗑 移除所有与自动补全和语法解析相关的 `utils`。
30-
- 🛠 不再默认导出 `Editor` 组件，取而代之的是命名导出 `MonacoEditor` 和 `MonacoDiffEditor` 组件。
40+
- 🛠 不再默认导出 `Editor` 组件，取而代之的是具名导出 `MonacoEditor` 和 `MonacoDiffEditor` 组件。
3141

3242
#### MonacoEditor 组件（原默认导出组件）主要变更
3343

‎README.md‎

Lines changed: 87 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,137 @@
11
<h1 align="center">dt-react-monaco-editor</h1>
2-
<h2 align="center">
2+
3+
<div align="center">
34

45
[Monaco Editor](https://github.com/Microsoft/monaco-editor) React Components
56

6-
</h2>
7+
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-img]][download-url]
8+
9+
[npm-image]: https://img.shields.io/npm/v/dt-react-monaco-editor.svg?style=flat-square
10+
[npm-url]: https://www.npmjs.com/package/dt-react-monaco-editor
11+
[download-img]: https://img.shields.io/npm/dm/dt-react-monaco-editor.svg?style=flat
12+
[download-url]: https://www.npmjs.com/package/dt-react-monaco-editor
13+
14+
</div>
715

816
## Introduction
17+
918
Provides `MonacoEditor` and `MonacoDiffEditor` component, make it easier to use Monaco Editor in React.
19+
20+
<br/>
21+
1022
## Installation
23+
1124
use npm
25+
1226
```bash
1327
npm install dt-react-monaco-editor
1428
```
29+
1530
or use yarn
31+
1632
```bash
1733
yarn add dt-react-monaco-editor
1834
```
35+
1936
or use pnpm
37+
2038
```
2139
pnpm install dt-react-monaco-editor
2240
```
2341

42+
<br/>
43+
2444
## Integrating
45+
2546
See [Monaco Editor integrate Docs](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md).
2647

48+
<br/>
49+
2750
## Usage
51+
2852
### MonacoEditor Component
53+
2954
```jsx
3055
import { MonacoEditor } from 'dt-react-monaco-editor';
3156

32-
function App () {
33-
const editorRef = useRef();
34-
return(
35-
<MonacoEditor
36-
value=''
37-
language='javascript'
38-
style={{ height: 400, width: 600 }}
39-
onChange={(value) => { console.log(value) }}
40-
editorInstanceRef={ins => editorRef.current = ins}
41-
/>
42-
)
57+
function App() {
58+
const editorRef = useRef();
59+
return (
60+
<MonacoEditor
61+
value=""
62+
language="javascript"
63+
style={{ height: 400, width: 600 }}
64+
onChange={(value) => {
65+
console.log(value);
66+
}}
67+
editorInstanceRef={(ins) => (editorRef.current = ins)}
68+
/>
69+
);
4370
}
4471
```
4572

4673
### MonacoDiffEditor Component
74+
4775
```jsx
4876
import { MonacoDiffEditor } from 'dt-react-monaco-editor';
4977

50-
function App () {
51-
const editorRef = useRef();
52-
return(
53-
<MonacoDiffEditor
54-
original='const a = 1;'
55-
value='const a = 2;'
56-
language='sql'
57-
style={{ height: 400, width: 1200 }}
58-
onChange={(value) => { console.log(value) }}
59-
diffEditorInstanceRef={ins => editorRef.current = ins}
60-
/>
61-
)
78+
function App() {
79+
const editorRef = useRef();
80+
return (
81+
<MonacoDiffEditor
82+
original="const a = 1;"
83+
value="const a = 2;"
84+
language="sql"
85+
style={{ height: 400, width: 1200 }}
86+
onChange={(value) => {
87+
console.log(value);
88+
}}
89+
diffEditorInstanceRef={(ins) => (editorRef.current = ins)}
90+
/>
91+
);
6292
}
6393
```
6494

95+
<br/>
96+
6597
## Properties
98+
6699
### Common Properties
67-
common properties can be used on MonacoEditor and MonacoDiffEditor.
68-
+ `theme` theme used when the editor renders, defaults to `vs`.
69-
+ `language` language of model in editor, defaults to `sql`.
70-
+ `sync` sync value to model when value change, if sync property is true, the editor is controlled.
71-
+ `onChange` an event emitted when the value of the editor model has changed.
100+
101+
common properties can be used on `MonacoEditor` and `MonacoDiffEditor`.
102+
103+
- `theme` theme used when the editor renders, defaults to `vs`.
104+
- `language` language of model in editor, defaults to `sql`.
105+
- `sync` sync value to model when value change, if sync property is true, the editor is controlled.
106+
- `onChange` an event emitted when the value of the editor model has changed.
72107

73108
### MonacoEditor Own Properties
74-
+ `value` value of model in editor.
75-
+ `options` options for monaco editor, refer to monaco interface [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html).
76-
+ `editorInstanceRef` get editor instance.
77-
+ `onCursorSelection` an event emitted when the selection of the editor model has changed.
78-
+ `onFocus` an event emitted when the editor is in focus.
79-
+ `onBlur` an event emitted when the editor is out of focus.
109+
110+
- `value` value of model in editor.
111+
- `options` options for monaco editor, refer to monaco interface [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html).
112+
- **[deprecated]** `editorInstanceRef` get editor instance.
113+
- `onCursorSelection` an event emitted when the selection of the editor model has changed.
114+
- `onFocus` an event emitted when the editor is in focus.
115+
- `onBlur` an event emitted when the editor is out of focus.
116+
- `editorWillMount` called immediately before the editor is mounted (similar to componentWillMount of React).
117+
- `editorDidMount` called immediately after the editor is mounted (similar to componentDidMount of React).
118+
- `editorWillUnMount` called immediately before the editor is destroyed (similar to componentWillUnmount of React).
80119

81120
### MonacoDiffEditor Own Properties
82-
+ `value` value of model in modifiedEditor.
83-
+ `original` value of model in originalEditor.
84-
+ `options` options for monaco diff editor, refer to monaco interface [IStandaloneDiffEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneDiffEditorConstructionOptions.html).
85-
+ `diffEditorInstanceRef` get diff editor instance.
86-
+ `readOnly` set modified editor readonly.
121+
122+
- `value` value of model in modifiedEditor.
123+
- `original` value of model in originalEditor.
124+
- `options` options for monaco diff editor, refer to monaco interface [IStandaloneDiffEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneDiffEditorConstructionOptions.html).
125+
- `readOnly` set modified editor readonly.
126+
- **[deprecated]** `diffEditorInstanceRef` get diff editor instance.
127+
- `editorWillMount` called immediately before the editor is mounted (similar to componentWillMount of React).
128+
- `editorDidMount` called immediately after the editor is mounted (similar to componentDidMount of React).
129+
- `editorWillUnMount` called immediately before the editor is destroyed (similar to componentWillUnmount of React).
130+
131+
<br/>
87132

88133
## Support more sql languages
134+
89135
Please See [monaco-sql-languages](https://github.com/DTStack/monaco-sql-languages).
90136

91137
`monaco-sql-languages` provides **highlighting**, **error prompts** and **auto-completion** functions for many kinds of SQL Languages for BigData domain.

0 commit comments

Comments
 (0)