feat: codemirror linting system

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")
+}