Can I enhance an existing language's parser configuration

Goal

I’d like to be able to fold everything in the <details> and </details> but I’d not sure where to start.

Essentially I want add a foldable range.

<details>
  <summary>see more</summary>

# My heading

blah blah

</details>

I can see lots of promising fold APIs but I’m struggling to understand how they would “plug in” to achieve this.

Things I’ve tried

Enhancing Parser

I found some example code to config folding in a parser:

What follows was my attempt to modify the markdown language parser behaviour BUT I’m not sure

  1. if I can even modify parsers using this config
  2. if HTMLBlock is already folding, but the node ends when the markdown starts i.e. # My heading
new EditorView({
  extensions: [
    markdown({
      extensions: [{
          props: [
            foldNodeProp.add({
              HTMLBlock: foldInside,
              HTMLTag: foldInside
            })]}]}),
    ...extensions
  ]
})

Using foldGutter

So my second attempt used foldGutter() configuration - but this seems to modify how fold gutters render.

Research

Then I found more example code, that calls foldAll. But I’m not sure where this “plugs into” the editor. Nor am I sure how I can calculate my own foldable range.

I found this foldEffect code, but this seems to be AFTER the initial fold range is calc’d

The way Markdown parses HTML (stopping an HTML block as soon as it encounters an empty line) means that there is no syntax node covering the entire <details> tag in the parse tree, so that the syntax based folding doesn’t work for it.

You could try adding a fold service that recognizes that there’s an open tag on the given line, and finds the corresponding close tag by scanning the text, I guess.

1 Like