Hey - I’m mostly suggesting this because I wanted to share my experience that I had with CM6 where I had significant, mysterious issues implementing it on my site. I figured this would be the sorta thing that would go into a troubleshooting section.
Anyways, the issue was that I was having bizarre errors where seemingly CodeMirror was treating various objects as, well, not what they were.
The exact expression that tipped me off was pretty much like this:
// pretend this TreeBuffer object was
// found / instantiated somewhere earlier in the code
const treeBuffer: TreeBuffer;
if (treeBuffer instanceof TreeBuffer ) { ... } // this is somehow false
else { ... } // code breaks here
console.log(treeBuffer.constructor)
// output: TreeBuffer
What was happening was that due to web bundling / dependency resolution, in my case with Snowpack, the externally loaded extension that I was creating was actually importing a wholly separate instance of CM6. That means that the treeBuffer
object was not an instance of TreeBuffer
, it was an instance of another TreeBuffer
!
The way I fixed this, and I assume how you’d fix this in any other bundler, is that I forced Snowpack to deduplicate CodeMirror dependencies, e.g. CodeMirror itself and Lezer. (BTW: Snowpack, in its backend, uses Rollup to install modules, so really I told Rollup to deduplicate.)
The errors that I was getting did not make it immediately obvious whatsoever that this is what was happening, so I feel like an article documenting errors like this could be helpful. I’m not sure if any changes in how CodeMirror is authored would help here, so I’m not suggesting that.
Everything works pretty good now!
PS: Could we get a NPM package that basically re-exports all official CM6 languages? The reason I request this is that when you’re using CM6 for say, authoring Markdown that has embedded code blocks, you basically just want to import every language you can because it’s nice to have. When you do this however, your package.json
has a giant @codemirror
section filled with language dependencies. Having a package just kinda do this for me would be great, and if additional languages come out, it would automatically be made available whenever the dependency was updated in the project.
Sorta related: This is honestly really tempting me to hammer out a super-lightweight Prism highlighter for CM6, with the intended use-case being for things like comment boxes and really lightweight instances of CM6, with few extensions. I think I’d make it not even fake a syntax tree, it would just be a separate highlighting plugin. It doesn’t seem too difficult to do due to the range-shenanigans infrastructure set up in CM6, which is pretty cool.