feat: codemirror linting system

components/smart/CodeMirror.vue

@@ -7,13 +7,20 @@ import "codemirror/mode/javascript/javascript"
 
 import { ref, watch } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
+import { LinterDefinition } from "~/helpers/editor/linting/linter"
 
-const props = defineProps<{
+const props = withDefaults(
-  value: string
+  defineProps<{
-  mode: string
+    value: string
-  placeholder: string
+    mode: string
-  wrap: boolean
+    placeholder: string
-}>()
+    wrap: boolean
+    linter: LinterDefinition | null
+  }>(),
+  {
+    linter: null as any,
+  }
+)
 
 const emit = defineEmits<{
   (e: "input", value: string): void
@@ -30,7 +37,10 @@ watch(value, (val) => emit("input", val))
 const editor = ref<any | null>(null)
 
 useCodemirror(editor, value, {
-  mode: props.mode,
+  extendedEditorConfig: {
+    mode: props.mode,
+  },
+  linter: props.linter,
 })
 </script>
 

helpers/editor/codemirror.ts

@@ -3,6 +3,7 @@ import CodeMirror from "codemirror"
 import "codemirror/theme/juejin.css"
 
 import "codemirror/lib/codemirror.css"
+import "codemirror/addon/lint/lint.css"
 
 import "codemirror/addon/fold/foldgutter.css"
 import "codemirror/addon/fold/foldgutter"
@@ -10,11 +11,18 @@ import "codemirror/addon/fold/brace-fold"
 import "codemirror/addon/fold/comment-fold"
 import "codemirror/addon/fold/indent-fold"
 import "codemirror/addon/display/autorefresh"
+import "codemirror/addon/lint/lint"
 
 import { watch, onMounted, ref, Ref } from "@nuxtjs/composition-api"
+import { LinterDefinition } from "./linting/linter"
 
 const DEFAULT_THEME = "juejin"
 
+type CodeMirrorOptions = {
+  extendedEditorConfig: CodeMirror.EditorConfiguration
+  linter: LinterDefinition | null
+}
+
 const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
   theme: DEFAULT_THEME,
   autoRefresh: true,
@@ -35,15 +43,22 @@ const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
 export function useCodemirror(
   el: Ref<any | null>,
   value: Ref<string>,
-  options: CodeMirror.EditorConfiguration
+  options: CodeMirrorOptions
 ) {
   const cm = ref<CodeMirror.Editor | null>(null)
 
   // Boot-up CodeMirror, set the value and listeners
   onMounted(() => {
-    cm.value = CodeMirror(el.value!, { ...DEFAULT_EDITOR_CONFIG, ...options })
+    cm.value = CodeMirror(el.value!, {
+      ...DEFAULT_EDITOR_CONFIG,
+      ...options.extendedEditorConfig,
+    })
     cm.value.setValue(value.value)
 
+    if (options.linter) {
+      cm.value.setOption("lint", options.linter)
+    }
+
     cm.value.on("change", (instance) => {
       // External update propagation (via watchers) should be ignored
       if (instance.getValue() !== value.value) {

helpers/editor/linting/linter.ts

@@ -0,0 +1,7 @@
+export type LinterResult = {
+  message: string
+  severity: "warning" | "error"
+  from: { line: number; ch: number }
+  to: { line: number; ch: number }
+}
+export type LinterDefinition = (text: string) => Promise<LinterResult[]>

helpers/editor/utils.ts

@@ -0,0 +1,23 @@
+export function convertIndexToLineCh(
+  text: string,
+  i: number
+): { line: number; ch: number } {
+  const lines = text.split("/n")
+
+  let line = 0
+  let counter = 0
+
+  while (line < lines.length) {
+    if (i > lines[line].length + counter) {
+      counter += lines[line].length + 1
+      line++
+    } else {
+      return {
+        line: line + 1,
+        ch: i - counter + 1,
+      }
+    }
+  }
+
+  throw new Error("Invalid input")
+}