uiwjs / uiwjs/react-codemirror

JSON sometimes doesn't have folding arrows.

Open
#664 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
161
PR merge metrics
No merged PRs in 30d

Description

What I see

I found that in my local development environment, there is no collapse arrow in front of some variables.
image

What I expect

I found that in online demo env(https://uiwjs.github.io/react-codemirror/#/extensions/languages), it works well.
image

How I use it

import CodeMirror from '@uiw/react-codemirror'; // https://github.com/uiwjs/react-codemirror
import { githubLight } from '@uiw/codemirror-theme-github'; // https://uiwjs.github.io/react-codemirror/#/theme/data/github/light
import {
  loadLanguage,
  langNames,
  langs,
} from '@uiw/codemirror-extensions-langs';

<CodeMirror
  value={data}
  readOnly={true}
  height="80vh"
  width="90vw"
  extensions={[githubLight, loadLanguage('json')]}
/>
"@uiw/codemirror-extensions-langs": "^4.22.2",
"@uiw/codemirror-theme-github": "^4.22.2",
"@uiw/react-codemirror": "^4.22.2",

Reproduce

codesandbox
Thanks in advance!

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and the JSON setup using loadLanguage('json'), then compare it with the online languages demo where folding works. Trace the CodeMirror JSON language and folding configuration to identify the environment difference; done means collapsible JSON variables consistently show folding arrows in the local reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.