How to use codemirrormerge on json data?.

[divyamohanraju07]

I am working in a project requirement where i need to compare the config files from different deployment environment. I was searching for a difference editor and finalised with codemirror. My data to handle is in json format. When i load it in codemirror merge, my screen is blank with no error indication. I do not know where should i indicate the lang support. Any help here would be gr8.

import React, {useState} from 'react';
import './mergeView.css';
import CodeMirrorMerge from 'react-codemirror-merge';
import { EditorView } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
import { StreamLanguage } from '@codemirror/language';
import {javascript} from '@codemirror/lang-javascript';

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
const original_doc = `{one: to, three: four}`;
const modified_doc = `{One: Two, Three: Four}`;

export const Example = () => {
  const [theme, setTheme] = useState('light');
  return (
    <>
    <CodeMirrorMerge theme={theme === 'light' ? githubLight : githubDark} orientation="b-a">
      <Original value={original_doc} />
      <Modified
        value={modified_doc}
        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
      />
    </CodeMirrorMerge>
    <button className="theme-btn" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Change Theme </button>
    </>
  );
};

[jaywcjlove]

@divyamohanraju07 https://codesandbox.io/embed/react-codemirror-merge-example-https-github-com-uiwjs-react-codemirror-issues-559-y5j59y?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

import CodeMirrorMerge from "react-codemirror-merge";
import "./styles.css";

import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";
import { githubLight } from "@uiw/codemirror-theme-github";
const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
const original_doc = `{\n  one: to, \n  three: four\n}`;
const modified_doc = `{\n  One: Two, \n  Three: Four\n}`;

export default function App() {
  return (
    <div className="App">
      <CodeMirrorMerge theme={githubLight} orientation="b-a">
        <Original value={original_doc} />
        <Modified
          value={modified_doc}
          extensions={[
            EditorView.editable.of(false),
            EditorState.readOnly.of(true)
          ]}
        />
      </CodeMirrorMerge>
    </div>
  );
}