codemirror-json5

codemirror-json5

This package implements JSON5 support for Codemirror 6.

Beyond the basic support, it provides a linter and state fields that expose:

• The parsed object produced by the JSON5 parser, so that your surrounding code can use that result instead of parsing it twice.
• The path in the object that the cursor is on.

Usage

import { json5, json5ParseLinter } from 'codemirror-json5';
import { linter } from '@codemirror/lint';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';

const view = new EditorView({
  state: EditorState.create({
    doc: `{ a_doc: 'goes here' }`,
    extensions: [
      json5(),
      linter(json5ParseLinter()),
    ]
  })
});

Retrieving Editor State

import { EditorState } from '@codemirror/state';
import { jsonCursorPath, json5ParseCache } from 'codemirror-json5';
import get from 'just-safe-get';

function getJson5Info(state: EditorState) {
  const object = state.field(json5ParseCache);
  const { path } = state.field(jsonCursorPath);

  return {
    parsed: object.obj,
    parseError: object.err,
    cursorPath: path,
    cursorValue: get(object.obj ?? {}, path),
  };
}