Skip to content

Commit 9b9eecd

Browse files
loguelogue
committed
Enabled to specify HTML tags used in components.
Fixed a bug that the cursor position moves to a strange place when lang is specified.
1 parent e27b9ef commit 9b9eecd

File tree

6 files changed

+176
-149
lines changed

6 files changed

+176
-149
lines changed

‎README.md‎

Lines changed: 59 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ A component for using [CodeMirror6](https://codemirror.net/6/) with Vue. Unrelat
1111
## Usage
1212

1313
```sh
14-
yarn add vue-codemirror6
14+
yarn add vue-codemirror6 codemirror
1515
```
1616

1717
This component can handle bidirectional binding by `v-model` like a general Vue component.
1818

19-
When using with Vue 2.6, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.
19+
When using with Vue <2.6, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.
2020

2121
```sh
2222
yarn add vue-codemirror6 @vue/composition-api
@@ -26,21 +26,22 @@ For Vue 2.7 or later, import vue directly like Vue3.
2626

2727
### Props
2828

29-
| Props | Type | Information |
30-
| ---------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31-
| basic | boolean | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup). |
32-
| minimal | boolean | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence. |
33-
| dark | boolean | Toggle Darkmode. |
34-
| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
35-
| tab | boolean | Enables tab indentation. |
36-
| 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. |
37-
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
38-
| editable | boolean | When this is set to false, it is similar to `readonly`, except that the cursor is not displayed like the normal pre tag. |
39-
| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
40-
| 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/> |
41-
| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
42-
| 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. |
43-
| lintGutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
29+
| Props | Type | Information |
30+
| ---------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
31+
| basic | boolean | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup). |
32+
| minimal | boolean | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence. |
33+
| dark | boolean | Toggle Darkmode. |
34+
| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
35+
| tab | boolean | Enables tab indentation. |
36+
| 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. |
37+
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
38+
| editable | boolean | When this is set to false, it is similar to `readonly`, except that the cursor is not displayed like the normal pre tag. |
39+
| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
40+
| 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/> |
41+
| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
42+
| 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. |
43+
| lintGutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
44+
| tag | string | HTML tags used in the component. (Default is `div` tag.) |
4445

4546
Notice: `lang` and `linter` can also be set together in `extensions`. This is defined for usability compatibility with past CodeMirrors.
4647

@@ -192,12 +193,14 @@ export default defineComponent({
192193
const phrases: Ref<Record<string, string>> = ref({
193194
// @codemirror/view
194195
'Control character': '制御文字',
195-
// @codemirror/fold
196+
// @codemirror/commands
197+
'Selection deleted': '選択を削除',
198+
// @codemirror/language
196199
'Folded lines': '折り畳まれた行',
197200
'Unfolded lines': '折り畳める行',
198201
to: '行き先',
199202
'folded code': '折り畳まれたコード',
200-
unfold: '折り畳む解除',
203+
unfold: '折り畳みを解除',
201204
'Fold line': '行を折り畳む',
202205
'Unfold line': '行の折り畳む解除',
203206
// @codemirror/search
@@ -209,12 +212,17 @@ export default defineComponent({
209212
previous: '▲',
210213
all: 'すべて',
211214
'match case': '一致条件',
215+
'by word': '全文検索',
212216
regexp: '正規表現',
213217
replace: '置き換え',
214218
'replace all': 'すべてを置き換え',
215219
close: '閉じる',
216220
'current match': '現在の一致',
221+
'replaced $ matches': '$ 件の一致を置き換え',
222+
'replaced match on line $': '$ 行の一致を置き換え',
217223
'on line': 'した行',
224+
// @codemirror/autocomplete
225+
Completions: '自動補完',
218226
// @codemirror/lint
219227
Diagnostics: 'エラー',
220228
'No diagnostics': 'エラーなし',
@@ -236,39 +244,44 @@ export default defineComponent({
236244

237245
## Events
238246

239-
| Event | Description |
240-
| ------- | ---------------------------------------------------------------------------------- |
241-
| ready | When CodeMirror loaded. |
242-
| focus | When focus changed. |
243-
| update | When CodeMirror state changed |
244-
| changed | Value changed. (Please implement with `v-model` unless there is a special reason.) |
247+
| Event | Description |
248+
| ------- | ------------------------------------------------------------------------------------------------------------- |
249+
| ready | When CodeMirror loaded. |
250+
| focus | When focus changed. |
251+
| update | When CodeMirror state changed. Returns [ViewUpdate](https://codemirror.net/docs/ref/#view.ViewUpdate) object. |
252+
| changed | Value changed. (Please implement with `v-model` unless there is a special reason.) |
245253

246254
## Methods
247255

248-
| Method | Description |
249-
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
250-
| selection | Get and set the [EditorSelection](https://codemirror.net/docs/ref/#state.EditorSelection) instance. |
251-
| cursor | Get and set the cursor location. |
252-
| state | Get and set [EditorState](https://codemirror.net/docs/ref/#state.EditorState). |
253-
| focus | Get and set focus. |
254-
| getRange(from?: number, to?: number) | Get the text between the given points in the editor. |
255-
| getLine(number: number) | Get the content of line. |
256-
| lineCount() | Get the number of lines in the editor. |
257-
| getCursor() | Retrieve one end of the primary selection. |
258-
| listSelections() | Retrieves a list of all current selections. |
259-
| getSelection() | Get the currently selected code. |
260-
| getSelections() | The length of the given array should be the same as the number of active selections. |
261-
| somethingSelected() | Return true if any text is selected. |
262-
| replaceRange(replacement: string \| Text, from: number, to: number) | Replace the part of the document between from and to with the given string. |
263-
| replaceSelection(replacement: string \| Text) | Replace the selection(s) with the given string. |
264-
| setCursor(position: number) | Set the cursor position. |
265-
| setSelection(anchor: number, head?: number) | Set a single selection range. |
266-
| setSelections(ranges: readonly SelectionRange[], primary?: number) | Sets a new set of selections. |
267-
| extendSelectionsBy(f: Function) | Applies the given function to all existing selections, and calls extendSelections on the result. |
256+
| Method | Description |
257+
| --------- | --------------------------------------------------------------------------------------------------- |
258+
| selection | Get and set the [EditorSelection](https://codemirror.net/docs/ref/#state.EditorSelection) instance. |
259+
| cursor | Get and set the [cursor](https://codemirror.net/docs/ref/#state.EditorSelection^cursor) location. |
260+
| state | Get and set [EditorState](https://codemirror.net/docs/ref/#state.EditorState). |
261+
| focus | Get and set [focus](https://codemirror.net/docs/ref/#view.EditorView.focus). |
262+
263+
The instructions below are compatible methods for those familiar with [codemirror5](https://codemirror.net/5/). Since the above method is usually sufficient, its active use is not recommended.
264+
265+
| Method | Description |
266+
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
267+
| getRange(from?: number, to?: number) | Get the text between the given points in the editor. |
268+
| getLine(number: number) | Get the content of line. |
269+
| lineCount() | Get the number of lines in the editor. |
270+
| getCursor() | Retrieve one end of the primary selection. |
271+
| listSelections() | Retrieves a list of all current selections. |
272+
| getSelection() | Get the currently selected code. |
273+
| getSelections() | The length of the given array should be the same as the number of active selections. |
274+
| somethingSelected() | Return true if any text is selected. |
275+
| replaceRange(replacement: string \| Text, from: number, to: number) | Replace the part of the document between from and to with the given string. |
276+
| replaceSelection(replacement: string \| Text) | Replace the selection(s) with the given string. |
277+
| setCursor(position: number) | Set the cursor position. |
278+
| setSelection(anchor: number, head?: number) | Set a single selection range. |
279+
| setSelections(ranges: readonly SelectionRange[], primary?: number) | Sets a new set of selections. |
280+
| extendSelectionsBy(f: Function) | Applies the given function to all existing selections, and calls extendSelections on the result. |
268281

269282
## Recommendations
270283

271-
Since CodeMirror has a relatively large capacity, when using vite, it is recommended to set it to output as a separate file using the [`manualChunks`](https://vitejs.dev/guide/build.html#chunking-strategy) option at build time as shown below.
284+
Since CodeMirror has a relatively large capacity, when using [vite](https://vitejs.dev), it is recommended to set it to output as a separate file using the [`manualChunks`](https://vitejs.dev/guide/build.html#chunking-strategy) option at build time as shown below.
272285

273286
```ts
274287
const config: UserConfig = {

0 commit comments

Comments
 (0)