I am trying to fold ATX heading of a markdown language using foldNodeProp
. But, it does not seem to work for ATX heading.
The following code is for illustrative purposes only. I expected logs starting with ‘B’ to be output for ATX heading also, but in fact only Setex heading was output.
How do I make ATX heading foldable?
Thanks in advance
language.js:
import { Language, defineLanguageFacet, languageDataProp, foldNodeProp, indentNodeProp } from '@codemirror/language';
import { parser as baseParser } from '@lezer/markdown';
const data = defineLanguageFacet({block: {open: "<!--", close: "-->"}})
function mkLang(parser) {
return new Language(data, parser, parser.nodeSet.types.find(t => t.name == "Document"));
}
const parser = baseParser.configure({
props: [
foldNodeProp.add((type) => {
if (type.name.startsWith('ATXHeading') || type.name.startsWith('SetextHeading')) {
console.log(`A: ${type.name}`);
return (tree, state) => {
console.log(`B: ${tree.type.name}`);
return { from: state.doc.lineAt(tree.from).to, to: tree.to };
};
}
if (!type.is('Block') || type.is('Document')) return undefined;
return (tree, state) => ({ from: state.doc.lineAt(tree.from).to, to: tree.to });
}),
indentNodeProp.add({
Document: () => null,
}),
languageDataProp.add({
Document: data,
}),
],
});
const language = mkLang(parser);
export default language;
main.js:
import { basicSetup, EditorView } from '@codemirror/basic-setup';
import { EditorState } from '@codemirror/state';
import { markdown } from '@codemirror/lang-markdown';
import language from './language';
const doc =
`# ATX heading 1
## ATX heading 2
Setext heading 1
=========
Setext heading 2
---------
`
const state = EditorState.create({
doc,
extensions: [
basicSetup,
markdown({
base: language,
}),
]
})
const view = new EditorView({
state,
parent: document.body
});
output:
A: ATXHeading1
A: ATXHeading2
A: ATXHeading3
A: ATXHeading4
A: ATXHeading5
A: ATXHeading6
A: SetextHeading1
A: SetextHeading2
B: SetextHeading1
B: SetextHeading2