Self-Closing Tags causing unrecognized tags after

[shshaw]

Self-Closing tags are causing the tags after to not be correctly parsed for syntax highlighting.

It seems like Lezer (I guess) isn’t correctly parsing that self-closing tags are closed and starts to recognize anything after as “content”. There have to be two self-closing tags together for the syntax highlighting to be compromised.

Maybe it has to do with the parent closing tag?

I’m at a bit of a loss here. I’ve tried isolating things down as much as I can and reducing to just loading HTML from language-data and a simple theme, but the tag detection is still off with self-closing tags.

Unfortunately if I’m just loading lang-html or language-data in some kind of online editor, it doesn’t happen. I suspect it has to do with very specific package versions and some kind of conflict. I’m already doing a lot to try to lock in specific versions to prevent conflicts and it doesn’t seem like I have any mis-matched versions when I do yarn list.

Any ideas? I’ve exhausted my knowledge of how to fix or debug this problem.

[shshaw]

Here’s a CodeMirror Try sample that does not have the issue.

If I take that exact code and run it in my environment with the packages listed above, I get the issue.

As I suspect it has to do with dependencies, I’m not quite sure how to test or isolate that.

I’ve cleared the yarn cache and done fresh downloads / installs, but still not working.

[marijn]

@lezer/xml is at 1.0.5. I’m not sure why you are getting 1.0.1 on a fresh install. (I recommend dropping yarn for npm in general — recent npm versions do most of the things that yarn can do, and are less buggy.)

[shshaw]

Forced an update of @lezer/xml to 1.0.5 (via resolutions) and same issue.

For good measure, I’ve also updated all the CodeMirror dependencies to the latest versions.

yarn list --pattern 'lezer|codemirror'
yarn list v1.18.0
├─ @codemirror/autocomplete@6.13.0
├─ @codemirror/commands@6.3.3
├─ @codemirror/lang-angular@0.1.3
├─ @codemirror/lang-cpp@6.0.2
├─ @codemirror/lang-css@6.2.1
├─ @codemirror/lang-html@6.4.8
├─ @codemirror/lang-java@6.0.1
├─ @codemirror/lang-javascript@6.2.2
├─ @codemirror/lang-json@6.0.1
├─ @codemirror/lang-less@6.0.2
├─ @codemirror/lang-liquid@6.2.1
├─ @codemirror/lang-markdown@6.2.4
├─ @codemirror/lang-php@6.0.1
├─ @codemirror/lang-python@6.1.4
├─ @codemirror/lang-rust@6.0.1
├─ @codemirror/lang-sass@6.0.2
├─ @codemirror/lang-sql@6.6.1
├─ @codemirror/lang-vue@0.1.3
├─ @codemirror/lang-wast@6.0.2
├─ @codemirror/lang-xml@6.1.0
├─ @codemirror/lang-yaml@6.0.0
├─ @codemirror/language-data@6.4.1
├─ @codemirror/language@6.10.1
├─ @codemirror/legacy-modes@6.3.3
├─ @codemirror/lint@6.5.0
├─ @codemirror/search@6.5.6
├─ @codemirror/state@6.4.1
├─ @codemirror/theme-one-dark@6.1.2
├─ @codemirror/view@6.25.1
├─ @lezer/common@1.2.1
├─ @lezer/cpp@1.1.2
├─ @lezer/css@1.1.8
├─ @lezer/highlight@1.2.0
├─ @lezer/html@1.3.9
├─ @lezer/java@1.1.1
├─ @lezer/javascript@1.4.13
├─ @lezer/json@1.0.2
├─ @lezer/lr@1.4.0
├─ @lezer/markdown@1.2.0
├─ @lezer/php@1.0.2
├─ @lezer/python@1.1.11
├─ @lezer/rust@1.0.2
├─ @lezer/sass@1.0.4
├─ @lezer/xml@1.0.5
├─ @lezer/yaml@1.0.2
├─ codemirror@6.0.1

I’d love to upgrade yarn or switch to npm, but that’s just not possible in this project.

Given the packages are all up to date, is there anything else that might cause this or a further way to debug?

[marijn]

@shshaw

Forced an update of @lezer/xml to 1.0.5 (via resolutions) and same issue.

That’s not the same issue. Those aren’t SVG tags. HTML doesn’t support self-closing tags. You can turn it on with an option to html(), but browsers don’t work this way.

[shshaw]

Ah. You are correct. Forcing the package resolution updates does seem to have resolved the SVG issue. Thank you.

Which option are you referring to for HTML self-closing tags? Wasn’t immediately obvious from the config: GitHub - codemirror/lang-html: HTML language support for the CodeMirror code editor

[marijn]

Oh, right, that’s not exposed directly yet. You have to enable the "selfClosing" dialect in the HTML parser (htmlLanguage.configure({dialect: "selfClosing"})) to get this behavior.