Code folding on curly brace

v6
1

For my use case working with a custom language, I’ve taken a different route and created a custom parser that builds a tree with the given tokens, very similar to what’s done here since i’m working with antlr https://thetrevorharmon.com/blog/connecting-antlr-to-codemirror-6-building-a-language-server/:

buildTree(document) {
    const tokens = this.languageServer.getTokenStream(document);
    if (tokens.length < 1) {
      return Tree.build({
        buffer: [
          this.tokenToNodeType.document.id,
          0,
          document.length,
          DEFAULT_NODE_GROUP_SIZE,
        ],
        nodeSet: parserAdapterNodeSet,
        topID: this.tokenToNodeType.document.id,
      });
    }

    const buffer = this.createBufferFromTokens(tokens);

    return Tree.build({
      buffer: buffer,
      nodeSet: parserAdapterNodeSet,
      topID: this.tokenToNodeType.document.id,
    });
  }

I want to code fold & undfold from open to closing curly brace tokens. I’ve tried parsing through the doc and dispatching folding transactions when finding matching braces, but the gutter icon is removed once it is unfolded (i’m assuming because there isn’t an understanding on what to fold in the language)

view.dispatch({
        effects: foldEffect.of({ from: from, to: to })
    });

Knowing that, I’ve tried attaching a foldNodeProp to the “{” nodeType as a simple test, but even with this, the fold gutters aren’t appearing.

const codeFoldingTags = foldNodeProp.add(
    (type) => {
        if (!type.is("{")) return null
		return (node, state) => {
			let ret = {
				from: node.from,
				to: node.to + 1,
			};
			return ret;
	};
    }
);

export const parserAdapterNodeSet = 
    new NodeSet(Object.values(getTokenToNodeType()))
    .extend(customStyleTags, codeFoldingTags);

I’m thinking of parsing the doc and constructing a list of ranges (from/to) from corresponding open to close matching curly braces, but the problem is the gutter isn’t showing the gutter icons to fold & unfold unless i dispatch the foldEffect or unfoldEffect transactions.

Is there a way to hold the list of “from/to” ranges in the gutter to indicate that these sections are foldable? I’m fine with recomputing these ranges on document changes.

Been stuck on this for a while, any help on ways to code fold on curly braces is appreciated!

1 Like
2

Update: I was able to fold using the foldingService: CodeMirror Reference Manual

2 Likes