Skip to content

Commit 808fbd2

Browse files
loguelogue
committed
Add placeholder prop.
1 parent 0733553 commit 808fbd2

File tree

4 files changed

+84
-64
lines changed

4 files changed

+84
-64
lines changed

‎README.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,23 @@ 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-
| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
36-
| tab | boolean | Enables tab indentation. |
37-
| 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. |
38-
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
39-
| disabled | boolean | This is the reversed value of the CodeMirror editable. Similar to `readonly`, but setting this value to true disables dragging. |
40-
| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
41-
| 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/> |
42-
| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
43-
| 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. |
44-
| gutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
45-
| 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+
| 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.) |
4647

4748
⚠ 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.
4849

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@
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.5",
89+
"@types/node": "^18.11.6",
9090
"@typescript-eslint/eslint-plugin": "^5.41.0",
9191
"@typescript-eslint/parser": "^5.41.0",
92-
"@vitejs/plugin-vue": "^3.1.2",
92+
"@vitejs/plugin-vue": "^3.2.0",
9393
"@vue/eslint-config-prettier": "^7.0.0",
9494
"@vue/tsconfig": "^0.1.3",
9595
"codemirror": "^6.0.1",
@@ -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.24",
104+
"eslint-plugin-jsdoc": "^39.3.25",
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.1.8",
116+
"vite": "^3.2.0",
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: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { compact, trim } from 'lodash';
2222

2323
// CodeMirror
2424
import { EditorSelection, EditorState, StateEffect } from '@codemirror/state';
25-
import { EditorView, keymap } from '@codemirror/view';
25+
import { EditorView, keymap, placeholder } from '@codemirror/view';
2626
import { linter, lintGutter } from '@codemirror/lint';
2727
import { basicSetup, minimalSetup } from 'codemirror';
2828
import { indentWithTab } from '@codemirror/commands';
@@ -109,18 +109,26 @@ export default defineComponent({
109109
type: Boolean,
110110
default: false,
111111
},
112+
/**
113+
* Placeholder
114+
*/
115+
placeholder: {
116+
type: String,
117+
default: undefined,
118+
},
112119
/**
113120
* Line wrapping
114121
*
115122
* An extension that enables line wrapping in the editor (by setting CSS white-space to pre-wrap in the content).
123+
*
116124
* @see {@link https://codemirror.net/6/docs/ref/#view.EditorView%5ElineWrapping | LineWrapping}
117125
*/
118126
wrap: {
119127
type: Boolean,
120128
default: false,
121129
},
122130
/**
123-
* Allow tab input.
131+
* Allow tab key indent.
124132
*
125133
* @see {@link https://codemirror.net/6/examples/tab/ | Tab Handling}
126134
*/
@@ -190,7 +198,8 @@ export default defineComponent({
190198
/**
191199
* Show Linter Gutter
192200
*
193-
* An area to circle the lines with errors will be displayed.
201+
* An area to 🔴 the lines with errors will be displayed.
202+
* This feature is not enabled if `linter` is not specified.
194203
*/
195204
gutter: {
196205
type: Boolean,
@@ -203,7 +212,9 @@ export default defineComponent({
203212
type: Object,
204213
default: () => undefined,
205214
},
206-
/** Using tag */
215+
/**
216+
* Using tag
217+
*/
207218
tag: {
208219
type: String,
209220
default: 'div',
@@ -287,6 +298,8 @@ export default defineComponent({
287298
props.linter && props.gutter
288299
? lintGutter(props.gutterConfig)
289300
: undefined,
301+
// Placeholder
302+
props.placeholder ? placeholder(props.placeholder) : undefined,
290303
// Append Extensions (such as basic-setup)
291304
...props.extensions,
292305
])
@@ -300,13 +313,14 @@ export default defineComponent({
300313
// IME fix
301314
return;
302315
}
303-
/** Previous cursor location */
304-
const previous = view.value.state.selection;
316+
/** Current Editor State */
317+
const current: EditorState = view.value.state;
305318

306319
// Update
307320
view.value.dispatch({
308-
changes: { from: 0, to: view.value.state.doc.length, insert: value },
309-
selection: previous,
321+
changes: { from: 0, to: current.doc.length, insert: value },
322+
selection: current.selection,
323+
scrollIntoView: true,
310324
});
311325
},
312326
{ immediate: true }
@@ -362,7 +376,9 @@ export default defineComponent({
362376
});
363377

364378
/** Destroy */
365-
onUnmounted(() => view.value.destroy());
379+
onUnmounted(() => {
380+
view.value.destroy();
381+
});
366382

367383
// Bellow is experimental.
368384

‎yarn.lock‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -214,14 +214,14 @@ __metadata:
214214
languageName: node
215215
linkType: hard
216216

217-
"@es-joy/jsdoccomment@npm:~0.33.0":
218-
version: 0.33.0
219-
resolution: "@es-joy/jsdoccomment@npm:0.33.0"
217+
"@es-joy/jsdoccomment@npm:~0.33.4":
218+
version: 0.33.4
219+
resolution: "@es-joy/jsdoccomment@npm:0.33.4"
220220
dependencies:
221221
comment-parser: 1.3.1
222222
esquery: ^1.4.0
223223
jsdoc-type-pratt-parser: ~3.1.0
224-
checksum: fe91f9d236fbae44b752b65d95fc6174f89f9b90b9a4cc270247f1f64ed1fe50b438f01303738677ee8c18e5746266bd65e3cba68708bf8190d503039e417f45
224+
checksum: 711391f8dc2aad5ba2a2d1dc247dde3b6b20382b8d30747aa2c1266e1386bfccb57facb62c9c6e508bf1c5aeeaa53a32239a991f31e0e25543a8f987ca88cbc3
225225
languageName: node
226226
linkType: hard
227227

@@ -461,10 +461,10 @@ __metadata:
461461
languageName: node
462462
linkType: hard
463463

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

@@ -594,13 +594,13 @@ __metadata:
594594
languageName: node
595595
linkType: hard
596596

597-
"@vitejs/plugin-vue@npm:^3.1.2":
598-
version: 3.1.2
599-
resolution: "@vitejs/plugin-vue@npm:3.1.2"
597+
"@vitejs/plugin-vue@npm:^3.2.0":
598+
version: 3.2.0
599+
resolution: "@vitejs/plugin-vue@npm:3.2.0"
600600
peerDependencies:
601601
vite: ^3.0.0
602602
vue: ^3.2.25
603-
checksum: 1da84ccfc8f31b612ad51dfbbbc39816900346168c1b66a0870ddeddc622d227ac9a1d571a94d9bc63c75e50320fb8b2f7c986a115e0b87140100b0ac35b9fd6
603+
checksum: 64774f770e0e21ce7eb36743d614e3f197a35f5b67b2d3800c61766e649f43dc497bb037738ffafd607eb488064ab132c23766190e7ab557a0b88c0051f7a794
604604
languageName: node
605605
linkType: hard
606606

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

2007-
"eslint-plugin-jsdoc@npm:^39.3.24":
2008-
version: 39.3.24
2009-
resolution: "eslint-plugin-jsdoc@npm:39.3.24"
2007+
"eslint-plugin-jsdoc@npm:^39.3.25":
2008+
version: 39.3.25
2009+
resolution: "eslint-plugin-jsdoc@npm:39.3.25"
20102010
dependencies:
2011-
"@es-joy/jsdoccomment": ~0.33.0
2011+
"@es-joy/jsdoccomment": ~0.33.4
20122012
comment-parser: 1.3.1
20132013
debug: ^4.3.4
20142014
escape-string-regexp: ^4.0.0
@@ -2017,7 +2017,7 @@ __metadata:
20172017
spdx-expression-parse: ^3.0.1
20182018
peerDependencies:
20192019
eslint: ^7.0.0 || ^8.0.0
2020-
checksum: 2d6149a48903502f61c0c5d06944d5a46789a1c38d4999a42f0bd32129e4c66cbc470df8cae7d5d1a730b8dad3e06c9d869ba8abd3d6e08eaa1a5cd39464b7b4
2020+
checksum: 2e5447e65c26a76724eb1c297c84d3f96d6994c3588ff94e4333b8845ec975792b507d1cfb99e1e7da7efbe1b2ec9210fc7200a0e7c356ac176d4ae5198826c2
20212021
languageName: node
20222022
linkType: hard
20232023

@@ -3821,14 +3821,14 @@ __metadata:
38213821
languageName: node
38223822
linkType: hard
38233823

3824-
"postcss@npm:^8.4.16":
3825-
version: 8.4.16
3826-
resolution: "postcss@npm:8.4.16"
3824+
"postcss@npm:^8.4.18":
3825+
version: 8.4.18
3826+
resolution: "postcss@npm:8.4.18"
38273827
dependencies:
38283828
nanoid: ^3.3.4
38293829
picocolors: ^1.0.0
38303830
source-map-js: ^1.0.2
3831-
checksum: 10eee25efd77868036403858577da0cefaf2e0905feeaba5770d5438ccdddba3d01cba8063e96b8aac4c6daa0ed413dd5ae0554a433a3c4db38df1d134cffc1f
3831+
checksum: 9349fd99849b2e3d2e134ff949b7770ecb12375f352723ce2bcc06167eba3850ea7844c1b191a85cd915d6a396b4e8ee9a5267e6cc5d8d003d0cbc7a97555d39
38323832
languageName: node
38333833
linkType: hard
38343834

@@ -4084,17 +4084,17 @@ __metadata:
40844084
languageName: node
40854085
linkType: hard
40864086

4087-
"rollup@npm:~2.78.0":
4088-
version: 2.78.1
4089-
resolution: "rollup@npm:2.78.1"
4087+
"rollup@npm:^2.79.1":
4088+
version: 2.79.1
4089+
resolution: "rollup@npm:2.79.1"
40904090
dependencies:
40914091
fsevents: ~2.3.2
40924092
dependenciesMeta:
40934093
fsevents:
40944094
optional: true
40954095
bin:
40964096
rollup: dist/bin/rollup
4097-
checksum: 9034814383ca5bdb4bea6d499270aeb31cdb0bb884f81b0c6a1d19c63cc973f040e6ee09b7af8a7169dd231c090f4b44ef8b99c4bfdf884aceeb3dcefb8cfa14
4097+
checksum: 6a2bf167b3587d4df709b37d149ad0300692cc5deb510f89ac7bdc77c8738c9546ae3de9322b0968e1ed2b0e984571f5f55aae28fa7de4cfcb1bc5402a4e2be6
40984098
languageName: node
40994099
linkType: hard
41004100

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

4727-
"vite@npm:^3.1.8":
4728-
version: 3.1.8
4729-
resolution: "vite@npm:3.1.8"
4727+
"vite@npm:^3.2.0":
4728+
version: 3.2.0
4729+
resolution: "vite@npm:3.2.0"
47304730
dependencies:
47314731
esbuild: ^0.15.9
47324732
fsevents: ~2.3.2
4733-
postcss: ^8.4.16
4733+
postcss: ^8.4.18
47344734
resolve: ^1.22.1
4735-
rollup: ~2.78.0
4735+
rollup: ^2.79.1
47364736
peerDependencies:
47374737
less: "*"
47384738
sass: "*"
47394739
stylus: "*"
4740+
sugarss: "*"
47404741
terser: ^5.4.0
47414742
dependenciesMeta:
47424743
fsevents:
@@ -4748,11 +4749,13 @@ __metadata:
47484749
optional: true
47494750
stylus:
47504751
optional: true
4752+
sugarss:
4753+
optional: true
47514754
terser:
47524755
optional: true
47534756
bin:
47544757
vite: bin/vite.js
4755-
checksum: 982696ad134577dd9915c4c3548ad36ddcf5dc6d341058548a670a13d860e4cdaaf2b320a59221f178018df089d148b9980e9a344316bef12b698a1c1abc7390
4758+
checksum: 2b3acfe74549c4be2d35786b40f253fa8ba53d8a7b29d1b7397f0536ab6a831e9cdbd27c628265fc2ddcf5c616254022d2c9cbd2a0e2b0443cf0c14455e101d6
47564759
languageName: node
47574760
linkType: hard
47584761

@@ -4823,10 +4826,10 @@ __metadata:
48234826
"@codemirror/lang-javascript": ^6.1.1
48244827
"@codemirror/lang-markdown": ^6.0.3
48254828
"@types/lodash": ^4.14.186
4826-
"@types/node": ^18.11.5
4829+
"@types/node": ^18.11.6
48274830
"@typescript-eslint/eslint-plugin": ^5.41.0
48284831
"@typescript-eslint/parser": ^5.41.0
4829-
"@vitejs/plugin-vue": ^3.1.2
4832+
"@vitejs/plugin-vue": ^3.2.0
48304833
"@vue/eslint-config-prettier": ^7.0.0
48314834
"@vue/tsconfig": ^0.1.3
48324835
codemirror: ^6.0.1
@@ -4838,7 +4841,7 @@ __metadata:
48384841
eslint-linter-browserify: ^8.26.0
48394842
eslint-plugin-html: ^7.1.0
48404843
eslint-plugin-import: ^2.26.0
4841-
eslint-plugin-jsdoc: ^39.3.24
4844+
eslint-plugin-jsdoc: ^39.3.25
48424845
eslint-plugin-tsdoc: ^0.2.17
48434846
eslint-plugin-vue: ^9.6.0
48444847
eslint-plugin-vuejs-accessibility: ^1.2.0
@@ -4850,7 +4853,7 @@ __metadata:
48504853
rimraf: ^3.0.2
48514854
rollup-plugin-visualizer: ^5.8.3
48524855
typescript: ^4.8.4
4853-
vite: ^3.1.8
4856+
vite: ^3.2.0
48544857
vite-plugin-banner: ^0.5.0
48554858
vite-plugin-checker: ^0.5.1
48564859
vue: ^3.2.41

0 commit comments

Comments
 (0)