Skip to content

Commit

Permalink
Fix for #17.
Browse files Browse the repository at this point in the history 
TODO: diagnosticCount does not work properly.
  • Loading branch information
@logue
logue committed Mar 23, 2023
1 parent a8fc27b commit 5a45c9d
Show file tree
Hide file tree
Showing 4 changed files with 274 additions and 127 deletions.
42 changes: 31 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,20 +321,40 @@ export default defineComponent({
| update | When CodeMirror state changed. Returns [ViewUpdate](https://codemirror.net/docs/ref/#view.ViewUpdate) object. |
| change | Value changed. Returns [EditorState](https://codemirror.net/docs/ref/#state.EditorState) |

## Methods
## Parameter / Function

| Method | Description |
| ---------------- | --------------------------------------------------------------------------------------------------- |
| selection | Get and set the [EditorSelection](https://codemirror.net/docs/ref/#state.EditorSelection) instance. |
| cursor | Get and set the [cursor](https://codemirror.net/docs/ref/#state.EditorSelection^cursor) location. |
| state | Get and set [EditorState](https://codemirror.net/docs/ref/#state.EditorState). |
| focus | Get and set [focus](https://codemirror.net/docs/ref/#view.EditorView.focus). |
| lint | Force run linter (Only if `linter` prop is specified) |
| forceReconfigure | Re register all extensions. |
```vue
<script setup lang="ts">
import { ref, onMounted, type Ref, type PropType } from 'vue';
import CodeMirror from 'vue-codemirror6';
const cm: Ref<InstanceType<typeof CodeMirror> | undefined> = ref();
onMounted(() => {
console.log(cm.value?.json);
});
</script>
<template>
<code-mirror ref="cm" />
</template>
```

| Function / Parameter | Description |
| -------------------- | --------------------------------------------------------------------------------------------------- |
| selection | Get and set the [EditorSelection](https://codemirror.net/docs/ref/#state.EditorSelection) instance. |
| cursor | Get and set the [cursor](https://codemirror.net/docs/ref/#state.EditorSelection^cursor) location. |
| state | Get and set [EditorState](https://codemirror.net/docs/ref/#state.EditorState). |
| json | Get and set state to a JSON-serializable object. |
| focus | Get and set [focus](https://codemirror.net/docs/ref/#view.EditorView.focus). |
| lint | Force run linter (Only if `linter` prop is specified) |
| forceReconfigure | Re register all extensions. |

### CodeMirror5 backward compatible functions

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.
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**.

| Method | Description |
| Function | Description |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| getRange(from?: number, to?: number) | Get the text between the given points in the editor. |
| getLine(number: number) | Get the content of line. |
Expand Down
89 changes: 51 additions & 38 deletions src-docs/components/LinterAndCrossBindingDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@
import { ref, type Ref } from 'vue';
import CodeMirror from 'vue-codemirror6';
import { diagnosticCount, type Diagnostic } from '@codemirror/lint';
import { esLint, javascript } from '@codemirror/lang-javascript';
// @ts-ignore
import eslint from 'eslint-linter-browserify';
import type { EditorView, ViewUpdate } from '@codemirror/view';
import type { LintSource } from '@codemirror/lint';
// Sync Dark mode
defineProps({ dark: Boolean });
/** CodeMirror Instance */
const cm: Ref<InstanceType<typeof CodeMirror> | undefined> = ref();
/** Demo code */
const value: Ref<string> = ref(`document.querySelectorAll('.btn').forEach(
Expand All @@ -22,7 +27,7 @@ const errorCount: Ref<number> = ref(0);
*
* @see {@link https://github.com/UziTech/eslint-linter-browserify#eslint-linter-browserify}
*/
const linter: (view: EditorView) => Diagnostic[] = esLint(
const linter: LintSource = esLint(
// eslint-disable-next-line
new eslint.Linter(),
{
Expand All @@ -37,57 +42,65 @@ const linter: (view: EditorView) => Diagnostic[] = esLint(
}
);
// Sync Dark mode
defineProps({ dark: Boolean });
/** Get ViewUpdate for update lint error count. */
const onUpdate = (update: ViewUpdate) => {
if (!update.docChanged) {
return;
}
errorCount.value = diagnosticCount(update.state);
};
/** Detect Error Count */
const onHasError = (v: number) => (errorCount.value = v);
</script>

<!-- eslint-disable vuejs-accessibility/label-has-for -->
<template>
<div class="row">
<div class="col-6 mb-3">
<div class="col-6">
<code-mirror
ref="cm"
v-model="value"
:dark="dark"
:lang="javascript()"
:linter="linter"
basic
class="mb-3"
gutter
wrap
@update="onUpdate"
@has-error="onHasError"
/>
<div class="row mb-3">
<div class="col-6">
<div class="input-group">
<label for="count" class="input-group-text">Count</label>
<input
id="count"
type="text"
:value="cm?.length"
class="form-control"
/>
</div>
</div>
<div class="col-6">
<div class="input-group">
<label for="diagnosticCount" class="input-group-text">
Diagnostic Count
</label>
<input
id="diagnosticCount"
type="number"
class="form-control"
:value="cm?.diagnosticCount"
readonly
/>
</div>
</div>
</div>
</div>
<div class="col-6 mb-3">
<div class="col-6">
<!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label, vue/html-self-closing -->
<textarea v-model="value" rows="4" class="form-control"></textarea>
</div>
<div class="col-12 mb-3">
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
<label for="count" class="visually-hidden">Linter Error Count</label>
<div class="input-group">
<div class="input-group-text">Linter Error Count</div>
<input
id="count"
type="number"
class="form-control"
:value="errorCount"
readonly
/>
</div>
<p>
<kbd>Ctrl-Shift-m</kbd>
(
<kbd>Cmd-Shift-m</kbd>
on macOS) to show lint panel.
<kbd>F8</kbd>
key shows the next error.
</p>
</div>
</div>
<p>
<kbd>Ctrl-Shift-m</kbd>
(
<kbd>Cmd-Shift-m</kbd>
on macOS) to show lint panel.
<kbd>F8</kbd>
key shows the next error.
</p>
</template>
12 changes: 11 additions & 1 deletion src-docs/components/MarkdownDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import CodeMirror from 'vue-codemirror6';
import VueMarkdown from 'vue-markdown-wasm';
import { markdown } from '@codemirror/lang-markdown';
/** CodeMirror Instance */
const cm: Ref<InstanceType<typeof CodeMirror> | undefined> = ref();
/** Demo text */
const input: Ref<string> = ref(`# The quick brown fox jumps over the lazy dog.
Expand All @@ -20,7 +23,14 @@ defineProps({ dark: Boolean });
<template>
<div class="row">
<div class="col-6">
<code-mirror v-model="input" :dark="dark" :lang="markdown()" wrap basic />
<code-mirror
ref="cm"
v-model="input"
:dark="dark"
:lang="markdown()"
wrap
basic
/>
</div>
<div class="col-6">
<vue-markdown v-model="input" class="markdown-body" />
Expand Down
Loading

0 comments on commit 5a45c9d

Please sign in to comment.