foldGutter not working with legacy-mode languages

[kishimisu]

Here is a basic component that renders fold gutters fine. You can see that I'm importing the language from @codemirror/lang-javascript:

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()]}
  />
}

However if I try to import it from @codemirror/legacy-modes/mode/javascript I can't see any fold gutter :

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

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

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

I originally had this issue with the shader mode of the clike legacy-mode language, and unlike javascript I didn't find it elsewhere than in the legacy-mode languages.

[jaywcjlove]

@indiana-dev This question, you can go to the official forum to find the answer. https://discuss.codemirror.net/

[kishimisu]

It really seems to be an issue with react-codemirror, even on the demo page https://uiwjs.github.io/react-codemirror/ if you select for example the "scala" language, you'll see that turning on and off the foldGutter option doesn't work as expected.

I also tried to set the mode property inside the options attribute to the correct MIME type but it doesn't seem to have any effect.

[jaywcjlove]

@indiana-dev https://github.com/codemirror/legacy-modes

[ludusrusso]

Is there any workaround on this? I need folding for a yaml editor but I do not find a way to enable it due to the legacy mode.

[kangactor123]

Is there any workaround on this? I need folding for a yaml editor but I do not find a way to enable it due to the legacy mode.

Me either, I need folding for a yaml editor.. I tried to this, it didn't work.

<CodeViewer extensions={[langs.yaml()]} value={YAML.stringify(data)} editable={false} readOnly={true} basicSetup={{ foldGutter: true, }} />