How to get folded source code inside foldWidget.toDOM() from @codemirror/fold

loredanacirstea · September 15, 2021, 4:15pm

I am looking at @codemirror/fold as inspiration for an extension I want to write.
Instead of having a <span>...</span> element replacing the folded code, I want to have another codemirror editor instance containing the folded code.

Changing foldWidget.toDOM() to return an editor instance works. But I cannot figure out from where to get the folded code for that line, from within the toDOM function

github.com

codemirror/fold/blob/9674d8e783483524708cee4b268e4cbbce098571/src/fold.ts#L181

    
      
          export function codeFolding(config?: FoldConfig): Extension {
            let result = [foldState, baseTheme]
            if (config) result.push(foldConfig.of(config))
            return result
          }
          
          
const foldWidget = Decoration.replace({widget: new class extends WidgetType {
            ignoreEvents() { return false }
          
          
  toDOM(view: EditorView) {
              let {state} = view, conf = state.facet(foldConfig)
              if (conf.placeholderDOM) return conf.placeholderDOM()
              let element = document.createElement("span")
              element.textContent = conf.placeholderText
              element.setAttribute("aria-label", state.phrase("folded code"))
              element.title = state.phrase("unfold")
              element.className = "cm-foldPlaceholder"
          
          
    element.onclick = event => {
                let line = view.visualLineAt(view.posAtDOM(event.target as HTMLElement))
                let folded = foldInside(view.state, line.from, line.to)

The API used in element.onclick: let line = view.visualLineAt(view.posAtDOM(event.target)) does not work outside the event handler and fails with Uncaught RangeError: Trying to find position for a DOM position outside of the document.

loredanacirstea · September 15, 2021, 7:34pm

I figured it out. I wrapped foldWidget in a function that receives the folded source code as a parameter.
And changed folded = folded.update({add: [foldWidget.range(e.value.from, e.value.to)]}) to:

let code = tr.state.doc.slice(e.value.from, e.value.to);
folded = folded.update({add: [foldWidget({code}).range(e.value.from, e.value.to)]})

github.com

codemirror/fold/blob/9674d8e783483524708cee4b268e4cbbce098571/src/fold.ts#L42

    
      
          }
          
          
const foldState = StateField.define<DecorationSet>({
            create() {
              return Decoration.none
            },
            update(folded, tr) {
              folded = folded.map(tr.changes)
              for (let e of tr.effects) {
                if (e.is(foldEffect) && !foldExists(folded, e.value.from, e.value.to))
                  folded = folded.update({add: [foldWidget.range(e.value.from, e.value.to)]})
                else if (e.is(unfoldEffect))
                  folded = folded.update({filter: (from, to) => e.value.from != from || e.value.to != to,
                                          filterFrom: e.value.from, filterTo: e.value.to})
              }
              // Clear folded ranges that cover the selection head
              if (tr.selection) {
                let onSelection = false, {head} = tr.selection.main
                folded.between(head, head, (a, b) => { if (a < head && b > head) onSelection = true })
                if (onSelection) folded = folded.update({
                  filterFrom: head,

marijn · September 15, 2021, 10:12pm

Yes, that works. toDOM should just render the data that’s already in the widget object, not access anything external.