CODEWITHSUNDEEP
javascriptreactjsjsoncode-editorreact-monaco-editor
Yash Bhomle
Yash Bhomle

Reputation: 1

JSON Expand/Collapse Functionality Not Working

The expand and collapse functionality for JSON is not working as expected. When attempting to expand or collapse the JSON data, no action takes place, and the data remains static. This issue is preventing users from navigating large JSON files efficiently.

I am using vite (vite-plugin-monaco-editor).

`plugins: [
    react(),
    eslint(),
    MonacoEditorPlugin({
      languageWorkers: ['json'],
    }),
  ],`

Below is react code :

import MonacoEditor from 'react-monaco-editor';

    export const CodeEditor = () => {
     const jsonCode = `{
        "employee": {
        "name": "sonoo",
        "salary": 56000,
        "married": true
    }
  }`;

  /**
   * formatJSON
   */
  function formatJSON(val: string) {
    try {
      const res = JSON.parse(val);
      return JSON.stringify(res, null, 2);
    } catch {
      const errorJson = {
        error: `非法返回${val}`,
      };
      return JSON.stringify(errorJson, null, 2);
    }
  }

  return (
    <>
      <MonacoEditor
        height="600"
        language="json"
        options={{
          readOnly: true,
          automaticLayout: true,
          folding: true, // Ensure folding is enabled
          scrollBeyondLastLine: false,
          minimap: { enabled: false },
        }}
        value={formatJSON(jsonCode)}
        width="800"
      />
    </>
  );
};

Json should be render correctly also expand and collapse feature should work.

Upvotes: 0

Views: 36

Answers (1)

Priyagpari Goswami
Priyagpari Goswami

Reputation: 1

Enable readOnly Without Affecting Folding

A common approach is to simulate read-only behavior by disabling specific commands instead of setting readOnly: true. This allows folding to work.

You can replace:

options={{
  readOnly: true,
  automaticLayout: true,
  folding: true,
  scrollBeyondLastLine: false,
  minimap: { enabled: false },
}}

With This:

options={{
  automaticLayout: true,
  folding: true,
  scrollBeyondLastLine: false,
  minimap: { enabled: false },
  readOnly: false, // Important: Remove readOnly
}}
editorDidMount={(editor) => {
  // Disable editing via custom logic
  editor.onDidChangeModelContent(() => {
    editor.getModel()?.undo();
  });
  editor.updateOptions({ readOnly: false }); // Ensure it's still editable to support folding
}}

This approach effectively prevents editing but keeps the editor in a state where folding works.

Upvotes: 0

Related Questions