Migrate Monaco settings editor to the code mirror editor

So in the past we already migrated our search box UI from monaco to the code mirror implementation thanks to @fkling. Now we want to migrate other parts of the product to it. But there are a few blockers

JSON schema validation, I was afraid that due to JSONC format that we use we can't just use a standard JSON schema validation parser, but I was wrong, we actually don't need to handle comments ourself or prepare json by deleting the comments. Standard JSON schema validation handles it, it just skips the comment but respects line and column position accordingly in case if they are somewhere after comments line.
JSONC (json with comments) format. At the moment code mirror doesn't support it out of the box, so we should support it on the consumer level, but gladly code mirror API allows to provide any custom grammar our imperative description of the grammar to support any context-free language (in theory you can support any language, it's always about grammar definition complexity. Back to jsonc format, it simple JSON but with two possible ways to define comments
- standard inline comment starts // and ends with EOL symbol \n
- standard block-based comment with /* .... */
So to define grammar I think we should pick Lezer package. It appears to be a standard way for code mirror to define lang grammars. So for example JSON with comments grammar may looks like this

@top JsonText { value }

value { True | False | Null | Number | String | Object | Array }

String { string }
Object { "{" list<Property>? "}" }
Array  { "[" list<value>? "]" }

Property { PropertyName ":" value }
PropertyName { string }

@tokens {
  True  { "true" }
  False { "false" }
  Null  { "null" }

  Number { '-'? int frac? exp?  }
  int  { '0' | $[1-9] @digit* }
  frac { '.' @digit+ }
  exp  { $[eE] $[+\-]? @digit+ }

  string { '"' char* '"' }
  char { $[\u{20}\u{21}\u{23}-\u{5b}\u{5d}-\u{10ffff}] | "\\" esc }
  esc  { $["\\\/bfnrt] | "u" hex hex hex hex }
  hex  { $[0-9a-fA-F] }

  whitespace { $[ \n\r\t] }

  "{" "}" "[" "]"
}

@skip { whitespace | Comment }
@skip {} {
  Comment { "/*" (commentContent | commentLineBreak)* commentEnd }
}

@local tokens {
  commentEnd { "*/" | @eof }
  commentLineBreak { "\n" }
  @else commentContent
}

list<item> { item ("," item)* }

@external propSource jsonHighlighting from "./highlight"

@detectDelim

sourcegraph / sourcegraph-public-snapshot

Migrate Monaco settings editor to the code mirror editor #54772