Javascript expressions language extension

v6
1

Hi everyone.
I have currently in a need of a very specific tool. I have input/textarea field were user is allowed to type plaintext/html. I want to add js expressions so user can insert context or own created variables. So in general case value will look something like this
“Hi {{context.team.name.toUpperCase()}}. My name is {{context.user.fullName}}. I have scheduled a meeting on {{getDay(context.meeting.date)}} …”.
So to be able to accomplish this, as I understand, I need a parser, but not with whole js syntax, but only with js expressions, basically everything allowed in template literals. Also I want to have autocompletion for provided context.
I was trying to find something similar. Felt like this is pretty common use case. But failed. So apparently I have to write my own parser, extension etc.
I’m completely new to CodeMirror. Can someone guide me on how to accomplish this. Maybe some parts I don’t need to create from scratch? Maybe I’m missing something and thinking in wrong direction?

Please advise.
Thank you.

2

This sounds extremely close to the mixed language parsing example. You can use mixed parsing to use the existing JS parser for your expressions, you’ll just need to use an outer grammar that parses the brace notation.

3

Thank you for the help.
I’ve read the article and a few other articles about code mirror and lezer.
I’ve played a bit with this mixed language stuff. And have several issues/questions.

  1. The problem I see is that html parser doesn’t have ‘{{ }}’ node. So basically I can’t do something like
parseMixed((node) => node.name === 'DoubleBracket' ? {parser: jsParser} : null),

As I understand I have to create my own html parser which will nave a ‘{{ }}’ node. Or maybe there is a way how I can extend standard html parser.

  1. The example in the article assumes that I create my own code mirror extension, so basically if I want it to behave completely the same as the default @codemirror/lang-html but with this additional DoubleBracket node I have to fork it or there is some way to extend it?

  2. Similar question related to javascript extension. I don’t need whole js syntax highlighting/autocompletion, only the expression part. I’ve noticed that @lezer/javascript has a SingleExpression rule, but @codemirror/lang-javascript extension doesn’t allow to set it. So as I understand I have to create my own lang-javascript extension which will support only SingleExpression mode?

Sorry if my questions sound stupid, as I said I’m really new to code mirror and language parsers in general. And just trying to find the simple and fast way to implement needed functionality.

4

The idea would be for your outer parser to divide the document into HTML/JS parts, and feed those to the parsers from the lang- packages. You can use javascript().language.configure to set a top level rule name to the parser from lang-javascript.