Enable foldGutter for legacy-mode languages

v6
1

Hello, I’m using react-codemirror and I’m trying to enable the foldGutter option for a legacy-mode language.

At first, I tried to enable foldGutter with the javascript language in @codemirror/lang-javascript as you can see in the code below, everything works as expected and the fold gutter appears:

import CodeMirror from "@uiw/react-codemirror";
import { duotoneDark } from "@uiw/codemirror-theme-duotone";

import { javascript } from "@codemirror/lang-javascript";

const text =  `function testFold() {
  // some code
}`

export default function Home() {
  return <CodeMirror
    value={text}
    theme={duotoneDark}
    basicSetup={{
      foldGutter: true,
    }}
    extensions={[javascript()]}
  />
}

But when I switch to the shader export of the '@codemirror/legacy-modes/mode/clike library, or in fact any other legacy-mode language, this option doesn’t seem to work anymore :

import CodeMirror from "@uiw/react-codemirror";
import { duotoneDark } from "@uiw/codemirror-theme-duotone";

import { StreamLanguage } from "@codemirror/language"; // new import
import { shader } from '@codemirror/legacy-modes/mode/clike'; // new import
    
const text =  `function testFold() {
  // some code
}`

export default function Home() {
  return <CodeMirror
    value={text}
    theme={duotoneDark}
    basicSetup={{
      foldGutter: true,
    }}
    extensions={[StreamLanguage.define(shader)]} // using StreamLanguage.define
  />
}

You can also see this behavior on the official react-codemirror page : React CodeMirror - CodeMirror component for React., the foldGutter option works fine for javascript but doesn’t appear for a lot of other languages.

Is there a way to enable this option for legacy-mode languages ?

2

You could add your own fold service that somehow computes foldable ranges from the code, but the built-in folding logic uses the syntax tree structure, which legacy modes don’t produce.