Skip to content

Commit 6e0689e

Browse files
surmon-chinasurmon-china
committed
chore(doc): API desc
1 parent f8a7120 commit 6e0689e

File tree

2 files changed

+51
-21
lines changed

2 files changed

+51
-21
lines changed

‎README.md‎

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
- [CodeMirror6 styling](https://codemirror.net/6/examples/styling/)
2727
- [CodeMirror discuss](https://discuss.codemirror.net/)
2828

29-
### Previous version
29+
### Legacy version
3030

3131
- [[email protected] (Vue2 / CodeMirror5)](https://github.com/surmon-china/vue-codemirror/tree/v4.0.0)
3232

@@ -42,6 +42,20 @@ yarn add vue-codemirror
4242
npm install vue-codemirror --save
4343
```
4444

45+
#### Depending on your actual needs, you may need to install more CodeMirror packages
46+
47+
```base
48+
// CodeMirror languages...
49+
yarn @codemirror/lang-html
50+
yarn @codemirror/lang-json
51+
yarn @codemirror/lang-javascript
52+
53+
// CodeMirror themes...
54+
yarn @codemirror/theme-one-dark
55+
56+
// more CodeMirror packages...
57+
```
58+
4559
#### local component
4660

4761
```vue
@@ -108,33 +122,44 @@ app.use(VueCodemirror, {
108122

109123
### Component Props
110124

111-
| prop | description | type | default |
112-
| :------------ | :------------------------------------------------------- | :--------------------------------- | :------------- |
113-
| autofocus | - | `Boolean` | `false` |
114-
| disabled | - | `Boolean` | `false` |
115-
| indentWithTab | Bind Tab key. | `Boolean` | `true` |
116-
| tabSize | Indent of Tab key. | `Number` | `2` |
117-
| placeholder | - | `String` | `''` |
118-
| style | The css style object that acts on the CodeMirror itself. | `Boolean` | `true` |
119-
| extensions | Passed to CodeMirror. | `EditorStateConfig['extensions']>` | `[basicSetup]` |
120-
| root | Passed to CodeMirror. | `ShadowRoot \| Document` | `undefined` |
121-
| selection | Passed to CodeMirror. | `EditorStateConfig['selection']` | `undefined` |
125+
| prop | description | type | default |
126+
| :------------ | :-------------------------------------------------------- | :----------------------- | :------ |
127+
| autofocus | Focus editor immediately after mounted. | `Boolean` | `false` |
128+
| disabled | Disable input behavior and disable change state. | `Boolean` | `false` |
129+
| indentWithTab | Bind keyboard Tab key event. | `Boolean` | `true` |
130+
| tabSize | Specify the indent when the Tab key is pressed. | `Number` | `2` |
131+
| placeholder | Display when empty. | `String` | `''` |
132+
| style | The CSS style object that acts on the CodeMirror itself. | `Object` | `{}` |
133+
| extensions | Passed to CodeMirror `EditorState.create({ extensions })` | `Extension` | `[]` |
134+
| selection | Passed to CodeMirror `EditorState.create({ selection })` | `EditorSelection` | - |
135+
| root | Passed to CodeMirror `new EditorView({ root })` | `ShadowRoot \| Document` | - |
122136

123137
### Component Events
124138

125-
| event | description | params |
126-
| :------------------ | :----------------------------- | :------------------------------------------------------------------------------- |
127-
| `update:modelValue` | When content(doc) change only. | `(value: string, viewUpdate: ViewUpdate)` |
128-
| change | ditto | ditto |
129-
| update | When CodeMirror state change. | `(viewUpdate: ViewUpdate)` |
130-
| focus | When CodeMirror focused. | `(viewUpdate: ViewUpdate)` |
131-
| blur | When CodeMirror blurred. | `(viewUpdate: ViewUpdate)` |
132-
| ready | When component mounted. | `(payload: { view: EditorView; state: EditorState; container: HTMLDivElement })` |
139+
| event | description | params |
140+
| :------------------ | :------------------------------------------------------ | :------------------------------------------------------------------------------- |
141+
| `update:modelValue` | **Only** when the CodeMirror content (doc) has changed. | `(value: string, viewUpdate: ViewUpdate)` |
142+
| change | ditto | ditto |
143+
| update | When any state of CodeMirror changes. | `(viewUpdate: ViewUpdate)` |
144+
| focus | When CodeMirror focused. | `(viewUpdate: ViewUpdate)` |
145+
| blur | When CodeMirror blurred. | `(viewUpdate: ViewUpdate)` |
146+
| ready | When edirot component mounted. | `(payload: { view: EditorView; state: EditorState; container: HTMLDivElement })` |
147+
148+
### Basic Setup
149+
150+
The [basic-setup](https://codemirror.net/6/docs/ref/#basic-setup) extension is integrated by default in the vue-codemirror configuration, and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.
151+
152+
```js
153+
app.use(VueCodemirror, {
154+
// keep the global default extensions empty
155+
extension: []
156+
})
157+
```
133158

134159
### Changelog
135160

136161
Detailed changes for each release are documented in the [release notes](/CHANGELOG.md).
137162

138163
### License
139164

140-
[MIT](/LICENSE)
165+
Licensed under the [MIT](/LICENSE) License.

‎src/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import type { Plugin } from 'vue'
22
import Component, { Props } from './component'
33
import { injectGlobalConfig } from './config'
44

5+
export * from '@codemirror/view'
6+
export * from '@codemirror/state'
7+
export * from '@codemirror/basic-setup'
8+
export { Props, DEFAULT_CONFIG } from './component'
9+
510
export const Codemirror = Component
611
export const install: Plugin = (app, defaultConfig?: Props) => {
712
app.component(Component.name, Component)

0 commit comments

Comments
 (0)