Skip to content

Commit de5f95e

Browse files
loguelogue
committed
Add diagnosticCount emit.
This function fires if there is an error in the input value when lint is specified. Contains the number of errors as a value. Add LinterConfig prop.
1 parent 808fbd2 commit de5f95e

File tree

4 files changed

+73
-46
lines changed

4 files changed

+73
-46
lines changed

‎README.md‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,25 @@ This component can handle bidirectional binding by `v-model` like a general Vue
2727

2828
## Props
2929

30-
| Props | Type | Information |
31-
| ----------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
32-
| basic | boolean | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup). |
33-
| minimal | boolean | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence. |
34-
| dark | boolean | Toggle Darkmode. |
35-
| placeholder | string | Add placeholder text when blank |
36-
| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
37-
| tab | boolean | Enables tab indentation. |
38-
| theme | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use [@codemirror/theme-one-dark](https://github.com/codemirror/theme-one-dark), import `oneDark` and put it in this prop. |
39-
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
40-
| disabled | boolean | This is the reversed value of the CodeMirror editable. Similar to `readonly`, but setting this value to true disables dragging. |
41-
| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
42-
| phrases | Record&lt;string, string&gt; | Specify here if you want to make the displayed character string multilingual. see <https://codemirror.net/6/examples/translate/> |
43-
| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
44-
| linter | LintSource | Set Linter. Enter a linter (eg `esLint([arbitrary rule])` function for `@codemirror/lang-javascript`, `jsonParseLinter()`function for`@codemirror/json`). See the sources for various language libraries for more information. |
45-
| gutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
46-
| tag | string | HTML tags used in the component. (Default is `div` tag.) |
30+
| Props | Type | Information |
31+
| ------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
32+
| basic | boolean | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup). |
33+
| minimal | boolean | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence. |
34+
| dark | boolean | Toggle Darkmode. |
35+
| placeholder | string | Add placeholder text when blank |
36+
| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
37+
| tab | boolean | Enables tab indentation. |
38+
| theme | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use [@codemirror/theme-one-dark](https://github.com/codemirror/theme-one-dark), import `oneDark` and put it in this prop. |
39+
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
40+
| disabled | boolean | This is the reversed value of the CodeMirror editable. Similar to `readonly`, but setting this value to true disables dragging. |
41+
| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
42+
| phrases | Record&lt;string, string&gt; | Specify here if you want to make the displayed character string multilingual. see <https://codemirror.net/6/examples/translate/> |
43+
| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
44+
| linter | LintSource | Set Linter. Enter a linter (eg `esLint([arbitrary rule])` function for `@codemirror/lang-javascript`, `jsonParseLinter()`function for`@codemirror/json`). See the sources for various language libraries for more information. |
45+
| linterConfig | Object | see <https://codemirror.net/docs/ref/#lint.linter^config> |
46+
| gutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
47+
| gutterConfig | Object | see <https://codemirror.net/docs/ref/#lint.lintGutter^config> |
48+
| tag | string | HTML tags used in the component. (Default is `div` tag.) |
4749

4850
⚠ Notice: `lang` and `linter` can also be set together in `extensions`. These are separated for compatibility with previous versions of CodeMirror settings and for typing props.
4951

@@ -247,12 +249,13 @@ export default defineComponent({
247249

248250
## Events
249251

250-
| Event | Description |
251-
| ------- | ------------------------------------------------------------------------------------------------------------- |
252-
| ready | When CodeMirror loaded. |
253-
| focus | When focus changed. |
254-
| update | When CodeMirror state changed. Returns [ViewUpdate](https://codemirror.net/docs/ref/#view.ViewUpdate) object. |
255-
| changed | Value changed. (Please implement with `v-model` unless there is a special reason.) |
252+
| Event | Description |
253+
| --------------- | ------------------------------------------------------------------------------------------------------------- |
254+
| ready | When CodeMirror loaded. |
255+
| focus | When focus changed. |
256+
| update | When CodeMirror state changed. Returns [ViewUpdate](https://codemirror.net/docs/ref/#view.ViewUpdate) object. |
257+
| changed | Value changed. (Please implement with `v-model` unless there is a special reason.) |
258+
| diagnosticCount | Returns the number of active lint diagnostics in the given state. (Only when `linter` prop is specified) |
256259

257260
## Methods
258261

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://json.schemastore.org/package.json",
33
"name": "vue-codemirror6",
4-
"version": "1.0.4",
4+
"version": "1.1.0",
55
"license": "MIT",
66
"description": "CodeMirror6 Component for vue2 and vue3.",
77
"keywords": [
@@ -86,7 +86,7 @@
8686
"@codemirror/lang-javascript": "^6.1.1",
8787
"@codemirror/lang-markdown": "^6.0.3",
8888
"@types/lodash": "^4.14.186",
89-
"@types/node": "^18.11.6",
89+
"@types/node": "^18.11.7",
9090
"@typescript-eslint/eslint-plugin": "^5.41.0",
9191
"@typescript-eslint/parser": "^5.41.0",
9292
"@vitejs/plugin-vue": "^3.2.0",
@@ -101,7 +101,7 @@
101101
"eslint-linter-browserify": "^8.26.0",
102102
"eslint-plugin-html": "^7.1.0",
103103
"eslint-plugin-import": "^2.26.0",
104-
"eslint-plugin-jsdoc": "^39.3.25",
104+
"eslint-plugin-jsdoc": "^39.4.0",
105105
"eslint-plugin-tsdoc": "^0.2.17",
106106
"eslint-plugin-vue": "^9.6.0",
107107
"eslint-plugin-vuejs-accessibility": "^1.2.0",
@@ -113,7 +113,7 @@
113113
"rimraf": "^3.0.2",
114114
"rollup-plugin-visualizer": "^5.8.3",
115115
"typescript": "^4.8.4",
116-
"vite": "^3.2.0",
116+
"vite": "^3.2.1",
117117
"vite-plugin-banner": "^0.5.0",
118118
"vite-plugin-checker": "^0.5.1",
119119
"vue": "^3.2.41",

‎src/components/CodeMirror.ts‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { compact, trim } from 'lodash';
2323
// CodeMirror
2424
import { EditorSelection, EditorState, StateEffect } from '@codemirror/state';
2525
import { EditorView, keymap, placeholder } from '@codemirror/view';
26-
import { linter, lintGutter } from '@codemirror/lint';
26+
import { linter, lintGutter, diagnosticCount } from '@codemirror/lint';
2727
import { basicSetup, minimalSetup } from 'codemirror';
2828
import { indentWithTab } from '@codemirror/commands';
2929

@@ -57,6 +57,8 @@ export interface CodeMirrorEmitsOptions extends ObjectEmitsOptions {
5757
): void;
5858
/** onChange (same as update:modelValue) */
5959
(e: 'change', value: string | Text): void;
60+
/** CodeMirror linter active diagnostic aount */
61+
(e: 'diagnosticCount', value: number): void;
6062
}
6163

6264
/** CodeMirror Component */
@@ -195,6 +197,15 @@ export default defineComponent({
195197
type: Function as PropType<LintSource>,
196198
default: undefined,
197199
},
200+
/**
201+
* Linter Config
202+
*
203+
* @see {@link https://codemirror.net/docs/ref/#lint.linter^config}
204+
*/
205+
linterConfig: {
206+
type: Object,
207+
default: () => {},
208+
},
198209
/**
199210
* Show Linter Gutter
200211
*
@@ -207,10 +218,12 @@ export default defineComponent({
207218
},
208219
/**
209220
* Gutter Config
221+
*
222+
* @see {@link https://codemirror.net/docs/ref/#lint.lintGutter^config}
210223
*/
211224
gutterConfig: {
212225
type: Object,
213-
default: () => undefined,
226+
default: () => {},
214227
},
215228
/**
216229
* Using tag
@@ -221,7 +234,14 @@ export default defineComponent({
221234
},
222235
},
223236
/** Emits */
224-
emits: ['update:modelValue', 'update', 'ready', 'focus', 'changed'],
237+
emits: [
238+
'update:modelValue',
239+
'update',
240+
'ready',
241+
'focus',
242+
'changed',
243+
'diagnosticCount',
244+
],
225245
/**
226246
* Setup
227247
*
@@ -293,7 +313,7 @@ export default defineComponent({
293313
// Lang
294314
props.lang ? props.lang : undefined,
295315
// Append Linter settings
296-
props.linter ? linter(props.linter) : undefined,
316+
props.linter ? linter(props.linter, props.linterConfig) : undefined,
297317
// Show 🔴 to error line when linter enabled.
298318
props.linter && props.gutter
299319
? lintGutter(props.gutterConfig)
@@ -316,6 +336,10 @@ export default defineComponent({
316336
/** Current Editor State */
317337
const current: EditorState = view.value.state;
318338

339+
if (props.linter) {
340+
// Lint error count.
341+
context.emit('diagnosticCount', diagnosticCount(current));
342+
}
319343
// Update
320344
view.value.dispatch({
321345
changes: { from: 0, to: current.doc.length, insert: value },

‎yarn.lock‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -461,10 +461,10 @@ __metadata:
461461
languageName: node
462462
linkType: hard
463463

464-
"@types/node@npm:^18.11.6":
465-
version: 18.11.6
466-
resolution: "@types/node@npm:18.11.6"
467-
checksum: 25713209b5f8758e782348514e7bd2342bd8edb38038380c66f37b41b12d6840763edb17d81f6451591791c9d59c8255be54591333fc302f473beadada0023e6
464+
"@types/node@npm:^18.11.7":
465+
version: 18.11.7
466+
resolution: "@types/node@npm:18.11.7"
467+
checksum: 69d630825cf6fbf580d08d76a4d4836ef8c34ed4fe0842221ade87d275f517099cbfabe8e22397208e564bd24926db97699ab9db5c091383269a432b336665e2
468468
languageName: node
469469
linkType: hard
470470

@@ -2004,9 +2004,9 @@ __metadata:
20042004
languageName: node
20052005
linkType: hard
20062006

2007-
"eslint-plugin-jsdoc@npm:^39.3.25":
2008-
version: 39.3.25
2009-
resolution: "eslint-plugin-jsdoc@npm:39.3.25"
2007+
"eslint-plugin-jsdoc@npm:^39.4.0":
2008+
version: 39.4.0
2009+
resolution: "eslint-plugin-jsdoc@npm:39.4.0"
20102010
dependencies:
20112011
"@es-joy/jsdoccomment": ~0.33.4
20122012
comment-parser: 1.3.1
@@ -2017,7 +2017,7 @@ __metadata:
20172017
spdx-expression-parse: ^3.0.1
20182018
peerDependencies:
20192019
eslint: ^7.0.0 || ^8.0.0
2020-
checksum: 2e5447e65c26a76724eb1c297c84d3f96d6994c3588ff94e4333b8845ec975792b507d1cfb99e1e7da7efbe1b2ec9210fc7200a0e7c356ac176d4ae5198826c2
2020+
checksum: d35e81b2d57c2eec2eceb16600ede3d1eae41e8ab3a76d3f748fc7967c86f29f046fa6c6e306e8366eea7d34ffe2cc9fb7149e1a14ccd4d23137b33d4bcb878e
20212021
languageName: node
20222022
linkType: hard
20232023

@@ -4724,9 +4724,9 @@ __metadata:
47244724
languageName: node
47254725
linkType: hard
47264726

4727-
"vite@npm:^3.2.0":
4728-
version: 3.2.0
4729-
resolution: "vite@npm:3.2.0"
4727+
"vite@npm:^3.2.1":
4728+
version: 3.2.1
4729+
resolution: "vite@npm:3.2.1"
47304730
dependencies:
47314731
esbuild: ^0.15.9
47324732
fsevents: ~2.3.2
@@ -4755,7 +4755,7 @@ __metadata:
47554755
optional: true
47564756
bin:
47574757
vite: bin/vite.js
4758-
checksum: 2b3acfe74549c4be2d35786b40f253fa8ba53d8a7b29d1b7397f0536ab6a831e9cdbd27c628265fc2ddcf5c616254022d2c9cbd2a0e2b0443cf0c14455e101d6
4758+
checksum: d33f6f4c80f85f327cf74c56d2189f1ba1d808987501eae9455c65bbb1ba5ea96af0f68647e18fe0c61e82126ea91f10480c1e80964a6836a751502647a42f2b
47594759
languageName: node
47604760
linkType: hard
47614761

@@ -4826,7 +4826,7 @@ __metadata:
48264826
"@codemirror/lang-javascript": ^6.1.1
48274827
"@codemirror/lang-markdown": ^6.0.3
48284828
"@types/lodash": ^4.14.186
4829-
"@types/node": ^18.11.6
4829+
"@types/node": ^18.11.7
48304830
"@typescript-eslint/eslint-plugin": ^5.41.0
48314831
"@typescript-eslint/parser": ^5.41.0
48324832
"@vitejs/plugin-vue": ^3.2.0
@@ -4841,7 +4841,7 @@ __metadata:
48414841
eslint-linter-browserify: ^8.26.0
48424842
eslint-plugin-html: ^7.1.0
48434843
eslint-plugin-import: ^2.26.0
4844-
eslint-plugin-jsdoc: ^39.3.25
4844+
eslint-plugin-jsdoc: ^39.4.0
48454845
eslint-plugin-tsdoc: ^0.2.17
48464846
eslint-plugin-vue: ^9.6.0
48474847
eslint-plugin-vuejs-accessibility: ^1.2.0
@@ -4853,7 +4853,7 @@ __metadata:
48534853
rimraf: ^3.0.2
48544854
rollup-plugin-visualizer: ^5.8.3
48554855
typescript: ^4.8.4
4856-
vite: ^3.2.0
4856+
vite: ^3.2.1
48574857
vite-plugin-banner: ^0.5.0
48584858
vite-plugin-checker: ^0.5.1
48594859
vue: ^3.2.41

0 commit comments

Comments
 (0)